UI updates

static/img/full.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128.51335"
+   height="128.51335"
+   viewBox="0 0 128.51335 128.51335"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="full.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="2.8284272"
+     inkscape:cx="95.459413"
+     inkscape:cy="85.206365"
+     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(-100.04388,-5.4976611)">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect1"
+       width="31.118704"
+       height="128.51335"
+       x="108.74121"
+       y="5.4976611"
+       ry="24.793957" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect2"
+       width="31.118704"
+       height="128.51335"
+       x="188.74121"
+       y="5.4976611"
+       ry="24.793957" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect3"
+       width="31.118704"
+       height="128.51335"
+       x="14.194984"
+       y="-228.55724"
+       ry="24.793957"
+       transform="rotate(90)" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect4"
+       width="31.118704"
+       height="128.51335"
+       x="94.194984"
+       y="-228.55724"
+       ry="24.793957"
+       transform="rotate(90)" />
+  </g>
+</svg>

static/img/play.svg

@@ -2,9 +2,9 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="222.31953"
+   width="64.496506"
-   height="222.31953"
+   height="82.610687"
-   viewBox="0 0 222.31953 222.31953"
+   viewBox="0 0 64.496505 82.610686"
    version="1.1"
    id="svg1"
    inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
@@ -23,9 +23,9 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="mm"
-     inkscape:zoom="1.4142136"
+     inkscape:zoom="2.8284272"
-     inkscape:cx="105.00535"
+     inkscape:cx="101.11627"
-     inkscape:cy="77.781744"
+     inkscape:cy="112.07642"
      inkscape:window-width="1860"
      inkscape:window-height="1004"
      inkscape:window-x="30"
@@ -39,10 +39,11 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-17.543759,-18.097959)">
+     transform="translate(-108.95572,-104.59504)">
     <path
-       id="path5"
+       id="rect1"
-       style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
+       style="fill:#ffffff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
-       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" />
+       d="m 124.51507,104.97721 c 11.49035,3.35469 40.09694,16.30449 47.97259,34.31989 1.98795,4.54738 0.67496,10.50752 -1.86441,14.77158 -9.67692,16.24936 -39.51007,32.3491 -46.10818,33.06351 -8.56979,0.92789 -15.55935,-7.06913 -15.55935,-15.85008 v -50.45482 c 0,-8.78094 7.28491,-18.26586 15.55935,-15.85008 z"
+       sodipodi:nodetypes="saassss" />
   </g>
 </svg>

static/img/stop.svg

