From cff57d7d59ec89f4c9492ba43f8ec67520594b0a Mon Sep 17 00:00:00 2001
From: Tim <tymmesyde@gmail.com>
Date: Wed, 2 Jul 2025 15:31:56 +0200
Subject: [PATCH] feat(Player): add option to download subtitles

---
 src/routes/Player/OptionsMenu/OptionsMenu.js | 26 +++++++++++++++++++-
 src/routes/Player/Player.js                  |  4 +++
 2 files changed, 29 insertions(+), 1 deletion(-)

diff --git a/src/routes/Player/OptionsMenu/OptionsMenu.js b/src/routes/Player/OptionsMenu/OptionsMenu.js
index 56241e009..968de5341 100644
--- a/src/routes/Player/OptionsMenu/OptionsMenu.js
+++ b/src/routes/Player/OptionsMenu/OptionsMenu.js
@@ -9,7 +9,7 @@ const { useServices } = require('stremio/services');
 const Option = require('./Option');
 const styles = require('./styles');
 
-const OptionsMenu = ({ className, stream, playbackDevices }) => {
+const OptionsMenu = ({ className, stream, playbackDevices, extraSubtitlesTracks, selectedExtraSubtitlesTrackId }) => {
     const { t } = useTranslation();
     const { core } = useServices();
     const platform = usePlatform();
@@ -25,6 +25,12 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
     const externalDevices = React.useMemo(() => {
         return playbackDevices.filter(({ type }) => type === 'external');
     }, [playbackDevices]);
+
+    const subtitlesTrackUrl = React.useMemo(() => {
+        const track = extraSubtitlesTracks?.find(({ id }) => id === selectedExtraSubtitlesTrackId);
+        return track?.fallbackUrl ?? track?.url ?? null;
+    }, [extraSubtitlesTracks, selectedExtraSubtitlesTrackId]);
+
     const onCopyStreamButtonClick = React.useCallback(() => {
         if (streamingUrl || downloadUrl) {
             navigator.clipboard.writeText(streamingUrl || downloadUrl)
@@ -52,6 +58,11 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
             platform.openExternal(streamingUrl || downloadUrl);
         }
     }, [streamingUrl, downloadUrl]);
+
+    const onDownloadSubtitlesClick = React.useCallback(() => {
+        subtitlesTrackUrl && platform.openExternal(subtitlesTrackUrl);
+    }, [subtitlesTrackUrl]);
+
     const onExternalDeviceRequested = React.useCallback((deviceId) => {
         if (streamingUrl) {
             core.transport.dispatch({
@@ -94,6 +105,17 @@ const OptionsMenu = ({ className, stream, playbackDevices }) => {
                     :
                     null
             }
+            {
+                subtitlesTrackUrl ?
+                    <Option
+                        icon={'download'}
+                        label={t('CTX_DOWNLOAD_SUBS')}
+                        disabled={stream === null}
+                        onClick={onDownloadSubtitlesClick}
+                    />
+                    :
+                    null
+            }
             {
                 streamingUrl && externalDevices.map(({ id, name }) => (
                     <Option
@@ -114,6 +136,8 @@ OptionsMenu.propTypes = {
     className: PropTypes.string,
     stream: PropTypes.object,
     playbackDevices: PropTypes.array,
+    extraSubtitlesTracks: PropTypes.array,
+    selectedExtraSubtitlesTrackId: PropTypes.string,
 };
 
 module.exports = OptionsMenu;
diff --git a/src/routes/Player/Player.js b/src/routes/Player/Player.js
index 98a54a2c9..df8451e47 100644
--- a/src/routes/Player/Player.js
+++ b/src/routes/Player/Player.js
@@ -766,6 +766,8 @@ const Player = ({ urlParams, queryParams }) => {
                     className={classnames(styles['layer'], styles['menu-layer'])}
                     stream={player?.selected?.stream}
                     playbackDevices={playbackDevices}
+                    extraSubtitlesTracks={video.state.extraSubtitlesTracks}
+                    selectedExtraSubtitlesTrackId={video.state.selectedExtraSubtitlesTrackId}
                 />
             </ContextMenu>
             <HorizontalNavBar
@@ -902,6 +904,8 @@ const Player = ({ urlParams, queryParams }) => {
                         className={classnames(styles['layer'], styles['menu-layer'])}
                         stream={player.selected.stream}
                         playbackDevices={playbackDevices}
+                        extraSubtitlesTracks={video.state.extraSubtitlesTracks}
+                        selectedExtraSubtitlesTrackId={video.state.selectedExtraSubtitlesTrackId}
                     />
                     :
                     null