BreizhHardware/Jellystat
1
0
Fork 0
mirror of https://github.com/BreizhHardware/Jellystat.git synced 2026-01-18 16:27:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

chore: Fix WatchTimeStats component to use better pluralistaion in i18next for unit labels

Browse Source
This commit is contained in:
CyferShepard
2024-07-29 08:22:45 +02:00
parent 6fac8127a0
commit 40f307b39c
1 changed files with 17 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
src/pages/components/item-info/globalstats/watchtimestats.jsx
View File

@@ -3,23 +3,19 @@ import i18next from "i18next";
import { Trans } from "react-i18next";
function WatchTimeStats(props) {
function formatTime(totalSeconds, numberClassName, labelClassName) {
const units = [
{ label: i18next.t("UNITS.DAY"), seconds: 86400 },
{ label: i18next.t("UNITS.HOUR"), seconds: 3600 },
{ label: i18next.t("UNITS.MINUTE"), seconds: 60 },
{ label: "UNITS.DAY", seconds: 86400 },
{ label: "UNITS.HOUR", seconds: 3600 },
{ label: "UNITS.MINUTE", seconds: 60 },
];
const parts = units.reduce((result, { label, seconds }) => {
const value = Math.floor(totalSeconds / seconds);
if (value) {
const formattedValue = <p className={numberClassName}>{value}</p>;
const formattedLabel = (
<span className={labelClassName}>
{value === 1 ? label : i18next.t(`UNITS.${label.toUpperCase()}S`) }
</span>
);
const labelPlural = label.toUpperCase() + "S";
const formattedLabel = <span className={labelClassName}>{value === 1 ? i18next.t(label) : i18next.t(labelPlural)}</span>;
result.push(
<span key={label} className="time-part">
{formattedValue} {formattedLabel}
@@ -29,20 +25,20 @@ function WatchTimeStats(props) {
}
return result;
}, []);
if (parts.length === 0) {
return (
<>
<p className={numberClassName}>0</p>{' '}
<p className={labelClassName}><Trans i18nKey="UNITS.MINUTES"/></p>
<p className={numberClassName}>0</p>{" "}
<p className={labelClassName}>
<Trans i18nKey="UNITS.MINUTES" />
</p>
</>
);
}
return parts;
}
return (
<div className="global-stats">
@@ -51,11 +47,12 @@ function WatchTimeStats(props) {
</div>
<div className="play-duration-stats" key={props.data.ItemId}>
<p className="stat-value"> {props.data.Plays || 0}</p>
<p className="stat-unit" ><Trans i18nKey="UNITS.PLAYS"/> /</p>
<>{formatTime(props.data.total_playback_duration || 0,'stat-value','stat-unit')}</>
<p className="stat-value"> {props.data.Plays || 0}</p>
<p className="stat-unit">
<Trans i18nKey="UNITS.PLAYS" /> /
</p>
<>{formatTime(props.data.total_playback_duration || 0, "stat-value", "stat-unit")}</>
</div>
</div>
);