stremio-web/src/common/AddonDetailsModal/AddonDetailsModal.js

// Copyright (C) 2017-2022 Smart code 203358507

const React = require('react');
const PropTypes = require('prop-types');
const ModalDialog = require('stremio/common/ModalDialog');
const { useServices } = require('stremio/services');
const AddonDetailsWithRemoteAndLocalAddon = withRemoteAndLocalAddon(require('./AddonDetails'));
const useAddonDetails = require('./useAddonDetails');
const styles = require('./styles');

function withRemoteAndLocalAddon(AddonDetails) {
    const withRemoteAndLocalAddon = ({ remoteAddon, localAddon, ...props }) => {
        const addon = remoteAddon !== null && remoteAddon.content.type === 'Ready' ?
            remoteAddon.content.content
            :
            localAddon !== null ?
                localAddon
                :
                null;
        if (addon === null) {
            return null;
        }

        return (
            <AddonDetails
                {...props}
                id={addon.manifest.id}
                name={addon.manifest.name}
                version={addon.manifest.version}
                logo={addon.manifest.logo}
                description={addon.manifest.description}
                types={addon.manifest.types}
                transportUrl={addon.transportUrl}
                official={addon.flags.official}
            />
        );
    };
    withRemoteAndLocalAddon.displayName = 'withRemoteAndLocalAddon';
    return withRemoteAndLocalAddon;
}

const AddonDetailsModal = ({ transportUrl, onCloseRequest }) => {
    const { core } = useServices();
    const addonDetails = useAddonDetails(transportUrl);
    const modalButtons = React.useMemo(() => {
        const cancelButton = {
            className: styles['cancel-button'],
            label: 'Cancel',
            props: {
                onClick: (event) => {
                    if (typeof onCloseRequest === 'function') {
                        onCloseRequest({
                            type: 'cancel',
                            reactEvent: event,
                            nativeEvent: event.nativeEvent
                        });
                    }
                }
            }
        };
        const toggleButton = addonDetails.localAddon !== null ?
            {
                className: styles['uninstall-button'],
                label: 'Uninstall',
                props: {
                    onClick: (event) => {
                        core.transport.dispatch({
                            action: 'Ctx',
                            args: {
                                action: 'UninstallAddon',
                                args: addonDetails.localAddon
                            }
                        });
                        if (typeof onCloseRequest === 'function') {
                            onCloseRequest({
                                type: 'uninstall',
                                reactEvent: event,
                                nativeEvent: event.nativeEvent
                            });
                        }
                    }
                }
            }
            :
            addonDetails.remoteAddon !== null && addonDetails.remoteAddon.content.type === 'Ready' ?
                {

                    className: styles['install-button'],
                    label: 'Install',
                    props: {
                        onClick: (event) => {
                            core.transport.dispatch({
                                action: 'Ctx',
                                args: {
                                    action: 'InstallAddon',
                                    args: addonDetails.remoteAddon.content.content
                                }
                            });
                            if (typeof onCloseRequest === 'function') {
                                onCloseRequest({
                                    type: 'install',
                                    reactEvent: event,
                                    nativeEvent: event.nativeEvent
                                });
                            }
                        }
                    }
                }
                :
                null;
        return toggleButton !== null ? [cancelButton, toggleButton] : [cancelButton];
    }, [addonDetails, onCloseRequest]);
    return (
        <ModalDialog className={styles['addon-details-modal-container']} title={'Stremio addon'} buttons={modalButtons} onCloseRequest={onCloseRequest}>
            {
                addonDetails.selected === null ?
                    <div className={styles['addon-details-message-container']}>
                        Loading addon manifest
                    </div>
                    :
                    addonDetails.remoteAddon === null || addonDetails.remoteAddon.content.type === 'Loading' ?
                        <div className={styles['addon-details-message-container']}>
                            Loading addon manifest from {addonDetails.selected.transportUrl}
                        </div>
                        :
                        addonDetails.remoteAddon.content.type === 'Err' && addonDetails.localAddon === null ?
                            <div className={styles['addon-details-message-container']}>
                                Failed to get addon manifest from {addonDetails.selected.transportUrl}
                                <div>{addonDetails.remoteAddon.content.content.message}</div>
                            </div>
                            :
                            <AddonDetailsWithRemoteAndLocalAddon
                                className={styles['addon-details-container']}
                                remoteAddon={addonDetails.remoteAddon}
                                localAddon={addonDetails.localAddon}
                            />
            }
        </ModalDialog>
    );
};

AddonDetailsModal.propTypes = {
    transportUrl: PropTypes.string,
    onCloseRequest: PropTypes.func
};

module.exports = AddonDetailsModal;