Implement video player in Vite branch

frontend/locales/en-US.json

@@ -70,6 +70,10 @@
       "errorCode": "Error code: {errorCode}",
       "videoPlayerError": "The video player encountered an unrecoverable error."
     },
+    "playback": {
+      "mediaError": "Fatal media error encountered, trying to recover",
+      "networkError": "Fatal network error encountered, trying to recover"
+    },
     "unauthorized": "You're not authorized to access this page"
   },
   "failedRetrievingDisplayPreferences": "Unable to get display preferences. Using last known settings.",

frontend/package.json

@@ -26,6 +26,7 @@
     "vue-i18n-extract-remove": "vue-i18n-extract --remove"
   },
   "dependencies": {
+    "@jellyfin/libass-wasm": "4.1.1",
     "@jellyfin/sdk": "0.0.0-unstable.202301101857",
     "@vueuse/components": "9.12.0",
     "@vueuse/core": "9.12.0",
@@ -36,15 +37,15 @@
     "destr": "1.1.1",
     "dompurify": "2.3.8",
     "he": "1.2.0",
+    "hls.js": "1.3.1",
     "langs": "2.0.0",
     "lodash-es": "4.17.21",
-    "screenfull": "6.0.1",
     "swiper": "9.0.3",
     "uuid": "9.0.0",
     "vue": "3.2.39",
     "vue-i18n": "9.2.2",
     "vue-router": "4.1.5",
-    "vuetify": "3.1.2"
+    "vuetify": "3.1.6"
   },
   "devDependencies": {
     "@iconify/json": "2.1.104",
@@ -85,6 +86,7 @@
     "vite": "3.2.2",
     "vite-plugin-pages": "0.27.1",
     "vite-plugin-pwa": "0.13.2",
+    "vite-plugin-static-copy": "0.13.0",
     "vite-plugin-vue-layouts": "0.7.0",
     "vue-eslint-parser": "9.1.0",
     "vue-i18n-extract": "2.0.7",

frontend/src/App.vue

@@ -3,6 +3,6 @@
   <v-app>
     <router-view-transition is-root />
     <snackbar />
-    <player-element />
   </v-app>
+  <player-element />
 </template>

frontend/src/assets/styles/global.scss

@@ -72,6 +72,10 @@
   cursor: pointer;
 }
 
+.cursor-none {
+  cursor: none;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }

frontend/src/components/Buttons/PlayButton.vue

@@ -48,12 +48,12 @@ const props = withDefaults(
     iconOnly?: boolean;
     fab?: boolean;
     shuffle?: boolean;
-    videoTrackIndex?: number;
-    audioTrackIndex?: number;
-    subtitleTrackIndex?: number;
+    videoTrackIndex: number;
+    audioTrackIndex: number;
+    subtitleTrackIndex: number;
     disabled?: boolean;
   }>(),
-  { disabled: false }
+  { iconOnly: false, fab: false, shuffle: false, disabled: false }
 );
 
 const playbackManager = playbackManagerStore();
