pročištění kodu

pull/9/head
David Zálešák 4 years ago
parent 0ade9c4503
commit 9d8acd5e03

@ -136,7 +136,7 @@ article p:last-child {
#video-progress { #video-progress {
width: 80%; width: 80%;
margin-bottom: max(30px,3vh); margin-bottom: max(30px, 3vh);
position: relative; position: relative;
} }
@ -185,12 +185,13 @@ progress::-moz-progress-bar {
height: 0.5vh; height: 0.5vh;
min-height: 5px; min-height: 5px;
z-index: 6; z-index: 6;
cursor: pointer;
} }
.videoComment:hover { .videoComment:hover {
height: 0.9vh; height: 0.9vh;
min-height: 9px; min-height: 9px;
margin-top: min(-2px ,-0.2vh); margin-top: min(-2px, -0.2vh);
} }
.videoComment:hover img { .videoComment:hover img {
@ -199,10 +200,10 @@ progress::-moz-progress-bar {
.videoComment img { .videoComment img {
position: relative; position: relative;
top: min(-35px,-1.5vh); top: min(-35px, -1.5vh);
left: 50%; left: 50%;
min-width: 28px; min-width: 28px;
width: 1vh; width: 1vh;
margin-left: min(-14px,-0.5vh); margin-left: min(-14px, -0.5vh);
cursor: pointer; cursor: pointer;
} }

@ -3,32 +3,75 @@ class Controller {
this.model = model; this.model = model;
this.view = view; this.view = view;
this.init();
}
init() {
// Get video code // Get video code
const queryString = window.location.search; const queryString = window.location.search;
const urlParams = new URLSearchParams(queryString); const urlParams = new URLSearchParams(queryString);
this.videoToLoad = urlParams.get("v"); let videoToLoad = urlParams.get("v");
let video = document.getElementById("video");
this.loadVideo(videoToLoad).then(
function () {
video.addEventListener(
"loadedmetadata",
function () {
this.view.videoPlayer.updateVideoDuration();
this.addEventListenersToVideoControls();
this.init(videoToLoad);
}.bind(this)
);
}.bind(this)
);
}
init(videoToLoad) {
this.loadXml(videoToLoad).then(
function (v) {
this.view.drawCommentsText(v);
this.view.drawCommentsToVideo(v);
}.bind(this)
);
}
// Přidání listenerů
addEventListenersToVideoControls() {
const video = document.getElementById("video");
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.view.videoPlayer.togglePlay();
}.bind(this)
);
this.loadVideo(this.videoToLoad); video.addEventListener(
this.loadXml(this.videoToLoad); "timeupdate",
this.view.drawCommentsText(this.model.comments); function () {
this.view.videoPlayer.updateProgress();
}.bind(this)
);
video.addEventListener(
"ended",
function () {
this.view.videoPlayer.showButton();
}.bind(this)
);
this.view.videoPlayer.getVideoDuration().then(function(v) { const seek = document.getElementById("seek");
this.view.drawCommentsToVideo(this.model.comments, v); seek.addEventListener("input", this.view.videoPlayer.skipAhead);
}.bind(this))
} }
loadVideo(v) { async loadVideo(v) {
let video = document.getElementById("video"); let video = document.getElementById("video");
video.children[0].src = "./videos/" + v + ".webm"; video.children[0].src = "./videos/" + v + ".webm";
video.load(); await video.load();
} }
loadXml(v) { async loadXml(v) {
var Connect = new XMLHttpRequest(); var Connect = new XMLHttpRequest();
// Define which file to open and // Define which file to open and
// send the request. // send the request.
@ -40,6 +83,6 @@ class Controller {
// Place the root node in an element. // Place the root node in an element.
// var Customers = TheDocument.childNodes[0]; // var Customers = TheDocument.childNodes[0];
this.model.parseXML(TheDocument); return this.model.parseXML(TheDocument);
} }
} }

