Feature: Watch Together - History, Titel-Fetch, Next-Button

Server:
- Video-History Tracking (max 50 Einträge pro Raum)
- History wird bei Skip und Play-Video gespeichert
- Server-seitiger Titel-Fetch via noembed.com als Fallback

Client:
- Aufklappbare History-Sektion im Queue-Panel
- "Weiter" Button mit Text-Label statt nur Icon
- YouTube-Thumbnails in der Warteschlange
- History in RoomState integriert

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

server/src/plugins/watch-together/index.ts

@@ -12,6 +12,13 @@ interface QueueItem {
   addedBy: string;
 }
 
+interface HistoryItem {
+  url: string;
+  title: string;
+  addedBy: string;
+  playedAt: string; // ISO timestamp
+}
+
 interface RoomMember {
   id: string;
   name: string;
@@ -29,6 +36,7 @@ interface Room {
   currentTime: number;
   lastSyncAt: number;
   queue: QueueItem[];
+  history: HistoryItem[];
 }
 
 interface WtClient {
@@ -78,6 +86,7 @@ function getPlaybackState(room: Room): Record<string, any> {
     playing: room.playing,
     currentTime,
     updatedAt: Date.now(),
+    history: room.history,
   };
 }
 
@@ -92,6 +101,7 @@ function serializeRoom(room: Room): Record<string, any> {
     playing: room.playing,
     currentTime: room.currentTime + (room.playing ? (Date.now() - room.lastSyncAt) / 1000 : 0),
     queue: room.queue,
+    history: room.history,
   };
 }
 
