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

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

Browse Source
This commit is contained in:
David Zálešák
2021-01-31 18:03:48 +01:00
parent a0406b44da
commit a9ac73a8e8
5 changed files with 151 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
css/style.css
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
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>

12
js/controller.js
View File

@@ -9,6 +9,7 @@ class Controller {
let videoToLoad = urlParams.get("v"); let videoToLoad = urlParams.get("v");
let video = document.getElementById("video"); let video = document.getElementById("video");
if (videoToLoad != null && videoToLoad != "") {
this.loadVideo(videoToLoad).then( this.loadVideo(videoToLoad).then(
function () { function () {
video.addEventListener( video.addEventListener(
@@ -21,6 +22,9 @@ class Controller {
); );
}.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) {

38
js/view.js
View File

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

17
videos/example.xml Normal file
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>