From e711080f131c78da8802d265798093019a4a1d5f Mon Sep 17 00:00:00 2001
From: Felipe Marinho <felipe.marinho@ifood.com.br>
Date: Fri, 3 Jan 2025 18:12:21 -0300
Subject: [PATCH] chg: feat: display subtitle attributtes on player

---
 .../packages/ui/src/components/media-info.tsx |  2 +-
 .../src/player/components/right-buttons.tsx   |  5 ++--
 front/packages/ui/src/utils.ts                | 26 ++++++++++++++++---
 front/translations/en.json                    |  3 ++-
 front/translations/pt_br.json                 |  3 ++-
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/front/packages/ui/src/components/media-info.tsx b/front/packages/ui/src/components/media-info.tsx
index bffa3d94c..a9642fa08 100644
--- a/front/packages/ui/src/components/media-info.tsx
+++ b/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,
 					]
diff --git a/front/packages/ui/src/player/components/right-buttons.tsx b/front/packages/ui/src/player/components/right-buttons.tsx
index b11131009..d2b4ce36b 100644
--- a/front/packages/ui/src/player/components/right-buttons.tsx
+++ b/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)}
diff --git a/front/packages/ui/src/utils.ts b/front/packages/ui/src/utils.ts
index 18ca5f57d..fadbdc31f 100644
--- a/front/packages/ui/src/utils.ts
+++ b/front/packages/ui/src/utils.ts
@@ -1,5 +1,7 @@
-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;
@@ -7,6 +9,7 @@ export const useLanguageName = () => {
 
 export const useDisplayName = () => {
 	const getLanguageName = useLanguageName();
+	const { t } = useTranslation();
 
 	return (sub: Track) => {
 		const lng = sub.language ? getLanguageName(sub.language) : null;
@@ -14,11 +17,28 @@ export const useDisplayName = () => {
 		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)
diff --git a/front/translations/en.json b/front/translations/en.json
index 54678f378..4e3609a27 100644
--- a/front/translations/en.json
+++ b/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": {
diff --git a/front/translations/pt_br.json b/front/translations/pt_br.json
index 2d51be12e..b55293bfe 100644
--- a/front/translations/pt_br.json
+++ b/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": {