diff --git a/.github/workflows/linting_testing.yml b/.github/workflows/linting_testing.yml index c782bcb1..c1d5f833 100644 --- a/.github/workflows/linting_testing.yml +++ b/.github/workflows/linting_testing.yml @@ -71,5 +71,4 @@ jobs: uses: docker/build-push-action@v5 with: push: false - platforms: linux/amd64,linux/arm64 context: . diff --git a/package.json b/package.json index f58b8eab..b8396c0f 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ "@types/node-forge": "^1.3.10", "classnames": "^2.3.2", "core-js": "^3.34.0", + "detect-browser": "^5.3.0", "dompurify": "^3.0.6", "flag-icons": "^7.1.0", "focus-trap-react": "^10.2.3", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index a0e60397..329390b5 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -48,6 +48,9 @@ dependencies: core-js: specifier: ^3.34.0 version: 3.34.0 + detect-browser: + specifier: ^5.3.0 + version: 5.3.0 dompurify: specifier: ^3.0.6 version: 3.0.6 @@ -3338,6 +3341,10 @@ packages: resolution: {integrity: sha512-M1Ob1zPSIvlARiJUkKqvAZ3VAqQY6Jcuth/pBKQ2b1dX/Qx0OnJ8Vux6J2H5PTMQeRzWrrbTu70VxBfv/OPDJA==} dev: false + /detect-browser@5.3.0: + resolution: {integrity: sha512-53rsFbGdwMwlF7qvCt0ypLM5V5/Mbl0szB7GPN8y9NCcbknYOeVVXdrXEq+90IwAfrrzt6Hd+u2E2ntakICU8w==} + dev: false + /didyoumean@1.2.2: resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} dev: true diff --git a/src/assets/locales/en.json b/src/assets/locales/en.json index 15038d6f..59d9e50e 100644 --- a/src/assets/locales/en.json +++ b/src/assets/locales/en.json @@ -232,7 +232,7 @@ "downloadSubtitle": "Download current subtitle", "downloadPlaylist": "Download playlist", "downloadVideo": "Download video", - "hlsDisclaimer": "Downloads are taken directly from the provider. movie-web does not have control over how the downloads are provided.

Please note that you are downloading an HLS playlist, it is not recommended to download if you are not familiar with advanced streaming formats. Try different sources for different formats.", + "hlsDisclaimer": "Downloads are taken directly from the provider. movie-web does not have control over how the downloads are provided.

