now playing card working, ready for css
This commit is contained in:
parent
40d7b3e676
commit
cfcb5ece97
8
Selector.Web/CSS/now.scss
Normal file
8
Selector.Web/CSS/now.scss
Normal file
@ -0,0 +1,8 @@
|
||||
|
||||
.card {
|
||||
background-color: grey;
|
||||
}
|
||||
|
||||
.now-playing-card {
|
||||
max-width: 400px;
|
||||
}
|
@ -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);
|
||||
}
|
||||
}
|
||||
}
|
@ -6,9 +6,4 @@
|
||||
|
||||
<div class="text-center">
|
||||
<h1 class="display-4">Welcome</h1>
|
||||
<partial name="_LoginPartial" />
|
||||
</div>
|
||||
|
||||
@section Scripts {
|
||||
<script type="module" src="~/js/index.bundle.js"></script>
|
||||
}
|
@ -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>
|
||||
|
||||
|
@ -28,6 +28,7 @@
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
<partial name="_LoginPartial" />
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
|
@ -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";
|
||||
|
21
Selector.Web/scripts/NowPlayingCard.ts
Normal file
21
Selector.Web/scripts/NowPlayingCard.ts
Normal file
@ -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;
|
@ -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');
|
@ -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"
|
||||
]
|
||||
}
|
@ -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(
|
||||
|
Loading…
Reference in New Issue
Block a user