feat: drop shaka player and natively play direct streaming audio

frontend/package.json

@@ -38,9 +38,7 @@
     "he": "1.2.0",
     "langs": "2.0.0",
     "lodash-es": "4.17.21",
-    "mux.js": "6.1.0",
     "screenfull": "6.0.1",
-    "shaka-player": "4.1.1",
     "swiper": "8.3.2",
     "uuid": "9.0.0",
     "vue": "3.2.39",

frontend/src/components/Playback/PlayerElement.vue

@@ -14,28 +14,13 @@
 </template>
 
 <script setup lang="ts">
-/**
- * Shaka Player needs to be unmounted for it to be properly disposed. However,
- * since this component will always be mounted in the app (as it's inside the top-level App component),
- * it doesn't make sense to add code for handling the unmount process.
- */
-// @ts-expect-error - This module doesn't have typings
-import muxjs from 'mux.js';
-// @ts-expect-error - This module doesn't have typings
-import shakaPlayer from 'shaka-player/dist/shaka-player.compiled';
 import { computed, watch } from 'vue';
 import { isNil } from 'lodash-es';
 import { playbackManagerStore, RepeatMode } from '@/store';
 import { mediaElementRef } from '@/store/playbackManager';
 import { getImageInfo } from '@/utils/images';
 
 const playbackManager = playbackManagerStore();
-let isShakaAttached = false;
-const shaka = new shakaPlayer.Player();
-
-window.muxjs = muxjs;
-window.player = shaka;
-shakaPlayer.polyfill.installAll();
 
 const mediaElement = computed<'audio' | 'video' | undefined>(() => {
   if (playbackManager.currentlyPlayingMediaType === 'Audio') {
@@ -64,33 +49,16 @@ const isLoopingOnce = computed(
   () => playbackManager.repeatMode === RepeatMode.RepeatOne
 );
 
-watch(mediaElement, async () => {
-  await shaka.detach();
-  isShakaAttached = false;
-
-  if (mediaElementRef.value) {
-    await shaka.attach(mediaElementRef.value);
-
-    if (playbackManager.currentSourceUrl) {
-      await shaka.load(playbackManager.currentSourceUrl);
-    }
-
-    isShakaAttached = true;
-  }
-});
-
-watch(
-  () => playbackManager.currentItemIndex,
-  async () => {
-    await shaka.unload();
-  }
-);
-
 watch(
   () => playbackManager.currentSourceUrl,
   async () => {
-    if (isShakaAttached && playbackManager.currentSourceUrl) {
-      await shaka.load(playbackManager.currentSourceUrl);
+    if (
+      mediaElementRef.value &&
+      playbackManager.currentSourceUrl &&
+      playbackManager.currentMediaSource?.SupportsDirectPlay &&
+      playbackManager.currentlyPlayingMediaType === 'Audio'
+    ) {
+      mediaElementRef.value.src = playbackManager.currentSourceUrl;
     }
   }
 );