partial work

jellyfin · Feb 7, 2023 · d3a106f · d3a106f
1 parent b9936b4
commit d3a106f
Show file tree

Hide file tree

Showing 13 changed files with 807 additions and 151 deletions.
diff --git a/frontend/package.json b/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,6 +37,7 @@
     "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",

diff --git a/frontend/src/App.vue b/frontend/src/App.vue
@@ -3,6 +3,6 @@
   <v-app>
     <router-view-transition is-root />
     <snackbar />
-    <player-element />
   </v-app>
+  <player-element />
 </template>
diff --git a/frontend/src/components/Buttons/PlayButton.vue b/frontend/src/components/Buttons/PlayButton.vue
@@ -92,7 +92,7 @@ export default defineComponent({
         await this.playbackManager.play({
           item: this.item,
           audioTrackIndex: this.audioTrackIndex,
-          subtitleTrackIndex: this.subtitleTrackIndex || -1,
+          subtitleTrackIndex: this.subtitleTrackIndex,
           videoTrackIndex: this.videoTrackIndex,
           startFromTime:
             ticksToMs(this.item.UserData?.PlaybackPositionTicks) / 1000
@@ -104,15 +104,15 @@ export default defineComponent({
         await this.playbackManager.play({
           item: this.item,
           audioTrackIndex: this.audioTrackIndex,
-          subtitleTrackIndex: this.subtitleTrackIndex || -1,
+          subtitleTrackIndex: this.subtitleTrackIndex,
           videoTrackIndex: this.videoTrackIndex,
           startShuffled: true
         });
       } else {
         await this.playbackManager.play({
           item: this.item,
           audioTrackIndex: this.audioTrackIndex,
-          subtitleTrackIndex: this.subtitleTrackIndex || -1,
+          subtitleTrackIndex: this.subtitleTrackIndex,
           videoTrackIndex: this.videoTrackIndex
         });
       }

diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -2,95 +2,64 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    :persistent="!true"
-    :transition="'slide-y-transition'"
+    transition="slide-y-transition"
     location="top"
-    :nudge-top="nudgeTop"
-    offset-y
-    min-width="25em"
-    max-width="25em"
-    min-height="25em"
-    max-height="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
-            :disabled="
-              !playbackManager.currentItemParsedSubtitleTracks ||
-              playbackManager.currentItemParsedSubtitleTracks.length === 0
-            "
-            v-bind="attrs"
-            v-on="{ ...tooltip, ...menu }">
-            <v-icon>
-              <i-mdi-closed-caption />
-            </v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $t('subtitles') }}</span>
-      </v-tooltip>
+    <template #activator="{ props }">
+      <v-btn
+        class="align-self-center active-button"
+        icon
+        :disabled="
+          !playbackManager.currentItemParsedSubtitleTracks ||
+          playbackManager.currentItemParsedSubtitleTracks.length === 0
+        "
+        v-bind="props">
+        <v-icon>
+          <i-mdi-closed-caption v-if="playbackManager.currentSubtitleTrack" />
+          <i-mdi-closed-caption-outline v-else />
+        </v-icon>
+      </v-btn>
+      <!-- <span>{{ $t('subtitles') }}</span> -->
     </template>
-    <v-card>
-      <v-list color="transparent">
-        <v-list-item
-          v-for="track of tracks"
-          :key="track.srcIndex"
-          @click="playbackManager.currentSubtitleStreamIndex = track.srcIndex">
-          <v-icon
-            v-if="
-              track.srcIndex === playbackManager.currentSubtitleStreamIndex
-            ">
-            <i-mdi-check />
-          </v-icon>
-          {{ track.label }}
-        </v-list-item>
-      </v-list>
-    </v-card>
+    <!-- Appended or prepended icons cause the menu to be scrollable. This doesn't happen if it's classic text. Vuetify 3.1.2 -->
+    <v-list>
+      <v-list-item
+        v-for="track of tracks"
+        :key="track.srcIndex"
+        :append-icon="
+          track.srcIndex === playbackManager.currentSubtitleStreamIndex
+            ? IMdiCheck
+            : undefined
+        "
+        :title="track.label"
+        @click="playbackManager.currentSubtitleStreamIndex = track.srcIndex" />
+    </v-list>
   </v-menu>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { SubtitleDeliveryMethod } from '@jellyfin/sdk/lib/generated-client';
-import { defineComponent } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import IMdiCheck from 'virtual:icons/mdi/check';
 import { playbackManagerStore } from '@/store';
 import { PlaybackTrack } from '@/store/playbackManager';
 
-export default defineComponent({
-  props: {
-    nudgeTop: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  setup() {
-    const playbackManager = playbackManagerStore();
+const { t } = useI18n();
+const playbackManager = playbackManagerStore();
 
-    return { playbackManager };
-  },
-  data() {
-    return {
-      menu: false
-    };
-  },
-  computed: {
-    tracks(): PlaybackTrack[] {
-      const subs = this.playbackManager
-        .currentItemParsedSubtitleTracks as PlaybackTrack[];
+const menu = ref(false);
 
-      return [
-        {
-          label: this.$t('disabled'),
-          srcIndex: -1,
-          type: SubtitleDeliveryMethod.External
-        },
-        ...subs
-      ];
-    }
-  }
+const tracks = computed(() => {
+  const subs = playbackManager.currentItemParsedSubtitleTracks;
+
+  return [
+    {
+      label: t('disabled'),
+      srcIndex: -1,
+      type: SubtitleDeliveryMethod.External
+    },
+    ...(subs || [])
+  ];
 });
 </script>