diff --git a/static/img/full.svg b/static/img/full.svg new file mode 100644 index 0000000..201bdf0 --- /dev/null +++ b/static/img/full.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + diff --git a/static/img/play.svg b/static/img/play.svg index 4cafd8c..80e66a3 100644 --- a/static/img/play.svg +++ b/static/img/play.svg @@ -2,9 +2,9 @@ + transform="translate(-108.95572,-104.59504)"> + id="rect1" + style="fill:#ffffff;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round" + 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" /> diff --git a/static/img/stop.svg b/static/img/stop.svg index 6289728..af8e4cc 100644 --- a/static/img/stop.svg +++ b/static/img/stop.svg @@ -2,9 +2,9 @@ - + transform="translate(-128.74121,-51.85603)"> + + diff --git a/static/img/tiny.svg b/static/img/tiny.svg new file mode 100644 index 0000000..ef466da --- /dev/null +++ b/static/img/tiny.svg @@ -0,0 +1,78 @@ + + + + + + + + + + + + + diff --git a/static/main.css b/static/main.css index 618a1ec..9e9d5f4 100644 --- a/static/main.css +++ b/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; - height: 150px; - margin-left: 5px; + width: 180px; + height: 130px; } .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 { diff --git a/static/main.js b/static/main.js index 65c7cda..ca61fa2 100644 --- a/static/main.js +++ b/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)); diff --git a/views/player.ejs b/views/player.ejs index 0d337ab..51cfbda 100644 --- a/views/player.ejs +++ b/views/player.ejs @@ -8,16 +8,21 @@
+
<%= videoData.title %>
-
by - <%= videoData.username %> -
+
Created by + @<%= videoData.username %> + on + + <%= (new Date(videoData.date)+'').split(/(GMT|UTC)/g)[0] %> + + 
<%= videoData.desc %>
<%- include('comments.ejs') -%> - <%- include('footer.ejs') -%> \ No newline at end of file + <%- include('footer.ejs') -%> \ No newline at end of file