Merge pull request #488 from MrBrax/develop-ts

2024-01-12

Dockerfile

@@ -1,5 +1,5 @@
 # syntax=docker/dockerfile:1.4
-FROM node:19-bullseye-slim
+FROM node:20-bullseye-slim
 
 # make app folder
 RUN mkdir -p /usr/local/share/twitchautomator \

client-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "livestreamdvr-client",
-  "version": "2.4.1",
+  "version": "2.4.2",
   "private": true,
   "homepage": "https://github.com/MrBrax/LiveStreamDVR",
   "scripts": {
@@ -28,6 +28,7 @@
     "chart.js": "^4.3.0",
     "core-js": "^3.31.1",
     "date-fns": "^2.30.0",
+    "modern-normalize": "^2.0.0",
     "normalize.css": "^8.0.1",
     "pinia": "^2.1.7",
     "vue": "^3.3.7",
@@ -68,6 +69,6 @@
   },
   "packageManager": "[email protected]",
   "engines": {
-    "node": ">=18"
+    "node": ">=20"
   }
-}
+}

client-vue/src/assets/style.scss

@@ -1,4 +1,4 @@
-@import "normalize.css/normalize";
+@import "modern-normalize/modern-normalize.css";
 // @import "~@fontsource/roboto/scss/mixins";
 
 // @import "~@fontsource/roboto/500.css";

client-vue/src/components/LogViewer.vue

@@ -15,17 +15,17 @@
     <div ref="logViewer" class="log_viewer">
         <table>
             <tr v-for="(line, lineIndex) in logFiltered" :key="lineIndex" :class="logLineClass(line)">
-                <td v-if="line.metadata?.timestamp">
+                <td v-if="line.metadata?.timestamp" class="log-line-timestamp">
                     {{ formatDate(line.metadata.timestamp) }}
                 </td>
-                <td v-else>(no date)</td>
+                <td v-else class="log-line-timestamp">(no date)</td>
                 <td>
                     <a @click="logSetFilter(line.metadata?.module || '')">{{ line.metadata?.module || "Unknown" }}</a>
                 </td>
                 <td>
                     {{ line.level || "UNKNOWN" }}
                 </td>
-                <td @click="expandLog(lineIndex)">
+                <td @click="expandLog(lineIndex)" class="log-line-message">
                     {{ line.message }}
                 </td>
             </tr>
