feat(ui): add custom watch player

static/style.css

@@ -33,3 +33,63 @@
   --poster-max-height: 360px;
   --font: 'Verdana', 'Tahoma', 'Segoe UI', sans-serif;
 }
+
+.volume-range {
+  writing-mode: vertical-lr;
+  direction: rtl;
+  accent-color: #ffffff;
+}
+
+.volume-range::-webkit-slider-runnable-track {
+  width: 4px;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.volume-range::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 14px;
+  height: 14px;
+  border-radius: 9999px;
+  background: #ffffff;
+  border: 0;
+  margin-left: -5px;
+}
+
+.volume-range::-moz-range-track {
+  width: 4px;
+  border-radius: 9999px;
+  background: rgba(255, 255, 255, 0.55);
+}
+
+.volume-range::-moz-range-thumb {
+  width: 14px;
+  height: 14px;
+  border-radius: 9999px;
+  background: #ffffff;
+  border: 0;
+}
+
+.volume-wrap::before {
+  content: '';
+  position: absolute;
+  left: -10px;
+  right: -10px;
+  bottom: 100%;
+  height: 130px;
+}
+
+.volume-wrap:hover .volume-panel,
+.volume-wrap:focus-within .volume-panel,
+.volume-panel:hover,
+.volume-panel:focus-within {
+  opacity: 1;
+  visibility: visible;
+  pointer-events: auto;
+}
+
+.volume-wrap:hover .volume-underline,
+.volume-wrap:focus-within .volume-underline {
+  opacity: 1;
+}