122 lines
3.3 KiB
Plaintext
122 lines
3.3 KiB
Plaintext
---
|
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
|
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
|
import Attributes from "components/Attributes.astro";
|
|
import Credits from "components/Credits.astro";
|
|
import DownloadButton from "components/DownloadButton.astro";
|
|
import RichText from "components/RichText/RichText.astro";
|
|
import VideoPlayer from "components/VideoPlayer.astro";
|
|
import { getI18n } from "src/i18n/i18n";
|
|
import { payload } from "src/utils/payload";
|
|
import { formatInlineTitle, formatRichTextToString } from "src/utils/format";
|
|
import { fetchOr404 } from "src/utils/responses";
|
|
|
|
const id = Astro.params.id!;
|
|
const video = await fetchOr404(Astro, () => payload.getVideoByID(id));
|
|
if (video instanceof Response) {
|
|
return video;
|
|
}
|
|
|
|
const { getLocalizedMatch, t, formatFilesize, formatDate } = await getI18n(
|
|
Astro.locals.currentLocale
|
|
);
|
|
const {
|
|
translations,
|
|
attributes,
|
|
filename,
|
|
url,
|
|
credits,
|
|
filesize,
|
|
updatedAt,
|
|
createdAt,
|
|
thumbnail,
|
|
} = video;
|
|
|
|
const { pretitle, title, subtitle, description, language } = getLocalizedMatch(translations);
|
|
|
|
const metaAttributes = [
|
|
...(filename && title !== filename
|
|
? [
|
|
{
|
|
title: t("global.media.attributes.filename"),
|
|
icon: "material-symbols:video-file",
|
|
values: [{ name: filename }],
|
|
withBorder: false,
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
title: t("global.media.attributes.filesize"),
|
|
icon: "material-symbols:hard-drive",
|
|
values: [{ name: formatFilesize(filesize) }],
|
|
withBorder: false,
|
|
},
|
|
{
|
|
title: t("global.media.attributes.createdAt"),
|
|
icon: "material-symbols:calendar-add-on",
|
|
values: [{ name: formatDate(new Date(createdAt)) }],
|
|
withBorder: false,
|
|
},
|
|
{
|
|
title: t("global.media.attributes.updatedAt"),
|
|
icon: "material-symbols:edit-calendar",
|
|
values: [{ name: formatDate(new Date(updatedAt)) }],
|
|
withBorder: false,
|
|
},
|
|
];
|
|
---
|
|
|
|
{/* ------------------------------------------- HTML ------------------------------------------- */}
|
|
|
|
<AppLayout
|
|
openGraph={{
|
|
title: formatInlineTitle({ pretitle, title, subtitle }),
|
|
description: description && formatRichTextToString(description),
|
|
thumbnail,
|
|
video,
|
|
}}>
|
|
<div id="container">
|
|
<VideoPlayer class="video_id-video-player" video={video} />
|
|
|
|
<div id="info">
|
|
<AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} lang={language} />
|
|
{description && <RichText content={description} context={{ lang: language }} />}
|
|
{attributes.length > 0 && <Attributes attributes={attributes} />}
|
|
{credits.length > 0 && <Credits credits={credits} />}
|
|
{metaAttributes.length > 0 && <Attributes attributes={metaAttributes} />}
|
|
<DownloadButton href={url} filename={filename} />
|
|
</div>
|
|
</div>
|
|
</AppLayout>
|
|
|
|
{/* ------------------------------------------- CSS -------------------------------------------- */}
|
|
|
|
<style>
|
|
#container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 6em;
|
|
align-items: center;
|
|
|
|
h1 {
|
|
max-width: 35em;
|
|
}
|
|
|
|
& > .video_id-video-player {
|
|
max-height: 60vh;
|
|
width: auto;
|
|
}
|
|
|
|
& > #info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4em;
|
|
align-items: start;
|
|
|
|
@media (max-width: 35rem) {
|
|
gap: 6em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|