Spaces:

triflix
/

musicos

Paused

App Files Files Community

triflix commited on Sep 17, 2025

Commit

e1bad47

verified ·

1 Parent(s): 30d1089

Update templates/room.html

Browse files

Files changed (1) hide show

templates/room.html +319 -26

templates/room.html CHANGED Viewed

@@ -1,39 +1,332 @@
-<!DOCTYPE html>
-<html>
 <head>
-  <title>Room {{ room_code }}</title>
-  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
 </head>
-<body class="container mt-3">
-  <h2>Room: {{ room_code }}</h2>
-  <p>You are <b>{{ name }}</b> {% if is_admin %}(Admin){% endif %}</p>
-  <h4>Participants</h4>
-  <ul id="participants" class="list-group mb-3"></ul>
-  <h4>Playlist</h4>
-  <ul id="playlist" class="list-group mb-3"></ul>
-  <form id="uploadForm" enctype="multipart/form-data" class="mb-3">
-    <input type="file" name="file" accept="audio/mp3" class="form-control mb-2" required>
-    <input type="hidden" name="room_code" value="{{ room_code }}">
-    <input type="hidden" name="session_id" value="{{ session_id }}">
-    <button type="submit" class="btn btn-secondary">Upload MP3</button>
-  </form>
-  {% if is_admin %}
-  <button id="togglePlay" class="btn btn-primary mb-3">▶️ Play</button>
-  {% endif %}
-  <audio id="player" controls class="w-100"></audio>
   <script>
     const ROOM_CODE = "{{ room_code }}";
-    const SESSION_ID = "{{ session_id }}";
-    const NAME = "{{ name }}";
-    const IS_ADMIN = {{ "true" if is_admin else "false" }};
     const ADMIN_TOKEN = "{{ admin_token }}";
   </script>
-  <script src="/static/app.js"></script>
 </body>
-</html>

+<!doctype html>
+<html lang="en">
 <head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width,initial-scale=1" />
+  <title>Room {{ room_code }} — Music Sync</title>
+  <link rel="stylesheet" href="/static/style.css" />
 </head>
+<body>
+  <div id="notifications-container"></div>
+  <main class="room-page">
+    <header class="room-header">
+      <div>
+        <h2>Room <strong id="room-code">{{ room_code }}</strong></h2>
+        <div class="muted">Name: <span id="my-name">{{ name }}</span>
+          <span id="admin-badge" style="display: none;">• Admin</span>
+        </div>
+      </div>
+      <div>
+        <button id="btn-mute" class="secondary">Mute</button>
+        <button id="enable-audio" class="primary">Enable Audio</button>
+      </div>
+    </header>
+    <section class="main-grid">
+      <div class="panel">
+        <h3>Now Playing</h3>
+        <div id="now-track">No track selected</div>
+        <div class="controls" id="admin-controls" style="display: none;">
+          <button id="btn-toggle-play" class="primary" disabled>Play</button>
+          <label class="muted">Seek to:
+            <input id="seek-input" type="number" value="0" min="0" style="width:80px;" />
+            <button id="btn-seek" disabled>Go</button>
+          </label>
+        </div>
+        <div class="status muted" id="status">Connecting...</div>
+      </div>
+      <div class="panel">
+        <h3>Playlist</h3>
+        <div id="playlist"></div>
+        <div id="upload-area" style="margin-top:12px; display:none;">
+          <form id="upload-form">
+            <input id="file-input" type="file" accept=".mp3,audio/*" required />
+            <button type="submit" class="secondary">Upload MP3</button>
+          </form>
+          <div id="upload-progress" style="display:none;margin-top:8px;">
+            <div class="progress-bar"><div id="progress-fill" style="width:0%"></div></div>
+            <div id="progress-text" class="muted small">Uploading...</div>
+          </div>
+        </div>
+      </div>
+    </section>
+    <audio id="audio" preload="auto"></audio>
+  </main>
   <script>
     const ROOM_CODE = "{{ room_code }}";
+    const NAME = "{{ name|e }}";
+    let SESSION_ID = "{{ session_id }}";
+    const IS_ADMIN_HINT = {{ "true" if is_admin else "false" }};
     const ADMIN_TOKEN = "{{ admin_token }}";
