Skip to content

Commit

Permalink
Merge pull request #766 from Stremio/feat/addons-one-click-actions
Browse files Browse the repository at this point in the history 
Addons: make actions single click
  • Loading branch information
@tymmesyde
tymmesyde authored Jan 2, 2025
2 parents 56d69d8 + c1820a3 commit b5d073b
Show file tree
Hide file tree
Showing 5 changed files with 81 additions and 27 deletions.
9 changes: 5 additions & 4 deletions package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,7 @@
"@babel/runtime": "7.26.0",
"@sentry/browser": "8.42.0",
"@stremio/stremio-colors": "5.2.0",
"@stremio/stremio-core-web": "0.48.3",
"@stremio/stremio-core-web": "0.48.4",
"@stremio/stremio-icons": "5.4.1",
"@stremio/stremio-video": "0.0.48",
"a-color-picker": "1.2.1",
Expand Down
55 changes: 39 additions & 16 deletions src/routes/Addons/Addon/Addon.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,19 +8,43 @@ const { default: Icon } = require('@stremio/stremio-icons/react');
const { Button, Image } = require('stremio/common');
const styles = require('./styles');

const Addon = ({ className, id, name, version, logo, description, types, behaviorHints, installed, onToggle, onConfigure, onShare, dataset }) => {
const Addon = ({ className, id, name, version, logo, description, types, behaviorHints, installed, onInstall, onUninstall, onConfigure, onOpen, onShare, dataset }) => {
const { t } = useTranslation();
const toggleButtonOnClick = React.useCallback((event) => {
if (typeof onToggle === 'function') {
onToggle({
type: 'toggle',
const onInstallClick = React.useCallback((event) => {
event.stopPropagation();
if (typeof onInstall === 'function') {
onInstall({
type: 'install',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [onToggle, dataset]);
}, [onInstall, dataset]);
const onUninstallClick = React.useCallback((event) => {
event.stopPropagation();
if (typeof onUninstall === 'function') {
onUninstall({
type: 'uninstall',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [onUninstall, dataset]);
const onOpenClick = React.useCallback((event) => {
event.stopPropagation();
if (typeof onOpen === 'function') {
onOpen({
type: 'open',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
}
}, [onOpen, dataset]);
const configureButtonOnClick = React.useCallback((event) => {
event.stopPropagation();
if (typeof onConfigure === 'function') {
onConfigure({
type: 'configure',
Expand All @@ -31,6 +55,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
}
}, [onConfigure, dataset]);
const shareButtonOnClick = React.useCallback((event) => {
event.stopPropagation();
if (typeof onShare === 'function') {
onShare({
type: 'share',
Expand All @@ -41,20 +66,15 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
}
}, [onShare, dataset]);
const onKeyDown = React.useCallback((event) => {
if (event.key === 'Enter' && typeof onToggle === 'function') {
onToggle({
type: 'toggle',
nativeEvent: event.nativeEvent,
reactEvent: event,
dataset: dataset
});
if (event.key === 'Enter') {
onOpenClick(event);
}
}, [onToggle, dataset]);
}, [onOpenClick]);
const renderLogoFallback = React.useCallback(() => (
<Icon className={styles['icon']} name={'addons'} />
), []);
return (
<Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown}>
<Button className={classnames(className, styles['addon-container'])} onKeyDown={onKeyDown} onClick={onOpenClick}>
<div className={styles['logo-container']}>
<Image
className={styles['logo']}
Expand Down Expand Up @@ -107,7 +127,7 @@ const Addon = ({ className, id, name, version, logo, description, types, behavio
className={installed ? styles['uninstall-button-container'] : styles['install-button-container']}
title={installed ? t('ADDON_UNINSTALL') : behaviorHints.configurationRequired ? t('ADDON_CONFIGURE') : t('ADDON_INSTALL')}
tabIndex={-1}
onClick={!installed && behaviorHints.configurationRequired ? configureButtonOnClick : toggleButtonOnClick}
onClick={installed ? onUninstallClick : behaviorHints.configurationRequired ? configureButtonOnClick : onInstallClick}
>
<div className={styles['label']}>{installed ? t('ADDON_UNINSTALL') : behaviorHints.configurationRequired ? t('ADDON_CONFIGURE') : t('ADDON_INSTALL')}</div>
</Button>
Expand Down Expand Up @@ -137,7 +157,10 @@ Addon.propTypes = {
}),
installed: PropTypes.bool,
onToggle: PropTypes.func,
onInstall: PropTypes.func,
onUninstall: PropTypes.func,
onConfigure: PropTypes.func,
onOpen: PropTypes.func,
onShare: PropTypes.func,
dataset: PropTypes.object
};
Expand Down
8 changes: 7 additions & 1 deletion src/routes/Addons/Addon/styles.less
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,15 @@
flex-direction: row;
align-items: flex-start;
padding: 1.5rem;
border: 0.15rem solid transparent;
border-radius: var(--border-radius);
background-color: var(--overlay-color);
cursor: inherit;
transition: border-color 0.1s ease-out;
cursor: pointer;

&:hover {
border-color: var(--overlay-color);
}

.logo-container {
flex: none;
Expand Down
34 changes: 29 additions & 5 deletions src/routes/Addons/Addons.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ const classnames = require('classnames');
const { useTranslation } = require('react-i18next');
const { default: Icon } = require('@stremio/stremio-icons/react');
const { AddonDetailsModal, Button, Image, Multiselect, MainNavBars, TextInput, SearchBar, SharePrompt, ModalDialog, usePlatform, useBinaryState, withCoreSuspender } = require('stremio/common');
const { useServices } = require('stremio/services');
const Addon = require('./Addon');
const useInstalledAddons = require('./useInstalledAddons');
const useRemoteAddons = require('./useRemoteAddons');
Expand All @@ -17,6 +18,7 @@ const { AddonPlaceholder } = require('./AddonPlaceholder');
const Addons = ({ urlParams, queryParams }) => {
const { t } = useTranslation();
const platform = usePlatform();
const { core } = useServices();
const installedAddons = useInstalledAddons(urlParams);
const remoteAddons = useRemoteAddons(urlParams);
const [addonDetailsTransportUrl, setAddonDetailsTransportUrl] = useAddonDetailsTransportUrl(urlParams, queryParams);
Expand Down Expand Up @@ -57,12 +59,30 @@ const Addons = ({ urlParams, queryParams }) => {
const onAddonShare = React.useCallback((event) => {
setSharedAddon(event.dataset.addon);
}, []);
const onAddonToggle = React.useCallback((event) => {
setAddonDetailsTransportUrl(event.dataset.addon.transportUrl);
}, [setAddonDetailsTransportUrl]);
const onAddonInstall = React.useCallback((event) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'InstallAddon',
args: event.dataset.addon,
}
});
}, []);
const onAddonUninstall = React.useCallback((event) => {
core.transport.dispatch({
action: 'Ctx',
args: {
action: 'UninstallAddon',
args: event.dataset.addon,
}
});
}, []);
const onAddonConfigure = React.useCallback((event) => {
platform.openExternal(event.dataset.addon.transportUrl.replace('manifest.json', 'configure'));
}, []);
const onAddonOpen = React.useCallback((event) => {
setAddonDetailsTransportUrl(event.dataset.addon.transportUrl);
}, [setAddonDetailsTransportUrl]);
const closeAddonDetails = React.useCallback(() => {
setAddonDetailsTransportUrl(null);
}, [setAddonDetailsTransportUrl]);
Expand Down Expand Up @@ -135,8 +155,10 @@ const Addons = ({ urlParams, queryParams }) => {
types={addon.manifest.types}
behaviorHints={addon.manifest.behaviorHints}
installed={addon.installed}
onToggle={onAddonToggle}
onInstall={onAddonInstall}
onUninstall={onAddonUninstall}
onConfigure={onAddonConfigure}
onOpen={onAddonOpen}
onShare={onAddonShare}
dataset={{ addon }}
/>
Expand Down Expand Up @@ -173,8 +195,10 @@ const Addons = ({ urlParams, queryParams }) => {
types={addon.manifest.types}
behaviorHints={addon.manifest.behaviorHints}
installed={addon.installed}
onToggle={onAddonToggle}
onInstall={onAddonInstall}
onUninstall={onAddonUninstall}
onConfigure={onAddonConfigure}
onOpen={onAddonOpen}
onShare={onAddonShare}
dataset={{ addon }}
/>
Expand Down

0 comments on commit b5d073b

Please sign in to comment.