Use Artplayer.js as default player

pages/watch.vue

@@ -7,9 +7,8 @@
             <p>Media Hash: {{ mediaHash }}</p>
             <p>Episode: {{ episode }}</p>
 
-            <!-- Video Player Container -->
-            <div class="video-container">
-                <video-player v-if="hlsUrl" ref="videoPlayer" :options="playerOptions" class="vjs-big-play-centered" />
+            <div v-if="hlsUrl">
+                <Player :id="mediaId.toString()" :src="hlsUrl" />
             </div>
 
             <!-- Loading and Error States -->
@@ -24,9 +23,8 @@
 
 <script setup lang="ts">
 import { useRoute } from 'vue-router'
+import Player from '~/components/ui/player/Player.vue'
 import { video, type KodikTranslationDTO, type KodikVideoLinks, type VideoParams } from '~/openapi/extractor'
-import { VideoPlayer } from '@videojs-player/vue'
-import 'video.js/dist/video-js.css'
 
 const route = useRoute()
 const mediaType = route.query.mediaType
@@ -68,27 +66,25 @@ watchEffect(async () => {
             mediaId: mediaId as string,
             mediaHash: mediaHash as string,
             episode: Number(episode as string),
-            quality: '720',
+            quality: '360',
         }
 
         const response = await video(videoParams)
         results.value = response?.data || null
 
-        // Extract HLS URL from response
         if (results.value?.links) {
-            // Find the first available quality
             const qualities = Object.keys(results.value.links)
-            const bestQuality = qualities.includes('720') ? '720' :
-                qualities.includes('480') ? '480' :
-                    qualities[0]
+            const bestQuality = qualities.includes('360') ? '360' :
+                qualities[0]
 
-            // Find the first HLS link
             const hlsLink = results.value.links[bestQuality]?.find(link =>
                 link.type?.includes('hls') || link.src?.includes('.m3u8')
             )
+            console.log(bestQuality)
 
             if (hlsLink?.src) {
                 hlsUrl.value = hlsLink.src
+                console.log("UPDATE hls url")
                 playerOptions.value.sources[0].src = hlsLink.src
             } else {
                 throw new Error('No HLS stream found in response')
@@ -102,24 +98,3 @@ watchEffect(async () => {
     }
 })
 </script>
-
-<style scoped>
-.video-container {
-    max-width: 800px;
-    margin: 20px auto;
-}
-
-.loading,
-.error {
-    padding: 20px;
-    text-align: center;
-    background: #f8f8f8;
-    margin: 20px 0;
-    border-radius: 4px;
-}
-
-.error {
-    color: #d32f2f;
-    background: #ffebee;
-}
-</style>