130 lines
3.4 KiB
Plaintext
130 lines
3.4 KiB
Plaintext
---
|
|
import AppLayout from "components/AppLayout/AppLayout.astro";
|
|
import AppLayoutTitle from "components/AppLayout/components/AppLayoutTitle.astro";
|
|
import Attributes from "components/Attributes.astro";
|
|
import AudioPlayer from "components/AudioPlayer.astro";
|
|
import Credits from "components/Credits.astro";
|
|
import DownloadButton from "components/DownloadButton.astro";
|
|
import RichText from "components/RichText/RichText.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;
|
|
const audio = await fetchOr404(() => payload.getAudioByID(id!));
|
|
if (audio instanceof Response) {
|
|
return audio;
|
|
}
|
|
|
|
const { getLocalizedMatch, t, formatFilesize, formatDate } = await getI18n(
|
|
Astro.locals.currentLocale
|
|
);
|
|
const {
|
|
translations,
|
|
attributes,
|
|
filename,
|
|
url,
|
|
credits,
|
|
filesize,
|
|
createdAt,
|
|
updatedAt,
|
|
thumbnail,
|
|
} = audio;
|
|
|
|
const { pretitle, title, subtitle, description } = getLocalizedMatch(translations);
|
|
|
|
const smallTitle = !subtitle && !pretitle;
|
|
|
|
const metaAttributes = [
|
|
...(filename && title !== filename
|
|
? [
|
|
{
|
|
title: t("global.media.attributes.filename"),
|
|
icon: "material-symbols:audio-file-outline",
|
|
values: [{ name: filename }],
|
|
withBorder: false,
|
|
},
|
|
]
|
|
: []),
|
|
{
|
|
title: t("global.media.attributes.filesize"),
|
|
icon: "material-symbols:hard-drive-outline",
|
|
values: [{ name: formatFilesize(filesize) }],
|
|
withBorder: false,
|
|
},
|
|
{
|
|
title: t("global.media.attributes.createdAt"),
|
|
icon: "material-symbols:calendar-add-on-outline",
|
|
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={{
|
|
thumbnail,
|
|
audio,
|
|
description: description ? formatRichTextToString(description) : undefined,
|
|
title: formatInlineTitle({ pretitle, title, subtitle }),
|
|
}}>
|
|
<div id="container">
|
|
<AudioPlayer audio={audio} />
|
|
|
|
<div id="info">
|
|
{
|
|
smallTitle ? (
|
|
<h1>{title}</h1>
|
|
) : (
|
|
<AppLayoutTitle pretitle={pretitle} title={title} subtitle={subtitle} />
|
|
)
|
|
}
|
|
{description && <RichText content={description} />}
|
|
{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;
|
|
margin-top: 6em;
|
|
align-items: center;
|
|
|
|
> :global(audio) {
|
|
width: 100%;
|
|
}
|
|
|
|
h1 {
|
|
max-width: 35em;
|
|
}
|
|
|
|
& > #info {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 4em;
|
|
align-items: start;
|
|
|
|
@media (max-width: 35rem) {
|
|
gap: 6em;
|
|
}
|
|
}
|
|
}
|
|
</style>
|