Add path based i18n

front/.eslintrc.json

@@ -2,6 +2,7 @@
 	"extends": ["next/core-web-vitals", "prettier"],
 	"plugins": ["header"],
 	"rules": {
+		"@next/next/no-img-element": "off",
 		"header/header": [
 			"error",
 			"block",

front/locales/en/browse.json

@@ -13,6 +13,7 @@
 	},
 	"browse": {
 		"sortby": "Sort by {{key}}",
+		"sortby-tt": "Sort by",
 		"sortkey": {
 			"name": "Name",
 			"startAir": "Start air",
@@ -21,6 +22,12 @@
 		"sortord": {
 			"asc": "asc",
 			"desc": "decs"
-		}
+		},
+		"switchToGrid": "Switch to grid view",
+		"switchToList": "Switch to list view"
+	},
+	"misc": {
+		"prev-page": "Previous page",
+		"next-page": "Next page"
 	}
 }

front/locales/fr/browse.json

@@ -8,11 +8,12 @@
 		"staff": "Staff",
 		"staff-none": "Aucun membre du staff connu",
 		"noOverview": "Aucune description disponible",
-		"episode-none": "Il n'y a pas d'episodes dans cette saison",
+		"episode-none": "Il n'y a pas d'épisodes dans cette saison",
 		"episodeNoMetadata": "Aucune metadonnée disponible"
 	},
 	"browse": {
 		"sortby": "Trier par {{key}}",
+		"sortby-tt": "Trier par",
 		"sortkey": {
 			"name": "Nom",
 			"startAir": "Date de sortie",
@@ -21,6 +22,12 @@
 		"sortord": {
 			"asc": "asc",
 			"desc": "decs"
-		}
+		},
+		"switchToGrid": "Passer en vue grille",
+		"switchToList": "Passer en vue liste"
+	},
+	"misc": {
+		"prev-page": "Page précédente",
+		"next-page": "Page suivante"
 	}
 }

front/next.config.js

@@ -34,6 +34,10 @@ const nextConfig = {
 			},
 		];
 	},
