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

2021-11-09 22:47:49 +00:00 · 2021-11-09 22:47:49 +00:00 · 83bb76a5eb
commit 83bb76a5eb
parent cfcb5ece97
15 changed files with 3422 additions and 21 deletions
--- a/.gitignore
+++ b/.gitignore
@ -4,7 +4,6 @@
 ## Get latest from https://github.com/github/gitignore/blob/master/VisualStudio.gitignore

 appsettings.Development.json
-wwwroot

 # User-specific files
 *.rsuser
--- a/Selector.Web/CSS/index.scss
+++ b/Selector.Web/CSS/index.scss
@ -0,0 +1,5 @@
+@import "now.scss";
+
+body {
+    background-color: #c6c6c6;
+}
--- a/Selector.Web/CSS/now.scss
+++ b/Selector.Web/CSS/now.scss
@ -1,8 +1,21 @@

 .card {
    background-color: grey;
+    color: white;
+
+    box-shadow: 4px 4px 2px #5e5e5e;
 }

 .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;
+    }
 }
--- a/Selector.Web/Hubs/NowPlayingHub.cs
+++ b/Selector.Web/Hubs/NowPlayingHub.cs
@ -23,6 +23,11 @@ namespace Selector.Web.Hubs
            Cache = cache;
        }

+        public async Task OnConnected()
+        {
+            await SendNewPlaying();
+        }
+
        public async Task SendNewPlaying()
        {
            var nowPlaying = await Cache.StringGetAsync(Key.CurrentlyPlaying(Context.UserIdentifier));
--- a/Selector.Web/Pages/Now.cshtml
+++ b/Selector.Web/Pages/Now.cshtml
@ -6,9 +6,8 @@

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

--- a/Selector.Web/Pages/Shared/_Layout.cshtml
+++ b/Selector.Web/Pages/Shared/_Layout.cshtml
@ -5,27 +5,22 @@
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <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="~/css/index.min.css" rel="stylesheet">
 </head>
 <body>
    <header>
        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
            <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"
                        aria-expanded="false" aria-label="Toggle navigation">
                    <span class="navbar-toggler-icon"></span>
                </button>
                <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                    <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">
                            <a class="nav-link text-dark" asp-area="" asp-page="/Now">Now</a>
                        </li>
-                        <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-page="/Privacy">Privacy</a>
-                        </li>
                    </ul>
                </div>
            <partial name="_LoginPartial" />
@ -42,6 +37,13 @@
        <div class="container">
            &copy; 2021 - Selector.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
        </div>
+        <img src="/andy.png"
+            alt="AP"
+            width="120px"
+            style="display: block;
+                margin-left: auto;
+                margin-right: auto;
+                padding: 8px">
    </footer>

    @await RenderSectionAsync("Scripts", required: false)
--- a/Selector.Web/package-lock.json
+++ b/Selector.Web/package-lock.json
--- a/Selector.Web/package.json
+++ b/Selector.Web/package.json
@ -25,8 +25,10 @@
    "vue": "^3.2.21"
  },
  "devDependencies": {
-    "@vue/compiler-sfc": "^3.2.21",
    "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",
    "typescript": "^4.4.4",
    "vue-loader": "^15.9.8",
--- a/Selector.Web/scripts/NowPlayingCard.ts
+++ b/Selector.Web/scripts/NowPlayingCard.ts
@ -1,19 +1,24 @@
 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">
+            <img :src="track.album.images[0].url" class="cover-art">
            <h4>{{ track.name }}</h4>
+            <h6>
+                {{ track.album.name }}
+            </h6>
            <h6>
                <template v-for="(artist, index) in track.artists">
                    <template v-if="index > 0">, </template>
                    <span>{{ artist.name }}</span>
                </template>
            </h6>
+            <a :href="track.externalUrls.spotify" style="width: 21px">
+                <img src="/Spotify_Icon_RGB_White.png" style="width: 21px">
+            </a>
        </div>
    `
 }
--- a/Selector.Web/scripts/now.ts
+++ b/Selector.Web/scripts/now.ts
@ -7,7 +7,11 @@ const connection = new signalR.HubConnectionBuilder()
    .withUrl("/hub")
    .build();

-connection.start().catch(err => console.error(err));
+connection.start()
+.then(val => {
+    connection.invoke("OnConnected");
+})
+.catch(err => console.error(err));

 interface NowPlaying {
    currentlyPlaying?: CurrentlyPlayingDTO
@ -31,7 +35,8 @@ const app = Vue.createApp({
                        {
                            name: ""
                        }
-                    ]
+                    ],
+                    externalUrls: {}
                }
            }
        } as NowPlaying
--- a/Selector.Web/tsconfig.json
+++ b/Selector.Web/tsconfig.json
@ -19,7 +19,6 @@
        }
    },
    "include": [
-        "scripts/**/*", 
-        "vue-file-import.d.ts"    
+        "scripts/**/*"   
    ]
 }
--- a/Selector.Web/webpack.common.js
+++ b/Selector.Web/webpack.common.js
@ -4,6 +4,7 @@ const { CleanWebpackPlugin } = require('clean-webpack-plugin');
 module.exports = {
    entry: {
        now: './scripts/now.ts',
+        nowCss: './CSS/index.scss',
    },
    module: {
        rules: [
@ -18,6 +19,17 @@ module.exports = {
            {
                test: /\.vue$/,
                loader: 'vue-loader',
+            },
+            {
+                test: /\.scss$/,
+                exclude: /node_modules/,
+                use: [
+                    {
+                        loader: 'file-loader',
+                        options: { outputPath: '../css', name: '[name].min.css'}
+                    },
+                    'sass-loader'
+                ]
            }
        ]
    },
--- a/Selector.Web/wwwroot/.gitignore
+++ b/Selector.Web/wwwroot/.gitignore
@ -0,0 +1,2 @@
+css
+js
--- a/Selector.Web/wwwroot/Spotify_Icon_RGB_White.png
+++ b/Selector.Web/wwwroot/Spotify_Icon_RGB_White.png
--- a/Selector.Web/wwwroot/andy.png
+++ b/Selector.Web/wwwroot/andy.png