diff --git a/css/style.css b/css/style.css index 73fdd9d..01096b6 100644 --- a/css/style.css +++ b/css/style.css @@ -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; +} diff --git a/index.html b/index.html index b0669ed..cbc84bb 100644 --- a/index.html +++ b/index.html @@ -18,13 +18,22 @@
- + +
+
diff --git a/js/controller.js b/js/controller.js index c235e2f..a5a193c 100644 --- a/js/controller.js +++ b/js/controller.js @@ -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) { diff --git a/js/view.js b/js/view.js index 6bc4f4a..2c7fa80 100644 --- a/js/view.js +++ b/js/view.js @@ -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) { diff --git a/videos/example.xml b/videos/example.xml new file mode 100644 index 0000000..aac171b --- /dev/null +++ b/videos/example.xml @@ -0,0 +1,17 @@ + + \ No newline at end of file