+    if (!SESSION_ID || SESSION_ID === "") {
+      const stored = localStorage.getItem("session_id:" + ROOM_CODE);
+      if (stored) SESSION_ID = stored;
+    } else {
+      localStorage.setItem("session_id:" + ROOM_CODE, SESSION_ID);
+    }
+    const statusEl = document.getElementById("status");
+    const playlistEl = document.getElementById("playlist");
+    const nowTrackEl = document.getElementById("now-track");
+    const adminBadge = document.getElementById("admin-badge");
+    const adminControls = document.getElementById("admin-controls");
+    const uploadArea = document.getElementById("upload-area");
+    const notificationsContainer = document.getElementById("notifications-container");
+    const enableAudioBtn = document.getElementById("enable-audio");
+    const audio = document.getElementById("audio");
+    const btnTogglePlay = document.getElementById("btn-toggle-play");
+    const btnMute = document.getElementById("btn-mute");
+    const btnSeek = document.getElementById("btn-seek");
+    const seekInput = document.getElementById("seek-input");
+    let ws = null;
+    let isAdmin = IS_ADMIN_HINT;
+    if (isAdmin) {
+      adminBadge.style.display = "inline";
+      uploadArea.style.display = "block";
+      adminControls.style.display = "flex";
+      btnTogglePlay.disabled = false;
+      btnSeek.disabled = false;
+    }
+    let clockOffset = 0;
+    let currentState = {};
+    function connectWS() {
+      const q = new URLSearchParams({
+        session_id: SESSION_ID,
+        name: NAME,
+        ...(ADMIN_TOKEN && { admin_token: ADMIN_TOKEN })
+      });
+      const protocol = location.protocol === "https:" ? "wss:" : "ws:";
+      const wsUrl = `${protocol}//${location.host}/ws/${ROOM_CODE}?${q.toString()}`;
+      ws = new WebSocket(wsUrl);
+      ws.onopen = () => {
+        status("Connected. Syncing...");
+        ws.send(JSON.stringify({type:"request_sync"}));
+      };
+      ws.onmessage = (ev) => handleMessage(JSON.parse(ev.data));
+      ws.onclose = () => {
+        status("Disconnected. Reconnecting...");
+        setTimeout(connectWS, 2000);
+      };
+      ws.onerror = () => status("WebSocket error");
+    }
+    function handleMessage(msg) {
+      const type = msg.type;
+      if (type !== 'pong') console.log("ws recv", msg);
+      if (type === "joined") {
+        SESSION_ID = msg.session_id;
+        localStorage.setItem("session_id:" + ROOM_CODE, SESSION_ID);
+        isAdmin = msg.is_admin;
+        if (isAdmin) {
+          adminBadge.style.display = "inline";
+          uploadArea.style.display = "block";
+          adminControls.style.display = "flex";
+          btnTogglePlay.disabled = false;
+          btnSeek.disabled = false;
+        }
+      } else if (type === "sync_state") {
+        currentState = msg;
+        renderPlaylist(msg.tracks, msg.playlist);
+        applyCurrentState(msg);
+        status(`Synced (seq ${msg.seq})`);
+      } else if (type === "play") {
+        currentState.play_state = "playing";
+        currentState.current_track_id = msg.track_id;
+        currentState.play_started_at = msg.play_at - msg.position;
+        schedulePlay(msg.play_at, msg.position, msg.track_id);
+        updatePlayButton();
+        status("Playback started");
+      } else if (type === "pause") {
+        currentState.play_state = "paused";
+        currentState.play_position = msg.position;
+        doPause(msg.position);
+        updatePlayButton();
+        status("Playback paused");
+      } else if (type === "seek") {
+        currentState.play_position = msg.position;
+        if (currentState.play_state === "playing") {
+          audio.currentTime = msg.position;
+        }
+        status("Seeked");
+      } else if (type === "set_track") {
+        currentState.current_track_id = msg.track_id;
+        const track = findTrack(msg.track_id);
+        if (track) {
+          setAudioSrc(track.url);
+          nowTrackEl.textContent = track.original_name;
+        }
+        currentState.play_state = 'paused';
+        updatePlayButton();
+        status("Track changed");
+      } else if (type === "track_added") {
+        if (!currentState.tracks) currentState.tracks = [];
+        currentState.tracks.push(msg.track);
+        if (!currentState.playlist) currentState.playlist = [];
+        currentState.playlist.push(msg.track.track_id);
+        renderPlaylist(currentState.tracks, currentState.playlist);
+        status("New track added");
+      } else if (type === "user_joined" || type === "user_left") {
+        showNotification(`${msg.name} has ${type === 'user_joined' ? 'joined' : 'left'} the room.`);
+      }
+    }
+    function findTrack(track_id) {
+      return currentState?.tracks?.find(t => t.track_id === track_id) || null;
+    }
+    function renderPlaylist(tracks, playlist) {
+        playlistEl.innerHTML = "";
+        if (!tracks || !playlist || playlist.length === 0) {
+            playlistEl.innerHTML = "<div class='muted'>No tracks uploaded yet.</div>";
+            return;
+        }
+        playlist.forEach(tid => {
+            const track = tracks.find(t => t.track_id === tid);
+            if (!track) return;
+            const item = document.createElement("div");
+            item.className = "playlist-item";
+            item.innerHTML = `<div class="title">${track.original_name}</div><div class="meta">by ${track.uploader}</div>`;
+            if (isAdmin) {
+              item.onclick = () => ws.send(JSON.stringify({type: "set_track", track_id: track.track_id}));
+            }
+            playlistEl.appendChild(item);
+        });
+    }
+    function updatePlayButton() {
+      btnTogglePlay.textContent = currentState.play_state === 'playing' ? 'Pause' : 'Play';
+    }
+    function setAudioSrc(url) {
+        const fullUrl = url.startsWith("/media/") ? url : `/media/${url}`;
+        if (audio.src !== fullUrl) audio.src = fullUrl;
+    }
+    function schedulePlay(playAtServerTs, position, trackId) {
+      const now = Date.now() / 1000;
+      const delay = Math.max(0, playAtServerTs - (now + clockOffset));
+      const track = findTrack(trackId);
+      if(track) {
+        setAudioSrc(track.url);
+        nowTrackEl.textContent = track.original_name;
+      }
+      setTimeout(() => {
+        audio.currentTime = position;
+        audio.play().catch(e => console.error("Play failed:", e));
+      }, delay * 1000);
+    }
+    function doPause(position) {
+      audio.pause();
+      if(position) audio.currentTime = position;
+    }
+    function applyCurrentState(state) {
+        const track = findTrack(state.current_track_id);
+        if (track) {
+            setAudioSrc(track.url);
+            nowTrackEl.textContent = track.original_name;
+        }
+        if (state.play_state === "playing") {
+            schedulePlay(state.play_started_at + state.play_position, state.play_position, state.current_track_id);
+        } else {
+            doPause(state.play_position);
+        }
+        updatePlayButton();
+    }
+    function showNotification(message) {
+      const notif = document.createElement('div');
+      notif.className = 'notification';
+      notif.textContent = message;
+      notificationsContainer.appendChild(notif);
+      setTimeout(() => {
+        notif.style.opacity = '0';
+        setTimeout(() => notif.remove(), 500);
+      }, 3000);
+    }
+    btnTogglePlay.addEventListener("click", () => {
+      if (!ws || ws.readyState !== WebSocket.OPEN) return;
+      const action = currentState.play_state === 'playing' ? 'pause' : 'play';
+      ws.send(JSON.stringify({type: action, position: audio.currentTime}));
+    });
+    btnMute.addEventListener("click", () => {
+      audio.muted = !audio.muted;
+      btnMute.textContent = audio.muted ? 'Unmute' : 'Mute';
+    });
+    btnSeek.addEventListener("click", () => {
+      const pos = parseFloat(seekInput.value || "0");
+      if (ws && ws.readyState === WebSocket.OPEN) ws.send(JSON.stringify({type: "seek", position: pos}));
+    });
+    enableAudioBtn.addEventListener("click", async () => {
+      try {
+        await audio.play();
+        audio.pause();
+        enableAudioBtn.textContent = "Audio enabled";
+        enableAudioBtn.disabled = true;
+      } catch (e) {
+        enableAudioBtn.textContent = "Tap again to allow audio";
+      }
+    });
+    // upload logic
+    const uploadForm = document.getElementById("upload-form");
+    const fileInput = document.getElementById("file-input");
+    const uploadProgress = document.getElementById("upload-progress");
+    const progressFill = document.getElementById("progress-fill");
+    const progressText = document.getElementById("progress-text");
+    uploadForm.addEventListener("submit", (ev) => {
+      ev.preventDefault();
+      const file = fileInput.files[0];
+      if (!file) return;
+      const fd = new FormData();
+      fd.append("file", file);
+      fd.append("room_code", ROOM_CODE);
+      fd.append("session_id", SESSION_ID);
+      fd.append("uploader_name", NAME);
+      const xhr = new XMLHttpRequest();
+      xhr.open("POST", "/upload", true);
+      xhr.upload.onprogress = e => {
+        if (e.lengthComputable) {
+          const percent = Math.round((e.loaded / e.total) * 100);
+          uploadProgress.style.display = "block";
+          progressFill.style.width = percent + "%";
+          progressText.textContent = `Uploading ${percent}%`;
+        }
+      };
+      xhr.onload = () => {
+          uploadProgress.style.display = "none";
+          fileInput.value = "";
+          if (xhr.status !== 200) alert("Upload failed.");
+      };
+      xhr.send(fd);
+    });
+    function status(txt) { statusEl.textContent = txt; }
+    connectWS();
   </script>
 </body>
+</html>