@ -5,7 +5,7 @@ class Model {
let parser = new DOMParser(); let parser = new DOMParser();
let xmlDoc = parser.parseFromString(xml, "text/xml"); let xmlDoc = parser.parseFromString(xml, "text/xml");
this.comments = []; let comments = [];
let comment = xmlDoc.getElementsByTagName("comment"); let comment = xmlDoc.getElementsByTagName("comment");
for (let i = 0; i < comment.length; i++) { for (let i = 0; i < comment.length; i++) {
@ -14,7 +14,9 @@ class Model {
let text = comment[i].getElementsByTagName("text")[0].innerHTML; let text = comment[i].getElementsByTagName("text")[0].innerHTML;
let fulltext = comment[i].getElementsByTagName("fulltext")[0].innerHTML; let fulltext = comment[i].getElementsByTagName("fulltext")[0].innerHTML;
this.comments.push(new Comment(start, end, text, fulltext)); comments.push(new Comment(start, end, text, fulltext));
} }
return comments;
} }
} }

@ -2,18 +2,10 @@ class VideoPlayer {
constructor() { constructor() {
this.video = document.getElementById("video"); this.video = document.getElementById("video");
this.video.addEventListener(
"loadedmetadata",
function () {
this.init();
}.bind(this)
);
}
// Init
init() {
this.enableCustomControls(); this.enableCustomControls();
this.addEventListeners(); }
updateVideoDuration() {
this.videoDuration = Math.round(this.video.duration); this.videoDuration = Math.round(this.video.duration);
const seek = document.getElementById("seek"); const seek = document.getElementById("seek");
@ -22,36 +14,7 @@ class VideoPlayer {
const progressBar = document.getElementById("progress-bar"); const progressBar = document.getElementById("progress-bar");
progressBar.setAttribute("max", this.videoDuration); 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() { enableCustomControls() {
const video = document.getElementById("video"); const video = document.getElementById("video");
const videoControls = document.getElementById("video-controls"); const videoControls = document.getElementById("video-controls");
@ -109,7 +72,7 @@ class VideoPlayer {
playButton.style.display = "none"; playButton.style.display = "none";
} }
} }
async getVideoDuration() { getVideoDuration() {
return Math.round(await this.video.duration); return Math.round(this.video.duration);
} }
} }

@ -27,6 +27,7 @@ class View {
for (let i = 0; i < comments.length; i++) { for (let i = 0; i < comments.length; i++) {
let comment = document.createElement("div"); let comment = document.createElement("div");
comment.setAttribute("class", "comment"); comment.setAttribute("class", "comment");
comment.setAttribute("id", "c" + i);
let object = document.createElement("object"); let object = document.createElement("object");
object.setAttribute("class", "icon"); object.setAttribute("class", "icon");
@ -37,7 +38,14 @@ class View {
let time = document.createElement("div"); let time = document.createElement("div");
time.setAttribute("class", "time"); time.setAttribute("class", "time");
time.innerHTML = comments[i].start;
var minutes = Math.floor(comments[i].start / 60);
var seconds = comments[i].start % 60;
time.innerHTML =
minutes.toString().padStart(2, "0") +
":" +
seconds.toString().padStart(2, "0");;
comment.appendChild(time); comment.appendChild(time);
@ -51,16 +59,17 @@ class View {
} }
} }
drawCommentsToVideo(comments, lenght) { drawCommentsToVideo(comments) {
let videoProgress = document.getElementById("video-progress"); let videoProgress = document.getElementById("video-progress");
for (let i = 0; i < comments.length; i++) { for (let i = 0; i < comments.length; i++) {
let videoComment = document.createElement("div"); let videoComment = document.createElement("div");
videoComment.setAttribute("class", "videoComment"); videoComment.setAttribute("class", "videoComment");
let percentLeft = (comments[i].start / lenght) * 100; let percentLeft = (comments[i].start / this.videoPlayer.videoDuration) * 100;
videoComment.style.left = percentLeft + "%"; videoComment.style.left = percentLeft + "%";
let percentWidth = ((comments[i].end - comments[i].start) / lenght) * 100; let percentWidth = ((comments[i].end - comments[i].start) / this.videoPlayer.videoDuration) * 100;
videoComment.style.width = percentWidth + "%"; videoComment.style.width = percentWidth + "%";
videoComment.setAttribute("id", "v" + i);
let img = document.createElement("img"); let img = document.createElement("img");
img.setAttribute("src", "./img/note.svg"); img.setAttribute("src", "./img/note.svg");