Player: Allow to drop local subtitles

package.json

@@ -18,7 +18,7 @@
         "@stremio/stremio-colors": "5.2.0",
         "@stremio/stremio-core-web": "0.48.5",
         "@stremio/stremio-icons": "5.4.1",
-        "@stremio/stremio-video": "0.0.52",
+        "@stremio/stremio-video": "0.0.53",
         "a-color-picker": "1.2.1",
         "bowser": "2.11.0",
         "buffer": "6.0.3",

src/App/App.js

@@ -6,7 +6,7 @@ const { useTranslation } = require('react-i18next');
 const { Router } = require('stremio-router');
 const { Core, Shell, Chromecast, DragAndDrop, KeyboardShortcuts, ServicesProvider } = require('stremio/services');
 const { NotFound } = require('stremio/routes');
-const { PlatformProvider, ToastProvider, TooltipProvider, CONSTANTS, withCoreSuspender } = require('stremio/common');
+const { FileDropProvider, PlatformProvider, ToastProvider, TooltipProvider, CONSTANTS, withCoreSuspender } = require('stremio/common');
 const ServicesToaster = require('./ServicesToaster');
 const DeepLinkHandler = require('./DeepLinkHandler');
 const SearchParamsHandler = require('./SearchParamsHandler');
@@ -166,15 +166,17 @@ const App = () => {
                             <PlatformProvider>
                                 <ToastProvider className={styles['toasts-container']}>
                                     <TooltipProvider className={styles['tooltip-container']}>
-                                        <ServicesToaster />
-                                        <DeepLinkHandler />
-                                        <SearchParamsHandler />
-                                        <UpdaterBanner className={styles['updater-banner-container']} />
-                                        <RouterWithProtectedRoutes
-                                            className={styles['router']}
-                                            viewsConfig={routerViewsConfig}
-                                            onPathNotMatch={onPathNotMatch}
-                                        />
+                                        <FileDropProvider className={styles['file-drop-container']}>
+                                            <ServicesToaster />
+                                            <DeepLinkHandler />
+                                            <SearchParamsHandler />
+                                            <UpdaterBanner className={styles['updater-banner-container']} />
+                                            <RouterWithProtectedRoutes
+                                                className={styles['router']}
+                                                viewsConfig={routerViewsConfig}
+                                                onPathNotMatch={onPathNotMatch}
+                                            />
+                                        </FileDropProvider>
                                     </TooltipProvider>
                                 </ToastProvider>
                             </PlatformProvider>

src/App/styles.less

@@ -202,9 +202,21 @@ html {
                 background-color: var(--modal-background-color);
                 box-shadow: var(--outer-glow);
                 transition: opacity 0.1s ease-out;
+            }
+
+            .file-drop-container {
+                position: fixed;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                border-radius: 1rem;
+                border: 0.5rem dashed transparent;
+                pointer-events: none;
+                transition: border-color 0.25s ease-out;
 
                 &:global(.active) {
-                    transition-delay: 0.25s;
+                    border-color: var(--primary-accent-color);
                 }
             }
 

src/common/CONSTANTS.js

@@ -41,6 +41,16 @@ const ICON_FOR_TYPE = new Map([
     ['other', 'movies'],
 ]);
 
+const MIME_SIGNATURES = {
+    'application/x-subrip': ['310D0A', '310A'],
+    'text/vtt': ['574542565454'],
+};
+
+const SUPPORTED_LOCAL_SUBTITLES = [
+    'application/x-subrip',
+    'text/vtt',
+];
+
 const EXTERNAL_PLAYERS = [
     {
         label: 'EXTERNAL_PLAYER_DISABLED',
@@ -113,6 +123,8 @@ module.exports = {
     WRITERS_LINK_CATEGORY,
     TYPE_PRIORITIES,
     ICON_FOR_TYPE,
+    MIME_SIGNATURES,
+    SUPPORTED_LOCAL_SUBTITLES,
     EXTERNAL_PLAYERS,
     WHITELISTED_HOSTS,
 };

src/common/FileDrop/FileDrop.tsx

@@ -0,0 +1,91 @@
+import React, { createContext, useCallback, useContext, useEffect, useState } from 'react';
+import classNames from 'classnames';
+import { isFileType } from './utils';
+
+export type FileType = string;
+export type FileDropListener = (filename: string, buffer: ArrayBuffer) => void;
+
+type FileDropContext = {
+    on: (type: FileType, listener: FileDropListener) => void,
+    off: (type: FileType, listener: FileDropListener) => void,
+};
+
+const FileDropContext = createContext({} as FileDropContext);
+
+type Props = {
+    className: string,
+    children: JSX.Element,
+};
+
+const FileDropProvider = ({ className, children }: Props) => {
+    const [listeners, setListeners] = useState<[FileType, FileDropListener][]>([]);
+    const [active, setActive] = useState(false);
+
+    const onDragOver = (event: DragEvent) => {
+        event.preventDefault();
+        setActive(true);
+    };
+
+    const onDragLeave = () => {
+        setActive(false);
+    };
+
+    const onDrop = useCallback((event: DragEvent) => {
+        event.preventDefault();
+        const { dataTransfer } = event;
+
+        if (dataTransfer && dataTransfer?.files.length > 0) {
+            const file = dataTransfer.files[0];
+
+            file
+                .arrayBuffer()
+                .then((buffer) => {
+                    listeners
+                        .filter(([type]) => file.type ? type === file.type : isFileType(buffer, type))
+                        .forEach(([, listerner]) => listerner(file.name, buffer));
+                });
+        }
+
+        setActive(false);
+    }, [listeners]);
+
+    const on = (type: FileType, listener: FileDropListener) => {
+        setListeners((listeners) => {
+            return [...listeners, [type, listener]];
+        });
+    };
+
+    const off = (type: FileType, listener: FileDropListener) => {
+        setListeners((listeners) => {
+            return listeners.filter(([key, value]) => key !== type && value !== listener);
+        });
+    };
+
+    useEffect(() => {
+        window.addEventListener('dragover', onDragOver);
+        window.addEventListener('dragleave', onDragLeave);
+        window.addEventListener('drop', onDrop);
+
+        return () => {
+            window.removeEventListener('dragover', onDragOver);
+            window.removeEventListener('dragleave', onDragLeave);
+            window.removeEventListener('drop', onDrop);
+        };
+    }, [onDrop]);
+
+    return (
+        <FileDropContext.Provider value={{ on, off }}>
+            { children }
+            <div className={classNames(className, { 'active': active })} />
+        </FileDropContext.Provider>
+    );
+};
+
+const useFileDrop = () => {
+    return useContext(FileDropContext);
+};
+
+export {
+    FileDropProvider,
+    useFileDrop,
+};

src/common/FileDrop/index.ts

@@ -0,0 +1,8 @@
+import { FileDropProvider, useFileDrop } from './FileDrop';
+import onFileDrop from './onFileDrop';
+
+export {
+    FileDropProvider,
+    useFileDrop,
+    onFileDrop,
+};

src/common/FileDrop/onFileDrop.ts

@@ -0,0 +1,14 @@
+import { useEffect } from 'react';
+import { type FileType, type FileDropListener, useFileDrop } from './FileDrop';
+
+const onFileDrop = (types: FileType[], listener: FileDropListener) => {
+    const { on, off } = useFileDrop();
+
+    useEffect(() => {
+        types.forEach((type) => on(type, listener));
+
+        return () => types.forEach((type) => off(type, listener));
+    }, []);
+};
+
+export default onFileDrop;

src/common/FileDrop/utils.ts

@@ -0,0 +1,19 @@
+import { MIME_SIGNATURES } from 'stremio/common/CONSTANTS';
+
+const SIGNATURES = MIME_SIGNATURES as Record<string, string[]>;
+
+const isFileType = (buffer: ArrayBuffer, type: string) => {
+    const signatures = SIGNATURES[type];
+
+    return signatures.some((signature) => {
+        const array = new Uint8Array(buffer);
+        const signatureBuffer = Buffer.from(signature, 'hex');
+        const bufferToCompare = array.subarray(0, signatureBuffer.length);
+
+        return Buffer.compare(signatureBuffer, bufferToCompare) === 0;
+    });
+};
+
+export {
+    isFileType,
+};

src/common/index.js

@@ -1,5 +1,6 @@
 // Copyright (C) 2017-2023 Smart code 203358507
 
+const { FileDropProvider, onFileDrop } = require('./FileDrop');
 const { PlatformProvider, usePlatform } = require('./Platform');
 const { ToastProvider, useToast } = require('./Toast');
 const { TooltipProvider, Tooltip } = require('./Tooltips');
@@ -25,6 +26,8 @@ const useTorrent = require('./useTorrent');
 const useTranslate = require('./useTranslate');
 
 module.exports = {
+    FileDropProvider,
+    onFileDrop,
     PlatformProvider,
     usePlatform,
     ToastProvider,

src/routes/Player/Player.js

@@ -8,7 +8,7 @@ const langs = require('langs');
 const { useTranslation } = require('react-i18next');
 const { useRouteFocused } = require('stremio-router');
 const { useServices } = require('stremio/services');
-const { useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender } = require('stremio/common');
+const { onFileDrop, useFullscreen, useBinaryState, useToast, useStreamingServer, withCoreSuspender, CONSTANTS } = require('stremio/common');
 const { HorizontalNavBar, Transition } = require('stremio/components');
 const BufferingLoader = require('./BufferingLoader');
 const VolumeChangeIndicator = require('./VolumeChangeIndicator');
@@ -133,11 +133,20 @@ const Player = ({ urlParams, queryParams }) => {
         toast.show({
             type: 'success',
             title: t('PLAYER_SUBTITLES_LOADED'),
-            message: track.exclusive ? t('PLAYER_SUBTITLES_LOADED_EXCLUSIVE') : t('PLAYER_SUBTITLES_LOADED_ORIGIN', { origin: track.origin }),
+            message:
+                track.exclusive ? t('PLAYER_SUBTITLES_LOADED_EXCLUSIVE') :
+                    track.local ? t('PLAYER_SUBTITLES_LOADED_LOCAL') :
+                        t('PLAYER_SUBTITLES_LOADED_ORIGIN', { origin: track.origin }),
             timeout: 3000
         });
     }, []);
 
+    const onExtraSubtitlesTrackAdded = React.useCallback((track) => {
+        if (track.local) {
+            video.setExtraSubtitlesTrack(track.id);
+        }
+    }, []);
+
     const onPlayRequested = React.useCallback(() => {
         video.setProp('paused', false);
         setSeeking(false);
@@ -172,13 +181,11 @@ const Player = ({ urlParams, queryParams }) => {
     }, []);
 
     const onSubtitlesTrackSelected = React.useCallback((id) => {
-        video.setProp('selectedSubtitlesTrackId', id);
-        video.setProp('selectedExtraSubtitlesTrackId', null);
+        video.setSubtitlesTrack(id);
     }, []);
 
     const onExtraSubtitlesTrackSelected = React.useCallback((id) => {
-        video.setProp('selectedSubtitlesTrackId', null);
-        video.setProp('selectedExtraSubtitlesTrackId', id);
+        video.setExtraSubtitlesTrack(id);
     }, []);
 
     const onAudioTrackSelected = React.useCallback((id) => {
@@ -270,6 +277,10 @@ const Player = ({ urlParams, queryParams }) => {
         event.nativeEvent.immersePrevented = true;
     }, []);
 
+    onFileDrop(CONSTANTS.SUPPORTED_LOCAL_SUBTITLES, async (filename, buffer) => {
+        video.addLocalSubtitles(filename, buffer);
+    });
+
     React.useEffect(() => {
         setError(null);
         video.unload();
@@ -586,13 +597,15 @@ const Player = ({ urlParams, queryParams }) => {
         video.events.on('ended', onEnded);
         video.events.on('subtitlesTrackLoaded', onSubtitlesTrackLoaded);
         video.events.on('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded);
+        video.events.on('extraSubtitlesTrackAdded', onExtraSubtitlesTrackAdded);
         video.events.on('implementationChanged', onImplementationChanged);
 
         return () => {
             video.events.off('error', onError);
             video.events.off('ended', onEnded);
             video.events.off('subtitlesTrackLoaded', onSubtitlesTrackLoaded);
             video.events.off('extraSubtitlesTrackLoaded', onExtraSubtitlesTrackLoaded);
+            video.events.off('extraSubtitlesTrackAdded', onExtraSubtitlesTrackAdded);
             video.events.off('implementationChanged', onImplementationChanged);
         };
     }, []);

src/routes/Player/SubtitlesMenu/SubtitlesMenu.js

@@ -10,11 +10,13 @@ const styles = require('./styles');
 const { t } = require('i18next');
 
 const ORIGIN_PRIORITIES = {
+    'LOCAL': 3,
     'EMBEDDED': 2,
-    'EXCLUSIVE': 1
+    'EXCLUSIVE': 1,
 };
 const LANGUAGE_PRIORITIES = {
-    'eng': 1
+    'local': 2,
+    'eng': 1,
 };
 
 const SubtitlesMenu = React.memo((props) => {
@@ -161,7 +163,11 @@ const SubtitlesMenu = React.memo((props) => {
                     </Button>
                     {subtitlesLanguages.map((lang, index) => (
                         <Button key={index} title={languages.label(lang)} className={classnames(styles['language-option'], { 'selected': selectedSubtitlesLanguage === lang })} data-lang={lang} onClick={subtitlesLanguageOnClick}>
-                            <div className={styles['language-label']}>{languages.label(lang)}</div>
+                            <div className={styles['language-label']}>
+                                {
+                                    lang === 'local' ? t('LOCAL') : languages.label(lang)
+                                }
+                            </div>
                             {
                                 selectedSubtitlesLanguage === lang ?
                                     <div className={styles['icon']} />