refactor(i18n,format): translate ETA strings; consolidate time/duration formatters
- formatEta was hardcoded English (violated the trilingual rule) -> time.eta.* keys in EN/HU/DE; Scheduler's countdown 'now' likewise. - relativeFromMs added to format.ts; NotificationsPanel drops its duplicate relativeTime/relativeFromMs and the now-orphaned notifications.time.* keys. - Channels' fmtTotalDuration moved to format.ts as formatTotalHours.
This commit is contained in:
parent
5768c1a5cb
commit
9eaec27c7c
10 changed files with 61 additions and 64 deletions
|
|
@ -15,7 +15,7 @@ import {
|
||||||
} from "lucide-react";
|
} from "lucide-react";
|
||||||
import { api, HttpError, type ManagedChannel, type Tag } from "../lib/api";
|
import { api, HttpError, type ManagedChannel, type Tag } from "../lib/api";
|
||||||
import { useDismiss } from "../lib/useDismiss";
|
import { useDismiss } from "../lib/useDismiss";
|
||||||
import { formatEta, formatViews, relativeTime } from "../lib/format";
|
import { formatEta, formatTotalHours, formatViews, relativeTime } from "../lib/format";
|
||||||
import { notify } from "../lib/notifications";
|
import { notify } from "../lib/notifications";
|
||||||
import Tooltip from "./Tooltip";
|
import Tooltip from "./Tooltip";
|
||||||
import DataTable, { type Column } from "./DataTable";
|
import DataTable, { type Column } from "./DataTable";
|
||||||
|
|
@ -28,13 +28,6 @@ export type ChannelsView = "subscribed" | "discovery";
|
||||||
|
|
||||||
export type ChannelStatusFilter = "all" | "needs_full" | "fully_synced" | "hidden";
|
export type ChannelStatusFilter = "all" | "needs_full" | "fully_synced" | "hidden";
|
||||||
|
|
||||||
// Compact total-duration label for a whole channel (hours-scale, so H:MM:SS would be huge).
|
|
||||||
function fmtTotalDuration(sec: number): string {
|
|
||||||
if (!sec) return "—";
|
|
||||||
const h = Math.round(sec / 3600);
|
|
||||||
return h >= 1 ? `${h.toLocaleString()} h` : `${Math.max(1, Math.round(sec / 60))} m`;
|
|
||||||
}
|
|
||||||
|
|
||||||
const STATUS_FILTERS: { id: ChannelStatusFilter; labelKey: string }[] = [
|
const STATUS_FILTERS: { id: ChannelStatusFilter; labelKey: string }[] = [
|
||||||
{ id: "all", labelKey: "channels.filters.all" },
|
{ id: "all", labelKey: "channels.filters.all" },
|
||||||
{ id: "needs_full", labelKey: "channels.filters.needsFull" },
|
{ id: "needs_full", labelKey: "channels.filters.needsFull" },
|
||||||
|
|
@ -287,7 +280,7 @@ export default function Channels({
|
||||||
nowrap: true,
|
nowrap: true,
|
||||||
sortable: true,
|
sortable: true,
|
||||||
sortValue: (c) => c.total_duration_seconds,
|
sortValue: (c) => c.total_duration_seconds,
|
||||||
render: (c) => <span className="text-muted tabular-nums">{fmtTotalDuration(c.total_duration_seconds)}</span>,
|
render: (c) => <span className="text-muted tabular-nums">{formatTotalHours(c.total_duration_seconds)}</span>,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: "types",
|
key: "types",
|
||||||
|
|
|
||||||
|
|
@ -19,7 +19,7 @@ import {
|
||||||
type VideoHiddenMeta,
|
type VideoHiddenMeta,
|
||||||
type VideoWatchedMeta,
|
type VideoWatchedMeta,
|
||||||
} from "../lib/notifications";
|
} from "../lib/notifications";
|
||||||
import { channelYouTubeUrl } from "../lib/format";
|
import { channelYouTubeUrl, relativeFromMs, relativeTime } from "../lib/format";
|
||||||
import type { Page } from "../lib/urlState";
|
import type { Page } from "../lib/urlState";
|
||||||
import { LEVEL_STYLE } from "./Toaster";
|
import { LEVEL_STYLE } from "./Toaster";
|
||||||
|
|
||||||
|
|
@ -29,22 +29,6 @@ import { LEVEL_STYLE } from "./Toaster";
|
||||||
// there's one indicator and one place to look. Transient toasts still pop via the Toaster.
|
// there's one indicator and one place to look. Transient toasts still pop via the Toaster.
|
||||||
const POLL_MS = 8000;
|
const POLL_MS = 8000;
|
||||||
|
|
||||||
function relativeTime(iso: string | null, t: (k: string, o?: any) => string): string {
|
|
||||||
if (!iso) return "";
|
|
||||||
return relativeFromMs(new Date(iso).getTime(), t);
|
|
||||||
}
|
|
||||||
|
|
||||||
function relativeFromMs(ms: number, t: (k: string, o?: any) => string): string {
|
|
||||||
const secs = Math.max(0, Math.round((Date.now() - ms) / 1000));
|
|
||||||
// Reuse the bell's relative-time strings (notifications.time.*) — same format, no dupes.
|
|
||||||
if (secs < 60) return t("notifications.time.justNow");
|
|
||||||
const mins = Math.round(secs / 60);
|
|
||||||
if (mins < 60) return t("notifications.time.minutes", { count: mins });
|
|
||||||
const hours = Math.round(mins / 60);
|
|
||||||
if (hours < 24) return t("notifications.time.hours", { count: hours });
|
|
||||||
return t("notifications.time.days", { count: Math.round(hours / 24) });
|
|
||||||
}
|
|
||||||
|
|
||||||
export default function NotificationsPanel({
|
export default function NotificationsPanel({
|
||||||
filters,
|
filters,
|
||||||
setFilters,
|
setFilters,
|
||||||
|
|
@ -253,7 +237,7 @@ function NotificationRow({
|
||||||
<div className="flex items-baseline gap-2">
|
<div className="flex items-baseline gap-2">
|
||||||
<span className="font-medium text-sm">{title}</span>
|
<span className="font-medium text-sm">{title}</span>
|
||||||
<span className="text-[11px] text-muted shrink-0">
|
<span className="text-[11px] text-muted shrink-0">
|
||||||
{relativeTime(n.created_at, t)}
|
{relativeTime(n.created_at)}
|
||||||
</span>
|
</span>
|
||||||
</div>
|
</div>
|
||||||
{body && <div className="text-sm text-muted mt-0.5">{body}</div>}
|
{body && <div className="text-sm text-muted mt-0.5">{body}</div>}
|
||||||
|
|
@ -338,7 +322,7 @@ function ClientActivityRow({
|
||||||
{n.title && <div className="text-sm font-semibold">{n.title}</div>}
|
{n.title && <div className="text-sm font-semibold">{n.title}</div>}
|
||||||
<div className="text-sm break-words">{n.message}</div>
|
<div className="text-sm break-words">{n.message}</div>
|
||||||
<div className="flex items-center gap-2 mt-0.5">
|
<div className="flex items-center gap-2 mt-0.5">
|
||||||
<span className="text-[11px] text-muted">{relativeFromMs(n.ts, t)}</span>
|
<span className="text-[11px] text-muted">{relativeFromMs(n.ts)}</span>
|
||||||
{needsAction && (
|
{needsAction && (
|
||||||
<span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
|
<span className="text-[10px] uppercase tracking-wide font-semibold text-accent">
|
||||||
{t("notifications.actionNeeded")}
|
{t("notifications.actionNeeded")}
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
import { useEffect, useState } from "react";
|
import { useEffect, useState } from "react";
|
||||||
import { useTranslation } from "react-i18next";
|
import { useTranslation } from "react-i18next";
|
||||||
|
import i18n from "../i18n";
|
||||||
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
import { useMutation, useQueryClient } from "@tanstack/react-query";
|
||||||
import {
|
import {
|
||||||
Activity,
|
Activity,
|
||||||
|
|
@ -31,7 +32,7 @@ function secsUntil(iso: string | null): number | null {
|
||||||
}
|
}
|
||||||
|
|
||||||
function fmtCountdown(s: number): string {
|
function fmtCountdown(s: number): string {
|
||||||
if (s <= 0) return "now";
|
if (s <= 0) return i18n.t("time.eta.now");
|
||||||
if (s < 60) return `${s}s`;
|
if (s < 60) return `${s}s`;
|
||||||
const m = Math.floor(s / 60);
|
const m = Math.floor(s / 60);
|
||||||
if (m < 60) return `${m}m ${s % 60}s`;
|
if (m < 60) return `${m}m ${s % 60}s`;
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,5 @@
|
||||||
"openInManager": "Kanalverwaltung",
|
"openInManager": "Kanalverwaltung",
|
||||||
"openOnYouTube": "Auf YouTube öffnen",
|
"openOnYouTube": "Auf YouTube öffnen",
|
||||||
"unhidden": "Eingeblendet „{{title}}”",
|
"unhidden": "Eingeblendet „{{title}}”",
|
||||||
"unwatched": "Als nicht angesehen markiert „{{title}}”",
|
"unwatched": "Als nicht angesehen markiert „{{title}}”"
|
||||||
"time": {
|
|
||||||
"justNow": "gerade eben",
|
|
||||||
"minutes": "vor {{count}} Min.",
|
|
||||||
"hours": "vor {{count}} Std.",
|
|
||||||
"days": "vor {{count}} T."
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,5 +6,14 @@
|
||||||
"daysAgo": "vor {{count}} T.",
|
"daysAgo": "vor {{count}} T.",
|
||||||
"weeksAgo": "vor {{count}} Wo.",
|
"weeksAgo": "vor {{count}} Wo.",
|
||||||
"monthsAgo": "vor {{count}} Mon.",
|
"monthsAgo": "vor {{count}} Mon.",
|
||||||
"yearsAgo": "vor {{count}} J."
|
"yearsAgo": "vor {{count}} J.",
|
||||||
|
"eta": {
|
||||||
|
"now": "jetzt",
|
||||||
|
"done": "fertig",
|
||||||
|
"lessThanHour": "< 1 Stunde",
|
||||||
|
"hours_one": "~{{count}} Stunde",
|
||||||
|
"hours_other": "~{{count}} Stunden",
|
||||||
|
"days_one": "~{{count}} Tag",
|
||||||
|
"days_other": "~{{count}} Tage"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,5 @@
|
||||||
"openInManager": "Channel manager",
|
"openInManager": "Channel manager",
|
||||||
"openOnYouTube": "Open on YouTube",
|
"openOnYouTube": "Open on YouTube",
|
||||||
"unhidden": "Unhidden “{{title}}”",
|
"unhidden": "Unhidden “{{title}}”",
|
||||||
"unwatched": "Unwatched “{{title}}”",
|
"unwatched": "Unwatched “{{title}}”"
|
||||||
"time": {
|
|
||||||
"justNow": "just now",
|
|
||||||
"minutes": "{{count}}m ago",
|
|
||||||
"hours": "{{count}}h ago",
|
|
||||||
"days": "{{count}}d ago"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,5 +6,14 @@
|
||||||
"daysAgo": "{{count}}d ago",
|
"daysAgo": "{{count}}d ago",
|
||||||
"weeksAgo": "{{count}} wk ago",
|
"weeksAgo": "{{count}} wk ago",
|
||||||
"monthsAgo": "{{count}} mo ago",
|
"monthsAgo": "{{count}} mo ago",
|
||||||
"yearsAgo": "{{count}} yr ago"
|
"yearsAgo": "{{count}} yr ago",
|
||||||
|
"eta": {
|
||||||
|
"now": "now",
|
||||||
|
"done": "done",
|
||||||
|
"lessThanHour": "< 1 hour",
|
||||||
|
"hours_one": "~{{count}} hour",
|
||||||
|
"hours_other": "~{{count}} hours",
|
||||||
|
"days_one": "~{{count}} day",
|
||||||
|
"days_other": "~{{count}} days"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -11,11 +11,5 @@
|
||||||
"openInManager": "Csatornakezelő",
|
"openInManager": "Csatornakezelő",
|
||||||
"openOnYouTube": "Megnyitás a YouTube-on",
|
"openOnYouTube": "Megnyitás a YouTube-on",
|
||||||
"unhidden": "Megjelenítve: „{{title}}”",
|
"unhidden": "Megjelenítve: „{{title}}”",
|
||||||
"unwatched": "Megtekintés visszavonva: „{{title}}”",
|
"unwatched": "Megtekintés visszavonva: „{{title}}”"
|
||||||
"time": {
|
|
||||||
"justNow": "az imént",
|
|
||||||
"minutes": "{{count}} perce",
|
|
||||||
"hours": "{{count}} órája",
|
|
||||||
"days": "{{count}} napja"
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -6,5 +6,14 @@
|
||||||
"daysAgo": "{{count}} napja",
|
"daysAgo": "{{count}} napja",
|
||||||
"weeksAgo": "{{count}} hete",
|
"weeksAgo": "{{count}} hete",
|
||||||
"monthsAgo": "{{count}} hónapja",
|
"monthsAgo": "{{count}} hónapja",
|
||||||
"yearsAgo": "{{count}} éve"
|
"yearsAgo": "{{count}} éve",
|
||||||
|
"eta": {
|
||||||
|
"now": "most",
|
||||||
|
"done": "kész",
|
||||||
|
"lessThanHour": "< 1 óra",
|
||||||
|
"hours_one": "~{{count}} óra",
|
||||||
|
"hours_other": "~{{count}} óra",
|
||||||
|
"days_one": "~{{count}} nap",
|
||||||
|
"days_other": "~{{count}} nap"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -2,8 +2,14 @@ import i18n from "../i18n";
|
||||||
|
|
||||||
export function relativeTime(iso: string | null): string {
|
export function relativeTime(iso: string | null): string {
|
||||||
if (!iso) return "";
|
if (!iso) return "";
|
||||||
const then = new Date(iso).getTime();
|
return relativeFromMs(new Date(iso).getTime());
|
||||||
const secs = Math.max(0, (Date.now() - then) / 1000);
|
}
|
||||||
|
|
||||||
|
/** Relative-time label from an epoch-millis timestamp (the ms-based half of relativeTime, for
|
||||||
|
* client-side notifications whose timestamps are already numbers). One implementation, one
|
||||||
|
* set of `time.*` strings — shared instead of re-implemented per component. */
|
||||||
|
export function relativeFromMs(ms: number): string {
|
||||||
|
const secs = Math.max(0, (Date.now() - ms) / 1000);
|
||||||
const units: [number, string][] = [
|
const units: [number, string][] = [
|
||||||
[60, "time.secondsAgo"],
|
[60, "time.secondsAgo"],
|
||||||
[3600, "time.minutesAgo"],
|
[3600, "time.minutesAgo"],
|
||||||
|
|
@ -51,17 +57,21 @@ export function quotaActionLabel(action: string): string {
|
||||||
return i18n.t(`quotaActions.${action}`, { defaultValue: action });
|
return i18n.t(`quotaActions.${action}`, { defaultValue: action });
|
||||||
}
|
}
|
||||||
|
|
||||||
/** Coarse, human ETA for a remaining duration in seconds ("~3 hours", "~2 days"). */
|
/** Coarse, human ETA for a remaining duration in seconds ("~3 hours", "~2 days"). Translated
|
||||||
|
* via the `time.eta.*` keys (was hardcoded English, violating the trilingual rule). */
|
||||||
export function formatEta(seconds: number): string {
|
export function formatEta(seconds: number): string {
|
||||||
if (seconds <= 0) return "done";
|
if (seconds <= 0) return i18n.t("time.eta.done");
|
||||||
const hours = seconds / 3600;
|
const hours = seconds / 3600;
|
||||||
if (hours < 1) return "< 1 hour";
|
if (hours < 1) return i18n.t("time.eta.lessThanHour");
|
||||||
if (hours < 24) {
|
if (hours < 24) return i18n.t("time.eta.hours", { count: Math.round(hours) });
|
||||||
const h = Math.round(hours);
|
return i18n.t("time.eta.days", { count: Math.round(hours / 24) });
|
||||||
return `~${h} hour${h === 1 ? "" : "s"}`;
|
}
|
||||||
}
|
|
||||||
const d = Math.round(hours / 24);
|
/** Compact whole-channel total length ("12 h", "45 m"), hours-scale so H:MM:SS isn't huge. */
|
||||||
return `~${d} day${d === 1 ? "" : "s"}`;
|
export function formatTotalHours(sec: number): string {
|
||||||
|
if (!sec) return "—";
|
||||||
|
const h = Math.round(sec / 3600);
|
||||||
|
return h >= 1 ? `${h.toLocaleString()} h` : `${Math.max(1, Math.round(sec / 60))} m`;
|
||||||
}
|
}
|
||||||
|
|
||||||
export function formatViews(n: number | null): string {
|
export function formatViews(n: number | null): string {
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue