adding now script, adding signalr

Selector.Web/Startup.cs

@@ -15,9 +15,11 @@ using Microsoft.EntityFrameworkCore;
 
 using StackExchange.Redis;
 
+using Selector.Web.Hubs;
 using Selector.Model;
 using Selector.Model.Authorisation;
 using Selector.Cache;
+using Selector.Web.Service;
 
 namespace Selector.Web
 {
@@ -41,6 +43,7 @@ namespace Selector.Web
 
             services.AddRazorPages().AddRazorRuntimeCompilation();
             services.AddControllers();
+            services.AddSignalR();
 
             services.AddDbContext<ApplicationDbContext>(options => 
                 options.UseNpgsql(Configuration.GetConnectionString("Default"))
@@ -84,19 +87,20 @@ namespace Selector.Web
                 options.SlidingExpiration = true;
             });
 
+            // AUTH
             services.AddAuthorization(options =>
             {
                 options.FallbackPolicy = new AuthorizationPolicyBuilder()
                     .RequireAuthenticatedUser()
                     .Build();
             });
-
             services.AddScoped<IAuthorizationHandler, WatcherIsOwnerAuthHandler>();
             services.AddSingleton<IAuthorizationHandler, WatcherIsAdminAuthHandler>();
 
             services.AddScoped<IAuthorizationHandler, UserIsSelfAuthHandler>();
             services.AddSingleton<IAuthorizationHandler, UserIsAdminAuthHandler>();
 
+            // REDIS
             if (config.RedisOptions.Enabled)
             {
                 Console.WriteLine("> Configuring Redis...");
@@ -140,6 +144,7 @@ namespace Selector.Web
             {
                 endpoints.MapRazorPages();
                 endpoints.MapControllers();
+                endpoints.MapHub<NowPlayingHub>("/hub");
             });
         }
     }

Selector.Web/package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@microsoft/signalr": "^5.0.11",
         "bootstrap": "^5.1.3"
       },
       "devDependencies": {
@@ -29,6 +30,18 @@
         "node": ">=10.0.0"
       }
     },
+    "node_modules/@microsoft/signalr": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-5.0.11.tgz",
+      "integrity": "sha512-sek3lNroiutZ6XAb2UxwBkAgLWIXS7DQpRU5zKtus63xyZ2UUKQvCyT8US++1+UG3HSkSfEgaMa+o1xQfmuGGg==",
+      "dependencies": {
+        "abort-controller": "^3.0.0",
+        "eventsource": "^1.0.7",
+        "fetch-cookie": "^0.7.3",
+        "node-fetch": "^2.6.0",
+        "ws": "^6.0.0"
+      }
+    },
     "node_modules/@popperjs/core": {
       "version": "2.10.2",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
@@ -287,6 +300,17 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "node_modules/abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "dependencies": {
+        "event-target-shim": "^5.0.0"
+      },
+      "engines": {
+        "node": ">=6.5"
+      }
+    },
     "node_modules/acorn": {
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
@@ -369,6 +393,11 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -619,6 +648,11 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "node_modules/es6-denodeify": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-denodeify/-/es6-denodeify-0.1.5.tgz",
+      "integrity": "sha1-MdTV/pxVA+ElRgQ5MQ4WoqPznB8="
+    },
     "node_modules/escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -671,6 +705,14 @@
         "node": ">=4.0"
       }
     },
+    "node_modules/event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
@@ -680,6 +722,17 @@
         "node": ">=0.8.x"
       }
     },
+    "node_modules/eventsource": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
+      "integrity": "sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==",
+      "dependencies": {
+        "original": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=0.12.0"
+      }
+    },
     "node_modules/execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -721,6 +774,15 @@
       "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
       "dev": true
     },
+    "node_modules/fetch-cookie": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-0.7.3.tgz",
+      "integrity": "sha512-rZPkLnI8x5V+zYAiz8QonAHsTb4BY+iFowFBI1RFn0zrO343AVp9X7/yUj/9wL6Ef/8fLls8b/vGtzUvmyAUGA==",
+      "dependencies": {
+        "es6-denodeify": "^0.1.1",
+        "tough-cookie": "^2.3.3"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -1126,6 +1188,17 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node_modules/node-fetch": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.5.tgz",
+      "integrity": "sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==",
+      "dependencies": {
+        "whatwg-url": "^5.0.0"
+      },
+      "engines": {
+        "node": "4.x || >=6.0.0"
+      }
+    },
     "node_modules/node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
