Merge pull request #2 from ArnavSingh76533/copilot/fix-default-video-playlist

.env

@@ -8,3 +8,6 @@ SITE_NAME="Web-SyncPlay"
 PUBLIC_DOMAIN="shivam413-Streamer.hf.space"
 
 YT_API_KEY=AIzaSyAhgfsfoHDpCmR-vtMu0gMyeimBtHwQFs8
+
+# Default image to display when a new room is created (instead of default video)
+DEFAULT_IMG=/logo_white.png

components/chat/ChatPanel.tsx

@@ -16,6 +16,22 @@ interface Props {
   className?: string
 }
 
+// Audio notification constants
+const NOTIFICATION_FREQUENCY = 800
+const NOTIFICATION_VOLUME = 0.3
+const NOTIFICATION_VOLUME_END = 0.01
+const NOTIFICATION_DURATION = 0.1
+
+// Reusable audio context for notifications
+let audioContext: AudioContext | null = null
+
+const getAudioContext = () => {
+  if (!audioContext) {
+    audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+  }
+  return audioContext
+}
+
 const ChatPanel: FC<Props> = ({ socket, className }) => {
   const [messages, _setMessages] = useState<ChatMessage[]>([])
   const [text, setText] = useState("")
@@ -31,6 +47,26 @@ const ChatPanel: FC<Props> = ({ socket, className }) => {
     }
     const onNew = (msg: ChatMessage) => {
       setMessages([...messagesRef.current, msg].slice(-200))
+      // Play notification sound using Web Audio API
+      try {
+        const ctx = getAudioContext()
+        const oscillator = ctx.createOscillator()
+        const gainNode = ctx.createGain()
+        
+        oscillator.connect(gainNode)
+        gainNode.connect(ctx.destination)
+        
+        oscillator.frequency.value = NOTIFICATION_FREQUENCY
+        oscillator.type = 'sine'
+        
+        gainNode.gain.setValueAtTime(NOTIFICATION_VOLUME, ctx.currentTime)
+        gainNode.gain.exponentialRampToValueAtTime(NOTIFICATION_VOLUME_END, ctx.currentTime + NOTIFICATION_DURATION)
+        
+        oscillator.start(ctx.currentTime)
+        oscillator.stop(ctx.currentTime + NOTIFICATION_DURATION)
+      } catch (err) {
+        console.log("Audio notification failed:", err)
+      }
     }
 
     socket.on("chatHistory", onHistory)
@@ -50,21 +86,27 @@ const ChatPanel: FC<Props> = ({ socket, className }) => {
 
   return (
     <div className={className ?? "flex flex-col h-64 border border-dark-700/50 rounded-xl overflow-hidden shadow-lg bg-dark-900"}>
-      <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-dark-900/50">
-        {messages.map((m) => (
-          <div key={m.id} className="text-sm bg-dark-800/50 rounded-lg p-3 border border-dark-700/30">
-            <div className="flex items-center gap-2 mb-1">
-              <span className="font-semibold text-primary-400">{m.name}</span>
-              <span className="text-dark-500 text-xs">•</span>
-              <span className="text-dark-500 text-xs">{new Date(m.ts).toLocaleTimeString()}</span>
-            </div>
-            <div className="break-words text-dark-200">{m.text}</div>
-          </div>
-        ))}
-        {messages.length === 0 && (
+      <div className="flex-1 overflow-y-auto p-4 space-y-3 bg-dark-900/50 flex flex-col-reverse">
+        {messages.length === 0 ? (
           <div className="text-dark-500 text-sm text-center py-8">
             No messages yet. Be the first to say hello! 👋
           </div>
+        ) : (
+          // Render messages in reverse order without creating a new array
+          messages.map((_, idx) => {
+            const reverseIdx = messages.length - 1 - idx
+            const msg = messages[reverseIdx]
+            return (
+              <div key={msg.id} className="text-sm bg-dark-800/50 rounded-lg p-3 border border-dark-700/30">
+                <div className="flex items-center gap-2 mb-1">
+                  <span className="font-semibold text-primary-400">{msg.name}</span>
+                  <span className="text-dark-500 text-xs">•</span>
+                  <span className="text-dark-500 text-xs">{new Date(msg.ts).toLocaleTimeString()}</span>
+                </div>
+                <div className="break-words text-dark-200">{msg.text}</div>
+              </div>
+            )
+          })
         )}
       </div>
       <div className="p-3 flex gap-2 bg-dark-800/50 border-t border-dark-700/50">

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
@@ -34,6 +36,11 @@ interface Props extends PlayerState {
   playIndex: (index: number) => void
   setSeeking: (seeking: boolean) => void
   playAgain: () => void
+  isOwner: boolean
+  pipEnabled: boolean
+  setPipEnabled: (enabled: boolean) => void
+  musicMode: boolean
+  setMusicMode: (enabled: boolean) => void
 }
 
 let interaction = false
@@ -67,6 +74,11 @@ const Controls: FC<Props> = ({
   playIndex,
   setSeeking,
   playAgain,
+  isOwner,
+  pipEnabled,
+  setPipEnabled,
+  musicMode,
+  setMusicMode,
 }) => {
   const [showControls, setShowControls] = useState(true)
   const [showTimePlayed, setShowTimePlayed] = useState(true)
@@ -80,10 +92,12 @@ const Controls: FC<Props> = ({
       if (new Date().getTime() - interactionTime > 350) {
         if (interaction && !doubleClick) {
           doubleClick = false
-          if (playEnded()) {
-            playAgain()
-          } else {
-            setPaused(!paused)
+          if (isOwner) {
+            if (playEnded()) {
+              playAgain()
+            } else {
+              setPaused(!paused)
+            }
           }
         }
 
@@ -190,7 +204,7 @@ const Controls: FC<Props> = ({
           <ControlButton
             tooltip={playEnded() ? "Play again" : paused ? "Play" : "Pause"}
             onClick={() => {
-              if (show) {
+              if (show && isOwner) {
                 if (playEnded()) {
                   playAgain()
                 } else {
@@ -199,6 +213,7 @@ const Controls: FC<Props> = ({
               }
             }}
             interaction={showControlsAction}
+            className={!isOwner ? "opacity-50 cursor-not-allowed" : ""}
           >
             {playEnded() ? (
               <IconReplay />
@@ -275,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

@@ -110,6 +110,8 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
     resolution: "",
   })
   const [currentSub, setCurrentSub] = useState<Subtitle>({ src: "", lang: "" })
+  const [ownerId, setOwnerId] = useState<string>("")
+  const [isOwner, setIsOwner] = useState(false)
 
   const [error, setError] = useState(null)
   const [ready, _setReady] = useState(false)
@@ -128,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)
 
@@ -193,6 +197,12 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         setDeltaServerTime((room.serverTime - new Date().getTime()) / 1000)
       }
 
+      // Update owner info
+      if (room.ownerId !== ownerId) {
+        setOwnerId(room.ownerId)
+        setIsOwner(socket.id === room.ownerId)
+      }
+
       const update = room.targetState
       if (update.lastSync !== lastSyncRef.current) {
         _setLastSync(update.lastSync)
@@ -222,7 +232,7 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         _setPlaylist(update.playlist)
       }
     })
-  }, [socket])
+  }, [socket, ownerId])
 
   useEffect(() => {
     if (ready) {
@@ -243,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%"}
@@ -265,7 +288,7 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
           },
         }}
         url={currentSrc.src}
-        pip={false}
+        pip={pipEnabled}
         playing={!paused}
         controls={false}
         loop={loop}
@@ -419,6 +442,11 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         lastSync={lastSync}
         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"}>

lib/env.ts

@@ -40,3 +40,10 @@ export function getDefaultSrc(): string {
   // console.warn("ENV 'DEFAULT_SRC' has no value, using no src")
   return "https://youtu.be/c-FKlE3_kHo"
 }
+
+export function getDefaultImg(): string | null {
+  if ("DEFAULT_IMG" in process.env) {
+    return <string>process.env.DEFAULT_IMG
+  }
+  return null
+}

lib/room.ts

@@ -1,6 +1,6 @@
 import { PlayerState, RoomState } from "./types"
 import { getRandomName, getTargetTime } from "./utils"
-import { getDefaultSrc } from "./env"
+import { getDefaultSrc, getDefaultImg } from "./env"
 import { getRoom, setRoom } from "./cache"
 
 export const updateLastSync = (room: RoomState) => {
@@ -52,6 +52,11 @@ export const createNewUser = async (roomId: string, socketId: string) => {
 }
 
 export const createNewRoom = async (roomId: string, socketId: string) => {
+  // Use default image if available, otherwise use default video
+  const defaultImg = getDefaultImg()
+  const defaultMedia = defaultImg || getDefaultSrc()
+  const isImage = !!defaultImg
+  
   await setRoom(roomId, {
     serverTime: 0,
     commandHistory: [],
@@ -61,17 +66,19 @@ export const createNewRoom = async (roomId: string, socketId: string) => {
       playlist: {
         items: [
           {
-            src: [{ src: getDefaultSrc(), resolution: "" }],
+            src: [{ src: defaultMedia, resolution: "" }],
             sub: [],
+            title: isImage ? "Welcome" : undefined,
           },
         ],
         currentIndex: 0,
       },
       playing: {
-        src: [{ src: getDefaultSrc(), resolution: "" }],
+        src: [{ src: defaultMedia, resolution: "" }],
         sub: [],
+        title: isImage ? "Welcome" : undefined,
       },
-      paused: false,
+      paused: isImage, // Pause by default if it's an image
       progress: 0,
       playbackRate: 1,
       loop: false,

pages/api/socketio.ts

@@ -11,8 +11,19 @@ import {
   setRoom,
 } from "../../lib/cache"
 import { createNewRoom, createNewUser, updateLastSync } from "../../lib/room"
-import { Playlist, RoomState, UserState, ChatMessage } from "../../lib/types"
+import { Playlist, RoomState, UserState, ChatMessage, MediaElement } from "../../lib/types"
 import { isUrl } from "../../lib/utils"
+import { getDefaultImg, getDefaultSrc } from "../../lib/env"
+
+/**
+ * Helper function to create a MediaElement from a URL
+ * @param url - The media URL to wrap
+ * @returns MediaElement with a single source and no subtitles
+ */
+const createMediaElement = (url: string): MediaElement => ({
+  src: [{ src: url, resolution: "" }],
+  sub: [],
+})
 
 const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
   // @ts-ignore
@@ -299,13 +310,28 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
             return
           }
 
-          room.targetState.playing = {
-            src: [{ src: url, resolution: "" }],
-            sub: [],
+          // Remove default image/video from playlist if it's the only item
+          const defaultImg = getDefaultImg()
+          const defaultMedia = defaultImg || getDefaultSrc()
+          
+          if (room.targetState.playlist.items.length === 1) {
+            const firstItem = room.targetState.playlist.items[0]
+            if (firstItem?.src?.[0]?.src === defaultMedia) {
+              // Remove the default item
+              room.targetState.playlist.items = []
+              log("Removed default media from playlist")
+            }
           }
-          room.targetState.playlist.currentIndex = -1
+
+          // Add new video to playlist at position 0
+          const newMedia = createMediaElement(url)
+          room.targetState.playlist.items.unshift(newMedia)
+          
+          room.targetState.playing = newMedia
+          room.targetState.playlist.currentIndex = 0
           room.targetState.progress = 0
           room.targetState.lastSync = new Date().getTime() / 1000
+          room.targetState.paused = false
           await broadcast(room)
         })
 
@@ -320,10 +346,7 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
           if (!isUrl(url)) return log("addToPlaylist invalid url", url)
           log("add to playlist", url)
 
-          room.targetState.playlist.items.push({
-            src: [{ src: url, resolution: "" }],
-            sub: [],
-          })
+          room.targetState.playlist.items.push(createMediaElement(url))
 
           await broadcast(room)
         })

public/notification.mp3.txt

@@ -0,0 +1,3 @@
+This is a placeholder for notification sound.
+To add a real notification sound, place an MP3 file here named notification.mp3
+For now, the code will try to play it but gracefully handle if not found.

yarn.lock

@@ -102,6 +102,11 @@
   resolved "https://registry.npmjs.org/@img/sharp-libvips-linux-x64/-/sharp-libvips-linux-x64-1.0.0.tgz"
   integrity sha512-naldaJy4hSVhWBgEjfdBY85CAa4UO+W1nx6a1sWStHZ7EUfNiuBTTN2KUYT5dH1+p/xij1t2QSXfCiFJoC5S/Q==
 
+"@img/sharp-libvips-linuxmusl-x64@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.npmjs.org/@img/sharp-libvips-linuxmusl-x64/-/sharp-libvips-linuxmusl-x64-1.0.0.tgz"
+  integrity sha512-FW8iK6rJrg+X2jKD0Ajhjv6y74lToIBEvkZhl42nZt563FfxkCYacrXZtd+q/sRQDypQLzY5WdLkVTbJoPyqNg==
+
 "@img/sharp-linux-x64@0.33.1":
   version "0.33.1"
   resolved "https://registry.npmjs.org/@img/sharp-linux-x64/-/sharp-linux-x64-0.33.1.tgz"
@@ -109,6 +114,13 @@
   optionalDependencies:
     "@img/sharp-libvips-linux-x64" "1.0.0"
 
+"@img/sharp-linuxmusl-x64@0.33.1":
+  version "0.33.1"
+  resolved "https://registry.npmjs.org/@img/sharp-linuxmusl-x64/-/sharp-linuxmusl-x64-0.33.1.tgz"
+  integrity sha512-LOGKNu5w8uu1evVqUAUKTix2sQu1XDRIYbsi5Q0c/SrXhvJ4QyOx+GaajxmOg5PZSsSnCYPSmhjHHsRBx06/wQ==
+  optionalDependencies:
+    "@img/sharp-libvips-linuxmusl-x64" "1.0.0"
+
 "@jridgewell/gen-mapping@^0.3.2":
   version "0.3.3"
   resolved "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.3.tgz"
@@ -166,6 +178,11 @@
   resolved "https://registry.npmjs.org/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-14.2.10.tgz"
   integrity sha512-GXvajAWh2woTT0GKEDlkVhFNxhJS/XdDmrVHrPOA83pLzlGPQnixqxD8u3bBB9oATBKB//5e4vpACnx5Vaxdqg==
 
+"@next/swc-linux-x64-musl@14.2.10":
+  version "14.2.10"
+  resolved "https://registry.npmjs.org/@next/swc-linux-x64-musl/-/swc-linux-x64-musl-14.2.10.tgz"
+  integrity sha512-opFFN5B0SnO+HTz4Wq4HaylXGFV+iHrVxd3YvREUX9K+xfc4ePbRrxqOuPOFjtSuiVouwe6uLeDtabjEIbkmDA==
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz"