From 465e0fcfa198b7c114d3826eeb263a8350e03bfe Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 16:11:57 +0100
Subject: [PATCH 1/8] fix: wrong value for user check in URL

---
 frontend/src/plugins/remote/axios/index.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/plugins/remote/axios/index.ts b/frontend/src/plugins/remote/axios/index.ts
index 053630e66cc..fdf3af8294e 100644
--- a/frontend/src/plugins/remote/axios/index.ts
+++ b/frontend/src/plugins/remote/axios/index.ts
@@ -28,7 +28,7 @@ class JellyfinInterceptors {
       } else if (
         RemotePluginAuthInstance.currentUser &&
         response.config.url?.includes(
-          `/Users/${RemotePluginAuthInstance.currentUser}/Items/`
+          `/Users/${RemotePluginAuthInstance.currentUser?.Id}/Items/`
         )
       ) {
         response.data = items.add(data);

From 0ff3a4ab9093af7e113b4f8ed30ef9fb3f2b5f77 Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Thu, 2 Feb 2023 11:46:54 +0100
Subject: [PATCH 2/8] fix(mediastreamselector): didn't emit new values & set
 default audio track

---
 frontend/src/components/Item/MediaStreamSelector.vue | 12 +++++++++---
 1 file changed, 9 insertions(+), 3 deletions(-)

diff --git a/frontend/src/components/Item/MediaStreamSelector.vue b/frontend/src/components/Item/MediaStreamSelector.vue
index d16373e191f..76dbd801ea3 100644
--- a/frontend/src/components/Item/MediaStreamSelector.vue
+++ b/frontend/src/components/Item/MediaStreamSelector.vue
@@ -142,17 +142,23 @@ const trackIndex = ref<number | undefined>(
 );
 
 /**
- * Check if Type is Video and trackIndex is -1 then set trackIndex as this.selectItems[0].value
+ * Check if Type is Video or Audio and trackIndex is -1 then set trackIndex as this.selectItems[0].value
  */
 if (
-  props.type === 'Video' &&
+  (props.type === 'Video' || props.type === 'Audio') &&
   trackIndex.value === -1 &&
   selectItems.value[0] !== undefined
 ) {
   trackIndex.value = selectItems.value[0].value;
 }
 
-emits('input', trackIndex.value);
+watch(
+  trackIndex,
+  (newValue) => {
+    emits('input', newValue);
+  },
+  { immediate: true }
+);
 
 watch(
   () => props.defaultStreamIndex,

From fabf02f1d6d3bdaba61356fe75623d83d52d9f34 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Tue, 21 Feb 2023 13:21:50 +0100
Subject: [PATCH 3/8] fix music playback starting from the previous time when
 going to the next track

---
 frontend/src/store/playbackManager.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 90d05167eb8..dfb11169bb2 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -743,9 +743,11 @@ class PlaybackManagerStore {
     ) {
       state.lastItemIndex = state.currentItemIndex;
       state.currentItemIndex += 1;
+      this.currentTime = 0;
     } else if (state.repeatMode === RepeatMode.RepeatAll) {
       state.lastItemIndex = state.currentItemIndex;
       state.currentItemIndex = 0;
+      this.currentTime = 0;
     } else {
       this.stop();
     }

From b546b7d4874705fe2c27f10bba834656cbfcdb8a 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 4/8] feat: implement new HLS video player + subs + PiP

---
 frontend/package.json                         |   6 +-
 frontend/src/App.vue                          |   2 +-
 frontend/src/assets/styles/global.scss        |   4 +
 .../src/components/Buttons/PlayButton.vue     |   6 +-
 .../Buttons/PlaybackSettingsButton.vue        | 213 +++++------
 .../src/components/Buttons/QueueButton.vue    | 264 ++++++--------
 .../Buttons/SubtitleSelectionButton.vue       | 138 +++-----
 .../src/components/Buttons/TooltipButton.vue  |  26 ++
 .../src/components/Playback/OsdPlayer.vue     | 330 ++++++++++++++++++
 .../components/Playback/PiPVideoPlayer.vue    | 106 +++++-
 .../src/components/Playback/PlayerElement.vue | 189 ++++++++--
 frontend/src/composables/index.ts             |   1 +
 frontend/src/composables/use-router.ts        |  10 +
 frontend/src/layouts/default.vue              |  14 +-
 frontend/src/pages/playback/video/index.vue   |  94 ++++-
 frontend/src/store/index.ts                   |   8 +
 frontend/src/store/playbackManager.ts         | 177 ++++++++--
 frontend/src/store/playerElement.ts           | 168 +++++++++
 frontend/vite.config.ts                       |  17 +
 package-lock.json                             | 259 ++++----------
 20 files changed, 1401 insertions(+), 631 deletions(-)
 create mode 100644 frontend/src/components/Buttons/TooltipButton.vue
 create mode 100644 frontend/src/components/Playback/OsdPlayer.vue
 create mode 100644 frontend/src/composables/use-router.ts
 create mode 100644 frontend/src/store/playerElement.ts

diff --git a/frontend/package.json b/frontend/package.json
index fa590274992..dfa6b41197b 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,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",
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/assets/styles/global.scss b/frontend/src/assets/styles/global.scss
index 5725435cfec..377ccdc15a5 100644
--- a/frontend/src/assets/styles/global.scss
+++ b/frontend/src/assets/styles/global.scss
@@ -72,6 +72,10 @@
   cursor: pointer;
 }
 
+.cursor-none {
+  cursor: none;
+}
+
 .pointer-events-none {
   pointer-events: none;
 }
diff --git a/frontend/src/components/Buttons/PlayButton.vue b/frontend/src/components/Buttons/PlayButton.vue
index 6c49c5ecfd9..42eb55b11eb 100644
--- a/frontend/src/components/Buttons/PlayButton.vue
+++ b/frontend/src/components/Buttons/PlayButton.vue
@@ -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,7 +78,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,
       startShuffled: true
     });
@@ -86,7 +86,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
     });
   }
diff --git a/frontend/src/components/Buttons/PlaybackSettingsButton.vue b/frontend/src/components/Buttons/PlaybackSettingsButton.vue
index 604f56b8d23..863f604e2ba 100644
--- a/frontend/src/components/Buttons/PlaybackSettingsButton.vue
+++ b/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>
diff --git a/frontend/src/components/Buttons/QueueButton.vue b/frontend/src/components/Buttons/QueueButton.vue
index ba686c8c249..d59c83954a7 100644
--- a/frontend/src/components/Buttons/QueueButton.vue
+++ b/frontend/src/components/Buttons/QueueButton.vue
@@ -1,214 +1,160 @@
 <template>
   <v-menu
-    v-model="menu"
+    v-model="menuModel"
     :close-on-content-click="false"
     :persistent="!closeOnClick"
     :transition="'slide-y-transition'"
-    location="top"
-    :nudge-top="nudgeTop"
-    offset-y
-    min-width="35vw"
-    max-width="35vw"
-    min-height="60vh"
-    max-height="60vh"
-    :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-playlist-play />
-            </v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $t('queue') }}</span>
-      </v-tooltip>
+    location="top">
+    <template #activator="{ props: menu }">
+      <tooltip-button
+        class="align-self-center active-button"
+        v-bind="menu"
+        :tooltip="{ text: $t('queue'), location: 'top' }"
+        :btn="{ icon: true }">
+        <v-icon>
+          <i-mdi-playlist-play />
+        </v-icon>
+      </tooltip-button>
     </template>
     <v-card>
       <v-list>
-        <v-list-item>
-          <v-avatar>
-            <blurhash-image
-              v-if="playbackManager.initiator"
-              :item="playbackManager.initiator" />
-            <v-icon v-else :icon="modeIcon" />
-          </v-avatar>
+        <v-list-item :title="sourceText">
+          <template #prepend>
+            <v-avatar>
+              <blurhash-image
+                v-if="playbackManager.initiator"
+                :item="playbackManager.initiator" />
+              <v-icon v-else :icon="modeIcon" />
+            </v-avatar>
+          </template>
 
-          <v-list-item-title>{{ sourceText }}</v-list-item-title>
-          <v-list-item-subtitle>
-            {{ getTotalEndsAtTime(playbackManager.queue) }} -
+          <template #subtitle>
+            {{ getTotalEndsAtTime(playbackManager.queue).value }} -
             {{
               $t('playback.queueItems', {
                 items: playbackManager.queue.length
               })
             }}
-          </v-list-item-subtitle>
+          </template>
 
-          <v-list-item-action>
+          <template #append>
             <like-button
               v-if="playbackManager.initiator && playbackManager.currentItem"
               :item="playbackManager.currentItem" />
-          </v-list-item-action>
-          <v-list-item-action class="mr-1">
             <item-menu
               v-if="playbackManager.initiator && playbackManager.currentItem"
               :item="playbackManager.currentItem" />
-          </v-list-item-action>
+          </template>
         </v-list-item>
       </v-list>
       <v-divider />
       <v-list class="overflow">
         <!-- We set an special property to destroy the element so it doesn't take resources while it's not being used.
         This is especially useful for really huge queues. -->
-        <draggable-queue v-if="menu || !destroy" class="ml-4" />
+        <draggable-queue v-if="menuModel || !destroy" class="ml-4" />
       </v-list>
       <v-spacer />
-      <v-card-actions class="d-flex justify-space-between">
-        <v-tooltip location="top">
-          <template #activator="{ on: tooltip }">
-            <v-btn icon v-on="tooltip" @click="playbackManager.stop">
-              <v-icon>
-                <i-mdi-playlist-remove />
-              </v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $t('playback.clearQueue') }}</span>
-        </v-tooltip>
-        <v-tooltip location="top">
-          <template #activator="{ on: tooltip }">
-            <v-btn icon disabled v-on="tooltip">
-              <v-icon>
-                <i-mdi-content-save />
-              </v-icon>
-            </v-btn>
-          </template>
-          <span>{{ $t('playback.saveAsPlaylist') }}</span>
-        </v-tooltip>
+      <v-card-actions>
+        <tooltip-button
+          :tooltip="{ text: $t('playback.clearQueue'), location: 'top' }"
+          :btn="{ icon: true }"
+          @click="playbackManager.stop">
+          <v-icon>
+            <i-mdi-playlist-remove />
+          </v-icon>
+        </tooltip-button>
+        <tooltip-button
+          :tooltip="{ text: $t('playback.saveAsPlaylist'), location: 'top' }"
+          :btn="{ icon: true, disabled: true }">
+          <v-icon>
+            <i-mdi-content-save />
+          </v-icon>
+        </tooltip-button>
         <v-spacer />
       </v-card-actions>
     </v-card>
   </v-menu>
 </template>
 
-<script lang="ts">
-import { BaseItemDto } from '@jellyfin/sdk/lib/generated-client';
-import { defineComponent } from 'vue';
+<script setup lang="ts">
+import { ref, computed, watch } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useTimeoutFn } from '@vueuse/core';
 import IMdiShuffle from 'virtual:icons/mdi/shuffle';
 import IMdiPlaylistMusic from 'virtual:icons/mdi/playlist-music';
 import { playbackManagerStore } from '@/store';
 import { InitMode } from '@/store/playbackManager';
 import { getTotalEndsAtTime } from '@/utils/time';
 
-export default defineComponent({
-  props: {
-    nudgeTop: {
-      type: [Number, String],
-      default: 0
-    },
-    closeOnClick: {
-      type: Boolean,
-      default: false
-    }
-  },
-  setup() {
-    const playbackManager = playbackManagerStore();
+withDefaults(
+  defineProps<{
+    closeOnClick?: boolean;
+  }>(),
+  { closeOnClick: false }
+);
 
-    return { playbackManager };
-  },
-  data() {
-    return {
-      menu: false,
-      destroy: false,
-      timeout: undefined as undefined | number
-    };
-  },
-  computed: {
-    sourceText(): string {
-      /**
-       * TODO: Properly refactor this once search and other missing features are implemented, as discussed in
-       * https://github.com/jellyfin/jellyfin-vue/pull/609
-       */
-      const unknownSource = this.$t('playback.playbackSource.unknown');
+const playbackManager = playbackManagerStore();
+const { t } = useI18n();
 
-      switch (this.playbackManager.playbackInitMode) {
-        case InitMode.Unknown: {
-          return unknownSource;
-        }
-        case InitMode.Item: {
-          return this.playbackManager.currentItem?.AlbumId !==
-            this.playbackManager.initiator?.Id
-            ? unknownSource
-            : this.$t('playback.playbackSource.item', {
-                item: this.playbackManager.initiator?.Name
-              });
-        }
-        case InitMode.Shuffle: {
-          return this.$t('playback.playbackSource.shuffle');
-        }
-        case InitMode.ShuffleItem: {
-          return this.playbackManager.currentItem?.AlbumId !==
-            this.playbackManager.initiator?.Id
-            ? unknownSource
-            : this.$t('playback.playbackSource.shuffleItem', {
-                item: this.playbackManager.initiator?.Name
-              });
-        }
-        default: {
-          return '';
-        }
-      }
-    },
-    initiator(): BaseItemDto | undefined {
-      if (
-        this.playbackManager.currentItem?.AlbumId ===
-        this.playbackManager.initiator?.Id
-      ) {
-        return this.playbackManager.initiator;
-      }
-    },
-    modeIcon(): typeof IMdiShuffle {
-      if (this.playbackManager.playbackInitMode === InitMode.Shuffle) {
-        return IMdiShuffle;
-      }
+const menuModel = ref(false);
+const destroy = ref(false);
+const timeout = useTimeoutFn(() => {
+  destroy.value = true;
+}, 500);
 
-      return IMdiPlaylistMusic;
-    }
-  },
+const sourceText = computed(() => {
   /**
-   * We destroy objects 500 ms after the menu has been closed, so they're visible while the transition is taking place
+   * TODO: Properly refactor this once search and other missing features are implemented, as discussed in
+   * https://github.com/jellyfin/jellyfin-vue/pull/609
    */
-  watch: {
-    menu(): void {
-      if (!this.menu) {
-        this.timeout = window.setTimeout(() => {
-          this.destroy = true;
-        }, 500);
-      } else {
-        window.clearTimeout(this.timeout);
-        this.timeout = undefined;
-        this.destroy = false;
-      }
+  const unknownSource = t('playback.playbackSource.unknown');
+
+  switch (playbackManager.playbackInitMode) {
+    case InitMode.Unknown: {
+      return unknownSource;
+    }
+    case InitMode.Item: {
+      return playbackManager.currentItem?.AlbumId !==
+        playbackManager.initiator?.Id
+        ? unknownSource
+        : t('playback.playbackSource.item', {
+            item: playbackManager.initiator?.Name
+          });
+    }
+    case InitMode.Shuffle: {
+      return t('playback.playbackSource.shuffle');
+    }
+    case InitMode.ShuffleItem: {
+      return playbackManager.currentItem?.AlbumId !==
+        playbackManager.initiator?.Id
+        ? unknownSource
+        : t('playback.playbackSource.shuffleItem', {
+            item: playbackManager.initiator?.Name
+          });
+    }
+    default: {
+      return '';
     }
-  },
-  methods: {
-    getTotalEndsAtTime
+  }
+});
+
+const modeIcon = computed(() =>
+  playbackManager.playbackInitMode === InitMode.Shuffle
+    ? IMdiShuffle
+    : IMdiPlaylistMusic
+);
+
+watch(menuModel, (val) => {
+  if (!val) {
+    timeout.start();
+  } else {
+    timeout.stop();
+    destroy.value = false;
   }
 });
 </script>
 
 <style lang="scss" scoped>
-.menu {
-  user-select: none;
-  overflow: hidden;
-}
-
 .overflow {
   overflow-y: scroll;
   overflow-x: hidden;
diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
index 953a3e00290..5d6869dc0c1 100644
--- a/frontend/src/components/Buttons/SubtitleSelectionButton.vue
+++ b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -1,95 +1,71 @@
 <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"
-    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>
+    transition="slide-y-transition"
+    location="top">
+    <template #activator="{ props: menu }">
+      <tooltip-button
+        class="align-self-center active-button"
+        v-bind="menu"
+        :btn="{
+          icon: true,
+          disabled:
+            !playbackManager.currentItemParsedSubtitleTracks ||
+            playbackManager.currentItemParsedSubtitleTracks.length === 0
+        }"
+        :tooltip="{ text: $t('subtitles'), location: 'top' }">
+        <v-icon>
+          <i-mdi-closed-caption v-if="playbackManager.currentSubtitleTrack" />
+          <i-mdi-closed-caption-outline v-else />
+        </v-icon>
+      </tooltip-button>
     </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>
+    <v-list class="overflow-hidden">
+      <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 { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useVModel } from '@vueuse/core';
+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 props = defineProps<{
+  modelValue: boolean;
+}>();
+const emit = defineEmits<{
+  (e: 'update:modelValue', val: boolean): void;
+}>();
 
-    return { playbackManager };
-  },
-  data() {
-    return {
-      menu: false
-    };
-  },
-  computed: {
-    tracks(): PlaybackTrack[] {
-      const subs = this.playbackManager.currentItemParsedSubtitleTracks ?? [];
+const menuModel = useVModel(props, 'modelValue', emit);
 
-      return [
-        {
-          label: this.$t('disabled'),
-          srcIndex: -1,
-          type: SubtitleDeliveryMethod.External
-        },
-        ...subs
-      ];
-    }
-  }
+const { t } = useI18n();
+const playbackManager = playbackManagerStore();
+
+const tracks = computed(() => {
+  const subs = playbackManager.currentItemParsedSubtitleTracks;
+
+  return [
+    {
+      label: t('disabled'),
+      srcIndex: -1,
+      type: SubtitleDeliveryMethod.External
+    },
+    ...(subs || [])
+  ];
 });
 </script>
diff --git a/frontend/src/components/Buttons/TooltipButton.vue b/frontend/src/components/Buttons/TooltipButton.vue
new file mode 100644
index 00000000000..0a28612e91b
--- /dev/null
+++ b/frontend/src/components/Buttons/TooltipButton.vue
@@ -0,0 +1,26 @@
+<template>
+  <v-tooltip v-bind="$props.tooltip">
+    <template #activator="{ props: tooltipActivator }">
+      <v-btn
+        v-if="$slots.default"
+        v-bind="{ ...$attrs, ...tooltipActivator, ...$props.btn }">
+        <slot />
+      </v-btn>
+      <v-btn
+        v-else
+        v-bind="{ ...$attrs, ...tooltipActivator, ...$props.btn }" />
+    </template>
+  </v-tooltip>
+</template>
+
+<script setup lang="ts">
+import { VBtn, VTooltip } from 'vuetify/components';
+
+type VBtnProps = InstanceType<typeof VBtn>['$props'];
+type VTooltipProps = InstanceType<typeof VTooltip>['$props'];
+
+defineProps<{
+  btn?: VBtnProps;
+  tooltip?: VTooltipProps;
+}>();
+</script>
diff --git a/frontend/src/components/Playback/OsdPlayer.vue b/frontend/src/components/Playback/OsdPlayer.vue
new file mode 100644
index 00000000000..e3743ff6fc1
--- /dev/null
+++ b/frontend/src/components/Playback/OsdPlayer.vue
@@ -0,0 +1,330 @@
+<template>
+  <v-overlay
+    v-model="overlay"
+    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"
+              @click="playerElement.toggleMinimize" />
+          </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 :close-on-click="true" />
+              <subtitle-selection-button
+                v-if="$vuetify.display.smAndUp"
+                v-model="subtitleSelectionButtonOpened" />
+              <playback-settings-button
+                v-model="playbackSettingsButtonOpened" />
+              <v-btn
+                v-if="mediaControls.supportsPictureInPicture"
+                class="align-self-center active-button"
+                icon
+                @click="mediaControls.togglePictureInPicture">
+                <v-icon>
+                  <i-mdi-picture-in-picture-bottom-right />
+                </v-icon>
+              </v-btn>
+              <tooltip-button
+                class="align-self-center active-button"
+                :tooltip="{ text: $t('fullScreen'), location: 'top' }"
+                :btn="{ icon: true }"
+                @click="$emit('toggleFullscreen')">
+                <v-icon>
+                  <i-mdi-fullscreen v-if="!$props.isFullscreen" />
+                  <i-mdi-fullscreen-exit v-else />
+                </v-icon>
+              </tooltip-button>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </v-overlay>
+</template>
+
+<script lang="ts" setup>
+import { ref, computed, watch } 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 {
+  useTimeoutFn,
+  useEventListener,
+  useMagicKeys,
+  whenever
+} from '@vueuse/core';
+import { playbackManagerStore, playerElementStore } from '@/store';
+import { mediaControls } from '@/store/playbackManager';
+
+const emit = defineEmits<{
+  (e: 'toggleFullscreen'): void;
+  (e: 'update:modelValue', val: boolean): void;
+}>();
+
+const props = defineProps<{
+  modelValue: boolean;
+  isFullscreen: boolean;
+}>();
+
+const playbackManager = playbackManagerStore();
+const playerElement = playerElementStore();
+
+const subtitleSelectionButtonOpened = ref(false);
+const playbackSettingsButtonOpened = ref(false);
+const staticOverlay = computed(
+  () =>
+    playbackManager.isPaused ||
+    subtitleSelectionButtonOpened.value ||
+    playbackSettingsButtonOpened.value
+);
+
+const overlay = computed({
+  get: () => props.modelValue || staticOverlay.value,
+  set: (val: boolean) => {
+    emit('update:modelValue', val);
+  }
+});
+
+watch(staticOverlay, (val) => {
+  if (val) {
+    timeout.stop();
+  } else {
+    timeout.start();
+  }
+});
+
+const timeout = useTimeoutFn(() => {
+  overlay.value = false;
+}, 5000);
+
+/**
+ * Shows the overlay on mouse move and starts the timeout to hide it, unless the overlay must stay static
+ */
+function handleMouseMove(): void {
+  if (!staticOverlay.value) {
+    overlay.value = true;
+    timeout.start();
+  }
+}
+
+const keys = useMagicKeys();
+
+whenever(keys.space, playbackManager.playPause);
+whenever(keys.k, playbackManager.playPause);
+whenever(keys.right, playbackManager.skipForward);
+whenever(keys.l, playbackManager.skipForward);
+whenever(keys.left, playbackManager.skipBackward);
+whenever(keys.j, playbackManager.skipBackward);
+whenever(keys.f, () => emit('toggleFullscreen'));
+whenever(keys.m, playbackManager.toggleMute);
+
+useEventListener(document, 'mousemove', handleMouseMove);
+useEventListener(document, 'touchend', handleMouseMove);
+</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/PiPVideoPlayer.vue b/frontend/src/components/Playback/PiPVideoPlayer.vue
index 21217e9e6ee..481bdf0a0db 100644
--- a/frontend/src/components/Playback/PiPVideoPlayer.vue
+++ b/frontend/src/components/Playback/PiPVideoPlayer.vue
@@ -1 +1,105 @@
-<!-- TODO: Implement PiP dialog here. Dialog should be toggled with an v-show (so it's always in the DOM tree) in order for PlayerElement.vue's teleport to work -->
+<template>
+  <v-overlay
+    :model-value="true"
+    persistent
+    no-click-animation
+    scrim
+    scroll-strategy="none"
+    content-class="minimized-overlay"
+    :width="$vuetify.display.mobile ? '60vw' : '25vw'">
+    <v-hover>
+      <template #default="{ isHovering, props }">
+        <div v-bind="props" class="minimized-video-container" />
+        <v-overlay
+          :model-value="isHovering"
+          v-bind="props"
+          contained
+          eager
+          scrim
+          height="100%"
+          width="100%">
+          <div class="d-flex flex-column">
+            <div class="d-flex flex-row">
+              <v-btn icon @click="playerElement.toggleMinimize">
+                <v-icon>
+                  <i-mdi-arrow-expand-all />
+                </v-icon>
+              </v-btn>
+              <v-spacer />
+              <v-btn icon @click="playbackManager.stop">
+                <v-icon>
+                  <i-mdi-close />
+                </v-icon>
+              </v-btn>
+            </div>
+            <div
+              class="absolute-cover pointer-events-none d-flex flex-row justify-center align-center">
+              <v-btn
+                class="pointer-events-all"
+                icon
+                size="large"
+                @click="playbackManager.setPreviousTrack">
+                <v-icon size="32">
+                  <i-mdi-skip-previous />
+                </v-icon>
+              </v-btn>
+              <v-btn
+                class="pointer-events-all"
+                icon
+                size="x-large"
+                @click="playbackManager.playPause">
+                <v-icon size="48">
+                  <i-mdi-play v-if="playbackManager.isPaused" />
+                  <i-mdi-pause v-else />
+                </v-icon>
+              </v-btn>
+              <v-btn
+                class="pointer-events-all"
+                icon
+                size="large"
+                @click="playbackManager.setNextTrack">
+                <v-icon size="32">
+                  <i-mdi-skip-next />
+                </v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </v-overlay>
+      </template>
+    </v-hover>
+  </v-overlay>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted } from 'vue';
+import { useMagicKeys, whenever } from '@vueuse/core';
+import { playbackManagerStore, playerElementStore } from '@/store';
+
+const playerElement = playerElementStore();
+const playbackManager = playbackManagerStore();
+
+const keys = useMagicKeys();
+
+whenever(keys.f, () => playerElement.toggleMinimize);
+
+onMounted(() => {
+  playerElement.isPiPMounted = true;
+});
+
+onUnmounted(() => {
+  playerElement.isPiPMounted = false;
+});
+</script>
+
+<style>
+.minimized-overlay {
+  position: absolute;
+  right: 2em;
+  bottom: 2em;
+}
+
+.minimized-video-container video {
+  max-width: 100%;
+  max-height: 100%;
+}
+</style>
diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 7a6ff77e618..017b3f0d5dd 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -1,31 +1,76 @@
 <template>
-  <template v-if="mediaElement">
-    <Teleport :to="teleportTarget">
+  <template v-if="mediaElementType">
+    <Teleport :to="teleportTarget" :disabled="!teleportTarget">
       <component
-        :is="mediaElement"
+        :is="mediaElementType"
+        v-show="mediaElementType === 'video' && teleportTarget"
         ref="mediaElementRef"
         :poster="posterUrl"
         autoplay
         crossorigin="anonymous"
         playsinline
-        :loop="playbackManager.isRepeatingOnce" />
+        :loop="playbackManager.isRepeatingOnce"
+        :class="{ stretched: playerElement.isStretched }"
+        @canplay="onCanPlay">
+        <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 } from '@/store';
-import { mediaElementRef } from '@/store/playbackManager';
+import Hls, { ErrorData, ErrorTypes, Events, HlsConfig } from 'hls.js';
+import { playbackManagerStore, playerElementStore } from '@/store';
 import { getImageInfo } from '@/utils/images';
 import { useSnackbar } from '@/composables';
+import { setNewMediaElementRef } from '@/store/playbackManager';
+
+/**
+ * Playback won't work in development until https://github.com/vuejs/core/pull/7593 is fixed
+ */
+const mediaElementRef = ref<HTMLMediaElement>();
+
+setNewMediaElementRef(mediaElementRef);
 
 const playbackManager = playbackManagerStore();
+const playerElement = playerElementStore();
+
 const { t } = useI18n();
 
-const mediaElement = computed<'audio' | 'video' | undefined>(() => {
+/**
+ * Safari iOS doesn't support hls.js, so we need to handle the cases where we don't need hls.js
+ */
+const isNativeHlsSupported = document
+  .createElement('video')
+  .canPlayType('application/vnd.apple.mpegurl');
+const isHlsSupported = Hls.isSupported();
+
+let hls: Hls | undefined;
+
+const defaultHlsConfig: Partial<HlsConfig> = {
+  testBandwidth: false
+};
+
+/**
+ * Destroy HLS instance after playback is done
+ */
+function destroyHls(): void {
+  if (hls) {
+    hls.destroy();
+    hls = undefined;
+  }
+}
+
+const mediaElementType = computed<'audio' | 'video' | undefined>(() => {
   if (playbackManager.currentlyPlayingMediaType === 'Audio') {
     return 'audio';
   } else if (playbackManager.currentlyPlayingMediaType === 'Video') {
@@ -36,32 +81,134 @@ const mediaElement = computed<'audio' | 'video' | 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<
+  '.fullscreen-video-container' | '.minimized-video-container' | undefined
+>(() => {
+  if (playbackManager.currentlyPlayingMediaType === 'Video') {
+    if (playerElement.isFullscreenMounted) {
+      return '.fullscreen-video-container';
+    } else if (playerElement.isPiPMounted) {
+      return '.minimized-video-container';
+    }
+  }
+});
 
 const posterUrl = computed<string>(() =>
-  !isNil(playbackManager.currentItem) && mediaElement.value === 'video'
+  !isNil(playbackManager.currentItem) &&
+  playbackManager.currentlyPlayingMediaType === 'Video'
     ? getImageInfo(playbackManager.currentItem, {
         preferBackdrop: true
       }).url || ''
     : ''
 );
 
+/**
+ * Called by the media element when the playback is ready
+ */
+async function onCanPlay(): Promise<void> {
+  if (playbackManager.currentlyPlayingMediaType === 'Video') {
+    await playerElement.applyCurrentSubtitle();
+  }
+}
+
+/**
+ * Callback for when HLS.js gets an error
+ */
+function onHlsEror(_event: Events.ERROR, data: ErrorData): void {
+  if (data.fatal && hls) {
+    switch (data.type) {
+      case ErrorTypes.NETWORK_ERROR: {
+        // try to recover network error
+        console.error('fatal network error encountered, try to recover');
+        hls.startLoad();
+        break;
+      }
+      case ErrorTypes.MEDIA_ERROR: {
+        console.error('fatal media error encountered, try to recover');
+        hls.recoverMediaError();
+        break;
+      }
+      default: {
+        /**
+         * Can't recover from unknown errors
+         */
+        useSnackbar(t('errors.cantPlayItem'), 'error');
+        playbackManager.stop();
+        break;
+      }
+    }
+  }
+}
+
 watch(
   () => playbackManager.currentSourceUrl,
-  () => {
-    if (
-      mediaElementRef.value &&
-      playbackManager.currentSourceUrl &&
-      playbackManager.currentMediaSource?.SupportsDirectPlay &&
-      playbackManager.currentlyPlayingMediaType === 'Audio'
-    ) {
-      mediaElementRef.value.src = playbackManager.currentSourceUrl;
-    } else {
+  async () => {
+    if (!playbackManager.currentSourceUrl) {
+      destroyHls();
+      playerElement.freeSsaTrack();
+
+      return;
+    }
+
+    /**
+     * 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') ||
+        ((isNativeHlsSupported ||
+          playbackManager.currentMediaSource?.SupportsDirectPlay) &&
+          playbackManager.currentlyPlayingMediaType === 'Video')
+      ) {
+        /**
+         * For the video case, Safari iOS doesn't support hls.js but supports native HLS
+         */
+        mediaElementRef.value.src = playbackManager.currentSourceUrl;
+        mediaElementRef.value.currentTime = playbackManager.currentTime;
+      } else if (
+        isHlsSupported &&
+        playbackManager.currentlyPlayingMediaType === 'Video'
+      ) {
+        if (!hls) {
+          hls = new Hls({
+            ...defaultHlsConfig,
+            startPosition: playbackManager.currentTime
+          });
+          hls.attachMedia(mediaElementRef.value);
+        } else {
+          hls.config.startPosition = playbackManager.currentTime;
+        }
+
+        hls.on(Events.ERROR, onHlsEror);
+
+        hls.loadSource(playbackManager.currentSourceUrl);
+      } else {
+        throw new Error('No playable case');
+      }
+    } catch {
       useSnackbar(t('errors.cantPlayItem'), 'error');
       playbackManager.stop();
     }
   }
 );
+
+watch(
+  () => [
+    playbackManager.currentSubtitleStreamIndex,
+    playerElement.isFullscreenMounted,
+    playerElement.isPiPMounted
+  ],
+  (newVal) => {
+    if (newVal[1] || newVal[2]) {
+      playerElement.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..cf78abf84c0
--- /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/layouts/default.vue b/frontend/src/layouts/default.vue
index 28d13b48039..73861fa03cc 100644
--- a/frontend/src/layouts/default.vue
+++ b/frontend/src/layouts/default.vue
@@ -7,17 +7,29 @@
     </div>
   </v-main>
   <audio-controls />
+  <pi-p-video-player
+    v-if="
+      playbackManager.currentlyPlayingMediaType === 'Video' &&
+      playerElement.isMinimized
+    " />
 </template>
 
 <script setup lang="ts">
 import { ref, watch, provide } from 'vue';
 import { useDisplay } from 'vuetify';
-import { userLibrariesStore } from '@/store';
+import {
+  playbackManagerStore,
+  playerElementStore,
+  userLibrariesStore
+} from '@/store';
 
 const display = useDisplay();
 const userLibraries = userLibrariesStore();
 const navDrawer = ref(!display.mobile.value);
 
+const playbackManager = playbackManagerStore();
+const playerElement = playerElementStore();
+
 /**
  * We block the navigation to the layout at login to improve UX, so content doesn't pop up or jumps while rendering the page.
  * The data fetched at logon is used for the entire lifecycle of the user session. Changing layouts
diff --git a/frontend/src/pages/playback/video/index.vue b/frontend/src/pages/playback/video/index.vue
index 13b0cd551b9..89331f5fc67 100644
--- a/frontend/src/pages/playback/video/index.vue
+++ b/frontend/src/pages/playback/video/index.vue
@@ -1 +1,93 @@
-<!-- TODO: Implement here the full video OSD -->
+<template>
+  <v-main class="fill-height" :class="{ 'cursor-none': !osd }">
+    <div class="fullscreen-video-container fill-height" />
+    <osd-player
+      v-model="osd"
+      :is-fullscreen="fullscreen.isFullscreen.value"
+      @toggle-fullscreen="toggleFullscreen" />
+  </v-main>
+</template>
+
+<route lang="yaml">
+meta:
+  layout: fullpage
+  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, playerElementStore } from '@/store';
+import { mediaElementRef } from '@/store/playbackManager';
+
+const router = useRouter();
+const playbackManager = playbackManagerStore();
+const playerElement = playerElementStore();
+
+const osd = ref(true);
+
+let fullscreen = useFullscreen(document.body);
+
+/**
+ * Toggles the fullscreen view, based on browsers supporting it or not (basically iOS or the others)
+ */
+function toggleFullscreen(): void {
+  if (fullscreen.isSupported.value) {
+    fullscreen.toggle();
+  } else if (
+    !fullscreen.isSupported.value &&
+    // @ts-expect-error - Property 'webkitEnterFullScreen' does not exist on type 'HTMLMediaElement'
+    mediaElementRef.value?.webkitEnterFullScreen
+  ) {
+    /**
+     * Use case for iOS where the fullscreen methods on non <video> elements aren't supported
+     */
+    // TODO - if entering FS this way, SSA subs won't display. So we should trigger a new encode
+    // @ts-expect-error - Property 'webkitEnterFullScreen' does not exist on type 'HTMLMediaElement'
+    mediaElementRef.value?.webkitEnterFullScreen();
+  }
+}
+
+if (!playbackManager.currentItem) {
+  router.replace('/');
+}
+
+onBeforeUnmount(() => {
+  if (fullscreen.isFullscreen.value) {
+    fullscreen.exit();
+  }
+
+  if (!playerElement.isMinimized) {
+    playbackManager.stop();
+  }
+
+  playerElement.isFullscreenMounted = false;
+});
+
+onMounted(() => {
+  playerElement.isFullscreenMounted = true;
+});
+</script>
+
+<style>
+.fullscreen-video-container video {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  max-width: 100%;
+  max-height: 100%;
+}
+
+.fullscreen-video-container video.stretched {
+  width: 100%;
+  height: 100%;
+}
+</style>
+
+<style scoped>
+.fullscreen-video-container {
+  background: black;
+}
+</style>
diff --git a/frontend/src/store/index.ts b/frontend/src/store/index.ts
index 82f968461f6..bc5a0608c0d 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 playerElement from './playerElement';
 
 /**
  * Get global instance of clientSettings store
@@ -39,6 +40,13 @@ export function playbackManagerStore(): typeof playbackManager {
   return playbackManager;
 }
 
+/**
+ * Get global instance of playerElement store
+ */
+export function playerElementStore(): typeof playerElement {
+  return playerElement;
+}
+
 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 dfb11169bb2..0a47c4fd1db 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, Ref, ref, watch } from 'vue';
 import { shuffle, isNil, cloneDeep } from 'lodash-es';
 import {
   BaseItemDto,
@@ -9,7 +9,8 @@ import {
   SubtitleDeliveryMethod,
   MediaStream,
   BaseItemKind,
-  PlaybackInfoResponse
+  PlaybackInfoResponse,
+  MediaStreamType
 } from '@jellyfin/sdk/lib/generated-client';
 import { getItemsApi } from '@jellyfin/sdk/lib/utils/api/items-api';
 import { getTvShowsApi } from '@jellyfin/sdk/lib/utils/api/tv-shows-api';
@@ -17,11 +18,25 @@ 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';
 
+export let mediaElementRef = ref<HTMLMediaElement>();
+export let mediaControls = useMediaControls(mediaElementRef);
+
+/**
+ * Temporary function to set new media element ref until https://github.com/vuejs/core/pull/7593 is fixed
+ */
+export function setNewMediaElementRef(
+  newMediaElementRef: Ref<HTMLMediaElement | undefined>
+): void {
+  // eslint-disable-next-line vue/no-ref-as-operand
+  mediaElementRef = newMediaElementRef;
+  mediaControls = useMediaControls(mediaElementRef);
+}
+
 /**
  * == INTERFACES ==
  */
@@ -56,6 +71,11 @@ export interface PlaybackTrack {
   codec?: string;
 }
 
+export interface PlaybackExternalTrack extends PlaybackTrack {
+  src: string;
+  codec: string;
+}
+
 interface PlaybackManagerState {
   status: PlaybackStatus;
   currentSourceUrl: string | undefined;
@@ -111,9 +131,7 @@ const defaultState: PlaybackManagerState = {
   playbackInitMode: InitMode.Unknown
 };
 
-export const mediaElementRef = ref<HTMLMediaElement>();
 const state = reactive<PlaybackManagerState>(cloneDeep(defaultState));
-const mediaControls = useMediaControls(mediaElementRef);
 const reactiveDate = useNow();
 /**
  * Previously, we created a new MediaMetadata every time the item changed. However,
@@ -266,15 +284,15 @@ class PlaybackManagerStore {
       }))
         .filter(
           (sub) =>
-            (sub.Type === 'Subtitle' &&
-              sub.DeliveryMethod === SubtitleDeliveryMethod.Encode) ||
-            sub.DeliveryMethod === SubtitleDeliveryMethod.External
+            sub.Type === MediaStreamType.Subtitle &&
+            (sub.DeliveryMethod === SubtitleDeliveryMethod.Encode ||
+              sub.DeliveryMethod === SubtitleDeliveryMethod.External)
         )
         .map((sub) => ({
           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,
@@ -284,11 +302,30 @@ 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 is PlaybackExternalTrack =>
+          !!sub.codec && sub.codec !== 'ass' && sub.codec !== 'ssa' && !!sub.src
+      ) ?? []
+    );
+  }
 
+  public get currentItemAssParsedSubtitleTracks(): PlaybackExternalTrack[] {
     return (
-      subs?.filter((sub) => sub.codec === 'ass' || sub.codec === 'ssa') || []
+      this.currentItemParsedSubtitleTracks?.filter(
+        (sub): sub is PlaybackExternalTrack =>
+          !!sub.codec &&
+          (sub.codec === 'ass' || sub.codec === 'ssa') &&
+          !!sub.src
+      ) ?? []
     );
   }
 
@@ -297,9 +334,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
+      );
     }
   }
 
@@ -308,9 +347,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
+      );
     }
   }
 
@@ -319,9 +360,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
+      );
     }
   }
 
@@ -809,7 +852,7 @@ class PlaybackManagerStore {
           !isNil(this.currentItem.Id) &&
           !isNil(remote.auth.currentUser)
         ) {
-          await this._reportPlaybackStopped(this.currentItem.Id);
+          this._reportPlaybackStopped(this.currentItem.Id);
         }
       } catch {
       } finally {
@@ -903,7 +946,7 @@ class PlaybackManagerStore {
           userId: remote.auth.currentUserId,
           autoOpenLiveStream: true,
           playbackInfoDto: { DeviceProfile: playbackProfile },
-          mediaSourceId: undefined,
+          mediaSourceId: item.Id,
           audioStreamIndex,
           subtitleStreamIndex
         })
@@ -1056,6 +1099,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,
@@ -1094,25 +1157,33 @@ class PlaybackManagerStore {
      */
     watch(
       () => this.currentItemIndex,
-      async () => {
-        const playbackInfo = await this.getItemPlaybackInfo();
+      async (newIndex, oldIndex) => {
+        await this.fetchCurrentMediaSource();
 
-        if (playbackInfo) {
-          const mediaSource = playbackInfo.MediaSources?.[0];
+        const router = useRouter();
 
-          if (!mediaSource) {
-            const { t } = usei18n();
+        if (newIndex && !state.currentSourceUrl) {
+          const { t } = usei18n();
 
-            useSnackbar(t('errors.cantPlayItem'), 'error');
-          } else {
-            state.playSessionId = playbackInfo?.PlaySessionId || '';
-            state.currentMediaSource = mediaSource;
-            state.currentSourceUrl = this.getItemPlaybackUrl();
-          }
+          useSnackbar(t('errors.cantPlayItem'), 'error');
+          this.stop();
+        } else 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);
         }
@@ -1126,6 +1197,38 @@ 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 is the case when you go from or to a situation where subs are burnt in.
+           * In that case, we always need to fetch a new media source.
+           */
+          this.fetchCurrentMediaSource();
+        }
+      }
+    );
+
     watch(
       () => this._pendingProgressReport,
       async () => {
diff --git a/frontend/src/store/playerElement.ts b/frontend/src/store/playerElement.ts
new file mode 100644
index 00000000000..592e7fff7ea
--- /dev/null
+++ b/frontend/src/store/playerElement.ts
@@ -0,0 +1,168 @@
+import { cloneDeep } from 'lodash-es';
+import { nextTick, reactive } from 'vue';
+// @ts-expect-error - No types on libass-wasm
+import SubtitlesOctopus from '@jellyfin/libass-wasm';
+import subtitlesOctopusWorkerUrl from '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.js?url';
+import { mediaElementRef, playbackManagerStore } from '@/store';
+import { useRouter } from '@/composables';
+
+const playbackManager = playbackManagerStore();
+let subtitlesOctopus: SubtitlesOctopus | undefined;
+
+/**
+ * == INTERFACES ==
+ */
+interface PlayerElementState {
+  isFullscreenMounted: boolean;
+  isPiPMounted: boolean;
+  isStretched: boolean;
+}
+
+/**
+ * == STATE VARIABLES ==
+ */
+const defaultState: PlayerElementState = {
+  isFullscreenMounted: false,
+  isPiPMounted: false,
+  isStretched: true
+};
+
+const state = reactive<PlayerElementState>(cloneDeep(defaultState));
+
+/**
+ * == CLASS CONSTRUCTOR ==
+ */
+class PlayerElementStore {
+  /**
+   * == GETTERS ==
+   */
+  public get isFullscreenMounted(): boolean {
+    return state.isFullscreenMounted;
+  }
+
+  public set isFullscreenMounted(newIsMounted: boolean) {
+    state.isFullscreenMounted = newIsMounted;
+  }
+
+  public get isPiPMounted(): boolean {
+    return state.isPiPMounted;
+  }
+
+  public set isPiPMounted(newIsPipMounted: boolean) {
+    state.isPiPMounted = newIsPipMounted;
+  }
+
+  public get isStretched(): boolean {
+    return state.isStretched;
+  }
+
+  public set isStretched(newisStretched: boolean) {
+    state.isStretched = newisStretched;
+  }
+
+  public get isMinimized(): boolean {
+    return useRouter().currentRoute.value.fullPath !== '/playback/video';
+  }
+
+  /**
+   * == ACTIONS ==
+   */
+  public toggleMinimize = (): void => {
+    /**
+     * Destroys SSO before chaning view cause the canvas needs to be destroyed to be recreated in the other view
+     */
+    playerElement.freeSsaTrack();
+
+    const router = useRouter();
+
+    if (this.isMinimized) {
+      router.push('/playback/video');
+    } else {
+      router.replace(
+        typeof router.options.history.state.back === 'string'
+          ? router.options.history.state.back
+          : '/'
+      );
+    }
+  };
+
+  private _setSsaTrack = async (trackSrc: string): Promise<void> => {
+    this.freeSsaTrack();
+
+    if (!subtitlesOctopus) {
+      subtitlesOctopus = new SubtitlesOctopus({
+        video: mediaElementRef.value,
+        subUrl: trackSrc,
+        workerUrl: subtitlesOctopusWorkerUrl,
+        prescaleFactor: 0.5,
+        renderAhead: 90
+      });
+    } else {
+      subtitlesOctopus.setTrackByUrl(trackSrc);
+    }
+  };
+
+  public freeSsaTrack = (): void => {
+    if (subtitlesOctopus) {
+      subtitlesOctopus.dispose();
+      subtitlesOctopus = undefined;
+    }
+  };
+
+  /**
+   * Applies the current subtitle from the playbackManager store
+   *
+   * It first disables all the VTT and SSA subtitles
+   * It then find the potential index of the applied VTT sub
+   * Or the PlaybackExternalTrack object of the potential SSA sub
+   *
+   * If external and VTT, it shows the correct one
+   * If external and SSA, it loads it in SO
+   *
+   * If embedded, a new transcode is automatically fetched from the playbackManager watchers.
+   */
+  public applyCurrentSubtitle = async (): Promise<void> => {
+    await nextTick();
+
+    if (mediaElementRef.value) {
+      /**
+       * Disabling VTT and SSA subs at first
+       */
+      for (const textTrack of mediaElementRef.value.textTracks) {
+        if (textTrack.mode !== 'disabled') {
+          textTrack.mode = 'disabled';
+        }
+      }
+
+      playerElement.freeSsaTrack();
+
+      /**
+       * 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
+         */
+        mediaElementRef.value.textTracks[vttIdx].mode = 'showing';
+      } else if (ass !== undefined && ass.src) {
+        /**
+         * If SSA, using Subtitle Opctopus
+         */
+        playerElement._setSsaTrack(ass.src);
+      }
+    }
+  };
+}
+
+const playerElement = new PlayerElementStore();
+
+export default playerElement;
diff --git a/frontend/vite.config.ts b/frontend/vite.config.ts
index d2544b8bc9b..06723f82311 100644
--- a/frontend/vite.config.ts
+++ b/frontend/vite.config.ts
@@ -6,6 +6,7 @@ import { defineConfig, UserConfig } from 'vite';
 import vue from '@vitejs/plugin-vue';
 import Pages from 'vite-plugin-pages';
 import Layouts from 'vite-plugin-vue-layouts';
+import { viteStaticCopy } from 'vite-plugin-static-copy';
 import Icons from 'unplugin-icons/vite';
 import IconsResolver from 'unplugin-icons/resolver';
 import Components from 'unplugin-vue-components/vite';
@@ -82,6 +83,22 @@ export default defineConfig(async ({ mode }): Promise<UserConfig> => {
           dirname(fileURLToPath(import.meta.url)),
           './locales/**'
         )
+      }),
+      viteStaticCopy({
+        targets: [
+          {
+            src: resolve(
+              '../node_modules/@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.data'
+            ),
+            dest: 'assets/'
+          },
+          {
+            src: resolve(
+              '../node_modules/@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.wasm'
+            ),
+            dest: 'assets/'
+          }
+        ]
       })
     ],
     build: {
diff --git a/package-lock.json b/package-lock.json
index b4a2a70f058..b3f1952d7fd 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,15 +32,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",
@@ -80,6 +81,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",
@@ -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",
@@ -4165,32 +4172,6 @@
       "resolved": "https://registry.npmjs.org/@vue/shared/-/shared-3.2.39.tgz",
       "integrity": "sha512-D3dl2ZB9qE6mTuWPk9RlhDeP1dgNRUKC3NJxji74A4yL8M2MwlhLKUC/49WHjrNzSPug58fWx/yFbaTzGAQSBw=="
     },
-    "node_modules/@vuetify/loader-shared": {
-      "version": "1.7.0",
-      "resolved": "https://registry.npmjs.org/@vuetify/loader-shared/-/loader-shared-1.7.0.tgz",
-      "integrity": "sha512-Db4K67wMhduDsbvdRBYkrYuomti+j0E/1vlz1lnDng5F9LYYBcXa60qypIazVGI6GX/CuY1vshN6XGtGQI4FKg==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "find-cache-dir": "^3.3.2",
-        "upath": "^2.0.1"
-      },
-      "peerDependencies": {
-        "vue": "^3.0.0",
-        "vuetify": "^3.0.0-beta.4"
-      }
-    },
-    "node_modules/@vuetify/loader-shared/node_modules/upath": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
-      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4",
-        "yarn": "*"
-      }
-    },
     "node_modules/@vueuse/components": {
       "version": "9.12.0",
       "resolved": "https://registry.npmjs.org/@vueuse/components/-/components-9.12.0.tgz",
@@ -6039,13 +6020,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/commondir": {
-      "version": "1.0.1",
-      "resolved": "https://registry.npmjs.org/commondir/-/commondir-1.0.1.tgz",
-      "integrity": "sha512-W9pAhw0ja1Edb5GVdIF1mjZw/ASI0AlShXM83UUGe2DVr5TdAPEA1OA8m/g8zWp9x6On7gqufY+FatDbC3MDQg==",
-      "optional": true,
-      "peer": true
-    },
     "node_modules/concat-map": {
       "version": "0.0.1",
       "resolved": "https://registry.npmjs.org/concat-map/-/concat-map-0.0.1.tgz",
@@ -6255,7 +6229,7 @@
       "version": "4.3.4",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
       "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "ms": "2.1.2"
       },
@@ -7004,7 +6978,7 @@
       "version": "0.15.13",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.15.13.tgz",
       "integrity": "sha512-Cu3SC84oyzzhrK/YyN4iEVy2jZu5t2fz66HEOShHURcjSkOSAVL8C/gfUT+lDJxkVHpg8GZ10DD0rMHRPqMFaQ==",
-      "devOptional": true,
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -8853,40 +8827,6 @@
         "node": ">=8"
       }
     },
-    "node_modules/find-cache-dir": {
-      "version": "3.3.2",
-      "resolved": "https://registry.npmjs.org/find-cache-dir/-/find-cache-dir-3.3.2.tgz",
-      "integrity": "sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "commondir": "^1.0.1",
-        "make-dir": "^3.0.2",
-        "pkg-dir": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
-      }
-    },
-    "node_modules/find-cache-dir/node_modules/make-dir": {
-      "version": "3.1.0",
-      "resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
-      "integrity": "sha512-g3FeP20LNwhALb/6Cz6Dd4F2ngze0jz7tbzrD2wAV+o9FeNHe4rL+yK2md0J/fiSf1sa1ADhXqi5+oVwOM/eGw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "semver": "^6.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -9136,7 +9076,7 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/function-bind/-/function-bind-1.1.1.tgz",
       "integrity": "sha512-yIovAzMX49sF8Yl58fSCWJ5svSLuaibPxXQJFLmBObTuCr0Mf1KiPopGM9NiFjiYBCbfaa2Fh6breQ6ANVTI0A==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/function.prototype.name": {
       "version": "1.1.5",
@@ -9497,7 +9437,7 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/has/-/has-1.0.3.tgz",
       "integrity": "sha512-f2dvO0VU6Oej7RkWJGrehjbzMAjFp5/VKPp5tTpWIV4JHHZK1/BxbFRtf/siA2SWTe09caDmVtYYzWEIbBS4zw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "function-bind": "^1.1.1"
       },
@@ -9621,6 +9561,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",
@@ -10083,7 +10028,7 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.10.0.tgz",
       "integrity": "sha512-Erxj2n/LDAZ7H8WNJXd9tw38GYM3dv8rk8Zcs+jJuxYTW7sozH+SS8NtrSjVL1/vpLvWi1hxy96IzjJ3EHTJJg==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "has": "^1.0.3"
       },
@@ -11466,7 +11411,7 @@
       "version": "2.1.2",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
       "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/muggle-string": {
       "version": "0.1.0",
@@ -12033,7 +11978,7 @@
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-2.2.0.tgz",
       "integrity": "sha512-R4nPAVTAU0B9D35/Gk3uJf/7XYbQcyohSKdvAxIRSNghFl4e71hVoGnBNQz9cWaXxO2I10KTC+3jMdvvoKw6dQ==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=6"
       }
@@ -12290,7 +12235,7 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
       "integrity": "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">=8"
       }
@@ -12317,7 +12262,7 @@
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
-      "devOptional": true
+      "dev": true
     },
     "node_modules/path-type": {
       "version": "4.0.0",
@@ -12427,75 +12372,6 @@
         "node": ">=4.0.0"
       }
     },
-    "node_modules/pkg-dir": {
-      "version": "4.2.0",
-      "resolved": "https://registry.npmjs.org/pkg-dir/-/pkg-dir-4.2.0.tgz",
-      "integrity": "sha512-HRDzbaKjC+AOWVXxAU/x54COGeIv9eb+6CkDSQoNTt4XyWoIJvuPsXizxu/Fr23EiekbtZwmh1IcIG/l/a10GQ==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "find-up": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/find-up": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/find-up/-/find-up-4.1.0.tgz",
-      "integrity": "sha512-PpOwAdQ/YlXQ2vj8a3h8IipDuYRi3wceVQQGYWxNINccq40Anw7BlsEXCMbt1Zt+OLA6Fq9suIpIWD0OsnISlw==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "locate-path": "^5.0.0",
-        "path-exists": "^4.0.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/locate-path": {
-      "version": "5.0.0",
-      "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-5.0.0.tgz",
-      "integrity": "sha512-t7hw9pI+WvuwNJXwk5zVHpyhIqzg2qTlklJOf0mVxGSbe3Fp2VieZcduNYjaLDoy6p9uGpQEGWG87WpMKlNq8g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-locate": "^4.1.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-limit": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/p-limit/-/p-limit-2.3.0.tgz",
-      "integrity": "sha512-//88mFWSJx8lxCzwdAABTJL2MyWB12+eIY7MDL2SqLmAkeKU9qxRvWuSyTjm3FUmpBEMuFfckAIqEaVGUDxb6w==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-try": "^2.0.0"
-      },
-      "engines": {
-        "node": ">=6"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
-    "node_modules/pkg-dir/node_modules/p-locate": {
-      "version": "4.1.0",
-      "resolved": "https://registry.npmjs.org/p-locate/-/p-locate-4.1.0.tgz",
-      "integrity": "sha512-R79ZZ/0wAxKGu3oYMlz8jy/kbhsNrS7SKZ7PxEHBgJ5+F2mtFW2fK2cOtBh1cHYkQsbzFV7I+EoRKe6Yt0oK7A==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "p-limit": "^2.2.0"
-      },
-      "engines": {
-        "node": ">=8"
-      }
-    },
     "node_modules/pkg-types": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.1.tgz",
@@ -13163,7 +13039,7 @@
       "version": "1.22.1",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.1.tgz",
       "integrity": "sha512-nBpuuYuY5jFsli/JIs1oldw6fOQCBioohqWZg/2hiaOybXOft4lonv85uDOKXdf8rhyK159cxU5cDcK/NKk8zw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "is-core-module": "^2.9.0",
         "path-parse": "^1.0.7",
@@ -13310,7 +13186,7 @@
       "version": "2.79.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.1.tgz",
       "integrity": "sha512-uKxbd0IhMZOhjAiD5oAFp7BqvkA4Dv47qpOCtaNvng4HBwdbWtdOh8f5nZNuk2rp51PMGk3bzfWu5oayNEuYnw==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -13456,17 +13332,6 @@
       "integrity": "sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw==",
       "dev": true
     },
-    "node_modules/screenfull": {
-      "version": "6.0.1",
-      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-6.0.1.tgz",
-      "integrity": "sha512-yzQW+j4zMUBQC51xxWaoDYjxOtl8Kn+xvue3p6v/fv2pIi1jH4AldgVLU8TBfFVgH2x3VXlf3+YiA/AYIPlaew==",
-      "engines": {
-        "node": "^14.13.1 || >=16.0.0"
-      },
-      "funding": {
-        "url": "https://github.com/sponsors/sindresorhus"
-      }
-    },
     "node_modules/scule": {
       "version": "0.3.2",
       "resolved": "https://registry.npmjs.org/scule/-/scule-0.3.2.tgz",
@@ -13496,7 +13361,7 @@
       "version": "6.3.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz",
       "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "semver": "bin/semver.js"
       }
@@ -14136,7 +14001,7 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
       "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
-      "devOptional": true,
+      "dev": true,
       "engines": {
         "node": ">= 0.4"
       },
@@ -15078,7 +14943,7 @@
       "version": "3.2.2",
       "resolved": "https://registry.npmjs.org/vite/-/vite-3.2.2.tgz",
       "integrity": "sha512-pLrhatFFOWO9kS19bQ658CnRYzv0WLbsPih6R+iFeEEhDOuYgYCX2rztUViMz/uy/V8cLCJvLFeiOK7RJEzHcw==",
-      "devOptional": true,
+      "dev": true,
       "dependencies": {
         "esbuild": "^0.15.9",
         "postcss": "^8.4.18",
@@ -15167,6 +15032,38 @@
         "workbox-window": "^6.5.4"
       }
     },
+    "node_modules/vite-plugin-static-copy": {
+      "version": "0.13.0",
+      "resolved": "https://registry.npmjs.org/vite-plugin-static-copy/-/vite-plugin-static-copy-0.13.0.tgz",
+      "integrity": "sha512-cln+fvKMgwNBjxQ59QVblmExZrc9gGEdRmfqcPOOGpxT5KInfpkGMvmK4L+kCAeHHSSGNU1bM7BA9PQgaAJc6g==",
+      "dev": true,
+      "dependencies": {
+        "chokidar": "^3.5.3",
+        "fast-glob": "^3.2.11",
+        "fs-extra": "^11.1.0",
+        "picocolors": "^1.0.0"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "vite": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "node_modules/vite-plugin-static-copy/node_modules/fs-extra": {
+      "version": "11.1.0",
+      "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-11.1.0.tgz",
+      "integrity": "sha512-0rcTq621PD5jM/e0a3EJoGC/1TC5ZBCERW82LQuwfGnCa1V8w7dpYH1yNu+SLb6E5dkeCBzKEyLGlFrnr+dUyw==",
+      "dev": true,
+      "dependencies": {
+        "graceful-fs": "^4.2.0",
+        "jsonfile": "^6.0.1",
+        "universalify": "^2.0.0"
+      },
+      "engines": {
+        "node": ">=14.14"
+      }
+    },
     "node_modules/vite-plugin-vue-layouts": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/vite-plugin-vue-layouts/-/vite-plugin-vue-layouts-0.7.0.tgz",
@@ -15183,36 +15080,6 @@
         "vue-router": "^3.5.1 || ^ 4.0.11"
       }
     },
-    "node_modules/vite-plugin-vuetify": {
-      "version": "1.0.0",
-      "resolved": "https://registry.npmjs.org/vite-plugin-vuetify/-/vite-plugin-vuetify-1.0.0.tgz",
-      "integrity": "sha512-30+W6H//wjOegKCha4wQ3IS+JyXDE6IayL5cK5S4IrM7WIceV/WitnxljbPZHER+Jyl3BGIuYV6nofjMOfRO1g==",
-      "optional": true,
-      "peer": true,
-      "dependencies": {
-        "@vuetify/loader-shared": "^1.7.0",
-        "debug": "^4.3.3",
-        "upath": "^2.0.1"
-      },
-      "engines": {
-        "node": ">=12"
-      },
-      "peerDependencies": {
-        "vite": "^2.7.0 || ^3.0.0",
-        "vuetify": "^3.0.0-beta.4"
-      }
-    },
-    "node_modules/vite-plugin-vuetify/node_modules/upath": {
-      "version": "2.0.1",
-      "resolved": "https://registry.npmjs.org/upath/-/upath-2.0.1.tgz",
-      "integrity": "sha512-1uEe95xksV1O0CYKXo8vQvN1JEbtJp7lb7C5U9HMsIp6IVwntkH/oNUzyVNQSd4S1sYk2FpSSW44FqMc8qee5w==",
-      "optional": true,
-      "peer": true,
-      "engines": {
-        "node": ">=4",
-        "yarn": "*"
-      }
-    },
     "node_modules/vscode-json-languageservice": {
       "version": "4.2.1",
       "resolved": "https://registry.npmjs.org/vscode-json-languageservice/-/vscode-json-languageservice-4.2.1.tgz",
@@ -15397,9 +15264,9 @@
       }
     },
     "node_modules/vuetify": {
-      "version": "3.1.2",
-      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.1.2.tgz",
-      "integrity": "sha512-vzxfVc1KlEmZ6tHjmrKCt25rKL6YkakbvQAZ0f/s03kHd0pjXKX4pcWuYgA5mZz4yrfZh/cRHvgGt+7A9CXOVg==",
+      "version": "3.1.6",
+      "resolved": "https://registry.npmjs.org/vuetify/-/vuetify-3.1.6.tgz",
+      "integrity": "sha512-4We27L5ksy8esNKfUPWPucEU+M7XJDO2o66zXL5qiBVbALwshcK2CAobLQMx+ALtkLENXAYNH3RzvfAYjTi3Aw==",
       "engines": {
         "node": "^12.20 || >=14.13"
       },

From 74730bc6c001656ac35bfa7ab7365c5a57dcda7e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Mon, 20 Feb 2023 15:55:22 +0100
Subject: [PATCH 5/8] refactor: better video player handling

---
 .../src/components/Playback/PlayerElement.vue | 141 ++++++++----------
 frontend/src/store/playbackManager.ts         |  18 +--
 frontend/src/store/playerElement.ts           |   7 +-
 3 files changed, 67 insertions(+), 99 deletions(-)

diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 017b3f0d5dd..3cbf9e83422 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -11,7 +11,7 @@
         playsinline
         :loop="playbackManager.isRepeatingOnce"
         :class="{ stretched: playerElement.isStretched }"
-        @canplay="onCanPlay">
+        @loadeddata="onLoadedData">
         <track
           v-for="sub in playbackManager.currentItemVttParsedSubtitleTracks"
           :key="`${playbackManager.currentSourceUrl}-${sub.srcIndex}`"
@@ -25,48 +25,42 @@
 </template>
 
 <script setup lang="ts">
-import { computed, watch, ref, nextTick } from 'vue';
+import { computed, watch, nextTick } from 'vue';
 import { isNil } from 'lodash-es';
 import { useI18n } from 'vue-i18n';
-import Hls, { ErrorData, ErrorTypes, Events, HlsConfig } from 'hls.js';
+import Hls, { ErrorData, ErrorTypes, Events } from 'hls.js';
 import { playbackManagerStore, playerElementStore } from '@/store';
 import { getImageInfo } from '@/utils/images';
 import { useSnackbar } from '@/composables';
-import { setNewMediaElementRef } from '@/store/playbackManager';
-
 /**
  * Playback won't work in development until https://github.com/vuejs/core/pull/7593 is fixed
  */
-const mediaElementRef = ref<HTMLMediaElement>();
-
-setNewMediaElementRef(mediaElementRef);
+import { mediaElementRef } from '@/store/playbackManager';
 
 const playbackManager = playbackManagerStore();
 const playerElement = playerElementStore();
 
 const { t } = useI18n();
-
 /**
  * Safari iOS doesn't support hls.js, so we need to handle the cases where we don't need hls.js
  */
 const isNativeHlsSupported = document
   .createElement('video')
   .canPlayType('application/vnd.apple.mpegurl');
-const isHlsSupported = Hls.isSupported();
-
-let hls: Hls | undefined;
-
-const defaultHlsConfig: Partial<HlsConfig> = {
-  testBandwidth: false
-};
+const hls =
+  Hls.isSupported() && !isNativeHlsSupported
+    ? new Hls({
+        testBandwidth: false
+      })
+    : undefined;
 
 /**
- * Destroy HLS instance after playback is done
+ * Detaches HLS instance after playback is done
  */
-function destroyHls(): void {
+function detachHls(): void {
   if (hls) {
-    hls.destroy();
-    hls = undefined;
+    hls.detachMedia();
+    hls.off(Events.ERROR, onHlsEror);
   }
 }
 
@@ -79,7 +73,8 @@ const mediaElementType = computed<'audio' | 'video' | 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
+ * 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<
   '.fullscreen-video-container' | '.minimized-video-container' | undefined
@@ -105,8 +100,12 @@ const posterUrl = computed<string>(() =>
 /**
  * Called by the media element when the playback is ready
  */
-async function onCanPlay(): Promise<void> {
+async function onLoadedData(): Promise<void> {
   if (playbackManager.currentlyPlayingMediaType === 'Video') {
+    if (mediaElementRef.value) {
+      mediaElementRef.value.currentTime = playbackManager.currentTime;
+    }
+
     await playerElement.applyCurrentSubtitle();
   }
 }
@@ -140,65 +139,6 @@ function onHlsEror(_event: Events.ERROR, data: ErrorData): void {
   }
 }
 
-watch(
-  () => playbackManager.currentSourceUrl,
-  async () => {
-    if (!playbackManager.currentSourceUrl) {
-      destroyHls();
-      playerElement.freeSsaTrack();
-
-      return;
-    }
-
-    /**
-     * 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') ||
-        ((isNativeHlsSupported ||
-          playbackManager.currentMediaSource?.SupportsDirectPlay) &&
-          playbackManager.currentlyPlayingMediaType === 'Video')
-      ) {
-        /**
-         * For the video case, Safari iOS doesn't support hls.js but supports native HLS
-         */
-        mediaElementRef.value.src = playbackManager.currentSourceUrl;
-        mediaElementRef.value.currentTime = playbackManager.currentTime;
-      } else if (
-        isHlsSupported &&
-        playbackManager.currentlyPlayingMediaType === 'Video'
-      ) {
-        if (!hls) {
-          hls = new Hls({
-            ...defaultHlsConfig,
-            startPosition: playbackManager.currentTime
-          });
-          hls.attachMedia(mediaElementRef.value);
-        } else {
-          hls.config.startPosition = playbackManager.currentTime;
-        }
-
-        hls.on(Events.ERROR, onHlsEror);
-
-        hls.loadSource(playbackManager.currentSourceUrl);
-      } else {
-        throw new Error('No playable case');
-      }
-    } catch {
-      useSnackbar(t('errors.cantPlayItem'), 'error');
-      playbackManager.stop();
-    }
-  }
-);
-
 watch(
   () => [
     playbackManager.currentSubtitleStreamIndex,
@@ -211,4 +151,43 @@ watch(
     }
   }
 );
+
+watch(mediaElementRef, async () => {
+  await nextTick();
+  detachHls();
+
+  if (mediaElementRef.value && mediaElementType.value === 'video' && hls) {
+    hls.attachMedia(mediaElementRef.value);
+    hls.on(Events.ERROR, onHlsEror);
+  }
+});
+
+watch(
+  () => playbackManager.currentSourceUrl,
+  (newUrl) => {
+    if (hls) {
+      hls.stopLoad();
+    }
+
+    if (!newUrl) {
+      return;
+    }
+
+    if (
+      mediaElementRef.value &&
+      (playbackManager.currentMediaSource?.SupportsDirectPlay ||
+        isNativeHlsSupported)
+    ) {
+      /**
+       * For the video case, Safari iOS doesn't support hls.js but supports native HLS
+       */
+      mediaElementRef.value.src = newUrl;
+    } else if (hls && playbackManager.currentlyPlayingMediaType === 'Video') {
+      /**
+       * We need to check if HLS.js can handle transcoded audio to remove the video check
+       */
+      hls.loadSource(newUrl);
+    }
+  }
+);
 </script>
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 0a47c4fd1db..3c409859cd1 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -1,4 +1,4 @@
-import { reactive, Ref, ref, watch } from 'vue';
+import { reactive, ref, watch } from 'vue';
 import { shuffle, isNil, cloneDeep } from 'lodash-es';
 import {
   BaseItemDto,
@@ -23,20 +23,6 @@ import { getImageInfo } from '@/utils/images';
 import { msToTicks } from '@/utils/time';
 import playbackProfile from '@/utils/playback-profiles';
 
-export let mediaElementRef = ref<HTMLMediaElement>();
-export let mediaControls = useMediaControls(mediaElementRef);
-
-/**
- * Temporary function to set new media element ref until https://github.com/vuejs/core/pull/7593 is fixed
- */
-export function setNewMediaElementRef(
-  newMediaElementRef: Ref<HTMLMediaElement | undefined>
-): void {
-  // eslint-disable-next-line vue/no-ref-as-operand
-  mediaElementRef = newMediaElementRef;
-  mediaControls = useMediaControls(mediaElementRef);
-}
-
 /**
  * == INTERFACES ==
  */
@@ -133,6 +119,8 @@ const defaultState: PlaybackManagerState = {
 
 const state = reactive<PlaybackManagerState>(cloneDeep(defaultState));
 const reactiveDate = useNow();
+export const mediaElementRef = ref<HTMLMediaElement>();
+export const mediaControls = useMediaControls(mediaElementRef);
 /**
  * Previously, we created a new MediaMetadata every time the item changed. However,
  * that made the MediaSession controls disappear for a second. Keeping the metadata
diff --git a/frontend/src/store/playerElement.ts b/frontend/src/store/playerElement.ts
index 592e7fff7ea..0f306813468 100644
--- a/frontend/src/store/playerElement.ts
+++ b/frontend/src/store/playerElement.ts
@@ -87,8 +87,6 @@ class PlayerElementStore {
   };
 
   private _setSsaTrack = async (trackSrc: string): Promise<void> => {
-    this.freeSsaTrack();
-
     if (!subtitlesOctopus) {
       subtitlesOctopus = new SubtitlesOctopus({
         video: mediaElementRef.value,
@@ -104,7 +102,10 @@ class PlayerElementStore {
 
   public freeSsaTrack = (): void => {
     if (subtitlesOctopus) {
-      subtitlesOctopus.dispose();
+      try {
+        subtitlesOctopus.dispose();
+      } catch {}
+
       subtitlesOctopus = undefined;
     }
   };

From 8dee133bbb4ec6738b9275e8f55e68b6eebca269 Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Thu, 23 Feb 2023 22:07:40 +0100
Subject: [PATCH 6/8] style: removing unused CSS classes

---
 .../src/components/Playback/OsdPlayer.vue     | 62 +------------------
 1 file changed, 3 insertions(+), 59 deletions(-)

diff --git a/frontend/src/components/Playback/OsdPlayer.vue b/frontend/src/components/Playback/OsdPlayer.vue
index e3743ff6fc1..9d3ddd84453 100644
--- a/frontend/src/components/Playback/OsdPlayer.vue
+++ b/frontend/src/components/Playback/OsdPlayer.vue
@@ -64,7 +64,7 @@
               </v-btn>
               <v-btn
                 icon
-                class="mx-1 active-button"
+                class="mx-1 active"
                 @click="playbackManager.playPause">
                 <v-icon size="large">
                   <i-mdi-play-circle-outline v-if="playbackManager.isPaused" />
@@ -87,7 +87,7 @@
                 v-model="playbackSettingsButtonOpened" />
               <v-btn
                 v-if="mediaControls.supportsPictureInPicture"
-                class="align-self-center active-button"
+                class="align-self-center"
                 icon
                 @click="mediaControls.togglePictureInPicture">
                 <v-icon>
@@ -95,7 +95,7 @@
                 </v-icon>
               </v-btn>
               <tooltip-button
-                class="align-self-center active-button"
+                class="align-self-center"
                 :tooltip="{ text: $t('fullScreen'), location: 'top' }"
                 :btn="{ icon: true }"
                 @click="$emit('toggleFullscreen')">
@@ -192,58 +192,11 @@ useEventListener(document, 'mousemove', handleMouseMove);
 useEventListener(document, 'touchend', handleMouseMove);
 </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%;
 }
@@ -318,13 +271,4 @@ useEventListener(document, 'touchend', handleMouseMove);
   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>

From ae1e011d48e7790b6a17b72c06694098faa8c94a Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Thu, 23 Feb 2023 23:25:32 +0100
Subject: [PATCH 7/8] refactor: better video player routing

---
 frontend/locales/en-US.json                   |  4 +++
 .../src/components/Playback/OsdPlayer.vue     |  2 +-
 .../components/Playback/PiPVideoPlayer.vue    |  4 +--
 .../src/components/Playback/PlayerElement.vue | 25 +++++++++++++++++++
 frontend/src/layouts/default.vue              |  2 +-
 frontend/src/pages/playback/video/index.vue   |  8 +-----
 frontend/src/store/playbackManager.ts         | 21 ++--------------
 frontend/src/store/playerElement.ts           |  8 +++---
 8 files changed, 40 insertions(+), 34 deletions(-)

diff --git a/frontend/locales/en-US.json b/frontend/locales/en-US.json
index b92e52bee0b..8570208e901 100644
--- a/frontend/locales/en-US.json
+++ b/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.",
diff --git a/frontend/src/components/Playback/OsdPlayer.vue b/frontend/src/components/Playback/OsdPlayer.vue
index 9d3ddd84453..45d8ca64d09 100644
--- a/frontend/src/components/Playback/OsdPlayer.vue
+++ b/frontend/src/components/Playback/OsdPlayer.vue
@@ -13,7 +13,7 @@
             <v-btn :icon="IMdiClose" @click="playbackManager.stop" />
             <v-btn
               :icon="IMdiChevronDown"
-              @click="playerElement.toggleMinimize" />
+              @click="playerElement.toggleFullscreenVideoPlayer" />
           </div>
           <div class="d-flex ml-auto">
             <cast-button />
diff --git a/frontend/src/components/Playback/PiPVideoPlayer.vue b/frontend/src/components/Playback/PiPVideoPlayer.vue
index 481bdf0a0db..2a2b0af9ffc 100644
--- a/frontend/src/components/Playback/PiPVideoPlayer.vue
+++ b/frontend/src/components/Playback/PiPVideoPlayer.vue
@@ -20,7 +20,7 @@
           width="100%">
           <div class="d-flex flex-column">
             <div class="d-flex flex-row">
-              <v-btn icon @click="playerElement.toggleMinimize">
+              <v-btn icon @click="playerElement.toggleFullscreenVideoPlayer">
                 <v-icon>
                   <i-mdi-arrow-expand-all />
                 </v-icon>
@@ -80,7 +80,7 @@ const playbackManager = playbackManagerStore();
 
 const keys = useMagicKeys();
 
-whenever(keys.f, () => playerElement.toggleMinimize);
+whenever(keys.f, () => playerElement.toggleFullscreenVideoPlayer);
 
 onMounted(() => {
   playerElement.isPiPMounted = true;
diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 3cbf9e83422..7d4fea26ede 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -26,6 +26,7 @@
 
 <script setup lang="ts">
 import { computed, watch, nextTick } from 'vue';
+import { useRouter } from 'vue-router';
 import { isNil } from 'lodash-es';
 import { useI18n } from 'vue-i18n';
 import Hls, { ErrorData, ErrorTypes, Events } from 'hls.js';
@@ -41,6 +42,7 @@ const playbackManager = playbackManagerStore();
 const playerElement = playerElementStore();
 
 const { t } = useI18n();
+const router = useRouter();
 /**
  * Safari iOS doesn't support hls.js, so we need to handle the cases where we don't need hls.js
  */
@@ -118,11 +120,13 @@ function onHlsEror(_event: Events.ERROR, data: ErrorData): void {
     switch (data.type) {
       case ErrorTypes.NETWORK_ERROR: {
         // try to recover network error
+        useSnackbar(t('errors.playback.networkError'), 'error');
         console.error('fatal network error encountered, try to recover');
         hls.startLoad();
         break;
       }
       case ErrorTypes.MEDIA_ERROR: {
+        useSnackbar(t('errors.playback.mediaError'), 'error');
         console.error('fatal media error encountered, try to recover');
         hls.recoverMediaError();
         break;
@@ -152,6 +156,27 @@ watch(
   }
 );
 
+watch(
+  () => ({ currentItem: playbackManager.currentItem }),
+  (newValue, oldValue) => {
+    if (
+      (!newValue.currentItem &&
+        router.currentRoute.value.fullPath === '/playback/video') ||
+      (newValue.currentItem &&
+        !oldValue?.currentItem &&
+        playbackManager.currentlyPlayingMediaType === 'Video')
+    ) {
+      /**
+       * If no item is present, we either manually loaded this or playback is stopped
+       * OR
+       * If there was no item and there's now a video, default to going FS
+       */
+      playerElement.toggleFullscreenVideoPlayer();
+    }
+  },
+  { immediate: true }
+);
+
 watch(mediaElementRef, async () => {
   await nextTick();
   detachHls();
diff --git a/frontend/src/layouts/default.vue b/frontend/src/layouts/default.vue
index 73861fa03cc..2eb248f344b 100644
--- a/frontend/src/layouts/default.vue
+++ b/frontend/src/layouts/default.vue
@@ -10,7 +10,7 @@
   <pi-p-video-player
     v-if="
       playbackManager.currentlyPlayingMediaType === 'Video' &&
-      playerElement.isMinimized
+      !playerElement.isFullscreenVideoPlayer
     " />
 </template>
 
diff --git a/frontend/src/pages/playback/video/index.vue b/frontend/src/pages/playback/video/index.vue
index 89331f5fc67..d621f845257 100644
--- a/frontend/src/pages/playback/video/index.vue
+++ b/frontend/src/pages/playback/video/index.vue
@@ -16,12 +16,10 @@ meta:
 
 <script lang="ts" setup>
 import { onBeforeUnmount, onMounted, ref } from 'vue';
-import { useRouter } from 'vue-router';
 import { useFullscreen } from '@vueuse/core';
 import { playbackManagerStore, playerElementStore } from '@/store';
 import { mediaElementRef } from '@/store/playbackManager';
 
-const router = useRouter();
 const playbackManager = playbackManagerStore();
 const playerElement = playerElementStore();
 
@@ -49,16 +47,12 @@ function toggleFullscreen(): void {
   }
 }
 
-if (!playbackManager.currentItem) {
-  router.replace('/');
-}
-
 onBeforeUnmount(() => {
   if (fullscreen.isFullscreen.value) {
     fullscreen.exit();
   }
 
-  if (!playerElement.isMinimized) {
+  if (playerElement.isFullscreenVideoPlayer) {
     playbackManager.stop();
   }
 
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 3c409859cd1..28fde644d61 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -18,7 +18,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, useRouter, useSnackbar } from '@/composables';
+import { usei18n, useRemote, useSnackbar } from '@/composables';
 import { getImageInfo } from '@/utils/images';
 import { msToTicks } from '@/utils/time';
 import playbackProfile from '@/utils/playback-profiles';
@@ -1145,31 +1145,14 @@ class PlaybackManagerStore {
      */
     watch(
       () => this.currentItemIndex,
-      async (newIndex, oldIndex) => {
+      async (newIndex) => {
         await this.fetchCurrentMediaSource();
 
-        const router = useRouter();
-
         if (newIndex && !state.currentSourceUrl) {
           const { t } = usei18n();
 
           useSnackbar(t('errors.cantPlayItem'), 'error');
           this.stop();
-        } else 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
-              : '/'
-          );
         }
 
         if (this.previousItem?.Id) {
diff --git a/frontend/src/store/playerElement.ts b/frontend/src/store/playerElement.ts
index 0f306813468..abf6ca5e5bd 100644
--- a/frontend/src/store/playerElement.ts
+++ b/frontend/src/store/playerElement.ts
@@ -60,14 +60,14 @@ class PlayerElementStore {
     state.isStretched = newisStretched;
   }
 
-  public get isMinimized(): boolean {
-    return useRouter().currentRoute.value.fullPath !== '/playback/video';
+  public get isFullscreenVideoPlayer(): boolean {
+    return useRouter().currentRoute.value.fullPath === '/playback/video';
   }
 
   /**
    * == ACTIONS ==
    */
-  public toggleMinimize = (): void => {
+  public toggleFullscreenVideoPlayer = (): void => {
     /**
      * Destroys SSO before chaning view cause the canvas needs to be destroyed to be recreated in the other view
      */
@@ -75,7 +75,7 @@ class PlayerElementStore {
 
     const router = useRouter();
 
-    if (this.isMinimized) {
+    if (!this.isFullscreenVideoPlayer) {
       router.push('/playback/video');
     } else {
       router.replace(

From 4b2f9e96cdd20ad878bca1cad041cd7c7ea4e138 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fernando=20Fern=C3=A1ndez?= <ferferga@hotmail.com>
Date: Fri, 24 Feb 2023 08:02:50 +0000
Subject: [PATCH 8/8] fix(videoplayer): few refactors and lint fixes

---
 .../src/components/Buttons/PlayButton.vue     |  8 ++--
 .../components/Playback/PiPVideoPlayer.vue    |  1 -
 .../src/components/Playback/PlayerElement.vue | 25 +----------
 frontend/src/pages/playback/video/index.vue   |  2 +-
 frontend/src/store/playbackManager.ts         | 45 ++++++++++++-------
 frontend/src/store/playerElement.ts           | 42 ++++++++++++++---
 6 files changed, 71 insertions(+), 52 deletions(-)

diff --git a/frontend/src/components/Buttons/PlayButton.vue b/frontend/src/components/Buttons/PlayButton.vue
index 42eb55b11eb..a627a377e64 100644
--- a/frontend/src/components/Buttons/PlayButton.vue
+++ b/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();
diff --git a/frontend/src/components/Playback/PiPVideoPlayer.vue b/frontend/src/components/Playback/PiPVideoPlayer.vue
index 2a2b0af9ffc..3477d48de22 100644
--- a/frontend/src/components/Playback/PiPVideoPlayer.vue
+++ b/frontend/src/components/Playback/PiPVideoPlayer.vue
@@ -14,7 +14,6 @@
           :model-value="isHovering"
           v-bind="props"
           contained
-          eager
           scrim
           height="100%"
           width="100%">
diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 7d4fea26ede..79256b8c589 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -26,7 +26,6 @@
 
 <script setup lang="ts">
 import { computed, watch, nextTick } from 'vue';
-import { useRouter } from 'vue-router';
 import { isNil } from 'lodash-es';
 import { useI18n } from 'vue-i18n';
 import Hls, { ErrorData, ErrorTypes, Events } from 'hls.js';
@@ -40,9 +39,8 @@ import { mediaElementRef } from '@/store/playbackManager';
 
 const playbackManager = playbackManagerStore();
 const playerElement = playerElementStore();
-
 const { t } = useI18n();
-const router = useRouter();
+
 /**
  * Safari iOS doesn't support hls.js, so we need to handle the cases where we don't need hls.js
  */
@@ -156,27 +154,6 @@ watch(
   }
 );
 
-watch(
-  () => ({ currentItem: playbackManager.currentItem }),
-  (newValue, oldValue) => {
-    if (
-      (!newValue.currentItem &&
-        router.currentRoute.value.fullPath === '/playback/video') ||
-      (newValue.currentItem &&
-        !oldValue?.currentItem &&
-        playbackManager.currentlyPlayingMediaType === 'Video')
-    ) {
-      /**
-       * If no item is present, we either manually loaded this or playback is stopped
-       * OR
-       * If there was no item and there's now a video, default to going FS
-       */
-      playerElement.toggleFullscreenVideoPlayer();
-    }
-  },
-  { immediate: true }
-);
-
 watch(mediaElementRef, async () => {
   await nextTick();
   detachHls();
diff --git a/frontend/src/pages/playback/video/index.vue b/frontend/src/pages/playback/video/index.vue
index d621f845257..ae37c341454 100644
--- a/frontend/src/pages/playback/video/index.vue
+++ b/frontend/src/pages/playback/video/index.vue
@@ -25,7 +25,7 @@ const playerElement = playerElementStore();
 
 const osd = ref(true);
 
-let fullscreen = useFullscreen(document.body);
+const fullscreen = useFullscreen(document.body);
 
 /**
  * Toggles the fullscreen view, based on browsers supporting it or not (basically iOS or the others)
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 28fde644d61..38d235b0734 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -1,3 +1,9 @@
+/**
+ * This store handles the state of the playback
+ *
+ * It must be used in an agnostic way to cover both local and remote playback.
+ * If you want to handle the state of the local player element, use playerElement store instead.
+ */
 import { reactive, ref, watch } from 'vue';
 import { shuffle, isNil, cloneDeep } from 'lodash-es';
 import {
@@ -615,18 +621,25 @@ class PlaybackManagerStore {
   /**
    * Report playback stopped to the server. Used by the "Now playing" statistics in other clients.
    */
-  private _reportPlaybackStopped = async (itemId: string): Promise<void> => {
+  private _reportPlaybackStopped = async (
+    itemId: string,
+    sessionId = state.playSessionId,
+    currentTime = this.currentTime,
+    updateState = true
+  ): Promise<void> => {
     const remote = useRemote();
 
     await remote.sdk.newUserApi(getPlaystateApi).reportPlaybackStopped({
       playbackStopInfo: {
         ItemId: itemId,
-        PlaySessionId: state.playSessionId,
-        PositionTicks: msToTicks((this.currentTime || 0) * 1000)
+        PlaySessionId: sessionId,
+        PositionTicks: msToTicks((currentTime || 0) * 1000)
       }
     });
 
-    state.lastProgressUpdate = Date.now();
+    if (updateState) {
+      state.lastProgressUpdate = Date.now();
+    }
   };
 
   /**
@@ -831,24 +844,22 @@ class PlaybackManagerStore {
   };
 
   public stop = (): void => {
+    const sessionId = String(state.playSessionId || '');
+    const time = Number(this.currentTime);
+    const itemId = String(this.currentItem?.Id || '');
+    const volume = Number(this.currentVolume);
+
+    Object.assign(state, defaultState);
+    this.currentVolume = volume;
+
     window.setTimeout(async () => {
       const remote = useRemote();
 
       try {
-        if (
-          !isNil(this.currentItem) &&
-          !isNil(this.currentItem.Id) &&
-          !isNil(remote.auth.currentUser)
-        ) {
-          this._reportPlaybackStopped(this.currentItem.Id);
+        if (sessionId && itemId && time && remote.auth.currentUser) {
+          await this._reportPlaybackStopped(itemId, sessionId, time, false);
         }
-      } catch {
-      } finally {
-        const volume = this.currentVolume;
-
-        Object.assign(state, defaultState);
-        this.currentVolume = volume;
-      }
+      } catch {}
     });
   };
 
diff --git a/frontend/src/store/playerElement.ts b/frontend/src/store/playerElement.ts
index abf6ca5e5bd..0c3b389b5cc 100644
--- a/frontend/src/store/playerElement.ts
+++ b/frontend/src/store/playerElement.ts
@@ -1,5 +1,11 @@
+/**
+ * This store handles the state of the local player.
+ *
+ * In the other part, playbackManager is suited to handle the playback state in
+ * an agnostic way, regardless of where the media is being played (remotely or locally)
+ */
 import { cloneDeep } from 'lodash-es';
-import { nextTick, reactive } from 'vue';
+import { nextTick, reactive, watch } from 'vue';
 // @ts-expect-error - No types on libass-wasm
 import SubtitlesOctopus from '@jellyfin/libass-wasm';
 import subtitlesOctopusWorkerUrl from '@jellyfin/libass-wasm/dist/js/subtitles-octopus-worker.js?url';
@@ -8,6 +14,7 @@ import { useRouter } from '@/composables';
 
 const playbackManager = playbackManagerStore();
 let subtitlesOctopus: SubtitlesOctopus | undefined;
+const fullscreenRoute = '/playback/video';
 
 /**
  * == INTERFACES ==
@@ -56,12 +63,12 @@ class PlayerElementStore {
     return state.isStretched;
   }
 
-  public set isStretched(newisStretched: boolean) {
-    state.isStretched = newisStretched;
+  public set isStretched(newIsStretched: boolean) {
+    state.isStretched = newIsStretched;
   }
 
   public get isFullscreenVideoPlayer(): boolean {
-    return useRouter().currentRoute.value.fullPath === '/playback/video';
+    return useRouter().currentRoute.value.fullPath === fullscreenRoute;
   }
 
   /**
@@ -76,7 +83,7 @@ class PlayerElementStore {
     const router = useRouter();
 
     if (!this.isFullscreenVideoPlayer) {
-      router.push('/playback/video');
+      router.push(fullscreenRoute);
     } else {
       router.replace(
         typeof router.options.history.state.back === 'string'
@@ -162,6 +169,31 @@ class PlayerElementStore {
       }
     }
   };
+
+  public constructor() {
+    watch(
+      () => playbackManager.currentItem,
+      (newValue, oldValue) => {
+        const router = useRouter();
+
+        if (
+          (!newValue &&
+            router.currentRoute.value.fullPath === fullscreenRoute) ||
+          (newValue &&
+            !oldValue &&
+            playbackManager.currentlyPlayingMediaType === 'Video')
+        ) {
+          /**
+           * If no item is present, we either manually loaded this or playback is stopped
+           * OR
+           * If there was no item and there's now a video, default to going FS
+           */
+          playerElement.toggleFullscreenVideoPlayer();
+        }
+      },
+      { immediate: true }
+    );
+  }
 }
 
 const playerElement = new PlayerElementStore();