pixx
/
TVC
Archived
1
1
Fork 1
Code Issues 4 Pull Requests Releases Activity

Přidán formulář k přídávání videí

Browse Source
master
David Zálešák 4 years ago
parent a0406b44da
commit a9ac73a8e8
5 changed files with 152 additions and 35 deletions
Show Stats Download Patch File Download Diff File

69
css/style.css
Unescape Escape View File

@ -7,6 +7,10 @@ html {
height: 100%; height: 100%;
} }
* {
box-sizing: border-box;
}
body { body {
font-family: RobotoSlab; font-family: RobotoSlab;
color: #707070; color: #707070;
@ -23,6 +27,7 @@ body {
} }
aside { aside {
position: relative;
grid-area: comments; grid-area: comments;
background-color: #ededed; background-color: #ededed;
display: flex; display: flex;
@ -301,3 +306,67 @@ progress::-webkit-progress-bar {
height: 100%; height: 100%;
z-index: 15; z-index: 15;
} }
#about {
position: absolute;
bottom: 0;
padding: 3vh 2vw 3vh 1.5vw;
}
#about h1 {
margin-bottom: 0.2em;
}
#about div {
display: flex;
margin-top: 0.5em;
gap: 1em;
}
a {
color: #282828;
text-decoration: none;
}
form {
width: 100%;
height: 100%;
display: grid;
align-items: center;
justify-items: center;
}
form input {
}
#textInput {
height: 100%;
display: flex;
flex-direction: column;
align-items: stretch;
justify-content: space-between;
gap: 1em;
}
#textInput textarea {
width: 100%;
height: 100%;
resize: none;
padding: 0;
margin: 0;
}
#textInput input {
width: 100%;
height: 2.5em;
appearance: none;
background-color: #ffa800;
color: white;
border: none;
font-weight: bold;
padding: 0;
margin: 0;
cursor: pointer;
}
#textInput input:hover {
background-color: #ff9100;
}

25
index.html
Unescape Escape View File

@ -18,13 +18,22 @@
<body> <body>
<aside> <aside>
<div id="about" class="hidden">
<h1>Hypermediální aplikace</h1>
Tato aplikace vznikla jako semestrální práce do předmětu <a
href="https://is.cuni.cz/studium/predmety/index.php?id=98a627f9145b6bb3a94cda545df1c2bd&tid=&do=predmet&kod=OPBI1I121A&skr=2020">Tvorba
a design multimediálních aplikací</a>.
<div>
<span><a href="https://git.microlab.space/pixx/TVC">git</a></span>
<span><a href="https://pixx.cz/">pixx.cz</a></span>
</div>
</div>
</aside> </aside>
<main> <main>
<video controls id="video" preload="auto"> <form action="./upload.php" method="POST" class="hidden" id="form">
<source src="./videos/video.webm"> <input type="file" name="videoFile" id="videoFile">
</souce> </form>
</video> <video controls id="video" preload="auto" class="hidden"></video>
<div class="video-controls hidden" id="video-controls"> <div class="video-controls hidden" id="video-controls">
<div id="togglePlay"> <div id="togglePlay">
<img src="./img/play.svg" alt="" id="togglePlayIcon"> <img src="./img/play.svg" alt="" id="togglePlayIcon">
@ -44,6 +53,12 @@
</div> </div>
</main> </main>
<article> <article>
<div class="hidden" id="textInput">
<div>XML soubor je pro zatím nutné vytvořit v tomto editoru. GUI editor není ještě vytvořen, ale je v plánu.
</div>
<textarea name="xml" id="textArea" form="form"></textarea>
<input type="submit" value="Přidat video" form="form">
</div>
</article> </article>
</body> </body>

36
js/controller.js
Unescape Escape View File

@ -9,18 +9,22 @@ class Controller {
let videoToLoad = urlParams.get("v"); let videoToLoad = urlParams.get("v");
let video = document.getElementById("video"); let video = document.getElementById("video");
this.loadVideo(videoToLoad).then( if (videoToLoad != null && videoToLoad != "") {
function () { this.loadVideo(videoToLoad).then(
video.addEventListener( function () {
"loadedmetadata", video.addEventListener(
function () { "loadedmetadata",
this.view.videoPlayer.updateVideoDuration(); function () {
this.addEventListenersToVideoControls(); this.view.videoPlayer.updateVideoDuration();
this.init(videoToLoad); this.addEventListenersToVideoControls();
}.bind(this) this.init(videoToLoad);
); }.bind(this)
}.bind(this) );
); }.bind(this)
);
} else {
this.view.showAddVideo();
}
} }
init(videoToLoad) { init(videoToLoad) {
@ -105,9 +109,15 @@ class Controller {
async loadVideo(v) { async loadVideo(v) {
let video = document.getElementById("video"); let video = document.getElementById("video");
let source = document.createElement("source");
video.classList.remove("hidden");
source.setAttribute("src", "./videos/" + v + ".webm");
video.append(source);
video.children[0].src = "./videos/" + v + ".webm";
await video.load(); await video.load();
this.view.createVideoPlayerObject();
} }
async loadXml(v) { async loadXml(v) {

40
js/view.js
Unescape Escape View File

@ -1,24 +1,30 @@
class View { class View {
constructor() { constructor() {}
this.init();
}
init() {
//this.colorTogglePlaySVG();
createVideoPlayerObject() {
this.videoPlayer = new VideoPlayer(); this.videoPlayer = new VideoPlayer();
}
/* Obarvení aktivního komentáře - dát do special metody */ showAddVideo() {
/* var mySVG = document.getElementsByClassName("activeIcon")[0]; let body = document.getElementsByTagName("body")[0];
var svgDoc; let about = document.getElementById("about");
mySVG.addEventListener( let form = document.getElementById("form");
"load", let textInput = document.getElementById("textInput");
function () { let textArea = document.getElementById("textArea");
svgDoc = mySVG.contentDocument;
svgDoc.getElementById("path4").style.fill = "#ffa800"; about.classList.remove("hidden");
}, form.classList.remove("hidden");
false textInput.classList.remove("hidden");
); */ body.style.gridTemplateRows = "20vh auto";
var Connect = new XMLHttpRequest();
// Define which file to open and
// send the request.
Connect.open("GET", "./videos/example.xml", false);
Connect.setRequestHeader("Content-Type", "text/xml");
Connect.send(null);
// Place the response in an XML document.
textArea.value = Connect.responseText;
} }
drawCommentTitles(comments) { drawCommentTitles(comments) {

17
videos/example.xml
Unescape Escape View File

@ -0,0 +1,17 @@
<?xml version="1.0" encoding="UTF-8"?>
<video>
<!--
============ Šablona ============
<comment>
<start>14</start>
<end>33</end>
<title>Nadpis</title>
<text>
Váš text tady, všetně html
</text>
<text>
Další text
</text>
</comment>
-->
</video>