Add download view

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<Icons, string> = {
   mail: `<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M19.25 4.125H2.75C2.56766 4.125 2.3928 4.19743 2.26386 4.32636C2.13493 4.4553 2.0625 4.63016 2.0625 4.8125V16.5C2.0625 16.8647 2.20737 17.2144 2.46523 17.4723C2.72309 17.7301 3.07283 17.875 3.4375 17.875H18.5625C18.9272 17.875 19.2769 17.7301 19.5348 17.4723C19.7926 17.2144 19.9375 16.8647 19.9375 16.5V4.8125C19.9375 4.63016 19.8651 4.4553 19.7361 4.32636C19.6072 4.19743 19.4323 4.125 19.25 4.125ZM8.48289 11L3.4375 15.6243V6.3757L8.48289 11ZM9.50039 11.9324L10.5316 12.882C10.6585 12.9985 10.8244 13.0631 10.9966 13.0631C11.1687 13.0631 11.3346 12.9985 11.4615 12.882L12.4927 11.9324L17.4771 16.5H4.51773L9.50039 11.9324ZM13.5171 11L18.5625 6.37484V15.6252L13.5171 11Z" fill="currentColor" /></svg>`,
   circle_check: `<svg xmlns="http://www.w3.org/2000/svg" height="1em" viewBox="0 0 512 512"><path fill="currentColor" d="M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z"/></svg>`,
   skip_episode: `<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M14.625 2.8125V15.1875C14.625 15.3367 14.5657 15.4798 14.4602 15.5852C14.3548 15.6907 14.2117 15.75 14.0625 15.75C13.9133 15.75 13.7702 15.6907 13.6648 15.5852C13.5593 15.4798 13.5 15.3367 13.5 15.1875V10.3198L5.09273 15.5777C4.92342 15.684 4.72878 15.7431 4.52895 15.7489C4.32913 15.7547 4.13139 15.707 3.95621 15.6107C3.78102 15.5144 3.63477 15.373 3.53258 15.2012C3.43039 15.0294 3.37599 14.8333 3.375 14.6334V3.36656C3.37599 3.16666 3.43039 2.97065 3.53258 2.79883C3.63477 2.62702 3.78102 2.48564 3.95621 2.38933C4.13139 2.29303 4.32913 2.2453 4.52895 2.25109C4.72878 2.25688 4.92342 2.31598 5.09273 2.42227L13.5 7.68023V2.8125C13.5 2.66332 13.5593 2.52024 13.6648 2.41475C13.7702 2.30926 13.9133 2.25 14.0625 2.25C14.2117 2.25 14.3548 2.30926 14.4602 2.41475C14.5657 2.52024 14.625 2.66332 14.625 2.8125Z" fill="currentColor"/></svg>`,
+  more_vertical: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-more-vertical"><circle cx="12" cy="12" r="1"></circle><circle cx="12" cy="5" r="1"></circle><circle cx="12" cy="19" r="1"></circle></svg>`,
   ios_share: `<svg width="1em" height="1em" viewBox="0 0 20 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 15.3857C10.4409 15.3857 10.8101 15.0166 10.8101 14.5859V4.05518L10.7485 2.51709L11.4355 3.24512L12.9941 4.90625C13.1377 5.07031 13.353 5.15234 13.5479 5.15234C13.9683 5.15234 14.2964 4.84473 14.2964 4.42432C14.2964 4.20898 14.2041 4.04492 14.0503 3.89111L10.5845 0.54834C10.3794 0.343262 10.2051 0.271484 10 0.271484C9.78467 0.271484 9.61035 0.343262 9.40527 0.54834L5.93945 3.89111C5.78564 4.04492 5.69336 4.20898 5.69336 4.42432C5.69336 4.84473 6.00098 5.15234 6.43164 5.15234C6.62646 5.15234 6.85205 5.07031 6.99561 4.90625L8.5542 3.24512L9.24121 2.51709L9.17969 4.05518V14.5859C9.17969 15.0166 9.55908 15.3857 10 15.3857ZM4.11426 23.4146H15.8755C18.0186 23.4146 19.0952 22.3481 19.0952 20.2358V10.0024C19.0952 7.89014 18.0186 6.82373 15.8755 6.82373H13.0146V8.47461H15.8447C16.8599 8.47461 17.4443 9.02832 17.4443 10.0947V20.1436C17.4443 21.21 16.8599 21.7637 15.8447 21.7637H4.13477C3.10938 21.7637 2.54541 21.21 2.54541 20.1436V10.0947C2.54541 9.02832 3.10938 8.47461 4.13477 8.47461H6.9751V6.82373H4.11426C1.97119 6.82373 0.894531 7.89014 0.894531 10.0024V20.2358C0.894531 22.3481 1.97119 23.4146 4.11426 23.4146Z" fill="currentColor"/></svg>`,
   ios_files: `<svg width="1em" height="1em" viewBox="0 0 24 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M3.22405 20H21.024C22.9178 20 24 18.8772 24 16.7018V5.33333C24 3.1462 22.9065 2.03509 20.776 2.03509H10.5063C9.72851 2.03509 9.30014 1.85965 8.74777 1.36842L8.12776 0.818713C7.41757 0.187135 6.91029 0 5.85063 0H2.81822C1.01456 0 0 1.04094 0 3.1462V16.7018C0 18.8889 1.0822 20 3.22405 20ZM1.47675 3.22807C1.47675 2.08187 2.04039 1.50877 3.11132 1.50877H5.47863C6.23391 1.50877 6.65101 1.68421 7.21466 2.19883L7.84594 2.74854C8.52231 3.35673 9.06341 3.55556 10.1343 3.55556H20.7534C21.8807 3.55556 22.5233 4.18713 22.5233 5.4152V6.17544H1.47675V3.22807ZM3.24659 18.4795C2.09676 18.4795 1.47675 17.848 1.47675 16.6199V7.61403H22.5233V16.6316C22.5233 17.848 21.8807 18.4795 20.7534 18.4795H3.24659Z" fill="white"/></svg>`,
 };

