Improve player playback and quality selection

app/components/ui/player/Player.vue

@@ -3,7 +3,7 @@ import Artplayer from "artplayer";
 import Hls from "hls.js";
 
 interface Props {
-    src: string;
+    urls: any;
     id: string;
 }
 
@@ -13,13 +13,13 @@ const props = withDefaults(defineProps<Props>(), {
 const emit = defineEmits(['get-instance'])
 
 const options = computed(() => {
-    console.log(props.src)
     return {
-        url: props.src || '',
+        url: props.urls[0].url || '',
         type: 'm3u8',
         customType: {
             m3u8: playM3u8,
         },
+        quality: props.urls,
         autoSize: true,
         autoMini: true,
         playbackRate: true,
@@ -69,18 +69,6 @@ onBeforeUnmount(() => {
 
 <template>
     <div class="flex items-center justify-center">
-        <div class="w-1/2 aspect-video" ref="artplayerRef"></div>
-    </div>
-    <div class="h-lvh">
-        test
-        test
-        ste
-        t
-
-        t
-
-        t
-    </div>
-    <div class="h-lvh">
+        <div class="w-2/3 aspect-video" ref="artplayerRef"></div>
     </div>
 </template>

app/pages/watch.vue

@@ -7,8 +7,8 @@
             <p>Media Hash: {{ mediaHash }}</p>
             <p>Episode: {{ episode }}</p>
 
-            <div v-if="hlsUrl">
-                <Player :id="mediaId.toString()" :src="hlsUrl" />
+            <div v-if="hlsUrls">
+                <Player :id="mediaId.toString().concat(episode?.toString() || '')" :urls="hlsUrls" />
             </div>
 
             <!-- Loading and Error States -->
@@ -36,6 +36,7 @@ const results = ref<KodikVideoLinks | null>(null)
 const isLoading = ref(false)
 const error = ref<unknown>(null)
 const hlsUrl = ref<string | null>(null)
+const hlsUrls = ref<any>(null)
 
 const playerOptions = ref({
     autoplay: false,
@@ -73,23 +74,14 @@ watchEffect(async () => {
         results.value = response?.data || null
 
         if (results.value?.links) {
-            const qualities = Object.keys(results.value.links)
-            const bestQuality = qualities.includes('360') ? '360' :
-                qualities[0]
-
-            const hlsLink = results.value.links[bestQuality ?? '360']?.find(link =>
-                link.type?.includes('hls') || link.src?.includes('.m3u8')
-            )
-            console.log(bestQuality)
-
-            if (hlsLink?.src) {
-                hlsUrl.value = hlsLink.src
-                if (playerOptions.value?.sources[0]) {
-                    playerOptions.value.sources[0].src = hlsUrl.value
-                }
-            } else {
-                throw new Error('No HLS stream found in response')
+            hlsUrls.value = Object.entries(results.value.links).map(([quality, links], index) => {
+                return {
+                    html: quality,
+                    url: links.find(link => link.src?.includes('.m3u8') || link.type?.includes('hls'))?.src,
+                    default: index === 0
                 }
+            })
+
         }
     } catch (err) {
         error.value = err