Improve player playback and quality selection

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
+            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
                 }
-            } else {
-                throw new Error('No HLS stream found in response')
-            }
+            })
+
         }
     } catch (err) {
         error.value = err