@@ -68,7 +68,7 @@ async function playOrResume(): Promise<void> {
     await playbackManager.play({
       item: props.item,
       audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex || -1,
+      subtitleTrackIndex: props.subtitleTrackIndex,
       videoTrackIndex: props.videoTrackIndex,
       startFromTime:
         ticksToMs(props.item.UserData?.PlaybackPositionTicks) / 1000
@@ -78,15 +78,15 @@ async function playOrResume(): Promise<void> {
     await playbackManager.play({
       item: props.item,
       audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex || -1,
+      subtitleTrackIndex: props.subtitleTrackIndex,
       videoTrackIndex: props.videoTrackIndex,
       startShuffled: true
     });
   } else {
     await playbackManager.play({
       item: props.item,
       audioTrackIndex: props.audioTrackIndex,
-      subtitleTrackIndex: props.subtitleTrackIndex || -1,
+      subtitleTrackIndex: props.subtitleTrackIndex,
       videoTrackIndex: props.videoTrackIndex
     });
   }

frontend/src/components/Buttons/PlaybackSettingsButton.vue

@@ -1,143 +1,100 @@
 <template>
   <v-menu
-    v-model="menu"
+    v-model="menuModel"
     :close-on-content-click="false"
-    :persistent="!true"
     :transition="'slide-y-transition'"
-    location="top"
-    :nudge-top="nudgeTop"
-    offset-y
-    min-width="25em"
-    max-width="25em"
-    :z-index="500"
-    class="menu"
-    @input="$emit('input', $event)">
-    <!-- eslint-disable-next-line vue/no-template-shadow -->
-    <template #activator="{ on: menu, attrs }">
-      <v-tooltip location="top">
-        <template #activator="{ on: tooltip }">
-          <v-btn
-            class="align-self-center active-button"
-            icon
-            v-bind="attrs"
-            v-on="{ ...tooltip, ...menu }">
-            <v-icon>
-              <i-mdi-cog />
-            </v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $t('playbackSettings') }}</span>
-      </v-tooltip>
+    location="top">
+    <template #activator="{ props: menu }">
+      <tooltip-button
+        class="align-self-center active-button"
+        v-bind="menu"
+        :tooltip="{ text: $t('playbackSettings'), location: 'top' }"
+        :icon="{ icon: true }">
+        <v-icon>
+          <i-mdi-cog />
+        </v-icon>
+      </tooltip-button>
     </template>
-    <v-card>
-      <v-list color="transparent">
-        <v-list-item disabled>
-          <v-row align="center">
-            <v-col :cols="4">
-              <label>{{ $t('quality') }}</label>
-            </v-col>
-            <v-col :cols="8">
-              <v-select />
-            </v-col>
-          </v-row>
-        </v-list-item>
-        <v-list-item>
-          <v-row align="center">
-            <v-col :cols="4">
-              <label>{{ $t('audio') }}</label>
-            </v-col>
-            <v-col :cols="8">
-              <media-stream-selector
-                v-if="playbackManager.currentItemAudioTracks"
-                :media-streams="playbackManager.currentItemAudioTracks"
-                type="Audio"
-                :default-stream-index="playbackManager.currentAudioStreamIndex"
-                @input="setAudio($event)" />
-            </v-col>
-          </v-row>
-        </v-list-item>
-        <v-list-item v-show="!$vuetify.display.smAndUp">
-          <v-row align="center">
-            <v-col :cols="4">
-              <label>{{ $t('subtitles') }}</label>
-            </v-col>
-            <v-col :cols="8">
-              <media-stream-selector
-                v-if="playbackManager.currentItemSubtitleTracks"
-                :media-streams="playbackManager.currentItemSubtitleTracks"
-                type="Subtitle"
-                :default-stream-index="
-                  playbackManager.currentSubtitleStreamIndex
-                "
-                @input="setSubtitle($event)" />
-            </v-col>
-          </v-row>
-        </v-list-item>
-        <v-list-item disabled>
-          <v-row align="center">
-            <v-col :cols="4">
-              <label>{{ $t('speed') }}</label>
-            </v-col>
-            <v-col :cols="8">
-              <v-select />
-            </v-col>
-          </v-row>
-        </v-list-item>
-        <v-list-item>
-          <v-row align="center">
-            <v-col :cols="4">
-              <label>{{ $t('stretch') }}</label>
-            </v-col>
-            <v-col :cols="8">
-              <v-switch v-model="stretch" />
-            </v-col>
-          </v-row>
-        </v-list-item>
-      </v-list>
+    <v-card min-width="300">
+      <v-card-text>
+        <v-row align="center">
+          <v-col :cols="4">
+            <label>{{ $t('quality') }}</label>
+          </v-col>
+          <v-col :cols="8">
+            <v-select density="comfortable" hide-details disabled />
+          </v-col>
+        </v-row>
+        <v-row align="center">
+          <v-col :cols="4">
+            <label>{{ $t('audio') }}</label>
+          </v-col>
+          <v-col :cols="8">
+            <media-stream-selector
+              v-if="playbackManager.currentItemAudioTracks"
+              :media-streams="playbackManager.currentItemAudioTracks"
+              type="Audio"
+              :default-stream-index="playbackManager.currentAudioStreamIndex"
+              @input="playbackManager.currentAudioStreamIndex = $event" />
+          </v-col>
+        </v-row>
+        <v-row v-if="!$vuetify.display.smAndUp" align="center">
+          <v-col :cols="4">
+            <label>{{ $t('subtitles') }}</label>
+          </v-col>
+          <v-col :cols="8">
+            <media-stream-selector
+              v-if="playbackManager.currentItemSubtitleTracks"
+              :media-streams="playbackManager.currentItemSubtitleTracks"
+              type="Subtitle"
+              :default-stream-index="playbackManager.currentSubtitleStreamIndex"
+              @input="playbackManager.currentSubtitleStreamIndex = $event" />
+          </v-col>
+        </v-row>
+        <v-row align="center">
+          <v-col :cols="4">
+            <label>{{ $t('speed') }}</label>
+          </v-col>
+          <v-col :cols="8">
+            <v-select density="comfortable" disabled hide-details />
+          </v-col>
+        </v-row>
+        <v-row align="center">
+          <v-col :cols="4">
+            <label>{{ $t('stretch') }}</label>
+          </v-col>
+          <v-col :cols="8" class="text-right">
+            <v-switch v-model="stretched" color="primary" hide-details />
+          </v-col>
+        </v-row>
+      </v-card-text>
     </v-card>
   </v-menu>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-import { playbackManagerStore } from '@/store';
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useVModel } from '@vueuse/core';
+import { playbackManagerStore, playerElementStore } from '@/store';
 
-export default defineComponent({
-  props: {
-    nudgeTop: {
-      type: [Number, String],
-      default: 0
-    },
-    stretchProp: Boolean
-  },
-  setup() {
-    const playbackManager = playbackManagerStore();
+const props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void;
+}>();
 
-    return {
-      playbackManager
-    };
-  },
-  data() {
-    return {
-      menu: false,
-      stretch: this.stretchProp
-    };
-  },
-  watch: {
-    stretchProp(value) {
-      this.stretch = value;
-    },
-    stretch(value) {
-      this.$emit('stretch', value);
-    }
+const menuModel = useVModel(props, 'modelValue', emit);
+
+const playbackManager = playbackManagerStore();
+const playerElement = playerElementStore();
+
+const stretched = computed({
+  get() {
+    return playerElement.isStretched;
   },
-  methods: {
-    setAudio(audioStreamIndex: number) {
-      this.playbackManager.currentAudioStreamIndex = audioStreamIndex;
-    },
-    setSubtitle(subtitleStreamIndex: number) {
-      this.playbackManager.currentSubtitleStreamIndex = subtitleStreamIndex;
-    }
+  set(v: boolean) {
+    playerElement.isStretched = v;
   }
 });
 </script>