feat: Integrate video.js for enhanced video playback and apply custom premium glass styling.

public/viewer.js

@@ -1,6 +1,19 @@
 const socket = io();
-const remoteVideo = document.getElementById('remoteVideo');
 const overlay = document.getElementById('overlay');
+const videoWrapper = document.getElementById('videoWrapper');
+
+// Initialize video.js player
+const player = videojs('remoteVideo', {
+    controls: true,
+    autoplay: true,
+    preload: 'auto',
+    fluid: true,
+    controlBar: {
+        volumePanel: { inline: false },
+        fullscreenToggle: true,
+        pictureInPictureToggle: true
+    }
+});
 
 let peerConnection;
 const config = {
@@ -18,9 +31,27 @@ socket.on('offer', (id, description) => {
     peerConnection = new RTCPeerConnection(config);
     
     peerConnection.ontrack = event => {
-        remoteVideo.srcObject = event.streams[0];
-        remoteVideo.classList.add('active');
-        overlay.classList.add('hidden');
+        // Need to set srcObject on the raw video element inside video.js
+        const videoElement = document.querySelector('#remoteVideo_html5_api');
+        if (videoElement) {
+            videoElement.srcObject = event.streams[0];
+            
+            // Notify video.js of the media change
+            player.trigger('loadstart');
+            player.trigger('loadedmetadata');
+            player.trigger('loadeddata');
+            player.trigger('canplay');
+            player.trigger('playing');
+
+            videoWrapper.classList.add('active');
+            overlay.classList.add('hidden');
+            
+            // Force play after stream is attached
+            setTimeout(() => {
+                player.muted(true); // Ensure autoplay policies don't block visuals
+                player.play().catch(e => console.error("Autoplay prevented:", e));
+            }, 100);
+        }
     };
 
     peerConnection.onicecandidate = event => {
@@ -54,8 +85,11 @@ socket.on('disconnectPeer', () => {
         peerConnection.close();
         peerConnection = null;
     }
-    remoteVideo.classList.remove('active');
-    remoteVideo.srcObject = null;
+    
+    videoWrapper.classList.remove('active');
+    const videoElement = document.querySelector('#remoteVideo_html5_api');
+    if (videoElement) videoElement.srcObject = null;
+    
     overlay.classList.remove('hidden');
     overlay.querySelector('h1').innerText = 'Stream Ended';
     overlay.querySelector('.status-indicator span:last-child').innerText = 'Waiting for new stream...';