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

4 years ago · a9ac73a8e8
parent a0406b44da
commit a9ac73a8e8
5 changed files with 152 additions and 35 deletions
--- 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;
+}
--- a/index.html
+++ b/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>
--- 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) {
--- 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) {
--- a/videos/example.xml
+++ b/videos/example.xml
@ -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>