Add mute ability

dqbd · Oct 11, 2023 · 8e62a6f · 8e62a6f
1 parent afd8fcb
commit 8e62a6f
Show file tree

Hide file tree

Showing 3 changed files with 65 additions and 2 deletions.
diff --git a/src/components/Controls/Controls.tsx b/src/components/Controls/Controls.tsx
@@ -15,6 +15,8 @@ function ControlsHeader(props: {
     color: string
   }
   visible: boolean
+  muted: boolean
+  onMuteClick: () => void
 }) {
   const mode = useStreamStore((state) => state.mode)
   const setMode = useStreamStore((state) => state.setMode)
@@ -159,6 +161,54 @@ function ControlsHeader(props: {
               </>
             )}
           </a>
+
+          <a
+            css={css`
+              color: ${theme.colors.lightBlue900};
+              background: ${theme.colors.blue500};
+              width: 4em;
+              height: 4em;
+              display: flex;
+              align-items: center;
+              justify-content: center;
+              border-radius: 100%;
+              box-shadow: ${theme.shadows.sm};
+
+              & svg {
+                width: 2em;
+                height: 2em;
+              }
+            `}
+            onClick={props.onMuteClick}
+          >
+            {props.muted ? (
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M4.34005 2.92999L2.93005 4.33999L7.29005 8.69999L7.00005 8.99999H3.00005V15H7.00005L12.0001 20V13.41L16.1801 17.59C15.5301 18.08 14.8001 18.47 14.0001 18.7V20.76C15.3204 20.4577 16.5548 19.8593 17.6101 19.01L19.6601 21.06L21.0701 19.65L4.34005 2.92999ZM10.0001 15.17L7.83005 13H5.00005V11H7.83005L8.71005 10.12L10.0001 11.41V15.17ZM19.0001 12C19.0001 12.82 18.8501 13.61 18.5901 14.34L20.1201 15.87C20.6801 14.7 21.0001 13.39 21.0001 12C21.0001 7.71999 18.0101 4.13999 14.0001 3.22999V5.28999C16.8901 6.14999 19.0001 8.82999 19.0001 12ZM12.0001 3.99999L10.1201 5.87999L12.0001 7.75999V3.99999ZM16.5001 12C16.4998 11.1621 16.2657 10.3409 15.824 9.62893C15.3823 8.91693 14.7506 8.34238 14.0001 7.96999V9.75999L16.4801 12.24C16.4901 12.16 16.5001 12.08 16.5001 12Z"
+                  fill="currentColor"
+                />
+              </svg>
+            ) : (
+              <svg
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <path
+                  d="M3 9.00001V15H7L12 20V4.00001L7 9.00001H3ZM10 8.83001V15.17L7.83 13H5V11H7.83L10 8.83001ZM16.5 12C16.4998 11.1621 16.2657 10.341 15.824 9.62895C15.3823 8.91695 14.7506 8.3424 14 7.97001V16.02C15.48 15.29 16.5 13.77 16.5 12ZM14 3.23001V5.29001C16.89 6.15001 19 8.83001 19 12C19 15.17 16.89 17.85 14 18.71V20.77C18.01 19.86 21 16.28 21 12C21 7.72001 18.01 4.14001 14 3.23001Z"
+                  fill="currentColor"
+                />
+              </svg>
+            )}
+          </a>
         </div>
       )}
     </STop>
@@ -174,13 +224,20 @@ export function Controls(props: {
   visible: boolean
   show: MutableRefObject<() => void>
   onRangeSeek: (delta: number) => void
+  muted: boolean
+  onMuteClick: () => void
 }) {
   return (
     <SMain
       onTouchStart={() => props.show.current()}
       onMouseMove={() => props.show.current()}
     >
-      <ControlsHeader stream={props.stream} visible={props.visible} />
+      <ControlsHeader
+        stream={props.stream}
+        visible={props.visible}
+        muted={props.muted}
+        onMuteClick={props.onMuteClick}
+      />
       <Scrobber
         css={{
           opacity: props.visible ? 1 : 0,

diff --git a/src/components/HLSPlayer.tsx b/src/components/HLSPlayer.tsx
@@ -8,6 +8,7 @@ export function HLSPlayer(props: {
   source: string
   videoRef: MutableRefObject<HTMLVideoElement | null>
   visible: boolean
+  muted: boolean
   show: MutableRefObject<() => void>
 }) {
   const [paused, setPaused] = useState(false)
@@ -88,7 +89,7 @@ export function HLSPlayer(props: {
         ref={props.videoRef}
         autoPlay
         playsInline
-        muted
+        muted={props.muted}
         onClick={() => {
           if (paused) {
             props.videoRef.current?.play()

diff --git a/src/pages/camera/[cameraKey].tsx b/src/pages/camera/[cameraKey].tsx
@@ -36,6 +36,8 @@ export default function Page() {
   const url = name ? generateUrl(name, stream) : null
 
   const [mounted, setMounted] = useState(false)
+  const [muted, setMuted] = useState(true)
+
   useEffect(() => setMounted(true), [])
 
   const { visible, show } = useVisibleTimer(5 * 1000)
@@ -88,12 +90,15 @@ export default function Page() {
             source={url}
             visible={visible}
             show={show}
+            muted={muted}
           />
         )}
         {meta && mounted && (
           <Controls
             stream={meta}
             visible={visible}
+            muted={muted}
+            onMuteClick={() => setMuted((muted) => !muted)}
             show={show}
             onRangeSeek={(delta) => {
               if (videoRef.current != null) {