@inappstory/react-sdk 1.9.1 → 1.9.3

package/dist/index.esm.mjs

@@ -850,7 +850,7 @@ ___CSS_LOADER_EXPORT___.locals = {
 
 var ___CSS_LOADER_EXPORT___ = _node_modules_css_loader_dist_runtime_api_js__WEBPACK_IMPORTED_MODULE_1___default()((_node_modules_css_loader_dist_runtime_cssWithMappingToString_js__WEBPACK_IMPORTED_MODULE_0___default()));
 // Module
-___CSS_LOADER_EXPORT___.push([module.id, ".story--ieMN1{height:100%;width:100%;overflow:hidden;position:relative;border-radius:var(--slide-border-radius, 0)}.story--ieMN1.story_mobile--ugLFZ{border-radius:0}.story--ieMN1.story_mobile--ugLFZ .story-slides--Ekd4b{border-radius:var(--slide-border-radius, 0)}.story--ieMN1 .story-slides--Ekd4b{position:absolute;overflow:hidden;top:0;left:0;bottom:0;right:0}", "",{"version":3,"sources":["webpack://./src/StoryReader/Story/story.module.scss"],"names":[],"mappings":"AAAA,cACI,WAAA,CACA,UAAA,CACA,eAAA,CACA,iBAAA,CACA,2CAAA,CAEA,kCACI,eAAA,CAEA,uDACI,2CAAA,CAIR,mCACI,iBAAA,CACA,eAAA,CACA,KAAA,CACA,MAAA,CACA,QAAA,CACA,OAAA","sourcesContent":[".story {\n    height: 100%;\n    width: 100%;\n    overflow: hidden;\n    position: relative;\n    border-radius: var(--slide-border-radius, 0);\n\n    &.story_mobile {\n        border-radius: 0;\n\n        .story-slides {\n            border-radius: var(--slide-border-radius, 0);\n        }\n    }\n\n    .story-slides {\n        position: absolute;\n        overflow: hidden;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n    }\n}"],"sourceRoot":""}]);
+___CSS_LOADER_EXPORT___.push([module.id, ".story--ieMN1{height:100%;width:100%;position:relative;backface-visibility:hidden;transform:translateZ(0);overflow:hidden;border-radius:var(--slide-border-radius, 0)}@supports(clip-path: inset(0 round 0)){.story--ieMN1{overflow:visible;border-radius:0;clip-path:inset(0 round var(--slide-border-radius, 0px))}}.story--ieMN1.story_mobile--ugLFZ{border-radius:0}.story--ieMN1.story_mobile--ugLFZ .story-slides--Ekd4b{border-radius:var(--slide-border-radius, 0)}.story--ieMN1 .story-slides--Ekd4b{position:absolute;overflow:hidden;top:0;left:0;bottom:0;right:0}", "",{"version":3,"sources":["webpack://./src/StoryReader/Story/story.module.scss"],"names":[],"mappings":"AAAA,cACI,WAAA,CACA,UAAA,CACA,iBAAA,CACA,0BAAA,CACA,uBAAA,CACA,eAAA,CACA,2CAAA,CAEA,uCATJ,cAUQ,gBAAA,CACA,eAAA,CACA,wDAAA,CAAA,CAGJ,kCACI,eAAA,CAEA,uDACI,2CAAA,CAIR,mCACI,iBAAA,CACA,eAAA,CACA,KAAA,CACA,MAAA,CACA,QAAA,CACA,OAAA","sourcesContent":[".story {\n    height: 100%;\n    width: 100%;\n    position: relative;\n    backface-visibility: hidden;\n    transform: translateZ(0);\n    overflow: hidden;\n    border-radius: var(--slide-border-radius, 0);\n\n    @supports (clip-path: inset(0 round 0)) {\n        overflow: visible;\n        border-radius: 0;\n        clip-path: inset(0 round var(--slide-border-radius, 0px));\n    }\n\n    &.story_mobile {\n        border-radius: 0;\n\n        .story-slides {\n            border-radius: var(--slide-border-radius, 0);\n        }\n    }\n\n    .story-slides {\n        position: absolute;\n        overflow: hidden;\n        top: 0;\n        left: 0;\n        bottom: 0;\n        right: 0;\n    }\n}"],"sourceRoot":""}]);
 // Exports
 ___CSS_LOADER_EXPORT___.locals = {
 	"story": "story--ieMN1",
@@ -8649,11 +8649,13 @@ let StoryPauseManager = (() => {
             }
             pauseSystem(source) {
                 this._systemPause.pause(source);
+                this.ctx.notifyPauseStateChange();
             }
             resumeSystem(source) {
                 if (!this._systemPause.isPaused)
                     return;
                 this._systemPause.resume(source);
+                this.ctx.notifyPauseStateChange();
             }
             resumeAll() {
                 if (this.isPaused) {
@@ -10155,9 +10157,9 @@ let StoryViewModel = (() => {
                     this.isStarted = false;
                     this.slideApiHandlers.clearNarrativeSessionDataCache();
                     this.resumeAll();
-                    await this.activeSlide.stop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ });
                     document.removeEventListener("visibilitychange", this.handleVisibilityChange);
                     document.removeEventListener("keydown", this.handleKeydown);
+                    await this.activeSlide.stop({ prepareForRestart: 1 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.PREPARE */ });
                 });
             }
             canGoNext() {
@@ -10273,8 +10275,8 @@ let StoryViewModel = (() => {
                     this.resumeAll();
                     if (!((_b = this.storyManager.config.cache) === null || _b === void 0 ? void 0 : _b.prefetch))
                         await this.preloadActiveSlide(ACTIVE_SLIDE_PRELOAD_PRIORITY);
-                    await activeSlide.init();
                     await (lastSlide === null || lastSlide === void 0 ? void 0 : lastSlide.stop({ prepareForRestart: 2 /* ON_SLIDE_STOP_PREPARE_FOR_RESTART.NOT_PREPARE */ }));
+                    await activeSlide.init();
                     await activeSlide.start();
                     this._activeSlideStartTime = Date.now();
                 }
@@ -10471,7 +10473,7 @@ class GameClientConfig {
             value: void 0
         });
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.9.1";
+        const sdkVersion = "1.9.3";
         const placeholders = this.storyManager.rootStore.placeholderStore.placeholders;
         const session = this.storyManager.rootStore.sessionStore.session;
         this.sessionId = session.id;
@@ -11680,9 +11682,9 @@ let GameReaderViewModel = (() => {
             async createAndOpenSession({ iframe, game, params }) {
                 const gameOrigin = new URL(game.url).origin;
                 const session = this.gameSessionFactory.create(iframe, gameOrigin);
+                this.useGameModules(session, game);
                 const dto = game.toInitDto(params);
                 await session.open(dto);
-                this.useGameModules(session, game);
                 this.storyManager.emit("startGame", { id: game.id });
                 return session;
             }
@@ -21036,7 +21038,7 @@ class UgcEditorStore {
         const session = await this.storyManager.rootStore.sessionStore.open();
         const ugcEditorConfigDto = await this.ugcEditorApi.fetchUgcEditorConfig();
         const storyManagerConfig = this.storyManager.config;
-        const sdkVersion = "1.9.1";
+        const sdkVersion = "1.9.3";
         this._config = {
             sessionId: session.id,
             apiKey: storyManagerConfig.apiKey,
@@ -21507,11 +21509,11 @@ class StoryManager extends TypedEventEmitter {
         return deviceDescriptor.deviceId;
     }
     get sdkVersionName() {
-        const sdkVersionName = "1.9.1";
+        const sdkVersionName = "1.9.3";
         return sdkVersionName || "0.0.0";
     }
     get sdkVersionCode() {
-        const sdkVersionCode = 10901;
+        const sdkVersionCode = 10903;
         return sdkVersionCode ? parseInt(sdkVersionCode) : 0;
     }
     get lang() {
@@ -21575,7 +21577,7 @@ class StoryManager extends TypedEventEmitter {
         this.rootStore.storyManagerConfigStore.setConfig(configDto);
     }
     setUserAgent(userAgent) {
-        const sdkVersionCode = 10901;
+        const sdkVersionCode = 10903;
         const buildVersion = sdkVersionCode ? parseInt(sdkVersionCode) : 0;
         // According to RFC5987, HTTP header values can legitimately be supplied using the ISO-8859-1 encoding.
         this._userAgent = `${userAgent} ${convertStrToLatin1(navigator.userAgent)}`;
@@ -25611,17 +25613,15 @@ class StorySlidesContainer extends HTMLElement {
         this.styleElement = style;
         this.mountPoint.prepend(style);
     }
-    init(story) {
-        requestAnimationFrame(() => {
-            /** React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called.React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called. */
-            if (!this.mountPoint)
-                throw new Error("[IAS]: Mount point was undefined");
-            this.story = story;
-            this.story.attachRoot(this.mountPoint);
-            this.mountPoint.addEventListener("click", this.handleClick);
-        });
+    attach(story) {
+        /** React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called.React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called. */
+        if (!this.mountPoint)
+            throw new Error("[IAS]: Mount point was undefined");
+        this.story = story;
+        this.story.attachRoot(this.mountPoint);
+        this.mountPoint.addEventListener("click", this.handleClick);
     }
-    destroy() {
+    detach() {
         var _a, _b;
         /** React uses its own virtual DOM and can reuse or move nodes without actually removing them from the DOM. So connectedCallback and disconnectedCallback are not always called. */
         (_a = this.story) === null || _a === void 0 ? void 0 : _a.detachRoot();
@@ -25654,29 +25654,31 @@ var StorySlidesRenderer_rest = (undefined && undefined.__rest) || function (s, e
 
 
 
-const StorySlidesRenderer = (0,external_mobx_react_lite_namespaceObject.observer)((_a) => {
+const StorySlidesRenderer = (0,external_mobx_react_lite_namespaceObject.observer)((0,external_react_namespaceObject.forwardRef)((_a, ref) => {
     var { className, story, preventNavigation, isActiveStory } = _a, props = StorySlidesRenderer_rest(_a, ["className", "story", "preventNavigation", "isActiveStory"]);
     const storySlidesRef = (0,external_react_namespaceObject.useRef)(null);
-    (0,external_react_namespaceObject.useLayoutEffect)(() => {
-        if (!storySlidesRef.current)
-            return;
-        storySlidesRef.current.setStyle(story.context.style);
-    }, [story.context.style]);
-    (0,external_react_namespaceObject.useLayoutEffect)(() => {
-        if (!storySlidesRef.current)
-            return;
-        const storySlides = storySlidesRef.current;
-        storySlides.init(story);
-        return () => {
-            storySlides.destroy();
+    (0,external_react_namespaceObject.useImperativeHandle)(ref, () => {
+        return {
+            setStyle: (style) => {
+                var _a;
+                (_a = storySlidesRef.current) === null || _a === void 0 ? void 0 : _a.setStyle(style);
+            },
+            attach: (story) => {
+                var _a;
+                (_a = storySlidesRef.current) === null || _a === void 0 ? void 0 : _a.attach(story);
+            },
+            detach: () => {
+                var _a;
+                (_a = storySlidesRef.current) === null || _a === void 0 ? void 0 : _a.detach();
+            }
         };
-    }, [story]);
+    }, [ref, storySlidesRef]);
     const bottomOffset = !props.isDesktopGeometry ? `${story.actionPanel.height}px` : "0px";
     // Bug with attributes in React 19. Explicit cast to string required
     return ((0,jsx_runtime_namespaceObject.jsx)("story-slides-container", { ref: storySlidesRef, style: {
             bottom: bottomOffset
         }, class: className, dir: story.dir, "prevent-navigation": preventNavigation.toString(), "is-active-story": isActiveStory.toString() }));
-});
+}));
 
 ;// CONCATENATED MODULE: ./src/StoryReader/Story/Story.tsx
 var Story_rest = (undefined && undefined.__rest) || function (s, e) {
@@ -25708,6 +25710,7 @@ const Story_Story = (0,external_mobx_react_lite_namespaceObject.observer)((_a) =
     var { story, geometry, className } = _a, props = Story_rest(_a, ["story", "geometry", "className"]);
     const { storyReaderOptions, commonOptions, goodsWidgetOptions } = useIASContainer();
     const storyRef = (0,external_react_namespaceObject.useRef)(null);
+    const slideRef = (0,external_react_namespaceObject.useRef)(null);
     const isActiveStory = story === props.activeStory;
     const isDesktopGeometry = geometry instanceof DesktopStoryGeometry;
     const useModernLayout = storyReaderOptions.layout === StoryReaderLayout.Modern;
@@ -25720,6 +25723,20 @@ const Story_Story = (0,external_mobx_react_lite_namespaceObject.observer)((_a) =
         story.actionPanel.setOptions(commonOptions);
         story.actionPanel.setActionPanelHeight(bottomOffset);
     }, [story, commonOptions, storyReaderOptions.actionPanelBottomOffset, isDesktopGeometry]);
+    (0,external_react_namespaceObject.useLayoutEffect)(() => {
+        if (!slideRef.current)
+            return;
+        slideRef.current.setStyle(story.context.style);
+    }, [story.context.style]);
+    (0,external_react_namespaceObject.useLayoutEffect)(() => {
+        if (!slideRef.current)
+            return;
+        const storySlides = slideRef.current;
+        storySlides.attach(story);
+        return () => {
+            storySlides.detach();
+        };
+    }, [story]);
     const handleReloadStory = async () => {
         const storyError = Boolean(story.error);
         try {
@@ -25738,7 +25755,7 @@ const Story_Story = (0,external_mobx_react_lite_namespaceObject.observer)((_a) =
             story.sharePanel.completeNativeSharing({ result: false });
         }, onTouchStart: () => {
             story.sharePanel.completeNativeSharing({ result: false });
-        }, "data-testid": "story", children: [isDesktopGeometry && useModernLayout && story.isSlideRendered && (0,jsx_runtime_namespaceObject.jsx)(StoryBackdrop, { hidden: isActiveStory }), story.canBeShown && story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryHeader, { hidden: shouldHideHeader, story: story, onClose: props.onClose, isDesktopGeometry: isDesktopGeometry })), (0,jsx_runtime_namespaceObject.jsx)(StorySlidesRenderer, { className: Story_story_module["story-slides"], story: story, preventNavigation: useModernLayout && isDesktopGeometry, isActiveStory: isActiveStory, isDesktopGeometry: isDesktopGeometry }), story.actionPanel.needShown && story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryActionPanel, { dir: story.dir, isDesktopGeometry: isDesktopGeometry, hidden: shouldHideActionPanel, actionPanel: story.actionPanel, commonOptions: commonOptions, storyReaderOptions: storyReaderOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(GoodsWidgetViewer, { story: story, goodsWidgetOptions: goodsWidgetOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(TextInputModal, { story: story, storyRef: storyRef, storyGeometry: geometry })), story.sharePanel.isOpened && ((0,jsx_runtime_namespaceObject.jsx)(SharePanel, { dir: story.dir, className: Story_story_module["share-panel-wrapper"], shareText: story.sharePanel.params.text, shareType: story.sharePanel.params.type, shareLink: story.sharePanel.params.link, onShareCompelete: (result) => story.sharePanel.handleShareComplete(story.sharePanel.params.id, result), sharePanelOptions: storyReaderOptions.sharePanel })), (0,jsx_runtime_namespaceObject.jsx)(Loader, { needShowErrorScreen: story.needShowErrorScreen, needShowLoaderScreen: story.needShowLoaderScreen, onReload: handleReloadStory })] }));
+        }, "data-testid": "story", children: [isDesktopGeometry && useModernLayout && story.isSlideRendered && (0,jsx_runtime_namespaceObject.jsx)(StoryBackdrop, { hidden: isActiveStory }), story.canBeShown && story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryHeader, { hidden: shouldHideHeader, story: story, onClose: props.onClose, isDesktopGeometry: isDesktopGeometry })), (0,jsx_runtime_namespaceObject.jsx)(StorySlidesRenderer, { className: Story_story_module["story-slides"], story: story, ref: slideRef, preventNavigation: useModernLayout && isDesktopGeometry, isActiveStory: isActiveStory, isDesktopGeometry: isDesktopGeometry }), story.actionPanel.needShown && story.isSlideRendered && ((0,jsx_runtime_namespaceObject.jsx)(StoryActionPanel, { dir: story.dir, isDesktopGeometry: isDesktopGeometry, hidden: shouldHideActionPanel, actionPanel: story.actionPanel, commonOptions: commonOptions, storyReaderOptions: storyReaderOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(GoodsWidgetViewer, { story: story, goodsWidgetOptions: goodsWidgetOptions })), props.activeStory === story && ((0,jsx_runtime_namespaceObject.jsx)(TextInputModal, { story: story, storyRef: storyRef, storyGeometry: geometry })), story.sharePanel.isOpened && ((0,jsx_runtime_namespaceObject.jsx)(SharePanel, { dir: story.dir, className: Story_story_module["share-panel-wrapper"], shareText: story.sharePanel.params.text, shareType: story.sharePanel.params.type, shareLink: story.sharePanel.params.link, onShareCompelete: (result) => story.sharePanel.handleShareComplete(story.sharePanel.params.id, result), sharePanelOptions: storyReaderOptions.sharePanel })), (0,jsx_runtime_namespaceObject.jsx)(Loader, { needShowErrorScreen: story.needShowErrorScreen, needShowLoaderScreen: story.needShowLoaderScreen, onReload: handleReloadStory })] }));
 });
 
 ;// CONCATENATED MODULE: ./src/StoryReader/Story/index.ts