@@ -1177,6 +1250,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/original": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
+      "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
+      "dependencies": {
+        "url-parse": "^1.4.3"
+      }
+    },
     "node_modules/p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -1336,15 +1417,24 @@
         "node": ">=8"
       }
     },
+    "node_modules/psl": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
+    },
     "node_modules/punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
       "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
-      "dev": true,
       "engines": {
         "node": ">=6"
       }
     },
+    "node_modules/querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
+    },
     "node_modules/randombytes": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/randombytes/-/randombytes-2.1.0.tgz",
@@ -1366,6 +1456,11 @@
         "node": ">= 0.10"
       }
     },
+    "node_modules/requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
     "node_modules/resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -1638,6 +1733,23 @@
         "node": ">=8.0"
       }
     },
+    "node_modules/tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "dependencies": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      },
+      "engines": {
+        "node": ">=0.8"
+      }
+    },
+    "node_modules/tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
     "node_modules/ts-loader": {
       "version": "9.2.6",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.6.tgz",
@@ -1679,6 +1791,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "node_modules/url-parse": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
+      "dependencies": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "node_modules/watchpack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
@@ -1692,6 +1813,11 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+    },
     "node_modules/webpack": {
       "version": "5.59.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.59.1.tgz",
@@ -1813,6 +1939,15 @@
         "node": ">=10.13.0"
       }
     },
+    "node_modules/whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "dependencies": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "node_modules/which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -1840,6 +1975,14 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
     },
+    "node_modules/ws": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "dependencies": {
+        "async-limiter": "~1.0.0"
+      }
+    },
     "node_modules/yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",
@@ -1866,6 +2009,18 @@
       "integrity": "sha512-6nFkfkmSeV/rqSaS4oWHgmpnYw194f6hmWF5is6b0J1naJZoiD0NTc9AiUwPHvWsowkjuHErCZT1wa0jg+BLIA==",
       "dev": true
     },
+    "@microsoft/signalr": {
+      "version": "5.0.11",
+      "resolved": "https://registry.npmjs.org/@microsoft/signalr/-/signalr-5.0.11.tgz",
+      "integrity": "sha512-sek3lNroiutZ6XAb2UxwBkAgLWIXS7DQpRU5zKtus63xyZ2UUKQvCyT8US++1+UG3HSkSfEgaMa+o1xQfmuGGg==",
+      "requires": {
+        "abort-controller": "^3.0.0",
+        "eventsource": "^1.0.7",
+        "fetch-cookie": "^0.7.3",
+        "node-fetch": "^2.6.0",
+        "ws": "^6.0.0"
+      }
+    },
     "@popperjs/core": {
       "version": "2.10.2",
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.10.2.tgz",
@@ -2107,6 +2262,14 @@
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
       "dev": true
     },
+    "abort-controller": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/abort-controller/-/abort-controller-3.0.0.tgz",
+      "integrity": "sha512-h8lQ8tacZYnR3vNQTgibj+tODHI5/+l06Au2Pcriv/Gmet0eaj4TwWH41sO9wnHDiQsEj19q0drzdWdeAHtweg==",
+      "requires": {
+        "event-target-shim": "^5.0.0"
+      }
+    },
     "acorn": {
       "version": "8.5.0",
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.5.0.tgz",
@@ -2163,6 +2326,11 @@
       "integrity": "sha1-r2rId6Jcx/dOBYiUdThY39sk/bY=",
       "dev": true
     },
+    "async-limiter": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/async-limiter/-/async-limiter-1.0.1.tgz",
+      "integrity": "sha512-csOlWGAcRFJaI6m+F2WKdnMKr4HhdhFVBk0H/QbJFMCr+uO2kwohwXQPxw/9OCxp05r5ghVBFSyioixx3gfkNQ=="
+    },
     "balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2353,6 +2521,11 @@
       "integrity": "sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==",
       "dev": true
     },
+    "es6-denodeify": {
+      "version": "0.1.5",
+      "resolved": "https://registry.npmjs.org/es6-denodeify/-/es6-denodeify-0.1.5.tgz",
+      "integrity": "sha1-MdTV/pxVA+ElRgQ5MQ4WoqPznB8="
+    },
     "escalade": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
@@ -2392,12 +2565,25 @@
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "dev": true
     },
