slider: now controls maximum volume; styling; its own component

also added SCSS

package.json

@@ -14,10 +14,12 @@
     "youtube-player": "^5.5.2"
   },
   "devDependencies": {
+    "@types/youtube-player": "^5.5.1",
     "@vue/cli-plugin-babel": "^4.1.0",
     "@vue/cli-plugin-typescript": "^4.1.0",
     "@vue/cli-service": "^4.1.0",
-    "@types/youtube-player": "^5.5.1",
+    "node-sass": "^4.13.0",
+    "sass-loader": "^8.0.1",
     "typescript": "~3.5.3",
     "vue-template-compiler": "^2.6.10"
   }

src/App.vue

@@ -47,7 +47,7 @@ export default class App extends Vue {
   private playing: PlayingState = PlayingState.STOPPED;
   private names = ["alpha", "beta", "gamma", "delta", "epsilon", "zeta", "eta", "theta", "iota", "kappa", "lambda", "mu"];
   private urls = Array(this.N_CHANNELS).fill("");
-  private volumes = Array(this.N_CHANNELS).fill(50);
+  private volumes = Array(this.N_CHANNELS).fill(100);
   private states = Array(this.N_CHANNELS).fill(LoadingState.UNLOADED);
 
   private animateVolumeStart?: Date;

src/components/Channel.vue

@@ -1,11 +1,8 @@
 <template>
     <div :class="['channel', `channel-${loadingState}`]">
         <div class="name">{{name}}</div>
-        <div class="volume-wrapper">
-            <!--suppress HtmlFormInputWithoutLabel -->
-            <input class="volume" :disabled="loadingState === 'unloaded'"
-                   type="range" min="0" max="100" v-model="volume"/>
-        </div>
+        <VolumeSlider :value="volume" :disabled="loadingState === 'unloaded'"
+                      @maxValueChange="(actualValue) => {actualVolume = actualValue}"/>
         <div class="title">{{loadingState === "loading" ? "Loading..." : title}}</div>
         <div class="youtube-player" ref="ytpl"/>
     </div>
@@ -19,22 +16,26 @@ import YouTubePlayerFactory from "youtube-player";
 import {YouTubePlayer} from "youtube-player/dist/types";
 import PlayerStates from "youtube-player/dist/constants/PlayerStates";
 import {LoadingState, PlayingState} from "@/common";
+import VolumeSlider from "@/components/VolumeSlider.vue";
 
 enum SOURCE {
   YouTube,
   DIRECT
 }
 
-@Component
+@Component({
+  components: {VolumeSlider}
+})
 export default class Channel extends Vue {
-  @Prop() public name: string = "Channel";
-  @Prop() public volume: number = 50;
+  @Prop() public name!: string;
+  @Prop() public volume: number = 100;
   @Prop() public url: string | undefined;
   @Prop() public playing: PlayingState = PlayingState.STOPPED;
 
   private youtubePlayer?: YouTubePlayer;
   private loadingState = LoadingState.UNLOADED;
   private title = "";
+  private actualVolume = this.volume;
 
   private get source() {
     if (this.url) {
@@ -49,7 +50,7 @@ export default class Channel extends Vue {
     if (this.youtubePlayer) {
       switch (this.playing) {
         case PlayingState.PLAYING:
-          this.youtubePlayer.setVolume(this.volume);
+          this.youtubePlayer.setVolume(this.actualVolume);
           this.youtubePlayer.playVideo();
           break;
         case PlayingState.STOPPED:
@@ -104,10 +105,10 @@ export default class Channel extends Vue {
     }
   }
 
-  @Watch("volume")
-  private onVolumeChange() {
+  @Watch("actualVolume")
+  private onActualVolumeChange() {
     if (this.youtubePlayer) {
-      this.youtubePlayer.setVolume(this.volume);
+      this.youtubePlayer.setVolume(this.actualVolume);
     }
   }
 
@@ -175,24 +176,6 @@ export default class Channel extends Vue {
     background: lightgray;
 }
 
-.volume-wrapper {
-    --height: 180px;
-    --width: 30px;
-    height: var(--height);
-    width: var(--width);
-    display: flex;
-    align-items: center;
-}
-
-.volume {
-    position: relative;
-    width: var(--height);
-    height: var(--width);
-    left: calc(var(--height) / 2 * -1 + var(--width) / 2);
-    transform: rotate(270deg);
-    margin: 0;
-}
-
 .name {
     text-align: center;
     font-weight: bold;

src/components/VolumeSlider.vue

@@ -0,0 +1,133 @@
+<template>
+    <div class="volume-wrapper">
+        <!--suppress HtmlFormInputWithoutLabel -->
+        <input class="volume" :disabled="disabled"
+               type="range" min="0" max="100" v-model="maxValue"
+               :style="`--value: ${value}%; --max-value: ${maxValue}%; --actual-value: ${value * (maxValue / 100)}%`"/>
+    </div>
+</template>
+
+<script lang="ts">
+import {Component, Prop, Vue, Watch} from "vue-property-decorator";
+
+@Component
+export default class Channel extends Vue {
+  private name = "VolumeSlider";
+
+  private maxValue = 50;
+  @Prop() public value!: number;
+  @Prop() public disabled!: boolean;
+
+  private mounted() {
+    this.onMaxValueChange();
+  }
+
+  @Watch("maxValue")
+  private onMaxValueChange() {
+    this.$emit("maxValueChange", this.value * (this.maxValue / 100), this.maxValue);
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.volume-wrapper {
+    --height: 180px;
+    --width: 30px;
+    height: var(--height);
+    width: var(--width);
+    display: flex;
+    align-items: center;
+}
+
+.volume {
+    position: relative;
+    width: var(--height);
+    height: var(--width);
+    left: calc(var(--height) / 2 * -1 + var(--width) / 2);
+    transform: rotate(270deg);
+    margin: 0;
+}
+
+input[type=range] {
+    -webkit-appearance: none;
+    background: transparent;
+
+    &:focus {
+        outline: none;
+    }
+}
+
+@mixin range-track() {
+    height: 10px;
+    cursor: pointer;
+    background: linear-gradient(90deg,
+            black 0,
+            black var(--actual-value), white var(--actual-value),
+            white var(--max-value), transparent var(--max-value), transparent 100%);
+    border: 1px solid #010101;
+}
+
+
+@mixin range-thumb {
+    border: 1px solid #000000;
+    height: 24px;
+    width: 12px;
+    background: #ffffff;
+    border-radius: 0;
+    cursor: pointer;
+}
+
+input[type=range]::-webkit-slider-runnable-track {
+    @include range-track;
+}
+
+input[type=range]::-moz-range-track {
+    @include range-track;
+}
+
+input[type=range]::-webkit-slider-thumb {
+    @include range-thumb;
+    -webkit-appearance: none;
+    margin-top: -14px;
+}
+
+input[type=range]::-moz-range-thumb {
+    @include range-thumb;
+}
+
+/*
+input[type=range]::-ms-track {
+    width: 100%;
+    height: 8.4px;
+    cursor: pointer;
+    background: transparent;
+    border-color: transparent;
+    border-width: 16px 0;
+    color: transparent;
+}
+input[type=range]::-ms-fill-lower {
+    background: #2a6495;
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+}
+input[type=range]::-ms-fill-upper {
+    background: #3071a9;
+    border: 0.2px solid #010101;
+    border-radius: 2.6px;
+}
+input[type=range]::-ms-thumb {
+    border: 1px solid #000000;
+    height: 36px;
+    width: 16px;
+    border-radius: 3px;
+    background: #ffffff;
+    cursor: pointer;
+}
+input[type=range]:focus::-ms-fill-lower {
+    background: #3071a9;
+}
+input[type=range]:focus::-ms-fill-upper {
+    background: #367ebd;
+}*/
+
+</style>