From 8241747fc22bb4363ff6cf48d54013cc72db7624 Mon Sep 17 00:00:00 2001
From: Samuel Newman <mozzius@protonmail.com>
Date: Mon, 16 Sep 2024 21:37:33 +0100
Subject: [Video] Volume controls on web (#5363)

* split up VideoWebControls

* add basic slider

* logarithmic volume

* integrate mute state

* fix typo

* shared video volume

* rm log

* animate in/out

* disable for touch devices

* remove flicker on touch devices

* more detailed comment

* move into correct context provider

* add minHeight

* hack

* bettern umber

---------

Co-authored-by: Hailey <me@haileyok.com>
---
 web/index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 45 insertions(+)

(limited to 'web')

diff --git a/web/index.html b/web/index.html
index 825d15968..8902f7b6e 100644
--- a/web/index.html
+++ b/web/index.html
@@ -262,6 +262,51 @@
       .force-no-clicks * {
         pointer-events: none !important;
       }
+
+      input[type=range][orient=vertical] {
+        writing-mode: vertical-lr;
+        direction: rtl;
+        appearance: slider-vertical;
+        width: 16px;
+        vertical-align: bottom;
+        -webkit-appearance: none;
+        appearance: none;
+        background: transparent;
+        cursor: pointer;
+      }
+
+      input[type="range"][orient=vertical]::-webkit-slider-runnable-track {
+        background: white;
+        height: 100%;
+        width: 4px;
+        border-radius: 4px;
+      }
+
+      input[type="range"][orient=vertical]::-moz-range-track {
+        background: white;
+        height: 100%;
+        width: 4px;
+        border-radius: 4px;
+      }
+
+      input[type="range"]::-webkit-slider-thumb {
+        -webkit-appearance: none;
+        appearance: none;
+        border-radius: 50%;
+        background-color: white;
+        height: 16px;
+        width: 16px;
+        margin-left: -6px;
+      }
+
+      input[type="range"][orient=vertical]::-moz-range-thumb {
+        border: none;
+        border-radius: 50%;
+        background-color: white;
+        height: 16px;
+        width: 16px;
+        margin-left: -6px;
+      }
     </style>
   </head>
 
-- 
cgit 1.4.1