root/gaming-hub
0
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Watch Together: Videos bleiben in Queue mit Watched-Haken

Browse source 
Statt Videos nach dem Abspielen aus der Warteschlange zu entfernen,
bleiben sie drin und werden mit einem gruenen Haken markiert.
Separate History-Section entfernt — die Queue IST die History.
Videos bleiben klickbar zum erneuten Abspielen.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
This commit is contained in:
Daniel 2026-03-07 22:23:43 +01:00
parent 22b4c6b187
commit 963bb1b775
3 changed files with 64 additions and 146 deletions
Download patch file Download diff file Expand all files Collapse all files

78
web/src/plugins/watch-together/WatchTogetherTab.tsx
View file

@ -20,8 +20,7 @@ interface RoomState {
currentVideo: { url: string; title: string } | null;
playing: boolean;
currentTime: number;
queue: Array<{ url: string; title: string; addedBy: string }>;
history: Array<{ url: string; title: string; addedBy: string; playedAt: string }>;
queue: Array<{ url: string; title: string; addedBy: string; watched: boolean }>;
}
interface JoinModal {
@ -77,7 +76,6 @@ export default function WatchTogetherTab({ data }: { data: any }) {
const [currentTime, setCurrentTime] = useState(0);
const [playerError, setPlayerError] = useState<string | null>(null);
const [addingToQueue, setAddingToQueue] = useState(false);
const [showHistory, setShowHistory] = useState(false);
// ── Refs ──
const wsRef = useRef<WebSocket | null>(null);
@ -299,7 +297,6 @@ export default function WatchTogetherTab({ data }: { data: any }) {
playing: r.playing || false,
currentTime: r.currentTime || 0,
queue: r.queue || [],
history: r.history || [],
});
break;
}
@ -315,7 +312,6 @@ export default function WatchTogetherTab({ data }: { data: any }) {
playing: r.playing || false,
currentTime: r.currentTime || 0,
queue: r.queue || [],
history: r.history || [],
});
if (r.currentVideo?.url) {
setTimeout(() => loadVideo(r.currentVideo.url), 100);
@ -370,7 +366,6 @@ export default function WatchTogetherTab({ data }: { data: any }) {
currentVideo: newVideo || null,
playing: msg.playing,
currentTime: msg.currentTime ?? prev.currentTime,
history: msg.history ?? prev.history,
} : prev);
break;
}
@ -708,52 +703,39 @@ export default function WatchTogetherTab({ data }: { data: any }) {
{currentRoom.queue.length === 0 ? (
<div className="wt-queue-empty">Keine Videos in der Warteschlange</div>
) : (
currentRoom.queue.map((item, i) => (
<div
key={i}
className={`wt-queue-item${currentRoom.currentVideo?.url === item.url ? ' playing' : ''}${isHost ? ' clickable' : ''}`}
onClick={() => isHost && wsSend({ type: 'play_video', index: i })}
title={isHost ? 'Klicken zum Abspielen' : undefined}
>
<div className="wt-queue-item-info">
{item.url.match(/youtu/) && (
<img
className="wt-queue-thumb"
src={`https://img.youtube.com/vi/${item.url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)?.[1]}/default.jpg`}
alt=""
/>
)}
<div className="wt-queue-item-text">
<div className="wt-queue-item-title">{item.title || item.url}</div>
<div className="wt-queue-item-by">{item.addedBy}</div>
currentRoom.queue.map((item, i) => {
const isCurrent = currentRoom.currentVideo?.url === item.url;
return (
<div
key={i}
className={`wt-queue-item${isCurrent ? ' playing' : ''}${item.watched && !isCurrent ? ' watched' : ''}${isHost ? ' clickable' : ''}`}
onClick={() => isHost && wsSend({ type: 'play_video', index: i })}
title={isHost ? 'Klicken zum Abspielen' : undefined}
>
<div className="wt-queue-item-info">
{item.watched && !isCurrent && <span className="wt-queue-item-check">{'\u2713'}</span>}
{item.url.match(/youtu/) && (
<img
className="wt-queue-thumb"
src={`https://img.youtube.com/vi/${item.url.match(/(?:youtube\.com\/(?:watch\?v=|embed\/|shorts\/)|youtu\.be\/)([a-zA-Z0-9_-]{11})/)?.[1]}/default.jpg`}
alt=""
/>
)}
<div className="wt-queue-item-text">
<div className="wt-queue-item-title">{item.title || item.url}</div>
<div className="wt-queue-item-by">{item.addedBy}</div>
</div>
</div>
{isHost && (
<button className="wt-queue-item-remove" onClick={(e) => { e.stopPropagation(); removeFromQueue(i); }} title="Entfernen">
{'\u00D7'}
</button>
)}
</div>
{isHost && (
<button className="wt-queue-item-remove" onClick={() => removeFromQueue(i)} title="Entfernen">
{'\u00D7'}
</button>
)}
</div>
))
);
})
)}
</div>
{currentRoom.history && currentRoom.history.length > 0 && (
<div className="wt-history-section">
<button className="wt-history-toggle" onClick={() => setShowHistory(!showHistory)}>
{showHistory ? '\u25BC' : '\u25B6'} Verlauf ({currentRoom.history.length})
</button>
{showHistory && (
<div className="wt-history-list">
{[...currentRoom.history].reverse().map((item, i) => (
<div key={i} className="wt-history-item">
<div className="wt-history-item-title">{item.title || item.url}</div>
<div className="wt-history-item-by">{item.addedBy}</div>
</div>
))}
</div>
)}
</div>
)}
<div className="wt-queue-add">
<input
className="wt-input wt-queue-input"