From 641d7e9894fbd0dfe920a02a4ca53cfb1c548ccf Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Wed, 1 Feb 2023 10:45:56 +0100
Subject: [PATCH] partial work

---
 frontend/package.json                         |   2 +
 frontend/src/App.vue                          |   2 +-
 .../src/components/Buttons/PlayButton.vue     |   6 +-
 .../Buttons/SubtitleSelectionButton.vue       | 125 +++-----
 .../src/components/Playback/OsdPlayer.vue     | 276 ++++++++++++++++++
 .../src/components/Playback/PlayerElement.vue | 203 +++++++++++--
 frontend/src/composables/index.ts             |   1 +
 frontend/src/composables/use-router.ts        |  10 +
 frontend/src/pages/playback/video/index.vue   |  61 +++-
 frontend/src/store/index.ts                   |   8 +
 frontend/src/store/playbackManager.ts         | 169 ++++++++---
 frontend/src/store/videoPlayer.ts             |  38 +++
 package-lock.json                             |  12 +
 13 files changed, 768 insertions(+), 145 deletions(-)
 create mode 100644 frontend/src/components/Playback/OsdPlayer.vue
 create mode 100644 frontend/src/composables/use-router.ts
 create mode 100644 frontend/src/store/videoPlayer.ts

diff --git a/frontend/package.json b/frontend/package.json
index 26a532c4ca9..c189fe10f01 100644
--- 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
index d7ea9d9181e..33619239ef3 100644
--- 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
index d9645692334..564e6fa5bc7 100644
--- 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,7 +104,7 @@ 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
         });
