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 3 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%;
}
* {
box-sizing: border-box;
}
body {
font-family: RobotoSlab;
color: #707070;
@ -23,6 +27,7 @@ body {
}
aside {
position: relative;
grid-area: comments;
background-color: #ededed;
display: flex;
@ -301,3 +306,67 @@ progress::-webkit-progress-bar {
height: 100%;
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>
<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>
<main>
<video controls id="video" preload="auto">
<source src="./videos/video.webm">
</souce>
</video>
<form action="./upload.php" method="POST" class="hidden" id="form">
<input type="file" name="videoFile" id="videoFile">
</form>
<video controls id="video" preload="auto" class="hidden"></video>
<div class="video-controls hidden" id="video-controls">
<div id="togglePlay">
<img src="./img/play.svg" alt="" id="togglePlayIcon">
@ -44,6 +53,12 @@
</div>
</main>
<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>
</body>

36
js/controller.js
Unescape Escape View File

@ -9,18 +9,22 @@ class Controller {
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)
);
if (videoToLoad != null && videoToLoad != "") {
this.loadVideo(videoToLoad).then(
function () {
video.addEventListener(
"loadedmetadata",
function () {
this.view.videoPlayer.updateVideoDuration();
this.addEventListenersToVideoControls();
this.init(videoToLoad);
}.bind(this)
);
}.bind(this)
);
} else {
this.view.showAddVideo();
}
}
init(videoToLoad) {
@ -105,9 +109,15 @@ class Controller {
async loadVideo(v) {
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();
this.view.createVideoPlayerObject();
}
async loadXml(v) {

40
js/view.js
Unescape Escape View File

@ -1,24 +1,30 @@
class View {
constructor() {
this.init();
}
init() {
//this.colorTogglePlaySVG();
constructor() {}
createVideoPlayerObject() {
this.videoPlayer = new VideoPlayer();
}
/* Obarvení aktivního komentáře - dát do special metody */
/* var mySVG = document.getElementsByClassName("activeIcon")[0];
var svgDoc;
mySVG.addEventListener(
"load",
function () {
svgDoc = mySVG.contentDocument;
svgDoc.getElementById("path4").style.fill = "#ffa800";
},
false
); */
showAddVideo() {
let body = document.getElementsByTagName("body")[0];
let about = document.getElementById("about");
let form = document.getElementById("form");
let textInput = document.getElementById("textInput");
let textArea = document.getElementById("textArea");
about.classList.remove("hidden");
form.classList.remove("hidden");
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) {

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>