+    "event-target-shim": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/event-target-shim/-/event-target-shim-5.0.1.tgz",
+      "integrity": "sha512-i/2XbnSz/uxRCU6+NdVJgKWDTM427+MqYbkQzD321DuCQJUqOuJKIA0IM2+W2xtYHdKOmZ4dR6fExsd4SXL+WQ=="
+    },
     "events": {
       "version": "3.3.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.3.0.tgz",
       "integrity": "sha512-mQw+2fkQbALzQ7V0MY0IqdnXNOeTtP4r0lN9z7AAawCXgqea7bDii20AYrIBrFd/Hx0M2Ocz6S111CaFkUcb0Q==",
       "dev": true
     },
+    "eventsource": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/eventsource/-/eventsource-1.1.0.tgz",
+      "integrity": "sha512-VSJjT5oCNrFvCS6igjzPAt5hBzQ2qPBFIbJ03zLI9SE0mxwZpMw6BfJrbFHm1a141AavMEB8JHmBhWAd66PfCg==",
+      "requires": {
+        "original": "^1.0.0"
+      }
+    },
     "execa": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz",
@@ -2433,6 +2619,15 @@
       "integrity": "sha512-On2N+BpYJ15xIC974QNVuYGMOlEVt4s0EOI3wwMqOmK1fdDY+FN/zltPV8vosq4ad4c/gJ1KHScUn/6AWIgiow==",
       "dev": true
     },
+    "fetch-cookie": {
+      "version": "0.7.3",
+      "resolved": "https://registry.npmjs.org/fetch-cookie/-/fetch-cookie-0.7.3.tgz",
+      "integrity": "sha512-rZPkLnI8x5V+zYAiz8QonAHsTb4BY+iFowFBI1RFn0zrO343AVp9X7/yUj/9wL6Ef/8fLls8b/vGtzUvmyAUGA==",
+      "requires": {
+        "es6-denodeify": "^0.1.1",
+        "tough-cookie": "^2.3.3"
+      }
+    },
     "fill-range": {
       "version": "7.0.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.0.1.tgz",
@@ -2741,6 +2936,14 @@
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
       "dev": true
     },
+    "node-fetch": {
+      "version": "2.6.5",
+      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.6.5.tgz",
+      "integrity": "sha512-mmlIVHJEu5rnIxgEgez6b9GgWXbkZj5YZ7fx+2r94a2E+Uirsp6HsPTPlomfdHtpt/B0cdKviwkoaM6pyvUOpQ==",
+      "requires": {
+        "whatwg-url": "^5.0.0"
+      }
+    },
     "node-releases": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/node-releases/-/node-releases-2.0.1.tgz",
@@ -2780,6 +2983,14 @@
         "mimic-fn": "^2.1.0"
       }
     },
+    "original": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/original/-/original-1.0.2.tgz",
+      "integrity": "sha512-hyBVl6iqqUOJ8FqRe+l/gS8H+kKYjrEndd5Pm1MfBtsEKA038HkkdbAl/72EAXGyonD/PFsvmVG+EvcIpliMBg==",
+      "requires": {
+        "url-parse": "^1.4.3"
+      }
+    },
     "p-limit": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-3.1.0.tgz",
@@ -2893,11 +3104,20 @@
         "find-up": "^4.0.0"
       }
     },
+    "psl": {
+      "version": "1.8.0",
+      "resolved": "https://registry.npmjs.org/psl/-/psl-1.8.0.tgz",
+      "integrity": "sha512-RIdOzyoavK+hA18OGGWDqUTsCLhtA7IcZ/6NCs4fFJaHBDab+pDDmDIByWFRQJq2Cd7r1OoQxBGKOaztq+hjIQ=="
+    },
     "punycode": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.1.1.tgz",
-      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A==",
+      "integrity": "sha512-XRsRjdf+j5ml+y/6GKHPZbrF/8p2Yga0JPtdqTIY2Xe5ohJPD9saDJJLPvp9+NSBprVvevdXZybnj2cv8OEd0A=="
-      "dev": true
+    },
+    "querystringify": {
+      "version": "2.2.0",
+      "resolved": "https://registry.npmjs.org/querystringify/-/querystringify-2.2.0.tgz",
+      "integrity": "sha512-FIqgj2EUvTa7R50u0rGsyTftzjYmv/a3hO345bZNrqabNqjtgiDMgmo4mkUjd+nzU5oF3dClKqFIPUKybUyqoQ=="
     },
     "randombytes": {
       "version": "2.1.0",
@@ -2917,6 +3137,11 @@
         "resolve": "^1.9.0"
       }
     },
