pixx/TVC
1
0
Fork 0
Code Issues 4 Pull Requests Packages Projects Releases Wiki Activity

parsování xml a výpis xml

Browse Source
This commit is contained in:
David Zálešák
2021-01-26 19:03:59 +01:00
parent 0e5089afd6
commit 0ade9c4503
8 changed files with 122 additions and 41 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
css/style.css
View File

@@ -134,7 +134,7 @@ article p:last-child {
height: 15vh; height: 15vh;
} }
.video-progress { #video-progress {
width: 80%; width: 80%;
margin-bottom: max(30px,3vh); margin-bottom: max(30px,3vh);
position: relative; position: relative;

35
index.php
View File

@@ -11,31 +11,14 @@
<script src="./js/model.js"></script> <script src="./js/model.js"></script>
<script src="./js/view.js"></script> <script src="./js/view.js"></script>
<script src="./js/video.js"></script> <script src="./js/video.js"></script>
<script src="./js/comments.js"></script>
</head> </head>
<body> <body>
<aside> <aside>
<div class="comment">
<object data="./img/closed-captioning.svg" type="image/svg+xml" class="icon"></object>
<div class="time">01:74</div>
<div class="commentText">Lorem ipsum dolor sit amet.</div>
</div>
<div class="comment activeComment">
<object data="./img/play.svg" type="image/svg+xml" class="icon activeIcon"></object>
<div class="time">02:62</div>
<div class="commentText">Lorem ipsum, dolor sit amet consectetur.</div>
</div>
<div class="comment">
<object data="./img/closed-captioning.svg" type="image/svg+xml" class="icon"></object>
<div class="time">02:62</div>
<div class="commentText">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Voluptas magni qui itaque? Magnam dolorum et, iure nobis velit sed minima repudiandae.</div>
</div>
<div class="comment">
<object data="./img/closed-captioning.svg" type="image/svg+xml" class="icon"></object>
<div class="time">02:62</div>
<div class="commentText">Lorem ipsum, dolor sit amet consectetur.</div>
</div>
</aside> </aside>
<main> <main>
<video controls id="video" preload="auto"> <video controls id="video" preload="auto">
@@ -47,23 +30,13 @@
<img src="./img/play.svg" alt="" id="togglePlayIcon"> <img src="./img/play.svg" alt="" id="togglePlayIcon">
</div> </div>
<div class="video-progress"> <div id="video-progress">
<progress id="progress-bar" value="0" min="0"></progress> <progress id="progress-bar" value="0" min="0"></progress>
<input class="seek" id="seek" value="0" min="0" type="range" step="1"> <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>
</div> </div>
</main> </main>
<article> <article>
<h1>Nadpis velký</h1>
<p>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!</p>
<h2>Nadpis menší</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.</p>
<h3>Nadpis nejmenší</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolores sunt animi veritatis.</p>
</article> </article>
</body> </body>

8
js/comments.js Normal file
View File

@@ -0,0 +1,8 @@
class Comment {
constructor(start, end, text, fulltext) {
this.start = start;
this.end = end;
this.text = text;
this.fulltext = fulltext;
}
}

23
js/controller.js
View File

@@ -13,16 +13,33 @@ class Controller {
this.videoToLoad = urlParams.get("v"); this.videoToLoad = urlParams.get("v");
this.loadVideo(this.videoToLoad); 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) { loadVideo(v) {
let video = document.getElementById("video"); let video = document.getElementById("video");
console.log(video)
video.children[0].src = "./videos/" + v + ".webm"; video.children[0].src = "./videos/" + v + ".webm";
video.load(); video.load();
}
console.log("here"); 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];
this.model.parseXML(TheDocument);
} }
} }

17
js/model.js
View File

@@ -1,3 +1,20 @@
class Model { class Model {
constructor() {} 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));
}
}
} }

3
js/video.js
View File

@@ -109,4 +109,7 @@ class VideoPlayer {
playButton.style.display = "none"; playButton.style.display = "none";
} }
} }
async getVideoDuration() {
return Math.round(await this.video.duration);
}
} }

52
js/view.js
View File

@@ -8,9 +8,8 @@ class View {
this.videoPlayer = new VideoPlayer(); this.videoPlayer = new VideoPlayer();
/* Obarvení aktivního komentáře - dát do special metody */ /* Obarvení aktivního komentáře - dát do special metody */
var mySVG = document.getElementsByClassName("activeIcon")[0]; /* var mySVG = document.getElementsByClassName("activeIcon")[0];
var svgDoc; var svgDoc;
mySVG.addEventListener( mySVG.addEventListener(
"load", "load",
@@ -19,10 +18,57 @@ class View {
svgDoc.getElementById("path4").style.fill = "#ffa800"; svgDoc.getElementById("path4").style.fill = "#ffa800";
}, },
false 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() { /* colorTogglePlaySVG() {
var playSVG = document.getElementById("togglePlayIcon"); var playSVG = document.getElementById("togglePlayIcon");

17
videos/video.xml
View File

@@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<video id="video">
<comment>
<start>12</start>
<end>15</end>
<text>Toto je testovací poznámka</text>
<fulltext>Toto je dlouhý text, který bude zobrazen ve videu dole a bude moci obsahovat markdown</fulltext>
</comment>
<comment>
<start>19</start>
<end>25</end>
<text>Toto je testovací poznámka</text>
<fulltext>Toto je dlouhý text, který bude zobrazen ve videu dole a bude moci obsahovat markdown</fulltext>
</comment>
</video>