From 46bcf8a4d3994e00e9f4ea6566e1ec5bcd8024be Mon Sep 17 00:00:00 2001
From: Thibault Nocchi <1619359+ThibaultNocchi@users.noreply.github.com>
Date: Tue, 31 Jan 2023 13:04:26 +0100
Subject: [PATCH] feat: partial work

---
 frontend/package.json                         |   1 +
 frontend/src/App.vue                          |   1 +
 .../Buttons/SubtitleSelectionButton.vue       | 125 +++-----
 .../src/components/Playback/OsdPlayer.vue     | 285 ++++++++++++++++++
 .../src/components/Playback/PlayerElement.vue | 109 +++++--
 .../src/components/Playback/VideoPlayer.vue   |  28 ++
 frontend/src/plugins/vuetify.ts               |   3 +-
 frontend/src/store/playbackManager.ts         |  30 +-
 package-lock.json                             |   6 +
 9 files changed, 483 insertions(+), 105 deletions(-)
 create mode 100644 frontend/src/components/Playback/OsdPlayer.vue
 create mode 100644 frontend/src/components/Playback/VideoPlayer.vue

diff --git a/frontend/package.json b/frontend/package.json
index 26a532c4ca9..01d777cbe0f 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -36,6 +36,7 @@
     "destr": "1.1.1",
     "dompurify": "2.3.8",
     "he": "1.2.0",
+    "hls.js": "1.3.1",
     "langs": "2.0.0",
     "lodash-es": "4.17.21",
     "screenfull": "6.0.1",
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index d7ea9d9181e..acb92c00009 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,5 +4,6 @@
     <router-view-transition is-root />
     <snackbar />
     <player-element />
+    <video-player />
   </v-app>
 </template>
diff --git a/frontend/src/components/Buttons/SubtitleSelectionButton.vue b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
index 2b73f9dc1c2..62a6d6c63ba 100644
--- a/frontend/src/components/Buttons/SubtitleSelectionButton.vue
+++ b/frontend/src/components/Buttons/SubtitleSelectionButton.vue
@@ -2,95 +2,64 @@
   <v-menu
     v-model="menu"
     :close-on-content-click="false"
-    :persistent="!true"
-    :transition="'slide-y-transition'"
+    transition="slide-y-transition"
     location="top"
-    :nudge-top="nudgeTop"
-    offset-y
-    min-width="25em"
-    max-width="25em"
-    min-height="25em"
-    max-height="25em"
-    :z-index="500"
-    class="menu"
     @input="$emit('input', $event)">
-    <!-- eslint-disable-next-line vue/no-template-shadow -->
-    <template #activator="{ on: menu, attrs }">
-      <v-tooltip location="top">
-        <template #activator="{ on: tooltip }">
-          <v-btn
-            class="align-self-center active-button"
-            icon
-            :disabled="
-              !playbackManager.currentItemParsedSubtitleTracks ||
-              playbackManager.currentItemParsedSubtitleTracks.length === 0
-            "
-            v-bind="attrs"
-            v-on="{ ...tooltip, ...menu }">
-            <v-icon>
-              <i-mdi-closed-caption />
-            </v-icon>
-          </v-btn>
-        </template>
-        <span>{{ $t('subtitles') }}</span>
-      </v-tooltip>
+    <template #activator="{ props }">
+      <v-btn
+        class="align-self-center active-button"
+        icon
+        :disabled="
+          !playbackManager.currentItemParsedSubtitleTracks ||
+          playbackManager.currentItemParsedSubtitleTracks.length === 0
+        "
+        v-bind="props">
+        <v-icon>
+          <i-mdi-closed-caption />
+        </v-icon>
+      </v-btn>
+      <!-- <span>{{ $t('subtitles') }}</span> -->
     </template>
-    <v-card>
-      <v-list color="transparent">
-        <v-list-item
-          v-for="track of tracks"
-          :key="track.srcIndex"
-          @click="playbackManager.currentSubtitleStreamIndex = track.srcIndex">
-          <v-icon
-            v-if="
-              track.srcIndex === playbackManager.currentSubtitleStreamIndex
-            ">
-            <i-mdi-check />
-          </v-icon>
-          {{ track.label }}
-        </v-list-item>
-      </v-list>
-    </v-card>
+    <!-- Appended or prepended icons cause the menu to be scrollable. This doesn't happen if it's classic text. Vuetify 3.1.2 -->
+    <v-list>
+      <v-list-item
+        v-for="track of tracks"
+        :key="track.srcIndex"
+        :append-icon="
+          track.srcIndex === playbackManager.currentSubtitleStreamIndex
+            ? IMdiCheck
+            : undefined
+        "
+        :title="track.label"
+        @click="playbackManager.currentSubtitleStreamIndex = track.srcIndex" />
+    </v-list>
   </v-menu>
 </template>
 
-<script lang="ts">
+<script lang="ts" setup>
 import { SubtitleDeliveryMethod } from '@jellyfin/sdk/lib/generated-client';
-import { defineComponent } from 'vue';
+import { ref, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import IMdiCheck from 'virtual:icons/mdi/check';
 import { playbackManagerStore } from '@/store';
 import { PlaybackTrack } from '@/store/playbackManager';
 
-export default defineComponent({
-  props: {
-    nudgeTop: {
-      type: [Number, String],
-      default: 0
-    }
-  },
-  setup() {
-    const playbackManager = playbackManagerStore();
+const { t } = useI18n();
+const playbackManager = playbackManagerStore();
 
-    return { playbackManager };
-  },
-  data() {
-    return {
-      menu: false
-    };
-  },
-  computed: {
-    tracks(): PlaybackTrack[] {
-      const subs = this.playbackManager
-        .currentItemParsedSubtitleTracks as PlaybackTrack[];
+const menu = ref(false);
 
-      return [
-        {
-          label: this.$t('disabled'),
-          srcIndex: -1,
-          type: SubtitleDeliveryMethod.External
-        },
-        ...subs
-      ];
-    }
-  }
+const tracks = computed(() => {
+  const subs =
+    playbackManager.currentItemParsedSubtitleTracks as PlaybackTrack[];
+
+  return [
+    {
+      label: t('disabled'),
+      srcIndex: -1,
+      type: SubtitleDeliveryMethod.External
+    },
+    ...subs
+  ];
 });
 </script>
diff --git a/frontend/src/components/Playback/OsdPlayer.vue b/frontend/src/components/Playback/OsdPlayer.vue
new file mode 100644
index 00000000000..8c603076cd7
--- /dev/null
+++ b/frontend/src/components/Playback/OsdPlayer.vue
@@ -0,0 +1,285 @@
+<template>
+  <!-- <v-overlay
+    v-model="test"
+    contained
+    scrim="transparent"
+    width="100%"
+    height="100%">
+    <v-container class="osd-container px-8" fluid>
+      <v-row justify="space-between">
+        <v-col cols="auto">
+          <v-btn :icon="IMdiClose" variant="text" />
+          <v-btn :icon="IMdiChevronDown" variant="text" />
+        </v-col>
+        <v-col cols="auto">
+          <cast-button />
+        </v-col>
+      </v-row>
+    </v-container>
+  </v-overlay> -->
+  <v-overlay
+    v-model="test"
+    contained
+    scrim="transparent"
+    width="100%"
+    height="100%">
+    <div
+      class="d-flex flex-column justify-space-between align-center player-overlay">
+      <div class="osd-top pt-s pl-s pr-s">
+        <div class="d-flex align-center py-2 px-4">
+          <div class="d-flex">
+            <v-btn :icon="IMdiClose" @click="playbackManager.stop" />
+            <v-btn :icon="IMdiChevronDown" disabled />
+          </div>
+          <div class="d-flex ml-auto">
+            <cast-button />
+          </div>
+        </div>
+      </div>
+      <div class="osd-bottom pb-s pl-s pr-s">
+        <div class="pa-4">
+          <time-slider />
+          <div
+            class="controls-wrapper d-flex align-stretch justify-space-between">
+            <div
+              v-if="$vuetify.display.mdAndUp"
+              class="d-flex flex-column align-start justify-center mr-auto video-title">
+              <template
+                v-if="
+                  playbackManager.currentlyPlayingType === BaseItemKind.Episode
+                ">
+                <span class="mt-1 text-subtitle-1 text-truncate">
+                  {{ playbackManager.currentItem?.Name }}
+                </span>
+                <span class="text-subtitle-2 text--secondary text-truncate">
+                  {{ playbackManager.currentItem?.SeriesName }}
+                </span>
+                <span class="text-subtitle-2 text--secondary text-truncate">
+                  {{
+                    $t('seasonEpisode', {
+                      seasonNumber:
+                        playbackManager.currentItem?.ParentIndexNumber,
+                      episodeNumber: playbackManager.currentItem?.IndexNumber
+                    })
+                  }}
+                </span>
+              </template>
+              <template v-else>
+                <span>{{ playbackManager.currentItem?.Name }}</span>
+              </template>
+            </div>
+            <div
+              class="d-flex player-controls align-center justify-start justify-md-center">
+              <v-btn
+                icon
+                class="mx-1"
+                @click="playbackManager.setPreviousTrack">
+                <v-icon>
+                  <i-mdi-skip-previous />
+                </v-icon>
+              </v-btn>
+              <v-btn
+                icon
+                class="mx-1 active-button"
+                @click="playbackManager.playPause">
+                <v-icon size="large">
+                  <i-mdi-play-circle-outline v-if="playbackManager.isPaused" />
+                  <i-mdi-pause-circle-outline v-else />
+                </v-icon>
+              </v-btn>
+              <v-btn icon class="mx-1" @click="playbackManager.setNextTrack">
+                <v-icon>
+                  <i-mdi-skip-next />
+                </v-icon>
+              </v-btn>
+            </div>
+            <div class="d-flex aligh-center ml-auto ml-md-0">
+              <volume-slider v-if="$vuetify.display.smAndUp" class="mr-2" />
+              <queue-button
+                :nudge-top="$vuetify.display.mdAndUp ? 60 : 30"
+                :close-on-click="true" />
+              <subtitle-selection-button v-if="$vuetify.display.smAndUp" />
+              <playback-settings-button
+                :nudge-top="$vuetify.display.mdAndUp ? 60 : 30" />
+              <v-btn class="align-self-center active-button" icon>
+                <v-icon>
+                  <i-mdi-picture-in-picture-bottom-right />
+                </v-icon>
+              </v-btn>
+              <v-btn
+                v-if="$vuetify.display.smAndUp"
+                class="align-self-center active-button"
+                icon
+                @click="playbackManager.toggleStretched">
+                <v-tooltip activator="parent" contained>
+                  {{ $t('stretch') }}
+                </v-tooltip>
+                <v-icon v-if="playbackManager.isStretched">
+                  <i-mdi-stretch-to-page />
+                </v-icon>
+                <v-icon v-else>
+                  <i-mdi-stretch-to-page-outline />
+                </v-icon>
+              </v-btn>
+              <v-btn class="align-self-center active-button" icon>
+                <v-icon>
+                  <i-mdi-fullscreen />
+                </v-icon>
+              </v-btn>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </v-overlay>
+</template>
+
+<script lang="ts" setup>
+import { ref } from 'vue';
+import IMdiClose from 'virtual:icons/mdi/close';
+import IMdiChevronDown from 'virtual:icons/mdi/chevron-down';
+import { useDisplay } from 'vuetify';
+import { BaseItemKind } from '@jellyfin/sdk/lib/generated-client';
+import { playbackManagerStore } from '@/store';
+
+const test = ref(true);
+
+const playbackManager = playbackManagerStore();
+</script>
+
+<style lang="scss">
+// These don't work when scoped, for some reason.
+
+.player {
+  overflow-y: hidden;
+}
+
+.player--fullscreen {
+  position: relative;
+  width: 100vw !important;
+  height: 100vh !important;
+  max-height: 100% !important;
+  margin: 0 !important;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+
+.player--minimized {
+  justify-self: end !important;
+  position: relative;
+  margin: 0 !important;
+  margin-left: auto !important;
+  top: auto;
+  left: auto;
+  bottom: 2em;
+  right: 2em;
+}
+</style>
+
+<style lang="scss" scoped>
+.playback-data-dialog {
+  position: absolute;
+  z-index: 999;
+}
+
+.v-card.player-card {
+  background-color: black !important;
+}
+
+.controls-wrapper {
+  position: relative;
+}
+
+/* stylelint-disable-next-line */
+.v-overlay::v-deep .v-overlay__content {
+  width: 100%;
+  height: 100%;
+  box-sizing: border-box;
+}
+
+.player-overlay {
+  height: 100%;
+}
+
+.osd-top,
+.osd-bottom {
+  width: 100%;
+  padding: 8px;
+}
+
+.osd-bottom > div,
+.osd-top > div {
+  max-width: calc(100vh * 1.77 - 2vh);
+  margin: auto;
+}
+
+.osd-top {
+  padding-bottom: 5em;
+  background: linear-gradient(
+    to bottom,
+    hsla(0, 0%, 0%, 0.75) 0%,
+    hsla(0, 0%, 0%, 0.74) 8.1%,
+    hsla(0, 0%, 0%, 0.714) 15.5%,
+    hsla(0, 0%, 0%, 0.672) 22.5%,
+    hsla(0, 0%, 0%, 0.618) 29%,
+    hsla(0, 0%, 0%, 0.556) 35.3%,
+    hsla(0, 0%, 0%, 0.486) 41.2%,
+    hsla(0, 0%, 0%, 0.412) 47.1%,
+    hsla(0, 0%, 0%, 0.338) 52.9%,
+    hsla(0, 0%, 0%, 0.264) 58.8%,
+    hsla(0, 0%, 0%, 0.194) 64.7%,
+    hsla(0, 0%, 0%, 0.132) 71%,
+    hsla(0, 0%, 0%, 0.078) 77.5%,
+    hsla(0, 0%, 0%, 0.036) 84.5%,
+    hsla(0, 0%, 0%, 0.01) 91.9%,
+    hsla(0, 0%, 0%, 0) 100%
+  );
+}
+
+.osd-bottom {
+  padding-top: 6em;
+  background: linear-gradient(
+    to top,
+    hsla(0, 0%, 0%, 0.75) 0%,
+    hsla(0, 0%, 0%, 0.74) 8.1%,
+    hsla(0, 0%, 0%, 0.714) 15.5%,
+    hsla(0, 0%, 0%, 0.672) 22.5%,
+    hsla(0, 0%, 0%, 0.618) 29%,
+    hsla(0, 0%, 0%, 0.556) 35.3%,
+    hsla(0, 0%, 0%, 0.486) 41.2%,
+    hsla(0, 0%, 0%, 0.412) 47.1%,
+    hsla(0, 0%, 0%, 0.338) 52.9%,
+    hsla(0, 0%, 0%, 0.264) 58.8%,
+    hsla(0, 0%, 0%, 0.194) 64.7%,
+    hsla(0, 0%, 0%, 0.132) 71%,
+    hsla(0, 0%, 0%, 0.078) 77.5%,
+    hsla(0, 0%, 0%, 0.036) 84.5%,
+    hsla(0, 0%, 0%, 0.01) 91.9%,
+    hsla(0, 0%, 0%, 0) 100%
+  );
+}
+
+.player-controls {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.video-title {
+  max-width: 40vw;
+  height: 6em;
+}
+
+// HACK: https://github.com/vuetifyjs/vuetify/issues/8436.
+// https://vuetifyjs.com/en/api/v-btn/#retain-focus-on-click prop was added
+// but it seems we're using a prop combination that it's incompatible with it: NaN;
+
+// SO link: https://stackoverflow.com/questions/57830767/is-it-default-for-vuetify-to-keep-active-state-on-buttons-after-click-how-do-yo/57831256#57831256
+.active-button:focus::before {
+  opacity: 0 !important;
+}
+</style>
diff --git a/frontend/src/components/Playback/PlayerElement.vue b/frontend/src/components/Playback/PlayerElement.vue
index 83ed0a5261c..a8656f66ab6 100644
--- a/frontend/src/components/Playback/PlayerElement.vue
+++ b/frontend/src/components/Playback/PlayerElement.vue
@@ -1,47 +1,50 @@
 <template>
-  <template v-if="mediaElement">
+  <template v-if="playbackManager.currentlyPlayingMediaElement">
     <Teleport :to="teleportTarget">
       <component
-        :is="mediaElement"
+        :is="playbackManager.currentlyPlayingMediaElement"
         ref="mediaElementRef"
         :poster="posterUrl"
         autoplay
         crossorigin="anonymous"
         playsinline
-        :loop="isLoopingOnce" />
+        :loop="isLoopingOnce"
+        :class="{ stretched: playbackManager.isStretched }" />
     </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 Hls from 'hls.js';
+import { useMediaControls } from '@vueuse/core';
 import { playbackManagerStore, RepeatMode } from '@/store';
-import { mediaElementRef } from '@/store/playbackManager';
+import { mediaElementRef, setNewMediaControls } from '@/store/playbackManager';
 import { getImageInfo } from '@/utils/images';
 import { useSnackbar } from '@/composables';
+import { ticksToMs } from '@/utils/time';
+
+// const mediaElementRef = ref<HTMLMediaElement>();
 
 const playbackManager = playbackManagerStore();
 const { t } = useI18n();
 
-const mediaElement = computed<'audio' | 'video' | undefined>(() => {
-  if (playbackManager.currentlyPlayingMediaType === 'Audio') {
-    return 'audio';
-  } else if (playbackManager.currentlyPlayingMediaType === 'Video') {
-    return 'video';
-  }
-});
+const hls = ref<Hls | undefined>(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'
+  playbackManager.currentlyPlayingMediaElement === 'audio'
+    ? 'body'
+    : '.video-container'
 );
 
 const posterUrl = computed<string>(() =>
-  !isNil(playbackManager.currentItem) && mediaElement.value === 'video'
+  !isNil(playbackManager.currentItem) &&
+  playbackManager.currentlyPlayingMediaElement === 'video'
     ? getImageInfo(playbackManager.currentItem, {
         preferBackdrop: true
       }).url || ''
@@ -54,18 +57,76 @@ const isLoopingOnce = computed(
 
 watch(
   () => playbackManager.currentSourceUrl,
-  () => {
-    if (
-      mediaElementRef.value &&
-      playbackManager.currentSourceUrl &&
-      playbackManager.currentMediaSource?.SupportsDirectPlay &&
-      playbackManager.currentlyPlayingMediaType === 'Audio'
-    ) {
-      mediaElementRef.value.src = playbackManager.currentSourceUrl;
+  async () => {
+    if (playbackManager.currentSourceUrl) {
+      // Wait for nextTick for the mediaElementRef to get filled
+      await nextTick();
+
+      try {
+        if (!mediaElementRef.value) {
+          throw new Error('No media element found');
+        }
+
+        // setNewMediaControls(useMediaControls(mediaElementRef));
+
+        if (
+          mediaElementRef.value &&
+          playbackManager.currentMediaSource?.SupportsDirectPlay &&
+          playbackManager.currentlyPlayingMediaType === 'Audio'
+        ) {
+          console.log('Direct HTML play');
+          mediaElementRef.value.src = playbackManager.currentSourceUrl;
+        } else if (
+          Hls.isSupported() &&
+          mediaElementRef.value &&
+          playbackManager.currentlyPlayingMediaType === 'Video'
+        ) {
+          console.log('HLS play');
+
+          const startPosition =
+            ticksToMs(
+              playbackManager.currentItem?.UserData?.PlaybackPositionTicks
+            ) / 1000;
+
+          if (!hls.value) {
+            hls.value = new Hls({ startPosition: startPosition });
+            hls.value.attachMedia(mediaElementRef.value);
+          } else {
+            hls.value.config.startPosition = startPosition;
+          }
+
+          hls.value.on(Hls.Events.ERROR, (event, data) => {
+            console.error(event);
+            console.error(data);
+          });
+
+          hls.value.loadSource(playbackManager.currentSourceUrl);
+        } else {
+          throw new Error('No playable case');
+        }
+      } catch {
+        useSnackbar(t('errors.cantPlayItem'), 'error');
+        playbackManager.stop();
+      }
     } else {
-      useSnackbar(t('errors.cantPlayItem'), 'error');
-      playbackManager.stop();
+      if (hls.value) {
+        console.log('Destroying HLS');
+        hls.value.destroy();
+        hls.value = undefined;
+      }
     }
   }
 );
 </script>
+
+<style>
+video {
+  max-height: 100%;
+  max-width: 100%;
+}
+
+video.stretched {
+  min-width: 100%;
+  min-height: 100%;
+}
+</style>
diff --git a/frontend/src/components/Playback/VideoPlayer.vue b/frontend/src/components/Playback/VideoPlayer.vue
new file mode 100644
index 00000000000..f9799253030
--- /dev/null
+++ b/frontend/src/components/Playback/VideoPlayer.vue
@@ -0,0 +1,28 @@
+<template>
+  <v-container
+    v-show="playbackManager.currentlyPlayingMediaElement === 'video'"
+    class="video-container pa-0 fill-height justify-center"
+    fluid>
+    <osd-player
+      v-if="playbackManager.currentlyPlayingMediaElement === 'video'" />
+  </v-container>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from 'vue';
+import { playbackManagerStore } from '@/store';
+
+const playbackManager = playbackManagerStore();
+</script>
+
+<style scoped>
+.video-container {
+  position: absolute;
+  width: 100vw !important;
+  height: 100vh !important;
+  max-width: 100vw !important;
+  max-height: 100vh !important;
+  z-index: 1010;
+  background-color: black;
+}
+</style>
diff --git a/frontend/src/plugins/vuetify.ts b/frontend/src/plugins/vuetify.ts
index 53bcbb6b68b..9939d808c84 100644
--- a/frontend/src/plugins/vuetify.ts
+++ b/frontend/src/plugins/vuetify.ts
@@ -59,7 +59,8 @@ const vuetify = createVuetify({
       color: 'primary'
     },
     VBtn: {
-      color: ''
+      color: '',
+      variant: 'text'
     }
   },
   locale: {
diff --git a/frontend/src/store/playbackManager.ts b/frontend/src/store/playbackManager.ts
index 38e80cbf042..9ebc3488426 100644
--- a/frontend/src/store/playbackManager.ts
+++ b/frontend/src/store/playbackManager.ts
@@ -72,6 +72,7 @@ interface PlaybackManagerState {
   remoteCurrentVolume: number;
   isRemoteMuted: boolean;
   isShuffling: boolean;
+  isStretched: boolean;
   repeatMode: RepeatMode;
   queue: string[];
   originalQueue: string[];
@@ -103,6 +104,7 @@ const defaultState: PlaybackManagerState = {
   remoteCurrentVolume: 100,
   isRemoteMuted: false,
   isShuffling: false,
+  isStretched: true,
   repeatMode: RepeatMode.RepeatNone,
   queue: [],
   originalQueue: [],
@@ -113,7 +115,7 @@ const defaultState: PlaybackManagerState = {
 
 export const mediaElementRef = ref<HTMLMediaElement>();
 const state = reactive<PlaybackManagerState>(cloneDeep(defaultState));
-const mediaControls = useMediaControls(mediaElementRef);
+let mediaControls = useMediaControls(mediaElementRef);
 const reactiveDate = useNow();
 /**
  * Previously, we created a new MediaMetadata every time the item changed. However,
@@ -122,6 +124,12 @@ const reactiveDate = useNow();
  */
 const mediaMetadata = new MediaMetadata();
 
+export function setNewMediaControls(
+  mediacontrols: ReturnType<typeof useMediaControls>
+): void {
+  mediaControls = mediacontrols;
+}
+
 class PlaybackManagerStore {
   /**
    * == GETTERS ==
@@ -225,6 +233,16 @@ class PlaybackManagerStore {
       return items.getItemById(state.queue[state.currentItemIndex])?.MediaType;
     }
   }
+  /**
+   * Get the media HTML element to use for the currently playing element
+   */
+  public get currentlyPlayingMediaElement(): 'audio' | 'video' | undefined {
+    if (this.currentlyPlayingMediaType === 'Audio') {
+      return 'audio';
+    } else if (this.currentlyPlayingMediaType === 'Video') {
+      return 'video';
+    }
+  }
   /**
    * Get current's item audio tracks
    */
@@ -343,6 +361,10 @@ class PlaybackManagerStore {
     return state.isShuffling;
   }
 
+  public get isStretched(): boolean {
+    return state.isStretched;
+  }
+
   public get repeatMode(): RepeatMode {
     return state.repeatMode;
   }
@@ -793,7 +815,7 @@ class PlaybackManagerStore {
           !isNil(this.currentItem.Id) &&
           !isNil(remote.auth.currentUser)
         ) {
-          await this._reportPlaybackStopped(this.currentItem.Id);
+          this._reportPlaybackStopped(this.currentItem.Id);
         }
       } catch {
       } finally {
@@ -843,6 +865,10 @@ class PlaybackManagerStore {
     }
   };
 
+  public toggleStretched = (): void => {
+    state.isStretched = !state.isStretched;
+  };
+
   /**
    * Toggles between the different repeat modes
    *
diff --git a/package-lock.json b/package-lock.json
index fe85e9264e0..776fab82f18 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -31,6 +31,7 @@
         "destr": "1.1.1",
         "dompurify": "2.3.8",
         "he": "1.2.0",
+        "hls.js": "1.3.1",
         "langs": "2.0.0",
         "lodash-es": "4.17.21",
         "screenfull": "6.0.1",
@@ -9629,6 +9630,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",