Implement issues 1-3: default image, message ordering, and admin controls

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

.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

@@ -31,6 +31,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 audioContext = new (window.AudioContext || (window as any).webkitAudioContext)()
+        const oscillator = audioContext.createOscillator()
+        const gainNode = audioContext.createGain()
+        
+        oscillator.connect(gainNode)
+        gainNode.connect(audioContext.destination)
+        
+        oscillator.frequency.value = 800
+        oscillator.type = 'sine'
+        
+        gainNode.gain.setValueAtTime(0.3, audioContext.currentTime)
+        gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1)
+        
+        oscillator.start(audioContext.currentTime)
+        oscillator.stop(audioContext.currentTime + 0.1)
+      } catch (err) {
+        console.log("Audio notification failed:", err)
+      }
     }
 
     socket.on("chatHistory", onHistory)
@@ -50,21 +70,22 @@ 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>
+        ) : (
+          [...messages].reverse().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>
+          ))
         )}
       </div>
       <div className="p-3 flex gap-2 bg-dark-800/50 border-t border-dark-700/50">

components/player/Controls.tsx

@@ -34,6 +34,7 @@ interface Props extends PlayerState {
   playIndex: (index: number) => void
   setSeeking: (seeking: boolean) => void
   playAgain: () => void
+  isOwner: boolean
 }
 
 let interaction = false
@@ -67,6 +68,7 @@ const Controls: FC<Props> = ({
   playIndex,
   setSeeking,
   playAgain,
+  isOwner,
 }) => {
   const [showControls, setShowControls] = useState(true)
   const [showTimePlayed, setShowTimePlayed] = useState(true)
@@ -80,10 +82,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 +194,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 +203,7 @@ const Controls: FC<Props> = ({
               }
             }}
             interaction={showControlsAction}
+            className={!isOwner ? "opacity-50 cursor-not-allowed" : ""}
           >
             {playEnded() ? (
               <IconReplay />

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)
@@ -193,6 +195,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)
@@ -419,6 +427,7 @@ const Player: FC<Props> = ({ roomId, socket, fullHeight }) => {
         lastSync={lastSync}
         error={error}
         playAgain={() => socket?.emit("playAgain")}
+        isOwner={isOwner}
       />
 
       <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

@@ -13,6 +13,7 @@ import {
 import { createNewRoom, createNewUser, updateLastSync } from "../../lib/room"
 import { Playlist, RoomState, UserState, ChatMessage } from "../../lib/types"
 import { isUrl } from "../../lib/utils"
+import { getDefaultImg, getDefaultSrc } from "../../lib/env"
 
 const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
   // @ts-ignore
@@ -299,13 +300,33 @@ const ioHandler = (_: NextApiRequest, res: NextApiResponse) => {
             return
           }
 
+          // 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")
+            }
+          }
+
+          // Add new video to playlist at position 0
+          room.targetState.playlist.items.unshift({
+            src: [{ src: url, resolution: "" }],
+            sub: [],
+          })
+          
           room.targetState.playing = {
             src: [{ src: url, resolution: "" }],
             sub: [],
           }
-          room.targetState.playlist.currentIndex = -1
+          room.targetState.playlist.currentIndex = 0
           room.targetState.progress = 0
           room.targetState.lastSync = new Date().getTime() / 1000
+          room.targetState.paused = false
           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.