video controls

2024-11-25 14:12:43 -05:00 · 2024-11-25 14:12:43 -05:00 · 3109c791f1
commit 3109c791f1
parent b9a4c8c18c
6 changed files with 149 additions and 20 deletions
--- a/static/img/play.svg
+++ b/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>
--- a/static/img/stop.svg
+++ b/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>
--- a/static/main.css
+++ b/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);
+}
--- a/static/main.js
+++ b/static/main.js
@ -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);
    }
 }
--- a/views/player.ejs
+++ b/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') -%>
--- a/views/videos.ejs
+++ b/views/videos.ejs
@ -2,6 +2,7 @@
    <div class='video'>
        <a href='/client/video?id=<%= videoData.id %>'>
            <img src='/videos/<%= videoData.id %>.png'>
+        </a>
        <div><b>
                <%= videoData.title %>
            </b>