WIP Implement search and watch prototype

pages/watch.vue

@@ -0,0 +1,125 @@
+<template>
+    <div>
+        <h1>Watch Page</h1>
+        <div v-if="mediaId">
+            <p>Media Type: {{ mediaType }}</p>
+            <p>Media ID: {{ mediaId }}</p>
+            <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>
+
+            <!-- Loading and Error States -->
+            <div v-if="isLoading" class="loading">Loading video...</div>
+            <div v-if="error" class="error">Error loading video: {{ error }}</div>
+        </div>
+        <div v-else>
+            <p>No media selected.</p>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { useRoute } from 'vue-router'
+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
+const mediaId = route.query.mediaId
+const mediaHash = route.query.mediaHash
+const episode = route.query.episode
+
+const results = ref<KodikVideoLinks | null>(null)
+const isLoading = ref(false)
+const error = ref<unknown>(null)
+const hlsUrl = ref<string | null>(null)
+
+const playerOptions = ref({
+    autoplay: false,
+    controls: true,
+    responsive: true,
+    fluid: true,
+    sources: [{
+        src: hlsUrl.value,
+        type: 'application/x-mpegURL'
+    }]
+})
+
+watchEffect(async () => {
+    if (!mediaType || !mediaId || !mediaHash || !episode) return
+
+    try {
+        isLoading.value = true
+        error.value = null
+
+        const translationDto: KodikTranslationDTO = {
+            mediaType: mediaType as string,
+            mediaId: mediaId as string,
+            mediaHash: mediaHash as string,
+        }
+
+        const videoParams: VideoParams = {
+            mediaType: mediaType as string,
+            mediaId: mediaId as string,
+            mediaHash: mediaHash as string,
+            episode: Number(episode as string),
+            quality: '720',
+        }
+
+        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]
+
+            // Find the first HLS link
+            const hlsLink = results.value.links[bestQuality]?.find(link =>
+                link.type?.includes('hls') || link.src?.includes('.m3u8')
+            )
+
+            if (hlsLink?.src) {
+                hlsUrl.value = hlsLink.src
+                playerOptions.value.sources[0].src = hlsLink.src
+            } else {
+                throw new Error('No HLS stream found in response')
+            }
+        }
+    } catch (err) {
+        error.value = err
+        console.error('Failed to fetch video:', err)
+    } finally {
+        isLoading.value = false
+    }
+})
+</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>