peter/siftlode
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat(player): exact upload date inline in the player meta too

Browse source 
Mirror the card change in PlayerModal: append the precise locale-aware date after the
relative time, for both the active video and a linked (navigated) video's stats.
This commit is contained in:
npeter83 2026-06-16 03:09:28 +02:00
parent d6693d2c60
commit 4f1e33e3cc
1 changed files with 19 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

22
frontend/src/components/PlayerModal.tsx
View file

@ -201,8 +201,17 @@ export default function PlayerModal({
onClose: () => void;
onState: (id: string, status: string) => void;
}) {
const { t } = useTranslation();
const { t, i18n } = useTranslation();
const qc = useQueryClient();
// Precise upload date shown inline after the relative time (e.g. "9 yr ago · 12 Jan 2017").
const fullDate = (d: string | null | undefined) =>
d
? new Date(d).toLocaleDateString(i18n.language, {
year: "numeric",
month: "short",
day: "numeric",
})
: "";
// Track the playing item by id (not a frozen index) so it survives the queue changing
// under us — e.g. an item removed in another tab. The index is derived from the *live*
// queue, so the N / M counter and prev/next neighbours stay correct without disrupting
@ -550,7 +559,10 @@ export default function PlayerModal({
{active.view_count != null && (
<span>· {t("player.views", { count: active.view_count, formattedCount: formatViews(active.view_count) })}</span>
)}
<span>· {relativeTime(active.published_at)}</span>
<span>
· {relativeTime(active.published_at)}
{active.published_at && ` · ${fullDate(active.published_at)}`}
</span>
{active.duration_seconds != null && (
<span>· {formatDuration(active.duration_seconds)}</span>
)}
@ -566,7 +578,11 @@ export default function PlayerModal({
{detail.data?.view_count != null && (
<span>· {t("player.views", { count: detail.data.view_count, formattedCount: formatViews(detail.data.view_count) })}</span>
)}
{detail.data?.published_at && <span>· {relativeTime(detail.data.published_at)}</span>}
{detail.data?.published_at && (
<span>
· {relativeTime(detail.data.published_at)} · {fullDate(detail.data.published_at)}
</span>
)}
{detail.data?.duration_seconds != null && (
<span>· {formatDuration(detail.data.duration_seconds)}</span>
)}