+
+
+
+
+ Listening Parties
++ Listen to music together with your friends in real-time. + Host controls the music, everyone enjoys it. +
+ + +
+
+
+
+
+
+
+
+
+ Listening Party
+ Party Name
+ +
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Currently Playing
+
+
+ Participants (0)
+
+
+ Song Requests
+
+
+ Search Results
diff --git a/js/app.js b/js/app.js
index 05be313..c3baadb 100644
--- a/js/app.js
+++ b/js/app.js
@@ -33,6 +33,7 @@ import { authManager } from './accounts/auth.js';
import { registerSW } from 'virtual:pwa-register';
import { openEditProfile } from './profile.js';
import { ThemeStore } from './themeStore.js';
+import { partyManager } from './listening-party.js';
import './commandPalette.js';
import { initTracker } from './tracker.js';
import {
diff --git a/js/events.js b/js/events.js
index 02ad3b7..a286939 100644
--- a/js/events.js
+++ b/js/events.js
@@ -55,6 +55,7 @@ import {
trackEvent,
} from './analytics.js';
import { SVG_BIN, SVG_MUTE, SVG_PAUSE, SVG_PLAY, SVG_VOLUME, SVG_CHECKBOX, SVG_CHECKBOX_CHECKED } from './icons.js';
+import { partyManager } from './listening-party.js';
let currentTrackIdForWaveform = null;
@@ -1155,6 +1156,15 @@ export async function handleTrackAction(
return;
}
+ if (action === 'request-song') {
+ if (partyManager.currentParty) {
+ await partyManager.requestSong(item);
+ } else {
+ showNotification('You are not in a listening party');
+ }
+ return;
+ }
+
if (action === 'start-radio' || action === 'start-infinite-radio') {
let tracks = [];
if (type === 'track') {
@@ -1970,6 +1980,11 @@ async function updateContextMenuLikeState(contextMenu, contextTrack) {
} else {
item.style.display = 'block';
}
+ if (item.dataset.action === 'request-song') {
+ if (!partyManager.currentParty) {
+ item.style.display = 'none';
+ }
+ }
// Update labels for Like/Save
if (item.dataset.action === 'toggle-like') {
diff --git a/js/listening-party.js b/js/listening-party.js
new file mode 100644
index 0000000..dceb92d
--- /dev/null
+++ b/js/listening-party.js
@@ -0,0 +1,594 @@
+import { pb, syncManager } from './accounts/pocketbase.js';
+import { authManager } from './accounts/auth.js';
+import { Player } from './player.js';
+import { navigate } from './router.js';
+import { getTrackArtists, escapeHtml } from './utils.js';
+import { audioContextManager } from './audio-context.js';
+import { showNotification } from './downloads.js';
+import { SVG_PAUSE } from './icons.js';
+
+class Modal {
+ static async show({ title, content, actions = [] }) {
+ return new Promise((resolve) => {
+ const modal = document.createElement('div');
+ modal.className = 'modal active';
+ modal.style.zIndex = '10000';
+ modal.innerHTML = `
+
+
+ `;
+ document.body.appendChild(modal);
+
+ const cleanup = (val) => {
+ modal.remove();
+ resolve(val);
+ };
+
+ modal.querySelectorAll('.modal-action-btn').forEach(btn => {
+ btn.onclick = () => {
+ const action = actions[btn.dataset.index];
+ if (action.callback) {
+ const result = action.callback(modal);
+ if (result !== false) cleanup(result ?? true);
+ } else {
+ cleanup(true);
+ }
+ };
+ });
+
+ modal.querySelector('.modal-overlay').onclick = () => cleanup(false);
+ });
+ }
+
+ static async alert(title, message) {
+ return this.show({
+ title,
+ content: message,
+ actions: [{ label: 'OK', type: 'primary' }]
+ });
+ }
+
+ static async confirm(title, message, confirmLabel = 'Confirm', type = 'primary') {
+ return this.show({
+ title,
+ content: message,
+ actions: [
+ { label: confirmLabel, type: type },
+ { label: 'Cancel', type: 'secondary', callback: () => false }
+ ]
+ });
+ }
+}
+
+export class ListeningPartyManager {
+ constructor() {
+ this.currentParty = null;
+ this.isHost = false;
+ this.memberId = null;
+ this.members = [];
+ this.messages = [];
+ this.requests = [];
+ this.unsubscribeFunctions = [];
+ this.syncInterval = null;
+ this.heartbeatInterval = null;
+ this.isJoining = false;
+ this.isInternalSync = false;
+ this.originalSafePlay = null;
+
+ this.setupEventListeners();
+ }
+
+ setupEventListeners() {
+ document.getElementById('create-party-btn')?.addEventListener('click', () => this.createParty());
+ document.getElementById('leave-party-btn')?.addEventListener('click', () => this.leaveParty());
+ document.getElementById('copy-party-link-btn')?.addEventListener('click', () => this.copyInviteLink());
+ document.getElementById('party-chat-send-btn')?.addEventListener('click', () => this.sendChatMessage());
+ document.getElementById('party-chat-input')?.addEventListener('keypress', (e) => {
+ if (e.key === 'Enter') this.sendChatMessage();
+ });
+ }
+
+ async createParty() {
+ const nameInput = document.getElementById('party-name-input');
+ const user = authManager.user;
+ if (!user) {
+ Modal.alert('Login Required', 'You must be logged in to host a listening party.');
+ return;
+ }
+
+ const pbUser = await syncManager._getUserRecord(user.$id);
+ if (!pbUser) {
+ Modal.alert('Sync Error', 'Failed to sync user data. Please try again.');
+ return;
+ }
+
+ const name = nameInput.value.trim() || `${user.displayName || user.username || 'Member'}'s Party`;
+ const player = Player.instance;
+ const currentTrack = player.currentTrack ? syncManager._minifyItem('track', player.currentTrack) : null;
+ const partyData = {
+ name: name,
+ host: pbUser.id,
+ is_playing: player.currentTrack ? !player.activeElement.paused : false,
+ playback_time: player.activeElement.currentTime || 0,
+ playback_timestamp: Date.now(),
+ queue: player.queue?.map(t => syncManager._minifyItem('track', t)) || []
+ };
+ if (currentTrack) partyData.current_track = currentTrack;
+
+ try {
+ const party = await pb.collection('parties').create(partyData, { f_id: user.$id });
+ navigate(`/party/${party.id}`);
+ } catch (e) { console.error('Create error:', e); }
+ }
+
+ async joinParty(partyId) {
+ if (this.currentParty?.id === partyId || this.isJoining) return;
+ this.isJoining = true;
+
+ try {
+ const user = authManager.user;
+ const f_id = user ? user.$id : 'guest';
+ const party = await pb.collection('parties').getOne(partyId, { expand: 'host', f_id });
+
+ const confirmed = await this.showJoinModal(user);
+ if (!confirmed) {
+ this.isJoining = false;
+ navigate('/parties');
+ return;
+ }
+
+ this.currentParty = party;
+ const pbUser = user ? await syncManager._getUserRecord(user.$id) : null;
+ this.isHost = pbUser && pbUser.id === party.host;
+
+ const profile = confirmed.profile || await this.getMemberProfile(pbUser);
+ const memberData = { party: partyId, name: profile.name, avatar_url: profile.avatar_url, is_host: !!this.isHost, last_seen: Date.now() };
+ if (pbUser?.id) memberData.user = pbUser.id;
+
+ const member = await pb.collection('party_members').create(memberData, { f_id });
+ this.memberId = member.id;
+
+ this.setupSubscriptions(partyId);
+ this.startHeartbeat();
+ this.renderPartyUI();
+ this.loadInitialData(partyId);
+
+ if (!this.isHost) {
+ this.lockControls();
+ this.setupGuestSyncInterception();
+ if (party.current_track) {
+ await audioContextManager.resume();
+ this.syncWithHost(party);
+ }
+ }
+ } catch (error) {
+ console.error('Join error:', error);
+ Modal.alert('Error', 'Failed to join the party. It may have ended.');
+ navigate('/parties');
+ } finally {
+ this.isJoining = false;
+ }
+ }
+
+ async showJoinModal(user) {
+ if (user) {
+ const confirmed = await Modal.confirm(
+ 'Join Party',
+ `You are about to join a listening party. Everyone in the party will see your profile. Are you ready to listen together?`,
+ 'Join Party'
+ );
+ return confirmed ? { profile: null } : false;
+ } else {
+ return new Promise((resolve) => {
+ const cached = localStorage.getItem('party_guest_profile');
+ const defaultName = cached ? JSON.parse(cached).name : '';
+
+ Modal.show({
+ title: 'Join as Guest',
+ content: `
+ `;
+ }
+ }
+ }
+
+ renderMembers() {
+ const list = document.getElementById('party-members-list');
+ if (!list) return;
+ list.innerHTML = this.members.map(m => `
`).join('');
+ }
+
+ renderRequests() {
+ const list = document.getElementById('party-requests-list');
+ if (!list) return;
+ if (this.requests.length === 0) {
+ list.innerHTML = `
`;
+ }
+ const ytMatch = url.match(/(?:https?:\/\/)?(?:www\.)?(?:youtube\.com\/watch\?v=|youtu\.be\/)([a-zA-Z0-9_-]{11})/i);
+ if (ytMatch) {
+ return `${url}`;
+ }
+ if (url.match(/\.(mp4|webm|ogg)(\?.*)?$/i)) {
+ return `${url}`;
+ }
+ if (url.includes('tenor.com/view/')) {
+ return `${url}`;
+ }
+ return `${url}`;
+ });
+
+ div.innerHTML = `
+
Enter a nickname to join the party!
+ + `, + actions: [ + { + label: 'Join Party', + type: 'primary', + callback: (modal) => { + const name = modal.querySelector('#guest-name-input').value.trim() || 'Guest'; + const profile = { name, avatar_url: `https://api.dicebear.com/9.x/identicon/svg?seed=${name}` }; + localStorage.setItem('party_guest_profile', JSON.stringify(profile)); + return { profile }; + } + }, + { label: 'Cancel', type: 'secondary', callback: () => false } + ] + }).then(resolve); + }); + } + } + + setupGuestSyncInterception() { + const player = Player.instance; + if (!this.originalSafePlay) this.originalSafePlay = player.safePlay.bind(player); + player.safePlay = async (el) => { + if (this.currentParty && !this.isHost && !this.currentParty.is_playing) return false; + return await this.originalSafePlay(el); + }; + } + + async getMemberProfile(pbUser = null) { + const user = authManager.user; + if (user) { + const name = pbUser?.display_name || pbUser?.username || user.displayName || user.email?.split('@')[0] || 'Member'; + const avatar = pbUser?.avatar_url || user.photoURL || `https://api.dicebear.com/9.x/identicon/svg?seed=${name}`; + return { name, avatar_url: avatar }; + } + const cached = localStorage.getItem('party_guest_profile'); + return cached ? JSON.parse(cached) : { name: 'Guest', avatar_url: 'https://api.dicebear.com/9.x/identicon/svg?seed=Guest' }; + } + + setupSubscriptions(partyId) { + this.unsubscribeFunctions.forEach(unsub => unsub()); + this.unsubscribeFunctions = []; + const f_id = authManager.user ? authManager.user.$id : 'guest'; + + pb.collection('parties').subscribe(partyId, (e) => { + if (e.action === 'update') { + this.currentParty = e.record; + if (!this.isHost) this.syncWithHost(e.record); + this.updatePartyHeader(); + } else if (e.action === 'delete') { + Modal.alert('Party Ended', 'The host has ended the listening party.'); + this.leaveParty(false); + } + }, { f_id }).then(unsub => this.unsubscribeFunctions.push(unsub)); + + pb.collection('party_members').subscribe('*', (e) => { + if (e.record.party === partyId) this.loadMembers(); + }, { f_id }).then(unsub => this.unsubscribeFunctions.push(unsub)); + + pb.collection('party_messages').subscribe('*', (e) => { + if (e.record.party === partyId && e.action === 'create') this.addChatMessage(e.record); + }, { f_id }).then(unsub => this.unsubscribeFunctions.push(unsub)); + + pb.collection('party_requests').subscribe('*', (e) => { + if (e.record.party === partyId) this.loadRequests(); + }, { f_id }).then(unsub => this.unsubscribeFunctions.push(unsub)); + } + + async loadInitialData(partyId) { this.loadMembers(); this.loadMessages(); this.loadRequests(); } + + async loadMembers() { + const f_id = authManager.user ? authManager.user.$id : 'guest'; + this.members = await pb.collection('party_members').getFullList({ filter: `party = "${this.currentParty.id}"`, sort: '-is_host,name', f_id }); + this.renderMembers(); + } + + async loadMessages() { + const f_id = authManager.user ? authManager.user.$id : 'guest'; + const res = await pb.collection('party_messages').getList(1, 50, { filter: `party = "${this.currentParty.id}"`, sort: '-created', f_id }); + this.messages = res.items.reverse(); + const container = document.getElementById('party-chat-messages'); + if (container) { container.innerHTML = ''; this.messages.forEach(m => this.addChatMessage(m)); } + } + + async loadRequests() { + const f_id = authManager.user ? authManager.user.$id : 'guest'; + try { + this.requests = await pb.collection('party_requests').getFullList({ + filter: `party = "${this.currentParty.id}"`, + sort: 'created', + f_id: f_id + }); + this.renderRequests(); + } catch (e) { console.error('Failed to load requests:', e); } + } + + renderPartyUI() { + this.updatePartyHeader(); this.renderMembers(); this.renderRequests(); this.showPartyIndicator(); + if (this.isHost) { this.unlockControls(); this.setupHostPlayerSync(); } + else { this.lockControls(); this.setupGuestPlayerInterferenceCheck(); } + } + + updatePartyHeader() { + const titleEl = document.getElementById('party-title'); + const countEl = document.getElementById('party-member-count'); + const metaEl = document.getElementById('party-meta'); + + if (titleEl) titleEl.textContent = this.currentParty.name; + if (countEl) countEl.textContent = this.members.length; + + if (metaEl) { + const host = this.currentParty.expand?.host; + const hostName = host?.display_name || host?.username || 'Unknown'; + metaEl.textContent = `Host: ${hostName}`; + } + + const track = this.currentParty.current_track; + const display = document.getElementById('party-current-track-display'); + if (display) { + if (track) { + const api = Player.instance.api; + const coverUrl = api.getCoverUrl(track.artwork || track.cover || track.album?.cover); + display.innerHTML = ` +
+ 
+
+ `;
+ } else {
+ display.innerHTML = `
+
+ ${!this.currentParty.is_playing ? `
+ ${track.title}
+ ${getTrackArtists(track)}
+
+ ${SVG_PAUSE(24)} Paused
+
+ ` : ''}
+ Waiting for host to play music...
No requests yet. Right-click a song to request!
`;
+ return;
+ }
+
+ list.innerHTML = this.requests.map(r => {
+ try {
+ const api = Player.instance.api;
+ const artists = getTrackArtists(r.track);
+ const coverUrl = api.getCoverUrl(r.track.artwork || r.track.cover || r.track.album?.cover);
+ return `
+
+
`;
+ } catch (e) { return ''; }
+ }).join('');
+
+ if (this.isHost) {
+ const f_id = authManager.user ? authManager.user.$id : 'guest';
+ list.querySelectorAll('.add-request-btn').forEach(btn => btn.addEventListener('click', async (e) => {
+ const reqId = e.currentTarget.dataset.reqId;
+ const req = this.requests.find(r => r.id === reqId);
+ if (req) {
+ Player.instance.addToQueue(req.track);
+ showNotification(`Added "${req.track.title}" to queue`);
+ await pb.collection('party_requests').delete(req.id, { f_id });
+ }
+ }));
+ }
+ }
+
+ addChatMessage(msg) {
+ const container = document.getElementById('party-chat-messages');
+ if (!container) return;
+ const div = document.createElement('div');
+ div.className = 'chat-msg';
+
+ const urlRegex = /(https?:\/\/[^\s]+)/g;
+ let content = escapeHtml(msg.content);
+
+ content = content.replace(urlRegex, (url) => {
+ if (url.match(/\.(jpeg|jpg|gif|png|webp|svg)(\?.*)?$/i)) {
+ return `${url}
+
+
+
+ ${this.isHost ? `` : ''}
+ ${escapeHtml(msg.sender_name)}
+
+ ${content}
+
+ `;
+ container.appendChild(div);
+ container.scrollTop = container.scrollHeight;
+ }
+
+ async sendChatMessage() {
+ const input = document.getElementById('party-chat-input');
+ if (!input || !input.value.trim()) return;
+ const content = input.value.trim(); input.value = '';
+ const profile = await this.getMemberProfile();
+ const f_id = authManager.user ? authManager.user.$id : 'guest';
+ try { await pb.collection('party_messages').create({ party: this.currentParty.id, sender_name: profile.name, content }, { f_id }); } catch (e) {}
+ }
+
+ async requestSong(track) {
+ if (!this.currentParty) return;
+ const profile = await this.getMemberProfile();
+ const f_id = authManager.user ? authManager.user.$id : 'guest';
+ try {
+ const minifiedTrack = syncManager._minifyItem('track', track);
+ await pb.collection('party_requests').create({
+ party: this.currentParty.id,
+ track: minifiedTrack,
+ requested_by: profile.name
+ }, { f_id });
+ showNotification(`Requested "${track.title}"`);
+ } catch (e) { console.error('Request error:', e); }
+ }
+
+ async syncWithHost(party) {
+ if (this.isInternalSync) return;
+ this.isInternalSync = true;
+ try {
+ const player = Player.instance;
+ const el = player.activeElement;
+ if (!party.current_track) { if (player.currentTrack) el.pause(); return; }
+
+ const currentId = String(player.currentTrack?.id || '');
+ const targetId = String(party.current_track.id || '');
+
+ if (currentId !== targetId) {
+ const cleanedTrack = { ...party.current_track };
+ delete cleanedTrack.audioUrl; delete cleanedTrack.streamUrl; delete cleanedTrack.remoteUrl;
+ player.setQueue([cleanedTrack], 0);
+ await player.playTrackFromQueue(party.playback_time);
+ if (!party.is_playing) el.pause();
+ return;
+ }
+
+ if (party.is_playing) {
+ if (el.paused) {
+ const success = await player.safePlay(el);
+ }
+ const latency = (Date.now() - party.playback_timestamp) / 1000;
+ const targetTime = party.is_playing ? party.playback_time + latency : party.playback_time;
+ if (Math.abs(el.currentTime - targetTime) > 1.2) el.currentTime = targetTime;
+ } else {
+ if (!el.paused) el.pause();
+ if (Math.abs(el.currentTime - party.playback_time) > 0.5) el.currentTime = party.playback_time;
+ }
+ } catch (e) { console.error('Sync error:', e); } finally { this.isInternalSync = false; }
+ }
+
+ lockControls() {
+ const selectors = ['.play-pause-btn', '#next-btn', '#prev-btn', '#shuffle-btn', '#repeat-btn', '#progress-bar', '#fs-play-pause-btn', '#fs-next-btn', '#fs-prev-btn', '#fs-shuffle-btn', '#fs-repeat-btn', '#fs-progress-bar'];
+ selectors.forEach(s => document.querySelectorAll(s).forEach(el => { el.style.opacity = '0.5'; el.style.pointerEvents = 'none'; }));
+ }
+
+ unlockControls() {
+ const selectors = ['.play-pause-btn', '#next-btn', '#prev-btn', '#shuffle-btn', '#repeat-btn', '#progress-bar', '#fs-play-pause-btn', '#fs-next-btn', '#fs-prev-btn', '#fs-shuffle-btn', '#fs-repeat-btn', '#fs-progress-bar'];
+ selectors.forEach(s => document.querySelectorAll(s).forEach(el => { el.style.opacity = '1'; el.style.pointerEvents = 'auto'; }));
+ }
+
+ setupHostPlayerSync() {
+ const player = Player.instance;
+ const updateParty = async () => {
+ if (!this.currentParty || !this.isHost || this.isInternalSync) return;
+ const el = player.activeElement;
+ const sharedTrack = player.currentTrack ? syncManager._minifyItem('track', player.currentTrack) : null;
+ try {
+ await pb.collection('parties').update(this.currentParty.id, {
+ current_track: sharedTrack,
+ is_playing: !el.paused,
+ playback_time: el.currentTime,
+ playback_timestamp: Date.now(),
+ queue: player.queue?.map(t => syncManager._minifyItem('track', t)) || []
+ }, { f_id: authManager.user?.$id });
+ } catch (e) {}
+ };
+ ['play', 'pause', 'seeked'].forEach(ev => {
+ player.audio.addEventListener(ev, updateParty);
+ if (player.video) player.video.addEventListener(ev, updateParty);
+ });
+ const originalPlayTrackFromQueue = player.playTrackFromQueue.bind(player);
+ player.playTrackFromQueue = async (...args) => {
+ const result = await originalPlayTrackFromQueue(...args);
+ if (!this.isInternalSync) await updateParty();
+ return result;
+ };
+ this.syncInterval = setInterval(updateParty, 2000);
+ }
+
+ setupGuestPlayerInterferenceCheck() {
+ const player = Player.instance;
+ const originalPlayTrackFromQueue = player.playTrackFromQueue.bind(player);
+ player.playTrackFromQueue = async (...args) => {
+ if (this.currentParty && !this.isHost && !this.isInternalSync) {
+ const leave = await Modal.confirm('Leave Party?', 'Playing a song will cause you to leave the listening party. Are you sure?', 'Leave and Play', 'danger');
+ if (!leave) return;
+ this.leaveParty();
+ }
+ return await originalPlayTrackFromQueue(...args);
+ };
+ }
+
+ startHeartbeat() {
+ this.heartbeatInterval = setInterval(async () => {
+ if (!this.memberId) return;
+ try { await pb.collection('party_members').update(this.memberId, { last_seen: Date.now() }, { f_id: authManager.user?.$id || 'guest' }); } catch (e) {}
+ }, 30000);
+ }
+
+ async leaveParty(shouldCleanup = true) {
+ const f_id = authManager.user?.$id || 'guest';
+ if (this.isHost && shouldCleanup) {
+ const end = await Modal.confirm('End Party?', 'Leaving will end the party for everyone. Are you sure?', 'End Party', 'danger');
+ if (!end) return;
+ try {
+ const cleanup = async (coll) => {
+ const items = await pb.collection(coll).getFullList({ filter: `party = "${this.currentParty.id}"`, f_id });
+ for (const i of items) await pb.collection(coll).delete(i.id, { f_id });
+ };
+ await cleanup('party_members'); await cleanup('party_messages'); await cleanup('party_requests');
+ await pb.collection('parties').delete(this.currentParty.id, { f_id });
+ } catch (e) {}
+ } else if (this.memberId) {
+ try { await pb.collection('party_members').delete(this.memberId, { f_id }); } catch (e) {}
+ }
+ this.restorePlayerMethods();
+ this.unlockControls();
+ this.unsubscribeFunctions.forEach(unsub => unsub());
+ this.unsubscribeFunctions = [];
+ clearInterval(this.syncInterval); clearInterval(this.heartbeatInterval);
+ this.currentParty = null; this.isHost = false; this.memberId = null;
+ document.getElementById('party-indicator')?.remove();
+ navigate('/parties');
+ }
+
+ restorePlayerMethods() {
+ const player = Player.instance;
+ if (this.originalSafePlay) { player.safePlay = this.originalSafePlay; this.originalSafePlay = null; }
+ }
+
+ copyInviteLink() {
+ navigator.clipboard.writeText(`${window.location.origin}/party/${this.currentParty.id}`);
+ showNotification('Invite link copied!');
+ }
+
+ showPartyIndicator() {
+ let indicator = document.getElementById('party-indicator');
+ if (!indicator) {
+ indicator = document.createElement('div');
+ indicator.id = 'party-indicator';
+ indicator.className = 'party-indicator-card';
+ document.body.appendChild(indicator);
+ indicator.onclick = () => navigate(`/party/${this.currentParty.id}`);
+ }
+
+ indicator.innerHTML = `
+
+ Listening Party
+
+ ${this.currentParty.name}
+ ${this.members.length}
+ `;
+ }
+}
+
+export const partyManager = new ListeningPartyManager();
diff --git a/js/router.js b/js/router.js
index e273e9a..934c281 100644
--- a/js/router.js
+++ b/js/router.js
@@ -40,6 +40,12 @@ export function createRouter(ui) {
};
switch (page) {
+ case 'parties':
+ await ui.renderPartiesPage();
+ break;
+ case 'party':
+ await ui.renderPartyDetailPage(param);
+ break;
case 'search':
await ui.renderSearchPage(decodeURIComponent(param));
break;
diff --git a/js/ui.js b/js/ui.js
index 9377a43..872fc0c 100644
--- a/js/ui.js
+++ b/js/ui.js
@@ -29,7 +29,9 @@ import {
} from './storage.js';
import { db } from './db.js';
import { getVibrantColorFromImage } from './vibrant-color.js';
-import { syncManager } from './accounts/pocketbase.js';
+import { pb, syncManager } from './accounts/pocketbase.js';
+import { authManager } from './accounts/auth.js';
+import { partyManager } from './listening-party.js';
import { Visualizer } from './visualizer.js';
import { navigate } from './router.js';
import { sidePanelManager } from './side-panel.js';
@@ -1778,6 +1780,27 @@ export class UIRenderer {
}
}
+ async renderPartiesPage() {
+ this.showPage('parties');
+ const authRequired = document.getElementById('parties-auth-required');
+ const hostControls = document.getElementById('parties-host-controls');
+ const loginBtn = document.getElementById('parties-login-btn');
+
+ if (authManager.user) {
+ authRequired.style.display = 'none';
+ hostControls.style.display = 'block';
+ } else {
+ authRequired.style.display = 'block';
+ hostControls.style.display = 'none';
+ loginBtn.onclick = () => navigate('/account');
+ }
+ }
+
+ async renderPartyDetailPage(id) {
+ this.showPage('party-detail');
+ await partyManager.joinParty(id);
+ }
+
async renderLibraryPage() {
this.showPage('library');
diff --git a/styles.css b/styles.css
index fcf503b..71ecf74 100644
--- a/styles.css
+++ b/styles.css
@@ -2706,6 +2706,19 @@ body.multi-select-mode .track-item:hover {
flex-shrink: 0;
}
+#page-party-detail .detail-header-actions .btn-primary,
+#page-party-detail .detail-header-actions .btn-secondary {
+ width: auto;
+ height: auto;
+ padding: 0.6rem 1.2rem;
+ border-radius: var(--radius-full);
+}
+
+#page-party-detail .detail-header-actions .btn-primary span,
+#page-party-detail .detail-header-actions .btn-secondary span {
+ display: inline;
+}
+
.detail-header-actions .card-menu-btn,
.detail-header-actions #album-menu-btn {
position: static !important;
@@ -9074,3 +9087,117 @@ body:has(#side-panel.active) #close-fullscreen-cover-btn {
align-items: center;
gap: 0.5rem;
}
+
+.party-container {
+ padding: 2rem;
+ max-width: 1200px;
+ margin: 0 auto;
+}
+
+.party-content-layout {
+ display: grid;
+ grid-template-columns: 1fr 350px;
+ gap: 2rem;
+}
+
+@media (max-width: 1024px) {
+ .party-content-layout {
+ grid-template-columns: 1fr;
+ }
+}
+
+.party-indicator-card {
+ position: fixed;
+ bottom: calc(var(--player-bar-height-desktop) + 1.5rem);
+ right: 1.5rem;
+ background: var(--card);
+ border: 1px solid var(--border);
+ border-right: 4px solid var(--primary);
+ border-radius: var(--radius-md);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 1rem;
+ z-index: 2000;
+ box-shadow: var(--shadow-lg);
+ cursor: pointer;
+ transition: all 0.2s ease;
+ max-width: 280px;
+}
+
+.party-indicator-card:hover {
+ background: var(--secondary);
+}
+
+.party-indicator-content {
+ flex: 1;
+ min-width: 0;
+ text-align: right;
+}
+
+.party-indicator-label {
+ color: var(--muted-foreground);
+ font-size: 0.65rem;
+ text-transform: uppercase;
+ font-weight: 700;
+ letter-spacing: 0.05em;
+ display: block;
+ margin-bottom: 2px;
+}
+
+.party-indicator-name {
+ font-size: 0.85rem;
+ font-weight: 600;
+ white-space: nowrap;
+ overflow: hidden;
+ text-overflow: ellipsis;
+}
+
+.party-indicator-count {
+ background: var(--secondary);
+ color: var(--primary);
+ font-size: 0.75rem;
+ font-weight: 800;
+ padding: 2px 8px;
+ border-radius: 10px;
+ min-width: 24px;
+ text-align: center;
+ order: -1;
+}
+
+@media (max-width: 768px) {
+ .party-indicator-card {
+ bottom: calc(var(--player-bar-height-mobile) + 1rem);
+ left: 1rem;
+ right: 1rem;
+ max-width: none;
+ }
+}
+
+.chat-msg {
+ margin-bottom: 0.5rem;
+ animation: fadeIn 0.2s ease-out;
+}
+
+@keyframes fadeIn {
+ from { opacity: 0; transform: translateY(5px); }
+ to { opacity: 1; transform: translateY(0); }
+}
+
+.party-status-badge {
+ padding: 0.25rem 0.5rem;
+ background: var(--primary);
+ color: var(--primary-foreground);
+ border-radius: var(--radius-sm);
+ font-size: 0.75rem;
+ font-weight: bold;
+ text-transform: uppercase;
+}
+
+.member-item {
+ transition: transform 0.2s ease;
+}
+
+.member-item:hover {
+ transform: scale(1.02);
+}