Creepso/stremio-web
1
0
Fork 0
mirror of https://github.com/Stremio/stremio-web.git synced 2026-05-04 01:29:02 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

open/close SharePrompt works

Browse source
This commit is contained in:
svetlagasheva 2019-10-30 15:29:03 +02:00
parent 380bb0fb0e
commit bb1a4886c3
5 changed files with 67 additions and 22 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/common/SharePrompt/SharePrompt.js
View file

@ -2,14 +2,14 @@ const React = require('react');
const PropTypes = require('prop-types'); const PropTypes = require('prop-types');
const classnames = require('classnames'); const classnames = require('classnames');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { useFocusable } = require('stremio-router'); const { useRouteFocused } = require('stremio-router');
const Button = require('stremio/common/Button'); const Button = require('stremio/common/Button');
const TextInput = require('stremio/common/TextInput'); const TextInput = require('stremio/common/TextInput');
const styles = require('./styles'); const styles = require('./styles');
const SharePrompt = ({ className, label, url, close }) => { const SharePrompt = ({ className, label, url, close, onClick }) => {
const inputRef = React.useRef(null); const inputRef = React.useRef(null);
const focusable = useFocusable(); const focusable = useRouteFocused();
const copyToClipboard = React.useCallback(() => { const copyToClipboard = React.useCallback(() => {
inputRef.current.select(); inputRef.current.select();
document.execCommand('copy'); document.execCommand('copy');
@ -28,9 +28,9 @@ const SharePrompt = ({ className, label, url, close }) => {
}; };
}, [close, focusable]); }, [close, focusable]);
return ( return (
<div className={classnames(className, styles['share-prompt-container'])}> <div className={classnames(className, styles['share-prompt-container'])} onClick={onClick}>
<Button className={styles['close-button-container']}> <Button className={styles['close-button-container']} title={'Close'} tabIndex={-1} onClick={close}>
<Icon className={styles['icon']} icon={'ic_x'} onClick={close} /> <Icon className={styles['icon']} icon={'ic_x'} />
</Button> </Button>
<div className={styles['share-prompt-content']}> <div className={styles['share-prompt-content']}>
<div className={styles['share-prompt-label']}>{label}</div> <div className={styles['share-prompt-label']}>{label}</div>
@ -60,7 +60,8 @@ SharePrompt.propTypes = {
className: PropTypes.string, className: PropTypes.string,
label: PropTypes.string.isRequired, label: PropTypes.string.isRequired,
url: PropTypes.string.isRequired, url: PropTypes.string.isRequired,
close: PropTypes.func close: PropTypes.func,
onClick: PropTypes.func
}; };
module.exports = SharePrompt; module.exports = SharePrompt;

7
src/routes/Addons/Addon/Addon.js
View file

@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom');
const { Button } = require('stremio/common'); const { Button } = require('stremio/common');
const styles = require('./styles'); const styles = require('./styles');
const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, isProtected, toggle }) => { const Addon = ({ className, id, name, logo, description, types, version, transportUrl, installed, isProtected, toggle, onShareButtonClicked }) => {
const onKeyUp = React.useCallback((event) => { const onKeyUp = React.useCallback((event) => {
if (event.key === 'Enter' && typeof toggle === 'function') { if (event.key === 'Enter' && typeof toggle === 'function') {
toggle(event); toggle(event);
@ -55,7 +55,7 @@ const Addon = ({ className, id, name, logo, description, types, version, transpo
<Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} data-id={id} disabled={isProtected} onClick={toggle}> <Button className={installed ? styles['uninstall-button-container'] : styles['install-button-container']} title={installed ? 'Uninstall' : 'Install'} tabIndex={-1} data-id={id} disabled={isProtected} onClick={toggle}>
<div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div> <div className={styles['label']}>{installed ? 'Uninstall' : 'Install'}</div>
</Button> </Button>
<Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1}> <Button className={styles['share-button-container']} title={'Share addon'} tabIndex={-1} onClick={onShareButtonClicked}>
<Icon className={styles['icon']} icon={'ic_share'} /> <Icon className={styles['icon']} icon={'ic_share'} />
<div className={styles['label']}>Share addon</div> <div className={styles['label']}>Share addon</div>
</Button> </Button>
@ -75,7 +75,8 @@ Addon.propTypes = {
transportUrl: PropTypes.string, transportUrl: PropTypes.string,
installed: PropTypes.bool, installed: PropTypes.bool,
isProtected: PropTypes.bool, isProtected: PropTypes.bool,
toggle: PropTypes.func toggle: PropTypes.func,
onShareButtonClicked: PropTypes.func
}; };
module.exports = Addon; module.exports = Addon;

50
src/routes/Addons/Addons.js
View file

@ -1,7 +1,8 @@
const React = require('react'); const React = require('react');
const classnames = require('classnames');
const Icon = require('stremio-icons/dom'); const Icon = require('stremio-icons/dom');
const { Modal } = require('stremio-router'); const { Modal } = require('stremio-router');
const { Button, Multiselect, NavBar, TextInput } = require('stremio/common'); const { Button, Multiselect, NavBar, TextInput, SharePrompt } = require('stremio/common');
const Addon = require('./Addon'); const Addon = require('./Addon');
const AddonPrompt = require('./AddonPrompt'); const AddonPrompt = require('./AddonPrompt');
const useAddons = require('./useAddons'); const useAddons = require('./useAddons');
@ -15,12 +16,14 @@ const Addons = ({ urlParams, queryParams }) => {
}, []); }, []);
const [addons, dropdowns, setSelectedAddon, installSelectedAddon, uninstallSelectedAddon, installedAddons] = useAddons(urlParams, queryParams); const [addons, dropdowns, setSelectedAddon, installSelectedAddon, uninstallSelectedAddon, installedAddons] = useAddons(urlParams, queryParams);
const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon')); const [selectedAddon, clearSelectedAddon] = useSelectedAddon(queryParams.get('addon'));
const addonPromptModalBackgroundOnClick = React.useCallback((event) => { const [sharedAddon, setSharedAddon] = React.useState(null);
const promptModalBackgroundOnClick = React.useCallback((event) => {
if (!event.nativeEvent.clearSelectedAddonPrevented) { if (!event.nativeEvent.clearSelectedAddonPrevented) {
clearSelectedAddon(); clearSelectedAddon();
setSharedAddon(null);
} }
}, []); }, []);
const addonPromptOnClick = React.useCallback((event) => { const promptOnClick = React.useCallback((event) => {
event.nativeEvent.clearSelectedAddonPrevented = true; event.nativeEvent.clearSelectedAddonPrevented = true;
}, []); }, []);
const setInstalledAddon = React.useCallback((currentAddon) => { const setInstalledAddon = React.useCallback((currentAddon) => {
@ -57,15 +60,48 @@ const Addons = ({ urlParams, queryParams }) => {
(typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase())) (typeof addon.manifest.description === 'string' && addon.manifest.description.toLowerCase().includes(query.toLowerCase()))
)) ))
.map((addon, index) => ( .map((addon, index) => (
<Addon {...addon.manifest} key={index} installed={setInstalledAddon(addon)} isProtected={addon.flags && addon.flags.protected} className={styles['addon']} toggle={() => setSelectedAddon(addon.transportUrl)} /> <Addon
{...addon.manifest}
key={index}
installed={setInstalledAddon(addon)}
isProtected={addon.flags && addon.flags.protected}
className={styles['addon']}
toggle={() => setSelectedAddon(addon.transportUrl)}
onShareButtonClicked={() => setSharedAddon(addon)}
/>
)) ))
} }
</div> </div>
{ {
selectedAddon !== null ? selectedAddon !== null ?
<Modal className={styles['addon-prompt-modal-container']} onClick={addonPromptModalBackgroundOnClick}> <Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
<div className={styles['addon-prompt-container']}> <div className={classnames(styles['prompt-container'], styles['addon-prompt-container'])}>
<AddonPrompt {...selectedAddon.manifest} transportUrl={selectedAddon.transportUrl} installed={setInstalledAddon(selectedAddon)} official={selectedAddon.flags.official} className={styles['addon-prompt']} cancel={clearSelectedAddon} onClick={addonPromptOnClick} toggle={() => setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)} /> <AddonPrompt
{...selectedAddon.manifest}
transportUrl={selectedAddon.transportUrl}
installed={setInstalledAddon(selectedAddon)}
official={selectedAddon.flags.official}
className={styles['prompt']}
cancel={clearSelectedAddon}
onClick={promptOnClick}
toggle={() => setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)}
/>
</div>
</Modal>
:
null
}
{
sharedAddon !== null ?
<Modal className={styles['prompt-modal-container']} onClick={promptModalBackgroundOnClick}>
<div className={classnames(styles['prompt-container'], styles['share-prompt-container'])}>
<SharePrompt
label={'Share add-on'}
url={sharedAddon.transportUrl}
className={styles['prompt']}
close={() => setSharedAddon(null)}
onClick={promptOnClick}
/>
</div> </div>
</Modal> </Modal>
: :

15
src/routes/Addons/styles.less
View file

@ -117,25 +117,32 @@
} }
} }
.addon-prompt-modal-container { .prompt-modal-container {
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background-color: var(--color-background60); background-color: var(--color-background60);
.addon-prompt-container { .prompt-container {
flex: none; flex: none;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 50rem;
height: 80%; height: 80%;
.addon-prompt { .prompt {
flex-grow: 0; flex-grow: 0;
flex-shrink: 1; flex-shrink: 1;
flex-basis: auto; flex-basis: auto;
align-self: stretch; align-self: stretch;
} }
} }
.addon-prompt-container {
width: 50rem;
}
.share-prompt-container {
width: 30rem;
}
} }

2
src/routes/Addons/useSelectedAddon.js
View file

@ -21,7 +21,7 @@ const useSelectedAddon = (transportUrl) => {
const { pathname, search } = UrlUtils.parse(locationHash.slice(1)); const { pathname, search } = UrlUtils.parse(locationHash.slice(1));
const queryParams = new URLSearchParams(search); const queryParams = new URLSearchParams(search);
queryParams.delete('addon'); queryParams.delete('addon');
if (search && queryParams) { if (!queryParams.values().next().done) {
window.location.replace(`#${pathname}?${queryParams.toString()}`); window.location.replace(`#${pathname}?${queryParams.toString()}`);
} }
else { else {