feat: download button in player

apps/expo/src/components/player/BottomControls.tsx

@@ -6,6 +6,7 @@ import { usePlayerStore } from "~/stores/player/store";
 import { AudioTrackSelector } from "./AudioTrackSelector";
 import { CaptionsSelector } from "./CaptionsSelector";
 import { Controls } from "./Controls";
+import { DownloadButton } from "./DownloadButton";
 import { PlaybackSpeedSelector } from "./PlaybackSpeedSelector";
 import { ProgressBar } from "./ProgressBar";
 import { SeasonSelector } from "./SeasonEpisodeSelector";
@@ -79,6 +80,7 @@ export const BottomControls = () => {
           <SourceSelector />
           <AudioTrackSelector />
           <PlaybackSpeedSelector />
+          <DownloadButton />
         </View>
       </View>
     );

apps/expo/src/components/player/DownloadButton.tsx

@@ -0,0 +1,40 @@
+import { MaterialCommunityIcons } from "@expo/vector-icons";
+import { useTheme } from "tamagui";
+
+import { findHighestQuality } from "@movie-web/provider-utils";
+
+import { useDownloadManager } from "~/hooks/DownloadManagerContext";
+import { usePlayerStore } from "~/stores/player/store";
+import { MWButton } from "../ui/Button";
+import { Controls } from "./Controls";
+
+export const DownloadButton = () => {
+  const theme = useTheme();
+  const stream = usePlayerStore((state) => state.interface.currentStream);
+  const { startDownload } = useDownloadManager();
+  if (stream?.type !== "file") return null;
+
+  const highestQuality = findHighestQuality(stream);
+  const url = highestQuality ? stream.qualities[highestQuality]?.url : null;
+  if (!url) return null;
+
+  return (
+    <>
+      <Controls>
+        <MWButton
+          type="secondary"
+          icon={
+            <MaterialCommunityIcons
+              name="download"
+              size={24}
+              color={theme.buttonSecondaryText.val}
+            />
+          }
+          onPress={() => startDownload(url, "mp4")}
+        >
+          Download
+        </MWButton>
+      </Controls>
+    </>
+  );
+};