Přidán formulář k přídávání videí
This commit is contained in:
@@ -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
25
index.html
@@ -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>
|
||||
|
||||
@@ -9,6 +9,7 @@ class Controller {
|
||||
let videoToLoad = urlParams.get("v");
|
||||
let video = document.getElementById("video");
|
||||
|
||||
if (videoToLoad != null && videoToLoad != "") {
|
||||
this.loadVideo(videoToLoad).then(
|
||||
function () {
|
||||
video.addEventListener(
|
||||
@@ -21,6 +22,9 @@ class Controller {
|
||||
);
|
||||
}.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) {
|
||||
|
||||
38
js/view.js
38
js/view.js
@@ -1,24 +1,30 @@
|
||||
class View {
|
||||
constructor() {
|
||||
this.init();
|
||||
constructor() {}
|
||||
|
||||
createVideoPlayerObject() {
|
||||
this.videoPlayer = new VideoPlayer();
|
||||
}
|
||||
|
||||
init() {
|
||||
//this.colorTogglePlaySVG();
|
||||
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");
|
||||
|
||||
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 mySVG = document.getElementsByClassName("activeIcon")[0];
|
||||
var svgDoc;
|
||||
mySVG.addEventListener(
|
||||
"load",
|
||||
function () {
|
||||
svgDoc = mySVG.contentDocument;
|
||||
svgDoc.getElementById("path4").style.fill = "#ffa800";
|
||||
},
|
||||
false
|
||||
); */
|
||||
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
Normal file
17
videos/example.xml
Normal 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>
|
||||
Reference in New Issue
Block a user