Merge pull request #536 from Stremio/feature-seasonal-notif

Feature: seasonal notification - EventModal

src/common/EventModal/EventModal.js

@@ -0,0 +1,90 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const React = require('react');
+const { useTranslation } = require('react-i18next');
+const Button = require('stremio/common/Button');
+const ModalDialog = require('stremio/common/ModalDialog');
+const useEvents = require('./useEvents');
+const styles = require('./styles');
+const { default: Icon } = require('@stremio/stremio-icons/react');
+
+const EventModal = () => {
+    const { t } = useTranslation();
+
+    const { events, pullEvents, dismissEvent } = useEvents();
+
+    const modal = React.useMemo(() => {
+        return events?.modal?.type === 'Ready' ?
+            events.modal.content
+            :
+            null;
+    }, [events]);
+
+    const onClose = React.useCallback(() => {
+        modal?.id && dismissEvent(modal.id);
+    }, [modal]);
+
+    React.useEffect(() => {
+        pullEvents();
+    }, []);
+
+    return (
+        modal !== null ?
+            <ModalDialog className={styles['event-modal']} onCloseRequest={onClose}>
+                {
+                    modal.imageUrl ?
+                        <img className={styles['image']} src={modal.imageUrl} />
+                        :
+                        null
+                }
+                <div className={styles['info-container']}>
+                    <div className={styles['title-container']}>
+                        {
+                            modal.title ?
+                                <div className={styles['title']}>{modal.title}</div>
+                                :
+                                null
+                        }
+                        {
+                            modal.message ?
+                                <div className={styles['label']}>{modal.message}</div>
+                                :
+                                null
+                        }
+                    </div>
+                    {
+                        modal?.addon?.name ?
+                            <div className={styles['addon-container']}>
+                                <Icon className={styles['icon']} name={'addons'} />
+                                <div className={styles['name']}>
+                                    { modal.addon.name }
+                                </div>
+                            </div>
+                            :
+                            null
+                    }
+                    {
+                        modal?.addon?.manifestUrl ?
+                            <Button className={styles['action-button']} href={`#/addons?addon=${encodeURIComponent(modal.addon.manifestUrl)}`} onClick={onClose}>
+                                <div className={styles['button-label']}>
+                                    { t('INSTALL_ADDON') }
+                                </div>
+                            </Button>
+                            :
+                            modal.externalUrl ?
+                                <Button className={styles['action-button']} href={modal.externalUrl} target={'_blank'}>
+                                    <div className={styles['button-label']}>
+                                        { t('LEARN_MORE') }
+                                    </div>
+                                </Button>
+                                :
+                                null
+                    }
+                </div>
+            </ModalDialog>
+            :
+            null
+    );
+};
+
+module.exports = EventModal;

src/common/EventModal/index.js

@@ -0,0 +1,5 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const EventModal = require('./EventModal');
+
+module.exports = EventModal;

src/common/EventModal/styles.less

@@ -0,0 +1,119 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+@import (reference) '~stremio/common/screen-sizes.less';
+
+:import('~stremio/common/ModalDialog/styles.less') {
+    modal-dialog-content: modal-dialog-content;
+    modal-dialog-container: modal-dialog-container;
+}
+
+.event-modal {
+    backdrop-filter: blur(10px);
+
+    .modal-dialog-container {
+        overflow: visible;
+        max-width: 45rem;
+
+        .modal-dialog-content {
+            display: flex;
+            flex-direction: column;
+            align-items: center;
+            overflow: visible;
+    
+            .image {
+                width: 100%;
+                height: 100%;
+                margin-top: -10rem;
+            }
+        
+            .info-container {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+                justify-content: center;
+                gap: 2.5rem;
+                padding: 1rem 4rem;
+                margin-top: -7rem;
+        
+                .title-container {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 1rem;
+
+                    .title {
+                        color: var(--primary-foreground-color);
+                        font-size: 1.325rem;
+                        text-align: center;
+                        padding: 0 6rem;
+                    }
+        
+                    .label {
+                        color: var(--primary-foreground-color);
+                        font-size: 1rem;
+                        text-align: center;
+                        opacity: 0.5;
+                    }
+                }
+        
+                .addon-container {
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    flex-direction: column;
+                    gap: 0.5rem;
+
+                    .icon {
+                        height: 2rem;
+                        width: 2rem;
+                        color: var(--primary-accent-color);
+                    }
+
+                    .name {
+                        color: var(--primary-foreground-color);
+                    }
+                }
+        
+                .action-button {
+                    background-color: var(--primary-foreground-color);
+                    border: 2px solid var(--primary-foreground-color);
+                    padding: 0.8rem 2rem;
+                    border-radius: 2rem;
+        
+                    .button-label {
+                        color: var(--primary-accent-color);
+                        font-size: 1rem;
+                        font-weight: 700;
+                    }
+        
+                    &:hover {
+                        background-color: transparent;
+                    }
+                }
+            }
+        }
+    }
+
+    @media only screen and (max-width: @minimum) {
+        .modal-dialog-container {
+            .modal-dialog-content {
+                .image {
+                    height: 125%;
+                    width: 125%;
+                }
+
+                .info-container {
+                    .title-container {
+                        .title {
+                            padding: 0rem;
+                            font-size: 1rem;
+                        }
+
+                        .label {
+                            font-size: 0.875rem;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}

src/common/EventModal/useEvents.js

@@ -0,0 +1,36 @@
+// Copyright (C) 2017-2023 Smart code 203358507
+
+const useModelState = require('stremio/common/useModelState');
+const { useServices } = require('stremio/services');
+
+const map = (ctx) => ({
+    ...ctx.events,
+});
+
+const useEvents = () => {
+    const { core } = useServices();
+
+    const pullEvents = () => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'GetEvents',
+            },
+        });
+    };
+
+    const dismissEvent = (id) => {
+        core.transport.dispatch({
+            action: 'Ctx',
+            args: {
+                action: 'DismissEvent',
+                args: id,
+            },
+        });
+    };
+
+    const events = useModelState({ model: 'ctx', map });
+    return { events, pullEvents, dismissEvent };
+};
+
+module.exports = useEvents;

src/common/index.js

@@ -45,6 +45,7 @@ const useStreamingServer = require('./useStreamingServer');
 const useTorrent = require('./useTorrent');
 const platform = require('./platform');
 const externalPlayerOptions = require('./externalPlayerOptions');
+const EventModal = require('./EventModal');
 
 module.exports = {
     AddonDetailsModal,
@@ -96,4 +97,5 @@ module.exports = {
     useTorrent,
     platform,
     externalPlayerOptions,
+    EventModal,
 };

src/routes/Board/Board.js

@@ -4,7 +4,7 @@ const React = require('react');
 const classnames = require('classnames');
 const debounce = require('lodash.debounce');
 const { useTranslation } = require('react-i18next');
-const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange } = require('stremio/common');
+const { MainNavBars, MetaRow, ContinueWatchingItem, MetaItem, StreamingServerWarning, useStreamingServer, withCoreSuspender, getVisibleChildrenRange, EventModal } = require('stremio/common');
 const useBoard = require('./useBoard');
 const useContinueWatchingPreview = require('./useContinueWatchingPreview');
 const styles = require('./styles');
@@ -38,6 +38,7 @@ const Board = () => {
     }, [board.catalogs, onVisibleRangeChange]);
     return (
         <div className={styles['board-container']}>
+            <EventModal />
             <MainNavBars className={styles['board-content-container']} route={'board'}>
                 <div ref={scrollContainerRef} className={styles['board-content']} onScroll={onScroll}>
                     {