+	i18n: {
+		locales: ["en", "fr"],
+		defaultLocale: "en",
+	},
 };
 
 if (process.env.NODE_ENV !== "production") {

front/src/components/horizontal-list.tsx

@@ -19,11 +19,13 @@
  */
 
 import { ArrowLeft, ArrowRight } from "@mui/icons-material";
-import { Box, IconButton, Typography } from "@mui/material";
+import { Box, IconButton, Tooltip, Typography } from "@mui/material";
 import { ReactNode, useRef } from "react";
 import { Container } from "./container";
+import useTranslation from "next-translate/useTranslation";
 
 export const HorizontalList = ({ title, noContent, children }: { title: string, noContent: string, children: ReactNode[] }) => {
+	const { t } = useTranslation("browse");
 	const ref = useRef<HTMLDivElement>(null);
 	const getScrollSize = () => {
 		const childSize = ref.current?.children[0].clientWidth;
@@ -39,38 +41,42 @@ export const HorizontalList = ({ title, noContent, children }: { title: string,
 		<>
 			<Container
 				sx={{ display: "flex", flexDirection: "row", justifyContent: "space-between", py: 3 }}
-			>
+				>
 				<Typography variant="h4" component="h2">
 					{title}
 				</Typography>
 				<Box>
-					<IconButton onClick={() => ref.current?.scrollBy({ left: -getScrollSize(), behavior: "smooth" })}>
+					<Tooltip title={t("misc.prev-page")}>
-						<ArrowLeft />
+						<IconButton aria-label={t("misc.prev-page")} onClick={() => ref.current?.scrollBy({ left: -getScrollSize(), behavior: "smooth" })}>
-					</IconButton>
+							<ArrowLeft />
-					<IconButton onClick={() => ref.current?.scrollBy({ left: getScrollSize(), behavior: "smooth" })}>
+						</IconButton>
-						<ArrowRight />
+					</Tooltip>
-					</IconButton>
+					<Tooltip title={t("misc.next-page")}>
+						<IconButton aria-label={t("misc.next-page")} onClick={() => ref.current?.scrollBy({ left: getScrollSize(), behavior: "smooth" })}>
+							<ArrowRight />
+						</IconButton>
+					</Tooltip>
 				</Box>
 			</Container>
 			{children.length == 0 ? (
 				<Box sx={{ display: "flex", justifyContent: "center" }}>
 					<Typography sx={{ py: 3 }}>{noContent}</Typography>
 				</Box>
-			) : (
+				) : (
-				<Container
+					<Container
-					sx={{
+						sx={{
-						display: "flex",
+							display: "flex",
-						flexDirection: "row",
+							flexDirection: "row",
-						maxWidth: "100%",
+							maxWidth: "100%",
-						overflowY: "auto",
+							overflowY: "auto",
-						pt: 1,
+							pt: 1,
-						pb: 2,
+							pb: 2,
-						overflowX: "visible",
+							overflowX: "visible",
-					}}
+						}}
-					ref={ref}
+						ref={ref}
-				>
+						>
 						{children}
-				</Container>
+					</Container>
 			)}
 		</>
 	);

front/src/components/navbar.tsx

@@ -32,7 +32,6 @@ import {
 	AppBarProps,
 } from "@mui/material";
 import MenuIcon from "@mui/icons-material/Menu";
-/* import logo from "../public/icons/icon.svg"; */
 import useTranslation from "next-translate/useTranslation";
 import Image from "next/image";
 import { ButtonLink } from "~/utils/link";
@@ -55,7 +54,7 @@ const KyooTitle = (props: { sx: SxProps<Theme> }) => {
 				}}
 				href="/"
 			>
-				<Image src={"/icon.svg"} width={24} height={24} alt="" />
+				<img src={"/icon.svg"} width="24px" height="24px" alt="" />
 				<Typography
 					variant="h6"
 					noWrap

front/src/pages/browse/index.tsx

@@ -18,14 +18,7 @@
  * along with Kyoo. If not, see <https://www.gnu.org/licenses/>.
  */
 
-import {
+import { FilterList, GridView, North, Sort, South, ViewList } from "@mui/icons-material";
-	FilterList,
-	GridView,
-	North,
-	Sort,
-	South,
-	ViewList,
-} from "@mui/icons-material";
 import {
 	Box,
 	Button,
@@ -36,6 +29,7 @@ import {
 	Menu,
 	Skeleton,
 	Divider,
+	Tooltip,
 	Typography,
 } from "@mui/material";
 import useTranslation from "next-translate/useTranslation";
@@ -253,6 +247,8 @@ const BrowseSettings = ({
 	const router = useRouter();
 	const { t } = useTranslation("browse");
 
+	const switchViewTitle = layout === Layout.Grid ? t("browse.switchToList") : t("browse.switchToGrid");
+
 	return (
 		<>
 			<Box sx={{ display: "flex", justifyContent: "space-around" }}>
@@ -260,20 +256,28 @@ const BrowseSettings = ({
 					<Button disabled>
 						<FilterList />
 					</Button>
-					<Button
+					<Tooltip title={t("browse.sortby-tt")}>
-						id="sortby"
+						<Button
-						aria-controls={sortAnchor ? "sorby-menu" : undefined}
+							id="sortby"
-						aria-haspopup="true"
+							aria-label={t("browse.sortby-tt")}
-						aria-expanded={sortAnchor ? "true" : undefined}
+							aria-controls={sortAnchor ? "sorby-menu" : undefined}
-						onClick={(event: MouseEvent<HTMLElement>) => setSortAnchor(event.currentTarget)}
+							aria-haspopup="true"
-					>
+							aria-expanded={sortAnchor ? "true" : undefined}
-						<Sort />
+							onClick={(event: MouseEvent<HTMLElement>) => setSortAnchor(event.currentTarget)}
-						{t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
+						>
-						{sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
+							<Sort />
-					</Button>
+							{t("browse.sortby", { key: t(`browse.sortkey.${sortKey}`) })}
-					<Button onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}>
+							{sortOrd === SortOrd.Asc ? <South fontSize="small" /> : <North fontSize="small" />}
-						{layout === Layout.List ? <GridView /> : <ViewList />}
+						</Button>
-					</Button>
+					</Tooltip>
+					<Tooltip title={switchViewTitle}>
+						<Button
+							onClick={() => setLayout(layout === Layout.List ? Layout.Grid : Layout.List)}
+							aria-label={switchViewTitle}
+						>
+							{layout === Layout.List ? <GridView /> : <ViewList />}
+						</Button>
+					</Tooltip>
 				</ButtonGroup>
 			</Box>
 			<Menu

front/src/pages/movie/[slug].tsx

@@ -135,7 +135,7 @@ export const ShowHeader = ({ data }: { data?: Show | Movie }) => {
 						{data?.name ?? <Skeleton width="15rem" />}
 					</Typography>
 					{(!data || getDisplayDate(data)) && (
-						<Typography variant="h5" sx={{ color: { md: "white" }, fontWeight: 300, mb: ".5rem" }}>
+						<Typography component="p" variant="h5" sx={{ color: { md: "white" }, fontWeight: 300, mb: ".5rem" }}>
 							{data != undefined ? (
 								getDisplayDate(data)
 							) : (