Skip to content

Commit

Permalink
movie page: add top margin
Browse files Browse the repository at this point in the history
  • Loading branch information
@mirsella
mirsella committed Jan 5, 2025
1 parent cced358 commit e6884b3
Showing 1 changed file with 129 additions and 123 deletions.
252 changes: 129 additions & 123 deletions pages/movies/[id].vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,149 +65,155 @@ async function update_comment(comment_id: string) {
</script>

<template>
<!-- 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 class="mt-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>

<div
v-if="infos"
class="flex justify-center flex-wrap mx-auto max-w-7xl px-8 space-y-4"
>
<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>
<!-- Loading State -->
<div v-if="!infos && !infos_error" class="flex justify-center my-8">
<span class="loading loading-spinner loading-lg"></span>
</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"
<div
v-if="infos"
class="flex justify-center flex-wrap mx-auto max-w-7xl px-8 space-y-4"
>
<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}`"
/>
</figure>
<div class="card-body">
<p>{{ infos.overview }}</p>
<p>
{{ $t("movies.ReleaseDate") }}:
{{ new Date(infos.release_date).toDateString() }}
</p>
<p>{{ $t("movies.Runtime") }}: {{ infos.runtime }}m</p>
<p>
note: {{ infos.vote_average }}/10 ({{ infos.vote_count }} votes)
</p>
<p v-if="infos.director && infos.director[0]">
{{ $t("movies.Director") }}: {{ infos.director[0].name }}
</p>
<p>
{{ $t("movies.Companies") }}:
{{ infos.production_companies.map((e: any) => e.name).join(", ") }}
</p>
</div>
</video>
</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 class="card bg-base-100 shadow-md shadow-secondary w-full">
<div class="card card-side card-compact card-body">
<figure>
<img
:src="`https://media.themoviedb.org/t/p/w500${cast.profile_path}`"
:src="`https://image.tmdb.org/t/p/w500${infos.poster_path}`"
alt="poster"
/>
</figure>
<p class="card-title mx-auto mt-1">{{ cast.name }}</p>
<div class="card-body !pt-2 gap-0">
<div class="card-body">
<p>{{ infos.overview }}</p>
<p>
{{ $t("movies.ReleaseDate") }}:
{{ new Date(infos.release_date).toDateString() }}
</p>
<p>{{ $t("movies.Runtime") }}: {{ infos.runtime }}m</p>
<p>
note: {{ infos.vote_average }}/10 ({{ infos.vote_count }} votes)
</p>
<p v-if="infos.director && infos.director[0]">
{{ $t("movies.Director") }}: {{ infos.director[0].name }}
</p>
<p>
{{ $t("movies.Character") }}: <b>{{ cast.character }}</b>
{{ $t("movies.Companies") }}:
{{
infos.production_companies.map((e: any) => e.name).join(", ")
}}
</p>
<p>{{ $t("movies.Popularity") }}: {{ cast.popularity }}</p>
</div>
</div>
</div>
</div>

<div class="card bg-base-100 shadow-md shadow-secondary w-full">
<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"
>
post
</button>
</div>
<div class="mr-20">
<div class="flex flex-wrap justify-evenly gap-4 p-4">
<div
v-for="comment of comments"
class="chat"
:class="[
comment.comments.authorId == user?.id ? 'chat-end' : 'chat-start',
]"
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 class="chat-header text-lg ml-1">
user <b>{{ comment.users?.username || "deleted" }}</b> on
<ClientOnly>
{{
new Date(comment.comments.updated_at).toLocaleDateString()
}}:
</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]"
<figure>
<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">
<p>
{{ $t("movies.Character") }}: <b>{{ cast.character }}</b>
</p>
<p>{{ $t("movies.Popularity") }}: {{ cast.popularity }}</p>
</div>
</div>
</div>
</div>

<div class="card bg-base-100 shadow-md shadow-secondary w-full">
<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"
>
post
</button>
</div>
<div class="mr-20">
<div
v-if="comment.comments.authorId == user?.id"
class="chat-image"
v-for="comment of comments"
class="chat"
:class="[
comment.comments.authorId == user?.id
? 'chat-end'
: 'chat-start',
]"
>
<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 class="chat-header text-lg ml-1">
user <b>{{ comment.users?.username || "deleted" }}</b> on
<ClientOnly>
{{
new Date(comment.comments.updated_at).toLocaleDateString()
}}:
</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]"
/>
</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>
</div>
</div>
</div>
Expand Down

0 comments on commit e6884b3

Please sign in to comment.