now playing card working, ready for css

Selector.Web/CSS/now.scss

@@ -0,0 +1,8 @@
+
+.card {
+    background-color: grey;
+}
+
+.now-playing-card {
+    max-width: 400px;
+}

Selector.Web/Hubs/NowPlayingHub.cs

@@ -2,7 +2,10 @@ using System;
 using System.Threading.Tasks;
 using Microsoft.AspNetCore.SignalR;
 
+using StackExchange.Redis;
+
 using Selector.Cache;
+using System.Text.Json;
 
 namespace Selector.Web.Hubs
 {
@@ -13,9 +16,18 @@ namespace Selector.Web.Hubs
 
     public class NowPlayingHub: Hub<INowPlayingHubClient>
     {
-        public Task SendNewPlaying(CurrentlyPlayingDTO context)
+        private readonly IDatabaseAsync Cache;
+
+        public NowPlayingHub(IDatabaseAsync cache)
         {
-            return Clients.All.OnNewPlaying(context);
+            Cache = cache;
+        }
+
+        public async Task SendNewPlaying()
+        {
+            var nowPlaying = await Cache.StringGetAsync(Key.CurrentlyPlaying(Context.UserIdentifier));
+            var deserialised = JsonSerializer.Deserialize<CurrentlyPlayingDTO>(nowPlaying);
+            await Clients.Caller.OnNewPlaying(deserialised);
         }
     }
 }

Selector.Web/Pages/Index.cshtml

@@ -6,9 +6,4 @@
 
 <div class="text-center">
     <h1 class="display-4">Welcome</h1>
-    <partial name="_LoginPartial" />
+</div>
-</div>
-
-@section Scripts {
-    <script type="module" src="~/js/index.bundle.js"></script>
-}

Selector.Web/Pages/Now.cshtml

@@ -8,6 +8,7 @@
     <h1 class="display-4">Now</h1>
     <div id="app">
         <h1>{{ count }}</h1>
+        <now-playing-card :track="currentlyPlaying.track"></now-playing-card>
     </div>
 </div>
 

Selector.Web/Pages/Shared/_Layout.cshtml

@@ -28,6 +28,7 @@
                         </li>
                     </ul>
                 </div>
+            <partial name="_LoginPartial" />
             </div>
         </nav>
     </header>

Selector.Web/Startup.cs

@@ -80,7 +80,7 @@ namespace Selector.Web
             {
                 // Cookie settings
                 options.Cookie.HttpOnly = true;
-                options.ExpireTimeSpan = TimeSpan.FromMinutes(5);
+                options.ExpireTimeSpan = TimeSpan.FromDays(1);
 
                 options.LoginPath = "/Identity/Account/Login";
                 options.AccessDeniedPath = "/Identity/Account/AccessDenied";

Selector.Web/scripts/NowPlayingCard.ts

@@ -0,0 +1,21 @@
+import * as Vue from "vue";
+import { FullTrack } from "./HubInterfaces";
+
+let component: Vue.Component = {
+    props: ['track'],
+    template: 
+    `
+        <div class="card now-playing-card" >
+            <img :src="track.album.images[0].url">
+            <h4>{{ track.name }}</h4>
+            <h6>
+                <template v-for="(artist, index) in track.artists">
+                    <template v-if="index > 0">,</template>
+                    <span>{{ artist.name }}</span>
+                </template>
+            </h6>
+        </div>
+    `
+}
+
+export default component;

Selector.Web/scripts/now.ts

@@ -1,24 +1,49 @@
 import * as signalR from "@microsoft/signalr";
 import * as Vue from "vue";
 import { FullTrack, CurrentlyPlayingDTO } from "./HubInterfaces";
+import NowPlayingCard from "./NowPlayingCard";
 
 const connection = new signalR.HubConnectionBuilder()
     .withUrl("/hub")
     .build();
 
-connection.on("OnNewPlaying", (context: CurrentlyPlayingDTO) => console.log(context));
-
 connection.start().catch(err => console.error(err));
 
+interface NowPlaying {
+    currentlyPlaying?: CurrentlyPlayingDTO
+}
+
 const app = Vue.createApp({
     data() {
         return {
-            count: 4
+            currentlyPlaying: {
-        }
+                track: {
+                    name: "No Playback",
+                    album: {
+                        name: "",
+                        images: [
+                            {
+                                url: ""
+                            }
+                        ]
+                    },
+                    artists: [
+                        {
+                            name: ""
+                        }
+                    ]
+                }
+            }
+        } as NowPlaying
     },
     created() {
-        console.log(this.count);
+        connection.on("OnNewPlaying", (context: CurrentlyPlayingDTO) => 
+        {
+            console.log(context);
+            this.currentlyPlaying = context;
+        });
     }
 });
-// app.component("", TrackNowPlaying);
+
+app.component("now-playing-card", NowPlayingCard);
 const vm = app.mount('#app');

Selector.Web/tsconfig.json

@@ -4,7 +4,7 @@
         "strict": true,
         "sourceMap": true,
         "noImplicitAny": true,
-        "noEmitOnError": true,
+        "noEmitOnError": false,
         "module": "es6",
         "target": "es5",
         "allowJs": true,
@@ -19,6 +19,7 @@
         }
     },
     "include": [
-        "scripts/**/*"
+        "scripts/**/*", 
+        "vue-file-import.d.ts"    
     ]
 }

Selector/Watcher/WatcherFactory.cs

@@ -27,6 +27,7 @@ namespace Selector
                 var config = await spotifyFactory.GetConfig();
                 var client = new SpotifyClient(config);
 
+                // TODO: catch spotify exceptions
                 var user = await client.UserProfile.Current();
 
                 return new PlayerWatcher(