Add a snackbar when playback error occurs

front/apps/mobile/app/_layout.tsx

@@ -21,7 +21,7 @@
 import "react-native-reanimated";
 
 import { PortalProvider } from "@gorhom/portal";
-import { ThemeSelector } from "@kyoo/primitives";
+import { SnackbarProvider, ThemeSelector } from "@kyoo/primitives";
 import { DownloadProvider } from "@kyoo/ui";
 import { AccountProvider, createQueryClient, storage, useUserTheme } from "@kyoo/models";
 import { PersistQueryClientProvider } from "@tanstack/react-query-persist-client";
@@ -144,7 +144,9 @@ export default function Root() {
 					<AccountProvider>
 						<DownloadProvider>
 							<NavigationThemeProvider>
-								<Slot />
+								<SnackbarProvider>
+									<Slot />
+								</SnackbarProvider>
 							</NavigationThemeProvider>
 						</DownloadProvider>
 					</AccountProvider>

front/apps/web/src/pages/_app.tsx

@@ -22,7 +22,13 @@ import "../polyfill";
 
 import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import { HiddenIfNoJs, TouchOnlyCss, SkeletonCss, ThemeSelector } from "@kyoo/primitives";
+import {
+	HiddenIfNoJs,
+	TouchOnlyCss,
+	SkeletonCss,
+	ThemeSelector,
+	SnackbarProvider,
+} from "@kyoo/primitives";
 import { WebTooltip } from "@kyoo/primitives/src/tooltip.web";
 import {
 	AccountP,
@@ -138,21 +144,23 @@ const App = ({ Component, pageProps }: AppProps) => {
 						<HydrationBoundary state={queryState}>
 							<ThemeSelector theme={userTheme} font={{ normal: "inherit" }}>
 								<PortalProvider>
-									<GlobalCssTheme />
-									<Layout
-										page={
-											<Component
-												randomItems={
-													randomItems[Component.displayName!] ??
-													arrayShuffle((Component as QueryPage).randomItems ?? [])
-												}
-												{...props}
-											/>
-										}
-										randomItems={[]}
-										{...layoutProps}
-									/>
-									<Tooltip id="tooltip" positionStrategy={"fixed"} />
+									<SnackbarProvider>
+										<GlobalCssTheme />
+										<Layout
+											page={
+												<Component
+													randomItems={
+														randomItems[Component.displayName!] ??
+														arrayShuffle((Component as QueryPage).randomItems ?? [])
+													}
+													{...props}
+												/>
+											}
+											randomItems={[]}
+											{...layoutProps}
+										/>
+										<Tooltip id="tooltip" positionStrategy={"fixed"} />
+									</SnackbarProvider>
 								</PortalProvider>
 							</ThemeSelector>
 						</HydrationBoundary>

front/packages/primitives/src/index.ts

@@ -31,6 +31,7 @@ export * from "./container";
 export * from "./divider";
 export * from "./progress";
 export * from "./slider";
+export * from "./snackbar";
 export * from "./alert";
 export * from "./menu";
 export * from "./popup";

front/packages/ui/src/player/state.tsx

@@ -24,6 +24,8 @@ import { useAtomCallback } from "jotai/utils";
 import { ElementRef, memo, useEffect, useLayoutEffect, useRef, useState, useCallback } from "react";
 import NativeVideo, { VideoProps } from "./video";
 import { Platform } from "react-native";
+import { useSnackbar } from "@kyoo/primitives";
+import { useTranslation } from "react-i18next";
 
 export const playAtom = atom(true);
 export const loadAtom = atom(false);
@@ -188,6 +190,9 @@ export const Video = memo(function Video({
 		return () => document.removeEventListener("fullscreenchange", handler);
 	});
 
+	const createSnackbar = useSnackbar();
+	const { t } = useTranslation();
+
 	if (!source || !links) return null;
 	return (
 		<NativeVideo
@@ -218,6 +223,11 @@ export const Video = memo(function Video({
 			fonts={fonts}
 			subtitles={subtitles}
 			onMediaUnsupported={() => {
+				createSnackbar({
+					key: "unsuported",
+					label: t("player.unsupportedError"),
+					duration: 3,
+				});
 				if (mode == PlayMode.Direct) setPlayMode(PlayMode.Hls);
 			}}
 		/>

front/translations/en.json

@@ -151,7 +151,8 @@
 		"direct": "Pristine",
 		"transmux": "Original",
 		"auto": "Auto",
-		"notInPristine": "Unavailable in pristine"
+		"notInPristine": "Unavailable in pristine",
+		"unsupportedError": "Video codec not supported, transcoding in progress..."
 	},
 	"search": {
 		"empty": "No result found. Try a different query."

front/translations/fr.json

@@ -150,7 +150,9 @@
 		"fullscreen": "Plein-écran",
 		"direct": "Pristine",
 		"transmux": "Original",
-		"auto": "Auto"
+		"auto": "Auto",
+		"notInPristine": "Non disponible en pristine",
+		"unsupportedError": "Video codec not supported, transcoding in progress..."
 	},
 	"search": {
 		"empty": "Aucun résultat trouvé. Essayer avec une autre recherche."