Address code review feedback: fix CSS duplication, improve URL validation and detection

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

components/player/Controls.tsx

@@ -116,8 +116,11 @@ const Controls: FC<Props> = ({
     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/${roomId}`,
+      `/embed/${encodedRoomId}`,
       'PiP Player',
       `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=no,status=no,toolbar=no,menubar=no,location=no`
     )
@@ -334,7 +337,19 @@ const Controls: FC<Props> = ({
                 }
               } else {
                 // Try to enter PiP
-                const isYouTube = currentSrc.src.includes('youtube.com') || currentSrc.src.includes('youtu.be')
+                // More robust YouTube URL detection
+                let isYouTube = false
+                try {
+                  const url = new URL(currentSrc.src)
+                  const hostname = url.hostname.toLowerCase()
+                  isYouTube = hostname.includes('youtube.com') || 
+                              hostname.includes('youtu.be') || 
+                              hostname.includes('m.youtube.com') ||
+                              hostname.includes('gaming.youtube.com')
+                } catch (e) {
+                  // Invalid URL, treat as non-YouTube
+                  isYouTube = false
+                }
                 
                 if (isYouTube) {
                   // For YouTube, use ReactPlayer's pip prop
@@ -344,6 +359,9 @@ const Controls: FC<Props> = ({
                   }
                 } 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) {

pages/api/socketio.ts

@@ -205,15 +205,18 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
             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.items[currentIdx + 1]
             
             // Remove the finished item from playlist (shift remaining items left)
-            room.targetState.playlist.items.splice(room.targetState.playlist.currentIndex, 1)
+            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

pages/global.css

@@ -96,7 +96,6 @@ html {
 /* Non-fullscreen video styles */
 .video-normal {
   height: calc((9 / 16) * 100vw);
-  max-height: calc(100vh - 210px);
   max-height: calc(100dvh - 210px);
 }