src/components/player/atoms/Settings.tsx

@@ -71,7 +71,7 @@ function SettingsOverlay({ id }: { id: string }) {
             <PlaybackSettingsView id={id} />
           </Menu.Card>
         </OverlayPage>
-        <OverlayPage id={id} path="/download" width={343} height={431}>
+        <OverlayPage id={id} path="/download" width={343} height={530}>
           <Menu.Card>
             <DownloadView id={id} />
           </Menu.Card>

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() || "";

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}
               />
             </Menu.Highlight>{" "}
-            , then pick a nice and cozy folder for your video!
+            . 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 or PC, click or tap and hold on the video,
-            then select save as.
+            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
+            href="https://pastebin.com/x9URMct0"
+            rel="noreferrer"
+            target="_blank"
+            download
+            className="cursor-pointer flex justify-center items-center w-full p-2.5 !mt-6 rounded-lg bg-video-context-download-button hover:bg-video-context-download-hover transition-colors duration-150 text-white font-medium"
+          >
+            Download
+          </a>
         </div>
       </Menu.Section>
     </>

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 (
     <Menu.Card>
       <Menu.SectionTitle>Video settings</Menu.SectionTitle>
@@ -59,6 +61,7 @@ export function SettingsMenu({ id }: { id: string }) {
           clickable
           onClick={() => router.navigate("/download")}
           rightSide={<Icon className="text-xl" icon={Icons.DOWNLOAD} />}
+          className={source?.type === "file" ? "opacity-100" : "opacity-50"}
         >
           Download
         </Menu.Link>

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 (
-    <h3 className="uppercase font-bold text-video-context-type-secondary text-xs pt-8 pl-1 pb-2.5 border-b border-video-context-border">
+    <h3
+      className={classNames(
+        "uppercase font-bold text-video-context-type-secondary text-xs pt-8 pl-1 pb-2.5 border-b border-video-context-border",
+        props.className
+      )}
+    >
       {props.children}
     </h3>
   );

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",
+                },
+              },
+            },
+          },
+        },
+      },
+    }),
+  ],
 };