Merge pull request #30 from MrBrax/develop

Develop

README.md

@@ -3,15 +3,17 @@
 ![1603661434863-wc](https://user-images.githubusercontent.com/1517911/97119662-fe1b0a80-1711-11eb-8f40-20c1690a01c9.png)
 
 ## Features
-- Automatic VOD recording pretty much the second the stream goes live, instead of checking it every minute like many other scripts do
+- Automatic VOD recording pretty much the second the stream goes live, instead of checking it every minute like many other scripts do.
+- Cyclic recording, as in when a specified amount or storage per streamer is reached, the oldest stream gets deleted.
 - Tons of metadata, maybe too much. Stores info about games played, stream titles, duration, if the stream got muted from copyrighted music, etc.
-- Basic video cutter with chapter display for easy exporting
+- Video cutter with chapter display for easy exporting, also cuts the downloaded chat for synced rendering.
+- Notifications with optional speech when the website is open, get stream live notifications far earlier than the mobile app does.
 - Writes a [losslesscut](https://github.com/mifi/lossless-cut/) compatible csv file for the full VOD so you don't have to find all the games.
-- Uses `ts` instead of `mp4` so if the stream or program crashes, the file won't be corrupted
+- Uses `ts` instead of `mp4` so if the stream or program crashes, the file won't be corrupted.
 - Optionally either dumps chat while capturing (unstable) or downloads the chat file after it's done.
 - Basic tools for downloading any VOD or chat.
 - Can be set to automatically download the whole stream chat to a JSON file, to be used in my [twitch-vod-chat](https://github.com/MrBrax/twitch-vod-chat) webapp or automatically burned in with [TwitchDownloader](https://github.com/lay295/TwitchDownloader).
-- Webhook support for external scripting
+- Basic webhook support for external scripting.
 
 *One high-profile streamer VOD of 10 hours is about 30-50GB.*
 

client-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "twitchautomator-client",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

client-vue/src/assets/_animations.scss

@@ -31,6 +31,22 @@
     }
 }
 
+
+@keyframes ayylien {
+    0% {
+        transform: perspective(500px) rotateY(0deg);
+        text-shadow: 0 0 0 #000;
+    }
+    50% {
+        transform: perspective(500px) rotateY(180deg);
+        text-shadow: 0 0 5px #0f0, 0 0 5px #0f0, 0 0 5px #0f0;
+    }
+    100% {
+        transform: perspective(500px) rotateY(360deg);
+        text-shadow: 0 0 0 #000;
+    }
+}
+
 @keyframes zoom {
     0% {
         background-size: 100%;

client-vue/src/assets/_components.scss

@@ -175,7 +175,7 @@
     }
 }
 
-.jobs_list {
+#jobs-status {
     position: fixed;
     bottom: 0px;
     right: 250px;
@@ -275,3 +275,15 @@ details.settings-details {
         font-style: italic;
     }
 }
+
+.debug-mode {
+    // border:5px solid #0f0;
+    // background-color: #f00;
+    // font-size: 70px;
+    display: inline-block;
+    animation: 3s ayylien linear infinite;
+    perspective: 100px;
+    // transform: perspective(100px) rotateY(80deg);
+    // perspective-origin: center;
+    transform-style: preserve-3d;
+}

client-vue/src/components/DurationDisplay.vue

@@ -4,46 +4,42 @@
 
 <script lang="ts">
 import { defineComponent } from "vue";
-import { parse, intervalToDuration, parseJSON } from 'date-fns';
+import { intervalToDuration, parseJSON } from "date-fns";
 
 export default defineComponent({
     name: "DurationDisplay",
-    props: ['startDate', 'outputStyle'],
+    props: ["startDate", "outputStyle"],
     data() {
         return {
             interval: 0,
-            timeString: '??:??'
+            timeString: "??:??",
         };
     },
-    mounted(){
+    mounted() {
         this.refreshTime();
         this.interval = setInterval(() => {
             this.refreshTime();
         }, 1000);
     },
-    unmounted(){
-        if(this.interval){
+    unmounted() {
+        if (this.interval) {
             clearTimeout(this.interval);
         }
     },
     methods: {
-        refreshTime(){
+        refreshTime() {
             const dateObj = parseJSON(this.startDate);
-            const dur = intervalToDuration({ start: dateObj, end: new Date()});
-            if(this.outputStyle == "human"){
+            const dur = intervalToDuration({ start: dateObj, end: new Date() });
+            if (this.outputStyle == "human") {
                 let str = "";
-                if(dur.hours && dur.hours > 0) str += `${dur.hours}h `;
-                if( ( dur.minutes && dur.minutes > 0 ) || ( dur.hours && dur.hours > 0 ) ) str += `${dur.minutes}m `;
-                if( ( dur.seconds && dur.seconds > 0 ) || ( dur.minutes && dur.minutes > 0 ) ) str += `${dur.seconds}s `;
+                if (dur.hours && dur.hours > 0) str += `${dur.hours}h `;
+                if ((dur.minutes && dur.minutes > 0) || (dur.hours && dur.hours > 0)) str += `${dur.minutes}m `;
+                if ((dur.seconds && dur.seconds > 0) || (dur.minutes && dur.minutes > 0)) str += `${dur.seconds}s `;
                 this.timeString = str.trim();
-            }else{
+            } else {
                 this.timeString = dur.hours?.toString().padStart(2, "0") + ":" + dur.minutes?.toString().padStart(2, "0") + ":" + dur.seconds?.toString().padStart(2, "0");
-            } 
-        }
-    }
+            }
+        },
+    },
 });
 </script>
-
-<style>
-
-</style>

client-vue/src/components/SideMenu.vue

@@ -5,8 +5,8 @@
                 <router-link to="/dashboard">
                     <img src="../assets/logo.png" class="favicon" width="24" height="24" :alt="$store.state.config.app_name" />
                     <span class="title">
-                        {{ $store.state.config.app_name }} {{ $store.state.version }}
-                        <span v-if="$store.state.config.debug">(debug)</span>
+                        {{ $store.state.config.app_name }} {{ $store.state.version }}/{{ clientVersion }}
+                        <span class="debug-mode" v-if="$store.state.config.debug" title="Debug">👽</span>
                     </span>
                 </router-link>
             </div>
@@ -72,6 +72,9 @@ export default defineComponent({
             const streamers: ApiStreamer[] = this.$store.state.streamerList;
             return streamers.sort((a, b) => a.display_name.localeCompare(b.display_name));
         },
+        clientVersion() {
+            return process ? process.env.VUE_APP_VERSION : "?";
+        },
     },
 });
 </script>

client-vue/src/components/Vod.vue

@@ -267,9 +267,9 @@
                 Archive
             </a>
 
-            <a v-if="!vod?.twitch_vod_id && !vod?.is_chat_downloaded" class="button" @click="doDownloadChat">
+            <a v-if="vod?.twitch_vod_id && !vod?.is_chat_downloaded" class="button" @click="doDownloadChat">
                 <span class="icon">
-                    <fa icon="comments" type="fa" v-if="!taskStatus.downloadChat"></fa>
+                    <fa icon="comments" type="fa" v-if="!taskStatus.downloadChat && !compDownloadChat"></fa>
                     <fa icon="sync" type="fa" spin="true" v-else></fa>
                 </span>
                 Download chat
@@ -699,6 +699,17 @@ export default defineComponent({
                 });
         },
     },
+    computed: {
+        compDownloadChat() {
+            if (!this.$store.state.jobList) return false;
+            for (let job of this.$store.state.jobList) {
+                if (job.name == `tcd_${this.vod?.basename}`) {
+                    return true;
+                }
+            }
+            return false;
+        },
+    },
     components: {
         DurationDisplay,
     },