sarsoo/Selector
1
0
Fork 0
Code Issues 21 Pull Requests Actions Packages Projects Releases Wiki Activity

sass compiling, added spotify and footer logo, sending currently playing on load

Browse Source
This commit is contained in:
andy 2021-11-09 22:47:49 +00:00
parent cfcb5ece97
commit 83bb76a5eb
15 changed files with 3422 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
.gitignore vendored
View File

@ -4,7 +4,6 @@
## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore
appsettings.Development.json appsettings.Development.json
wwwroot
# User-specific files # User-specific files
*.rsuser *.rsuser

5
Selector.Web/CSS/index.scss Normal file
View File

@ -0,0 +1,5 @@
@import "now.scss";
body {
background-color: #c6c6c6;
}

15
Selector.Web/CSS/now.scss
View File

@ -1,8 +1,21 @@
.card { .card {
background-color: grey; background-color: grey;
color: white;
box-shadow: 4px 4px 2px #5e5e5e;
} }
.now-playing-card { .now-playing-card {
max-width: 400px; // max-width: 300px;
text-shadow: 2px 2px 2px #5e5e5e;
.cover-art {
box-shadow: 4px 4px 2px #5e5e5e;
}
img {
margin: 15px;
}
} }

5
Selector.Web/Hubs/NowPlayingHub.cs
View File

