From 0ade9c4503998408a4cb7b6b96a953c452ffbaaf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?David=20Z=C3=A1le=C5=A1=C3=A1k?= Date: Tue, 26 Jan 2021 19:03:59 +0100 Subject: [PATCH] =?UTF-8?q?parsov=C3=A1n=C3=AD=20xml=20a=20v=C3=BDpis=20xm?= =?UTF-8?q?l?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- css/style.css | 2 +- index.php | 41 +++++++------------------------------- js/comments.js | 8 ++++++++ js/controller.js | 23 ++++++++++++++++++--- js/model.js | 17 ++++++++++++++++ js/video.js | 3 +++ js/view.js | 52 +++++++++++++++++++++++++++++++++++++++++++++--- videos/video.xml | 17 ++++++++++++++++ 8 files changed, 122 insertions(+), 41 deletions(-) create mode 100644 js/comments.js diff --git a/css/style.css b/css/style.css index 381cd60..aef7db2 100644 --- a/css/style.css +++ b/css/style.css @@ -134,7 +134,7 @@ article p:last-child { height: 15vh; } -.video-progress { +#video-progress { width: 80%; margin-bottom: max(30px,3vh); position: relative; diff --git a/index.php b/index.php index a66544a..b9e8084 100644 --- a/index.php +++ b/index.php @@ -11,31 +11,14 @@ + +
-

Nadpis velký

-

Lorem ipsum dolor sit amet consectetur adipisicing elit. Eum sunt, quo incidunt modi nostrum harum. Deserunt accusamus doloribus numquam ut? Sequi et provident modi eveniet enim repellat error mollitia explicabo!

- -

Nadpis menší

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.

- -

Nadpis nejmenší

-

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.

- +
diff --git a/js/comments.js b/js/comments.js new file mode 100644 index 0000000..d1f39cd --- /dev/null +++ b/js/comments.js @@ -0,0 +1,8 @@ +class Comment { + constructor(start, end, text, fulltext) { + this.start = start; + this.end = end; + this.text = text; + this.fulltext = fulltext; + } +} diff --git a/js/controller.js b/js/controller.js index 698634a..70771d0 100644 --- a/js/controller.js +++ b/js/controller.js @@ -13,16 +13,33 @@ class Controller { this.videoToLoad = urlParams.get("v"); this.loadVideo(this.videoToLoad); + this.loadXml(this.videoToLoad); + this.view.drawCommentsText(this.model.comments); + + this.view.videoPlayer.getVideoDuration().then(function(v) { + this.view.drawCommentsToVideo(this.model.comments, v); + }.bind(this)) } loadVideo(v) { let video = document.getElementById("video"); - console.log(video) - video.children[0].src = "./videos/" + v + ".webm"; video.load(); + } + + loadXml(v) { + var Connect = new XMLHttpRequest(); + // Define which file to open and + // send the request. + Connect.open("GET", "./videos/" + v + ".xml", false); + Connect.setRequestHeader("Content-Type", "text/xml"); + Connect.send(null); + // Place the response in an XML document. + var TheDocument = Connect.responseText; + // Place the root node in an element. + // var Customers = TheDocument.childNodes[0]; - console.log("here"); + this.model.parseXML(TheDocument); } } diff --git a/js/model.js b/js/model.js index 4d6f467..edf79a4 100644 --- a/js/model.js +++ b/js/model.js @@ -1,3 +1,20 @@ class Model { constructor() {} + + parseXML(xml) { + let parser = new DOMParser(); + let xmlDoc = parser.parseFromString(xml, "text/xml"); + + this.comments = []; + + let comment = xmlDoc.getElementsByTagName("comment"); + for (let i = 0; i < comment.length; i++) { + let start = comment[i].getElementsByTagName("start")[0].innerHTML; + let end = comment[i].getElementsByTagName("end")[0].innerHTML; + let text = comment[i].getElementsByTagName("text")[0].innerHTML; + let fulltext = comment[i].getElementsByTagName("fulltext")[0].innerHTML; + + this.comments.push(new Comment(start, end, text, fulltext)); + } + } } diff --git a/js/video.js b/js/video.js index 2d44c96..7bf3474 100644 --- a/js/video.js +++ b/js/video.js @@ -109,4 +109,7 @@ class VideoPlayer { playButton.style.display = "none"; } } + async getVideoDuration() { + return Math.round(await this.video.duration); + } } diff --git a/js/view.js b/js/view.js index ba07588..dcd5c64 100644 --- a/js/view.js +++ b/js/view.js @@ -8,9 +8,8 @@ class View { this.videoPlayer = new VideoPlayer(); - /* Obarvení aktivního komentáře - dát do special metody */ - var mySVG = document.getElementsByClassName("activeIcon")[0]; + /* var mySVG = document.getElementsByClassName("activeIcon")[0]; var svgDoc; mySVG.addEventListener( "load", @@ -19,10 +18,57 @@ class View { svgDoc.getElementById("path4").style.fill = "#ffa800"; }, false - ); + ); */ } + drawCommentsText(comments) { + let aside = document.getElementsByTagName("aside")[0]; + + for (let i = 0; i < comments.length; i++) { + let comment = document.createElement("div"); + comment.setAttribute("class", "comment"); + + let object = document.createElement("object"); + object.setAttribute("class", "icon"); + object.setAttribute("data", "./img/closed-captioning.svg"); + object.setAttribute("type", "image/svg+xml"); + + comment.appendChild(object); + + let time = document.createElement("div"); + time.setAttribute("class", "time"); + time.innerHTML = comments[i].start; + + comment.appendChild(time); + + let commentText = document.createElement("div"); + commentText.setAttribute("class", "commentText"); + commentText.innerHTML = comments[i].text; + comment.appendChild(commentText); + + aside.appendChild(comment); + } + } + + drawCommentsToVideo(comments, lenght) { + let videoProgress = document.getElementById("video-progress"); + + for (let i = 0; i < comments.length; i++) { + let videoComment = document.createElement("div"); + videoComment.setAttribute("class", "videoComment"); + let percentLeft = (comments[i].start / lenght) * 100; + videoComment.style.left = percentLeft + "%"; + let percentWidth = ((comments[i].end - comments[i].start) / lenght) * 100; + videoComment.style.width = percentWidth + "%"; + + let img = document.createElement("img"); + img.setAttribute("src", "./img/note.svg"); + videoComment.appendChild(img); + + videoProgress.appendChild(videoComment); + } + } /* colorTogglePlaySVG() { var playSVG = document.getElementById("togglePlayIcon"); diff --git a/videos/video.xml b/videos/video.xml index e69de29..149c2af 100644 --- a/videos/video.xml +++ b/videos/video.xml @@ -0,0 +1,17 @@ + + \ No newline at end of file