Develop ts

client-vue/package.json

@@ -1,6 +1,6 @@
 {
   "name": "livestreamdvr-client",
-  "version": "2.4.2",
+  "version": "2.4.3",
   "private": true,
   "homepage": "https://github.com/MrBrax/LiveStreamDVR",
   "scripts": {
@@ -71,4 +71,4 @@
   "engines": {
     "node": ">=20"
   }
-}
+}

client-vue/src/assets/_form.scss

@@ -86,6 +86,22 @@
         // don't allow resizing horizontally
         resize: vertical;
     }
+    &.is-highlighted {
+        background-color: rgba(70, 179, 40, 0.19);
+        animation: highlight 1s 5;
+    }
+}
+
+@keyframes highlight {
+    0% {
+        background-color: rgba(70, 179, 40, 0.19);
+    }
+    50% {
+        background-color: rgba(70, 179, 40, 0.39);
+    }
+    100% {
+        background-color: rgba(70, 179, 40, 0.19);
+    }
 }
 
 .input-help {

client-vue/src/components/forms/ChannelUpdateForm.vue

@@ -376,7 +376,7 @@ function deleteChannel() {
 }
 
 function subscribeChannel() {
-    if ((!store.cfg("app_url") || store.cfg("app_url") == "debug") && store.cfg("twitchapi.twitchapi.eventsub_type") === "webhook") {
+    if ((!store.cfg("app_url") || store.cfg("app_url") == "debug") && store.cfg("twitchapi.eventsub_type") === "webhook") {
         alert("Please set the app url in the settings");
         return;
     }

client-vue/src/components/menu/SideMenu.vue

@@ -4,7 +4,7 @@
             <div v-if="store.config" class="top-menu-item title" :class="{ fancy: store.clientCfg('animationsEnabled') }">
                 <router-link to="/dashboard" class="link" aria-label="Go to dashboard">
                     <div class="bg" />
-                    <img src="../../assets/logo.png" class="favicon" width="24" height="24" :alt="store.cfg('app_name', 'TA') ?? 'TA'" aria-hidden="true" />
+                    <img src="../../assets/logo.png" class="favicon" width="24" height="24" :alt="store.app_name ?? 'TA'" aria-hidden="true" />
                     <h1 class="title" :title="verboseVersion">
                         <span>{{ store.app_name }}</span>
                         <template v-if="isDevelopmentBranch">

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

@@ -79,7 +79,15 @@
     <div v-if="exporter == 'file' || exporter == 'sftp' || exporter == 'ftp' || exporter == 'rclone'" class="field">
         <label class="label">{{ t("vod.export.directory") }}</label>
         <div class="control">
-            <input v-model="exportVodSettings.directory" class="input" type="text" />
+            <input id="directory_template" v-model="exportVodSettings.directory" class="input" type="text" />
+            <ul class="template-replacements">
+                <li v-for="(v, k) in ExporterFilenameFields" :key="k">
+                    {{ k }}
+                </li>
+            </ul>
+            <p class="template-preview">
+                {{ templatePreview(exportVodSettings.directory || "") }}
+            </p>
             <p class="input-help">The folder where you want the file to end up in. Both local and remote.</p>
         </div>
     </div>

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

@@ -68,7 +68,7 @@
                             </strong>
                         </span>
                     </em>
-                    <template v-if="store.cfg('chat_dump')">
+                    <!-- <template v-if="store.cfg('chat_dump')">
                         <br /><em>
                             <span v-if="vod.getChatDumpStatus()">
                                 <span class="icon"><fa icon="sync" spin /></span>
@@ -82,7 +82,7 @@
                                 </strong>
                             </span>
                         </em>
-                    </template>
+                    </template> -->
                 </template>
             </template>
             <template v-else-if="!vod.is_capturing && !vod.is_converting && !vod.is_finalized">

client-vue/src/store/index.ts

@@ -65,7 +65,7 @@ export const useStore = defineStore("twitchAutomator", {
             streamerList: [],
             streamerListLoaded: false,
             jobList: [],
-            config: {},
+            config: {} as Record<keyof typeof settingsFields, any> | null,
             favourite_games: [],
             version: "?",
             clientConfig: undefined,
@@ -462,7 +462,7 @@ export const useStore = defineStore("twitchAutomator", {
             // console.debug(job_name, job.dt_started_at, elapsedSeconds, job.progress, calc);
             return calc;
         },
-        updateConfig(data: Record<string, any> | null) {
+        updateConfig(data: Record<keyof typeof settingsFields, any> | null) {
             this.config = data;
         },
         updateClientConfig(data: ClientSettings) {

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

@@ -4,16 +4,50 @@
             <h1>Tips and other stuff</h1>
             <p>This page contains some tips and other stuff that might be useful to you.</p>
         </article>
+        <article>
+            <h2>How to set up</h2>
+            <p>
+                <ol class="steps">
+                    <li :class="{ 'done': store.cfg('bin_dir') }">
+                        <router-link to="./config?showsetting=bin_dir">Set the binary directory in the config
+                            page.</router-link>
+                    </li>
+                    <li :class="{ 'done': store.cfg('ffmpeg_path') }">
+                        <router-link to="./config?showsetting=ffmpeg_path">Set the ffmpeg path in the config
+                            page.</router-link>
+                    </li>
+                    <li :class="{ 'done': store.cfg('mediainfo_path') }">
+                        <router-link to="./config?showsetting=mediainfo_path">Set the mediainfo path in the config
+                            page.</router-link>
+                    </li>
+                    <li :class="{ 'done': store.cfg('app_url') }">
+                        <router-link to="./config?showsetting=app_url">Set the app URL in the config page</router-link>
+                        and set up a reverse proxy with HTTPS.
+                        It must be accessible from the internet and have a domain name.<br>
+                        Also validate the external URL on the config page.
+                    </li>
+                    <li :class="{ 'done': store.streamerList.length > 0 }">
+                        <router-link to="./channels">Add a channel</router-link>
+                    </li>
+                </ol>
+            </p>
+        </article>
         <article>
             <h2>How to access subscription-only streams / apply turbo to streams</h2>
             <p>
-                If you want to access subscription-only streams or disable ads via turbo, 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>
+                <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 <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
+                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.
+                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>
         </article>
         <article>
@@ -28,11 +62,14 @@
         <article>
             <h2>How authentication and single-page apps work</h2>
             <p>
-                This application is a single-page app, which means that it only loads the index.html file once and then uses JavaScript to navigate between
+                This application is a single-page app, which means that it only loads the index.html file once and then
+                uses JavaScript to navigate between
                 pages. This is done to make the application feel more like a native application.<br />
-                This also means that the application doesn't reload the index.html file when you navigate to a different page.<br />The server doesn't know what
+                This also means that the application doesn't reload the index.html file when you navigate to a different
+                page.<br />The server doesn't know what
                 page you are on because of this, and therefore it doesn't know if you are authenticated or not.<br />
-                This is why you need to use the built in authentication system which will only require authentication on required endpoints.
+                This is why you need to use the built in authentication system which will only require authentication on
+                required endpoints.
                 <br /><br />
                 By default, any visitor can access the application and view all your content and change settings.
             </p>
@@ -41,17 +78,22 @@
             <h2>Why do I need a public facing web server?</h2>
             <p>
                 To get stream notifications, the remote server needs to be able to access your local server.<br />
-                This is done by using a public facing reverse proxy (because the need for HTTPS) and a port forward.<br />
-                The current implementation of remote websockets by the provider is very limited, so this is the only way to get it to work.
+                This is done by using a public facing reverse proxy (because the need for HTTPS) and a port
+                forward.<br />
+                The current implementation of remote websockets by the provider is very limited, so this is the only way
+                to get it to work.
             </p>
         </article>
         <article>
             <h2>Can I modify/move the files inside storage?</h2>
             <p>
                 <em>In most cases, this is a bad idea.</em><br />
-                Do not remove the main JSON files while the application is running unless you know that the file watcher is working. It will remove the VOD from
-                the memory database and nothing bad will happen. However, if it doesn't work then the memory will be out of sync with the database/disk, causing
-                the cleanup function and other functions to misbehave. The best way of moving files is to copy the files via the filesystem and then deleting
+                Do not remove the main JSON files while the application is running unless you know that the file watcher
+                is working. It will remove the VOD from
+                the memory database and nothing bad will happen. However, if it doesn't work then the memory will be out
+                of sync with the database/disk, causing
+                the cleanup function and other functions to misbehave. The best way of moving files is to copy the files
+                via the filesystem and then deleting
                 the VOD via the dashboard.
             </p>
         </article>
@@ -63,6 +105,18 @@
     </div>
 </template>
 
+<script lang="ts" setup>
+import { useStore } from "@/store";
+import { useI18n } from "vue-i18n";
+import { useRoute } from "vue-router";
+
+// setup
+const store = useStore();
+const { t, te } = useI18n();
+const route = useRoute();
+
+</script>
+
 <style lang="scss" scoped>
 .tips {
     padding: 2em;
@@ -76,6 +130,7 @@
     border-radius: 1em;
     box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.03);
 }
+
 article:not(:last-child) {
     margin-bottom: 2em;
 }
@@ -106,4 +161,37 @@ footer {
     font-size: 2em;
     color: #3684f1;
 }
-</style>
+
+ol.steps {
+    list-style-type: none;
+    padding-left: 0;
+    counter-reset: step;
+
+    li {
+        counter-increment: step;
+        margin-bottom: 0.5em;
+        position: relative;
+        padding-left: 2.5em;
+
+        &::before {
+            content: counter(step);
+            color: #cc1919;
+            background-color: #f0f0f0;
+            border-radius: 50%;
+            width: 1.5em;
+            height: 1.5em;
+            display: inline-block;
+            text-align: center;
+            line-height: 1.5em;
+            position: absolute;
+            left: 0em;
+            top: 0;
+        }
+
+        &.done::before {
+            background-color: #2eb613;
+            color: white;
+        }
+    }
+}
+</style>

common/Config.ts

@@ -86,30 +86,35 @@ export interface StringSettingField extends BaseSettingField {
     stripslash?: boolean;
     pattern?: string;
     multiline?: boolean;
+    help?: string; // TODO: why is this here twice?
 }
 
 export interface NumberSettingField extends BaseSettingField {
     type: "number";
     default?: number;
     min?: number;
     max?: number;
+    help?: string; // TODO: why is this here twice?
 }
 
 export interface BooleanSettingField extends BaseSettingField {
     type: "boolean";
     default?: boolean;
+    help?: string; // TODO: why is this here twice?
 }
 
 export interface ArraySettingField extends BaseSettingField {
     type: "array";
     default?: string;
     choices: Array<string>;
+    help?: string; // TODO: why is this here twice?
 }
 
 export interface ObjectSettingField extends BaseSettingField {
     type: "object";
     default?: string;
     choices: Record<string, string>;
+    help?: string; // TODO: why is this here twice?
 }
 
 export interface TemplateSettingField extends BaseSettingField {
@@ -121,6 +126,7 @@ export interface TemplateSettingField extends BaseSettingField {
         { display: string; description?: string; deprecated?: boolean }
     >;
     context?: string;
+    help?: string; // TODO: why is this here twice?
 }
 
 export type SettingField =