h/projectreshoot
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Updated movie page to show crew titles

Browse Source
This commit is contained in:
Haelnorr
2025-03-01 19:19:34 +11:00
parent b6e0a977c0
commit 1d5c662bf0
2 changed files with 67 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
handler/movie.go
View File

@@ -31,7 +31,14 @@ func Movie(
Msg("Error occured getting the movie")
return
}
page.Movie(movie, &config.TMDBConfig.Image).Render(r.Context(), w)
credits, err := tmdb.GetCredits(int32(movie_id), config.TMDBToken)
if err != nil {
ErrorPage(http.StatusInternalServerError, w, r)
logger.Error().Err(err).Int32("movie_id", int32(movie_id)).
Msg("Error occured getting the movie credits")
return
}
page.Movie(movie, credits, &config.TMDBConfig.Image).Render(r.Context(), w)
},
)
}

66
view/page/movie.templ
View File

@@ -3,17 +3,55 @@ package page
import "projectreshoot/tmdb"
import "projectreshoot/view/layout"
templ Movie(movie *tmdb.Movie, image *tmdb.Image) {
templ Movie(movie *tmdb.Movie, credits *tmdb.Credits, image *tmdb.Image) {
@layout.Global() {
<div class="bg-surface0 md:p-2 md:rounded-lg">
<div class="flex items-center">
<div class="bg-overlay2 rounded-lg">
<div class="md:bg-surface0 md:p-2 md:rounded-lg transition-all">
<div
id="billedcrew"
class="hidden"
>
for _, billedcrew := range credits.BilledCrew() {
<span class="flex flex-col text-left w-[130px] md:w-[180px]">
<span class="font-bold">{ billedcrew.Name }</span>
<span class="text-subtext1">{ billedcrew.FRoles() }</span>
</span>
}
</div>
<div class="flex items-start">
<div class="w-[154px] md:w-[300px] flex-col">
<img
class="object-cover aspect-[2/3] w-[154px] md:w-[300px]
transition-all md:rounded-md shadow-crust shadow-2xl"
transition-all md:rounded-md shadow-black shadow-2xl"
src={ movie.GetPoster(image, "w300") }
alt="Poster"
/>
<div
id="billedcrew-sm"
class="text-sm md:text-lg text-subtext1 flex gap-6
mt-5 flex-wrap justify-around flex-col px-5 md:hidden"
></div>
<script>
function moveBilledCrew() {
const billedCrewMd = document.getElementById('billedcrew-md');
const billedCrewSm = document.getElementById('billedcrew-sm');
const billedCrew = document.getElementById('billedcrew');
if (window.innerWidth < 768) {
billedCrewSm.innerHTML = billedCrew.innerHTML;
billedCrewMd.innerHTML = "";
} else {
billedCrewMd.innerHTML = billedCrew.innerHTML;
billedCrewSm.innerHTML = "";
}
}
window.addEventListener('load', moveBilledCrew);
const resizeObs = new ResizeObserver(() => {
moveBilledCrew();
});
resizeObs.observe(document.body);
</script>
</div>
<div class="flex flex-col flex-1 text-center px-4">
<span class="text-xl md:text-3xl font-semibold">
@@ -21,8 +59,8 @@ templ Movie(movie *tmdb.Movie, image *tmdb.Image) {
</span>
<span class="text-sm md:text-lg text-subtext1">
{ movie.FGenres() }
- { movie.FRuntime() }
- { movie.ReleaseYear() }
&#x2022; { movie.FRuntime() }
&#x2022; { movie.ReleaseYear() }
</span>
<div class="flex justify-center gap-2 mt-2">
<div
@@ -34,6 +72,20 @@ templ Movie(movie *tmdb.Movie, image *tmdb.Image) {
transition-all rounded-sm"
></div>
</div>
<div class="flex flex-col mt-4">
<span class="text-sm md:text-lg text-overlay2 italic">
{ movie.Tagline }
</span>
<div
id="billedcrew-md"
class="hidden text-sm md:text-lg text-subtext1 md:flex gap-6
mt-5 flex-wrap justify-around"
></div>
<span class="text-lg mt-5 font-semibold">Overview</span>
<span class="text-sm md:text-lg text-subtext1">
{ movie.Overview }
</span>
</div>
</div>
</div>
</div>