@@ -176,7 +186,7 @@ function handleDisconnect(client: WtClient): void {
 
 // ── WebSocket Message Handler ──
 
-function handleMessage(client: WtClient, msg: any): void {
+async function handleMessage(client: WtClient, msg: any): Promise<void> {
   switch (msg.type) {
     case 'create_room': {
       if (client.roomId) {
@@ -203,6 +213,7 @@ function handleMessage(client: WtClient, msg: any): void {
         currentTime: 0,
         lastSyncAt: Date.now(),
         queue: [],
+        history: [],
       };
 
       rooms.set(roomId, room);
@@ -260,7 +271,17 @@ function handleMessage(client: WtClient, msg: any): void {
         sendTo(client, { type: 'error', code: 'INVALID_URL', message: 'URL darf nicht leer sein.' });
         return;
       }
-      const title = String(msg.title || url).slice(0, 128);
+      let title = String(msg.title || '').trim();
+      if (!title || title === url) {
+        try {
+          const resp = await fetch(`https://noembed.com/embed?url=${encodeURIComponent(url)}`);
+          if (resp.ok) {
+            const data = await resp.json() as Record<string, any>;
+            if (data.title) title = String(data.title).slice(0, 128);
+          }
+        } catch {}
+      }
+      if (!title) title = url;
 
       room.queue.push({ url, title, addedBy: client.name });
       sendToRoom(room.id, { type: 'queue_updated', queue: room.queue });
@@ -325,6 +346,17 @@ function handleMessage(client: WtClient, msg: any): void {
         return;
       }
 
+      // Track current video in history before replacing
+      if (room.currentVideo) {
+        room.history.push({
+          url: room.currentVideo.url,
+          title: room.currentVideo.title,
+          addedBy: '',
+          playedAt: new Date().toISOString(),
+        });
+        if (room.history.length > 50) room.history = room.history.slice(-50);
+      }
+
       const index = msg.index != null ? Number(msg.index) : undefined;
       if (index !== undefined) {
         if (index < 0 || index >= room.queue.length) {
@@ -405,6 +437,17 @@ function handleMessage(client: WtClient, msg: any): void {
         sendTo(client, { type: 'error', code: 'NOT_HOST', message: 'Nur der Host kann die Wiedergabe steuern.' });
         return;
       }
+      // Track current video in history before skipping
+      if (room.currentVideo) {
+        room.history.push({
+          url: room.currentVideo.url,
+          title: room.currentVideo.title,
+          addedBy: '',
+          playedAt: new Date().toISOString(),
+        });
+        // Keep history max 50 items
+        if (room.history.length > 50) room.history = room.history.slice(-50);
+      }
       if (room.queue.length > 0) {
         const item = room.queue.shift()!;
         room.currentVideo = { url: item.url, title: item.title };

web/src/plugins/watch-together/WatchTogetherTab.tsx

@@ -21,6 +21,7 @@ interface RoomState {
   playing: boolean;
   currentTime: number;
   queue: Array<{ url: string; title: string; addedBy: string }>;
+  history: Array<{ url: string; title: string; addedBy: string; playedAt: string }>;
 }
 
 interface JoinModal {
@@ -76,6 +77,7 @@ 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);
@@ -297,6 +299,7 @@ export default function WatchTogetherTab({ data }: { data: any }) {
           playing: r.playing || false,
           currentTime: r.currentTime || 0,
           queue: r.queue || [],
+          history: r.history || [],
         });
         break;
       }
@@ -312,6 +315,7 @@ 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);
@@ -366,6 +370,7 @@ 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;
       }
@@ -659,8 +664,8 @@ export default function WatchTogetherTab({ data }: { data: any }) {
                   <button className="wt-ctrl-btn" onClick={togglePlay} disabled={!currentRoom.currentVideo} title={currentRoom.playing ? 'Pause' : 'Abspielen'}>
                     {currentRoom.playing ? '\u23F8' : '\u25B6'}
                   </button>
-                  <button className="wt-ctrl-btn" onClick={skip} disabled={!currentRoom.currentVideo} title="Weiter">
+                  <button className="wt-ctrl-btn wt-next-btn" onClick={skip} disabled={!currentRoom.currentVideo && currentRoom.queue.length === 0} title="Nächstes Video">
-                    {'\u23ED'}
+                    {'\u23ED'} Weiter
                   </button>
                   <input
                     className="wt-seek"
@@ -711,8 +716,17 @@ export default function WatchTogetherTab({ data }: { data: any }) {
                     title={isHost ? 'Klicken zum Abspielen' : undefined}
                   >
                     <div className="wt-queue-item-info">
-                      <div className="wt-queue-item-title">{item.title || item.url}</div>
+                      {item.url.match(/youtu/) && (
-                      <div className="wt-queue-item-by">{item.addedBy}</div>
+                        <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={() => removeFromQueue(i)} title="Entfernen">
@@ -723,6 +737,23 @@ export default function WatchTogetherTab({ data }: { data: any }) {
                 ))
               )}
             </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"

web/src/plugins/watch-together/watch-together.css

@@ -779,3 +779,92 @@
     display: none;
   }
 }
+
+/* ── History Section ── */
+.wt-history-section {
+  border-top: 1px solid var(--bg-tertiary);
+  margin-top: 8px;
+  padding-top: 8px;
+}
+
+.wt-history-toggle {
+  width: 100%;
+  background: none;
+  border: none;
+  color: var(--text-muted);
+  font-size: 13px;
+  cursor: pointer;
+  padding: 6px 8px;
+  text-align: left;
+  border-radius: var(--radius);
+  transition: background var(--transition), color var(--transition);
+}
+.wt-history-toggle:hover {
+  background: var(--bg-tertiary);
+  color: var(--text-normal);
+}
+
+.wt-history-list {
+  max-height: 200px;
+  overflow-y: auto;
+  margin-top: 4px;
+}
+
+.wt-history-item {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 8px 10px;
+  border-radius: var(--radius);
+  opacity: 0.6;
+  transition: opacity var(--transition), background var(--transition);
+}
+.wt-history-item:hover {
+  opacity: 1;
+  background: var(--bg-tertiary);
+}
+
+.wt-history-item-title {
+  font-size: 13px;
+  color: var(--text-muted);
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.wt-history-item-by {
+  font-size: 11px;
+  color: var(--text-faint);
+}
+
+/* ── Queue Thumbnail ── */
+.wt-queue-item-info {
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 0;
+  flex: 1;
+}
+
+.wt-queue-thumb {
+  width: 48px;
+  height: 36px;
+  object-fit: cover;
+  border-radius: 4px;
+  flex-shrink: 0;
+}
+
+.wt-queue-item-text {
+  min-width: 0;
+  flex: 1;
+}
+
+/* ── Next Button ── */
+.wt-next-btn {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  font-size: 13px;
+  padding: 6px 12px;
+  white-space: nowrap;
+}