diff --git a/front/locales/en/common.json b/front/locales/en/common.json index 4f619020..1ef4f796 100644 --- a/front/locales/en/common.json +++ b/front/locales/en/common.json @@ -2,5 +2,8 @@ "navbar": { "home": "Home", "login": "Login" + }, + "cast": { + "start": "Cast to device" } } diff --git a/front/locales/fr/common.json b/front/locales/fr/common.json index a675e263..3db04de6 100644 --- a/front/locales/fr/common.json +++ b/front/locales/fr/common.json @@ -2,5 +2,8 @@ "navbar": { "home": "Accueil", "login": "Connexion" + }, + "cast": { + "start": "Caster sur un appareil" } } diff --git a/front/package.json b/front/package.json index d53bb532..73767d92 100644 --- a/front/package.json +++ b/front/package.json @@ -38,6 +38,7 @@ "zod": "^3.18.0" }, "devDependencies": { + "@types/chromecast-caf-sender": "^1.0.5", "@types/node": "18.0.3", "@types/react": "18.0.15", "@types/react-dom": "18.0.6", diff --git a/front/src/pages/_app.tsx b/front/src/pages/_app.tsx index c677300f..6f1faa1e 100755 --- a/front/src/pages/_app.tsx +++ b/front/src/pages/_app.tsx @@ -29,6 +29,7 @@ import { defaultTheme } from "~/utils/themes/default-theme"; import superjson from "superjson"; import Head from "next/head"; import { useMobileHover } from "~/utils/utils"; +import { CastProvider } from "~/player/cast/cast-provider"; // Simply silence a SSR warning (see https://github.com/facebook/react/issues/14927 for more details) if (typeof window === "undefined") { @@ -39,6 +40,7 @@ const App = ({ Component, pageProps }: AppProps) => { const [queryClient] = useState(() => createQueryClient()); const { queryState, ...props } = superjson.deserialize(pageProps ?? {}); const getLayout = (Component as QueryPage).getLayout ?? ((page) => page); + const castEnabled = true; useMobileHover(); @@ -70,7 +72,10 @@ const App = ({ Component, pageProps }: AppProps) => { - {getLayout()} + + {getLayout()} + {castEnabled && } + diff --git a/front/src/player/cast/cast-button.tsx b/front/src/player/cast/cast-button.tsx new file mode 100644 index 00000000..8e14cf41 --- /dev/null +++ b/front/src/player/cast/cast-button.tsx @@ -0,0 +1,39 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import { Box, styled } from "@mui/material"; +import { BoxProps } from "@mui/system"; +import { ComponentProps, forwardRef } from "react"; + + +type CastProps = { class?: string }; + +declare global { + namespace JSX { + interface IntrinsicElements { + "google-cast-launcher": CastProps; + } + } +} + +export const _CastButton = forwardRef>(function Cast({className, ...props}, ref) { + return ; +}); +export const CastButton = styled(_CastButton)({}); diff --git a/front/src/player/cast/cast-provider.tsx b/front/src/player/cast/cast-provider.tsx new file mode 100644 index 00000000..fda8f74d --- /dev/null +++ b/front/src/player/cast/cast-provider.tsx @@ -0,0 +1,42 @@ +/* + * Kyoo - A portable and vast media library solution. + * Copyright (c) Kyoo. + * + * See AUTHORS.md and LICENSE file in the project root for full license information. + * + * Kyoo is free software: you can redistribute it and/or modify + * it under the terms of the GNU General Public License as published by + * the Free Software Foundation, either version 3 of the License, or + * any later version. + * + * Kyoo is distributed in the hope that it will be useful, + * but WITHOUT ANY WARRANTY; without even the implied warranty of + * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + * GNU General Public License for more details. + * + * You should have received a copy of the GNU General Public License + * along with Kyoo. If not, see . + */ + +import Script from "next/script"; +import { useEffect } from "react"; + +export const CastProvider = () => { + useEffect(() => { + window.__onGCastApiAvailable = (isAvailable) => { + if (!isAvailable) return; + cast.framework.CastContext.getInstance().setOptions({ + receiverApplicationId: + process.env.APPLICATION_ID ?? chrome.cast.media.DEFAULT_MEDIA_RECEIVER_APP_ID, + autoJoinPolicy: chrome.cast.AutoJoinPolicy.ORIGIN_SCOPED, + }); + }; + }, []); + + return ( +