Move to @fridgefm/inverter (#318)

ch1ller0 · Sep 19, 2023 · 70c7770 · 70c7770
1 parent c6026e1
commit 70c7770
Show file tree

Hide file tree

Showing 43 changed files with 1,027 additions and 880 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -17,6 +17,7 @@
     }],
     "import/extensions": 0,
     "@typescript-eslint/no-explicit-any": 2,
+    "@typescript-eslint/no-use-before-define": 0,
     "no-underscore-dangle": 0,
     "no-console": 2,
     "no-param-reassign": 0,

diff --git a/examples/example.html b/examples/example.html
@@ -4,31 +4,42 @@
     <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/sortable.umd.min.js"></script>
     <style>
         .showcase {
-          margin: 10px;
+          margin: 16px;
+          font-family: Arial, Helvetica, sans-serif;
+          text-align: center;
+          max-width: 800px;
+          margin: 0 auto;
         }
-        .showcase .result {
-          background: ''
+        .showcase audio {
+          width: 100%;
         }
         .showcase button {
-          border: 1px solid black;
+          margin-right: 10px;
+          cursor: pointer;
+          border: none;
           border-radius: 6px;
-          background: aliceblue;
+          background: #f4f4f4;
           padding: 10px;
         }
+        .showcase button:hover {
+          border-radius: 6px;
+          background: #e4e4e4;
+        }
         #getPlaylist {
           margin-top: 10px;
         }
         #getPlaylist li {
+          text-align: left;
           list-style: none;
-          border: 1px solid black;
+          border: none;
           border-radius: 6px;
-          background: aliceblue;
-          padding: 6px 10px;
+          background: #f4f4f4;
+          padding: 12px;
           margin-bottom: -1px;
           cursor: pointer;
         }
         #getPlaylist li:hover {
-          background: gray;
+          background: #e4e4e4;
         }
         img#cover {
           width: 200px;
@@ -38,19 +49,16 @@
       </style>
   </head>
   <body>
-    <audio controls src='/stream' type='audio/mp3'></audio>
-    <div>
-      <div class='showcase'>
-        <button onclick="info()">Get Current Playing Track Meta</button>
-        <div class='result'>
-            <p id='artist'>Artist:</p>
-            <p id='title'>Title:</p>
-            <img id='cover' src='https://t3.ftcdn.net/jpg/01/09/40/34/240_F_109403479_3BJH2QY7zrMV5OUGPePPmxPYZf0zY4lR.jpg'></p>
-        </div>
+    <div class='showcase'>
+      <audio controls src='/stream' type='audio/mp3'></audio>
+      <div class='result'>
+          <p><i>Artist: </i><span id="artist-value"></span></p>
+          <p><i>Title: </i><span id="title-value"></span></p>
+          <img id='cover' src='https://t3.ftcdn.net/jpg/01/09/40/34/240_F_109403479_3BJH2QY7zrMV5OUGPePPmxPYZf0zY4lR.jpg'></p>
+          <code>The Artist, Title and Image (above) are the actual client state of the currently playing track. Under normal circumstances, they should be 'prebufferLength' seconds behind the server state. The controls below represent the actual server state.</code>
+          <hr/>
       </div>
-      <h2>Station controls should be private</h2>
       <div class='showcase'>
-        <button onclick="controlsGetPlaylist()">Show playlist</button>
         <button onclick="controlsShufflePlaylist()">Shuffle playlist</button>
         <button onclick="controlsNext()">Next</button>
         <div class="list-group" id='getPlaylist'></div>
@@ -62,7 +70,7 @@ <h2>Station controls should be private</h2>
       return fetch(route)
         .then(res => res.json())
         .then(x => {
-          console.log(x);
+          console.log(route, x);
           return x;
         })
     }
@@ -75,17 +83,16 @@ <h2>Station controls should be private</h2>
 
       return urlCreator.createObjectURL(blob);
     }
