Fix video player controls and playlist behavior

- Add thumbnail field to MediaElement type
- Add thumbnail display to playlist items (YouTube thumbnails auto-detected)
- Show "Unknown" for items without titles, display full URL
- Disable play/pause on clicking video area (only button works)
- Fix playUrl to replace current video instead of adding to playlist
- Update NewTabLink to support title prop

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

components/action/NewTabLink.tsx

@@ -4,10 +4,11 @@ import classNames from "classnames"
 interface Props {
   href: string
   className?: string
+  title?: string
   children?: ReactNode
 }
 
-const NewTabLink: FC<Props> = ({ href, children, className }) => {
+const NewTabLink: FC<Props> = ({ href, children, className, title }) => {
   return (
     <a
       href={href}
@@ -17,6 +18,7 @@ const NewTabLink: FC<Props> = ({ href, children, className }) => {
       )}
       target={"_blank"}
       rel={"noreferrer"}
+      title={title}
     >
       {children}
     </a>

components/player/Controls.tsx

@@ -177,27 +177,13 @@ const Controls: FC<Props> = ({
               console.log("Toggled fullscreen")
               setFullscreen(!fullscreen)
             } else if (touch) {
-              // Single touch on mobile - show controls and toggle play/pause
+              // Single touch on mobile - show controls only, no play/pause toggle
+              // Play/pause only from control buttons
               setShowControls(true)
               setMenuOpen(false)
-              // Toggle play/pause on touch (owner only)
-              if (isOwner) {
-                if (playEnded()) {
-                  playAgain()
-                } else {
-                  setPaused(!paused)
-                }
-              }
-            } else {
-              // Desktop click on center overlay - toggle play/pause if owner
-              if (isOwner) {
-                if (playEnded()) {
-                  playAgain()
-                } else {
-                  setPaused(!paused)
-                }
-              }
             }
+            // Desktop click on center overlay - no play/pause toggle
+            // Play/pause only from control buttons
 
             interact()
             mouseMoved(touch)
@@ -206,7 +192,7 @@ const Controls: FC<Props> = ({
             showControlsAction(!touch)
           }}
         >
-          {/* Center play/pause button - positioned absolutely in center */}
+          {/* Center play/pause indicator - positioned absolutely in center */}
           <div className="absolute inset-0 flex items-center justify-center pointer-events-none">
             {paused ? <IconBigPlay /> : <IconBigPause />}
           </div>

components/playlist/PlaylistItem.tsx

@@ -10,7 +10,6 @@ import InputText from "../input/InputText"
 import ControlButton from "../input/ControlButton"
 import IconPlay from "../icon/IconPlay"
 import IconDisk from "../icon/IconDisk"
-import { getDomain } from "../../lib/utils"
 
 // HACK: this fixes type incompatibility
 const Draggable = _Draggable as unknown as FC<DraggableProps>
@@ -24,11 +23,69 @@ interface Props {
   updateTitle: (title: string) => void
 }
 
-const titleGen = (item: MediaElement, index: number) => {
+/**
+ * Extract YouTube video ID from various YouTube URL formats
+ */
+const getYouTubeVideoId = (url: string): string | null => {
+  try {
+    const urlObj = new URL(url)
+    const hostname = urlObj.hostname.toLowerCase()
+    
+    // Check for YouTube domains
+    const isYouTube = hostname === 'youtube.com' || 
+                      hostname === 'www.youtube.com' ||
+                      hostname === 'm.youtube.com' ||
+                      hostname.endsWith('.youtube.com') ||
+                      hostname === 'youtu.be' ||
+                      hostname === 'www.youtu.be'
+    
+    if (!isYouTube) return null
+    
+    // Handle youtu.be short URLs
+    if (hostname === 'youtu.be' || hostname === 'www.youtu.be') {
+      return urlObj.pathname.slice(1) || null
+    }
+    
+    // Handle youtube.com URLs
+    const videoId = urlObj.searchParams.get('v')
+    if (videoId) return videoId
+    
+    // Handle embed URLs: youtube.com/embed/VIDEO_ID
+    if (urlObj.pathname.startsWith('/embed/')) {
+      return urlObj.pathname.split('/')[2] || null
+    }
+    
+    return null
+  } catch {
+    return null
+  }
+}
+
+/**
+ * Get thumbnail URL for a media item
+ */
+const getThumbnailUrl = (item: MediaElement): string | null => {
+  // If item has explicit thumbnail, use it
+  if (item.thumbnail) return item.thumbnail
+  
+  // Try to extract from YouTube URL
+  const src = item.src?.[0]?.src
+  if (!src) return null
+  
+  const youtubeId = getYouTubeVideoId(src)
+  if (youtubeId) {
+    return `https://img.youtube.com/vi/${youtubeId}/mqdefault.jpg`
+  }
+  
+  return null
+}
+
+const titleGen = (item: MediaElement) => {
   if (item.title && item.title !== "") {
     return item.title
   }
-  return "Item #" + (index + 1)
+  // Show "Unknown" if no title, with the domain in URL
+  return "Unknown"
 }
 
 const PlaylistItem: FC<Props> = ({
@@ -59,6 +116,8 @@ const PlaylistItem: FC<Props> = ({
     }
   }, [edit, item.title, title])
 
+  const thumbnailUrl = getThumbnailUrl(item)
+
   return (
     <Draggable
       key={item.src[0].src + "-" + index}
@@ -71,7 +130,7 @@ const PlaylistItem: FC<Props> = ({
           {...provided.draggableProps}
           style={provided.draggableProps.style}
           className={classNames(
-            "p-3 rounded-lg flex flex-col border transition-all duration-200",
+            "p-2 rounded-lg flex flex-row gap-2 border transition-all duration-200",
             snapshot.isDragging 
               ? "bg-dark-700 border-primary-500/50 shadow-glow" 
               : playing 
@@ -79,18 +138,38 @@ const PlaylistItem: FC<Props> = ({
                 : "bg-dark-800/50 border-dark-700/50 hover:bg-dark-800"
           )}
         >
-          <div className={"flex flex-row gap-2 items-center mb-2"}>
-            <div
-              className={classNames(
-                "p-1 transition-colors hover:text-primary-500 cursor-grab active:cursor-grabbing",
-                snapshot.isDragging && "text-primary-500"
-              )}
-              {...provided.dragHandleProps}
-            >
-              <IconDrag />
-            </div>
+          {/* Drag handle */}
+          <div
+            className={classNames(
+              "p-1 transition-colors hover:text-primary-500 cursor-grab active:cursor-grabbing self-center",
+              snapshot.isDragging && "text-primary-500"
+            )}
+            {...provided.dragHandleProps}
+          >
+            <IconDrag />
+          </div>
+
+          {/* Thumbnail */}
+          <div className="flex-shrink-0 self-center">
+            {thumbnailUrl ? (
+              // eslint-disable-next-line @next/next/no-img-element
+              <img 
+                src={thumbnailUrl} 
+                alt="" 
+                className="w-16 h-10 object-cover rounded border border-dark-700/30"
+              />
+            ) : (
+              <div className="w-16 h-10 bg-dark-700 rounded border border-dark-700/30 flex items-center justify-center">
+                <IconPlay className="text-dark-500 w-4 h-4" />
+              </div>
+            )}
+          </div>
+
+          {/* Info section */}
+          <div className="flex-grow min-w-0 flex flex-col justify-center gap-1">
+            {/* Title */}
             <div
-              className={"flex grow"}
+              className={"flex"}
               onMouseEnter={() => setEdit(true)}
               onMouseLeave={() => setEdit(false)}
             >
@@ -101,17 +180,19 @@ const PlaylistItem: FC<Props> = ({
                   value={title}
                 />
               ) : (
-                <span className={classNames("text-sm font-medium", playing && "text-primary-400")}>
-                  {titleGen(item, index)}
+                <span className={classNames("text-sm font-medium truncate", playing && "text-primary-400")}>
+                  {titleGen(item)}
                 </span>
               )}
             </div>
-            <DeleteButton
-              tooltip={"Delete " + title}
-              onClick={() => deleteItem(index)}
-            />
+            {/* URL */}
+            <div className="text-xs text-dark-500 truncate">
+              {item.src[0]?.src || 'Unknown URL'}
+            </div>
           </div>
-          <div className={"flex flex-row items-center gap-2"}>
+
+          {/* Action buttons */}
+          <div className="flex flex-row items-center gap-1 flex-shrink-0">
             <ControlButton
               tooltip={playing ? "Currently playing" : "Play item now"}
               onClick={() => {
@@ -133,11 +214,15 @@ const PlaylistItem: FC<Props> = ({
             </ControlButton>
             <NewTabLink
               href={item.src[0].src}
-              className={"flex flex-row gap-1 items-center text-xs text-dark-400 hover:text-primary-500 transition-colors"}
+              className={"p-1 text-dark-400 hover:text-primary-500 transition-colors"}
+              title="Open in new tab"
             >
-              <div className={"line-clamp-2"}>{getDomain(item.src[0].src)}</div>
-              <IconNewTab className={"shrink-0"} />
+              <IconNewTab className={"w-4 h-4"} />
             </NewTabLink>
+            <DeleteButton
+              tooltip={"Delete " + (title || titleGen(item))}
+              onClick={() => deleteItem(index)}
+            />
           </div>
         </div>
       )}

lib/types.ts

@@ -10,6 +10,7 @@ export interface MediaOption {
 
 export interface MediaElement {
   title?: string
+  thumbnail?: string  // URL to the video thumbnail image
   sub: Subtitle[]
   src: MediaOption[]
 }

pages/api/socketio.ts

@@ -340,12 +340,22 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
             }
           }
 
-          // Add new video to playlist at position 0
+          // Replace the currently playing video with the new one
+          // If there's a current video at index 0, replace it; otherwise add new
           const newMedia = createMediaElement(url)
-          room.targetState.playlist.items.unshift(newMedia)
+          
+          if (room.targetState.playlist.currentIndex >= 0 && 
+              room.targetState.playlist.items.length > 0) {
+            // Replace the currently playing video at currentIndex
+            const currentIdx = room.targetState.playlist.currentIndex
+            room.targetState.playlist.items[currentIdx] = newMedia
+          } else {
+            // No current video, add as first item
+            room.targetState.playlist.items.unshift(newMedia)
+            room.targetState.playlist.currentIndex = 0
+          }
           
           room.targetState.playing = newMedia
-          room.targetState.playlist.currentIndex = 0
           room.targetState.progress = 0
           room.targetState.lastSync = new Date().getTime() / 1000
           room.targetState.paused = false