storyly-placement 1.0.0

package/dist/BaseStory-BBIm7KQ3.js

@@ -0,0 +1,662 @@
+import { S as T, s as _, k as a, H as L, l as y, h as d, Y as u, J as n, Z as f, b as v, _ as l, p as r, $ as h, N as c, m as S, V as w, a0 as x, I as b, d as I, a1 as O, f as p, j as q } from "./index-BYYlLqJU.js";
+import { d as V, C as m, E as P, m as k } from "./story-group-animation-impl-DtfjsPOB.js";
+import { H as W, C as B, r as g, A as R, S as G } from "./index-CS4Sk7dj.js";
+class Q {
+  constructor({
+    story: t,
+    key: s,
+    group: e,
+    storiesContainer: o,
+    groupWrapper: i,
+    progressDoms: A,
+    instanceId: D,
+    condition: C,
+    getActiveStory: E
+  }) {
+    this.storyDom_ = null, this.layersContainer_ = document.createElement("div"), this.story_ = t, this.storyData_ = {}, this.layers_ = [], this.group_ = e, this.key_ = s, this.storiesContainer_ = o, this.groupWrapper_ = i, this.progressDoms_ = new Proxy(A, []), this.storyProgressSecond_ = 7, this.progressPaused_ = !0, this.imageAsset_ = null, this.videoAsset_ = null, this.videoAssetLoadingStarted_ = !1, this.storyProgressRemain_ = this.storyProgressSecond_, this.progressTime_ = 0, this.isBlankStory_ = !1, this.imageAssetLoaded_ = !1, this.instanceId_ = D, this.timedLayers_ = [], this.condition_ = C, this.getActiveStory = E, this.storylyContext = T.getContext(this.instanceId_), _(this.layersContainer_, "layers-container"), a(this.layersContainer_, "dir", V.LTR), this.attachCallbacksToElement_();
+  }
+  /**
+   * Attaches callbacks to the DOM element for them to be used by publishers.
+   * @private
+   */
+  attachCallbacksToElement_() {
+    this.onVideoLoadedData_ = this.onVideoLoadedData_.bind(this), this.onVideoEnded_ = this.onVideoEnded_.bind(this), this.onVideoWaiting_ = this.onVideoWaiting_.bind(this), this.onVideoPlaying_ = this.onVideoPlaying_.bind(this), this.handleSoundStory_ = this.handleSoundStory_.bind(this), this.playAndPauseStory = this.playAndPauseStory.bind(this), this.handleCloseGroup_ = this.handleCloseGroup_.bind(this), this.onImageLoad_ = this.onImageLoad_.bind(this), this.renderShareWidget = this.renderShareWidget.bind(this), this.handleLayersVisibility_ = this.handleLayersVisibility_.bind(this), this.handleTranscript_ = this.handleTranscript_.bind(this), this.handleAccessibilityOnOff_ = this.handleAccessibilityOnOff_.bind(this);
+  }
+  /**
+   * @private
+   */
+  setCustomEvents_() {
+    this.storyDom_.addEventListener("onPlayPause", this.playAndPauseStory);
+  }
+  /**
+   * render story
+   * @param {Function} StoryTemplate
+   */
+  render(t) {
+    const { storyData: s, layers: e, storyBg: o } = L(
+      this.story_.media.layers
+    );
+    this.storyData_ = s, this.layers_ = [...e];
+    const i = t({
+      story: { ...this.storyData_, story_id: this.story_.story_id },
+      type: this.storyData_.type,
+      altText: this.story_.alt_text,
+      mediaHost: this.group_.media_host,
+      storyBg: o
+    });
+    if (this.storyDom_ = y(i), this.storyDom_.appendChild(this.layersContainer_), this.condition_ ? this.key_ === 0 ? this.storiesContainer_.querySelectorAll(".storyly__story")[this.key_].before(this.storyDom_) : this.storiesContainer_.querySelectorAll(".storyly__story")[this.key_ - 1].after(this.storyDom_) : this.storiesContainer_.appendChild(this.storyDom_), this.loadLayers_(), this.storyData_.type === "video")
+      this.videoAsset_ = this.storyDom_.querySelector("video"), this.handleVideoEvents_();
+    else if (!this.isBlankStory_)
+      this.imageAsset_ = this.storyDom_.querySelector("img"), this.imageAsset_.addEventListener("load", this.onImageLoad_, {
+        once: !0
+      });
+    else if (this.isBlankStory_) {
+      const A = this.storyDom_.querySelector(".story-image");
+      d(A, ["opacity", "0"]);
+    }
+    return this.setCustomEvents_(), this.handleStoryEvent_(), Promise.resolve(this.storyDom_);
+  }
+  /**
+   * on image loaded
+   * @private
+   */
+  onImageLoad_() {
+    if (!this.imageAssetLoaded_ && (this.handleProgressBar_(), this.imageAssetLoaded_ = !0, !this.storyData_.position && !this.storyData_.sizing)) {
+      const { clientHeight: t, clientWidth: s } = this.imageAsset_;
+      this.setStoryClassByAsset_({ height: t, width: s });
+    }
+  }
+  /**
+   * set story class by video/image for 9:16
+   * @private
+   */
+  setStoryClassByAsset_({ width: t, height: s }) {
+    +(s * 56.25 / t).toFixed(2) < 100 && _(this.storyDom_, "story-9_16");
+  }
+  /**
+   * handle video events listener
+   * @private
+   */
+  handleVideoEvents_() {
+    this.videoAsset_.addEventListener(
+      "loadedmetadata",
+      this.onVideoLoadedData_
+    ), this.videoAsset_.addEventListener("ended", this.onVideoEnded_), this.videoAsset_.addEventListener("waiting", this.onVideoWaiting_), this.videoAsset_.addEventListener("playing", this.onVideoPlaying_);
+  }
+  /**
+   * on video loaded event
+   * @private
+   */
+  async onVideoLoadedData_() {
+    if (this.videoAssetLoaded_ = !0, this.setStoryClassByAsset_({
+      height: this.videoAsset_.videoHeight,
+      width: this.videoAsset_.videoWidth
+    }), this.storyProgressRemain_ = this.videoAsset_.duration, this.storyProgressSecond_ = this.videoAsset_.duration, this.videoAsset_.duration >= 120 && !u(this.storyData_.video_type)) {
+      const t = await (await import("./index-DSDAcOiN.js")).default;
+      this.videoSeekbar_ = new t({
+        storyDom: this.storyDom_,
+        videoDom: this.videoAsset_,
+        layers: this.timedLayers_,
+        playPauseStory: this.playAndPauseStory.bind(this),
+        setProgressTime: this.setProgressTime.bind(this),
+        instanceId: this.instanceId_
+      }), this.videoAsset_.addEventListener(
+        "seeking",
+        this.handleLayersVisibility_
+      );
+    }
+    this.videoAsset_.addEventListener(
+      "timeupdate",
+      this.handleLayersVisibility_
+    );
+  }
+  /**
+   * on video ended event
+   * @private
+   */
+  onVideoEnded_() {
+    this.storylyContext.getState().accessibility || n(this.storyDom_, m.nextStory);
+  }
+  /**
+   * on video waiting event
+   * @private
+   */
+  onVideoWaiting_() {
+    this.progressPaused_ = !0;
+  }
+  /**
+   * on video playing event
+   * @private
+   */
+  onVideoPlaying_() {
+    if (!this.videoAssetLoaded_)
+      return;
+    const s = this.groupWrapper_.querySelector(
+      ".storyly__story-actions"
+    ).querySelector('button[data-type="sound"]');
+    f(this.videoAsset_) || (this.soundOn_ = !1, s.classList.replace("sound-on", "sound-off")), this.soundOn_ ? this.soundOn() : this.soundOff(), this.progressPaused_ = !1, this.handleProgressBar_();
+  }
+  /**
+   * handles video load and play events when story active
+   * @private
+   */
+  async onVideoShown_() {
+    const t = this.videoAsset_.querySelector("source"), s = this.videoAsset_.querySelector("source").dataset.src;
+    u(this.storyData_.video_type) ? this.hls_ = await W({
+      source: s,
+      tag: this.videoAsset_,
+      thumbnail: this.storyData_.thumbnail_url
+    }) : (t.src = s, this.videoAsset_.load()), this.videoAsset_.oncanplay = () => {
+      this.videoPausedPromise_ ? this.videoPausedPromise_.then(() => {
+        this.videoPlayedPromise_ = this.videoAsset_.play();
+      }) : this.videoPlayedPromise_ = this.videoAsset_.play();
+    };
+  }
+  /**
+   * remove events
+   * @private
+   */
+  removeEvents_() {
+    const t = this.groupWrapper_.querySelector(
+      ".storyly__story-actions"
+    ), s = t.querySelector('button[data-type="sound"]'), e = t.querySelector('button[data-type="share"]'), o = t.querySelector('button[data-type="close"]'), i = t.querySelector(
+      'button[data-type="transcript"]'
+    );
+    this.playPauseAction_ && !v() && l(this.playPauseAction_, this.playAndPauseStory), o && !o.hasAttribute("hidden") && l(o, this.handleCloseGroup_), l(s, this.handleSoundStory_), l(e, this.renderShareWidget), l(i, this.handleTranscript_);
+  }
+  /**
+   * load layers of story
+   * @private
+   */
+  async loadLayers_() {
+    this.layers_.forEach(async (t, s) => {
+      const e = t, o = {
+        layer: { ...t, z_index: s },
+        group: this.group_,
+        story: this.story_,
+        storyDom: this.layersContainer_,
+        instanceId: this.instanceId_
+      };
+      if (t.is_bg && (t.bg_color || t.gradient_colors)) {
+        this.isBlankStory_ = !0;
+        const i = (await import("./index-Dg1MB9Rw.js")).default;
+        e.instance = new i({ ...o });
+      }
+      if (t.type === r.EMOJI) {
+        const i = (await import("./index-CJNQLd4X.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.POLL) {
+        const i = (await import("./index-89h_T8JG.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.RATING) {
+        const i = (await import("./index-0vaGlAUL.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.QUIZ) {
+        const i = (await import("./index-CTlHkeix.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.COUNTDOWN) {
+        const i = (await import("./index-De2W1vFd.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.IMAGE_CTA) {
+        const i = (await import("./index-BYzPEcYu.js")).default;
+        e.instance = new i({
+          ...o,
+          type: r.IMAGE_CTA
+        });
+      } else if (t.type === r.BUTTON || t.type === r.SWIPE)
+        this.ctaLayer_ = new B({
+          ...o,
+          type: t.type === r.BUTTON ? r.BUTTON : r.SWIPE
+        }), e.instance = this.ctaLayer_;
+      else if ((t.image_path || t.video_path || t.image_url) && t.studio_component_type) {
+        const i = (await import("./index-BP7hmUrm.js")).default;
+        e.instance = new i({
+          ...o,
+          mediaHost: this.group_.media_host
+        });
+      } else if (t.type === r.TEXT) {
+        const i = (await import("./index-BtQfo9gV.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.PRODUCT_TAG) {
+        const i = (await import("./index-B2khaTGj.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.PROMO_CODE) {
+        const i = (await import("./index-C9j2XbJF.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.QUESTION) {
+        const i = (await import("./index-BV8oGJSO.js")).default;
+        e.instance = new i({
+          ...o,
+          storiesContainer: this.storiesContainer_
+        });
+      } else if (t.type === r.PRODUCT_CARD) {
+        const i = (await import("./index-DyNf3LKt.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.PRODUCT_CATALOG) {
+        const i = (await import("./index-DHIwqpCn.js")).default;
+        e.instance = new i({ ...o });
+      } else if (t.type === r.IMAGE_QUIZ) {
+        const i = (await import("./index-B28omzDH.js")).default;
+        e.instance = new i({ ...o });
+      }
+      (e.start_time || e.end_time) && (e.instance.hideLayer(), this.timedLayers_.push(e));
+    });
+  }
+  /**
+   * start story progress
+   * @private
+   * @returns {void}
+   */
+  handleProgressBar_() {
+    if (this.progressInterval_)
+      return;
+    this.progressCount_ = 0;
+    const t = this.progressDoms_[this.key_].querySelector("span");
+    if (u(this.storyData_.video_type)) {
+      this.progressCount_ = 100, d(t, ["width", `${this.progressCount_}%`]);
+      return;
+    }
+    this.progressInterval_ = setInterval(() => {
+      this.progressPaused_ || (this.progressTime_ += 0.1, this.storyProgressRemain_ -= 0.1, this.videoAsset_ ? this.play() : (this.handleLayersVisibility_(), this.handleProgress_()), this.progressCount_ = this.progressTime_ * 100 / this.storyProgressSecond_, this.progressCount_ <= 100 && d(t, ["width", `${this.progressCount_}%`]));
+    }, 100);
+  }
+  /**
+   * handle layer visibility by progress time
+   * @returns
+   */
+  handleLayersVisibility_() {
+    if (this.progressPaused_ && !this.videoAsset_)
+      return;
+    const t = (this.videoAsset_ ? this.videoAsset_.currentTime : this.progressTime_) * 1e3;
+    this.timedLayers_.forEach((s) => {
+      const e = s.start_time ? s.start_time * 1e3 - 300 : 0, o = s.end_time ? s.end_time * 1e3 : this.videoAsset_ ? this.videoAsset_.duration * 1e3 : this.storyProgressSecond_ * 1e3;
+      t >= e && t <= o ? s.instance.showLayer() : s.instance.hideLayer();
+    });
+  }
+  /**
+   * handle story progress and dispatch event
+   * @private
+   */
+  handleProgress_() {
+    this.storyProgressRemain_ <= 0 && !this.storylyContext.getState().accessibility && (n(this.storyDom_, m.nextStory), clearInterval(this.progressInterval_));
+  }
+  /**
+   * handle story actions(play, sound)
+   * @private
+   */
+  handleStoryActions_() {
+    const t = this.groupWrapper_.querySelector(
+      ".storyly__story-actions"
+    ), s = t.querySelector('button[data-type="sound"]'), e = t.querySelector('button[data-type="share"]'), o = t.querySelector('button[data-type="close"]'), i = t.querySelector(
+      'button[data-type="transcript"]'
+    );
+    this.playPauseAction_ = t.querySelector(
+      'button[data-type="play-pause"]'
+    ), o && (h(o, "hidden"), c(o, this.handleCloseGroup_)), v() ? (a(this.playPauseAction_, "hidden", !0), this.accessibilityAction_ = this.storiesContainer_.querySelector(
+      ".accessibility-switch-button"
+    ), this.accessibilityAction_ && (this.accessibilityAction_.addEventListener(
+      "pointerdown",
+      this.handleAccessibilityOnOff_
+    ), this.storylyContext.getState().accessibility ? (this.accessibilityAction_.setAttribute("data-pressed", "true"), n(this.storyDom_, "onAccessibilityTriggered", {
+      accessibilityEnabled: !0
+    })) : (this.accessibilityAction_.setAttribute("data-pressed", "false"), n(this.storyDom_, "onAccessibilityTriggered", {
+      accessibilityEnabled: !1
+    })))) : (h(this.playPauseAction_, "hidden"), this.playPauseAction_.classList.replace("play", "pause"), c(this.playPauseAction_, this.playAndPauseStory)), this.videoAsset_ ? (h(s, "hidden"), c(s, this.handleSoundStory_), this.story_.alt_text && (h(i, "hidden"), c(i, this.handleTranscript_))) : (a(s, "hidden", !0), a(i, "hidden", !0)), !this.storylyContext.getState().videoMuted && this.videoAsset_ ? (this.videoAsset_.muted = !1, this.soundOn_ = !0, s.classList.replace("sound-off", "sound-on")) : this.videoAsset_ && (this.videoAsset_.muted = !0, this.soundOn_ = !1, s.classList.replace("sound-on", "sound-off")), this.story_.is_sharable && (h(e, "hidden"), c(e, this.renderShareWidget));
+  }
+  /**
+   * @param {PointerEvent} e
+   * @private
+   */
+  handleAccessibilityOnOff_(t) {
+    const { target: s } = t, e = s.getAttribute("data-pressed") === "true";
+    t.target.setAttribute("data-pressed", String(!e)), this.storylyContext.getState().accessibility ? (this.storyDom_.hasAttribute("paused") ? this.play() : this.handleProgressBar_(), g(this.storyDom_, "Accessibility is off"), s.setAttribute(
+      "aria-label",
+      this.storylyContext.getState().languageJSON.a11y_dtap_enable_accessibility
+    ), S.setItemToGlobal("accessibility", !1), this.storylyContext.setState({
+      accessibility: !1
+    }), n(this.storyDom_, "onAccessibilityTriggered", {
+      accessibilityEnabled: !1
+    })) : (this.storylyContext.setState({
+      accessibility: !0
+    }), g(this.storyDom_, "Accessibility is on"), this.pause(), s.setAttribute(
+      "aria-label",
+      this.storylyContext.getState().languageJSON.a11y_disable_accessibility
+    ), S.setItemToGlobal("accessibility", !0), n(this.storyDom_, "onAccessibilityTriggered", {
+      accessibilityEnabled: !0
+    }));
+  }
+  /**
+   * handle video transcript if exists
+   */
+  handleTranscript_() {
+    const t = y(
+      `<div style="white-space: pre-wrap; font-size: 14px; padding: 16px;">${this.story_.alt_text}</div>`
+    ), s = y(
+      '<span style="display: none;"></span>'
+    ), e = y(
+      '<span style="display: none;"></span>'
+    );
+    n(
+      this.storyDom_,
+      w(this.instanceId_),
+      {
+        header: s,
+        body: t,
+        rerender: !1,
+        footer: e
+      }
+    );
+  }
+  /**
+   * render share widget
+   * handle clicked close icon
+   * @private
+   */
+  handleCloseGroup_() {
+    n(this.storyDom_, "onCloseGroup");
+  }
+  /**
+   * handle sound of active story
+   * @param {Event} e
+   * @private
+   */
+  handleSoundStory_(t) {
+    if (!f(this.videoAsset_)) {
+      const i = y(R);
+      this.storyDom_.append(i), setTimeout(() => {
+        this.storyDom_.removeChild(i);
+      }, 1e3);
+      return;
+    }
+    const { target: s } = t;
+    let e = "sound-on", o = "sound-off";
+    s.classList.contains("sound-off") ? (g(this.storyDom_, "Story Unmuted"), s.setAttribute("aria-pressed", "false"), this.soundOn_ = !0, this.soundOn(), this.storylyContext.setState({
+      videoMuted: !1
+    })) : (g(this.storyDom_, "Story Muted"), s.setAttribute("aria-pressed", "true"), this.soundOn_ = !1, this.soundOff(), e = "sound-off", o = "sound-on", this.storylyContext.setState({
+      videoMuted: !0
+    })), s.classList.replace(o, e);
+  }
+  /**
+   * making ctas visible for assistive technologies
+   * @private
+   */
+  exposeAccessibilityElements_() {
+    this.storyDom_.querySelectorAll(".cta-button").forEach((t) => {
+      a(t, "tabindex", "21"), a(t, "aria-hidden", "false");
+    }), this.storyDom_.querySelectorAll(".swipe-up-button").forEach((t) => {
+      a(t, "tabindex", "21"), a(t, "aria-hidden", "false");
+    }), this.storyDom_.querySelectorAll(".product-tag-tooltip").forEach((t) => {
+      a(t, "tabindex", "21"), a(t, "aria-hidden", "false");
+    }), this.storyDom_.querySelectorAll(".poll-component").forEach((t) => {
+      t.querySelectorAll("button").forEach((s) => a(s, "tabindex", "22")), a(t, "tabindex", "22"), a(t, "aria-hidden", "false");
+    });
+  }
+  /**
+   * hiding ctas for assistive technologies
+   * @private
+   */
+  hideAccessibilityElements_() {
+    this.storyDom_.querySelectorAll(".cta-button").forEach((t) => {
+      h(t, "tabindex"), a(t, "aria-hidden", "true");
+    }), this.storyDom_.querySelectorAll(".swipe-up-button").forEach((t) => {
+      h(t, "tabindex"), a(t, "aria-hidden", "true");
+    }), this.storyDom_.querySelectorAll(".product-tag-tooltip").forEach((t) => {
+      h(t, "tabindex"), a(t, "aria-hidden", "true");
+    }), this.storyDom_.querySelectorAll(".poll-component").forEach((t) => {
+      t.querySelectorAll("button").forEach((s) => h(s, "tabindex")), h(t, "tabindex"), a(t, "aria-hidden", "true");
+    });
+  }
+  /**
+   * render share widget
+   * @public
+   */
+  async renderShareWidget() {
+    this.shareWidget_ = await G({
+      dom: this.storyDom_,
+      group: this.group_,
+      story: this.story_,
+      playAndPauseStory: this.playAndPauseStory.bind(this)
+    });
+  }
+  /**
+   * handle video sound on
+   * @public
+   */
+  soundOn() {
+    this.videoAsset_.muted = !1;
+  }
+  /**
+   * handle video sound off
+   * @public
+   */
+  soundOff() {
+    this.videoAsset_.muted = !0;
+  }
+  /**
+   * pause image/video story
+   * @param { Boolean } tabChange
+   * @public
+   */
+  pause(t = !1) {
+    t && this.hideShareWidget(), this.progressPaused_ = !0, this.storyDom_.setAttribute("paused", ""), this.videoAsset_ && (this.videoPlayedPromise_ ? this.videoPlayedPromise_.then(() => {
+      this.videoPausedPromise_ = this.videoAsset_.pause();
+    }) : this.videoPausedPromise_ = this.videoAsset_.pause());
+  }
+  /**
+   * play image/video story
+   * @param { Boolean } tabChange
+   * @public
+   */
+  play(t = !1) {
+    t && this.playPauseAction_.classList.contains("play") && this.playPauseAction_.classList.replace("play", "pause"), this.progressPaused_ = !1, this.storyDom_.removeAttribute("paused"), this.videoAsset_ && !x(this.videoAsset_) && (this.videoPausedPromise_ ? this.videoPausedPromise_.then(() => {
+      this.videoPlayedPromise_ = this.videoAsset_.play();
+    }) : this.videoPlayedPromise_ = this.videoAsset_.play());
+  }
+  /**
+   *
+   * sets video source if intersecting
+   * @public
+   */
+  setVideoStoryAsset() {
+    if (this.storyData_.type !== "video" && !this.story_.media.thumbnail_url || u(this.storyData_.video_type))
+      return;
+    const t = b({
+      host: this.group_.media_host,
+      path: this.story_.media.thumbnail_url,
+      story: this.storyData_
+    });
+    a(this.storyDom_.querySelector("video"), "poster", t);
+  }
+  /**
+   * handle pause or play of active story
+   * @param {Event | undefined} event
+   * @public
+   */
+  playAndPauseStory() {
+    if (this.storylyContext.getState().accessibility) return;
+    let t = "play", s = "pause";
+    this.playPauseAction_.classList.contains("pause") ? (this.pause(), this.playPauseAction_.setAttribute("aria-pressed", "true"), n(this.storyDom_, "onPlayPauseEvent", {
+      eventType: P.Paused
+    })) : (this.play(), this.playPauseAction_.setAttribute("aria-pressed", "false"), n(this.storyDom_, "onPlayPauseEvent", {
+      eventType: P.Resumed
+    }), t = "pause", s = "play"), this.playPauseAction_.classList.replace(s, t);
+  }
+  /**
+   * send story viewed event
+   */
+  sendStoryViewedEvent_() {
+    const t = { ...this.getStoryData() };
+    n(this.storyDom_, "onCustomerEvent", {
+      eventName: m.storyViewed,
+      params: t
+    });
+  }
+  /**
+   * modifies story title with every story change
+   * @private
+   */
+  handleStoryTitleOnChange_() {
+    const { title: t } = this.story_;
+    if (t) {
+      const s = this.groupWrapper_.querySelector(".storyly__sg-info h4");
+      s.textContent = t;
+    }
+  }
+  /**
+   * handle story event
+   * @private
+   */
+  handleStoryEvent_() {
+    this.storyDom_.addEventListener("onStoryEvent", (t) => {
+      const s = {
+        storyComponent: t.detail,
+        storyGroup: {
+          ...this.group_,
+          iconUrl: this.group_.icon_image_url ?? this.group_.icon_video_url,
+          icon_image_url: void 0
+        },
+        story: {
+          ...this.story_,
+          componentList: this.story_.media.layers,
+          currentTime: this.getWatchLength(),
+          media: void 0
+        }
+      };
+      n(this.storyDom_, "onCustomerEvent", {
+        eventName: k,
+        params: s
+      });
+    });
+  }
+  /**
+   * handle show story
+   * @public
+   */
+  show() {
+    if (this.group_.type === I.REDIRECT) {
+      this.ctaLayer_.handleUrlForRedirectGroup();
+      return;
+    }
+    this.storyDom_.setAttribute("show", ""), n(this.storyDom_, "storyChange", {
+      asset: this.isBlankStory_ ? "" : this.imageAsset_ ?? this.videoAsset_
+    }), O(
+      this.group_.group_id,
+      this.story_.story_id,
+      this.storylyContext.getState().shareParams
+    ), this.handleStoryActions_(), this.handleStoryTitleOnChange_(), this.progressPaused_ = !1, this.storyProgressRemain_ = this.storyProgressSecond_, this.progressTime_ = 0, p(this.progressDoms_[this.key_], "seen"), this.videoAsset_ ? this.onVideoShown_() : this.isBlankStory_ || this.imageAssetLoaded_ ? this.handleProgressBar_() : this.imageAsset_.style.paddingBottom = "0.5px", this.storylyContext.getState().accessibility && d(this.playPauseAction_, ["display", "none"]), this.exposeAccessibilityElements_(), _(this.progressDoms_[this.key_], "active"), _(this.storyDom_, "active"), setTimeout(() => {
+      this.storyDom_.focus();
+    }, 500), this.sendStoryViewedEvent_(), n(this.storyDom_, "onShortcut", {
+      is_sharable: this.story_.is_sharable
+    });
+  }
+  /**
+   * handle hide story
+   * @param {Boolean} isBack
+   * @param {Boolean} holdActive
+   * @public
+   */
+  hide({ isBack: t = !1, holdActive: s = !1 } = {}) {
+    var e;
+    if (this.storyDom_.removeAttribute("show"), this.storyDom_.hasAttribute("paused") && this.storyDom_.removeAttribute("paused"), this.hideAccessibilityElements_(), clearInterval(this.progressInterval_), clearInterval(this.startInterval_), this.progressInterval_ = null, this.startInterval_ = null, this.videoAsset_) {
+      if (this.videoAsset_.currentTime = 0, this.videoPlayedPromise_ ? this.videoPlayedPromise_.then(() => {
+        this.videoPausedPromise_ = this.videoAsset_.pause();
+      }) : this.videoPausedPromise_ = this.videoAsset_.pause(), this.hls_) {
+        this.hls_.stopLoad();
+        return;
+      }
+      this.videoAsset_.querySelector("source").src = "", this.videoAsset_.load();
+    }
+    this.removeEvents_(), this.progressPaused_ = !0, p(this.progressDoms_[this.key_], "active"), s || p(this.storyDom_, "active"), q(this.progressDoms_[this.key_].querySelector("span"), ["width"]), t ? p(this.progressDoms_[this.key_], "seen") : _(this.progressDoms_[this.key_], "seen"), (e = this.shareWidget_) == null || e.hide(), this.timedLayers_.forEach((o) => o.instance.hideLayer());
+  }
+  /**
+   * get story watch length
+   * @public
+   * @returns {number}
+   */
+  getWatchLength() {
+    const t = this.storyProgressRemain_ < 0 ? 0 : Math.round(this.storyProgressRemain_);
+    return (Math.round(this.storyProgressSecond_) - t) * 1e3;
+  }
+  /**
+   * get story watch length
+   * @public
+   * @returns {Boolean}
+   */
+  getProgressPausedStatus() {
+    return this.progressPaused_;
+  }
+  /**
+   * get story data
+   * @returns {Object}
+   */
+  getStoryData() {
+    const t = b({
+      host: this.group_.media_host,
+      story: this.storyData_
+    });
+    return {
+      story_id: this.story_.story_id,
+      media: t,
+      group: this.group_,
+      index: this.key_,
+      title: this.story_.title,
+      name: this.story_.name
+    };
+  }
+  /**
+   * send story clicked event
+   * @param {String} type
+   */
+  sendStoryClickedEvent(t) {
+    const s = {
+      ...this.getStoryData()
+    };
+    n(this.storyDom_, "onCustomerEvent", {
+      eventName: t === "next" ? "CustomerEventTypes.nextStory" : m.previousStory,
+      params: s
+    });
+  }
+  /**
+   * set story key
+   * @param {Number} key
+   */
+  setKey(t) {
+    this.key_ = t;
+  }
+  /**
+   * set progress time for timed interactives
+   * @param {Number} time
+   */
+  setProgressTime(t) {
+    this.progressTime_ = +t.toFixed(1);
+  }
+  /**
+   * pause image story by touch
+   * @public
+   */
+  pauseByTouch() {
+    this.pause(), d(this.storiesContainer_.querySelector(".storyly__story-header"), [
+      "opacity",
+      0
+    ]);
+  }
+  /**
+   * play image story by touch
+   * @public
+   */
+  playAfterTouch() {
+    d(this.storiesContainer_.querySelector(".storyly__story-header"), [
+      "opacity",
+      1
+    ]), this.play();
+  }
+  /**
+   * hide share widget
+   */
+  hideShareWidget() {
+    this.shareWidget_ && this.shareWidget_.hide();
+  }
+}
+export {
+  Q as B
+};