diff --git a/src/common/SharePrompt/SharePrompt.js b/src/common/SharePrompt/SharePrompt.js index 4a1abc80b..eb0ade0f1 100644 --- a/src/common/SharePrompt/SharePrompt.js +++ b/src/common/SharePrompt/SharePrompt.js @@ -2,14 +2,14 @@ const React = require('react'); const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); -const { useFocusable } = require('stremio-router'); +const { useRouteFocused } = require('stremio-router'); const Button = require('stremio/common/Button'); const TextInput = require('stremio/common/TextInput'); const styles = require('./styles'); -const SharePrompt = ({ className, label, url, close }) => { +const SharePrompt = ({ className, label, url, close, onClick }) => { const inputRef = React.useRef(null); - const focusable = useFocusable(); + const focusable = useRouteFocused(); const copyToClipboard = React.useCallback(() => { inputRef.current.select(); document.execCommand('copy'); @@ -28,9 +28,9 @@ const SharePrompt = ({ className, label, url, close }) => { }; }, [close, focusable]); return ( -
-
{label}
@@ -60,7 +60,8 @@ SharePrompt.propTypes = { className: PropTypes.string, label: PropTypes.string.isRequired, url: PropTypes.string.isRequired, - close: PropTypes.func + close: PropTypes.func, + onClick: PropTypes.func }; module.exports = SharePrompt; diff --git a/src/routes/Addons/Addon/Addon.js b/src/routes/Addons/Addon/Addon.js index 2866a4881..765449bb8 100644 --- a/src/routes/Addons/Addon/Addon.js +++ b/src/routes/Addons/Addon/Addon.js @@ -5,7 +5,7 @@ const Icon = require('stremio-icons/dom'); const { Button } = require('stremio/common'); 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) => { if (event.key === 'Enter' && typeof toggle === 'function') { toggle(event); @@ -55,7 +55,7 @@ const Addon = ({ className, id, name, logo, description, types, version, transpo - @@ -75,7 +75,8 @@ Addon.propTypes = { transportUrl: PropTypes.string, installed: PropTypes.bool, isProtected: PropTypes.bool, - toggle: PropTypes.func + toggle: PropTypes.func, + onShareButtonClicked: PropTypes.func }; module.exports = Addon; diff --git a/src/routes/Addons/Addons.js b/src/routes/Addons/Addons.js index 4d8657b59..68e534245 100644 --- a/src/routes/Addons/Addons.js +++ b/src/routes/Addons/Addons.js @@ -1,7 +1,8 @@ const React = require('react'); +const classnames = require('classnames'); const Icon = require('stremio-icons/dom'); 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 AddonPrompt = require('./AddonPrompt'); const useAddons = require('./useAddons'); @@ -15,12 +16,14 @@ const Addons = ({ urlParams, queryParams }) => { }, []); const [addons, dropdowns, setSelectedAddon, installSelectedAddon, uninstallSelectedAddon, installedAddons] = useAddons(urlParams, queryParams); 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) { clearSelectedAddon(); + setSharedAddon(null); } }, []); - const addonPromptOnClick = React.useCallback((event) => { + const promptOnClick = React.useCallback((event) => { event.nativeEvent.clearSelectedAddonPrevented = true; }, []); 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())) )) .map((addon, index) => ( - setSelectedAddon(addon.transportUrl)} /> + setSelectedAddon(addon.transportUrl)} + onShareButtonClicked={() => setSharedAddon(addon)} + /> )) }
{ selectedAddon !== null ? - -
- setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)} /> + +
+ setInstalledAddon(selectedAddon) ? uninstallSelectedAddon(selectedAddon) : installSelectedAddon(selectedAddon)} + /> +
+
+ : + null + } + { + sharedAddon !== null ? + +
+ setSharedAddon(null)} + onClick={promptOnClick} + />
: diff --git a/src/routes/Addons/styles.less b/src/routes/Addons/styles.less index 8e32b6f70..2fbd3e928 100644 --- a/src/routes/Addons/styles.less +++ b/src/routes/Addons/styles.less @@ -117,25 +117,32 @@ } } -.addon-prompt-modal-container { +.prompt-modal-container { display: flex; align-items: center; justify-content: center; background-color: var(--color-background60); - .addon-prompt-container { + .prompt-container { flex: none; display: flex; flex-direction: column; justify-content: center; - width: 50rem; height: 80%; - .addon-prompt { + .prompt { flex-grow: 0; flex-shrink: 1; flex-basis: auto; align-self: stretch; } } + + .addon-prompt-container { + width: 50rem; + } + + .share-prompt-container { + width: 30rem; + } } \ No newline at end of file diff --git a/src/routes/Addons/useSelectedAddon.js b/src/routes/Addons/useSelectedAddon.js index ce4f49ec5..4d47137f5 100644 --- a/src/routes/Addons/useSelectedAddon.js +++ b/src/routes/Addons/useSelectedAddon.js @@ -21,7 +21,7 @@ const useSelectedAddon = (transportUrl) => { const { pathname, search } = UrlUtils.parse(locationHash.slice(1)); const queryParams = new URLSearchParams(search); queryParams.delete('addon'); - if (search && queryParams) { + if (!queryParams.values().next().done) { window.location.replace(`#${pathname}?${queryParams.toString()}`); } else {