@realsee/dnalogel/libs/PanoTagPlugin/Components/Common/MediaItem.js

如视 VR 看房插件合集

import { SvelteComponent as q, init as A, safe_not_equal as J, append_styles as R, empty as X, insert as k, noop as B, detach as y, getContext as S, onMount as D, element as g, attr as a, binding_callbacks as G, space as K, set_style as j, toggle_class as v, append as U, listen as I, src_url_equal as P, run_all as Q } from "../../../vendor/svelte/internal/index.js";
import { Image_Play_Icon_With_Text as Y, Image_Play_Icon as Z } from "../../Assets/Icon.js";
function x(o) {
  R(o, "svelte-159ski6", ".media-item.svelte-159ski6.svelte-159ski6{position:relative;height:100%}.media-content.svelte-159ski6.svelte-159ski6{position:relative;pointer-events:auto;width:100%;height:100%;-webkit-user-select:none;-moz-user-select:none;user-select:none;-o-object-fit:inherit;object-fit:inherit}.media-content.showPlayButton.svelte-159ski6.svelte-159ski6{pointer-events:none}.video-icon.svelte-159ski6.svelte-159ski6{width:12.5rem;height:6.25rem;max-width:60%;max-height:60%;position:absolute;left:50%;top:50%;transform:translate(-50%, -50%)}.video-play-button-container.svelte-159ski6.svelte-159ski6{display:none;position:absolute;width:100%;height:100%;top:0;left:0;transform:translate3d(0, 0, 0)}.video-play-button-container.showPlayButton.svelte-159ski6.svelte-159ski6{pointer-events:none;display:block}.video-icon.svelte-159ski6.svelte-159ski6{pointer-events:auto}.video-icon.large.svelte-159ski6.svelte-159ski6{width:12.5rem;height:6.25rem}.video-icon.small.svelte-159ski6.svelte-159ski6{width:1.75rem;height:1.75rem}.video-icon.svelte-159ski6 .video-icon-img.svelte-159ski6{width:100%;height:100%;background-position:center center;background-size:contain;background-repeat:no-repeat}.video-icon.svelte-159ski6 .video-icon-img.canPlay.svelte-159ski6{cursor:pointer}");
}
function L(o) {
  let e;
  function i(l, r) {
    if (
      /*media*/
      l[2].type === "Image"
    )
      return ee;
    if (
      /*media*/
      l[2].type === "Video"
    )
      return $;
  }
  let t = i(o), n = t && t(o);
  return {
    c() {
      e = g("div"), n && n.c(), a(e, "class", "media-item svelte-159ski6"), a(e, "draggable", "false");
    },
    m(l, r) {
      k(l, e, r), n && n.m(e, null);
    },
    p(l, r) {
      t === (t = i(l)) && n ? n.p(l, r) : (n && n.d(1), n = t && t(l), n && (n.c(), n.m(e, null)));
    },
    d(l) {
      l && y(e), n && n.d();
    }
  };
}
function $(o) {
  let e, i, t, n, l, r;
  function c(u, m) {
    return (
      /*disableVideoIfHavePoster*/
      u[7] && /*media*/
      u[2].videoCoverUrl ? ie : te
    );
  }
  let d = c(o), f = d(o);
  return {
    c() {
      f.c(), e = K(), i = g("div"), t = g("div"), n = g("div"), a(n, "class", "video-icon-img svelte-159ski6"), j(n, "background-image", "url(" + /*func*/
      o[20]() + ")"), v(
        n,
        "canPlay",
        /*canPlay*/
        o[5]
      ), a(t, "class", "video-icon svelte-159ski6"), v(
        t,
        "large",
        /*playButtonSizeIfNeed*/
        o[4] === "large"
      ), v(
        t,
        "small",
        /*playButtonSizeIfNeed*/
        o[4] === "small"
      ), a(i, "class", "video-play-button-container svelte-159ski6"), v(
        i,
        "showPlayButton",
        /*showPlayButton*/
        o[10]
      );
    },
    m(u, m) {
      f.m(u, m), k(u, e, m), k(u, i, m), U(i, t), U(t, n), l || (r = I(
        n,
        "click",
        /*click_handler_1*/
        o[21]
      ), l = !0);
    },
    p(u, m) {
      d === (d = c(u)) && f ? f.p(u, m) : (f.d(1), f = d(u), f && (f.c(), f.m(e.parentNode, e))), m & /*playButtonIfNeed*/
      8 && j(n, "background-image", "url(" + /*func*/
      u[20]() + ")"), m & /*canPlay*/
      32 && v(
        n,
        "canPlay",
        /*canPlay*/
        u[5]
      ), m & /*playButtonSizeIfNeed*/
      16 && v(
        t,
        "large",
        /*playButtonSizeIfNeed*/
        u[4] === "large"
      ), m & /*playButtonSizeIfNeed*/
      16 && v(
        t,
        "small",
        /*playButtonSizeIfNeed*/
        u[4] === "small"
      ), m & /*showPlayButton*/
      1024 && v(
        i,
        "showPlayButton",
        /*showPlayButton*/
        u[10]
      );
    },
    d(u) {
      f.d(u), u && y(e), u && y(i), l = !1, r();
    }
  };
}
function ee(o) {
  let e, i, t, n;
  return {
    c() {
      e = g("img"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${/*objectFit*/
      o[6]};`), P(e.src, t = /*media*/
      o[2].url) || a(e, "src", t), a(e, "alt", n = /*media*/
      o[2].name), a(e, "draggable", !1);
    },
    m(l, r) {
      k(l, e, r);
    },
    p(l, r) {
      r & /*objectFit*/
      64 && i !== (i = `object-fit: ${/*objectFit*/
      l[6]};`) && a(e, "style", i), r & /*media*/
      4 && !P(e.src, t = /*media*/
      l[2].url) && a(e, "src", t), r & /*media*/
      4 && n !== (n = /*media*/
      l[2].name) && a(e, "alt", n);
    },
    d(l) {
      l && y(e);
    }
  };
}
function te(o) {
  let e, i, t, n, l, r, c;
  return {
    c() {
      e = g("video"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${/*objectFit*/
      o[6]};`), P(e.src, t = /*media*/
      o[2].videoCoverUrl ? (
        /*media*/
        o[2].url
      ) : (
        /*media*/
        o[2].url + "#t=0.1"
      )) || a(e, "src", t), a(e, "poster", n = /*media*/
      o[2].videoCoverUrl), a(e, "preload", l = /*media*/
      o[2].videoCoverUrl ? "none" : "auto"), a(e, "disablepictureinpicture", ""), e.playsInline = !0, a(e, "paused", ""), e.muted = !0, a(e, "draggable", !1), e.loop = !1, a(e, "crossorigin", ""), e.controls = !1, v(
        e,
        "showPlayButton",
        /*showPlayButton*/
        o[10]
      );
    },
    m(d, f) {
      k(d, e, f), o[19](e), r || (c = [
        I(
          e,
          "play",
          /*play_handler*/
          o[14]
        ),
        I(
          e,
          "pause",
          /*pause_handler*/
          o[15]
        ),
        I(
          e,
          "error",
          /*error_handler*/
          o[16]
        ),
        I(
          e,
          "ended",
          /*ended_handler*/
          o[17]
        ),
        I(
          e,
          "click",
          /*click_handler*/
          o[18]
        )
      ], r = !0);
    },
    p(d, f) {
      f & /*objectFit*/
      64 && i !== (i = `object-fit: ${/*objectFit*/
      d[6]};`) && a(e, "style", i), f & /*media*/
      4 && !P(e.src, t = /*media*/
      d[2].videoCoverUrl ? (
        /*media*/
        d[2].url
      ) : (
        /*media*/
        d[2].url + "#t=0.1"
      )) && a(e, "src", t), f & /*media*/
      4 && n !== (n = /*media*/
      d[2].videoCoverUrl) && a(e, "poster", n), f & /*media*/
      4 && l !== (l = /*media*/
      d[2].videoCoverUrl ? "none" : "auto") && a(e, "preload", l), f & /*showPlayButton*/
      1024 && v(
        e,
        "showPlayButton",
        /*showPlayButton*/
        d[10]
      );
    },
    d(d) {
      d && y(e), o[19](null), r = !1, Q(c);
    }
  };
}
function ie(o) {
  let e, i, t, n;
  return {
    c() {
      e = g("img"), a(e, "class", "media-content svelte-159ski6"), a(e, "style", i = `object-fit: ${/*objectFit*/
      o[6]};`), P(e.src, t = /*media*/
      o[2].videoCoverUrl) || a(e, "src", t), a(e, "alt", n = /*media*/
      o[2].name), a(e, "draggable", !1);
    },
    m(l, r) {
      k(l, e, r);
    },
    p(l, r) {
      r & /*objectFit*/
      64 && i !== (i = `object-fit: ${/*objectFit*/
      l[6]};`) && a(e, "style", i), r & /*media*/
      4 && !P(e.src, t = /*media*/
      l[2].videoCoverUrl) && a(e, "src", t), r & /*media*/
      4 && n !== (n = /*media*/
      l[2].name) && a(e, "alt", n);
    },
    d(l) {
      l && y(e);
    }
  };
}
function le(o) {
  let e, i = (
    /*media*/
    o[2] && L(o)
  );
  return {
    c() {
      i && i.c(), e = X();
    },
    m(t, n) {
      i && i.m(t, n), k(t, e, n);
    },
    p(t, [n]) {
      /*media*/
      t[2] ? i ? i.p(t, n) : (i = L(t), i.c(), i.m(e.parentNode, e)) : i && (i.d(1), i = null);
    },
    i: B,
    o: B,
    d(t) {
      i && i.d(t), t && y(e);
    }
  };
}
function oe(o, e, i) {
  let t, n, { mediaInstance: l = { videoInstance: void 0, paused: !0 } } = e, { tag: r } = e, { media: c } = e, { playButtonIfNeed: d = "withoutText" } = e, { playButtonSizeIfNeed: f = "small" } = e, { canPlay: u = !0 } = e, { objectFit: m = "fill" } = e, { disableVideoIfHavePoster: C = !1 } = e, p = !0, h = !1;
  function N() {
    i(8, h = (c == null ? void 0 : c.type) === "Video" && !!c.videoCoverUrl);
  }
  const w = S("mediaStore"), b = S("hooks"), _ = () => {
    h || t && (i(9, t.muted = !0, t), t.play(), t.pause(), i(9, t.muted = !1, t), i(8, h = !0));
  };
  b.on("loadVideoFirstFrame", _), D(() => {
    w.subscribe(({ currentMediaElement: s }) => {
      s !== t && (t == null || t.pause());
    });
  });
  const V = (s) => {
    i(10, p = !1), i(0, l.paused = !1, l), i(8, h = !0), t && w.set({ currentMediaElement: t }), b.emit("playStateChange", {
      event: s,
      state: "playing",
      tag: r,
      mediaInstance: t
    });
  }, E = (s) => {
    i(10, p = !0), i(0, l.paused = !0, l), b.emit("playStateChange", {
      event: s,
      state: "paused",
      tag: r,
      mediaInstance: t
    });
  }, z = (s) => {
    i(10, p = !0), i(0, l.paused = !0, l), b.emit("playStateChange", {
      event: s,
      state: "paused",
      tag: r,
      mediaInstance: t
    });
  }, F = (s) => {
    i(10, p = !0), i(0, l.paused = !0, l), b.emit("playStateChange", {
      event: s,
      state: "paused",
      tag: r,
      mediaInstance: t
    });
  }, O = (s) => {
    t && t.pause();
  };
  function W(s) {
    G[s ? "unshift" : "push"](() => {
      l.videoInstance = s, i(0, l);
    });
  }
  const H = () => d === "withText" ? Y : d === "withoutText" ? Z : d, T = (s) => {
    u && t && (i(9, t.muted = !1, t), t.play());
  };
  return o.$$set = (s) => {
    "mediaInstance" in s && i(0, l = s.mediaInstance), "tag" in s && i(1, r = s.tag), "media" in s && i(2, c = s.media), "playButtonIfNeed" in s && i(3, d = s.playButtonIfNeed), "playButtonSizeIfNeed" in s && i(4, f = s.playButtonSizeIfNeed), "canPlay" in s && i(5, u = s.canPlay), "objectFit" in s && i(6, m = s.objectFit), "disableVideoIfHavePoster" in s && i(7, C = s.disableVideoIfHavePoster);
  }, o.$$.update = () => {
    if (o.$$.dirty & /*mediaInstance*/
    1 && i(9, t = l.videoInstance), o.$$.dirty & /*media*/
    4 && i(13, n = c == null ? void 0 : c.url), o.$$.dirty & /*mediaUrl*/
    8192 && n && N(), o.$$.dirty & /*videoInstance*/
    512 && t && i(10, p = t.paused), o.$$.dirty & /*media, videoPosterLoaded, videoInstance*/
    772 && (c == null ? void 0 : c.type) === "Video" && !h) {
      const s = navigator.userAgent.toLowerCase().indexOf("micromessenger") !== -1, M = navigator.userAgent.toLowerCase().indexOf("iphone") !== -1 && s;
      t && M && t.paused && (document.removeEventListener("WeixinJSBridgeReady", _), document.removeEventListener("touchstart", _), document.removeEventListener("click", _), document.addEventListener("WeixinJSBridgeReady", _), document.addEventListener("touchstart", _), document.addEventListener("click", _));
    }
  }, [
    l,
    r,
    c,
    d,
    f,
    u,
    m,
    C,
    h,
    t,
    p,
    w,
    b,
    n,
    V,
    E,
    z,
    F,
    O,
    W,
    H,
    T
  ];
}
class re extends q {
  constructor(e) {
    super(), A(
      this,
      e,
      oe,
      le,
      J,
      {
        mediaInstance: 0,
        tag: 1,
        media: 2,
        playButtonIfNeed: 3,
        playButtonSizeIfNeed: 4,
        canPlay: 5,
        objectFit: 6,
        disableVideoIfHavePoster: 7
      },
      x
    );
  }
}
export {
  re as default
};