So many changes in one commit.

.gitignore

@@ -4,6 +4,9 @@ data/music/*.webp
 data/music/*.ogg*
 __pycache__
 settings.py
+data/*
+!data/agents.txt
+venv/
 ircradio/static/favicons/
 ircradio/favicon.ico
 ircradio/site.manifest

ircradio.pid

@@ -0,0 +1 @@
+1797

ircradio/routes.py

@@ -1,9 +1,13 @@
 # SPDX-License-Identifier: BSD-3-Clause
 # Copyright (c) 2021, dsc@xmr.pm
 
+import asyncio
 from datetime import datetime
 from typing import Tuple, Optional
-from quart import request, render_template, abort, jsonify
+from quart import request, render_template, abort, jsonify, Response, websocket
+
+import time
+import json
 
 import settings
 from ircradio.factory import app
@@ -108,3 +112,27 @@ async def user_library():
         by_karma = []
 
     return await render_template("library.html", name=name, by_date=by_date, by_karma=by_karma)
+
+
+@app.websocket("/ws")
+async def np():
+    last_song = ""
+    while True:
+
+        """get current song from history"""
+        history = Radio.history()
+        val = ""
+        if not history:
+            val = f"Nothing is playing?!"
+        else:
+            song = history[0]
+            val = song.title
+
+        if val != last_song:
+            data = json.dumps({"now_playing": val})
+            await websocket.send(f"{data}")
+
+        last_song = val
+
+        await asyncio.sleep(5)
+

ircradio/site.webmanifest

@@ -0,0 +1,19 @@
+{
+    "name": "IRC!Radio ala Scoob!",
+    "short_name": "IRC!Radio ala Scoob!",
+    "icons": [
+        {
+            "src": "/favicons/android-chrome-192x192.png",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/favicons/android-chrome-512x512.png",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#ffffff",
+    "background_color": "#ffffff",
+    "display": "standalone"
+}

ircradio/static/search.js

@@ -0,0 +1,79 @@
+// tracks input in 'search' field (id=general)
+let input_so_far = "";
+
+// cached song list and cached queries
+var queries = [];
+var songs = new Map([]);
+
+// track async fetch and processing
+var returned = false;
+
+$("#general").keyup( function() {
+
+  input_so_far = document.getElementsByName("general")[0].value;
+
+  if (input_so_far.length < 3) { 
+    $("#table tr").remove();
+    return 
+  };
+
+  if (!queries.includes(input_so_far.toLowerCase() ) ) {
+    queries.push(input_so_far.toLowerCase() );
+    returned = false;
+
+    const sanitized_input = encodeURIComponent( input_so_far );
+    const url = 'https://' + document.domain + ':' + location.port + '/search?name=' + sanitized_input + '&limit=15&offset=0'
+
+    const LoadData = async () => {
+      try {
+        const res = await fetch(url);
+        console.log("Status code 200 or similar: " + res.ok);
+        const data = await res.json();
+        return data;
+      } catch(err) {
+        console.error(err)
+      }
+    };
+  
+    LoadData().then(newSongsJson => {
+      newSongsJson.forEach( (new_song) => {
+        let already_have = false;
+        songs.forEach( (_v, key) => {
+          if (new_song.id == key) { already_have = true; return; };
+        })
+        if (!already_have) { songs.set(new_song.utube_id, new_song) }
+      })
+    }).then( () => { returned = true } );  
+
+  };
+
+  function renderTable () {
+
+    if (returned) {
+    
+      $("#table tr").remove();
+    
+      var filtered = new Map(
+        [...songs]
+        .filter(([k, v]) => 
+          ( v.title.toLowerCase().includes( input_so_far.toLowerCase() ) ) || 
+          ( v.added_by.toLowerCase().includes( input_so_far.toLowerCase() ) ) )
+      );
+
+      filtered.forEach( (song) => {
+        let added = song.added_by;
+        let added_link = '<a href="/library?name=' + added + '" target="_blank" rel="noopener noreferrer">' + added + '</a>';
+        let title  = song.title;
+        let id = song.utube_id;
+        let id_link = '<a href="https://www.youtube.com/watch?v=' + id + '" target="_blank" rel="noopener noreferrer">' + id + '</a>';
+        $('#table tbody').append('<tr><td>'+id_link+'</td><td>'+added_link+'</td><td>'+title+'</td></tr>')
+      })
+
+    } else {
+      setTimeout(renderTable, 30); // try again in 30 milliseconds
+    }
+  };
+
+  renderTable();
+
+});

ircradio/templates/base.html

@@ -29,7 +29,43 @@
   <meta name="description" content="IRC!Radio"/>
   <title>IRC!Radio ala Scoob!</title>
 
+  <link rel="apple-touch-icon" sizes="180x180" href="static/favicons/apple-touch-icon.png">
+  <link rel="icon" type="image/png" sizes="32x32" href="static/favicons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="static/favicons/favicon-16x16.png">
+  <!-- <link rel="manifest" href="/site.webmanifest"> -->
+  <link rel="mask-icon" href="static/favicons/safari-pinned-tab.svg" color="#5bbad5">
+  <meta name="msapplication-TileColor" content="#2b5797">
+  <meta name="theme-color" content="#ffffff">
+
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
+
+  <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"></link>
+
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
+  <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js" integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU=" crossorigin="anonymous"></script>
+
+
+  <script>
+
+  var ws = new WebSocket('wss://' + document.domain + ':' + location.port + '/ws');
+
+  ws.onmessage = function (event) {
+    // console.log(event.data);
+    json = JSON.parse(event.data);
+    np = json.now_playing;
+    document.querySelector("#prev_two").innerText = document.querySelector("#prev_one").innerText;
+    document.querySelector("#prev_one").innerText = document.querySelector("#now_playing").innerText;
+    document.querySelector("#now_playing").innerText = np;
+    console.log(np);
+    return false;
+  };
+
+  ws.onclose = function(event) {
+    console.log("WebSocket is closed now.");
+  };
+
+  </script>
+
 </head>
 
 <body>

ircradio/templates/index.html

@@ -4,17 +4,28 @@
 <div class="container">
   <div class="row">
     <!-- Post Content Column -->
-    <div class="col-lg-12">
+    <div class="col-lg-9">
       <!-- Title -->
-      <h1 class="mt-4" style="margin-bottom: 2rem;">
+      <h1 class="mt-4" style="margin-bottom: 0rem;">
         IRC!Radio ala Scoob!
       </h1>
-      <h3 class="mt-4" style="margin-bottom: 2rem;">
+      <h5 class="mt-4" style="margin-bottom: 1rem;">
 	Thanks, dsc_!
-      </h2>
+      </h5>
       <p>Enjoy the music :)</p>
+
       <hr>
+
       <audio controls src="/{{ settings.icecast2_mount }}">Your browser does not support the<code>audio</code> element.</audio>
+      <p> </p>
+
+      <h3>Now playing: </h3>
+      <div id="now_playing" style="padding-top:6px; margin-bottom: 1.75rem;"></div>
+
+      <h5>Previous: </h5>
+      <div id="prev_one" style="font-size:12px;">Nothing here yet</div>
+      <div id="prev_two" style="font-size:12px;"></div>
+
       <hr>
 
       <h4>Command list:</h4>
@@ -35,29 +46,52 @@
       </pre>
 
       <hr>
+
       <div class="row">
         <div class="col-md-3">
           <h4>History</h4>
-          <a href="/history.txt">history.txt</a>
+          <a href="/history.txt" target="_blank">View in new tab</a>
         </div>
 
-        <div class="col-md-3">
+        <div class="col-md-5">
-          <h4>Library
+		
-            <small style="font-size:12px">(by user)</small>
+          <h4>View User Library
+            <small style="font-size:12px"></small>
           </h4>
-          <form method="GET" action="/library">
+          <form target="_blank" method="GET" action="/library">
-            <div class="input-group mb-3">
+            <div class="input-group mb-3 style=no-gutters">
               <input type="text" class="form-control" id="name" name="name" placeholder="username...">
               <div class="input-group-append">
                 <input class="btn btn-outline-secondary" type="submit" value="Search">
               </div>
             </div>
-
           </form>
         </div>
-        <div class="col-md-3"></div>
+     </div>
-      </div>
+
       <hr>
+
+      <div class="row">
+        <div class="col-md-8">
+	  <h4>Quick Search
+            <small style="font-size:12px">(general)</small>
+          </h4>
+             <div class="input-group mb-3">   
+	       <input type="text" class="form-control" id="general" name="general" placeholder="query...">
+             </div>
+	</div>
+	  <div class="col-md-12">
+	    <table class="table table-sm table-hover table-bordered" id="table" style="font-size:12px">
+              <thead>
+                <tbody style="">
+                </tbody>
+	      </thead>
+            </table>
+          </div>
+      </div>
+
+      <hr>
+
       <h4>IRC</h4>
       <pre>{{ settings.irc_host }}:{{ settings.irc_port }}
 {{ settings.irc_channels | join(" ") }}
@@ -65,4 +99,7 @@
     </div>
   </div>
 </div>
+
+<script src="static/search.js"></script>
+
 {% endblock %}

ircradio/youtube.py

@@ -36,7 +36,9 @@ class YouTube:
 
         try:
             proc = await asyncio.create_subprocess_exec(
-                *["youtube-dl",
+                *[
+                    #"/home/radio/ircradio/venv/bin/youtube-dl",
+                    "youtube-dl",
                     "--add-metadata",
                     "--write-all-thumbnails",
                     "--write-info-json",

requirements.txt

@@ -4,7 +4,6 @@ aiofiles
 aiohttp
 bottom
 tinytag
-peewee
 python-dateutil
 mutagen
-peewee
+peewee