Please note that you are downloading an HLS playlist, it is not recommended to download if you are not familiar with advanced streaming formats. Try different sources for different formats.", "onAndroid": { "1": "To download on Android, click the download button then, on the new page, tap and hold on the video, then select save.", "shortTitle": "Download / Android", @@ -506,8 +506,12 @@ "extension": { "title": "Let's start with an extension", "explainer": "Using the browser extension, you can get the best streams we have to offer. With just a simple install.", + "explainerIos": "Unfortunately, the browser extension is not supported on IOS, Press Go back to choose another option.", "extensionHelp": "If you've installed the extension but it's not detected. Open the extension through your browsers extension menu and follow the steps on screen.", - "link": "Install extension", + "notDetecting": "Installed on chrome but not showing up? Try reloading the page!", + "notDetectingAction": "Reload page", + "linkChrome": "Install Chrome extension", + "linkFirefox": "Install Firefox extension", "back": "Go back", "status": { "loading": "Waiting for you to install the extension", diff --git a/src/backend/extension/messaging.ts b/src/backend/extension/messaging.ts index 1f2a2b00..3204d541 100644 --- a/src/backend/extension/messaging.ts +++ b/src/backend/extension/messaging.ts @@ -6,13 +6,22 @@ import { import { isAllowedExtensionVersion } from "@/backend/extension/compatibility"; import { ExtensionMakeRequestResponse } from "@/backend/extension/plasmo"; +// for some reason, about 500 ms is needed after +// page load before the extension starts responding properly +const isExtensionReady = new Promise((resolve) => { + setTimeout(() => { + resolve(); + }, 500); +}); + let activeExtension = false; -function sendMessage( +async function sendMessage( message: MessageKey, payload: MessagesMetadata[MessageKey]["req"] | undefined = undefined, timeout: number = -1, ) { + await isExtensionReady; return new Promise((resolve) => { if (timeout >= 0) setTimeout(() => resolve(null), timeout); sendToBackgroundViaRelay< @@ -54,7 +63,7 @@ export async function sendPage( export async function extensionInfo(): Promise< MessagesMetadata["hello"]["res"] | null > { - const message = await sendMessage("hello", undefined, 300); + const message = await sendMessage("hello", undefined, 500); return message; } diff --git a/src/components/player/atoms/settings/Downloads.tsx b/src/components/player/atoms/settings/Downloads.tsx index bba9cf20..45c97997 100644 --- a/src/components/player/atoms/settings/Downloads.tsx +++ b/src/components/player/atoms/settings/Downloads.tsx @@ -1,4 +1,4 @@ -import { useMemo } from "react"; +import { useCallback, useMemo } from "react"; import { Trans, useTranslation } from "react-i18next"; import { Button } from "@/components/buttons/Button"; @@ -46,13 +46,13 @@ export function DownloadView({ id }: { id: string }) { const sourceType = usePlayerStore((s) => s.source?.type); const selectedCaption = usePlayerStore((s) => s.caption?.selected); - const subtitleUrl = useMemo( - () => - selectedCaption - ? convertSubtitlesToSrtDataurl(selectedCaption?.srtData) - : null, - [selectedCaption], - ); + const openSubtitleDownload = useCallback(() => { + const dataUrl = selectedCaption + ? convertSubtitlesToSrtDataurl(selectedCaption?.srtData) + : null; + if (!dataUrl) return; + window.open(dataUrl); + }, [selectedCaption]); if (!downloadUrl) return null; @@ -74,10 +74,9 @@ export function DownloadView({ id }: { id: string }) { @@ -109,8 +108,8 @@ export function DownloadView({ id }: { id: string }) { @@ -58,7 +58,7 @@ export function OnboardingPage() { {t("onboarding.start.explainer")} -
+
navigate("/onboarding/proxy")}> {t("onboarding.start.options.proxy.action")} -
+
or @@ -86,7 +86,7 @@ export function OnboardingPage() {
-

+


+ +
+ +
); diff --git a/src/pages/onboarding/OnboardingExtension.tsx b/src/pages/onboarding/OnboardingExtension.tsx index 3c17e3b8..a0fa035d 100644 --- a/src/pages/onboarding/OnboardingExtension.tsx +++ b/src/pages/onboarding/OnboardingExtension.tsx @@ -1,4 +1,4 @@ -import { ReactNode } from "react"; +import { ReactNode, useCallback, useEffect, useMemo, useState } from "react"; import { Trans, useTranslation } from "react-i18next"; import { useAsyncFn, useInterval } from "react-use"; @@ -18,6 +18,10 @@ import { import { Card, Link } from "@/pages/onboarding/utils"; import { PageTitle } from "@/pages/parts/util/PageTitle"; import { conf } from "@/setup/config"; +import { + ExtensionDetectionResult, + detectExtensionInstall, +} from "@/utils/detectFeatures"; type ExtensionStatus = | "unknown" @@ -37,11 +41,33 @@ async function getExtensionState(): Promise { return "success"; // no problems } +function RefreshBar() { + const { t } = useTranslation(); + const reload = useCallback(() => { + window.location.reload(); + }, []); + return ( + +
+

{t("onboarding.extension.notDetecting")}

+ +
+ + ); +} + export function ExtensionStatus(props: { status: ExtensionStatus; loading: boolean; + showHelp?: boolean; }) { const { t } = useTranslation(); + const [lastKnownStatus, setLastKnownStatus] = useState(props.status); + useEffect(() => { + if (!props.loading) setLastKnownStatus(props.status); + }, [props.status, props.loading]); let content: ReactNode = null; if (props.loading || props.status === "unknown") @@ -88,19 +114,120 @@ export function ExtensionStatus(props: { {content}
- -
- -

- , - }} - /> -

-
- + {lastKnownStatus === "unknown" ? : null} + {props.showHelp ? ( + +
+ +

+ , + }} + /> +

+
+ + ) : null} + + ); +} + +interface ExtensionPageProps { + status: ExtensionStatus; + loading: boolean; +} + +function ChromeExtensionPage(props: ExtensionPageProps) { + const { t } = useTranslation(); + const installLink = conf().ONBOARDING_CHROME_EXTENSION_INSTALL_LINK; + return ( + <> + + {t("onboarding.extension.title")} + + + {t("onboarding.extension.explainer")} + + {installLink ? ( + + {t("onboarding.extension.linkChrome")} + + ) : null} + + + + ); +} + +function FirefoxExtensionPage(props: ExtensionPageProps) { + const { t } = useTranslation(); + const installLink = conf().ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK; + return ( + <> + + {t("onboarding.extension.title")} + + + {t("onboarding.extension.explainer")} + + {installLink ? ( + + {t("onboarding.extension.linkFirefox")} + + ) : null} + + + + ); +} + +function IosExtensionPage(_props: ExtensionPageProps) { + const { t } = useTranslation(); + return ( + <> + + {t("onboarding.extension.title")} + + + }} + /> + + + ); +} + +function UnknownExtensionPage(props: ExtensionPageProps) { + const { t } = useTranslation(); + const installChromeLink = conf().ONBOARDING_CHROME_EXTENSION_INSTALL_LINK; + const installFirefoxLink = conf().ONBOARDING_FIREFOX_EXTENSION_INSTALL_LINK; + return ( + <> + + {t("onboarding.extension.title")} + + + {t("onboarding.extension.explainer")} + +
+ {installChromeLink ? ( + + {t("onboarding.extension.linkChrome")} + + ) : null} +
+
+ {installFirefoxLink ? ( + + {t("onboarding.extension.linkFirefox")} + + ) : null} +
+ + ); } @@ -109,7 +236,7 @@ export function OnboardingExtensionPage() { const { t } = useTranslation(); const navigate = useNavigateOnboarding(); const { completeAndRedirect } = useRedirectBack(); - const installLink = conf().ONBOARDING_EXTENSION_INSTALL_LINK; + const extensionSupport = useMemo(() => detectExtensionInstall(), []); const [{ loading, value }, exec] = useAsyncFn( async (triggeredManually: boolean = false) => { @@ -121,24 +248,23 @@ export function OnboardingExtensionPage() { ); useInterval(exec, 1000); + const componentMap: Record< + ExtensionDetectionResult, + typeof UnknownExtensionPage + > = { + chrome: ChromeExtensionPage, + firefox: FirefoxExtensionPage, + ios: IosExtensionPage, + unknown: UnknownExtensionPage, + }; + const PageContent = componentMap[extensionSupport]; + return ( - - {t("onboarding.extension.title")} - - - {t("onboarding.extension.explainer")} - - {installLink ? ( - - {t("onboarding.extension.link")} - - ) : null} - - +