Feat(p-video-player): Initial volume knob

Vija02 · Oct 15, 2024 · 49e5d47 · 49e5d47
1 parent 9d465dc
commit 49e5d47
Showing 1 changed file with 38 additions and 0 deletions.
diff --git a/plugins/video-player/view/Remote/index.tsx b/plugins/video-player/view/Remote/index.tsx
@@ -1,7 +1,13 @@
 import {
+  Box,
   Button,
   Heading,
   Input,
+  Slider,
+  SliderFilledTrack,
+  SliderMark,
+  SliderThumb,
+  SliderTrack,
   Stack,
   Text,
   useDisclosure,
@@ -32,8 +38,10 @@ const VideoPlayerRemote = () => {
   const pluginApi = usePluginAPI();
 
   const mutableSceneData = pluginApi.scene.useValtioData();
+  const mutableRendererData = pluginApi.renderer.useValtioData();
 
   const videos = pluginApi.scene.useData((x) => x.pluginData.videos);
+  const volume = pluginApi.renderer.useData((x) => x.volume);
 
   const [input, setInput] = useState("");
   const [isError, setIsError] = useState(false);
@@ -93,6 +101,36 @@ const VideoPlayerRemote = () => {
         }}
       />
 
+      <Box>
+        <Slider
+          id="slider"
+          value={volume ?? 1}
+          min={0}
+          max={1}
+          step={0}
+          colorScheme="teal"
+          onChange={(v) => {
+            mutableRendererData.volume = v;
+          }}
+          height={{ base: "70vh", md: "100%" }}
+          width={{ base: "80px", md: "100%" }}
+        >
+          <SliderMark value={0.25} mt="1" ml="-2.5" fontSize="sm">
+            25%
+          </SliderMark>
+          <SliderMark value={0.5} mt="1" ml="-2.5" fontSize="sm">
+            50%
+          </SliderMark>
+          <SliderMark value={0.75} mt="1" ml="-2.5" fontSize="sm">
+            75%
+          </SliderMark>
+          <SliderTrack>
+            <SliderFilledTrack />
+          </SliderTrack>
+          <SliderThumb />
+        </Slider>
+      </Box>
+
       <Text fontSize="lg" mt={2} fontWeight="bold">
         Loaded Videos
       </Text>