@@ -2,9 +2,9 @@
 <!-- Created with Inkscape (http://www.inkscape.org/) -->
 
 <svg
-   width="170.4344"
+   width="71.118706"
-   height="170.4344"
+   height="82.154984"
-   viewBox="0 0 170.4344 170.4344"
+   viewBox="0 0 71.118705 82.154982"
    version="1.1"
    id="svg1"
    inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
@@ -23,9 +23,9 @@
      inkscape:pagecheckerboard="0"
      inkscape:deskcolor="#d1d1d1"
      inkscape:document-units="mm"
-     inkscape:zoom="1.4142136"
+     inkscape:zoom="2.8284272"
-     inkscape:cx="52.679454"
+     inkscape:cx="66.644812"
-     inkscape:cy="25.455843"
+     inkscape:cy="38.890872"
      inkscape:window-width="1860"
      inkscape:window-height="1004"
      inkscape:window-x="30"
@@ -39,10 +39,22 @@
      inkscape:label="Layer 1"
      inkscape:groupmode="layer"
      id="layer1"
-     transform="translate(-43.486324,-44.040524)">
+     transform="translate(-128.74121,-51.85603)">
-    <path
+    <rect
-       id="path5"
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
-       style="color:#000000;fill:#ffffff;stroke-width:2.31473;stroke-linecap:round;stroke-linejoin:round;-inkscape-stroke:none;paint-order:stroke fill markers"
+       id="rect1"
-       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" />
+       width="31.118704"
+       height="82.154984"
+       x="128.74121"
+       y="51.85603"
+       ry="15.850081" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect2"
+       width="31.118704"
+       height="82.154984"
+       x="168.74121"
+       y="51.85603"
+       ry="15.850081" />
   </g>
 </svg>

static/img/tiny.svg

@@ -0,0 +1,78 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="128.51335"
+   height="128.51335"
+   viewBox="0 0 128.51335 128.51335"
+   version="1.1"
+   id="svg1"
+   inkscape:version="1.3.2 (091e20ef0f, 2023-11-25, custom)"
+   sodipodi:docname="tiny.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="2.8284272"
+     inkscape:cx="95.63619"
+     inkscape:cy="85.206365"
+     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(-100.04388,-5.4976611)">
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect1"
+       width="31.118704"
+       height="128.51335"
+       x="128.74121"
+       y="5.4976611"
+       ry="24.793957" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect2"
+       width="31.118704"
+       height="128.51335"
+       x="168.74121"
+       y="5.4976616"
+       ry="24.793957" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect3"
+       width="31.118704"
+       height="128.51335"
+       x="34.194984"
+       y="-228.55724"
+       ry="24.793957"
+       transform="rotate(90)" />
+    <rect
+       style="fill:#ffffff;fill-opacity:1;stroke:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round"
+       id="rect4"
+       width="31.118704"
+       height="128.51335"
+       x="74.194984"
+       y="-228.55724"
+       ry="24.793957"
+       transform="rotate(90)" />
+  </g>
+</svg>

static/main.css

@@ -8,7 +8,6 @@ body {
     align-items: center;
 
     overflow-y: auto;
-
 }
 
 :root {
@@ -41,6 +40,7 @@ form,
 .comment {
     border: solid var(--dark-2) 3px;
     border-radius: 5px;
+    background: var(--light-1);
 
     font-size: 1rem;
     padding: 0.5rem;
@@ -50,6 +50,21 @@ form,
 video {
     border: solid var(--dark-2) 3px;
     border-radius: 5px;
+    width: 900px;
+    max-width: 90vmin;
+}
+
+.full video {
+    width: 100vw;
+    height: 80vh;
+    max-width: none;
+    border: none;
+}
+
+.full .progressbar  {
+    width: 95vw;
+    max-width: 95vw;
+    margin: auto;
 }
 
 form span {
@@ -124,20 +139,15 @@ form {
     height: 2em;
 }
 
-video {
-    width: 900px;
-    max-width: 90vmin;
-}
-
 .video img {
-    width: 190px;
+    width: 180px;
-    height: 150px;
+    height: 130px;
-    margin-left: 5px;
 }
 
 .video {
-    width: 200px;
+    width: 180px;
     height: 200px;
+    overflow-y: auto;
 }
 
 .videos {
@@ -151,6 +161,7 @@ video {
     display: flex;
     flex-direction: row;
     flex-wrap: wrap;
+    align-items: center;
 }
 
 .videos a {
@@ -186,6 +197,16 @@ textarea {
 
 .controls img {
     width: 45px;
+    margin: 5px;
+}
+
+.video-wrapper.full {
+    background: rgba(0,0,0,0.5);
+    width: 100vw;
+    height: 100vh;
+    position: absolute;
+    top: 0;
+    left: 0;
 }
 
 img.dark {

static/main.js

@@ -37,12 +37,12 @@ function prog(vid, bar) {
 }
 
 function controls(vid) {
+    let isFull = false;
     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';
 
         if (video.paused) {
@@ -52,6 +52,16 @@ function controls(vid) {
         video.pause();
     }
 
+    vid.querySelector('.full').onclick = (e) => {
+        isFull = !isFull;
+        e.target.src = isFull ? '/static/img/tiny.svg' : '/static/img/full.svg';
+        if (isFull) {
+            vid.classList.add('full')
+        } else {
+            vid.classList.remove('full')
+        }
+    }
+
     bar.onclick = (e) => moveBar(e, bar, video);
 
     video.addEventListener('timeupdate', () => prog(video,bar));

views/player.ejs

@@ -8,16 +8,21 @@
             </div>
             <div class='controls'>
                 <div class='play'><img src='/static/img/play.svg' class='dark'></div>
+                <div class='full'><img src='/static/img/full.svg' class='dark'></div>
             </div>
         </div>
         <div><b>
                 <%= videoData.title %>
             </b>
         </div>
-        <div>by <a href="/client/user?id=<%= videoData.username %>">
+        <div>Created by <b><a href="/client/user?id=<%= videoData.username %>">
-                <%= videoData.username %>
+                    @<%= videoData.username %></a></b>
-            </a></div>
+            </a> on
+            <b>
+                <%= (new Date(videoData.date)+'').split(/(GMT|UTC)/g)[0] %>
+            </b>
+        </div>
         <pre><%= videoData.desc %></pre>
     </div>
     <%- include('comments.ejs') -%>
-    <%- include('footer.ejs') -%>
+        <%- include('footer.ejs') -%>