From 869313fdc2467dc0b9d9d84e4c0d653f55613e03 Mon Sep 17 00:00:00 2001 From: elvistony Date: Thu, 10 Oct 2024 18:50:22 +0100 Subject: [PATCH] Ui Improvements --- admin/index.html | 84 +++++++++++++------- assets/css/flix.css | 49 ++++++++++-- assets/js/flixplayer.js | 8 +- bundle.js | 172 +++++++++++++++++++++++++++++++++------- index.html | 62 +++++++++++---- play/index.html | 23 +++++- 6 files changed, 310 insertions(+), 88 deletions(-) diff --git a/admin/index.html b/admin/index.html index ebbead2..1488f14 100644 --- a/admin/index.html +++ b/admin/index.html @@ -3,38 +3,62 @@ - Admin Controls + BingeBuddies | Admin Controls + -
- - - +
+
+
  +

Theatre Controls

+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+

Subtitles

+ + +
+ +
+
+
+

Theatre Playback

+ +
+
+

Viewers ()

+
    +
+
+
+

Debug

+ + +
+
+
+
+ + +
-
-
SYNC
- - -
-
-

Viewers

-
    - -
-
-
-

Subtitles

- - -
-
-
Playback Controls
- -
- - + + - + + \ No newline at end of file diff --git a/assets/css/flix.css b/assets/css/flix.css index 59ad980..62de4af 100644 --- a/assets/css/flix.css +++ b/assets/css/flix.css @@ -26,7 +26,7 @@ body { position: absolute; bottom: 0; width: 100%; - height: 50%; + height: 100%; display: flex; flex-direction: column; justify-content: flex-end; @@ -55,16 +55,26 @@ body { .progress-bar-container { position: relative; + margin-top: 5px; width: 100%; height: 5px; background: rgba(255, 255, 255, 0.3); } +.middle-controls{ + width: 50%; + display: flex; +} + +.timestamps{ + padding: 0px 20px; +} + .progress-bar { - width: 30%; + width: 0%; height: 100%; - background: red; + background: white; } .volume-control, .settings-control { @@ -84,7 +94,7 @@ body { } /* Rewind and Forward buttons */ -.rewind, .forward { +.pos-abs { position: absolute; top: 20px; font-size: 24px; @@ -104,6 +114,30 @@ body { right: 20px; } +.video-title{ + left: 80px; + background:none; + text-shadow: 1px 1px black; +} + +.room-specs{ + right: 90px; + background:none; + text-shadow: 1px 1px black; + text-align: right; +} + +.buddy-count{ + padding: 1px 10px; + background: white; + color: black; + text-shadow: none; + border-radius: 20px; +} + +.room-code{ + font-variant-caps: petite-caps; +} /* Hide controls */ .hide-controls { opacity: 0; @@ -134,6 +168,7 @@ body { .control-button-mini{ width: 50px !important; height: 50px !important; + cursor: pointer; } .start-container { @@ -143,10 +178,12 @@ body { height: 100vh; } .start-button { - padding: 10px 20px; + padding: 20px 30px; font-size: 18px; + font-variant-caps: all-small-caps; opacity: 0.8; border-radius: 50px; border: none; - + cursor: pointer; + z-index: 100; } \ No newline at end of file diff --git a/assets/js/flixplayer.js b/assets/js/flixplayer.js index c03fd7a..78a2bf0 100644 --- a/assets/js/flixplayer.js +++ b/assets/js/flixplayer.js @@ -46,16 +46,18 @@ const video = document.getElementById('videoplayer'); playPauseIcon.focus(); } - function showControls() { + function showControls(duration=3000) { controlsOverlay.classList.remove('hide-controls'); rewindBtn.classList.remove('hide-controls'); forwardBtn.classList.remove('hide-controls'); clearTimeout(hideControlsTimeout); - hideControlsTimeout = setTimeout(hideControls, 3000); + hideControlsTimeout = setTimeout(hideControls,duration ); } + // controlsOverlay.addEventListener('mouseover',()=>{showControls()}) + // Show controls on mouse move - document.addEventListener('mousemove', showControls); + document.addEventListener('mousemove', ()=>{showControls()}); // Initially start the timer to auto-hide controls diff --git a/bundle.js b/bundle.js index 7fdadf8..64b9009 100644 --- a/bundle.js +++ b/bundle.js @@ -14,9 +14,8 @@ let seekCooldownTimeout; init (roomId) var bingePack = { - 'title':"Sprite Fright", - 'cover':"https://i.ytimg.com/vi/_cMxraX_5RE/maxresdefault.jpg", - 'video':"https://vod.cf.dmcdn.net/sec2(XJkW6WD8oA89Lm0fqApRru8eSYD7YIzFSJQCO6mCEgm4bQR6hjdYauil4lMB3U-ACxMdtZwS9Z2oJQ-3h0K_NOZvNtcN5uV_nbDVeFE34yB1Dw-yZxcVsU3U0ueDpeo-qyo1J3wMoFyB1gE9PfcuGMpUyk7-J_4I1n0kmw-54FhNDTJ2WbL_lILguOQO2yr5)/video/442/474/555474244_mp4_h264_aac_hq_3.mp4#cell=cf", + 'title':"BingeBuddies", + 'video':"#", // 'srt':"https://static2.dmcdn.net/static/video/442/474/555474244_subtitle_en-auto.srt", 'desc':"Now Binging", 'position':0, @@ -32,8 +31,9 @@ if(bingePack.srt){ track.src = bingePack.srt; // track.default = true; videoplayer.appendChild(track); - } + + var peer_template = { id:'', peer:false } function init (roomId) { @@ -68,11 +68,14 @@ function listen () { // Send BingePack ping(bingePack,'bingepack'); ping({position:videoplayer.currentTime},'seek'); + updatePeerCount() + }); p2pt.on('peerclose', (peer) => { delete Peers[peer.id] console.log(`Disconnected from ${peer.id}`); + updatePeerCount() // if(Object.keys(Peers).length==0){ } // LED goes RED }); @@ -87,6 +90,7 @@ function listen () { bingePack = data; bingePack.unset=false; videoplayer.setAttribute("src", bingePack.video); + videoplayer.load(); }else{console.log('Already received Welcome Bingepack');} } if(data.type == "forceBingePack"){ @@ -94,6 +98,7 @@ function listen () { bingePack.unset=false; bingePack = data; videoplayer.setAttribute("src", bingePack.video); + videoplayer.load(); } if(data.from == selfId){ return; } if(data.type == "play"){ @@ -117,12 +122,11 @@ function listen () { videoplayer.pause(); } } - if(data.type == "applysubs"){ - try { - - } catch (error) { - console.log('Unable to apply subs',error) - } + if(data.type == "videoError"){ + updatePeerStatus(peer.id,'notok',data.error) + } + if(data.type == "videoSuccess"){ + updatePeerStatus(peer.id,'ok') } if(data.type == "subs"){ @@ -139,6 +143,49 @@ function listen () { p2pt.start() } +function updatePeerCount(){ + document.getElementById('membersCount').innerText=Object.keys(Peers).length; + document.querySelector('#watchers').innerHTML='' + try { + Object.keys(Peers).forEach((peer)=>{ + var peerNode = document.createElement('li'); + var peerNodeStatus = document.createElement('span'); + var peerNodeName = document.createElement('span'); + peerNodeStatus.setAttribute('id',peer+'-status'); + peerNodeStatus.innerText='🟡'; //🔴🟢 + peerNodeName.innerText = peer; + peerNode.setAttribute('id',peer+'-element'); + peerNode.classList.add('list-group-item'); + peerNode.appendChild(peerNodeStatus); + peerNode.appendChild(peerNodeName); + document.querySelector('#watchers').appendChild(peerNode) + }) + + } catch (error) { + + } +} + +function updatePeerStatus(peer,status,error=""){ + console.log('Updating Peer Status') + try { + document.getElementById(peer+'-status').innerText = (status=='ok')?'🟢':'🔴'; + document.getElementById(peer+'-status').title = error; + } catch (error) { + + } +} + +setInterval(()=>{ + try{ + document.getElementById('videoDesc').innerText=bingePack.desc; + document.getElementById('videoTitle').innerText=bingePack.title; + if(videoplayer.error){ + ping({},'videoError') + } + }catch(e){} +},1000) + function startSeekCooldown(duration){ clearTimeout(seekCooldownTimeout); seekCooldown = true; @@ -157,26 +204,36 @@ function ping(data,type){ } videoplayer.addEventListener('pause', (event) => { - // console.log('Broadcasting Pause!'); - // position = videoplayer.currentTime; - // ping({'position':position},'pause'); ping({},'pause') }); videoplayer.addEventListener('play', (event) => { - // console.log('Broadcasting Play!'); - ping({},'play') + ping({},'play'); + try { + document.querySelector('.start-container').style.display='none'; + } catch (error) { + + } }); videoplayer.addEventListener('complete', (event) => { - // console.log('Broadcasting Finish!'); ping({},'complete') }); +videoplayer.addEventListener('error', (event) => { + ping({error:event.message},'videoError') +}); + +videoplayer.addEventListener('canplay', (event) => { + ping({},'videoSuccess') +}); + + videoplayer.addEventListener('seek', (event) => { videoplayer.pause(); }); + videoplayer.addEventListener('seeked', (event) => { if(!seekCooldown){ position = videoplayer.currentTime; @@ -265,8 +322,9 @@ function convertSrtCue(caption) { try { document.querySelector('.start-button').addEventListener('click',()=>{ videoplayer.muted=false; - // videoplayer.buffer(); + videoplayer.load(); document.querySelector('.start-container').style.display='none'; + ping({'ready':true},'ready'); }) @@ -275,6 +333,40 @@ try { position = videoplayer.currentTime; ping({position:position},'seek'); }) + + + // UI + + document.getElementById('RoomCode').innerText=roomId; + + // Get references to the elements + const progressBar = document.querySelector('.progress-bar'); + const startTimeElement = document.getElementById('startTime'); + const endTimeElement = document.getElementById('endTime'); + + // Update the progress bar and timestamps on videoplayer playback + videoplayer.addEventListener('timeupdate', () => { + + // Get the video duration in seconds + const videoplayerDuration = videoplayer.duration; + // Calculate the current progress + const progress = (videoplayer.currentTime / videoplayerDuration) * 100; + + // Update the progress bar + progressBar.style.width = `${progress}%`; + + // Update the start time + const currentTime = new Date(videoplayer.currentTime * 1000); + startTimeElement.textContent = currentTime.toISOString().substr(11, 8); + + // Update the end time (if needed) + if (videoplayerDuration > 0) { + const endTime = new Date(videoplayerDuration * 1000); + endTimeElement.textContent = endTime.toISOString().substr(11, 8); + } + }); + + } catch (error) { console.log("Play Error:",error) @@ -300,8 +392,40 @@ try { pack = { ...bingePack } pack['video'] = url; pack['title'] = title; + pack['desc'] = document.getElementById('VideoDesc').value; ping(pack,'forceBingePack') + bingePack = pack; + videoplayer.src = bingePack.video; + }) + + var adminBingePackResend = document.getElementById('binge-package'); + adminBingePackResend.addEventListener('click',()=>{ + videoplayer.setAttribute('src',bingePack.video); + adminBingePackResend.setAttribute('disabled',true); + ping({},'pause'); + videoplayer.pause() + ping(bingePack,'forceBingePack') + setTimeout(()=>{ + ping({position:position},'play'); + videoplayer.play(); + adminBingePackResend.removeAttribute('disabled'); + },3000); }) + + var adminSyncPlayback = document.getElementById('sync-now'); +adminSyncPlayback.addEventListener('click',()=>{ + adminSyncPlayback.setAttribute('disabled',true); + position = videoplayer.currentTime; + ping({},'pause'); + videoplayer.pause() + ping({position:position},'seek'); + setTimeout(()=>{ + ping({position:position},'play'); + videoplayer.play(); + adminSyncPlayback.removeAttribute('disabled'); + },3000); +}) + } catch (error) { console.log("Admin Error:",error) } @@ -312,19 +436,7 @@ try { -// var adminSyncPlayback = document.getElementById('sync-playback'); -// adminSyncPlayback.addEventListener('click',()=>{ -// adminSyncPlayback.setAttribute('disabled',true); -// position = videoplayer.currentTime; -// ping({},'pause'); -// videoplayer.pause() -// ping({position:position},'seek'); -// setTimeout(()=>{ -// ping({position:position},'play'); -// videoplayer.play(); -// adminSyncPlayback.setAttribute('disabled',false); -// },3000); -// }) + diff --git a/index.html b/index.html index 51b86e7..92ed112 100644 --- a/index.html +++ b/index.html @@ -1,3 +1,47 @@ + + + + + + + BingeBuddies Page +   + + + +
+
+
  + +

BingeBuddies

+ + + + +
+
+
+ + + + @@ -6,21 +50,7 @@ BingeBuddies - - - - Open Theatre - Open Admin Panel + - - \ No newline at end of file + diff --git a/play/index.html b/play/index.html index 73965ec..5ec3068 100644 --- a/play/index.html +++ b/play/index.html @@ -3,7 +3,7 @@ - Netflix Style Video Player + BingeBuddies | Elvis Tony @@ -13,16 +13,33 @@
- - +
+
+
Now Playing
+

BingeBuddies

+
+ + +
+

Buddies: 0

+

Code:

+ +
+
+
00:00:00
+
+
+
+
00:00:00
+