feat(sync): implement end-to-end media title synchronization

extension/content.js

@@ -236,6 +236,8 @@
         const current = video.currentTime;
         if (!Number.isFinite(current)) return;
 
+        const mediaTitle = (navigator.mediaSession && navigator.mediaSession.metadata) ? navigator.mediaSession.metadata.title : null;
+
         const eventState = action === EVENTS.PLAY ? 'playing' : (action === EVENTS.PAUSE ? 'paused' : (action === EVENTS.SEEK ? 'seek' : null));
         
         if (eventState && lastTargetState === eventState) {
@@ -249,6 +251,7 @@
             payload: {
                 currentTime: current,
                 targetTime: current,
+                mediaTitle: mediaTitle,
                 timestamp: Date.now()
             }
         });
@@ -307,11 +310,13 @@
     const heartbeatInterval = setInterval(() => {
         const video = findVideo();
         if (video) {
+            const mediaTitle = (navigator.mediaSession && navigator.mediaSession.metadata) ? navigator.mediaSession.metadata.title : null;
             chrome.runtime.sendMessage({
                 type: 'HEARTBEAT',
                 payload: {
                     playbackState: video.paused ? 'paused' : 'playing',
-                    currentTime: video.currentTime
+                    currentTime: video.currentTime,
+                    mediaTitle: mediaTitle
                 }
             }).catch(err => {
                 if (err.message.includes('Extension context invalidated')) {

extension/popup.js

@@ -241,10 +241,17 @@ function updatePeerList(peers) {
 
             peerItem.appendChild(header);
 
+            if (p.mediaTitle) {
+                const mediaDiv = document.createElement('div');
+                mediaDiv.style.cssText = 'font-size:11px; color:var(--star); font-weight: 600; margin-top: 2px;';
+                mediaDiv.textContent = `🎬 ${p.mediaTitle}`;
+                peerItem.appendChild(mediaDiv);
+            }
+
             if (pTabTitle) {
                 const titleDiv = document.createElement('div');
-                titleDiv.style.cssText = 'font-size:10px; color:var(--text-muted);';
-                titleDiv.textContent = pTabTitle;
+                titleDiv.style.cssText = 'font-size:10px; color:var(--text-muted); opacity: 0.8;';
+                titleDiv.textContent = p.mediaTitle ? `via ${pTabTitle}` : pTabTitle;
                 peerItem.appendChild(titleDiv);
             }