Skip to content

Commit

Permalink
Ui Improvements
Browse files Browse the repository at this point in the history
  • Loading branch information
@elvistony
elvistony committed Oct 10, 2024
1 parent b1c67ad commit 869313f
Show file tree
Hide file tree
Showing 6 changed files with 310 additions and 88 deletions.
84 changes: 54 additions & 30 deletions admin/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,38 +3,62 @@
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Admin Controls</title>
<title>BingeBuddies | Admin Controls</title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>
<div>
<input type="text" id="VideoURL" placeholder="URL" id="">
<input type="text" id="VideoTitle" placeholder="Title" id="">
<button id="fire-video-change">Play Stream</button>
<div class="container">
<div class="row">
<div class="col-md-6">  
<h3>Theatre Controls</h3>
<div class="mb-3">
<label for="VideoURL" class="form-label">URL</label>
<input type="text" class="form-control" id="VideoURL" placeholder="URL">
</div>
<div class="mb-3">
<label for="VideoTitle" class="form-label">Title</label>
<input type="text" class="form-control" id="VideoTitle" placeholder="Title">
</div>
<div class="mb-3">
<label for="VideoDesc" class="form-label">Description</label>
<textarea class="form-control" id="VideoDesc" rows="3" placeholder="Description"></textarea>
</div>
<div class="mb-3">
<button id="fire-video-change" class="btn btn-primary">Play Stream</button>
<button id="fire-video-next" class="btn btn-secondary">Add to List</button>
</div>
<div class="mb-3">
<h4>Subtitles</h4>
<textarea class="form-control" name="" id="subs" rows="5">VTT</textarea>
<button id="subtitlePush" class="btn btn-primary mt-2">Apply Subtitles</button>
</div>

</div>
<div class="col-md-6">
<div class="row mt-4 mb-3">
<h3>Theatre Playback</h3>
<video controls muted src="" id="videoplayer" class="w-100"></video>
</div>
<div class="row mb-3">
<h3>Viewers (<span id="membersCount"></span>)</h3>
<ul id="watchers" class="list-group">
</ul>
</div>
<div class="mb-3">
<h3>Debug</h3>
<button id="sync-now" class="btn btn-primary">Sync Playback</button>
<button id="binge-package" class="btn btn-secondary">Resend BingePack</button>
</div>
</div>
</div>
<div class="row mt-3">


</div>
</div>
<div>
<h6>SYNC</h6>
<button id="sync-playback">Sync Playback</button>
<button id="binge-package">Resend BingePack</button>
</div>
<div>
<h4>Viewers</h4>
<ul id="watchers">

</ul>
</div>
<div>
<h4>Subtitles</h4>
<textarea name="" id="subs">
VTT
</textarea>
<button id="subtitlePush">Apply Subtitles</button>
</div>
<div>
<h6>Playback Controls</h6>
<video controls muted src="" id="videoplayer"></video>
</div>

<script src="../assets/js/script.js"></script>

<!-- <script src="../assets/js/script.js"></script> -->
<script src="../bundle.js"></script>
</body>
<script>document.getElementById('videoplayer').volume=0.01;</script>
</body>
</html>
49 changes: 43 additions & 6 deletions assets/css/flix.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ body {
position: absolute;
bottom: 0;
width: 100%;
height: 50%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: flex-end;
Expand Down Expand Up @@ -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 {
Expand All @@ -84,7 +94,7 @@ body {
}

/* Rewind and Forward buttons */
.rewind, .forward {
.pos-abs {
position: absolute;
top: 20px;
font-size: 24px;
Expand All @@ -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;
Expand Down Expand Up @@ -134,6 +168,7 @@ body {
.control-button-mini{
width: 50px !important;
height: 50px !important;
cursor: pointer;
}

.start-container {
Expand All @@ -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;
}
8 changes: 5 additions & 3 deletions assets/js/flixplayer.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
Loading

0 comments on commit 869313f

Please sign in to comment.