From 2ae9c37a265811c8be043fbe90e6ae8751aa9489 Mon Sep 17 00:00:00 2001 From: Jip Fr Date: Sun, 22 Oct 2023 18:57:35 +0200 Subject: [PATCH] Add download view --- src/components/Icon.tsx | 2 + src/components/player/atoms/Settings.tsx | 2 +- .../player/atoms/settings/CaptionsView.tsx | 1 + .../player/atoms/settings/DownloadView.tsx | 31 +++++++++- .../player/atoms/settings/SettingsMenu.tsx | 3 + .../player/internals/ContextMenu/Sections.tsx | 12 +++- tailwind.config.js | 61 ++++++++++--------- 7 files changed, 78 insertions(+), 34 deletions(-) diff --git a/src/components/Icon.tsx b/src/components/Icon.tsx index fdd1f2c4..5a086d9f 100644 --- a/src/components/Icon.tsx +++ b/src/components/Icon.tsx @@ -44,6 +44,7 @@ export enum Icons { MAIL = "mail", CIRCLE_CHECK = "circle_check", SKIP_EPISODE = "skip_episode", + MORE_VERTICAL = "more_vertical", IOS_SHARE = "ios_share", IOS_FILES = "ios_files", } @@ -97,6 +98,7 @@ const iconList: Record = { mail: ``, circle_check: ``, skip_episode: ``, + more_vertical: ``, ios_share: ``, ios_files: ``, }; diff --git a/src/components/player/atoms/Settings.tsx b/src/components/player/atoms/Settings.tsx index 6c9942df..f9ca3ae6 100644 --- a/src/components/player/atoms/Settings.tsx +++ b/src/components/player/atoms/Settings.tsx @@ -71,7 +71,7 @@ function SettingsOverlay({ id }: { id: string }) { - + diff --git a/src/components/player/atoms/settings/CaptionsView.tsx b/src/components/player/atoms/settings/CaptionsView.tsx index 66052962..ab8c8102 100644 --- a/src/components/player/atoms/settings/CaptionsView.tsx +++ b/src/components/player/atoms/settings/CaptionsView.tsx @@ -28,6 +28,7 @@ export function CaptionOption(props: { ko: "kr", he: "il", ze: "cn", + ar: "sa", }; let countryCode = (props.countryCode || "")?.split("-").pop()?.toLowerCase() || ""; diff --git a/src/components/player/atoms/settings/DownloadView.tsx b/src/components/player/atoms/settings/DownloadView.tsx index f2c70dc7..37d39d34 100644 --- a/src/components/player/atoms/settings/DownloadView.tsx +++ b/src/components/player/atoms/settings/DownloadView.tsx @@ -1,9 +1,12 @@ import { Icon, Icons } from "@/components/Icon"; import { Menu } from "@/components/player/internals/ContextMenu"; import { useOverlayRouter } from "@/hooks/useOverlayRouter"; +import { usePlayerStore } from "@/stores/player/store"; export function DownloadView({ id }: { id: string }) { const router = useOverlayRouter(id); + const source = usePlayerStore((s) => s.source); + if (source?.type === "hls") return null; return ( <> @@ -32,12 +35,34 @@ export function DownloadView({ id }: { id: string }) { icon={Icons.IOS_FILES} /> {" "} - , then pick a nice and cozy folder for your video! + . All that's left to do now is to pick a nice and cozy folder + for your video! - To download on Android or PC, click or tap and hold on the video, - then select save as. + To download on Android,{" "} + tap and hold on the video, then + select save. + + On PC, click the{" "} + + three dots + + {" "} + and click download. + + + Download + diff --git a/src/components/player/atoms/settings/SettingsMenu.tsx b/src/components/player/atoms/settings/SettingsMenu.tsx index be1a8cca..4978c86c 100644 --- a/src/components/player/atoms/settings/SettingsMenu.tsx +++ b/src/components/player/atoms/settings/SettingsMenu.tsx @@ -39,6 +39,8 @@ export function SettingsMenu({ id }: { id: string }) { ? languageIdToName(selectedCaptionLanguage) ?? "unknown" : undefined; + const source = usePlayerStore((s) => s.source); + return ( Video settings @@ -59,6 +61,7 @@ export function SettingsMenu({ id }: { id: string }) { clickable onClick={() => router.navigate("/download")} rightSide={} + className={source?.type === "file" ? "opacity-100" : "opacity-50"} > Download diff --git a/src/components/player/internals/ContextMenu/Sections.tsx b/src/components/player/internals/ContextMenu/Sections.tsx index 7631e155..0d460dae 100644 --- a/src/components/player/internals/ContextMenu/Sections.tsx +++ b/src/components/player/internals/ContextMenu/Sections.tsx @@ -1,8 +1,16 @@ import classNames from "classnames"; -export function SectionTitle(props: { children: React.ReactNode }) { +export function SectionTitle(props: { + children: React.ReactNode; + className?: string; +}) { return ( -

+

{props.children}

); diff --git a/tailwind.config.js b/tailwind.config.js index f03441be..24c3e35c 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -26,23 +26,23 @@ module.exports = { "ash-400": "#3D394D", "ash-300": "#2C293A", "ash-200": "#2B2836", - "ash-100": "#1E1C26" + "ash-100": "#1E1C26", }, /* fonts */ fontFamily: { - "open-sans": "'Open Sans'" + "open-sans": "'Open Sans'", }, /* animations */ keyframes: { "loading-pin": { "0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" }, - "20%": { height: "1em", "background-color": "white" } - } + "20%": { height: "1em", "background-color": "white" }, + }, }, - animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" } - } + animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }, + }, }, plugins: [ require("tailwind-scrollbar"), @@ -52,31 +52,31 @@ module.exports = { colors: { // Branding pill: { - background: "#1C1C36" + background: "#1C1C36", }, // meta data for the theme itself global: { accentA: "#505DBD", - accentB: "#3440A1" + accentB: "#3440A1", }, // light bar lightBar: { - light: "#2A2A71" + light: "#2A2A71", }, // Buttons buttons: { toggle: "#8D44D6", - toggleDisabled: "#202836" + toggleDisabled: "#202836", }, // only used for body colors/textures background: { main: "#0A0A10", accentA: "#6E3B80", - accentB: "#1F1F50" + accentB: "#1F1F50", }, // typography @@ -85,7 +85,7 @@ module.exports = { text: "#73739D", dimmed: "#926CAD", divider: "#262632", - secondary: "#64647B" + secondary: "#64647B", }, // search bar @@ -94,7 +94,7 @@ module.exports = { focused: "#24243C", placeholder: "#4A4A71", icon: "#545476", - text: "#FFFFFF" + text: "#FFFFFF", }, // media cards @@ -106,7 +106,7 @@ module.exports = { barColor: "#4B4B63", barFillColor: "#BA7FD6", badge: "#151522", - badgeText: "#5F5F7A" + badgeText: "#5F5F7A", }, // video player @@ -118,17 +118,17 @@ module.exports = { error: "#E44F4F", success: "#40B44B", loading: "#B759D8", - noresult: "#64647B" + noresult: "#64647B", }, progress: { background: "#8787A8", preloaded: "#8787A8", - watched: "#A75FC9" + watched: "#A75FC9", }, audio: { - set: "#A75FC9" + set: "#A75FC9", }, buttons: { @@ -137,7 +137,7 @@ module.exports = { secondaryHover: "#1B262E", primary: "#fff", primaryText: "#000", - primaryHover: "#dedede" + primaryHover: "#dedede", }, context: { @@ -152,21 +152,26 @@ module.exports = { slider: "#8787A8", sliderFilled: "#A75FC9", + download: { + button: "#6b298a", + hover: "#7f35a1", + }, + buttons: { list: "#161C26", - active: "#0D1317" + active: "#0D1317", }, type: { main: "#617A8A", secondary: "#374A56", - accent: "#A570FA" - } - } - } - } - } - } - }) - ] + accent: "#A570FA", + }, + }, + }, + }, + }, + }, + }), + ], };