archive/bigly-chat
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

video controls

Browse source
This commit is contained in:
biglyderv 2024-09-20 08:38:33 -04:00
parent f7abf43af0
commit f68303263f
No known key found for this signature in database
GPG key ID: 33AC87E9ACE66954
6 changed files with 149 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

48
static/img/play.svg Normal file
View file

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="222.31953"
height="222.31953"
viewBox="0 0 222.31953 222.31953"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="play.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#000000"
bordercolor="#ffffff"
borderopacity="0.24705882"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="1.4142136"
inkscape:cx="105.00535"
inkscape:cy="77.781744"
inkscape:window-width="1860"
inkscape:window-height="1004"
inkscape:window-x="30"
inkscape:window-y="46"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showgrid="false" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-17.543759,-18.097959)">
<path
id="path5"
style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
d="M 128.70353,18.097959 A 22.586276,22.586276 0 0 0 106.11724,40.684235 V 106.67145 H 40.130023 A 22.586276,22.586276 0 0 0 17.543759,129.25773 22.586276,22.586276 0 0 0 40.130023,151.844 h 65.987217 v 65.98721 a 22.586276,22.586276 0 0 0 22.58629,22.58629 22.586276,22.586276 0 0 0 22.58626,-22.58629 V 151.844 h 65.98722 A 22.586276,22.586276 0 0 0 239.8633,129.25773 22.586276,22.586276 0 0 0 217.27701,106.67145 H 151.28979 V 40.684235 A 22.586276,22.586276 0 0 0 128.70353,18.097959 Z" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

48
static/img/stop.svg Normal file
View file

@ -0,0 +1,48 @@
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg
width="170.4344"
height="170.4344"
viewBox="0 0 170.4344 170.4344"
version="1.1"
id="svg1"
inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
sodipodi:docname="stop.svg"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns="http://www.w3.org/2000/svg"
xmlns:svg="http://www.w3.org/2000/svg">
<sodipodi:namedview
id="namedview1"
pagecolor="#000000"
bordercolor="#ffffff"
borderopacity="0.24705882"
inkscape:showpageshadow="2"
inkscape:pageopacity="0.0"
inkscape:pagecheckerboard="0"
inkscape:deskcolor="#d1d1d1"
inkscape:document-units="mm"
inkscape:zoom="1.4142136"
inkscape:cx="52.679454"
inkscape:cy="25.455843"
inkscape:window-width="1860"
inkscape:window-height="1004"
inkscape:window-x="30"
inkscape:window-y="46"
inkscape:window-maximized="1"
inkscape:current-layer="layer1"
showgrid="false" />
<defs
id="defs1" />
<g
inkscape:label="Layer 1"
inkscape:groupmode="layer"
id="layer1"
transform="translate(-43.486324,-44.040524)">
<path
id="path5"
style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
d="m 207.30536,50.655902 a 22.586276,22.586276 0 0 0 -31.94183,-10e-6 L 128.70352,97.3159 82.043514,50.655891 a 22.586276,22.586276 0 0 0 -31.941812,1.1e-5 22.586276,22.586276 0 0 0 -5e-6,31.941805 l 46.660009,46.660013 -46.660004,46.66 a 22.586276,22.586276 0 0 0 0,31.94184 22.586276,22.586276 0 0 0 31.941817,-2e-5 l 46.660001,-46.66001 46.66001,46.66001 a 22.586276,22.586276 0 0 0 31.94183,2e-5 22.586276,22.586276 0 0 0 -1e-5,-31.94183 l -46.66001,-46.66001 46.66001,-46.660011 a 22.586276,22.586276 0 0 0 1e-5,-31.941807 z" />
</g>
</svg>
Side by side

After

Width:  |  Height:  |  Size: 2 KiB

38
static/main.css
View file

@ -36,7 +36,8 @@ textarea,
.button,
.area,
form,
.video {
.video,
.controls {
border: solid var(--dark-2) 3px;
border-radius: 5px;
@ -45,6 +46,11 @@ form,
margin-bottom: 0.5rem;
}
video {
border: solid var(--dark-2) 3px;
border-radius: 5px;
}
form span {
font-weight: bold;
}
@ -77,7 +83,7 @@ form {
font-style: italic;
}
#main-content {
.main-content {
width: 720px;
}
@ -115,7 +121,8 @@ form {
}
video {
width: 690px;
width: 900px;
max-width: 90vw;
}
.video img {
@ -135,6 +142,12 @@ video {
justify-content: space-around;
}
.controls {
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
.videos a {
color: var(--dark-1);
}
@ -143,7 +156,7 @@ textarea {
display: block;
}
#progressbar {
.progressbar {
background-color: var(--light-1);
border: solid var(--dark-2) 2px;
border-radius: 13px;
@ -151,12 +164,25 @@ textarea {
margin: 0;
position: relative;
top: -40px;
width: 680px;
width: 893px;
max-width: 89vw;
}
#progressbar>div {
.progressbar>div {
background-color: var(--light-2);
width: 40%;
height: 20px;
border-radius: 10px;
}
.controls {
margin-top: -30px;
}
.controls img {
width: 45px;
}
img.dark {
filter: invert(1);
}

12
static/main.js
View file

@ -22,7 +22,7 @@ async function formClick(ev) {
function moveBar(e, bar, vid) {
let rect = bar.getBoundingClientRect();
let prog = ((e.pageX - rect.x) / rect.width);
vid.currentTime = prog * vid.duration;
}
@ -31,10 +31,14 @@ function prog(vid, bar) {
}
function controls(vid) {
let bar = vid.querySelector('#progressbar');
let bar = vid.querySelector('.progressbar');
let video = vid.querySelector('video');
let play = vid.querySelector('.play');
video.onclick = play.onclick = () => {
play.querySelector('img').src = !video.paused ? '/static/img/play.svg' : '/static/img/stop.svg';
video.onclick = () => {
if (video.paused) {
video.play();
return;
@ -49,7 +53,7 @@ function controls(vid) {
window.onload = function () {
document.addEventListener('submit', formClick);
for (let vid of document.querySelectorAll('#video')) {
for (let vid of document.querySelectorAll('.video-wrapper')) {
controls(vid);
}
}

8
views/player.ejs
View file

@ -1,11 +1,14 @@
<%- include('header.ejs') -%>
<div class='area'>
<h1>Video</h1>
<div id='video'>
<div class='video-wrapper'>
<video src='/videos/<%= videoData.id %>.webm'></video>
<div id="progressbar">
<div class="progressbar">
<div></div>
</div>
<div class='controls'>
<div class='play'><img src='/static/img/play.svg' class='dark'></div>
</div>
</div>
<div><b>
<%= videoData.title %>
@ -15,6 +18,5 @@
<%= videoData.username %>
</a></div>
<pre><%= videoData.desc %></pre>
<!-- todo: custom video player-->
</div>
<%- include('footer.ejs') -%>

15
views/videos.ejs
View file

@ -2,13 +2,14 @@
<div class='video'>
<a href='/client/video?id=<%= videoData.id %>'>
<img src='/videos/<%= videoData.id %>.png'>
<div><b>
<%= videoData.title %>
</b>
</div>
<div>by <a href="/client/user?id=<%= videoData.username %>">
<%= videoData.username %>
</a></div>
</a>
<div><b>
<%= videoData.title %>
</b>
</div>
<div>by <a href="/client/user?id=<%= videoData.username %>">
<%= videoData.username %>
</a></div>
</a>
</div>
<% } %>