@@ -112,7 +112,7 @@ export default defineComponent({
         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
index 2b73f9dc1c2..8f41a779854 100644
--- 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>
diff --git a/frontend/src/components/Playback/OsdPlayer.vue b/frontend/src/components/Playback/OsdPlayer.vue
new file mode 100644
index 00000000000..b83c52c4c3e
--- /dev/null
+++ b/frontend/src/components/Playback/OsdPlayer.vue
@@ -0,0 +1,276 @@
+<template>
+  <v-overlay
+    v-model="test"
+    contained
+    scrim="transparent"
+    width="100%"
+    height="100%">
+    <div
+      class="d-flex flex-column justify-space-between align-center player-overlay">
+      <div class="osd-top pt-s pl-s pr-s">
+        <div class="d-flex align-center py-2 px-4">
+          <div class="d-flex">
+            <v-btn :icon="IMdiClose" @click="playbackManager.stop" />
+            <v-btn :icon="IMdiChevronDown" disabled />
+          </div>
+          <div class="d-flex ml-auto">
+            <cast-button />
+          </div>
+        </div>
+      </div>
+      <div class="osd-bottom pb-s pl-s pr-s">
+        <div class="pa-4">
+          <time-slider />
+          <div
+            class="controls-wrapper d-flex align-stretch justify-space-between">
+            <div
+              v-if="$vuetify.display.mdAndUp"
+              class="d-flex flex-column align-start justify-center mr-auto video-title">
+              <template
+                v-if="
+                  playbackManager.currentlyPlayingType === BaseItemKind.Episode
+                ">
+                <span class="mt-1 text-subtitle-1 text-truncate">
+                  {{ playbackManager.currentItem?.Name }}
+                </span>
+                <span class="text-subtitle-2 text--secondary text-truncate">
+                  {{ playbackManager.currentItem?.SeriesName }}
+                </span>
+                <span class="text-subtitle-2 text--secondary text-truncate">
+                  {{
+                    $t('seasonEpisode', {
+                      seasonNumber:
+                        playbackManager.currentItem?.ParentIndexNumber,
+                      episodeNumber: playbackManager.currentItem?.IndexNumber
+                    })
+                  }}
+                </span>
+              </template>
+              <template v-else>
+                <span>{{ playbackManager.currentItem?.Name }}</span>
+              </template>
+            </div>
+            <div
+              class="d-flex player-controls align-center justify-start justify-md-center">
+              <v-btn
+                icon
+                class="mx-1"
+                @click="playbackManager.setPreviousTrack">
+                <v-icon>
+                  <i-mdi-skip-previous />
+                </v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                class="mx-1 active-button"
+                @click="playbackManager.playPause">
+                <v-icon size="large">
+                  <i-mdi-play-circle-outline v-if="playbackManager.isPaused" />
+                  <i-mdi-pause-circle-outline v-else />
+                </v-icon>
+              </v-btn>
+              <v-btn icon class="mx-1" @click="playbackManager.setNextTrack">
+                <v-icon>
+                  <i-mdi-skip-next />
+                </v-icon>
+              </v-btn>
+            </div>
+            <div class="d-flex aligh-center ml-auto ml-md-0">
+              <volume-slider v-if="$vuetify.display.smAndUp" class="mr-2" />
+              <queue-button
+                :nudge-top="$vuetify.display.mdAndUp ? 60 : 30"
+                :close-on-click="true" />
+              <subtitle-selection-button v-if="$vuetify.display.smAndUp" />
+              <playback-settings-button
+                :nudge-top="$vuetify.display.mdAndUp ? 60 : 30" />
+              <v-btn class="align-self-center active-button" icon>
+                <v-icon>
+                  <i-mdi-picture-in-picture-bottom-right />
+                </v-icon>
+              </v-btn>
+              <v-btn
+                v-if="$vuetify.display.smAndUp"
+                class="align-self-center active-button"
+                icon
+                @click="playbackManager.toggleStretched">
+                <v-icon v-if="playbackManager.isStretched">
+                  <i-mdi-stretch-to-page />
+                </v-icon>
+                <v-icon v-else>
+                  <i-mdi-stretch-to-page-outline />
+                </v-icon>
+              </v-btn>
+              <v-btn
+                class="align-self-center active-button"
+                icon
+                @click="$emit('toggleFullscreen')">
+                <v-icon>
+                  <i-mdi-fullscreen v-if="!$props.isFullscreen" />
+                  <i-mdi-fullscreen-exit v-else />
+                </v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </v-overlay>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import IMdiClose from 'virtual:icons/mdi/close';
+import IMdiChevronDown from 'virtual:icons/mdi/chevron-down';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import { playbackManagerStore } from '@/store';
+
+defineEmits<{
+  (e: 'toggleFullscreen'): void;
+}>();
+
+defineProps<{
+  isFullscreen: boolean;
+  fullscreenAvailable?: boolean;
+}>();
+
+const test = ref(true);
+
+const playbackManager = playbackManagerStore();
+</script>
+
+<style lang="scss">
+// These don't work when scoped, for some reason.
+
+.player {
+  overflow-y: hidden;
+}
+
+.player--fullscreen {
+  position: relative;
+  width: 100vw !important;
+  height: 100vh !important;
+  max-height: 100% !important;
+  margin: 0 !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.player--minimized {
+  justify-self: end !important;
+  position: relative;
+  margin: 0 !important;
+  margin-left: auto !important;
+  top: auto;
+  left: auto;
+  bottom: 2em;
+  right: 2em;
+}
+</style>
+
+<style lang="scss" scoped>
+.playback-data-dialog {
+  position: absolute;
+  z-index: 999;
+}
+
+.v-card.player-card {
+  background-color: black !important;
+}
+
+.controls-wrapper {
+  position: relative;
+}
+
+/* stylelint-disable-next-line */
+.v-overlay::v-deep .v-overlay__content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.player-overlay {
+  height: 100%;
+}
+
+.osd-top,
+.osd-bottom {
+  width: 100%;
+  padding: 8px;
+}
+
+.osd-bottom > div,
+.osd-top > div {
+  max-width: calc(100vh * 1.77 - 2vh);
+  margin: auto;
+}
+
+.osd-top {
+  padding-bottom: 5em;
+  background: linear-gradient(
+    to bottom,
+    hsla(0, 0%, 0%, 0.75) 0%,
+    hsla(0, 0%, 0%, 0.74) 8.1%,
+    hsla(0, 0%, 0%, 0.714) 15.5%,
+    hsla(0, 0%, 0%, 0.672) 22.5%,
+    hsla(0, 0%, 0%, 0.618) 29%,
+    hsla(0, 0%, 0%, 0.556) 35.3%,
+    hsla(0, 0%, 0%, 0.486) 41.2%,
+    hsla(0, 0%, 0%, 0.412) 47.1%,
+    hsla(0, 0%, 0%, 0.338) 52.9%,
+    hsla(0, 0%, 0%, 0.264) 58.8%,
+    hsla(0, 0%, 0%, 0.194) 64.7%,
+    hsla(0, 0%, 0%, 0.132) 71%,
+    hsla(0, 0%, 0%, 0.078) 77.5%,
+    hsla(0, 0%, 0%, 0.036) 84.5%,
+    hsla(0, 0%, 0%, 0.01) 91.9%,
+    hsla(0, 0%, 0%, 0) 100%
+  );
+}
+
+.osd-bottom {
+  padding-top: 6em;
+  background: linear-gradient(
+    to top,
+    hsla(0, 0%, 0%, 0.75) 0%,
+    hsla(0, 0%, 0%, 0.74) 8.1%,
+    hsla(0, 0%, 0%, 0.714) 15.5%,
+    hsla(0, 0%, 0%, 0.672) 22.5%,
+    hsla(0, 0%, 0%, 0.618) 29%,
+    hsla(0, 0%, 0%, 0.556) 35.3%,
+    hsla(0, 0%, 0%, 0.486) 41.2%,
+    hsla(0, 0%, 0%, 0.412) 47.1%,
+    hsla(0, 0%, 0%, 0.338) 52.9%,
+    hsla(0, 0%, 0%, 0.264) 58.8%,
+    hsla(0, 0%, 0%, 0.194) 64.7%,
+    hsla(0, 0%, 0%, 0.132) 71%,
+    hsla(0, 0%, 0%, 0.078) 77.5%,
+    hsla(0, 0%, 0%, 0.036) 84.5%,
+    hsla(0, 0%, 0%, 0.01) 91.9%,
+    hsla(0, 0%, 0%, 0) 100%
+  );
+}
+
+.player-controls {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.video-title {
+  max-width: 40vw;
+  height: 6em;
+}
+
+// HACK: https://github.com/vuetifyjs/vuetify/issues/8436.
+// https://vuetifyjs.com/en/api/v-btn/#retain-focus-on-click prop was added
+// but it seems we're using a prop combination that it's incompatible with it: NaN;
+
+// SO link: https://stackoverflow.com/questions/57830767/is-it-default-for-vuetify-to-keep-active-state-on-buttons-after-click-how-do-yo/57831256#57831256
+.active-button:focus::before {
+  opacity: 0 !important;
+}
+</style>
diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 83ed0a5261c..86faef71369 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -1,47 +1,72 @@
 <template>
-  <template v-if="mediaElement">
+  <template v-if="playbackManager.currentlyPlayingMediaElement">
     <Teleport :to="teleportTarget">
       <component
-        :is="mediaElement"
+        :is="playbackManager.currentlyPlayingMediaElement"
+        v-show="videoPlayer.isMounted"
         ref="mediaElementRef"
         :poster="posterUrl"
         autoplay
         crossorigin="anonymous"
         playsinline
-        :loop="isLoopingOnce" />
+        :loop="isLoopingOnce"
+        :class="{ stretched: playbackManager.isStretched }">
+        <track
+          v-for="sub in playbackManager.currentItemVttParsedSubtitleTracks"
+          :key="`${playbackManager.currentSourceUrl}-${sub.srcIndex}`"
+          kind="subtitles"
+          :label="sub.label"
+          :srclang="sub.srcLang"
+          :src="sub.src" />
+      </component>
     </Teleport>
   </template>
 </template>
 
 <script setup lang="ts">
-import { computed, watch } from 'vue';
+import { computed, watch, ref, nextTick } from 'vue';
 import { isNil } from 'lodash-es';
 import { useI18n } from 'vue-i18n';
-import { playbackManagerStore, RepeatMode } from '@/store';
-import { mediaElementRef } from '@/store/playbackManager';
+import Hls from 'hls.js';
+import { useMediaControls, watchOnce } from '@vueuse/core';
+import SubtitlesOctopus from '@jellyfin/libass-wasm';
+import subtitlesOctopusWorkerUrl from '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.js?url';
+import { playbackManagerStore, RepeatMode, videoPlayerStore } from '@/store';
+import {
+  /* mediaElementRef, */ setNewMediaControls
+} from '@/store/playbackManager';
 import { getImageInfo } from '@/utils/images';
 import { useSnackbar } from '@/composables';
 
+const mediaElementRef = ref<HTMLMediaElement>();
+setNewMediaControls(useMediaControls(mediaElementRef));
+
 const playbackManager = playbackManagerStore();
+const videoPlayer = videoPlayerStore();
 const { t } = useI18n();
 
-const mediaElement = computed<'audio' | 'video' | undefined>(() => {
-  if (playbackManager.currentlyPlayingMediaType === 'Audio') {
-    return 'audio';
-  } else if (playbackManager.currentlyPlayingMediaType === 'Video') {
-    return 'video';
-  }
-});
+let hls: Hls | undefined;
+let subtitlesOctopus: SubtitlesOctopus | undefined;
 
 /**
  * If the player is a video element and we're in the PiP player or fullscreen video playback, we need to ensure the DOM elements are mounted before the teleport target is ready
  */
-const teleportTarget = computed<'body' | '.video-container'>(() =>
-  mediaElement.value === 'audio' ? 'body' : '.video-container'
-);
+const teleportTarget = computed<'body' | '.video-container'>(() => {
+  if (playbackManager.currentlyPlayingMediaElement === 'audio') {
+    return 'body';
+  } else if (
+    playbackManager.currentlyPlayingMediaElement === 'video' &&
+    videoPlayer.isMounted
+  ) {
+    return '.video-container';
+  } else {
+    return 'body';
+  }
+});
 
 const posterUrl = computed<string>(() =>
-  !isNil(playbackManager.currentItem) && mediaElement.value === 'video'
+  !isNil(playbackManager.currentItem) &&
+  playbackManager.currentlyPlayingMediaElement === 'video'
     ? getImageInfo(playbackManager.currentItem, {
         preferBackdrop: true
       }).url || ''
@@ -52,20 +77,144 @@ const isLoopingOnce = computed(
   () => playbackManager.repeatMode === RepeatMode.RepeatOne
 );
 
+/**
+ * Applies the current subtitle from the playbackManager store
+ *
+ * It first disables all the VTT subtitles
+ * If external and VTT, it shows the correct one
+ * If external and SSA, it loads it in SO
+ * If embedded, it triggers a new transcode
+ */
+async function applyCurrentSubtitle(): Promise<void> {
+  await nextTick();
+
+  if (mediaElementRef.value) {
+    /**
+     * Disabling VTT and SSA subs at first
+     */
+    for (let i = 0; i < mediaElementRef.value.textTracks.length; ++i) {
+      if (mediaElementRef.value.textTracks[i].mode !== 'disabled') {
+        console.log('Disabling vtt ' + i);
+        mediaElementRef.value.textTracks[i].mode = 'disabled';
+      }
+    }
+
+    if (subtitlesOctopus) {
+      subtitlesOctopus.freeTrack();
+    }
+
+    /**
+     * Finding (if it exists) the VTT or SSA track associated to the newly picked subtitle
+     */
+    const vttIdx = playbackManager.currentItemVttParsedSubtitleTracks.findIndex(
+      (sub) => sub.srcIndex === playbackManager.currentSubtitleStreamIndex
+    );
+
+    const ass = playbackManager.currentItemAssParsedSubtitleTracks.find(
+      (sub) => sub.srcIndex === playbackManager.currentSubtitleStreamIndex
+    );
+
+    if (vttIdx !== -1 && mediaElementRef.value.textTracks[vttIdx]) {
+      /**
+       * If VTT found, applying it
+       */
+      console.log('Enabling VTT ' + vttIdx);
+      mediaElementRef.value.textTracks[vttIdx].mode = 'showing';
+    } else if (ass !== undefined && ass.src) {
+      /**
+       * If SSA, using Subtitle Opctopus
+       */
+      if (!subtitlesOctopus) {
+        console.log('Enabling SSO');
+        subtitlesOctopus = new SubtitlesOctopus({
+          video: mediaElementRef.value,
+          subUrl: ass.src,
+          workerUrl: subtitlesOctopusWorkerUrl,
+          prescaleFactor: 0.8,
+          renderAhead: 90
+        });
+      } else {
+        console.log('Changing SSO track');
+        subtitlesOctopus.setTrackByUrl(ass.src);
+      }
+    }
+  }
+}
+
 watch(
   () => playbackManager.currentSourceUrl,
-  () => {
-    if (
-      mediaElementRef.value &&
-      playbackManager.currentSourceUrl &&
-      playbackManager.currentMediaSource?.SupportsDirectPlay &&
-      playbackManager.currentlyPlayingMediaType === 'Audio'
-    ) {
-      mediaElementRef.value.src = playbackManager.currentSourceUrl;
+  async () => {
+    if (playbackManager.currentSourceUrl) {
+      /**
+       * Wait for nextTick to have the DOM updated accordingly
+       */
+      await nextTick();
+
+      try {
+        if (!mediaElementRef.value) {
+          throw new Error('No media element found');
+        }
+
+        if (
+          (playbackManager.currentMediaSource?.SupportsDirectPlay &&
+            playbackManager.currentlyPlayingMediaType === 'Audio') ||
+          (mediaElementRef.value.canPlayType('application/vnd.apple.mpegurl') &&
+            playbackManager.currentlyPlayingMediaType === 'Video')
+        ) {
+          console.log('Direct HTML play');
+          mediaElementRef.value.src = playbackManager.currentSourceUrl;
+        } else if (
+          Hls.isSupported() &&
+          playbackManager.currentlyPlayingMediaType === 'Video'
+        ) {
+          console.log('HLS play');
+
+          if (!hls) {
+            hls = new Hls({ startPosition: playbackManager.currentTime });
+            hls.attachMedia(mediaElementRef.value);
+          } else {
+            hls.config.startPosition = playbackManager.currentTime;
+          }
+
+          hls.on(Hls.Events.ERROR, (event, data) => {
+            console.error(event);
+            console.error(data);
+          });
+
+          hls.loadSource(playbackManager.currentSourceUrl);
+
+          if (videoPlayer.isMounted) {
+            applyCurrentSubtitle();
+          } else {
+            watchOnce(
+              () => videoPlayer.isMounted,
+              () => {
+                applyCurrentSubtitle();
+              }
+            );
+          }
+        } else {
+          throw new Error('No playable case');
+        }
+      } catch {
+        useSnackbar(t('errors.cantPlayItem'), 'error');
+        playbackManager.stop();
+      }
     } else {
-      useSnackbar(t('errors.cantPlayItem'), 'error');
-      playbackManager.stop();
+      if (hls) {
+        console.log('Destroying HLS');
+        hls.destroy();
+        hls = undefined;
+      }
+
+      if (subtitlesOctopus) {
+        console.log('Destroying SSO');
+        subtitlesOctopus.dispose();
+        subtitlesOctopus = undefined;
+      }
     }
   }
 );
+
+watch(() => playbackManager.currentSubtitleStreamIndex, applyCurrentSubtitle);
 </script>
diff --git a/frontend/src/composables/index.ts b/frontend/src/composables/index.ts
index 8af1c786133..5fd0c923289 100644
--- a/frontend/src/composables/index.ts
+++ b/frontend/src/composables/index.ts
@@ -4,3 +4,4 @@ export { useSnackbar } from './use-snackbar';
 export { useVuetify } from './use-vuetify';
 export { useResponsiveClasses } from './use-responsive-classes';
 export { useDateFns } from './use-datefns';
+export { useRouter } from './use-router';
diff --git a/frontend/src/composables/use-router.ts b/frontend/src/composables/use-router.ts
new file mode 100644
index 00000000000..331e882c0f1
--- /dev/null
+++ b/frontend/src/composables/use-router.ts
@@ -0,0 +1,10 @@
+/* eslint-disable no-restricted-imports */
+import router from '@/plugins/router';
+/* eslint-enable no-restricted-imports */
+
+/**
+ *	Returns the global router instance. Needed when used outside setup functions or anywhere else outside the Vue app instance.
+ */
+export function useRouter(): typeof router {
+  return router;
+}
diff --git a/frontend/src/pages/playback/video/index.vue b/frontend/src/pages/playback/video/index.vue
index 13b0cd551b9..1a572e0a511 100644
--- a/frontend/src/pages/playback/video/index.vue
+++ b/frontend/src/pages/playback/video/index.vue
@@ -1 +1,60 @@
-<!-- TODO: Implement here the full video OSD -->
+<template>
+  <v-main class="fill-height">
+    <div class="video-container fill-height" />
+    <osd-player
+      :is-fullscreen="fullscreen.isFullscreen.value"
+      :fullscreen-available="fullscreen.isSupported.value"
+      @toggle-fullscreen="fullscreen.toggle" />
+  </v-main>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: fullpage
+  backdrop:
+    opacity: 1
+  transition: slideUp
+</route>
+
+<script lang="ts" setup>
+import { onBeforeUnmount, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import { useFullscreen } from '@vueuse/core';
+import { playbackManagerStore, videoPlayerStore } from '@/store';
+
+const router = useRouter();
+const playbackManager = playbackManagerStore();
+const videoPlayer = videoPlayerStore();
+
+const videoContainerRef = ref<HTMLMediaElement | undefined>();
+const fullscreen = useFullscreen(videoContainerRef);
+
+if (!playbackManager.currentItem) {
+  router.replace('/');
+}
+
+onBeforeUnmount(() => {
+  playbackManager.stop();
+  videoPlayer.isMounted = false;
+});
+
+onMounted(() => {
+  videoPlayer.isMounted = true;
+});
+</script>
+
+<style>
+video {
+  /* max-height: 100vh;
+  max-width: 100vw; */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+
+video.stretched {
+  width: 100%;
+  height: 100%;
+}
+</style>
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
index 82f968461f6..c7682996731 100644
--- a/frontend/src/store/index.ts
+++ b/frontend/src/store/index.ts
@@ -3,6 +3,7 @@ import items from './items';
 import taskManager from './taskManager';
 import userLibraries from './userLibraries';
 import playbackManager from './playbackManager';
+import videoPlayer from './videoPlayer';
 
 /**
  * Get global instance of clientSettings store
@@ -39,6 +40,13 @@ export function playbackManagerStore(): typeof playbackManager {
   return playbackManager;
 }
 
+/**
+ * Get global instance of videoPlayer store
+ */
+export function videoPlayerStore(): typeof videoPlayer {
+  return videoPlayer;
+}
+
 export type { HomeSection } from './userLibraries';
 export { TaskType } from './taskManager';
 export * from './playbackManager';
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 5ea8a7b460c..99638b8e1a6 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -1,4 +1,4 @@
-import { reactive, watch, ref } from 'vue';
+import { reactive, watch, ref, nextTick } from 'vue';
 import { shuffle, isNil, cloneDeep } from 'lodash-es';
 import {
   BaseItemDto,
@@ -17,7 +17,7 @@ import { getPlaystateApi } from '@jellyfin/sdk/lib/utils/api/playstate-api';
 import { getMediaInfoApi } from '@jellyfin/sdk/lib/utils/api/media-info-api';
 import { useMediaControls, useNow } from '@vueuse/core';
 import { itemsStore } from '.';
-import { usei18n, useRemote, useSnackbar } from '@/composables';
+import { usei18n, useRemote, useRouter, useSnackbar } from '@/composables';
 import { getImageInfo } from '@/utils/images';
 import { msToTicks } from '@/utils/time';
 import playbackProfile from '@/utils/playback-profiles';
@@ -56,6 +56,11 @@ export interface PlaybackTrack {
   codec?: string;
 }
 
+export interface PlaybackExternalTrack extends PlaybackTrack {
+  src: string;
+  codec: string;
+}
+
 interface PlaybackManagerState {
   status: PlaybackStatus;
   currentSourceUrl: string | undefined;
@@ -72,6 +77,7 @@ interface PlaybackManagerState {
   remoteCurrentVolume: number;
   isRemoteMuted: boolean;
   isShuffling: boolean;
+  isStretched: boolean;
   repeatMode: RepeatMode;
   queue: string[];
   originalQueue: string[];
@@ -103,6 +109,7 @@ const defaultState: PlaybackManagerState = {
   remoteCurrentVolume: 100,
   isRemoteMuted: false,
   isShuffling: false,
+  isStretched: true,
   repeatMode: RepeatMode.RepeatNone,
   queue: [],
   originalQueue: [],
@@ -113,7 +120,7 @@ const defaultState: PlaybackManagerState = {
 
 export const mediaElementRef = ref<HTMLMediaElement>();
 const state = reactive<PlaybackManagerState>(cloneDeep(defaultState));
-const mediaControls = useMediaControls(mediaElementRef);
+let mediaControls = useMediaControls(mediaElementRef);
 const reactiveDate = useNow();
 /**
  * Previously, we created a new MediaMetadata every time the item changed. However,
@@ -122,6 +129,12 @@ const reactiveDate = useNow();
  */
 const mediaMetadata = new MediaMetadata();
 
+export function setNewMediaControls(
+  mediacontrols: ReturnType<typeof useMediaControls>
+): void {
+  mediaControls = mediacontrols;
+}
+
 class PlaybackManagerStore {
   /**
    * == GETTERS ==
@@ -225,6 +238,16 @@ class PlaybackManagerStore {
       return items.getItemById(state.queue[state.currentItemIndex])?.MediaType;
     }
   }
+  /**
+   * Get the media HTML element to use for the currently playing element
+   */
+  public get currentlyPlayingMediaElement(): 'audio' | 'video' | undefined {
+    if (this.currentlyPlayingMediaType === 'Audio') {
+      return 'audio';
+    } else if (this.currentlyPlayingMediaType === 'Video') {
+      return 'video';
+    }
+  }
   /**
    * Get current's item audio tracks
    */
@@ -262,7 +285,7 @@ class PlaybackManagerStore {
           label: sub.DisplayTitle ?? 'Undefined',
           src:
             sub.DeliveryMethod === SubtitleDeliveryMethod.External
-              ? sub.DeliveryUrl ?? undefined
+              ? `${remote.sdk.api?.basePath}${sub.DeliveryUrl}`
               : undefined,
           srcLang: sub.Language ?? undefined,
           type: sub.DeliveryMethod ?? SubtitleDeliveryMethod.Drop,
@@ -272,12 +295,23 @@ class PlaybackManagerStore {
     }
   }
 
-  public get currentItemAssParsedSubtitleTracks(): PlaybackTrack[] {
-    const subs = this.currentItemParsedSubtitleTracks;
+  /**
+   * Filters the native subtitles
+   *
+   * As our profile requires either SSA or VTT, if it's not SSA it'll be VTT.
+   * This is done this way as server sends as "Codec" the initial value of the track, so it can be webvtt, subrip, srt...
+   * This is easier to filter out the SSA subs
+   */
+  public get currentItemVttParsedSubtitleTracks(): PlaybackExternalTrack[] {
+    return (this.currentItemParsedSubtitleTracks?.filter(
+      (sub) => sub.codec !== 'ass' && sub.codec !== 'ssa' && sub.src
+    ) || []) as PlaybackExternalTrack[];
+  }
 
-    return (
-      subs?.filter((sub) => sub.codec === 'ass' || sub.codec === 'ssa') || []
-    );
+  public get currentItemAssParsedSubtitleTracks(): PlaybackExternalTrack[] {
+    return (this.currentItemParsedSubtitleTracks?.filter(
+      (sub) => (sub.codec === 'ass' || sub.codec === 'ssa') && sub.src
+    ) || []) as PlaybackExternalTrack[];
   }
 
   public get currentVideoTrack(): MediaStream | undefined {
@@ -285,9 +319,11 @@ class PlaybackManagerStore {
       !isNil(state.currentMediaSource?.MediaStreams) &&
       !isNil(state.currentVideoStreamIndex)
     ) {
-      return state.currentMediaSource?.MediaStreams.filter((stream) => {
-        return stream.Type === 'Video';
-      })[state.currentVideoStreamIndex];
+      return state.currentMediaSource?.MediaStreams.find(
+        (stream) =>
+          stream.Type === 'Video' &&
+          stream.Index === state.currentVideoStreamIndex
+      );
     }
   }
 
@@ -296,9 +332,11 @@ class PlaybackManagerStore {
       !isNil(state.currentMediaSource?.MediaStreams) &&
       !isNil(state.currentAudioStreamIndex)
     ) {
-      return state.currentMediaSource?.MediaStreams.filter((stream) => {
-        return stream.Type === 'Audio';
-      })[state.currentAudioStreamIndex];
+      return state.currentMediaSource?.MediaStreams.find(
+        (stream) =>
+          stream.Type === 'Audio' &&
+          stream.Index === state.currentAudioStreamIndex
+      );
     }
   }
 
@@ -307,9 +345,11 @@ class PlaybackManagerStore {
       !isNil(state.currentMediaSource?.MediaStreams) &&
       !isNil(state.currentSubtitleStreamIndex)
     ) {
-      return state.currentMediaSource?.MediaStreams.filter((stream) => {
-        return stream.Type === 'Subtitle';
-      })[state.currentSubtitleStreamIndex];
+      return state.currentMediaSource?.MediaStreams.find(
+        (stream) =>
+          stream.Type === 'Subtitle' &&
+          stream.Index === state.currentSubtitleStreamIndex
+      );
     }
   }
 
@@ -343,6 +383,10 @@ class PlaybackManagerStore {
     return state.isShuffling;
   }
 
+  public get isStretched(): boolean {
+    return state.isStretched;
+  }
+
   public get repeatMode(): RepeatMode {
     return state.repeatMode;
   }
@@ -795,7 +839,7 @@ class PlaybackManagerStore {
           !isNil(this.currentItem.Id) &&
           !isNil(remote.auth.currentUser)
         ) {
-          await this._reportPlaybackStopped(this.currentItem.Id);
+          this._reportPlaybackStopped(this.currentItem.Id);
         }
       } catch {
       } finally {
@@ -845,6 +889,10 @@ class PlaybackManagerStore {
     }
   };
 
+  public toggleStretched = (): void => {
+    state.isStretched = !state.isStretched;
+  };
+
   /**
    * Toggles between the different repeat modes
    *
@@ -889,7 +937,7 @@ class PlaybackManagerStore {
           userId: remote.auth.currentUserId,
           autoOpenLiveStream: true,
           playbackInfoDto: { DeviceProfile: playbackProfile },
-          mediaSourceId: undefined,
+          mediaSourceId: item.Id,
           audioStreamIndex,
           subtitleStreamIndex
         })
@@ -1042,6 +1090,26 @@ class PlaybackManagerStore {
     });
   };
 
+  public fetchCurrentMediaSource = async (): Promise<void> => {
+    const playbackInfo = await this.getItemPlaybackInfo();
+
+    if (playbackInfo) {
+      const mediaSource = playbackInfo.MediaSources?.[0];
+
+      if (!mediaSource) {
+        const { t } = usei18n();
+
+        useSnackbar(t('errors.cantPlayItem'), 'error');
+      } else {
+        state.playSessionId = playbackInfo?.PlaySessionId || '';
+        state.currentMediaSource = mediaSource;
+        state.currentSourceUrl = this.getItemPlaybackUrl();
+      }
+    }
+
+    this._updateMediaSessionMetadata();
+  };
+
   public constructor() {
     watch(
       () => this.status,
@@ -1080,25 +1148,28 @@ class PlaybackManagerStore {
      */
     watch(
       () => this.currentItemIndex,
-      async () => {
-        const playbackInfo = await this.getItemPlaybackInfo();
-
-        if (playbackInfo) {
-          const mediaSource = playbackInfo.MediaSources?.[0];
+      async (newIndex, oldIndex) => {
+        await this.fetchCurrentMediaSource();
 
-          if (!mediaSource) {
-            const { t } = usei18n();
+        const router = useRouter();
 
-            useSnackbar(t('errors.cantPlayItem'), 'error');
-          } else {
-            state.playSessionId = playbackInfo?.PlaySessionId || '';
-            state.currentMediaSource = mediaSource;
-            state.currentSourceUrl = this.getItemPlaybackUrl();
-          }
+        if (
+          this.currentlyPlayingMediaType === 'Video' &&
+          oldIndex === undefined &&
+          newIndex !== undefined
+        ) {
+          router.push('/playback/video');
+        } else if (
+          router.currentRoute.value.fullPath === '/playback/video' &&
+          newIndex === undefined
+        ) {
+          router.replace(
+            typeof router.options.history.state.back === 'string'
+              ? router.options.history.state.back
+              : ''
+          );
         }
 
-        this._updateMediaSessionMetadata();
-
         if (this.previousItem?.Id) {
           await this._reportPlaybackStopped(this.previousItem.Id);
         }
@@ -1112,6 +1183,34 @@ class PlaybackManagerStore {
       }
     );
 
+    watch(
+      () => this.currentAudioStreamIndex,
+      (newVal, oldVal) => {
+        if (oldVal !== undefined && newVal !== undefined && oldVal !== newVal) {
+          this.fetchCurrentMediaSource();
+        }
+      }
+    );
+
+    watch(
+      () => ({
+        currentSubtitleStreamIndex: this.currentSubtitleStreamIndex,
+        currentSubtitleTrack: this.currentSubtitleTrack
+      }),
+      (oldVal, newVal) => {
+        if (
+          oldVal.currentSubtitleStreamIndex !==
+            newVal.currentSubtitleStreamIndex &&
+          (oldVal.currentSubtitleTrack?.DeliveryMethod ===
+            SubtitleDeliveryMethod.Encode ||
+            newVal.currentSubtitleTrack?.DeliveryMethod ===
+              SubtitleDeliveryMethod.Encode)
+        ) {
+          this.fetchCurrentMediaSource();
+        }
+      }
+    );
+
     watch(
       () => this._pendingProgressReport,
       async () => {
diff --git a/frontend/src/store/videoPlayer.ts b/frontend/src/store/videoPlayer.ts
new file mode 100644
index 00000000000..64602359372
--- /dev/null
+++ b/frontend/src/store/videoPlayer.ts
@@ -0,0 +1,38 @@
+import { cloneDeep } from 'lodash-es';
+import { reactive } from 'vue';
+
+/**
+ * == INTERFACES ==
+ */
+interface VideoPlayerState {
+  isMounted: boolean;
+}
+
+/**
+ * == STATE VARIABLES ==
+ */
+const defaultState: VideoPlayerState = {
+  isMounted: false
+};
+
+const state = reactive<VideoPlayerState>(cloneDeep(defaultState));
+
+/**
+ * == CLASS CONSTRUCTOR ==
+ */
+class VideoPlayerStore {
+  /**
+   * == GETTERS ==
+   */
+  public get isMounted(): boolean {
+    return state.isMounted;
+  }
+
+  public set isMounted(newIsMounted: boolean) {
+    state.isMounted = newIsMounted;
+  }
+}
+
+const videoPlayer = new VideoPlayerStore();
+
+export default videoPlayer;
diff --git a/package-lock.json b/package-lock.json
index fe85e9264e0..3aa3e00b440 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -21,6 +21,7 @@
       "version": "0.0.0",
       "license": "GPL-3.0-only",
       "dependencies": {
+        "@jellyfin/libass-wasm": "4.1.1",
         "@jellyfin/sdk": "0.0.0-unstable.202301101857",
         "@vueuse/components": "9.12.0",
         "@vueuse/core": "9.12.0",
@@ -31,6 +32,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",
@@ -2260,6 +2262,11 @@
       "resolved": "tauri",
       "link": true
     },
+    "node_modules/@jellyfin/libass-wasm": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/@jellyfin/libass-wasm/-/libass-wasm-4.1.1.tgz",
+      "integrity": "sha512-xQVJw+lZUg4U1TmLS80reBECfPtpCgRF8hhUSvUUQM9g68OvINyUU3K2yqRH+8tomGpghiRaIcr/bUJ83e0veA=="
+    },
     "node_modules/@jimp/bmp": {
       "version": "0.16.1",
       "resolved": "https://registry.npmjs.org/@jimp/bmp/-/bmp-0.16.1.tgz",
@@ -9629,6 +9636,11 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hls.js": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.3.1.tgz",
+      "integrity": "sha512-6f4Qyrfj9sNUWMzNFKruqeD2KdisOwQ1GQJqnWAgMQ1hequlFK7e2dmF9qQD3mF/RI76hvztCMBptlPb+HcDow=="
+    },
     "node_modules/hosted-git-info": {
       "version": "2.8.9",
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz",