Added MPEG-DASH support (#2), workaround for #5

src/App.vue

@@ -4,6 +4,7 @@ import { ref, watch, reactive, onBeforeMount, onMounted } from 'vue';
 
 /* Components */
 import NavBar from '@/components/NavBar.vue';
+import Player from '@/components/Player.vue';
 import StatusBar from '@/components/StatusBar.vue';
 import NowPlaying from '@/components/NowPlaying.vue';
 import Genres from '@/components/Genres.vue';
@@ -35,8 +36,6 @@ const store = useStore(),
 const genreid = ref(''),
   path = ref(location.pathname);
 
-const audio = ref(null);
-
 /* Functions */
 function parseUrl() {
   const loc = location.pathname.split('/'),
@@ -75,10 +74,6 @@ function parseUrl() {
   }
 }
 
-function setTime(t) {
-  audio.value.currentTime = (t / 100) * player.state.duration;
-}
-
 function addSong(s) {
   data.state.urls.push(s);
 
@@ -105,10 +100,6 @@ function playList(a) {
 }
 
 function playNext(u) {
-  if (window.hls) {
-    window.hls.destroy();
-  }
-
   player.state.src = '';
 
   const now = data.state.urls.filter(s => s.url === data.state.url)[0],
@@ -156,15 +147,11 @@ async function getSong(e) {
   data.state.artist = json.uploader.replace(' - Topic', '');
   data.state.artistUrl = json.uploaderUrl;
   player.state.duration = json.duration;
+  player.state.hls = json.hls;
+  player.state.streams = json.audioStreams;
   data.state.url = e;
 
   await getNext(hash);
-
-  Stream({
-    hls: json.hls,
-    stream: json.audioStreams,
-    duration: json.duration,
-  });
 }
 
 async function getAlbum(e) {
@@ -256,80 +243,6 @@ async function getNext(hash) {
   }
 }
 
-async function Stream(res) {
-  console.log(res);
-  if (
-    store.dash === 'true' &&
-    window.MediaSource !== undefined &&
-    res.stream.length > 0
-  ) {
-    /* WIP */
-
-    const { useDash } = await import('@/scripts/dash.js');
-
-    console.log(useDash);
-
-    const rawDash = useDash(res.stream, res.duration),
-      blob = new Blob([rawDash], { type: 'application/dash+xml' }),
-      dashUrl = URL.createObjectURL(blob);
-
-    data.state.src = [
-      {
-        url: dashUrl,
-        mimeType: 'application/dash+xml',
-      },
-    ];
-
-    data.state.src.push(...res.stream);
-
-    audio.value.load();
-  } else {
-    window.Hls = await import('hls.js');
-
-    if (Hls.isSupported() && store.hls !== 'false') {
-      window.hls = new Hls.default();
-
-      window.hls.attachMedia(audio.value);
-
-      window.hls.on(Hls.default.Events.MEDIA_ATTACHED, () => {
-        window.hls.loadSource(res.hls);
-      });
-    } else {
-      data.state.src = res.stream;
-      audio.value.load();
-    }
-  }
-}
-
-function audioCanPlay() {
-  useLazyLoad();
-
-  if (audio.value.paused) {
-    player.toggle('play');
-  }
-
-  if (location.pathname != '/playlist') {
-    useRoute(data.state.url);
-  }
-
-  document.title = `Playing: ${data.state.title} by ${data.state.artist}`;
-}
-
-function SaveTrack(e) {
-  useUpdatePlaylist(
-    e,
-    {
-      url: data.state.url,
-      title: data.state.title,
-    },
-    e => {
-      if (e === true) {
-        console.log('Added Song To ' + e);
-      }
-    },
-  );
-}
-
 function setMetadata() {
   if ('mediaSession' in navigator) {
     const now = data.state.urls.filter(u => u.url === data.state.url)[0];
@@ -364,21 +277,20 @@ function setMetadata() {
   }
 }
 
-watch(
-  () => player.state.play,
-  () => {
-    if (audio.value.paused) {
-      player.state.status = 'pause';
-      audio.value.play().catch(err => {
-        console.error(err);
-        player.state.status = 'play';
-      });
-    } else {
-      player.state.status = 'play';
-      audio.value.pause();
-    }
-  },
-);
+function SaveTrack(e) {
+  useUpdatePlaylist(
+    e,
+    {
+      url: data.state.url,
+      title: data.state.title,
+    },
+    e => {
+      if (e === true) {
+        console.log('Added Song To ' + e);
+      }
+    },
+  );
+}
 
 onBeforeMount(() => {
   if (store.theme) {
@@ -387,10 +299,6 @@ onBeforeMount(() => {
 });
 
 onMounted(() => {
-  if (window.hls) {
-    window.hls.destroy();
-  }
-
   useLazyLoad();
 
   /* Event Listeners for Lazy Loading */
@@ -408,35 +316,6 @@ onMounted(() => {
     }
   };
 
-  /* Media Session Controls */
-  if ('mediaSession' in navigator) {
-    navigator.mediaSession.setActionHandler('play', () => {
-      player.state.status = 'pause';
-      audio.value.play().catch(err => {
-        alert(err);
-        player.state.status = 'play';
-      });
-    });
-
-    navigator.mediaSession.setActionHandler('pause', () => {
-      audio.value.pause();
-      player.state.status = 'play';
-    });
-
-    navigator.mediaSession.setActionHandler('previoustrack', () => {
-      if (data.state.urls.length > 2) {
-        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
-        getSong(data.state.urls[i - 1].url);
-      }
-    });
-    navigator.mediaSession.setActionHandler('nexttrack', () => {
-      if (data.state.urls.length > 2) {
-        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
-        getSong(data.state.urls[i + 1].url);
-      }
-    });
-  }
-
   /* Setup IndexedDB for storing custom playlists */
   useSetupDB();
 
@@ -494,23 +373,9 @@ onMounted(() => {
 
   <Info v-if="player.state.info" :text="data.state.description" />
 
-  <StatusBar @save="SaveTrack" @change-time="setTime" />
+  <StatusBar @save="SaveTrack" />
 
-  <audio
-    id="audio"
-    ref="audio"
-    :volume="player.state.vol"
-    @canplay="audioCanPlay"
-    @timeupdate="player.setTime($event.target.currentTime)"
-    @ended="playNext"
-    autoplay>
-    <source
-      v-if="store.dash === 'true' || !(store.getItem('hls') != 'false')"
-      v-for="src in data.state.src"
-      :key="src.url"
-      :src="src.url"
-      :type="src.mimeType" />
-  </audio>
+  <Player @ended="playNext" />
 </template>
 
 <style>

src/components/Player.vue

@@ -0,0 +1,153 @@
+<script setup>
+import { ref, watch, onMounted, onUpdated } from 'vue';
+import muxjs from 'mux.js';
+window.muxjs = muxjs;
+
+import { useLazyLoad, useStore, useRoute } from '@/scripts/util.js';
+
+import { useData, usePlayer } from '@/stores/player.js';
+
+defineEmits(['ended']);
+
+const player = usePlayer(),
+  data = useData(),
+  store = useStore();
+
+const audio = ref(null);
+
+function audioCanPlay() {
+  useLazyLoad();
+
+  player.state.status = 'pause';
+  audio.value.play().catch(err => {
+    console.error(err);
+    player.state.status = 'play';
+  });
+
+  if (location.pathname != '/playlist') {
+    useRoute(data.state.url);
+  }
+
+  document.title = `Playing: ${data.state.title} by ${data.state.artist}`;
+}
+
+async function Stream() {
+  const res = player.state,
+    shaka = import('shaka-player/dist/shaka-player.compiled.js');
+
+  let url, mime;
+
+  if (window.MediaSource !== undefined && res.streams.length > 0) {
+    const { useDash } = await import('../scripts/dash.js');
+
+    const dash = useDash(res.streams, res.duration);
+
+    url = 'data:application/dash+xml;charset=utf-8;base64,' + btoa(dash);
+    mime = 'application/dash+xml';
+  } else if (res.hls) {
+    url = res.hls;
+    mime = 'application/x-mpegURL';
+  } else if (res.streams.length > 0) {
+    url = res.streams[0].url;
+    mime = res.streams[0].mimeType;
+  }
+
+  if (!window.audioPlayer) {
+    shaka
+      .then(shaka => shaka.default)
+      .then(shaka => {
+        shaka.polyfill.installAll();
+
+        if (shaka.Player.isBrowserSupported) {
+          const audioPlayer = new shaka.Player(audio.value);
+
+          const codecs = [];
+
+          audioPlayer.configure({
+            preferredAudioCodecs: ['opus', 'mp4a'],
+            manifest: {
+              disableVideo: true,
+            },
+          });
+
+          window.audioPlayer = audioPlayer;
+        }
+      });
+  }
+
+  if (url) {
+    window.audioPlayer.load(url, 0, mime).catch(err => {
+      console.error('Code: ' + err.code, err);
+    });
+  }
+}
+
+watch(
+  () => player.state.play,
+  () => {
+    if (audio.value.paused) {
+      player.state.status = 'pause';
+      audio.value.play().catch(err => {
+        console.error(err);
+        player.state.status = 'play';
+      });
+    } else {
+      player.state.status = 'play';
+      audio.value.pause();
+    }
+  },
+);
+
+watch(() => player.state.streams, Stream);
+
+watch(
+  () => player.state.currentTime,
+  () => {
+    console.log(player.state.currentTime);
+    audio.value.currentTime = player.state.currentTime;
+  },
+);
+
+onMounted(() => {
+  Stream();
+
+  if ('mediaSession' in navigator) {
+    navigator.mediaSession.setActionHandler('play', () => {
+      player.state.status = 'pause';
+      audio.value.play().catch(err => {
+        alert(err);
+        player.state.status = 'play';
+      });
+    });
+
+    navigator.mediaSession.setActionHandler('pause', () => {
+      audio.value.pause();
+      player.state.status = 'play';
+    });
+
+    navigator.mediaSession.setActionHandler('previoustrack', () => {
+      if (data.state.urls.length > 2) {
+        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        getSong(data.state.urls[i - 1].url);
+      }
+    });
+    navigator.mediaSession.setActionHandler('nexttrack', () => {
+      if (data.state.urls.length > 2) {
+        const i = data.state.urls.map(s => s.url).indexOf(data.state.url);
+        getSong(data.state.urls[i + 1].url);
+      }
+    });
+  }
+});
+</script>
+
+<template>
+  <audio
+    id="audio"
+    ref="audio"
+    :volume="player.state.vol"
+    @canplay="audioCanPlay"
+    @timeupdate="player.setTime($event.target.currentTime)"
+    @ended="$emit('ended')"
+    autoplay></audio>
+</template>

src/components/SongItem.vue

@@ -3,6 +3,8 @@ import { ref, onMounted } from 'vue';
 
 import { useRand } from '../scripts/colors.js';
 
+import { useArtist } from '@/stores/results.js';
+
 const rand = useRand();
 
 const props = defineProps({
@@ -46,7 +48,7 @@ const openSong = el => {
   };
 
 onMounted(() => {
-  console.log(props);
+  console.log(props.channel, useArtist().state.playlistId);
 });
 </script>
 <template>
@@ -56,8 +58,17 @@ onMounted(() => {
     <span class="flex content">
       <h4>{{ title }}</h4>
       <a
-        :href="channel"
-        @click.prevent="$emit('get-artist', channel.replace('/channel/', ''))"
+        :href="
+          channel != '[]' ? channel : '/channel/' + useArtist().state.playlistId
+        "
+        @click.prevent="
+          $emit(
+            'get-artist',
+            channel != '[]'
+              ? channel.replace('/channel/', '')
+              : useArtist().state.playlistId,
+          )
+        "
         class="ign">
         <i class="ign">{{ author.replaceAll(' - Topic', '') }}</i>
       </a>

src/components/StatusBar.vue

@@ -11,7 +11,7 @@ import { usePlayer } from '../stores/player.js';
 const player = usePlayer(),
   store = useStore();
 
-const emit = defineEmits(['vol', 'save', 'change-time']),
+const emit = defineEmits(['save']),
   showme = reactive({
     menu: false,
     pl: false,
@@ -83,7 +83,10 @@ function Save() {
           type="range"
           name="statusbar-progress"
           max="100"
-          @input="$emit('change-time', $event.target.value)" />
+          @input="
+            player.state.currentTime =
+              ($event.target.value / 100) * player.state.duration
+          " />
       </div>
     </div>
 

src/scripts/dash.js

@@ -1,4 +1,4 @@
-import { Buffer } from 'buffer';
+import { Buffer } from 'buffer/';
 window.Buffer = Buffer;
 import { json2xml } from 'xml-js';
 

src/scripts/fetch.js

@@ -1,4 +1,4 @@
-import { useStore } from './util.js';
+import { useStore, useSanitize } from './util.js';
 
 export function getPipedQuery() {
   const papi = new URLSearchParams(location.search).get('pipedapi');
@@ -7,7 +7,7 @@ export function getPipedQuery() {
     return '';
   }
 
-  return '?pipedapi=' + papi;
+  return '?pipedapi=' + useSanitize(papi);
 }
 
 export async function getJson(url) {
@@ -27,9 +27,7 @@ export async function getJson(url) {
     );
     console.error(res.message);
   } else if (res) {
-    return res;
-  } else {
-    return;
+    return JSON.parse(useSanitize(JSON.stringify(res)));
   }
 }
 

src/scripts/util.js

@@ -1,3 +1,9 @@
+import DOMPurify from 'dompurify';
+
+export function useSanitize(txt) {
+  return DOMPurify.sanitize(txt);
+}
+
 export function useRoute(l) {
   history.pushState({}, '', l);
 }

src/stores/player.js

@@ -26,8 +26,11 @@ export const usePlayer = defineStore('player', () => {
     loop: false,
     play: false,
     status: 'play',
+    hls: '',
+    streams: [],
     duration: 0,
     time: 0,
+    currentTime: 0,
     playlist: false,
     lyrics: false,
     info: false,