126 lines
3.5 KiB
Vue
126 lines
3.5 KiB
Vue
<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>
|