video controls

static/img/play.svg

@@ -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>

static/img/stop.svg

@@ -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>

static/main.css

@@ -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);
 }

static/main.js

@@ -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);
     }
 }

views/player.ejs

@@ -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') -%>

views/videos.ejs

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