Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-03-11 21:27:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

Merge pull request #314 from Stremio/navmenu-changes

Browse source 
Navmenu changes
This commit is contained in:
Nikola Hristov 2022-11-02 20:48:03 +02:00 committed by GitHub
commit 882674cb63
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 82 additions and 21 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
src/common/NavBar/HorizontalNavBar/NavMenu/NavMenuContent.js
View file

@ -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}>
<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}>
<Button className={styles['nav-menu-option-container']} title={'Play Magnet Link'} onClick={onPlayMagnetLinkClick}>
<Icon className={styles['icon']} icon={'ic_magnet'} />
<div className={styles['nav-menu-option-label']}>Play Magnet Link</div>
</Button>

33
src/common/NavBar/HorizontalNavBar/SearchBar/SearchBar.js
View file

@ -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);
if (parsed && typeof parsed.infoHash === 'string') {
core.transport.dispatch({
action: 'StreamingServer',
args: {
action: 'CreateTorrent',
args: searchInputRef.current.value
}
});
searchInputRef.current.value = '';
}
createTorrentFromMagnet(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);

4
src/common/index.js
View file

@ -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
};

50
src/common/useTorrent.js Normal file
View file

@ -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;