-    function info() {
-      request('/info')
+    function getCurrentTrack() {
+      request('/getCurrentTrackInfo')
         .then(cur => {
-          document.getElementById('artist').innerHTML = `Artist: ${cur.artist}`;
-          document.getElementById('title').innerHTML = `Title: ${cur.title}`;
+          document.getElementById('artist-value').innerHTML = cur.artist;
+          document.getElementById('title-value').innerHTML = cur.title;
           document.getElementById('cover').src = getCoverUrl(cur.image)
         })
     }
-    function controlsGetPlaylist() {
-      document.getElementById('getPlaylist').innerHTML = ''
-      request('/controls/getPlaylist')
+    function getPlaylist() {
+      request('/getPlaylist')
         .then((plist) => {
           const parent = document.getElementById('getPlaylist');
           parent.innerHTML = '';
@@ -101,14 +108,24 @@ <h2>Station controls should be private</h2>
         })
     }
     function controlsShufflePlaylist() {
-      request('/controls/shufflePlaylist').then(controlsGetPlaylist)
+      request('/controls/shufflePlaylist').then(update)
     }
     function controlsNext() {
-      request('/controls/next').then(controlsGetPlaylist).then(info)
+      request('/controls/next').then(update)
     }
     function controlsRearrange({ oldIndex, newIndex }) {
-      request(`/controls/rearrangePlaylist?oldIndex=${oldIndex}&newIndex=${newIndex}`).then(controlsGetPlaylist)
+      request(`/controls/rearrangePlaylist?oldIndex=${oldIndex}&newIndex=${newIndex}`).then(getPlaylist)
+    }
+
+    // short polling results and applying them after prebuffer length is applied
+    function update() {
+      return Promise.all([getCurrentTrack(), getPlaylist()])
     }
+    setInterval(() => {
+      update()
+    }, 2000)
+    update()
+
     Sortable.create(document.getElementById('getPlaylist'), { onEnd: controlsRearrange });
   </script>
 </html>
diff --git a/examples/server.ts b/examples/server.ts
@@ -1,16 +1,18 @@
 /* eslint-disable no-console */
 import path from 'path';
 import express from 'express';
-import { SHUFFLE_METHODS, PUBLIC_EVENTS, Station } from '../src/index';
+import { SHUFFLE_METHODS, PUBLIC_EVENTS, Station, DEFAULTS } from '../src/index';
 import type { ShallowTrackMeta } from '../src/index';
 
 const port = 3001;
 const server = express();
 const musicPath = path.resolve(process.cwd(), process.argv[2] || './examples/music');
+const prebufferLength = DEFAULTS.PREBUFFER_LENGTH;
 
 const station = new Station({
   verbose: true, // for verbose logging to console
   responseHeaders: { 'icy-genre': 'jazz' },
+  prebufferLength,
 });
 // add folder to station
 station.addFolder(musicPath);
@@ -19,16 +21,14 @@ station.addFolder(musicPath);
 let currentTrack: ShallowTrackMeta;
 station.on(PUBLIC_EVENTS.NEXT_TRACK, async (track) => {
   const result = await track.getMetaAsync();
-  currentTrack = result;
-});
-
-station.on(PUBLIC_EVENTS.START, () => {
-  // double the playlist on start
-  station.reorderPlaylist((a) => a.concat(a));
-});
-
-station.on(PUBLIC_EVENTS.RESTART, () => {
-  station.reorderPlaylist((a) => a.concat(a));
+  if (!currentTrack) {
+    currentTrack = result;
+  } else {
+    // in order to compensate a lag between the server and client
+    setTimeout(() => {
+      currentTrack = result;
+    }, prebufferLength * 1000);
+  }
 });
 
 // add this handler - otherwise any error will exit the process as unhandled
@@ -41,10 +41,16 @@ server.get('/stream', (req, res) => {
 });
 
 // get id3 tags of the track
-server.get('/info', (_, res) => {
+server.get('/getCurrentTrackInfo', (_, res) => {
   res.json(currentTrack);
 });
 
+// just get the entire playlist
+server.get('/getPlaylist', (_, res) => {
+  const plist = station.getPlaylist();
+  res.json(plist);
+});
+
 // switch to the next track immediately
 server.get('/controls/next', (_, res) => {
   station.next();
@@ -64,12 +70,6 @@ server.get('/controls/rearrangePlaylist', (req, res) => {
   res.json(`Succesfully moved element from "${oldIndex}" to "${newIndex}"`);
 });
 
-// just get the entire playlist
-server.get('/controls/getPlaylist', (_, res) => {
-  const plist = station.getPlaylist();
-  res.json(plist);
-});
-
 // route for serving static
 server.get('*', (_, res) => {
   res.sendFile(path.resolve(__dirname, './example.html'));