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 (