chg: feat: display subtitle attributtes on player

front/packages/ui/src/components/media-info.tsx

@@ -59,7 +59,7 @@ const MediaInfoTable = ({
 						// Only show it if there is more than one track
 						track.isDefault && !singleTrack ? t("mediainfo.default") : undefined,
 						track.isForced ? t("mediainfo.forced") : undefined,
-						track.isHearingImpaired ? t("mediainfo.hearing-impaired") : undefined,
+						"isHearingImpaired" in track &&  track.isHearingImpaired ? t("mediainfo.hearing-impaired") : undefined,
 						"isExternal" in track && track.isExternal ? t("mediainfo.external") : undefined,
 						track.codec,
 					]

front/packages/ui/src/player/components/right-buttons.tsx

@@ -29,7 +29,7 @@ import { useAtom } from "jotai";
 import { useTranslation } from "react-i18next";
 import { Platform, View } from "react-native";
 import { type Stylable, useYoshiki } from "yoshiki/native";
-import { useDisplayName } from "../../utils";
+import { useDisplayName, useSubtitleName } from "../../utils";
 import { fullscreenAtom, subtitleAtom } from "../state";
 import { AudiosMenu, QualitiesMenu } from "../video";
 
@@ -50,6 +50,7 @@ export const RightButtons = ({
 	const { css } = useYoshiki();
 	const { t } = useTranslation();
 	const getDisplayName = useDisplayName();
+	const getSubtitleName = useSubtitleName();
 	const [isFullscreen, setFullscreen] = useAtom(fullscreenAtom);
 	const [selectedSubtitle, setSubtitle] = useAtom(subtitleAtom);
 
@@ -74,7 +75,7 @@ export const RightButtons = ({
 					{subtitles.map((x, i) => (
 						<Menu.Item
 							key={x.index ?? i}
-							label={x.link ? getDisplayName(x) : `${getDisplayName(x)} (${x.codec})`}
+							label={x.link ? getSubtitleName(x) : `${getSubtitleName(x)} (${x.codec})`}
 							selected={selectedSubtitle === x}
 							disabled={!x.link}
 							onSelect={() => setSubtitle(x)}

front/packages/ui/src/utils.ts

@@ -1,24 +1,44 @@
-import type { Track } from "@kyoo/models";
+import type { Subtitle, Track } from "@kyoo/models";
+
 import intl from "langmap";
+import { useTranslation } from "react-i18next";
 
 export const useLanguageName = () => {
 	return (lang: string) => intl[lang]?.nativeName;
 };
 
 export const useDisplayName = () => {
 	const getLanguageName = useLanguageName();
+	const { t } = useTranslation();
 
 	return (sub: Track) => {
 		const lng = sub.language ? getLanguageName(sub.language) : null;
 
 		if (lng && sub.title && sub.title !== lng) return `${lng} - ${sub.title}`;
 		if (lng) return lng;
 		if (sub.title) return sub.title;
-		if (sub.index !== null) return `Unknown (${sub.index})`;
-		return "Unknown";
+		if (sub.index !== null) return `${t("mediainfo.unknown")} (${sub.index})`;
+		return t("mediainfo.unknown");
 	};
 };
 
+export const useSubtitleName = () => {
+	const getDisplayName = useDisplayName();
+	const { t } = useTranslation();
+
+	return (sub: Subtitle) => {
+		const name = getDisplayName(sub);
+		const attributes = [name];
+
+		if (sub.isDefault) attributes.push(t("mediainfo.default"));
+		if (sub.isForced) attributes.push(t("mediainfo.forced"));
+		if (sub.isHearingImpaired) attributes.push(t("mediainfo.hearing-impaired"));
+		if (sub.isExternal) attributes.push(t("mediainfo.external"));
+
+		return attributes.join(" - ");
+	}
+}
+
 const seenNativeNames = new Set();
 
 export const languageCodes = Object.keys(intl)

front/translations/en.json

@@ -265,7 +265,8 @@
 		"duration": "Duration",
 		"size": "Size",
 		"novideo": "No video",
-		"nocontainer": "Invalid container"
+		"nocontainer": "Invalid container",
+		"unknown": "Unknown"
 	},
 	"admin": {
 		"users": {

front/translations/pt_br.json

@@ -265,7 +265,8 @@
 		"size": "Tamanho",
 		"novideo": "Sem vídeo",
 		"nocontainer": "Contêiner inválido",
-		"external": "Externo"
+		"external": "Externo",
+		"unknown": "Desconhecido"
 	},
 	"admin": {
 		"users": {