Merge pull request #383 from MrBrax/develop-ts

Develop ts
MrBrax · Dec 1, 2022 · 3ca8148 · 3ca8148
2 parents 21a5420 + 6c6a89c
commit 3ca8148
Show file tree

Hide file tree

Showing 49 changed files with 728 additions and 562 deletions.
diff --git a/client-vue/package.json b/client-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "livestreamdvr-client",
-  "version": "2.2.2",
+  "version": "2.2.3",
   "private": true,
   "homepage": "https://github.com/MrBrax/LiveStreamDVR",
   "scripts": {

diff --git a/client-vue/src/assets/_button.scss b/client-vue/src/assets/_button.scss
@@ -76,7 +76,8 @@
         }
     }
 
-    &.is-blue {
+    &.is-blue,
+    &.is-info {
         $base-bg: #5098f7;
         background-color: $base-bg;
         border-color: darken($base-bg, 5%);
@@ -88,7 +89,8 @@
         }
     }
 
-    &.is-confirm {
+    &.is-confirm,
+    &.is-success {
         $base-bg: #3db92c;
         background-color: $base-bg;
         border-color: darken($base-bg, 5%);
@@ -105,7 +107,9 @@
         }
     }
 
-    &.is-danger {
+    /** @deprecated */
+    &.is-danger,
+    &.color-red {
         $base-bg: #b35531;
         background-color: $base-bg;
         border-color: darken($base-bg, 5%);
@@ -117,6 +121,18 @@
         }
     }
 
