Implement features 4-5: PiP and music mode

Co-authored-by: ArnavSingh76533 <160649079+ArnavSingh76533@users.noreply.github.com>

components/icon/IconPip.tsx

@@ -0,0 +1,15 @@
+import { FC } from "react"
+import Icon, { IconProps } from "./Icon"
+
+const IconPip: FC<IconProps> = ({ className = "" }) => {
+  return (
+    <Icon className={className} viewBox='0 0 24 24'>
+      <path
+        fill='currentColor'
+        d='M19 7h-8v6h8V7zm2-4H3c-1.1 0-2 .9-2 2v14c0 1.1.9 1.98 2 1.98h18c1.1 0 2-.88 2-1.98V5c0-1.1-.9-2-2-2zm0 16.01H3V4.98h18v14.03z'
+      />
+    </Icon>
+  )
+}
+
+export default IconPip

components/player/Controls.tsx

@@ -19,6 +19,8 @@ import PlayerMenu from "./PlayerMenu"
 import { Tooltip } from "react-tooltip"
 import IconNewTab from "../icon/IconNewTab"
 import Link from "next/link"
+import IconMusic from "../icon/IconMusic"
+import IconPip from "../icon/IconPip"
 
 interface Props extends PlayerState {
   roomId: string
@@ -35,6 +37,10 @@ interface Props extends PlayerState {
   setSeeking: (seeking: boolean) => void
   playAgain: () => void
   isOwner: boolean
+  pipEnabled: boolean
+  setPipEnabled: (enabled: boolean) => void
+  musicMode: boolean
+  setMusicMode: (enabled: boolean) => void
 }
 
 let interaction = false
@@ -69,6 +75,10 @@ const Controls: FC<Props> = ({
   setSeeking,
   playAgain,
   isOwner,
+  pipEnabled,
+  setPipEnabled,
+  musicMode,
+  setMusicMode,
 }) => {
   const [showControls, setShowControls] = useState(true)
   const [showTimePlayed, setShowTimePlayed] = useState(true)
@@ -280,6 +290,32 @@ const Controls: FC<Props> = ({
             setMenuOpen={setMenuOpen}
           />
 
+          <ControlButton
+            tooltip={musicMode ? "Exit music mode" : "Enter music mode"}
+            onClick={() => {
+              setMusicMode(!musicMode)
+              if (!musicMode && pipEnabled) {
+                setPipEnabled(false)
+              }
+            }}
+            interaction={showControlsAction}
+          >
+            <IconMusic />
+          </ControlButton>
+
+          <ControlButton
+            tooltip={pipEnabled ? "Exit PiP" : "Enter PiP"}
+            onClick={() => {
+              setPipEnabled(!pipEnabled)
+              if (!pipEnabled && musicMode) {
+                setMusicMode(false)
+              }
+            }}
+            interaction={showControlsAction}
+          >
+            <IconPip />
+          </ControlButton>
+
           <ControlButton
             tooltip={fullscreen ? "Leave fullscreen" : "Enter fullscreen"}
             onClick={() => {

components/player/Player.tsx

@@ -130,6 +130,8 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
   const [connected, setConnected] = useState(false)
   const [unmuted, setUnmuted] = useState(false)
   const [fullscreen, setFullscreen] = useState(false)
+  const [pipEnabled, setPipEnabled] = useState(false)
+  const [musicMode, setMusicMode] = useState(false)
   const fullscreenHandle = useFullScreenHandle()
   const player = useRef<ReactPlayer>(null)
 
@@ -251,9 +253,22 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         }
       }}
     >
+      {musicMode && (
+        <div className="absolute inset-0 flex items-center justify-center bg-gradient-to-br from-primary-900 to-dark-900">
+          <div className="flex flex-col items-center gap-4 text-primary-300">
+            <svg className="w-32 h-32" fill="currentColor" viewBox="0 0 512 512">
+              <path d='M470.38 1.51L150.41 96A32 32 0 0 0 128 126.51v261.41A139 139 0 0 0 96 384c-53 0-96 28.66-96 64s43 64 96 64 96-28.66 96-64V214.32l256-75v184.61a138.4 138.4 0 0 0-32-3.93c-53 0-96 28.66-96 64s43 64 96 64 96-28.65 96-64V32a32 32 0 0 0-41.62-30.49z' />
+            </svg>
+            <div className="text-2xl font-semibold">Music Mode</div>
+            <div className="text-sm text-primary-400">Audio continues playing</div>
+          </div>
+        </div>
+      )}
       <ReactPlayer
         style={{
           maxHeight: fullscreen || fullHeight ? "100vh" : "calc(100vh - 210px)",
+          visibility: musicMode ? "hidden" : "visible",
+          height: musicMode ? "0px" : (fullscreen || fullHeight ? "100vh" : "calc((9 / 16) * 100vw)"),
         }}
         ref={player}
         width={"100%"}
@@ -273,7 +288,7 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
           },
         }}
         url={currentSrc.src}
-        pip={false}
+        pip={pipEnabled}
         playing={!paused}
         controls={false}
         loop={loop}
@@ -428,6 +443,10 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         error={error}
         playAgain={() => socket?.emit("playAgain")}
         isOwner={isOwner}
+        pipEnabled={pipEnabled}
+        setPipEnabled={setPipEnabled}
+        musicMode={musicMode}
+        setMusicMode={setMusicMode}
       />
 
       <div className={"absolute top-1 left-1 flex flex-col gap-1 p-1"}>