diff --git a/src/common/EventModal/EventModal.js b/src/common/EventModal/EventModal.js new file mode 100644 index 000000000..dcd9ca626 --- /dev/null +++ b/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 ? + + { + modal.imageUrl ? + + : + null + } +
+
+ { + modal.title ? +
{modal.title}
+ : + null + } + { + modal.message ? +
{modal.message}
+ : + null + } +
+ { + modal?.addon?.name ? +
+ +
+ { modal.addon.name } +
+
+ : + null + } + { + modal?.addon?.manifestUrl ? + + : + modal.externalUrl ? + + : + null + } +
+
+ : + null + ); +}; + +module.exports = EventModal; diff --git a/src/common/EventModal/index.js b/src/common/EventModal/index.js new file mode 100644 index 000000000..ac88c0210 --- /dev/null +++ b/src/common/EventModal/index.js @@ -0,0 +1,5 @@ +// Copyright (C) 2017-2023 Smart code 203358507 + +const EventModal = require('./EventModal'); + +module.exports = EventModal; diff --git a/src/common/EventModal/styles.less b/src/common/EventModal/styles.less new file mode 100644 index 000000000..0fa9919b8 --- /dev/null +++ b/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; + } + } + } + } + } + } +} \ No newline at end of file diff --git a/src/common/EventModal/useEvents.js b/src/common/EventModal/useEvents.js new file mode 100644 index 000000000..f5efaa79e --- /dev/null +++ b/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; diff --git a/src/common/index.js b/src/common/index.js index 8d399d9a0..a26418eca 100644 --- a/src/common/index.js +++ b/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, }; diff --git a/src/routes/Board/Board.js b/src/routes/Board/Board.js index 6e92beea5..4c0702eda 100644 --- a/src/routes/Board/Board.js +++ b/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 (
+
{