diff --git a/public/style.css b/public/style.css index b7c0b8a..c322518 100644 --- a/public/style.css +++ b/public/style.css @@ -179,55 +179,18 @@ video.active { overflow: hidden; } -.video-wrapper { +.viewer-container video { width: 100%; height: 100%; + object-fit: contain; + border-radius: 0; + border: none; + margin: 0; display: none; } -.video-wrapper.active { +.viewer-container video.active { display: block; - animation: fadeIn 0.5s ease forwards; -} - -/* Custom Video.js Overrides for Premium Glass Look */ -.video-js { - width: 100% !important; - height: 100% !important; - background-color: transparent !important; -} - -.video-js .vjs-tech { - object-fit: contain; -} - -.vjs-theme-city .vjs-control-bar { - background: rgba(15, 23, 42, 0.85) !important; - backdrop-filter: blur(8px) !important; - border-top: 1px solid rgba(255, 255, 255, 0.1) !important; - height: 50px !important; - padding: 0 10px !important; -} - -.vjs-theme-city .vjs-play-progress, -.vjs-theme-city .vjs-volume-level { - background: var(--accent-color) !important; -} - -.vjs-theme-city .vjs-big-play-button { - background: rgba(15, 23, 42, 0.85) !important; - backdrop-filter: blur(8px) !important; - border: 1px solid rgba(255, 255, 255, 0.1) !important; - border-radius: 50% !important; - width: 80px !important; - height: 80px !important; - line-height: 80px !important; - transition: all 0.3s ease !important; -} - -.vjs-theme-city .vjs-big-play-button:hover { - background: var(--accent-color) !important; - transform: scale(1.1) !important; } .overlay { diff --git a/public/viewer.html b/public/viewer.html index 3090a1f..341e335 100644 --- a/public/viewer.html +++ b/public/viewer.html @@ -6,7 +6,6 @@ Screenshare - Viewer -
@@ -17,23 +16,8 @@ Connecting to Broadcaster
-
- -
+ - diff --git a/public/viewer.js b/public/viewer.js index 5a7d0c0..79dd59f 100644 --- a/public/viewer.js +++ b/public/viewer.js @@ -1,19 +1,6 @@ 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 = { @@ -31,27 +18,9 @@ socket.on('offer', (id, description) => { peerConnection = new RTCPeerConnection(config); peerConnection.ontrack = event => { - // 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); - } + remoteVideo.srcObject = event.streams[0]; + remoteVideo.classList.add('active'); + overlay.classList.add('hidden'); }; peerConnection.onicecandidate = event => { @@ -85,10 +54,8 @@ socket.on('disconnectPeer', () => { peerConnection.close(); peerConnection = null; } - - videoWrapper.classList.remove('active'); - const videoElement = document.querySelector('#remoteVideo_html5_api'); - if (videoElement) videoElement.srcObject = null; + remoteVideo.classList.remove('active'); + remoteVideo.srcObject = null; overlay.classList.remove('hidden'); overlay.querySelector('h1').innerText = 'Stream Ended';