✨ Implement SABR player

client/app/components/Spinner.vue

@@ -1,19 +1,21 @@
+<script lang="ts" setup>
+const rectCount = ref(5);
+</script>
+
 <template>
   <div class="spinner">
-    <div class="rect rect1" />
-    <div class="rect rect2" />
-    <div class="rect rect3" />
-    <div class="rect rect4" />
-    <div class="rect rect5" />
+    <div v-for="rectNr in rectCount" :key="rectNr" :class="`rect rect${rectNr}`" />
   </div>
 </template>
 
 <style lang="scss">
 $rectangle-width: 8px;
+$rectangle-count: 5;
+$spinner-width: $rectangle-width * $rectangle-count + 2px * ($rectangle-count - 1);
 
 .spinner {
   margin: auto;
-  width: 48px;
+  width: $spinner-width;
   height: 60px;
   text-align: center;
   font-size: 10px;
@@ -25,7 +27,7 @@ $rectangle-width: 8px;
 
   .rect {
     background-image: var(--theme-color-gradient);
-    background-size: $rectangle-width * 5;
+    background-size: $rectangle-count * $rectangle-width;
     height: 100%;
     width: $rectangle-width;
     display: block;
@@ -34,7 +36,7 @@ $rectangle-width: 8px;
     border-radius: 25px;
   }
 
-  @for $r from 1 through 5 {
+  @for $r from 1 through $rectangle-count {
     .rect#{$r} {
       animation-delay: -1.2s + 0.1s * $r;
       background-position: -$rectangle-width * ($r - 1);

client/app/pages/embed/[id].vue

@@ -18,7 +18,7 @@ const { data: video, pending } = useLazyAsyncData<ApiDto<'VTVideoInfoDto'>, ApiE
 const authorToName = author => {
   if (typeof author == 'string') {
     return author;
-  } else if (typeof author.name == 'string') {
+  } else if (typeof author?.name == 'string') {
     return author.name;
   }
   return 'Unknown Author';

client/app/pages/watch.vue

@@ -259,15 +259,15 @@ const onVideoEnded = () => {
 const authorToName = author => {
   if (typeof author == 'string') {
     return author;
-  } else if (typeof author.name == 'string') {
-    return author.name;
+  } else if (typeof author?.name == 'string') {
+    return author?.name;
   }
   return 'Unknown Author';
 };
 
 const watchPageTitle = computed(() => {
   if (video.value) {
-    return `${video.value.title} :: ${authorToName(video.value.author)}`;
+    return `${video.value.title} :: ${authorToName(video.value?.author)}`;
   } else if (videoPending.value) {
     return 'Loading...';
   }

client/package.json

@@ -14,45 +14,45 @@
   },
   "devDependencies": {
     "@iconify-json/mdi": "1.2.3",
-    "@nuxt/devtools": "2.5.0",
-    "@nuxt/eslint": "1.4.1",
+    "@nuxt/devtools": "2.6.2",
+    "@nuxt/eslint": "1.5.2",
     "@pinia/nuxt": "0.11.1",
     "@types/humanize-duration": "3.27.4",
-    "@types/node": "24.0.3",
+    "@types/node": "24.0.12",
     "@types/papaparse": "5.3.16",
     "@types/qrcode": "1.5.5",
     "@types/ua-parser-js": "0.7.39",
-    "@unocss/nuxt": "66.2.3",
-    "@unocss/preset-icons": "66.2.3",
+    "@unocss/nuxt": "66.3.3",
+    "@unocss/preset-icons": "66.3.3",
     "@viewtube/shared": "workspace:*",
-    "@vueuse/core": "13.4.0",
-    "@vueuse/nuxt": "13.4.0",
+    "@vueuse/core": "13.5.0",
+    "@vueuse/nuxt": "13.5.0",
     "consola": "3.4.2",
     "cross-env": "7.0.3",
     "dashjs": "5.0.3",
     "dayjs": "1.11.13",
     "destr": "2.0.5",
-    "hls.js": "1.6.5",
+    "hls.js": "1.6.7",
     "human-number": "2.0.4",
     "humanize-duration": "3.33.0",
     "keen-slider": "6.8.6",
     "modern-js-ripple": "1.1.3",
     "nuxi": "3.25.1",
-    "nuxt": "3.17.5",
+    "nuxt": "3.17.6",
     "papaparse": "5.5.3",
     "pinia": "3.0.3",
-    "pinia-plugin-persistedstate": "4.3.0",
+    "pinia-plugin-persistedstate": "4.4.1",
     "qrcode": "1.5.4",
     "rx-player": "4.3.0",
     "sass": "1.89.2",
-    "swiper": "11.2.8",
+    "swiper": "11.2.10",
     "tippy.js": "6.3.7",
     "typescript": "5.8.3",
-    "ua-parser-js": "2.0.3",
+    "ua-parser-js": "2.0.4",
     "ufo": "1.6.1",
     "vue": "3.5.17",
     "vue-datepicker-next": "1.0.3",
-    "vue-tsc": "2.2.10",
+    "vue-tsc": "3.0.1",
     "x2js": "3.4.4",
     "ytpl": "2.3.0"
   }

package.json

@@ -37,13 +37,13 @@
     "not Edge 18"
   ],
   "devDependencies": {
-    "@types/node": "24.0.3",
-    "@typescript-eslint/parser": "8.35.0",
-    "eslint": "9.29.0",
+    "@types/node": "24.0.12",
+    "@typescript-eslint/parser": "8.36.0",
+    "eslint": "9.30.1",
     "eslint-plugin-cypress": "5.1.0",
-    "globals": "16.2.0",
-    "knip": "5.61.2",
-    "prettier": "3.6.0",
+    "globals": "16.3.0",
+    "knip": "5.61.3",
+    "prettier": "3.6.2",
     "prettier-plugin-organize-imports": "4.1.0",
     "typescript": "5.8.3"
   },