Merge pull request #5 from ArnavSingh76533/copilot/fix-four-player-issues

Fix player UX issues: playlist auto-reorder, mobile fullscreen, PiP, and tap-to-pause

components/player/Controls.tsx

@@ -44,7 +44,6 @@ interface Props extends PlayerState {
 }
 
 let interaction = false
-let doubleClick = false
 let interactionTime = 0
 let lastMouseMove = 0
 
@@ -90,17 +89,10 @@ const Controls: FC<Props> = ({
 
     setTimeout(() => {
       if (new Date().getTime() - interactionTime > 350) {
-        if (interaction && !doubleClick) {
-          doubleClick = false
-          if (isOwner) {
-            if (playEnded()) {
-              playAgain()
-            } else {
-              setPaused(!paused)
-            }
-          }
-        }
-
+        // Reset interaction flag
+        // Double-click detection works by checking if interaction is still true
+        // when the second click happens (within 400ms)
+        // We don't toggle pause anymore - only show/hide controls on single tap
         interaction = false
       }
     }, 400)
@@ -117,6 +109,31 @@ const Controls: FC<Props> = ({
     return paused && progress > duration - SYNC_DELTA
   }
 
+  const openPipFallback = () => {
+    // Open a small popup window as PiP fallback
+    const width = 480
+    const height = 270
+    const left = window.screen.width - width - 20
+    const top = window.screen.height - height - 100
+    
+    // Encode roomId to prevent any potential injection issues
+    const encodedRoomId = encodeURIComponent(roomId)
+    
+    const pipWindow = window.open(
+      `/embed/${encodedRoomId}`,
+      'PiP Player',
+      `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=no,status=no,toolbar=no,menubar=no,location=no`
+    )
+    
+    if (pipWindow) {
+      pipWindow.focus()
+      console.log("Opened PiP fallback window")
+    } else {
+      console.error("Failed to open PiP fallback window - popup may be blocked")
+      alert("Please allow popups to use Picture-in-Picture mode")
+    }
+  }
+
   const mouseMoved = (touch: boolean | null = null) => {
     lastMouseMove = new Date().getTime()
 
@@ -137,7 +154,8 @@ const Controls: FC<Props> = ({
       <InteractionHandler
         className={classNames(
           "absolute top-0 left-0 w-full h-full transition-opacity flex flex-col",
-          show ? "opacity-100" : "opacity-0"
+          show ? "opacity-100" : "opacity-0",
+          fullscreen ? "controls-fullscreen" : ""
         )}
         onMove={(_, touch) => {
           setShowControls(!touch)
@@ -156,11 +174,12 @@ const Controls: FC<Props> = ({
           }
           onClick={(_, touch) => {
             if (interaction) {
-              doubleClick = true
+              // Second click detected within timeout - toggle fullscreen
               interaction = false
               console.log("Toggled fullscreen")
               setFullscreen(!fullscreen)
             } else if (touch) {
+              // Single touch - toggle controls visibility
               setShowControls(!showControls)
               setMenuOpen(false)
             }
@@ -305,10 +324,67 @@ const Controls: FC<Props> = ({
 
           <ControlButton
             tooltip={pipEnabled ? "Exit PiP" : "Enter PiP"}
-            onClick={() => {
-              setPipEnabled(!pipEnabled)
-              if (!pipEnabled && musicMode) {
-                setMusicMode(false)
+            onClick={async () => {
+              if (pipEnabled) {
+                // Exit PiP
+                setPipEnabled(false)
+                if (document.pictureInPictureElement) {
+                  try {
+                    await document.exitPictureInPicture()
+                  } catch (err) {
+                    console.warn("Failed to exit PiP:", err)
+                  }
+                }
+              } else {
+                // Try to enter PiP
+                // Robust YouTube URL detection with proper hostname validation
+                let isYouTube = false
+                try {
+                  const url = new URL(currentSrc.src)
+                  const hostname = url.hostname.toLowerCase()
+                  // Check for exact match or subdomain of youtube.com or youtu.be
+                  isYouTube = hostname === 'youtube.com' || 
+                              hostname === 'www.youtube.com' ||
+                              hostname === 'm.youtube.com' ||
+                              hostname === 'gaming.youtube.com' ||
+                              hostname === 'youtu.be' ||
+                              hostname === 'www.youtu.be' ||
+                              hostname.endsWith('.youtube.com') ||
+                              hostname.endsWith('.youtu.be')
+                } catch (e) {
+                  // Invalid URL, treat as non-YouTube
+                  isYouTube = false
+                }
+                
+                if (isYouTube) {
+                  // For YouTube, use ReactPlayer's pip prop
+                  setPipEnabled(true)
+                  if (!pipEnabled && musicMode) {
+                    setMusicMode(false)
+                  }
+                } else {
+                  // For file sources, try native PiP API
+                  // Note: We query for the first video element on the page.
+                  // This works for the current app structure where there's only one video player.
+                  // If multiple video elements exist, this might select the wrong one.
+                  const videoElement = document.querySelector('video')
+                  
+                  if (videoElement && 'requestPictureInPicture' in videoElement && document.pictureInPictureEnabled) {
+                    try {
+                      await videoElement.requestPictureInPicture()
+                      setPipEnabled(true)
+                      if (musicMode) {
+                        setMusicMode(false)
+                      }
+                    } catch (err) {
+                      console.warn("Native PiP failed, trying fallback:", err)
+                      openPipFallback()
+                    }
+                  } else {
+                    // Fallback: open popup window
+                    openPipFallback()
+                  }
+                }
               }
             }}
             interaction={showControlsAction}

components/player/Player.tsx

@@ -265,14 +265,14 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         </div>
       )}
       <ReactPlayer
+        className={fullscreen || fullHeight ? "video-fullscreen" : "video-normal"}
         style={{
-          maxHeight: fullscreen || fullHeight ? "100vh" : "calc(100vh - 210px)",
           visibility: musicMode ? "hidden" : "visible",
-          height: musicMode ? "0px" : (fullscreen || fullHeight ? "100vh" : "calc((9 / 16) * 100vw)"),
+          height: musicMode ? "0px" : undefined,
         }}
         ref={player}
         width={"100%"}
-        height={fullscreen || fullHeight ? "100vh" : "calc((9 / 16) * 100vw)"}
+        height={fullscreen || fullHeight ? "100dvh" : "calc((9 / 16) * 100vw)"}
         config={{
           youtube: {
             playerVars: {

pages/api/socketio.ts

@@ -197,20 +197,32 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
           log("playback ended")
 
           if (room.targetState.loop) {
+            // Loop mode: restart the current video without modifying playlist
             room.targetState.progress = 0
             room.targetState.paused = false
           } else if (
             room.targetState.playlist.currentIndex + 1 <
             room.targetState.playlist.items.length
           ) {
+            // Auto-advance to next item: play next video and remove finished one
+            // This condition ensures there IS a next item before we splice
+            const currentIdx = room.targetState.playlist.currentIndex
+            
+            // Get the next item before removing current
             room.targetState.playing =
-              room.targetState.playlist.items[
-                room.targetState.playlist.currentIndex + 1
-              ]
-            room.targetState.playlist.currentIndex += 1
+              room.targetState.playlist.items[currentIdx + 1]
+            
+            // Remove the finished item from playlist (shift remaining items left)
+            room.targetState.playlist.items.splice(currentIdx, 1)
+            
+            // Reset currentIndex to 0 since items have shifted
+            // (the next item is now at position 0)
+            room.targetState.playlist.currentIndex = 0
             room.targetState.progress = 0
             room.targetState.paused = false
+            log("Removed finished item from playlist, shifted remaining items")
           } else {
+            // Last item finished: pause at end
             room.targetState.progress =
               room.users.find((user) => user.socketIds[0] === socket.id)?.player
                 .progress || 0

pages/global.css

@@ -72,3 +72,46 @@ input:focus, textarea:focus {
 html {
   scroll-behavior: smooth;
 }
+
+/* Fullscreen video player styles for mobile */
+.video-fullscreen {
+  height: 100dvh !important;
+  max-height: 100dvh !important;
+  width: 100vw !important;
+}
+
+/* Support for older browsers that don't support dvh */
+@supports not (height: 100dvh) {
+  .video-fullscreen {
+    height: 100vh !important;
+    max-height: 100vh !important;
+  }
+}
+
+/* Safe area handling for iOS notches */
+.video-fullscreen {
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+}
+
+/* Non-fullscreen video styles */
+.video-normal {
+  height: calc((9 / 16) * 100vw);
+  max-height: calc(100dvh - 210px);
+}
+
+@supports not (height: 100dvh) {
+  .video-normal {
+    max-height: calc(100vh - 210px);
+  }
+}
+
+/* Controls overlay improvements for fullscreen */
+.controls-fullscreen {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  z-index: 10;
+  padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
+}