zprovoznění přehrávače

css/style.css

@@ -123,26 +123,28 @@ article p:last-child {
   grid-template-rows: auto min-content;
   justify-items: center;
   align-items: center;
+  z-index: 5;
 }
 
 .hidden {
   display: none !important;
 }
 
-#togglePlay {
+#togglePlayIcon {
   height: 15vh;
 }
 
 .video-progress {
   width: 80%;
-  margin-bottom: 30px;
+  margin-bottom: max(30px,3vh);
   position: relative;
 }
 
 progress {
   position: absolute;
   width: 100%;
-  height: 5px;
+  height: 0.5vh;
+  min-height: 5px;
   border: none;
   background-color: #616161;
 }
@@ -156,7 +158,8 @@ progress::-moz-progress-bar {
   appearance: none;
   background: transparent;
   width: 100%;
-  height: 5px;
+  height: 0.5vh;
+  min-height: 5px;
   margin: 0;
   cursor: pointer;
   z-index: 5;
@@ -168,9 +171,9 @@ progress::-moz-progress-bar {
 
 .seek::-moz-range-thumb {
   background-color: #ffa800;
-  width: 23px;
-  height: 23px;
-  border-radius: 23px;
+  width: 2vh;
+  height: 2vh;
+  border-radius: 2vh;
   border: none;
 }
 
@@ -178,15 +181,28 @@ progress::-moz-progress-bar {
   position: absolute;
   background-color: #ffa800;
   width: 10%;
-  left: 45%;
-  height: 5px;
-  z-index: 1;
+  left: 35%;
+  height: 0.5vh;
+  min-height: 5px;
+  z-index: 6;
+}
+
+.videoComment:hover {
+  height: 0.9vh;
+  min-height: 9px;
+  margin-top: min(-2px ,-0.2vh);
+}
+
+.videoComment:hover img {
+  top: min(-33px, -1.3vh);
 }
 
 .videoComment img {
   position: relative;
-  top: -30px;
+  top: min(-35px,-1.5vh);
   left: 50%;
-  margin-left: -12px;
+  min-width: 28px;
+  width: 1vh;
+  margin-left: min(-14px,-0.5vh);
   cursor: pointer;
 }

img/pause.svg

@@ -0,0 +1,58 @@
+<?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"
+   height="327pt"
+   viewBox="-45 0 327 327"
+   width="327pt"
+   version="1.1"
+   id="svg6"
+   sodipodi:docname="pause.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" />
+      </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="1920"
+     inkscape:window-height="1063"
+     id="namedview8"
+     showgrid="false"
+     inkscape:zoom="1.4612459"
+     inkscape:cx="91.895083"
+     inkscape:cy="254.17955"
+     inkscape:window-x="0"
+     inkscape:window-y="0"
+     inkscape:window-maximized="0"
+     inkscape:current-layer="svg6" />
+  <path
+     d="m158 0h71c4.417969 0 8 3.582031 8 8v311c0 4.417969-3.582031 8-8 8h-71c-4.417969 0-8-3.582031-8-8v-311c0-4.417969 3.582031-8 8-8zm0 0"
+     id="path2"
+     style="fill:#ffa800;fill-opacity:1" />
+  <path
+     d="m8 0h71c4.417969 0 8 3.582031 8 8v311c0 4.417969-3.582031 8-8 8h-71c-4.417969 0-8-3.582031-8-8v-311c0-4.417969 3.582031-8 8-8zm0 0"
+     id="path4"
+     style="fill:#ffa800;fill-opacity:1" />
+</svg>

img/play.svg

@@ -22,7 +22,7 @@
         <dc:format>image/svg+xml</dc:format>
         <dc:type
            rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
-        <dc:title></dc:title>
+        <dc:title />
       </cc:Work>
     </rdf:RDF>
   </metadata>
@@ -37,8 +37,8 @@
      guidetolerance="10"
      inkscape:pageopacity="0"
      inkscape:pageshadow="2"
-     inkscape:window-width="1920"
-     inkscape:window-height="1063"
+     inkscape:window-width="1280"
+     inkscape:window-height="1007"
      id="namedview8"
      showgrid="false"
      fit-margin-top="7"
@@ -46,9 +46,9 @@
      fit-margin-right="7"
      fit-margin-bottom="7"
      inkscape:zoom="9.3854166"
-     inkscape:cx="-1.2031055"
-     inkscape:cy="32.174597"
-     inkscape:window-x="0"
+     inkscape:cx="25.46994"
+     inkscape:cy="32.230141"
+     inkscape:window-x="1920"
      inkscape:window-y="0"
      inkscape:window-maximized="0"
      inkscape:current-layer="svg6"
@@ -61,5 +61,5 @@
   <path
      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" />
+     style="fill:#ffa800;fill-opacity:1;stroke-width:1.71827" />
 </svg>

index.php

@@ -10,6 +10,7 @@
     <script src="./js/controller.js"></script>
     <script src="./js/model.js"></script>
     <script src="./js/view.js"></script>
+    <script src="./js/video.js"></script>
 
 </head>
 
@@ -38,18 +39,21 @@
     </aside>
     <main>
         <video controls id="video" preload="auto">
-            <source src="video.webm">
+            <source src="./videos/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 id="togglePlay">
+                <img src="./img/play.svg" alt="" id="togglePlayIcon">
+            </div>
 
             <div class="video-progress">
-                <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>
+                <progress id="progress-bar" value="0" min="0"></progress>
+                <input class="seek" id="seek" value="0" min="0" type="range" step="1">
+                <div class="videoComment"><img src="./img/note.svg" alt="">
+                    <div>
+                    </div>
+                </div>
     </main>
     <article>
         <h1>Nadpis velký</h1>

js/controller.js

@@ -1,9 +1,28 @@
 class Controller {
-  constructor() {
+  constructor(model, view) {
+    this.model = model;
+    this.view = view;
+
     this.init();
   }
 
   init() {
+    // Get video code
+    const queryString = window.location.search;
+    const urlParams = new URLSearchParams(queryString);
+    this.videoToLoad = urlParams.get("v");
 
+    this.loadVideo(this.videoToLoad);
+  }
+
+  loadVideo(v) {
+    let video = document.getElementById("video");
+
+    console.log(video)
+
+    video.children[0].src = "./videos/" + v + ".webm";
+    video.load();
+
+    console.log("here");
   }
 }

js/video.js

@@ -0,0 +1,112 @@
+class VideoPlayer {
+  constructor() {
+    this.video = document.getElementById("video");
+
+    this.video.addEventListener(
+      "loadedmetadata",
+      function () {
+        this.init();
+      }.bind(this)
+    );
+  }
+  // Init
+  init() {
+    this.enableCustomControls();
+    this.addEventListeners();
+
+    this.videoDuration = Math.round(this.video.duration);
+
+    const seek = document.getElementById("seek");
+    seek.setAttribute("max", this.videoDuration);
+    seek.value = 0;
+    const progressBar = document.getElementById("progress-bar");
+    progressBar.setAttribute("max", this.videoDuration);
+  }
+  // Přidání listenerů
+  addEventListeners() {
+    const videoControls = document.getElementById("video-controls");
+    const togleButton = document.getElementById("togglePlayIcon");
+    videoControls.addEventListener(
+      "click",
+      function (e) {
+        if (e.target !== videoControls && e.target !== togleButton) {
+          return;
+        }
+        this.togglePlay();
+      }.bind(this)
+    );
+
+    this.video.addEventListener(
+      "timeupdate",
+      function () {
+        this.updateProgress();
+      }.bind(this)
+    );
+    this.video.addEventListener(
+      "ended",
+      function () {
+        this.showButton();
+      }.bind(this)
+    );
+
+    const seek = document.getElementById("seek");
+    seek.addEventListener("input", this.skipAhead);
+  }
+  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");
+    }
+  }
+  // Posouvání ve videu
+  skipAhead() {
+    const progressBar = document.getElementById("progress-bar");
+    video = document.getElementById("video");
+
+    let skipTo = this.value;
+
+    video.currentTime = skipTo;
+    progressBar.value = skipTo;
+  }
+  // Aktualizování progress baru
+  updateProgress() {
+    const seek = document.getElementById("seek");
+    const progressBar = document.getElementById("progress-bar");
+
+    seek.value = Math.floor(this.video.currentTime);
+    progressBar.value = Math.floor(this.video.currentTime);
+
+    if (this.video.currentTime == this.videoDuration) {
+      this.showButton();
+      console.log("here");
+    }
+  }
+  // Play pause
+  togglePlay() {
+    if (this.video.paused || this.video.ended) {
+      this.video.play();
+      this.showButton();
+    } else {
+      this.video.pause();
+      this.showButton();
+    }
+  }
+  // Zobrazenení a změna tlačítka k přehrávání
+  showButton() {
+    let playButton = document.getElementById("togglePlayIcon");
+
+    if (this.video.ended) {
+      playButton.setAttribute("src", "./img/play.svg");
+      playButton.style.removeProperty("display");
+    } else if (this.video.paused) {
+      playButton.setAttribute("src", "./img/pause.svg");
+      playButton.style.removeProperty("display");
+    } else {
+      playButton.style.display = "none";
+    }
+  }
+}

js/view.js

@@ -4,8 +4,9 @@ class View {
   }
 
   init() {
-    this.colorTogglePlaySVG();
-    this.enableCustomControls();
+    //this.colorTogglePlaySVG();
+
+    this.videoPlayer = new VideoPlayer();
 
 
     /* Obarvení aktivního komentáře - dát do special metody */
@@ -21,19 +22,10 @@ class View {
     );
   }
 
-  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");
+  /* colorTogglePlaySVG() {
+    var playSVG = document.getElementById("togglePlayIcon");
     var svgDoc;
     playSVG.addEventListener(
       "load",
@@ -43,5 +35,5 @@ class View {
       },
       false
     );
-  }
+  } */
 }