Implement remote https endpoint settings

package.json

@@ -39,7 +39,7 @@
         "react-i18next": "^12.1.1",
         "react-is": "18.2.0",
         "spatial-navigation-polyfill": "github:Stremio/spatial-navigation#64871b1422466f5f45d24ebc8bbd315b2ebab6a6",
-        "stremio-translations": "github:Stremio/stremio-translations#f5587521902320be9b97ecf5e1c5c38d1aa847ff",
+        "stremio-translations": "github:Stremio/stremio-translations#12b1307f95249496960d2a257b371db5700721e6",
         "url": "0.11.0",
         "use-long-press": "^3.1.5"
     },

src/routes/Settings/Settings.js

@@ -46,6 +46,8 @@ const Settings = () => {
         streamingServerUrlInput
     } = useProfileSettingsInputs(profile);
     const {
+        streamingServerRemoteUrlInput,
+        remoteEndpointSelect,
         cacheSizeSelect,
         torrentProfileSelect
     } = useStreamingServerSettingsInputs(streamingServer);
@@ -119,6 +121,16 @@ const Settings = () => {
             }
         });
     }, []);
+    const onCopyRemoteUrlClick = React.useCallback(() => {
+        if (streamingServer.remoteUrl) {
+            navigator.clipboard.writeText(streamingServer.remoteUrl);
+            toast.show({
+                type: 'success',
+                title: t('SETTINGS_REMOTE_URL_COPIED'),
+                timeout: 2500,
+            });
+        }
+    }, [streamingServer.remoteUrl]);
     const sectionsContainerRef = React.useRef(null);
     const generalSectionRef = React.useRef(null);
     const playerSectionRef = React.useRef(null);
@@ -542,6 +554,36 @@ const Settings = () => {
                                 </Button>
                             </div>
                         </div>
+                        {
+                            streamingServerRemoteUrlInput.value !== null ?
+                                <div className={styles['option-container']}>
+                                    <div className={styles['option-name-container']}>
+                                        <div className={styles['label']}>{t('SETTINGS_REMOTE_URL')}</div>
+                                    </div>
+                                    <div className={classnames(styles['option-input-container'], styles['configure-input-container'])}>
+                                        <div className={styles['label']} title={streamingServerRemoteUrlInput.value}>{streamingServerRemoteUrlInput.value}</div>
+                                        <Button className={styles['configure-button-container']} title={t('SETTINGS_COPY_REMOTE_URL')} onClick={onCopyRemoteUrlClick}>
+                                            <Icon className={styles['icon']} name={'link'} />
+                                        </Button>
+                                    </div>
+                                </div>
+                                :
+                                null
+                        }
+                        {
+                            profile.auth !== null && profile.auth.user !== null && remoteEndpointSelect !== null ?
+                                <div className={styles['option-container']}>
+                                    <div className={styles['option-name-container']}>
+                                        <div className={styles['label']}>{ t('SETTINGS_HTTPS_ENDPOINT') }</div>
+                                    </div>
+                                    <Multiselect
+                                        className={classnames(styles['option-input-container'], styles['multiselect-container'])}
+                                        {...remoteEndpointSelect}
+                                    />
+                                </div>
+                                :
+                                null
+                        }
                         {
                             cacheSizeSelect !== null ?
                                 <div className={styles['option-container']}>

src/routes/Settings/useStreamingServerSettingsInputs.js

@@ -1,6 +1,7 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
 const React = require('react');
+const { useTranslation } = require('react-i18next');
 const isEqual = require('lodash.isequal');
 const { useServices } = require('stremio/services');
 
@@ -53,7 +54,45 @@ const TORRENT_PROFILES = {
 
 const useStreamingServerSettingsInputs = (streamingServer) => {
     const { core } = useServices();
+    const { t } = useTranslation();
     // TODO combine those useMemo in one
+
+    const streamingServerRemoteUrlInput = React.useMemo(() => ({
+        value: streamingServer.remoteUrl,
+    }), [streamingServer.remoteUrl]);
+
+    const remoteEndpointSelect = React.useMemo(() => {
+        if (streamingServer.settings?.type !== 'Ready' || streamingServer.networkInfo?.type !== 'Ready') {
+            return null;
+        }
+
+        return {
+            options: [
+                {
+                    label: t('SETTINGS_DISABLED'),
+                    value: null,
+                },
+                ...streamingServer.networkInfo.content.availableInterfaces.map((address) => ({
+                    label: address,
+                    value: address,
+                }))
+            ],
+            selected: [streamingServer.settings.content.remoteHttps],
+            onSelect: (event) => {
+                core.transport.dispatch({
+                    action: 'StreamingServer',
+                    args: {
+                        action: 'UpdateSettings',
+                        args: {
+                            ...streamingServer.settings.content,
+                            remoteHttps: event.value,
+                        }
+                    }
+                });
+            }
+        };
+    }, [streamingServer.settings, streamingServer.networkInfo]);
+
     const cacheSizeSelect = React.useMemo(() => {
         if (streamingServer.settings === null || streamingServer.settings.type !== 'Ready') {
             return null;
@@ -75,7 +114,7 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
                         action: 'UpdateSettings',
                         args: {
                             ...streamingServer.settings.content,
-                            cacheSize: JSON.parse(event.value)
+                            cacheSize: JSON.parse(event.value),
                         }
                     }
                 });
@@ -121,14 +160,14 @@ const useStreamingServerSettingsInputs = (streamingServer) => {
                         action: 'UpdateSettings',
                         args: {
                             ...streamingServer.settings.content,
-                            ...JSON.parse(event.value)
+                            ...JSON.parse(event.value),
                         }
                     }
                 });
             }
         };
     }, [streamingServer.settings]);
-    return { cacheSizeSelect, torrentProfileSelect };
+    return { streamingServerRemoteUrlInput, remoteEndpointSelect, cacheSizeSelect, torrentProfileSelect };
 };
 
 module.exports = useStreamingServerSettingsInputs;

src/types/models/Ctx.d.ts

@@ -28,6 +28,7 @@ type Settings = {
     seekTimeDuration: number,
     seekShortTimeDuration: number,
     streamingServerUrl: string,
+    remoteHttps: string | null,
     streamingServerWarningDismissed: Date | null,
     subtitlesBackgroundColor: string,
     subtitlesBold: boolean,

src/types/models/StremingServer.d.ts

@@ -93,6 +93,12 @@ type Statistics = {
     swarmSize: number,
 };
 
+type PlaybackDevice = {
+    id: string,
+    name: string,
+    type: string,
+};
+
 type Selected = {
     transportUrl: string,
     statistics: {
@@ -102,9 +108,11 @@ type Selected = {
 };
 
 type StreamingServer = {
-    baseUrl: Loadable<string> | null,
+    baseUrl: string | null,
+    remoteUrl: string | null,
     selected: Selected | null,
     settings: Loadable<StreamingServerSettings> | null,
     torrent: [string, Loadable<Torrent>] | null,
     statistics: Loadable<Statistics> | null,
+    playbackDevices: Loadable<PlaybackDevice[]> | null,
 };