Merge pull request #314 from Stremio/navmenu-changes

Navmenu changes

src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js

@@ -8,12 +8,14 @@ const { useServices } = require('stremio/services');
 const Button = require('stremio/common/Button');
 const useFullscreen = require('stremio/common/useFullscreen');
 const useProfile = require('stremio/common/useProfile');
+const useTorrent = require('stremio/common/useTorrent');
 const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const styles = require('./styles');
 
 const NavMenuContent = ({ onClick }) => {
     const { core } = useServices();
     const profile = useProfile();
+    const { createTorrentFromMagnet } = useTorrent();
     const [fullscreen, requestFullscreen, exitFullscreen] = useFullscreen();
     const logoutButtonOnClick = React.useCallback(() => {
         core.transport.dispatch({
@@ -23,6 +25,14 @@ const NavMenuContent = ({ onClick }) => {
             }
         });
     }, []);
+    const onPlayMagnetLinkClick = React.useCallback(async () => {
+        try {
+            const clipboardText = await navigator.clipboard.readText();
+            createTorrentFromMagnet(clipboardText);
+        } catch(e) {
+            console.error(e);
+        }
+    }, []);
     return (
         <div className={classnames(styles['nav-menu-container'], 'animation-fade-in')} onClick={onClick}>
             <div className={styles['user-info-container']}>
@@ -57,11 +67,7 @@ const NavMenuContent = ({ onClick }) => {
                     <Icon className={styles['icon']} icon={'ic_addons'} />
                     <div className={styles['nav-menu-option-label']}>Addons</div>
                 </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Remote Control'} disabled={true}>
+                <Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} onClick={onPlayMagnetLinkClick}>
-                    <Icon className={styles['icon']} icon={'ic_remote'} />
-                    <div className={styles['nav-menu-option-label']}>Remote Control</div>
-                </Button>
-                <Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} disabled={true}>
                     <Icon className={styles['icon']} icon={'ic_magnet'} />
                     <div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
                 </Button>

src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js

@@ -3,17 +3,17 @@
 const React = require('react');
 const PropTypes = require('prop-types');
 const classnames = require('classnames');
-const magnet = require('magnet-uri');
-const { useServices } = require('stremio/services');
 const Icon = require('@stremio/stremio-icons/dom');
 const { useRouteFocused } = require('stremio-router');
 const Button = require('stremio/common/Button');
 const TextInput = require('stremio/common/TextInput');
+const useTorrent = require('stremio/common/useTorrent');
+const { withCoreSuspender } = require('stremio/common/CoreSuspender');
 const styles = require('./styles');
 
 const SearchBar = ({ className, query, active }) => {
-    const { core } = useServices();
     const routeFocused = useRouteFocused();
+    const { createTorrentFromMagnet } = useTorrent();
     const searchInputRef = React.useRef(null);
     const searchBarOnClick = React.useCallback(() => {
         if (!active) {
@@ -22,17 +22,7 @@ const SearchBar = ({ className, query, active }) => {
     }, [active]);
     const queryInputOnChange = React.useCallback(() => {
         try {
-            const parsed = magnet.decode(searchInputRef.current.value);
+            createTorrentFromMagnet(searchInputRef.current.value);
-            if (parsed && typeof parsed.infoHash === 'string') {
-                core.transport.dispatch({
-                    action: 'StreamingServer',
-                    args: {
-                        action: 'CreateTorrent',
-                        args: searchInputRef.current.value
-                    }
-                });
-                searchInputRef.current.value = '';
-            }
             // eslint-disable-next-line no-empty
         } catch { }
     }, []);
@@ -80,4 +70,17 @@ SearchBar.propTypes = {
     active: PropTypes.bool
 };
 
-module.exports = SearchBar;
+const SearchBarFallback = ({ className }) => (
+    <label className={classnames(className, styles['search-bar-container'])}>
+        <div className={styles['search-input']}>
+            <div className={styles['placeholder-label']}>Search or paste link</div>
+        </div>
+        <Button className={styles['submit-button-container']} tabIndex={-1}>
+            <Icon className={styles['icon']} icon={'ic_search_link'} />
+        </Button>
+    </label>
+);
+
+SearchBarFallback.propTypes = SearchBar.propTypes;
+
+module.exports = withCoreSuspender(SearchBar, SearchBarFallback);

src/common/index.js

@@ -38,6 +38,7 @@ const useModelState = require('./useModelState');
 const useOnScrollToBottom = require('./useOnScrollToBottom');
 const useProfile = require('./useProfile');
 const useStreamingServer = require('./useStreamingServer');
+const useTorrent = require('./useTorrent');
 
 module.exports = {
     AddonDetailsModal,
@@ -80,5 +81,6 @@ module.exports = {
     useModelState,
     useOnScrollToBottom,
     useProfile,
-    useStreamingServer
+    useStreamingServer,
+    useTorrent
 };

src/common/useTorrent.js

@@ -0,0 +1,50 @@
+// Copyright (C) 2017-2022 Smart code 203358507
+
+const React = require('react');
+const magnet = require('magnet-uri');
+const { useServices } = require('stremio/services');
+const useToast = require('stremio/common/Toast/useToast');
+const useStreamingServer = require('stremio/common/useStreamingServer');
+
+const useTorrent = () => {
+    const { core } = useServices();
+    const streamingServer = useStreamingServer();
+    const toast = useToast();
+    const createTorrentTimeout = React.useRef(null);
+    const createTorrentFromMagnet = React.useCallback((text) => {
+        const parsed = magnet.decode(text);
+        if (parsed && typeof parsed.infoHash === 'string') {
+            core.transport.dispatch({
+                action: 'StreamingServer',
+                args: {
+                    action: 'CreateTorrent',
+                    args: text
+                }
+            });
+            clearTimeout(createTorrentTimeout.current);
+            createTorrentTimeout.current = setTimeout(() => {
+                toast.show({
+                    type: 'error',
+                    title: 'It\'s taking a long time to get metadata from the torrent.',
+                    timeout: 10000
+                });
+            }, 10000);
+        }
+    }, []);
+    React.useEffect(() => {
+        if (streamingServer.torrent !== null) {
+            const [, { type }] = streamingServer.torrent;
+            if (type === 'Ready') {
+                clearTimeout(createTorrentTimeout.current);
+            }
+        }
+    }, [streamingServer.torrent]);
+    React.useEffect(() => {
+        return () => clearTimeout(createTorrentTimeout.current);
+    }, []);
+    return {
+        createTorrentFromMagnet
+    };
+};
+
+module.exports = useTorrent;