chore: vertical volume bar css

flowplayer · May 24, 2024 · 22ef920 · 22ef920
1 parent 459c877
commit 22ef920
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 13 deletions.
diff --git a/packages/flowplayer-vertical-volume-control/package.json b/packages/flowplayer-vertical-volume-control/package.json
diff --git a/...owplayer-vertical-volume-control/index.ts → packages/vertical-volume-bar/index.ts b/...owplayer-vertical-volume-control/index.ts → packages/vertical-volume-bar/index.ts
@@ -5,7 +5,7 @@ import support from "../utils"
 import { SliderStates, makeSlider } from "./slider"
 
 
-export default class FlowplayerVerticalVolumeControl extends HTMLElement {
+export default class VerticalVolume extends HTMLElement {
 
   constructor(player: Player) {
     super()
@@ -80,5 +80,5 @@ export default class FlowplayerVerticalVolumeControl extends HTMLElement {
     progress.style.height = player.muted ? "0" : Math.round(amount * 100) + "%"
   }
 }
-// handle umd installs
-install("flowplayer-volume-control", "flowplayer-vertical-volume-control", FlowplayerVerticalVolumeControl)
+
+install("flowplayer-volume-control", "vertical-volume-bar", VerticalVolume)
diff --git a/packages/vertical-volume-bar/package.json b/packages/vertical-volume-bar/package.json
@@ -0,0 +1,10 @@
+{
+  "name": "@flowplayer/components-vertical-volume-bar",
+  "main": "./index.ts",
+  "description": "A vertical volume bar",
+  "flowplayer": {
+    "componentName": "vertical-volume-bar",
+    "overridenComponent": "flowplayer-volume-control",
+    "className": "VerticalVolume"
+  }
+}
diff --git a/...wplayer-vertical-volume-control/slider.ts → packages/vertical-volume-bar/slider.ts b/...wplayer-vertical-volume-control/slider.ts → packages/vertical-volume-bar/slider.ts
diff --git a/packages/vertical-volume-bar/vertical-volume.css b/packages/vertical-volume-bar/vertical-volume.css
@@ -0,0 +1,45 @@
+.fp-volume-control-vertical {
+    position: relative;
+}
+
+.fp-volume-control-vertical .fp-volume-vertical {
+    position: absolute;
+    cursor: pointer;
+    opacity: 0;
+    padding: 0.5em;
+    left: -0.4em;
+    bottom: 1.3em;
+    height: 10em;
+}
+
+.fp-volume-control-vertical .fp-volume-vertical:focus {
+    opacity: 1;
+}
+
+.fp-volume-control-vertical .fp-volume-container {
+    display: flex;
+    background-color: #a7b4b8;
+    height: 100%;
+    width: 0.4em;
+    align-items: flex-end;
+}
+
+.fp-volume-control-vertical .fp-volume-progress {
+    width: 100%;
+}
+
+.fp-volume-control-vertical .fp-dragger {
+    left: -0.29em;
+}
+
+.fp-volume-control-vertical .fp-volume-mute-unmute {
+    padding-top: 1.2em;
+}
+
+.fp-volume-control-vertical .fp-volume-mute-unmute:after {
+    padding-bottom: 0.7em;
+}
+
+.fp-volume-control-vertical .fp-volume-mute-unmute:focus + .fp-volume-vertical {
+    opacity: 1;
+}