+    "requires-port": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/requires-port/-/requires-port-1.0.0.tgz",
+      "integrity": "sha1-kl0mAdOaxIXgkc8NpcbmlNw9yv8="
+    },
     "resolve": {
       "version": "1.20.0",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.20.0.tgz",
@@ -3095,6 +3320,20 @@
         "is-number": "^7.0.0"
       }
     },
+    "tough-cookie": {
+      "version": "2.5.0",
+      "resolved": "https://registry.npmjs.org/tough-cookie/-/tough-cookie-2.5.0.tgz",
+      "integrity": "sha512-nlLsUzgm1kfLXSXfRZMc1KLAugd4hqJHDTvc2hDIwS3mZAfMEuMbc03SujMF+GEcpaX/qboeycw6iO8JwVv2+g==",
+      "requires": {
+        "psl": "^1.1.28",
+        "punycode": "^2.1.1"
+      }
+    },
+    "tr46": {
+      "version": "0.0.3",
+      "resolved": "https://registry.npmjs.org/tr46/-/tr46-0.0.3.tgz",
+      "integrity": "sha1-gYT9NH2snNwYWZLzpmIuFLnZq2o="
+    },
     "ts-loader": {
       "version": "9.2.6",
       "resolved": "https://registry.npmjs.org/ts-loader/-/ts-loader-9.2.6.tgz",
@@ -3122,6 +3361,15 @@
         "punycode": "^2.1.0"
       }
     },
+    "url-parse": {
+      "version": "1.5.3",
+      "resolved": "https://registry.npmjs.org/url-parse/-/url-parse-1.5.3.tgz",
+      "integrity": "sha512-IIORyIQD9rvj0A4CLWsHkBBJuNqWpFQe224b6j9t/ABmquIS0qDU2pY6kl6AuOrL5OkCXHMCFNe1jBcuAggjvQ==",
+      "requires": {
+        "querystringify": "^2.1.1",
+        "requires-port": "^1.0.0"
+      }
+    },
     "watchpack": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.2.0.tgz",
@@ -3132,6 +3380,11 @@
         "graceful-fs": "^4.1.2"
       }
     },
+    "webidl-conversions": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
+      "integrity": "sha1-JFNCdeKnvGvnvIZhHMFq4KVlSHE="
+    },
     "webpack": {
       "version": "5.59.1",
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.59.1.tgz",
@@ -3208,6 +3461,15 @@
       "integrity": "sha512-t6BMVLQ0AkjBOoRTZgqrWm7xbXMBzD+XDq2EZ96+vMfn3qKgsvdXZhbPZ4ElUOpdv4u+iiGe+w3+J75iy/bYGA==",
       "dev": true
     },
+    "whatwg-url": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/whatwg-url/-/whatwg-url-5.0.0.tgz",
+      "integrity": "sha1-lmRU6HZUYuN2RNNib2dCzotwll0=",
+      "requires": {
+        "tr46": "~0.0.3",
+        "webidl-conversions": "^3.0.0"
+      }
+    },
     "which": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz",
@@ -3229,6 +3491,14 @@
       "integrity": "sha1-tSQ9jz7BqjXxNkYFvA0QNuMKtp8=",
       "dev": true
     },
+    "ws": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/ws/-/ws-6.2.2.tgz",
+      "integrity": "sha512-zmhltoSR8u1cnDsD43TX59mzoMZsLKqUweyYBAIvTngR3shc0W6aOZylZmq/7hqyVxPdi+5Ud2QInblgyE72fw==",
+      "requires": {
+        "async-limiter": "~1.0.0"
+      }
+    },
     "yallist": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz",

Selector.Web/package.json

