From 0e5089afd6b24383175a1d87d22a9c3cd934d736 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= Date: Tue, 26 Jan 2021 00:51:01 +0100 Subject: [PATCH] =?UTF-8?q?zprovozn=C4=9Bn=C3=AD=20p=C5=99ehr=C3=A1va?= =?UTF-8?q?=C4=8De?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 40 ++++++++---- img/pause.svg | 58 +++++++++++++++++ img/play.svg | 14 ++-- index.php | 18 +++-- js/controller.js | 25 ++++++- js/video.js | 112 ++++++++++++++++++++++++++++++++ js/view.js | 20 ++---- video.webm => videos/video.webm | Bin videos/video.xml | 0 9 files changed, 244 insertions(+), 43 deletions(-) create mode 100644 img/pause.svg create mode 100644 js/video.js rename video.webm => videos/video.webm (100%) create mode 100644 videos/video.xml diff --git a/css/style.css b/css/style.css index 7855e6c..381cd60 100644 --- a/css/style.css +++ b/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; } diff --git a/img/pause.svg b/img/pause.svg new file mode 100644 index 0000000..475f2a2 --- /dev/null +++ b/img/pause.svg @@ -0,0 +1,58 @@ + + + + + + image/svg+xml + + + + + + + + + diff --git a/img/play.svg b/img/play.svg index f70eee8..c206f96 100644 --- a/img/play.svg +++ b/img/play.svg @@ -22,7 +22,7 @@ image/svg+xml - + @@ -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 @@ + style="fill:#ffa800;fill-opacity:1;stroke-width:1.71827" /> diff --git a/index.php b/index.php index 5433b28..a66544a 100644 --- a/index.php +++ b/index.php @@ -10,6 +10,7 @@ + @@ -38,18 +39,21 @@

Nadpis velký

diff --git a/js/controller.js b/js/controller.js index 18fb182..698634a 100644 --- a/js/controller.js +++ b/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"); } -} \ No newline at end of file +} diff --git a/js/video.js b/js/video.js new file mode 100644 index 0000000..2d44c96 --- /dev/null +++ b/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"; + } + } +} diff --git a/js/view.js b/js/view.js index fb1b551..ba07588 100644 --- a/js/view.js +++ b/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 ); - } + } */ } diff --git a/video.webm b/videos/video.webm similarity index 100% rename from video.webm rename to videos/video.webm diff --git a/videos/video.xml b/videos/video.xml new file mode 100644 index 0000000..e69de29