@ -23,6 +23,11 @@ namespace Selector.Web.Hubs
Cache = cache; Cache = cache;
} }
public async Task OnConnected()
{
await SendNewPlaying();
}
public async Task SendNewPlaying() public async Task SendNewPlaying()
{ {
var nowPlaying = await Cache.StringGetAsync(Key.CurrentlyPlaying(Context.UserIdentifier)); var nowPlaying = await Cache.StringGetAsync(Key.CurrentlyPlaying(Context.UserIdentifier));

5
Selector.Web/Pages/Now.cshtml
View File

@ -6,9 +6,8 @@
<div class="text-center"> <div class="text-center">
<h1 class="display-4">Now</h1> <h1 class="display-4">Now</h1>
<div id="app"> <div id="app" class="col-12">
<h1>{{ count }}</h1> <now-playing-card :track="currentlyPlaying.track" class="col-md-3"></now-playing-card>
<now-playing-card :track="currentlyPlaying.track"></now-playing-card>
</div> </div>
</div> </div>

16
Selector.Web/Pages/Shared/_Layout.cshtml
View File

@ -5,27 +5,22 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>@ViewData["Title"] - Selector</title> <title>@ViewData["Title"] - Selector</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous"> <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link href="~/css/index.min.css" rel="stylesheet">
</head> </head>
<body> <body>
<header> <header>
<nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3"> <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
<div class="container"> <div class="container">
<a class="navbar-brand" asp-area="" asp-page="/Index">Selector.Web</a> <a class="navbar-brand" asp-area="" asp-page="/Index">Selector</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent" <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
aria-expanded="false" aria-label="Toggle navigation"> aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span> <span class="navbar-toggler-icon"></span>
</button> </button>
<div class="navbar-collapse collapse d-sm-inline-flex justify-content-between"> <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
<ul class="navbar-nav flex-grow-1"> <ul class="navbar-nav flex-grow-1">
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Index">Home</a>
</li>
<li class="nav-item"> <li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Now">Now</a> <a class="nav-link text-dark" asp-area="" asp-page="/Now">Now</a>
</li> </li>
<li class="nav-item">
<a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
</li>
</ul> </ul>
</div> </div>
<partial name="_LoginPartial" /> <partial name="_LoginPartial" />
@ -42,6 +37,13 @@
<div class="container"> <div class="container">
&copy; 2021 - Selector.Web - <a asp-area="" asp-page="/Privacy">Privacy</a> &copy; 2021 - Selector.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
</div> </div>
<img src="/andy.png"
alt="AP"
width="120px"
style="display: block;
margin-left: auto;
margin-right: auto;
padding: 8px">
</footer> </footer>
@await RenderSectionAsync("Scripts", required: false) @await RenderSectionAsync("Scripts", required: false)

3355
Selector.Web/package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

4
Selector.Web/package.json
View File

@ -25,8 +25,10 @@
"vue": "^3.2.21" "vue": "^3.2.21"
}, },
"devDependencies": { "devDependencies": {
"@vue/compiler-sfc": "^3.2.21",
"clean-webpack-plugin": "^4.0.0", "clean-webpack-plugin": "^4.0.0",
"file-loader": "^6.2.0",
"node-sass": "^6.0.1",
"sass-loader": "^12.3.0",
"ts-loader": "^9.2.6", "ts-loader": "^9.2.6",
"typescript": "^4.4.4", "typescript": "^4.4.4",
"vue-loader": "^15.9.8", "vue-loader": "^15.9.8",

9
Selector.Web/scripts/NowPlayingCard.ts
View File

@ -1,19 +1,24 @@
import * as Vue from "vue"; import * as Vue from "vue";
import { FullTrack } from "./HubInterfaces";
let component: Vue.Component = { let component: Vue.Component = {
props: ['track'], props: ['track'],
template: template:
` `
<div class="card now-playing-card" > <div class="card now-playing-card" >
<img :src="track.album.images[0].url"> <img :src="track.album.images[0].url" class="cover-art">
<h4>{{ track.name }}</h4> <h4>{{ track.name }}</h4>
<h6>
{{ track.album.name }}
</h6>
<h6> <h6>
<template v-for="(artist, index) in track.artists"> <template v-for="(artist, index) in track.artists">
<template v-if="index > 0">, </template> <template v-if="index > 0">, </template>
<span>{{ artist.name }}</span> <span>{{ artist.name }}</span>
</template> </template>
</h6> </h6>
<a :href="track.externalUrls.spotify" style="width: 21px">
<img src="/Spotify_Icon_RGB_White.png" style="width: 21px">
</a>
</div> </div>
` `
} }

9
Selector.Web/scripts/now.ts
View File

@ -7,7 +7,11 @@ const connection = new signalR.HubConnectionBuilder()
.withUrl("/hub") .withUrl("/hub")
.build(); .build();
connection.start().catch(err => console.error(err)); connection.start()
.then(val => {
connection.invoke("OnConnected");
})
.catch(err => console.error(err));
interface NowPlaying { interface NowPlaying {
currentlyPlaying?: CurrentlyPlayingDTO currentlyPlaying?: CurrentlyPlayingDTO
@ -31,7 +35,8 @@ const app = Vue.createApp({
{ {
name: "" name: ""
} }
] ],
externalUrls: {}
} }
} }
} as NowPlaying } as NowPlaying

3
Selector.Web/tsconfig.json
View File

@ -19,7 +19,6 @@
} }
}, },
"include": [ "include": [
"scripts/**/*", "scripts/**/*"
"vue-file-import.d.ts"
] ]
} }

12
Selector.Web/webpack.common.js
View File

@ -4,6 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = { module.exports = {
entry: { entry: {
now: './scripts/now.ts', now: './scripts/now.ts',
nowCss: './CSS/index.scss',
}, },
module: { module: {
rules: [ rules: [
@ -18,6 +19,17 @@ module.exports = {
{ {
test: /\.vue$/, test: /\.vue$/,
loader: 'vue-loader', loader: 'vue-loader',
},
{
test: /\.scss$/,
exclude: /node_modules/,
use: [
{
loader: 'file-loader',
options: { outputPath: '../css', name: '[name].min.css'}
},
'sass-loader'
]
} }
] ]
}, },

2
Selector.Web/wwwroot/.gitignore vendored Normal file
View File

@ -0,0 +1,2 @@
css
js

BIN
Selector.Web/wwwroot/Spotify_Icon_RGB_White.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

BIN
Selector.Web/wwwroot/andy.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 20 KiB