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>