WIP Implement search and watch prototype
This commit is contained in:
71
pages/anime/[slug].vue
Normal file
71
pages/anime/[slug].vue
Normal file
@ -0,0 +1,71 @@
|
||||
<script setup lang="ts">
|
||||
import { kodik, type KodikTranslation } from '~/openapi/extractor';
|
||||
|
||||
const route = useRoute();
|
||||
const animeId = ref(route.params.slug as string)
|
||||
|
||||
const results = ref<KodikTranslation[]>([])
|
||||
const isLoading = ref(false)
|
||||
const error = ref<unknown>(null)
|
||||
|
||||
const isSelectingEpisode = ref(false)
|
||||
const currentSelectionItem = ref<KodikTranslation | null>(null)
|
||||
|
||||
watchEffect(async () => {
|
||||
if (!animeId.value) return
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
const response = await kodik({ id: animeId.value })
|
||||
results.value = response?.data?.translations || []
|
||||
} catch (err) {
|
||||
error.value = err
|
||||
console.error('Failed to fetch anime details:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
})
|
||||
|
||||
function episodesSelect(item: KodikTranslation) {
|
||||
currentSelectionItem.value = item
|
||||
isSelectingEpisode.value = true
|
||||
}
|
||||
|
||||
function closeDialog() {
|
||||
console.log('Dialog closed')
|
||||
isSelectingEpisode.value = false
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div v-for="item in results" :key="item.id" class="flex w-[32rem]">
|
||||
<div @click="episodesSelect(item)">
|
||||
<span>{{ item.title }}</span>
|
||||
<span>{{ item.episodeCount }}</span>
|
||||
</div>
|
||||
</div>
|
||||
<p>{{ $route.params.slug }}</p>
|
||||
<Dialog v-bind:open="isSelectingEpisode">
|
||||
<DialogTrigger as-child>
|
||||
<Button variant="outline">
|
||||
Select episode
|
||||
</Button>
|
||||
</DialogTrigger>
|
||||
<DialogContent class="sm:max-w-[425px] max-h-[90dvh] overflow-y-auto" :close="closeDialog">
|
||||
<DialogHeader>
|
||||
<DialogTitle>Select episode</DialogTitle>
|
||||
</DialogHeader>
|
||||
<div class="grid gap-4 py-4">
|
||||
<div v-for="n in currentSelectionItem?.episodeCount || 0" :key="n"
|
||||
class="flex items-center justify-between">
|
||||
<NuxtLink
|
||||
:to="{ path: '/watch', query: { mediaType: currentSelectionItem?.mediaType, mediaId: currentSelectionItem?.mediaId, mediaHash: currentSelectionItem?.mediaHash, episode: n } }"
|
||||
class="flex items-center justify-between gap-2 w-full">
|
||||
<span>Episode {{ n }}</span>
|
||||
<Button variant="outline" @click="closeDialog">Watch</Button>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
</template>
|
||||
120
pages/index.vue
120
pages/index.vue
@ -3,13 +3,13 @@
|
||||
import kodikImage from "assets/img/kodik.png";
|
||||
import shikimoriImage from "assets/img/shikimori.png";
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectGroup,
|
||||
SelectItem,
|
||||
SelectLabel,
|
||||
SelectTrigger,
|
||||
SelectValue
|
||||
} from "~/components/ui/select";
|
||||
import { toast } from "vue-sonner";
|
||||
import { Toaster } from "~/components/ui/sonner";
|
||||
@ -17,63 +17,71 @@ import { Navbar } from "~/components/ui/navbar";
|
||||
import 'vue-sonner/style.css'
|
||||
import { Icon } from "#components";
|
||||
|
||||
const router = useRouter()
|
||||
const searchProvider = ref('kodik')
|
||||
const displaySearchProvider = computed(() => {
|
||||
let label = '';
|
||||
let image;
|
||||
if (searchProvider.value === 'kodik') {
|
||||
label = 'Kodik';
|
||||
image = kodikImage;
|
||||
}
|
||||
if (searchProvider.value === 'shikimori') {
|
||||
label = 'Shikimori';
|
||||
image = shikimoriImage;
|
||||
}
|
||||
return {
|
||||
label,
|
||||
image
|
||||
}
|
||||
let label = '';
|
||||
let image;
|
||||
if (searchProvider.value === 'kodik') {
|
||||
label = 'Kodik';
|
||||
image = kodikImage;
|
||||
}
|
||||
if (searchProvider.value === 'shikimori') {
|
||||
label = 'Shikimori';
|
||||
image = shikimoriImage;
|
||||
}
|
||||
return {
|
||||
label,
|
||||
image
|
||||
}
|
||||
})
|
||||
const search = defineModel<string>("")
|
||||
function querySearch() {
|
||||
if (!search.value || search.value.trim() === "") {
|
||||
toast('Please enter a value');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!search.value || search.value.trim() === "") {
|
||||
toast('Please enter a value');
|
||||
return;
|
||||
}
|
||||
router.push({ path: '/search', query: { title: search.value, provider: searchProvider.value } })
|
||||
.catch(err => {
|
||||
console.error('Navigation error:', err);
|
||||
toast.error('Failed to navigate to search results');
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<Toaster />
|
||||
<Navbar />
|
||||
<div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
|
||||
<Select v-model="searchProvider">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an provider">
|
||||
<img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>{{ displaySearchProvider.label }}</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Providers</SelectLabel>
|
||||
<SelectItem value="kodik">
|
||||
<img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>Kodik</span>
|
||||
</SelectItem>
|
||||
<SelectItem value="shikimori">
|
||||
<img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
Shikimori
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
|
||||
<Button @click="querySearch">
|
||||
<Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
|
||||
</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Toaster />
|
||||
<Navbar />
|
||||
|
||||
<div class="bg-background h-lvh w-screen flex justify-center items-center gap-1">
|
||||
<form @submit.prevent="querySearch" class="flex items-center gap-2">
|
||||
<Select v-model="searchProvider">
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select an provider">
|
||||
<img :src="displaySearchProvider.image" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>{{ displaySearchProvider.label }}</span>
|
||||
</SelectValue>
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectGroup>
|
||||
<SelectLabel>Providers</SelectLabel>
|
||||
<SelectItem value="kodik">
|
||||
<img :src="kodikImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
<span>Kodik</span>
|
||||
</SelectItem>
|
||||
<SelectItem value="shikimori">
|
||||
<img :src="shikimoriImage" alt="" class="w-5 h-5 rounded border border-gray-300">
|
||||
Shikimori
|
||||
</SelectItem>
|
||||
</SelectGroup>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<Input v-model="search" class="w-64" type="text" placeholder="Search anime..." />
|
||||
<Button type="submit">
|
||||
<Icon name="heroicons:magnifying-glass-16-solid" class="w-6 h-6" />
|
||||
</Button>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
154
pages/search.vue
154
pages/search.vue
@ -1,132 +1,58 @@
|
||||
<!-- pages/search.vue -->
|
||||
<script setup lang="ts">
|
||||
import { search, type Result } from '~/openapi/search'
|
||||
|
||||
// Define route query params
|
||||
const route = useRoute()
|
||||
const searchQuery = ref(route.query.title as string || '')
|
||||
|
||||
// Search results state
|
||||
const results = ref<Result[]>([])
|
||||
const isLoading = ref(false)
|
||||
const error = ref<unknown>(null)
|
||||
|
||||
// Perform search when query changes
|
||||
watchEffect(async () => {
|
||||
if (!searchQuery.value) return
|
||||
if (!searchQuery.value) return
|
||||
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
const response = await search({ title: searchQuery.value })
|
||||
results.value = response.data.results || []
|
||||
} catch (err) {
|
||||
error.value = err
|
||||
console.error('Search failed:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
try {
|
||||
isLoading.value = true
|
||||
error.value = null
|
||||
const response = await search({ title: searchQuery.value })
|
||||
results.value = response.data.results || []
|
||||
} catch (err) {
|
||||
error.value = err
|
||||
console.error('Search failed:', err)
|
||||
} finally {
|
||||
isLoading.value = false
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="search-page">
|
||||
<div class="search-box">
|
||||
<input v-model="searchQuery" type="text" placeholder="Search anime..."
|
||||
@keyup.enter="navigateTo({ path: '/search', query: { title: searchQuery } })">
|
||||
</div>
|
||||
|
||||
<!-- Loading State -->
|
||||
<div v-if="isLoading" class="loading">
|
||||
Loading results...
|
||||
</div>
|
||||
|
||||
<!-- Error State -->
|
||||
<div v-if="error" class="error">
|
||||
Error loading results: {{ error.message }}
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<div v-if="results.length > 0" class="results-grid">
|
||||
<div v-for="item in results" :key="item.id" class="result-card">
|
||||
<NuxtLink :to="`/anime/${item.id}`">
|
||||
<img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url"
|
||||
:alt="item.title" class="poster">
|
||||
<div class="details">
|
||||
<h3 className="scroll-m-20 text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
|
||||
<p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
|
||||
<p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
|
||||
<p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- No Results -->
|
||||
<div v-if="!isLoading && !error && results.length === 0 && searchQuery" class="no-results">
|
||||
No results found for "{{ searchQuery }}"
|
||||
</div>
|
||||
<div>
|
||||
<div v-if="isLoading">
|
||||
Loading results...
|
||||
</div>
|
||||
|
||||
<div v-if="error">
|
||||
Error loading results: {{ error }}
|
||||
</div>
|
||||
|
||||
<div v-if="results.length > 0" class="grid grid-cols-[repeat(auto-fill,32rem)] justify-around gap-8 grid-flow-row">
|
||||
<div v-for="item in results" :key="item.id" class="flex w-[32rem]">
|
||||
<NuxtLink :to="`/anime/${item.id}`">
|
||||
<img v-if="item.material_data?.anime_poster_url" :src="item.material_data.anime_poster_url" :alt="item.title"
|
||||
class="rounded-md">
|
||||
<div>
|
||||
<h3 className="text-2xl font-semibold tracking-tight">{{ item.title }}</h3>
|
||||
<p v-if="item.material_data?.year">Year: {{ item.material_data.year }}</p>
|
||||
<p v-if="item.material_data?.anime_kind">Type: {{ item.material_data.anime_kind }}</p>
|
||||
<p v-if="item.material_data?.episodes_total">Episodes: {{ item.material_data.episodes_total }}
|
||||
</p>
|
||||
</div>
|
||||
</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="!isLoading && !error && results.length === 0 && searchQuery">
|
||||
No results found for "{{ searchQuery }}"
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.search-page {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.search-box {
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.search-box input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
font-size: 16px;
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.results-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.result-card {
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.result-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
|
||||
.poster {
|
||||
width: 100%;
|
||||
height: 350px;
|
||||
object-fit: cover;
|
||||
}
|
||||
|
||||
.details {
|
||||
padding: 15px;
|
||||
}
|
||||
|
||||
.details p {
|
||||
margin: 5px 0;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.loading,
|
||||
.no-results,
|
||||
.error {
|
||||
text-align: center;
|
||||
padding: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
</style>
|
||||
|
||||
125
pages/watch.vue
Normal file
125
pages/watch.vue
Normal file
@ -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>
|
||||
Reference in New Issue
Block a user