Skip to content

Commit

Permalink
Add LazyLoading
Browse files Browse the repository at this point in the history
  • Loading branch information
kbagot committed Jan 3, 2025
1 parent a98a533 commit 8e5383d
Show file tree
Hide file tree
Showing 3 changed files with 39 additions and 72 deletions.
3 changes: 2 additions & 1 deletion i18n/locales/en.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
"Companies": "Companies",
"Director": "Director",
"Runtime": "Runtime",
"ReleaseDate": "Release date"
"ReleaseDate": "Release date",
"stateFetchError": "Movie does not Exist"
},

"searchMovies": {
Expand Down
3 changes: 2 additions & 1 deletion i18n/locales/fr.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,8 @@
"Companies": "Companies",
"Director": "Directeur",
"Runtime": "Durée",
"ReleaseDate": "Date de sorti"
"ReleaseDate": "Date de sorti",
"stateFetchError": "Le Film n'existe pas"
},

"searchMovies": {
Expand Down
105 changes: 35 additions & 70 deletions pages/movies/[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ let movie_id = useRoute().params.id as string;
if (movie_id === "default") movie_id = "tt1431045";
const headers = useRequestHeaders(["cookie"]) as HeadersInit;
const { data: infos, error: infos_error } = await useFetch(
const { data: infos, error: infos_error } = await useLazyFetch(
`/api/movies/${movie_id}`,
{ headers },
);
Expand Down Expand Up @@ -67,35 +67,32 @@ async function update_comment(comment_id: string) {
</script>

<template>
<div class="flex justify-center flex-wrap mx-auto max-w-7xl px-8 space-y-4">
<!-- Torrent Fetch error -->
<div v-if="infos_error" class="flex justify-center my-12">
<p class="text-lg line-clamp-3">{{ $t("movies.stateFetchError") }}</p>
</div>

<!-- Loading State -->
<div v-if="!infos && !infos_error" class="flex justify-center my-8">
<span class="loading loading-spinner loading-lg"></span>
</div>

<div v-if="infos" class="flex justify-center flex-wrap mx-auto max-w-7xl px-8 space-y-4">
{{ infos }}
<p class="w-full text-center font-bold text-xl">{{ infos?.title }}</p>
<p v-show="error" class="text-error text-xl font-bold">{{ error }}</p>
<div class="w-full my-4">
<video
ref="player"
class="rounded-lg shadow-md shadow-primary w-full"
controls
:src="`/api/movies/${movie_id}/stream`"
autoplay
:onerror="video_error()"
>
<track
v-for="sub in subtitles"
kind="subtitles"
:label="sub"
:srclang="sub"
:src="`/api/movies/${movie_id}/subtitles/${sub}`"
/>
<video ref="player" class="rounded-lg shadow-md shadow-primary w-full" controls
:src="`/api/movies/${movie_id}/stream`" autoplay :onerror="video_error()">
<track v-for="sub in subtitles" kind="subtitles" :label="sub" :srclang="sub"
:src="`/api/movies/${movie_id}/subtitles/${sub}`" />
</video>
</div>

<div class="card bg-base-100 shadow-md shadow-secondary w-full">
<div class="card card-side card-compact card-body">
<figure>
<img
:src="`https://image.tmdb.org/t/p/w500${infos.poster_path}`"
alt="poster"
/>
<img :src="`https://image.tmdb.org/t/p/w500${infos.poster_path}`" alt="poster" />
</figure>
<div class="card-body">
<p>{{ infos.overview }}</p>
Expand All @@ -117,17 +114,11 @@ async function update_comment(comment_id: string) {
</div>
</div>
<div class="flex flex-wrap justify-evenly gap-4 p-4">
<div
v-for="cast in infos.cast.sort(
(a: any, b: any) => b.popularity - a.popularity,
)"
class="card card-compact min-w-40 w-1/6 bg-base-200"
>
<div v-for="cast in infos.cast.sort(
(a: any, b: any) => b.popularity - a.popularity,
)" class="card card-compact min-w-40 w-1/6 bg-base-200">
<figure>
<img
:src="`https://media.themoviedb.org/t/p/w500${cast.profile_path}`"
alt="poster"
/>
<img :src="`https://media.themoviedb.org/t/p/w500${cast.profile_path}`" alt="poster" />
</figure>
<p class="card-title mx-auto mt-1">{{ cast.name }}</p>
<div class="card-body !pt-2 gap-0">
Expand All @@ -144,28 +135,16 @@ async function update_comment(comment_id: string) {
<div class="card-body">
<p class="card-title">{{ $t("movies.Comments") }}</p>
<div class="flex md:flex-nowrap flex-wrap items-end gap-4 mt-2">
<textarea
v-model="comment_textarea"
class="textarea textarea-bordered grow"
maxlength="1024"
:placeholder="$t('movies.AddAComment')"
></textarea>
<button
class="btn btn-secondary"
:class="{ 'btn-disabled': !comment_textarea.length }"
@click="send_comment"
>
<textarea v-model="comment_textarea" class="textarea textarea-bordered grow" maxlength="1024"
:placeholder="$t('movies.AddAComment')"></textarea>
<button class="btn btn-secondary" :class="{ 'btn-disabled': !comment_textarea.length }" @click="send_comment">
post
</button>
</div>
<div class="mr-20">
<div
v-for="comment of comments"
class="chat"
:class="[
comment.comments.authorId == user?.id ? 'chat-end' : 'chat-start',
]"
>
<div v-for="comment of comments" class="chat" :class="[
comment.comments.authorId == user?.id ? 'chat-end' : 'chat-start',
]">
<div class="chat-header text-lg ml-1">
user <b>{{ comment.users?.username || "deleted" }}</b> on
<ClientOnly>
Expand All @@ -175,28 +154,14 @@ async function update_comment(comment_id: string) {
</ClientOnly>
</div>
<div class="chat-bubble chat-bubble-secondary text-lg p-0">
<input
type="text"
class="p-2 outline-none bg-transparent"
v-model="comments_input[comment.comments.id]"
/>
<input type="text" class="p-2 outline-none bg-transparent"
v-model="comments_input[comment.comments.id]" />
</div>
<div
v-if="comment.comments.authorId == user?.id"
class="chat-image"
>
<button
v-show="
comments_input[comment.comments.id] !==
comment.comments.content
"
class="btn-success btn i-carbon-save"
@click="update_comment(comment.comments.id)"
></button>
<button
@click="delete_comment(comment.comments.id)"
class="btn-error btn i-carbon-trash-can"
></button>
<div v-if="comment.comments.authorId == user?.id" class="chat-image">
<button v-show="comments_input[comment.comments.id] !==
comment.comments.content
" class="btn-success btn i-carbon-save" @click="update_comment(comment.comments.id)"></button>
<button @click="delete_comment(comment.comments.id)" class="btn-error btn i-carbon-trash-can"></button>
</div>
</div>
</div>
Expand Down

0 comments on commit 8e5383d

Please sign in to comment.