Merge branch 'dev' into cdn-replacements

src/assets/locales/en.json

@@ -188,8 +188,9 @@
       "downloads": {
         "title": "Download",
         "disclaimer": "Downloads are taken directly from the provider. movie-web does not have control over how the downloads are provided.",
-        "hlsExplanation": "This media is a HLS stream which cannot be downloaded on movie-web.",
+        "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, this is intended for users familiar with advanced multimedia streaming.",
         "downloadVideo": "Download video",
+        "downloadPlaylist": "Download playlist",
         "downloadCaption": "Download current caption",
         "onPc": {
           "1": "On PC, click the download button then, on the new page, right click the video and select <bold>Save video as</bold>",

src/components/player/README.md

@@ -12,7 +12,7 @@ These parts are internally used, they aren't exported. Do not use them outside o
 
 ### `/display`
 The display interface, abstraction on how to actually play the content (e.g Video element, chrome casting, etc)
- - It must be completely seperate from any react code
+ - It must be completely separate from any react code
  - It must not interact with state, pass async data back with events
 
 ### `/internals`

src/components/player/atoms/settings/Downloads.tsx

@@ -15,6 +15,7 @@ function useDownloadLink() {
   const url = useMemo(() => {
     if (source?.type === "file" && currentQuality)
       return source.qualities[currentQuality]?.url ?? null;
+    if (source?.type === "hls") return source.url;
     return null;
   }, [source, currentQuality]);
   return url;
@@ -42,6 +43,7 @@ export function DownloadView({ id }: { id: string }) {
   const { t } = useTranslation();
   const downloadUrl = useDownloadLink();
 
+  const sourceType = usePlayerStore((s) => s.source?.type);
   const selectedCaption = usePlayerStore((s) => s.caption?.selected);
   const subtitleUrl = useMemo(
     () =>
@@ -60,36 +62,61 @@ export function DownloadView({ id }: { id: string }) {
       </Menu.BackLink>
       <Menu.Section>
         <div>
-          <Menu.ChevronLink onClick={() => router.navigate("/download/pc")}>
+          {sourceType === "hls" ? (
-            {t("player.menus.downloads.onPc.title")}
+            <>
-          </Menu.ChevronLink>
+              <Menu.Paragraph marginClass="mb-6">
-          <Menu.ChevronLink onClick={() => router.navigate("/download/ios")}>
+                <StyleTrans k="player.menus.downloads.hlsDisclaimer" />
-            {t("player.menus.downloads.onIos.title")}
+              </Menu.Paragraph>
-          </Menu.ChevronLink>
+
-          <Menu.ChevronLink
+              <Button className="w-full" href={downloadUrl} theme="purple">
-            onClick={() => router.navigate("/download/android")}
+                {t("player.menus.downloads.downloadPlaylist")}
-          >
+              </Button>
-            {t("player.menus.downloads.onAndroid.title")}
+              <Button
-          </Menu.ChevronLink>
+                className="w-full mt-2"
-
+                href={subtitleUrl ?? undefined}
-          <Menu.Divider />
+                disabled={!subtitleUrl}
-
+                theme="secondary"
-          <Menu.Paragraph marginClass="my-6">
+                download="subtitles.srt"
-            <StyleTrans k="player.menus.downloads.disclaimer" />
+              >
-          </Menu.Paragraph>
+                {t("player.menus.downloads.downloadCaption")}
-
+              </Button>
-          <Button className="w-full" href={downloadUrl} theme="purple">
+            </>
-            {t("player.menus.downloads.downloadVideo")}
+          ) : (
-          </Button>
+            <>
-          <Button
+              <Menu.ChevronLink onClick={() => router.navigate("/download/pc")}>
-            className="w-full mt-2"
+                {t("player.menus.downloads.onPc.title")}
-            href={subtitleUrl ?? undefined}
+              </Menu.ChevronLink>
-            disabled={!subtitleUrl}
+              <Menu.ChevronLink
-            theme="secondary"
+                onClick={() => router.navigate("/download/ios")}
-            download="subtitles.srt"
+              >
-          >
+                {t("player.menus.downloads.onIos.title")}
-            {t("player.menus.downloads.downloadCaption")}
+              </Menu.ChevronLink>
-          </Button>
+              <Menu.ChevronLink
+                onClick={() => router.navigate("/download/android")}
+              >
+                {t("player.menus.downloads.onAndroid.title")}
+              </Menu.ChevronLink>
+
+              <Menu.Divider />
+
+              <Menu.Paragraph marginClass="my-6">
+                <StyleTrans k="player.menus.downloads.disclaimer" />
+              </Menu.Paragraph>
+
+              <Button className="w-full" href={downloadUrl} theme="purple">
+                {t("player.menus.downloads.downloadVideo")}
+              </Button>
+              <Button
+                className="w-full mt-2"
+                href={subtitleUrl ?? undefined}
+                disabled={!subtitleUrl}
+                theme="secondary"
+                download="subtitles.srt"
+              >
+                {t("player.menus.downloads.downloadCaption")}
+              </Button>
+            </>
+          )}
         </div>
       </Menu.Section>
     </>

src/components/player/atoms/settings/SettingsMenu.tsx

@@ -37,6 +37,8 @@ export function SettingsMenu({ id }: { id: string }) {
 
   const source = usePlayerStore((s) => s.source);
 
+  const downloadable = source?.type === "file" || source?.type === "hls";
+
   return (
     <Menu.Card>
       <Menu.SectionTitle>
@@ -58,12 +60,10 @@ export function SettingsMenu({ id }: { id: string }) {
         <Menu.Link
           clickable
           onClick={() =>
-            router.navigate(
+            router.navigate(downloadable ? "/download" : "/download/unable")
-              source?.type === "file" ? "/download" : "/download/unable",
-            )
           }
           rightSide={<Icon className="text-xl" icon={Icons.DOWNLOAD} />}
-          className={source?.type === "file" ? "opacity-100" : "opacity-50"}
+          className={downloadable ? "opacity-100" : "opacity-50"}
         >
           {t("player.menus.settings.downloadItem")}
         </Menu.Link>