Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-26 10:11:47 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add download explanation routes

Browse Source
This commit is contained in:
Jip Fr 2023-10-22 19:28:04 +02:00
parent 01ea3c6d1e
commit e45b088108
1 changed files with 109 additions and 38 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

147
src/components/player/atoms/settings/Downloads.tsx
View File

@ -15,46 +15,26 @@ export function DownloadView({ id }: { id: string }) {
Download Download
</Menu.BackLink> </Menu.BackLink>
<Menu.Section> <Menu.Section>
<div className="space-y-4 mt-3"> <div className="mt-3">
<Menu.ChevronLink onClick={() => router.navigate("/download/ios")}>
Downloading on iOS
</Menu.ChevronLink>
<Menu.ChevronLink
onClick={() => router.navigate("/download/android")}
>
Downloading on Android
</Menu.ChevronLink>
<Menu.ChevronLink onClick={() => router.navigate("/download/pc")}>
Downloading on PC
</Menu.ChevronLink>
<Menu.Divider />
<Menu.Paragraph> <Menu.Paragraph>
Downloads are taken directly from the provider. movie-web does not Downloads are taken directly from the provider. movie-web does not
have control over how the downloads are provided. have control over how the downloads are provided.
</Menu.Paragraph> </Menu.Paragraph>
<Menu.Paragraph>
To download on iOS, click{" "}
<Menu.Highlight>
<Icon
className="inline-block text-xl -mb-1"
icon={Icons.IOS_SHARE}
/>
</Menu.Highlight>
, then{" "}
<Menu.Highlight>
Save to Files
<Icon
className="inline-block text-xl -mb-1 mx-1"
icon={Icons.IOS_FILES}
/>
</Menu.Highlight>{" "}
. All that&apos;s left to do now is to pick a nice and cozy folder
for your video!
</Menu.Paragraph>
<Menu.Paragraph>
To download on Android,{" "}
<Menu.Highlight>tap and hold</Menu.Highlight> on the video, then
select <Menu.Highlight>save</Menu.Highlight>.
</Menu.Paragraph>
<Menu.Paragraph>
On PC, click the{" "}
<Menu.Highlight>
three dots
<Icon
className="inline-block text-xl -mb-1"
icon={Icons.MORE_VERTICAL}
/>
</Menu.Highlight>{" "}
and click <Menu.Highlight>download</Menu.Highlight>.
</Menu.Paragraph>
<a <a
href="https://pastebin.com/x9URMct0" href="https://pastebin.com/x9URMct0"
rel="noreferrer" rel="noreferrer"
@ -87,19 +67,110 @@ export function CantDownloadView({ id }: { id: string }) {
); );
} }
function AndroidExplanationView({ id }: { id: string }) {
const router = useOverlayRouter(id);
return (
<>
<Menu.BackLink onClick={() => router.navigate("/download")}>
Download / Android
</Menu.BackLink>
<Menu.Section>
<Menu.Paragraph>
To download on Android, <Menu.Highlight>tap and hold</Menu.Highlight>{" "}
on the video, then select <Menu.Highlight>save</Menu.Highlight>.
</Menu.Paragraph>
</Menu.Section>
</>
);
}
function PCExplanationView({ id }: { id: string }) {
const router = useOverlayRouter(id);
return (
<>
<Menu.BackLink onClick={() => router.navigate("/download")}>
Download / PC
</Menu.BackLink>
<Menu.Section>
<Menu.Paragraph>
On PC, click the{" "}
<Menu.Highlight>
three dots
<Icon
className="inline-block text-xl -mb-1"
icon={Icons.MORE_VERTICAL}
/>
</Menu.Highlight>{" "}
and click <Menu.Highlight>download</Menu.Highlight>.
</Menu.Paragraph>
</Menu.Section>
</>
);
}
function IOSExplanationView({ id }: { id: string }) {
const router = useOverlayRouter(id);
return (
<>
<Menu.BackLink onClick={() => router.navigate("/download")}>
Download / iOS
</Menu.BackLink>
<Menu.Section>
<Menu.Paragraph>
To download on iOS, click{" "}
<Menu.Highlight>
<Icon
className="inline-block text-xl -mb-1"
icon={Icons.IOS_SHARE}
/>
</Menu.Highlight>
, then{" "}
<Menu.Highlight>
Save to Files
<Icon
className="inline-block text-xl -mb-1 mx-1"
icon={Icons.IOS_FILES}
/>
</Menu.Highlight>{" "}
. All that&apos;s left to do now is to pick a nice and cozy folder for
your video!
</Menu.Paragraph>
</Menu.Section>
</>
);
}
export function DownloadRoutes({ id }: { id: string }) { export function DownloadRoutes({ id }: { id: string }) {
return ( return (
<> <>
<OverlayPage id={id} path="/download" width={343} height={530}> <OverlayPage id={id} path="/download" width={343} height={440}>
<Menu.CardWithScrollable> <Menu.CardWithScrollable>
<DownloadView id={id} /> <DownloadView id={id} />
</Menu.CardWithScrollable> </Menu.CardWithScrollable>
</OverlayPage> </OverlayPage>
<OverlayPage id={id} path="/download/unable" width={343} height={341}> <OverlayPage id={id} path="/download/unable" width={343} height={440}>
<Menu.CardWithScrollable> <Menu.CardWithScrollable>
<CantDownloadView id={id} /> <CantDownloadView id={id} />
</Menu.CardWithScrollable> </Menu.CardWithScrollable>
</OverlayPage> </OverlayPage>
<OverlayPage id={id} path="/download/ios" width={343} height={440}>
<Menu.CardWithScrollable>
<IOSExplanationView id={id} />
</Menu.CardWithScrollable>
</OverlayPage>
<OverlayPage id={id} path="/download/android" width={343} height={440}>
<Menu.CardWithScrollable>
<AndroidExplanationView id={id} />
</Menu.CardWithScrollable>
</OverlayPage>
<OverlayPage id={id} path="/download/pc" width={343} height={440}>
<Menu.CardWithScrollable>
<PCExplanationView id={id} />
</Menu.CardWithScrollable>
</OverlayPage>
</> </>
); );
} }