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 @@
+
+
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
+
+
+