@@ -201,6 +201,15 @@ defineExpose({
     .log-line {
         color: var(--log-color-default);
 
+        .log-line-timestamp {
+            white-space: nowrap;
+        }
+
+        .log-line-message {
+            white-space: pre-wrap;
+            word-break: break-all;
+        }
+
         &.log-line-success {
             // color: #3ea335;
             color: var(--log-color-success);

client-vue/src/components/reusables/DButton.vue

@@ -1,6 +1,6 @@
 <template>
     <button :class="buttonClass" @click="onClick">
-        <span v-if="icon" class="icon">
+        <span v-if="properIcon" class="icon">
             <font-awesome-icon :icon="properIcon" :spin="iconSpin" />
         </span>
         <span v-if="slots.default"><slot /></span>
@@ -10,6 +10,10 @@
 
 <script lang="ts" setup>
 import { computed, useSlots } from "vue";
+import { library } from "@fortawesome/fontawesome-svg-core";
+import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
+import { faSpinner } from "@fortawesome/free-solid-svg-icons";
+library.add(faSpinner);
 
 const slots = useSlots();
 

client-vue/src/components/vod/VodItemControls.vue

@@ -60,7 +60,12 @@
                     {{ t("vod.controls.check-mute") }}
                 </d-button>
             </template>
-            <d-button v-if="vod.video_metadata && vod.video_metadata.type !== 'audio'" icon="burn" @click="emit('showModal', 'burn')">
+            <d-button
+                v-if="vod.video_metadata && vod.video_metadata.type !== 'audio'"
+                icon="burn"
+                :loading="store.hasJob(`tdrender_${vod.basename}`) || store.hasJob(`tdburn_${vod.basename}`)"
+                @click="emit('showModal', 'burn')"
+            >
                 {{ t("vod.controls.render-menu") }}
             </d-button>
             <!-- Fix issues -->

client-vue/src/store/index.ts

@@ -588,6 +588,9 @@ export const useStore = defineStore("twitchAutomator", {
             if (config === null) return false;
             return true; // TODO: actual validation from the same function the server uses
         },
+        hasJob(name: string): boolean {
+            return this.jobList.findIndex((j) => j.name === name) !== -1;
+        }
     },
     getters: {
         isAnyoneLive(): boolean {

client-vue/src/views/Settings/SettingsTips.vue

@@ -5,13 +5,13 @@
             <p>This page contains some tips and other stuff that might be useful to you.</p>
         </article>
         <article>
-            <h2>How to access subscription-only streams</h2>
+            <h2>How to access subscription-only streams / apply turbo to streams</h2>
             <p>
-                If you want to access subscription-only streams, you need supply your session token.<br />
+                If you want to access subscription-only streams or disable ads via turbo, you need supply your session token.<br />
                 You can follow this guide to get the ascii string:
                 <a href="https://streamlink.github.io/cli/plugins/twitch.html" target="_blank">https://streamlink.github.io/cli/plugins/twitch.html</a>
                 <br /><br />
-                Store the string in the <code class="code-small">/config/twitch_oauth.txt</code> file and let the recording begin. There is no need to restart
+                Store the string <em>without</em> "OAuth" or any other prepending text in the <code class="code-small">/config/twitch_oauth.txt</code> file and let the recording begin. There is no need to restart
                 the application to update the token.<br />
                 I have never tested this myself, so I don't know if it works or not. It will probably fail after a while when the token expires.
             </p>

client-vue/yarn.lock

@@ -5833,6 +5833,7 @@ __metadata:
     eslint-scope: "npm:^7.2.1"
     git-describe: "npm:^4.1.1"
     jsdom: "npm:^22.1.0"
+    modern-normalize: "npm:^2.0.0"
     normalize.css: "npm:^8.0.1"
     npm-run-all: "npm:^4.1.5"
     pinia: "npm:^2.1.7"
@@ -6199,6 +6200,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"modern-normalize@npm:^2.0.0":
+  version: 2.0.0
+  resolution: "modern-normalize@npm:2.0.0"
+  checksum: 866690696e1989c57416e7d9c589910bbd02221fb1b2bac0ea735e5a22e0525e9bec67269571c3eaa0de879938d5447c88dc0749675b349c61d6753038730330
+  languageName: node
+  linkType: hard
+
 "ms@npm:2.1.2":
   version: 2.1.2
   resolution: "ms@npm:2.1.2"

common/Comments.ts

@@ -1,3 +1,4 @@
+/*
 export interface TwitchCommentDump {
     comments: TwitchComment[];
     video: {
@@ -16,81 +17,83 @@ export interface TwitchCommentDump {
         view_count: number;
         viewable: string;
 
-        /** @deprecated */
+        /** @deprecated *
         length?: string;
-        /** @deprecated */
+        /** @deprecated *
         channel?: {
             _id: string;
             display_name: string;
         };
-        /** @deprecated */
+        /** @deprecated *
         _id?: string;
     };
 }
+*/
 
-export interface TwitchCommentDumpTD extends TwitchCommentDump {
-    comments: TwitchCommentTD[];
-    video: TwitchCommentDump["video"] & {
-        start: number;
-        end: number;
+export interface TwitchCommentDumpTD {
+    FileInfo?: {
+        Version: {
+            Major: number;
+            Minor: number;
+            Patch: number;
+        };
+        CreatedAt: string;
+        UpdatedAt: string;
     };
     streamer?: {
         name: string;
         id: number; // ?
     };
-    emotes?: null;
+
+    comments: TwitchComment[];
+    video: {
+        title: string;
+        description: string | null;
+        id: string;
+        created_at: string;
+        start: number;
+        end: number;
+        length: number;
+        viewCount: number;
+        game: string | null;
+        chapters: unknown[]; // TODO
+    };
+
+    embeddedData: unknown;
 }
 
 export interface TwitchComment {
-    // internal
-    displayed?: boolean;
 
     _id: string;
+    created_at: string;
     channel_id: string;
-    // commenter: Array;
+    content_type: string;
     content_id: string;
-
-    /**
-     * The offset of the comment being displayed in seconds
-     */
     content_offset_seconds: number;
 
-    content_type: "video";
     commenter: {
-        _id: string;
-        bio: string;
-        created_at: string;
         display_name: string;
-        logo: string;
+        _id: string;
         name: string;
-        type: "user";
+        bio: string | null;
+        created_at: string;
         updated_at: string;
+        logo: string;        
     };
     message: {
         body: string;
-        emoticons: TwitchCommentEmoticons[]; // TODO:
-
-        user_notice_params?: {
-            "msg-id": string | null;
-        };
-
+        bits_spent?: number;
         fragments: TwitchCommentMessageFragment[];
         user_badges: TwitchCommentUserBadge[];
         user_color: string | null;
-        bits_spent?: number;
-        is_action?: boolean;
+        // user_notice_params: unknown; // TODO:
+        emoticons: TwitchCommentEmoticons[]; // TODO:
     };
-    more_replies?: boolean;
-    created_at: string;
-    // message: Array;
-    source: "chat";
-    state: string;
-    updated_at: string;
 }
 
-export interface TwitchCommentTD extends TwitchComment {
-    more_replies: boolean;
-}
+// export interface TwitchCommentTD extends TwitchComment {
+//     more_replies: boolean;
+// }
 
 export interface TwitchCommentUserBadge {
     _id: string;