Add fullscreen and volume overlay for video stream

Nerimity · Oct 9, 2024 · 414366e · 414366e
1 parent 66a2547
commit 414366e
Show file tree

Hide file tree

Showing 2 changed files with 80 additions and 7 deletions.
diff --git a/src/components/main-pane-header/MainPaneHeader.tsx b/src/components/main-pane-header/MainPaneHeader.tsx
@@ -346,12 +346,10 @@ function VoiceHeader(props: { channelId?: string }) {
               size={isSomeoneVideoStreaming() ? "small" : undefined}
             />
             <Show when={isSomeoneVideoStreaming()}>
-              <div class={styles.videoContainer}>
-                <VideoStream
-                  mediaStream={selectedVoiceUser()?.videoStream!}
-                  mute={selectedVoiceUser()?.userId === account.user()?.id}
-                />
-              </div>
+              <VideoStream
+                mediaStream={selectedVoiceUser()?.videoStream!}
+                mute={selectedVoiceUser()?.userId === account.user()?.id}
+              />
             </Show>
           </div>
         </Show>
@@ -364,12 +362,52 @@ function VoiceHeader(props: { channelId?: string }) {
 function VideoStream(props: { mediaStream: MediaStream; mute?: boolean }) {
   let videoEl: HTMLVideoElement | undefined;
 
+  const [muted, setMuted] = createSignal(false);
+
   createEffect(() => {
     if (!videoEl) return;
     videoEl.srcObject = props.mediaStream;
   });
 
-  return <video ref={videoEl} autoplay muted={props.mute} />;
+  return (
+    <div class={styles.videoContainer}>
+      <video ref={videoEl} autoplay muted={props.mute || muted()} />
+      <div class={styles.videoOverlay}>
+        <Show when={!props.mute}>
+          <div class={styles.volumeSlider}>
+            <Button
+              iconName={muted() ? "volume_off" : "volume_up"}
+              iconSize={18}
+              padding={6}
+              color={muted() ? "var(--alert-color)" : "var(--primary-color)"}
+              margin={0}
+              onClick={() => setMuted(!muted())}
+            />
+            <input
+              type="range"
+              min={0}
+              value={muted() ? 0 : videoEl!.volume}
+              max={1}
+              step={0.01}
+              onChange={(e) => {
+                console.log("wtf");
+                videoEl!.volume = parseFloat(e.target.value);
+                setMuted(false);
+              }}
+            />
+          </div>
+        </Show>
+        <Button
+          iconName="fullscreen"
+          iconSize={18}
+          title="Fullscreen"
+          padding={6}
+          margin={0}
+          onClick={() => videoEl?.requestFullscreen({ navigationUI: "hide" })}
+        />
+      </div>
+    </div>
+  );
 }
 
 function VoiceParticipants(props: {

diff --git a/src/components/main-pane-header/styles.module.scss b/src/components/main-pane-header/styles.module.scss
@@ -226,15 +226,50 @@
   }
 
   .videoContainer {
+    position: relative;
     overflow: hidden;
     width: 100%;
     margin: 5px;
     border-radius: 8px;
     background-color: black;
+    &:hover {
+      .videoOverlay {
+        transform: translateY(0);
+      }
+    }
     video {
       width: 100%;
       height: 100%;
     }
+    .videoOverlay {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+      left: 0;
+      display: flex;
+      justify-content: flex-end;
+      padding: 6px;
+      background-color: rgba(0, 0, 0, 0.8);
+      transition: 0.2s;
+      transform: translateY(100%);
+      gap: 4px;
+    }
+    .volumeSlider {
+      display: flex;
+      padding-right: 6px;
+      border-radius: 6px;
+      background-color: rgba(255, 255, 255, 0.1);
+      gap: 2px;
+
+      input[type="range"]::-webkit-slider-runnable-track {
+        background: green;
+      }
+
+      button {
+        border: none;
+        background-color: transparent;
+      }
+    }
   }
   .voiceActions {
     display: flex;