@@ -20,6 +20,7 @@
   },
   "homepage": "https://github.com/Sarsoo/Selector#readme",
   "dependencies": {
+    "@microsoft/signalr": "^5.0.11",
     "bootstrap": "^5.1.3"
   },
   "devDependencies": {

Selector.Web/scripts/HubInterfaces.ts

@@ -0,0 +1,166 @@
+
+export interface NowPlayingHub {
+    
+}
+
+export interface ListeningChangeEventArgs {
+    previous: CurrentlyPlayingContext;
+    current: CurrentlyPlayingContext;
+    username: string;
+}
+
+export interface CurrentlyPlayingContext {
+    device: Device;
+    repeatState: string;
+    shuffleState: boolean;
+    context: Context;
+    timestamp: number;
+    progressMs: number;
+    isPlaying: boolean;
+    item: PlayableItem;
+    currentlyPlayingType: string;
+    actions: Actions;
+}
+
+export interface Device {
+    id: string;
+    isActive: boolean;
+    isPrivateSession: boolean;
+    isRestricted: boolean;
+    name: string;
+    type: string;
+    volumePercent: number | null;
+}
+
+export interface Context {
+    externalUrls: { [key: string]: string; };
+    href: string;
+    type: string;
+    uri: string;
+}
+
+export interface PlayableItem {
+    type: ItemType;
+}
+
+export enum ItemType {
+    Track = 0,
+    Episode = 1
+}
+
+export interface Actions {
+    disallows: { [key: string]: boolean; };
+}
+
+export interface FullTrack {
+    type: ItemType;
+    trackNumber: number;
+    previewUrl: string;
+    popularity: number;
+    name: string;
+    restrictions: { [key: string]: string; };
+    linkedFrom: LinkedTrack;
+    isPlayable: boolean;
+    uri: string;
+    id: string;
+    externalUrls: { [key: string]: string; };
+    externalIds: { [key: string]: string; };
+    explicit: boolean;
+    durationMs: number;
+    discNumber: number;
+    availableMarkets: string[];
+    artists: SimpleArtist[];
+    album: SimpleAlbum;
+    href: string;
+    isLocal: boolean;
+}
+
+export interface LinkedTrack {
+    externalUrls: { [key: string]: string; };
+    href: string;
+    id: string;
+    type: string;
+    uri: string;
+}
+
+export interface SimpleArtist {
+    externalUrls: { [key: string]: string; };
+    href: string;
+    id: string;
+    name: string;
+    type: string;
+    uri: string;
+}
+
+export interface SimpleAlbum {
+    albumGroup: string;
+    albumType: string;
+    artists: SimpleArtist[];
+    availableMarkets: string[];
+    externalUrls: { [key: string]: string; };
+    href: string;
+    id: string;
+    images: Image[];
+    name: string;
+    releaseDate: string;
+    releaseDatePrecision: string;
+    restrictions: { [key: string]: string; };
+    totalTracks: number;
+    type: string;
+    uri: string;
+}
+
+export interface Image {
+    height: number;
+    width: number;
+    url: string;
+}
+
+export interface FullEpisode {
+    show: SimpleShow;
+    resumePoint: ResumePoint;
+    releaseDatePrecision: string;
+    releaseDate: string;
+    name: string;
+    languages: string[];
+    isPlayable: boolean;
+    type: ItemType;
+    isExternallyHosted: boolean;
+    id: string;
+    href: string;
+    externalUrls: { [key: string]: string; };
+    explicit: boolean;
+    durationMs: number;
+    description: string;
+    audioPreviewUrl: string;
+    images: Image[];
+    uri: string;
+}
+
+export interface SimpleShow {
+    availableMarkets: string[];
+    copyrights: Copyright[];
+    description: string;
+    explicit: boolean;
+    externalUrls: { [key: string]: string; };
+    href: string;
+    id: string;
+    images: Image[];
+    isExternallyHosted: boolean;
+    languages: string[];
+    mediaType: string;
+    name: string;
+    publisher: string;
+    type: string;
+    uri: string;
+}
+
+export interface Copyright {
+    text: string;
+    type: string;
+}
+
+export interface ResumePoint {
+    fullyPlayed: boolean;
+    resumePositionMs: number;
+}

Selector.Web/scripts/now.ts

@@ -0,0 +1,17 @@
+import * as signalR from "@microsoft/signalr";
+import { FullTrack } from "./HubInterfaces";
+
+const connection = new signalR.HubConnectionBuilder()
+    .withUrl("/hub")
+    .build();
+
+connection.on("OnNewPlaying", context => console.log(context));
+
+connection.start().catch(err => console.error(err));
+
+/// <reference path="Interface/HubInterface.ts" />
+namespace Selector.Web {
+    
+}
+
+console.log("NowPlaying!");

Selector.Web/tsconfig.json

@@ -7,6 +7,7 @@
         "module": "es6",
         "target": "es5",
         "allowJs": true,
+        "moduleResolution": "node",
         "outDir": "./wwwroot/js"
     },
     "include": [

Selector.Web/webpack.common.js

@@ -4,6 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 module.exports = {
     entry: {
         index: './scripts/index.ts',
+        now: './scripts/now.ts',
     },
     module: {
         rules: [