GUI Functionality

tubio-frontend-nuxt-app/.nvmrc

@@ -0,0 +1 @@
+v10.19.0

tubio-frontend-nuxt-app/components/DownloadBox.vue

@@ -2,7 +2,7 @@
     <div class="download-box">
         <h2 v-if="false" class="no-dls-yet mt-2">No downloads yet...</h2>
 
-        <DownloadEntry v-for="(nObj, nIdx) in downloads_c" :downloadEntry="nObj" :key="nIdx" />
+        <DownloadEntry v-for="(nObj, nIdx) in dlcache" :downloadEntry="nObj" :key="nIdx" />
 
     </div>
 </template>
@@ -17,8 +17,8 @@ export default {
   },
 
   computed: {
-    downloads_c: function() {
-      return this.downloads;
+    dlcache: function() {
+      return this.$store.state.dlcache.cache;
     }
   },
 
@@ -30,15 +30,10 @@ export default {
 
   mounted() {
     const that = this;
-    axios.get("/rest-dummies/cache.json", {
-      responseType: 'text'
-    }).then(function(response){
-      if (response.data.status === "OK") {
-        console.log(response.data);
-        that.downloads = response.data.cache;
-      }
-    });
-
+    this.$store.dispatch("dlcache/update", this);
+    setInterval(function(){
+      that.$store.dispatch("dlcache/update", that);
+    }, 1000);
     return;
   }
   

tubio-frontend-nuxt-app/components/DownloadEntry.vue

@@ -15,7 +15,7 @@
                 </div>
               </div>
 
-                <div class="button-remove">
+                <div class="button-remove" v-on:click="removeDownload">
                     <IconX />
                 </div>
             </div>
@@ -65,15 +65,17 @@
 
                 </div>
 
-                <div class="flex flex-col md:ml-4 overflow-x-hidden overflow-y-visible">
+                <div class="flex flex-col md:ml-4 w-full overflow-x-hidden overflow-y-visible">
                     <h1 class="title">{{downloadEntry.title}}</h1>
                     
                     <div class="relative my-4">
+                      <div v-if="downloadEntry.description != ''">
                         <p class="description p-2">
-                            {{downloadEntry.description}}
+                            <span v-html="linebreaksToBrTags(downloadEntry.description)" />
                         </p>
                         <div class="description__decobox description__decobox--left" />
                         <div class="description__decobox description__decobox--right" />
+                      </div>
                     </div>
                 </div>
 
@@ -87,6 +89,7 @@ import IconDownload from "~/components/Icons/download.vue";
 import IconX from "~/components/Icons/x.vue";
 import IconFilm from "~/components/Icons/film.vue";
 import IconMusic from "~/components/Icons/music-note.vue";
+import axios from "axios";
 
 export default {
     components: {
@@ -109,10 +112,24 @@ export default {
       },
       getDurationString: function(unixTime) {
         const time = new Date(unixTime * 1000);
-        const hours = ("0" +   (time.getHours() - 1)).slice(-2);
+        const hours = String((time.getHours() - 1));
         const minutes = ("0" + (time.getMinutes())).slice(-2);
         const seconds = ("0" + (time.getSeconds())).slice(-2);
-        return ((hours !== "0") ? hours : "") + ":" + minutes + ":" + seconds; 
+        return ((hours !== "0") ? (hours + ":") : "") + minutes + ":" + seconds; 
+      },
+      linebreaksToBrTags: function(str) {
+        return str.replace("\n", '<br />');
+      },
+      removeDownload: function() {
+        const that = this;
+        axios.post("/api", {
+          request: "remove_download_entry",
+          id: this.downloadEntry.tubio_id
+        }).then(function(response) {
+          if (response.data.status === "OK") {
+            that.$store.dispatch("dlcache/update", that);
+          }
+        });
       },
     },
 }
@@ -137,7 +154,6 @@ export default {
     width: 150px;
     height: calc(150px * (9 / 16));
     position: relative;
-    transition: transform 0.2s, background-image 1s ease-in-out;
     cursor: pointer;
     scrollbar-width: none;
 

tubio-frontend-nuxt-app/components/LogBox.vue

@@ -1,13 +1,9 @@
 <template>
     <div class="log-box">
-        <LogEntry mode="normal" message="Hello, lol :3" />
-        <LogEntry mode="normal" message="Hello, lol :3" />
-        <LogEntry mode="warn" message="Hello, lol :3" />
-        <LogEntry mode="normal" message="Hello, lol :3" />
-        <LogEntry mode="error" message="Hello, lol :3" />
-        <LogEntry mode="normal" message="Hello, lol :3" />
-        <LogEntry mode="normal" message="Hello, lol :3" />
-        <LogEntry mode="normal" message="Hello, lol :3" />
+        <LogEntry v-for="(nObj, nKey) in logs" 
+          :mode="(nObj.type === 0) ? 'normal' : ((nObj.type === 1) ? 'warn' : 'error')"
+          :message="nObj.compiledMessage"
+          :key="nKey" />
     </div>
 </template>
 
@@ -17,6 +13,21 @@ import LogEntry from "~/components/LogEntry";
 export default {
     components: {
       LogEntry,
+  },
+
+  computed: {
+    logs: function() {
+      return this.$store.state.logs.logs;
+    }
+  },
+
+  mounted() {
+    const that = this;
+    this.$store.dispatch("logs/update", this);
+    setInterval(function(){
+      that.$store.dispatch("logs/update", that);
+    }, 1000);
+    return;
   }
   
 }

tubio-frontend-nuxt-app/nuxt.config.js

@@ -3,7 +3,7 @@ export default {
   target: 'static',
 
   generate: {
-    dir: "web"
+    dir: "../Tubio/frontend/"
   },
 
   server: {

tubio-frontend-nuxt-app/pages/index.vue

@@ -7,12 +7,22 @@
       <Spacer height="2em" m_height="2em" />
     </div>
 
-    <div class="flex flex-row input-flex justify-center">
-      <input class="flex-grow mr-4" type="url" name="" id="" placeholder="video-url">
+    <div class="flex flex-row flex-wrap md:flex-no-wrap  input-flex justify-between md:justify-center">
+      <input class="flex-grow md:mr-4 mb-2 md:mb-0 w-full" type="url" name="video_url" id="video_url" ref="video_url" placeholder="video-url">
 
-      <div class="button flex-shrink button-submit flex-grow-0">
+      <div class="w-full md:hidden" />
+
+      <div class="flex-shrink button-submit flex-grow-0">
+        <select name="mode" id="mode" ref="mode" class="dropdown">
+          <option value="video">Video</option>
+          <option value="audio">Audio</option>
+        </select>
+      </div>
+
+      <div class="button flex-shrink button-submit flex-grow-0 ml-3" v-on:click="downloadButtonClicked">
         <IconArrowRightSquare class="icon-button" />
       </div>
+
     </div>
 
     <Spacer height="2em" m_height="2em" />
@@ -26,6 +36,7 @@ import Logo from "~/components/Logo";
 import Spacer from "~/components/Spacer";
 import DownloadBox from "~/components/DownloadBox";
 import IconArrowRightSquare from "~/components/Icons/arrow-right-square";
+import axios from "axios";
 
 export default {
   components: {
@@ -33,6 +44,28 @@ export default {
     Spacer,
     DownloadBox,
     IconArrowRightSquare,
+  },
+
+  methods: {
+    downloadButtonClicked: function(){
+
+      const that = this;
+      if (this.$refs.video_url.value.match(/(https?:\/\/)?[a-zA-Z0-9-_.]+\.[a-zA-Z-_.]+/)) {
+        const url = this.$refs.video_url.value;
+        this.$refs.video_url.value = "";
+        axios.post("/api", {
+          request: "queue_download",
+          video_url: url,
+          mode: this.$refs.mode.options[this.$refs.mode.selectedIndex].value
+        }).then(function(response){
+          if (response.data.status === "OK") {
+            that.$store.dispatch("dlcache/update", that);
+          }
+        });
+      }
+
+      return;
+    }
   }
 };
 </script>
@@ -120,4 +153,13 @@ input {
   }
 }
 
+.dropdown {
+  min-width: 100px;
+  height: 100%;
+  border-radius: 5px;
+  cursor: pointer;
+  font-family: ZillaSlab, serif;
+  font-size: 16pt;
+}
+
 </style>

tubio-frontend-nuxt-app/pages/settings.vue

@@ -75,8 +75,8 @@
 
                 <Spacer height="50px"/>
 
-                <div class="button">Clear downloads</div>
-                <div class="button mt-2">Clear logs</div>
+                <div class="button" v-on:click="clearDLCache">Clear downloads</div>
+                <div class="button mt-2" v-on:click="clearLogs">Clear logs</div>
 
             </div>
 
@@ -94,6 +94,7 @@
 </template>
 
 <script>
+import axios from "axios";
 import Toggle from "~/components/Toggle.vue";
 import LogBox from "~/components/LogBox.vue";
 import Spacer from "~/components/Spacer.vue";
@@ -104,6 +105,35 @@ export default {
       Toggle,
       LogBox,
       Spacer
+  },
+
+  methods: {
+    clearDLCache: function() {
+
+      const that = this;
+      axios.post("/api", {
+        request: "clear_download_cache",
+      }).then(function(response){
+        if (response.data.status === "OK") {
+          that.$store.dispatch("dlcache/update", that);
+        }
+      });
+     return;
+    },
+
+    clearLogs: function() {
+
+      const that = this;
+      axios.post("/api", {
+        request: "clear_logs",
+      }).then(function(response){
+        if (response.data.status === "OK") {
+          that.$store.dispatch("logs/update", that);
+        }
+      });
+      return;
+    },
+
   }
 };
 </script>

tubio-frontend-nuxt-app/store/dlcache.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const state = () => ({
+    cache: []
+});
+
+export const mutations = {
+    update(state, data) {
+        state.cache = data;
+    },
+};
+
+export const actions = {
+    update(context, instance) {
+        axios.post("/api", {
+            request: "fetch_alltime_cache"
+        })
+        .then(function(response) {
+            if (response.data.status === "OK") {
+                instance.$store.commit("dlcache/update", response.data.cache);
+            }
+        });
+    },
+};

tubio-frontend-nuxt-app/store/logs.js

@@ -0,0 +1,24 @@
+import axios from 'axios';
+
+export const state = () => ({
+    logs: []
+});
+
+export const mutations = {
+    update(state, data) {
+        state.logs = data;
+    },
+};
+
+export const actions = {
+    update(context, instance) {
+        axios.post("/api", {
+            request: "fetch_session_logs"
+        })
+        .then(function(response) {
+            if (response.data.status === "OK") {
+                instance.$store.commit("logs/update", response.data.logs);
+            }
+        });
+    },
+};