+    &.is-warning {
+        $base-bg: #f7b850;
+        background-color: $base-bg;
+        border-color: darken($base-bg, 5%);
+        color: #fff;
+
+        &:hover {
+            background-color: darken($base-bg, 5%);
+            border-color: darken($base-bg, 10%);
+        }
+    }
+
     &:disabled {
         // opacity: 0.5;
         cursor: not-allowed;

diff --git a/client-vue/src/components/LogViewer.vue b/client-vue/src/components/LogViewer.vue
@@ -46,7 +46,7 @@
                 <td>
                     <a @click="logSetFilter(line.module)">{{ line.module }}</a>
                 </td>
-                <td :title="'PID: ' + line.pid">
+                <td :title="`PID: ${line.pid}`">
                     {{ line.level || "UNKNOWN" }}
                 </td>
                 <td @click="expandLog(lineIndex)">

diff --git a/client-vue/src/components/StreamerItem.vue b/client-vue/src/components/StreamerItem.vue
@@ -1,14 +1,14 @@
 <template>
     <div
         v-if="streamer"
-        :id="'streamer_' + streamer.uuid"
+        :id="`streamer_${streamer.uuid}`"
         class="streamer-box"
         :aria-label="streamer.displayName"
     >
         <div :class="{ 'streamer-title': true, 'is-live': streamer.is_live, 'is-capturing': streamer.is_capturing }">
             <div
                 class="streamer-title-avatar"
-                :style="'background-image: url(' + avatarUrl + ')'"
+                :style="`background-image: url(${avatarUrl})`"
             />
             <div class="streamer-title-text">
                 <h2>

diff --git a/client-vue/src/components/VodItem.vue b/client-vue/src/components/VodItem.vue
@@ -12,7 +12,7 @@
         :aria-label="vod.basename"
     >
         <div
-            :id="'vod_' + vod.uuid"
+            :id="`vod_${vod.uuid}`"
             class="anchor"
         />
 
@@ -333,17 +333,14 @@ library.add(
     faKey
 );
 
-const props = defineProps({
-    vod: {
-        type: Object as () => VODTypes,
-        default: null,
-        // required: true,
-    },
-    minimized: {
-        type: Boolean,
-        default: false,
-    },
+const props = withDefaults(defineProps<{
+    vod: VODTypes;
+    minimized: boolean;
+}>(), {
+    minimized: false,
 });
+
+
 const emit = defineEmits(["forceFetchData", "refresh", "toggleMinimize"]);
 
 const store = useStore();

diff --git a/client-vue/src/components/VodItemBookmarks.vue b/client-vue/src/components/VodItemBookmarks.vue
@@ -51,10 +51,10 @@
                     <div class="field">
                         <label
                             class="label"
-                            :for="'name.' + vod.uuid"
+                            :for="`name.${vod.uuid}`"
                         >Name</label>
                         <input
-                            :id="'name.' + vod.uuid"
+                            :id="`name.${vod.uuid}`"
                             v-model="newBookmark.name"
                             class="input"
                             type="text"
@@ -66,22 +66,23 @@
                     >
                         <label
                             class="label"
-                            :for="'offset.' + vod.uuid"
+                            :for="`offset.${vod.uuid}`"
                         >Offset</label>
                         <input
-                            :id="'offset.' + vod.uuid"
+                            :id="`offset.${vod.uuid}`"
                             v-model="newBookmark.offset"
                             class="input"
                             type="number"
                         >
                     </div>
-                    <button
-                        class="button is-small is-confirm"
+                    <d-button
+                        size="small"
+                        color="success"
+                        icon="plus"
                         @click="doMakeBookmark"
                     >
-                        <span class="icon"><font-awesome-icon icon="plus" /></span>
-                        <span>Create</span>
-                    </button>
+                        {{ t('buttons.create') }}
+                    </d-button>
                 </details>
             </div>
         </transition>

diff --git a/client-vue/src/components/VodItemControls.vue b/client-vue/src/components/VodItemControls.vue
@@ -162,7 +162,7 @@
             -->
             <!-- Delete -->
             <d-button
-                class="button is-danger"
+                color="danger"
                 :disabled="vod.prevent_deletion"
                 icon="trash"
                 @click="emit('delete')"

diff --git a/client-vue/src/components/VodItemGeneral.vue b/client-vue/src/components/VodItemGeneral.vue
@@ -97,11 +97,11 @@
                                 <strong>Resolution:</strong> {{ vod.stream_resolution || "Unknown" }}
                             </li>
                             <li v-if="vod.stream_pauses">
-                                <strong>Stream pauses:</strong> {{ vod.stream_pauses.length }} ({{ humanDuration(vod.totalPausedTime) }})
+                                <strong>Stream pauses:</strong> {{ vod.stream_pauses.length }} ({{ humanDuration(vod.totalPausedTime / 1000) }})
                             </li>
                             <li v-if="vod.provider == 'twitch'">
                                 <strong>Watch live:</strong> <a
-                                    :href="'https://twitch.tv/' + vod.streamer_login"
+                                    :href="`https://twitch.tv/${vod.streamer_login}`"
                                     rel="noreferrer"
                                     target="_blank"
                                 >Twitch</a>

diff --git a/client-vue/src/components/VodItemStatus.vue b/client-vue/src/components/VodItemStatus.vue
@@ -10,33 +10,26 @@
             </strong>&nbsp;
             <div class="buttons">
                 <!-- Delete -->
-                <button
-                    class="button is-danger is-small"
+                <d-button
+                    class="is-danger"
+                    color="danger"
+                    size="small"
+                    icon="trash"
                     :disabled="vod.prevent_deletion"
                     @click="emit('delete')"
                 >
-                    <span class="icon">
-                        <fa
-                            icon="trash"
-                            type="fa"
-                        />
-                    </span>
-                    <span>{{ t('buttons.delete') }}</span>
-                </button>
+                    {{ t('buttons.delete') }}
+                </d-button>
 
                 <!-- Fix issues -->
-                <button
-                    class="button is-confirm is-small"
+                <d-button
+                    color="success"
+                    size="small"
+                    icon="wrench"
                     @click="emit('fixIssues')"
                 >
-                    <span class="icon">
-                        <fa
-                            icon="wrench"
-                            type="fa"
-                        />
-                    </span>
-                    <span>{{ t('vod.controls.fix-issues') }}</span>
-                </button>
+                    {{ t('vod.controls.fix-issues') }}
+                </d-button>
             </div>
         </div>
     </div>

diff --git a/client-vue/src/components/VodItemViewers.vue b/client-vue/src/components/VodItemViewers.vue
@@ -43,11 +43,13 @@ import { useStore } from '@/store';
 import { useI18n } from 'vue-i18n';
 import type { VODTypes } from '@/twitchautomator';
 import { humanDuration } from '@/mixins/newhelpers';
-import { computed, onMounted, reactive, ref } from 'vue';
+import { computed, onMounted, reactive, ref, defineAsyncComponent } from 'vue';
 import type { ChartData, ChartOptions } from 'chart.js';
-import ViewerChart from '@/components/reusables/ViewerChart.vue';
+// import ViewerChart from '@/components/reusables/ViewerChart.vue';
 // const ViewerChart = () => import('@/components/reusables/ViewerChart.vue');
 
+const ViewerChart = defineAsyncComponent(() => import('@/components/reusables/ViewerChart.vue'));
+
 const props = defineProps({
     vod: {
         type: Object as () => VODTypes,

diff --git a/client-vue/src/components/forms/ChannelAddForm.vue b/client-vue/src/components/forms/ChannelAddForm.vue
@@ -43,15 +43,15 @@
                     pattern="^[a-z0-9_]{3,25}$"
                     @keyup="checkLogin"
                 >
-                <button
-                    class="button is-confirm"
+                <d-button
                     type="button"
+                    color="success"
+                    icon="sync"
                     :disabled="!formData.login"
                     @click="fetchLogin"
                 >
-                    <span class="icon"><font-awesome-icon icon="sync" /></span>
-                    <span>{{ t('forms.channel.check') }}</span>
-                </button>
+                    {{ t('forms.channel.check') }}
+                </d-button>
             </div>
             <p class="input-help">
                 {{ t('forms.channel.login_help') }}
@@ -70,17 +70,15 @@
                     type="text"
                     :disabled="fetchingUrl"
                 >
-                <button
-                    class="button is-confirm"
+                <d-button
                     type="button"
+                    color="success"
+                    icon="sync"
+                    :loading="fetchingUrl"
                     @click="getChannelId"
                 >
-                    <span class="icon"><fa
-                        icon="sync"
-                        :spin="fetchingUrl"
-                    /></span>
-                    <span>{{ t('buttons.fetch') }}</span>
-                </button>
+                    {{ t('buttons.fetch') }}
+                </d-button>
             </div>
         </div>
 
@@ -313,13 +311,13 @@
             :form-status-text="formStatusText"
         >
             <div class="control">
-                <button
-                    class="button is-confirm"
+                <d-button
                     type="submit"
+                    color="success"
+                    icon="user-plus"
                 >
-                    <span class="icon"><font-awesome-icon icon="user-plus" /></span>
-                    <span>{{ t('forms.channel.add-channel') }}</span>
-                </button>
+                    {{ t('forms.channel.add-channel') }}
+                </d-button>
             </div>
         </FormSubmit>
     </form>

diff --git a/client-vue/src/components/forms/ChannelUpdateForm.vue b/client-vue/src/components/forms/ChannelUpdateForm.vue
@@ -1,5 +1,5 @@
 <template>
-    <div :id="'channelupdate_' + channel.uuid">
+    <div :id="`channelupdate_${channel.uuid}`">
         <form @submit.prevent="submitForm">
             <div class="field">
                 <label class="label">{{ t('forms.channel.provider') }}</label>
@@ -240,14 +240,14 @@
                 :form-status-text="formStatusText"
             >
                 <d-button
-                    class="is-confirm"
+                    color="success"
                     type="submit"
                     icon="save"
                 >
                     {{ t('buttons.save') }}
                 </d-button>
                 <d-button
-                    class="is-danger"
+                    color="danger"
                     type="button"
                     icon="sync"
                     @click="resetForm"
@@ -259,35 +259,37 @@
         <hr>
         <div class="buttons">
             <d-button
-                class="is-small is-danger"
+                size="small"
+                color="danger"
                 icon="trash"
                 @click="deleteChannel"
             >
                 {{ t('buttons.delete') }}
             </d-button>
             <d-button
-                class="is-small is-danger"
+                size="small"
+                color="danger"
                 icon="video-slash"
                 @click="deleteAllVods"
             >
                 {{ t('buttons.delete-all-vods') }}
             </d-button>
             <d-button
-                class="is-small"
+                size="small"
                 icon="sync"
                 @click="subscribeChannel"
             >
                 {{ t('buttons.subscribe') }}
             </d-button>
             <d-button
-                class="is-small"
+                size="small"
                 icon="list"
                 @click="checkSubscriptions"
             >
                 {{ t('buttons.check-subscriptions') }}
             </d-button>
             <d-button
-                class="is-small"
+                size="small"
                 icon="pencil"
                 @click="renameChannel"
             >
@@ -299,7 +301,8 @@
             <h2>History</h2>
             <div class="field">
                 <d-button
-                    class="is-small is-confirm"
+                    size="small"
+                    color="success"
                     icon="sync"
                     @click="fetchHistory"
                 >
@@ -581,7 +584,7 @@ function renameChannel() {
 }
 
 function deleteAllVods() {
-    if (!confirm(`Do you want to delete all VODs for "${props.channel.uuid}"? This cannot be undone.`)) return;
+    if (!confirm(`Do you want to delete all VODs for "${store.channelUUIDToInternalName(props.channel.uuid)}"? This cannot be undone.`)) return;
     axios
         .post<ApiResponse>(`/api/v0/channels/${props.channel.uuid}/deleteallvods`)
         .then((response) => {