nastylování přehrávače

3 years ago · db9c865b86
parent 4a53f21281
commit db9c865b86
12 changed files with 169 additions and 112 deletions
--- a/css/style.css
+++ b/css/style.css
@ -16,7 +16,7 @@ body {

  display: grid;
  grid-template-columns: 25vw auto;
-  grid-template-rows: auto auto;
+  grid-template-rows: 60vh auto;
  grid-template-areas:
    "comments video"
    "comments text";
@ -33,15 +33,12 @@ aside {
 main {
  background-color: #282828;
  grid-area: video;
-
-  display: grid;
-  justify-items: center;
-  align-items: center;
+  position: relative;
 }

 video {
-    max-width: 100%;
-    max-height: 75vh;
+  width: 100%;
+  height: 100%;
 }

 article {
@ -116,3 +113,80 @@ article p:last-child {
 .commentText {
  grid-area: comment;
 }
+
+.video-controls {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  display: grid;
+  grid-template-rows: auto min-content;
+  justify-items: center;
+  align-items: center;
+}
+
+.hidden {
+  display: none !important;
+}
+
+#togglePlay {
+  height: 15vh;
+}
+
+.video-progress {
+  width: 80%;
+  margin-bottom: 30px;
+  position: relative;
+}
+
+progress {
+  position: absolute;
+  width: 100%;
+  height: 5px;
+  border: none;
+  background-color: #616161;
+}
+
+progress::-moz-progress-bar {
+  background-color: #616161;
+}
+
+.seek {
+  position: absolute;
+  appearance: none;
+  background: transparent;
+  width: 100%;
+  height: 5px;
+  margin: 0;
+  cursor: pointer;
+  z-index: 5;
+}
+
+.seek:focus {
+  outline: none;
+}
+
+.seek::-moz-range-thumb {
+  background-color: #ffa800;
+  width: 23px;
+  height: 23px;
+  border-radius: 23px;
+  border: none;
+}
+
+.videoComment {
+  position: absolute;
+  background-color: #ffa800;
+  width: 10%;
+  left: 45%;
+  height: 5px;
+  z-index: 1;
+}
+
+.videoComment img {
+  position: relative;
+  top: -30px;
+  left: 50%;
+  margin-left: -12px;
+  cursor: pointer;
+}
--- a/img/closed-captioning-active.svg
+++ b/img/closed-captioning-active.svg
@ -1,61 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 36 32.400002"
-   width="36"
-   height="32.400002"
-   version="1.1"
-   id="svg6"
-   sodipodi:docname="closed-captioning-active.svg"
-   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
-  <metadata
-     id="metadata12">
-    <rdf:RDF>
-      <cc:Work
-         rdf:about="">
-        <dc:format>image/svg+xml</dc:format>
-        <dc:type
-           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
-      </cc:Work>
-    </rdf:RDF>
-  </metadata>
-  <defs
-     id="defs10" />
-  <sodipodi:namedview
-     pagecolor="#ffffff"
-     bordercolor="#666666"
-     borderopacity="1"
-     objecttolerance="10"
-     gridtolerance="10"
-     guidetolerance="10"
-     inkscape:pageopacity="0"
-     inkscape:pageshadow="2"
-     inkscape:window-width="746"
-     inkscape:window-height="1005"
-     id="namedview8"
-     showgrid="false"
-     fit-margin-top="0"
-     fit-margin-left="0"
-     fit-margin-right="0"
-     fit-margin-bottom="0"
-     inkscape:zoom="4.6927083"
-     inkscape:cx="-19.78161"
-     inkscape:cy="26.506288"
-     inkscape:window-x="1920"
-     inkscape:window-y="0"
-     inkscape:window-maximized="0"
-     inkscape:current-layer="svg6"
-     inkscape:document-rotation="0" />
-  <path
-     d="M 34.2,0 C 35.1936,0 36,0.8064 36,1.8 v 28.8 c 0,0.9936 -0.8064,1.8 -1.8,1.8 H 1.8 C 0.8064,32.4 0,31.5936 0,30.6 V 1.8 C 0,0.8064 0.8064,0 1.8,0 Z M 12.6,9 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.98,0 3.78,-0.81 5.0904,-2.1096 L 15.1452,18.7452 C 14.4954,19.3968 13.5954,19.8 12.6,19.8 10.611,19.8 9,18.189 9,16.2 c 0,-1.989 1.611,-3.6 3.6,-3.6 0.99,0 1.8864,0.396 2.547,1.0566 l 2.5452,-2.5452 C 16.389,9.8064 14.589,9 12.6,9 Z m 12.6,0 c -3.9744,0 -7.2,3.2256 -7.2,7.2 0,3.9744 3.2256,7.2 7.2,7.2 1.9872,0 3.7872,-0.8064 5.0904,-2.1096 L 27.7452,18.7452 C 27.0936,19.3968 26.1936,19.8 25.2,19.8 c -1.989,0 -3.6,-1.611 -3.6,-3.6 0,-1.989 1.611,-3.6 3.6,-3.6 0.9954,0 1.8954,0.4032 2.547,1.0566 l 2.5452,-2.5452 C 28.989,9.8064 27.189,9 25.2,9 Z"
-     id="path4"
-     style="fill:#ffa800;fill-opacity:1;stroke-width:1.8"
-     sodipodi:nodetypes="ssssssssssssccsssccssssccsssccs" />
-</svg>
--- a/img/play-active.svg
+++ b/img/play-active.svg
@ -7,12 +7,12 @@
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 33.929565 40"
-   width="33.929565"
-   height="40"
+   viewBox="0 0 24 24"
+   width="24"
+   height="24"
   version="1.1"
   id="svg6"
-   sodipodi:docname="play-active.svg"
+   sodipodi:docname="note.svg"
   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
  <metadata
     id="metadata12">
@ -22,7 +22,6 @@
        <dc:format>image/svg+xml</dc:format>
        <dc:type
           rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title />
      </cc:Work>
    </rdf:RDF>
  </metadata>
@ -37,24 +36,19 @@
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
-     inkscape:window-width="746"
-     inkscape:window-height="1005"
+     inkscape:window-width="1280"
+     inkscape:window-height="1007"
     id="namedview8"
     showgrid="false"
-     fit-margin-top="7"
-     fit-margin-left="7"
-     fit-margin-right="7"
-     fit-margin-bottom="7"
-     inkscape:zoom="9.3854166"
-     inkscape:cx="1.9933429"
-     inkscape:cy="32.174597"
+     inkscape:zoom="13.272984"
+     inkscape:cx="14.545168"
+     inkscape:cy="10.646764"
     inkscape:window-x="1920"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
-     inkscape:current-layer="svg6"
-     inkscape:document-rotation="0" />
+     inkscape:current-layer="svg6" />
  <path
-     d="M 26.547059,20.714801 8.3350972,32.856109 A 0.85913585,0.85913585 0 0 1 7,32.141308 V 7.8586921 A 0.85913585,0.85913585 0 0 1 8.3350972,7.1438911 L 26.547059,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
+     d="M21 15l-6 5.996L4.002 21A.998.998 0 0 1 3 20.007V3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.456.993 1.002V15zM19 5H5v14h8v-5a1 1 0 0 1 .883-.993L14 13l5-.001V5zm-.829 9.999L15 15v3.169l3.171-3.17z"
     id="path4"
-     style="fill:#ffa800;fill-opacity:1;stroke-width:1.71827" />
+     style="fill:#ffa800;fill-opacity:1" />
 </svg>
--- a/img/play.svg
+++ b/img/play.svg
@ -7,12 +7,12 @@
   xmlns="http://www.w3.org/2000/svg"
   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   viewBox="0 0 33.929565 40"
-   width="33.929565"
+   viewBox="0 0 40 40"
+   width="40"
   height="40"
   version="1.1"
   id="svg6"
-   sodipodi:docname="play-fill.svg"
+   sodipodi:docname="play.svg"
   inkscape:version="1.0.1 (3bc2e813f5, 2020-09-07, custom)">
  <metadata
     id="metadata12">
@ -37,8 +37,8 @@
     guidetolerance="10"
     inkscape:pageopacity="0"
     inkscape:pageshadow="2"
-     inkscape:window-width="1280"
-     inkscape:window-height="1007"
+     inkscape:window-width="1920"
+     inkscape:window-height="1063"
     id="namedview8"
     showgrid="false"
     fit-margin-top="7"
@ -46,15 +46,20 @@
     fit-margin-right="7"
     fit-margin-bottom="7"
     inkscape:zoom="9.3854166"
-     inkscape:cx="19.520535"
+     inkscape:cx="-1.2031055"
     inkscape:cy="32.174597"
-     inkscape:window-x="1920"
+     inkscape:window-x="0"
     inkscape:window-y="0"
     inkscape:window-maximized="0"
     inkscape:current-layer="svg6"
-     inkscape:document-rotation="0" />
+     inkscape:document-rotation="0"
+     inkscape:snap-bbox="true"
+     inkscape:bbox-paths="true"
+     inkscape:bbox-nodes="true"
+     inkscape:snap-bbox-edge-midpoints="true"
+     inkscape:snap-bbox-midpoints="true" />
  <path
-     d="M 26.547059,20.714801 8.3350972,32.856109 A 0.85913585,0.85913585 0 0 1 7,32.141308 V 7.8586921 A 0.85913585,0.85913585 0 0 1 8.3350972,7.1438911 L 26.547059,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
+     d="M 29.582275,20.714801 11.370313,32.856109 A 0.85913585,0.85913585 0 0 1 10.035216,32.141308 V 7.8586919 a 0.85913585,0.85913585 0 0 1 1.335097,-0.714801 L 29.582275,19.285199 a 0.85913585,0.85913585 0 0 1 0,1.429602 z"
     id="path4"
     style="fill:#c1c1c1;fill-opacity:1;stroke-width:1.71827" />
 </svg>
--- a/img/sticky-note-line.svg
+++ b/img/sticky-note-line.svg
@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 15l-6 5.996L4.002 21A.998.998 0 0 1 3 20.007V3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.456.993 1.002V15zM19 5H5v14h8v-5a1 1 0 0 1 .883-.993L14 13l5-.001V5zm-.829 9.999L15 15v3.169l3.171-3.17z"/></svg>
--- a/index.php
+++ b/index.php
@ -8,8 +8,9 @@

    <link rel="stylesheet" href="css/style.css">
    <script src="./js/controller.js"></script>
+    <script src="./js/model.js"></script>
+    <script src="./js/view.js"></script>

-    <script src="./js/main.js"></script>
 </head>

 <body>
@ -36,15 +37,17 @@
        </div>
    </aside>
    <main>
-        <video controls preload="auto">
-            <source src="video.mp4" type="video/mp4">
+        <video controls id="video" preload="auto">
+            <source src="video.webm">
            </souce>
        </video>
        <div class="video-controls hidden" id="video-controls">
+            <object data="./img/play.svg" type="image/svg+xml" id="togglePlay"></object>
+
            <div class="video-progress">
-                <progress id="progress-bar" value="0" min="0"></progress>
-                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
-                <div class="seek-tooltip" id="seek-tooltip">00:00</div>
+                <progress id="progress-bar" value="50" min="0" max="100"></progress>
+                <input class="seek" id="seek" value="50" min="0" max="100" type="range" step="1">
+                <div class="videoComment"><img src="./img/note.svg" alt=""><div>
            </div>
        </div>
    </main>
@ -60,13 +63,6 @@

    </article>
 </body>
-<script>
-    var mySVG = document.getElementsByClassName("activeIcon")[0];
-    var svgDoc;
-    mySVG.addEventListener("load", function() {
-        svgDoc = mySVG.contentDocument;
-        svgDoc.getElementById("path4").style.fill = "#ffa800";
-    }, false);
-</script>
+<script src="./js/main.js"></script>

 </html>
--- a/js/controller.js
+++ b/js/controller.js
@ -4,6 +4,6 @@ class Controller {
  }

  init() {
-    console.log("here");
+    
  }
 }
--- a/js/main.js
+++ b/js/main.js
@ -1 +1 @@
-const app = new Controller();
+const app = new Controller(new Model(), new View());
--- a/js/model.js
+++ b/js/model.js
@ -0,0 +1,3 @@
+class Model {
+  constructor() {}
+}
--- a/js/view.js
+++ b/js/view.js
@ -0,0 +1,47 @@
+class View {
+  constructor() {
+    this.init();
+  }
+
+  init() {
+    this.colorTogglePlaySVG();
+    this.enableCustomControls();
+
+
+    /* Obarvení aktivního komentáře - dát do special metody */
+    var mySVG = document.getElementsByClassName("activeIcon")[0];
+    var svgDoc;
+    mySVG.addEventListener(
+      "load",
+      function () {
+        svgDoc = mySVG.contentDocument;
+        svgDoc.getElementById("path4").style.fill = "#ffa800";
+      },
+      false
+    );
+  }
+
+  enableCustomControls() {
+    const video = document.getElementById("video");
+    const videoControls = document.getElementById("video-controls");
+
+    const videoWorks = !!document.createElement("video").canPlayType;
+    if (videoWorks) {
+      video.controls = false;
+      videoControls.classList.remove("hidden");
+    }
+  }
+
+  colorTogglePlaySVG() {
+    var playSVG = document.getElementById("togglePlay");
+    var svgDoc;
+    playSVG.addEventListener(
+      "load",
+      function () {
+        svgDoc = playSVG.contentDocument;
+        svgDoc.getElementById("path4").style.fill = "#ffa800";
+      },
+      false
+    );
+  }
+}
--- a/video.mp4
+++ b/video.mp4
--- a/video.webm
+++ b/video.webm
				`@ -1 +0,0 @@`
				`<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M21 15l-6 5.996L4.002 21A.998.998 0 0 1 3 20.007V3.993C3 3.445 3.445 3 3.993 3h16.014c.548 0 .993.456.993 1.002V15zM19 5H5v14h8v-5a1 1 0 0 1 .883-.993L14 13l5-.001V5zm-.829 9.999L15 15v3.169l3.171-3.17z"/></svg>`