@shjjs/visual-ui 3.0.7 → 3.0.9

package/es/components/Scene/components/Vr/index.vue2.mjs

@@ -1,14 +1,14 @@
-import { defineComponent as Y, computed as A, ref as c, watch as z, onMounted as de, nextTick as h, onUnmounted as ve, resolveComponent as M, createElementBlock as l, openBlock as s, createCommentVNode as u, createElementVNode as r, Fragment as D, withDirectives as B, vShow as N, normalizeStyle as x, createVNode as G, withCtx as U, renderList as we, toDisplayString as fe, createStaticVNode as Se } from "vue";
-import Ve from "./resources/zv-vr-select.svg.mjs";
-import C from "./resources/zv-return.svg.mjs";
-import ye from "./resources/zv-add.svg.mjs";
-import ge from "./resources/zv-reduce.svg.mjs";
+import { defineComponent as $, computed as P, ref as p, watch as D, onMounted as we, nextTick as C, onUnmounted as fe, resolveComponent as N, createElementBlock as s, openBlock as c, createCommentVNode as u, createElementVNode as l, Fragment as G, withDirectives as W, vShow as U, normalizeStyle as j, createVNode as Y, withCtx as F, renderList as Se, toDisplayString as Ve, createStaticVNode as ye } from "vue";
+import ge from "./resources/zv-vr-select.svg.mjs";
+import _ from "./resources/zv-return.svg.mjs";
+import he from "./resources/zv-add.svg.mjs";
+import He from "./resources/zv-reduce.svg.mjs";
 import be from "./resources/zv-play.svg.mjs";
-import He from "./resources/zv-pause.svg.mjs";
-import Je from "./resources/zv-refresh.svg.mjs";
-import L from "hls.js";
-import { isArray as ke, debounce as he, cloneDeep as W } from "lodash";
-import { useRoute as Ee } from "vue-router";
+import Je from "./resources/zv-pause.svg.mjs";
+import ke from "./resources/zv-refresh.svg.mjs";
+import M from "hls.js";
+import { cloneDeep as H, isArray as Ee, debounce as Te } from "lodash";
+import { useRoute as Ce } from "vue-router";
 /* empty css                                     */
 /* empty css                                     */
 import "../../../Interaction/components/Tabs/index.mjs";
@@ -164,28 +164,28 @@ import "../UnityIframe/index.mjs";
 import "../UnityWebgl/index.mjs";
 import "./index.mjs";
 import "../Earth/index.mjs";
-import { SHJParseEvent as E } from "../../../../commons/plugins/event/index.mjs";
+import { SHJParseEvent as I } from "../../../../commons/plugins/event/index.mjs";
 import "../../../../commons/plugins/datasource/utils/request.mjs";
 import "mqtt";
 import "nanoid";
-import { upgradeVr as Te } from "./version.mjs";
-const Re = {
+import { upgradeVr as Ie } from "./version.mjs";
+const Oe = {
   key: 0,
   class: "loading-placeholder"
-}, Ce = {
+}, Re = {
   id: "panorama",
   class: "vr-scene"
 }, _e = {
   id: "panorama-video-wrap",
   class: "vr-scene-main"
-}, Ie = {
+}, Ae = {
   key: 2,
   class: "vr-scene-controls"
-}, Oe = { class: "scene-list" }, Ae = ["onClick"], xe = ["src"], Le = { class: "label" }, Pe = ["autoplay", "loop", "volume"], je = ["src"], ze = {
+}, Le = { class: "scene-list" }, xe = ["onClick"], Pe = ["src"], je = { class: "label" }, Me = ["autoplay", "loop", "volume"], ze = ["src"], Be = {
   key: 4,
   class: "mouse-tip"
-}, Me = Y({ name: "ShjVr" }), qi = /* @__PURE__ */ Y({
-  ...Me,
+}, De = $({ name: "ShjVr" }), Xr = /* @__PURE__ */ $({
+  ...De,
   props: {
     option: {},
     sources: {},
@@ -197,16 +197,16 @@ const Re = {
     "on-scene-zooming",
     "on-scene-hotClick"
   ],
-  setup(S, { expose: $, emit: F }) {
-    const Z = Ee(), o = A(() => Te(S.option)), g = F, m = c(), d = c({ src: "", autoplay: !0, loop: !0, volume: 50 }), v = c(null), _ = c(), p = c(!1), f = c(!1);
-    let b = null;
-    const K = c(o.value.default.firstScene), V = c(K.value), i = A(() => {
+  setup(y, { expose: Z, emit: K }) {
+    const q = Ce(), t = P(() => Ie(y.option)), b = K, w = p(), f = p({ src: "", autoplay: !0, loop: !0, volume: 50 }), m = p(null), S = p(null), A = p(), v = p(!1), V = p(!1);
+    let J = null;
+    const Q = p(t.value.default.firstScene), g = p(Q.value), r = P(() => {
       try {
-        return o.value.scenes[V.value];
+        return t.value.scenes[g.value];
       } catch {
         return null;
       }
-    }), P = {
+    }), z = {
       bylineLabel: "来自 %s",
       noPanoramaError: "未指定全景图像。",
       fileAccessError: "The file %s could not be accessed.",
@@ -215,21 +215,25 @@ const Re = {
       genericWebGLError: "您的浏览器没有显示此全景图所需的WebGL支持。",
       textureSizeError: "This panorama is too big for your device! It's %spx wide, but your device only supports images up to %spx wide. Try another device. (If you're the author, try scaling down the image.)",
       unknownError: "未知错误。检查开发人员控制台。"
-    }, q = () => {
+    }, X = () => {
+      const o = H(t.value);
       window.SHJSceneVrViewer = window.pannellum.viewer("panorama", {
-        ...o.value,
-        default: Object.assign(W(o.value.default), {
-          firstScene: V.value
+        ...o,
+        default: Object.assign(H(o.default), {
+          firstScene: g.value
         }),
-        strings: P
+        strings: z
       });
-    }, Q = () => {
-      const t = () => {
-        const a = document.getElementById("panorama-video-wrap");
-        a.innerHTML = `
+    }, ee = () => {
+      var n, a;
+      const o = () => {
+        const d = document.getElementById("panorama-video-wrap");
+        d.innerHTML = `
             <video
                 id="panorama-video"
                 autoplay
+                muted
+                playsinline
                 class="video-js vjs-default-skin vr-scene vjs-big-play-centered"
                 preload="none"
                 style="width:100%;height:100%;"
@@ -238,105 +242,158 @@ const Re = {
             </video>
         `;
       };
-      v.value && (v.value.dispose(), v.value = null, t()), v.value || t();
+      m.value && (m.value.dispose(), m.value = null, o()), m.value || o();
       const e = document.getElementById(
         "panorama-video"
-      ), n = o.value;
-      if (v.value = window.videojs(e, {
+      ), i = H(t.value);
+      if (m.value = window.videojs(e, {
         loop: !0,
         autoplay: !0,
+        muted: !0,
+        controls: !1,
         plugins: {
           pannellum: {
-            ...n,
-            default: Object.assign(W(n.default), {
-              firstScene: V.value
+            ...i,
+            default: Object.assign(H(i.default), {
+              firstScene: g.value
             }),
-            strings: P
+            strings: z
           }
         }
-      }), window.SHJSceneVrViewer = v.value.pnlmViewer, i.value.sceneType === "video" && (e.src = i.value.panorama), i.value.sceneType === "hls")
-        if (L.isSupported()) {
-          const a = new L();
-          a.loadSource(i.value.panorama), a.attachMedia(e), a.on(L.Events.MANIFEST_PARSED, () => {
-            e.play();
+      }), window.SHJSceneVrViewer = m.value.pnlmViewer, r.value.sceneType === "video" && (e.muted = !0, e.src = r.value.panorama, (n = e.play) == null || n.call(e).catch(() => {
+      })), r.value.sceneType === "hls")
+        if (M.isSupported()) {
+          if (S.value)
+            try {
+              S.value.destroy();
+            } catch {
+            }
+          const d = new M();
+          S.value = d, d.loadSource(r.value.panorama), d.attachMedia(e), d.on(M.Events.MANIFEST_PARSED, () => {
+            e.muted = !0, e.play();
           });
-        } else e.canPlayType("application/vnd.apple.mpegurl") && (e.src = i.value.panorama);
-    }, H = Z.path.includes("designer-vr"), y = () => {
-      if (!(!p.value || f.value) && window.pannellum && o.value) {
-        window.SHJSceneVrViewer && (window.SHJSceneVrViewer.destroy(), window.SHJSceneVrViewer = null), i.value.sceneType === "image" ? q() : Q();
-        try {
-          o.value.scenes[window.SHJSceneVrViewer.getScene()] && (d.value = o.value.default.audio, m.value && d.value && (window.SHJSceneVrViewer.audio = m, m.value.src = d.value.src, setTimeout(() => {
-            m.value && (k.value = m.value.paused);
-          }, 500)));
-        } catch {
-        }
-        window.SHJSceneVrViewer.on("load", () => {
-          g("on-scene-loaded", i.value), E.parseEvents(
-            S.useEvents,
-            "on-scene-loaded",
-            i.value
+        } else e.canPlayType("application/vnd.apple.mpegurl") && (e.src = r.value.panorama, e.muted = !0, (a = e.play) == null || a.call(e).catch(() => {
+        }));
+    }, k = q.path.includes("designer-vr"), h = (o = !1) => {
+      if (!(!o && (!v.value || V.value))) {
+        if (o) {
+          if (V.value = !1, window.SHJSceneVrViewer) {
+            try {
+              window.SHJSceneVrViewer.destroy();
+            } catch {
+            }
+            window.SHJSceneVrViewer = null;
+          }
+          if (m.value) {
+            try {
+              m.value.dispose();
+            } catch {
+            }
+            m.value = null;
+          }
+          if (S.value) {
+            try {
+              S.value.destroy();
+            } catch {
+            }
+            S.value = null;
+          }
+          const e = document.getElementById(
+            "panorama-video"
           );
-        }), H || o.value.default.autoRotate === 0 ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate();
-        try {
-          window.SHJSceneVrViewer && async function() {
-            for (const t in o.value.scenes)
-              Object.prototype.hasOwnProperty.call(o.value.scenes, t) && o.value.scenes[t].hotSpots.forEach(async (n) => {
-                await setTimeout(() => {
-                  n.draggable = H, window.SHJSceneVrViewer.removeHotSpot(n.id, t), window.SHJSceneVrViewer.addHotSpot(n, t);
-                }, 100);
-              });
-          }();
-        } catch {
+          if (e && (e.pause(), e.src = "", e.srcObject = null, e.load(), e.hls))
+            try {
+              e.hls.destroy(), e.hls = null;
+            } catch {
+            }
+          const i = document.getElementById("panorama-video-wrap");
+          i && (i.innerHTML = "");
         }
-        window.SHJSceneVrViewer.on("scenechange", (t) => {
-          const e = document.getElementsByTagName("video");
-          if (ke(e) && e.length > 0 && e.forEach((n) => {
-            n && n.pause();
-          }), i.value) {
-            const n = i.value.sceneType;
-            V.value = t;
-            const a = i.value.sceneType;
-            setTimeout(() => {
-              (a !== "image" || n !== "image" && a === "image") && y(), T.value = V.value, g("on-scene-scenechange", i.value), E.parseEvents(
-                S.useEvents,
-                "on-scene-scenechange",
-                i.value
-              );
-            }), H ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate();
-          } else
-            V.value = o.value.default.firstScene, h(() => {
-              y(), g("on-scene-scenechange", i.value), E.parseEvents(
-                S.useEvents,
-                "on-scene-scenechange",
-                i.value
-              );
-            });
-        }), window.SHJSceneVrViewer.on(
-          "zoomchange",
-          he(() => {
-            g("on-scene-zooming", i.value), E.parseEvents(
-              S.useEvents,
-              "on-scene-zooming",
-              i.value
+        if (window.pannellum && t.value) {
+          if (!o && window.SHJSceneVrViewer) {
+            try {
+              window.SHJSceneVrViewer.destroy();
+            } catch {
+            }
+            window.SHJSceneVrViewer = null;
+          }
+          r.value.sceneType === "image" ? X() : ee();
+          try {
+            t.value.scenes[window.SHJSceneVrViewer.getScene()] && (f.value = t.value.default.audio, w.value && f.value && (window.SHJSceneVrViewer.audio = w, w.value.src = f.value.src, setTimeout(() => {
+              w.value && (T.value = w.value.paused);
+            }, 500)));
+          } catch {
+          }
+          window.SHJSceneVrViewer.on("load", () => {
+            b("on-scene-loaded", r.value), I.parseEvents(
+              y.useEvents,
+              "on-scene-loaded",
+              r.value
             );
-          }, 300)
-        ), window.SHJSceneVrViewer.on("hot-click", (t) => {
-          g("on-scene-hotClick", t), E.parseEvents(S.useEvents, "on-scene-hotClick", t);
-        }), f.value = !0;
+          }), k || t.value.default.autoRotate === 0 ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate();
+          try {
+            window.SHJSceneVrViewer && async function() {
+              const e = H(t.value.scenes);
+              for (const i in e)
+                Object.prototype.hasOwnProperty.call(e, i) && e[i].hotSpots.forEach(async (a) => {
+                  await setTimeout(() => {
+                    const d = H(a);
+                    d.draggable = k, window.SHJSceneVrViewer.removeHotSpot(d.id, i), window.SHJSceneVrViewer.addHotSpot(d, i);
+                  }, 100);
+                });
+            }();
+          } catch {
+          }
+          window.SHJSceneVrViewer.on("scenechange", (e) => {
+            const i = document.getElementsByTagName("video");
+            if (Ee(i) && i.length > 0 && i.forEach((n) => {
+              n && n.pause();
+            }), r.value) {
+              const n = r.value.sceneType;
+              g.value = e;
+              const a = r.value.sceneType;
+              setTimeout(() => {
+                (a !== "image" || n !== "image" && a === "image" || n !== a) && h(!0), O.value = g.value, b("on-scene-scenechange", r.value), I.parseEvents(
+                  y.useEvents,
+                  "on-scene-scenechange",
+                  r.value
+                );
+              }), k ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate();
+            } else
+              g.value = t.value.default.firstScene, C(() => {
+                h(), b("on-scene-scenechange", r.value), I.parseEvents(
+                  y.useEvents,
+                  "on-scene-scenechange",
+                  r.value
+                );
+              });
+          }), window.SHJSceneVrViewer.on(
+            "zoomchange",
+            Te(() => {
+              b("on-scene-zooming", r.value), I.parseEvents(
+                y.useEvents,
+                "on-scene-zooming",
+                r.value
+              );
+            }, 300)
+          ), window.SHJSceneVrViewer.on("hot-click", (e) => {
+            b("on-scene-hotClick", e), I.parseEvents(y.useEvents, "on-scene-hotClick", e);
+          }), V.value = !0;
+        }
       }
-    }, X = () => {
-      if (_.value) {
+    }, te = () => {
+      if (A.value) {
         if (!("IntersectionObserver" in window)) {
-          p.value = !0, h(() => {
-            y();
+          v.value = !0, C(() => {
+            h();
           });
           return;
         }
-        b = new IntersectionObserver(
-          (t) => {
-            t.forEach((e) => {
-              p.value = e.isIntersecting, e.isIntersecting && !f.value && h(() => {
-                y();
+        J = new IntersectionObserver(
+          (o) => {
+            o.forEach((e) => {
+              v.value = e.isIntersecting, e.isIntersecting && !V.value && C(() => {
+                h();
               });
             });
           },
@@ -346,113 +403,133 @@ const Re = {
             rootMargin: "50px"
             // 提前50px开始加载
           }
-        ), b.observe(_.value);
+        ), J.observe(A.value);
       }
-    }, ee = () => {
-      f.value || (p.value = !0, h(() => {
-        y();
-      }));
     }, oe = () => {
-      b && (b.disconnect(), b = null);
-    }, T = c(o.value.default.firstScene), te = A(() => {
-      const t = [];
-      if (o.value) {
-        const e = o.value.scenes;
-        for (const n in e)
-          if (Object.prototype.hasOwnProperty.call(e, n)) {
-            const a = e[n];
-            t.push({
-              label: a.label,
-              value: n,
-              thumbnail: a.cover
+      V.value || (v.value = !0, C(() => {
+        h();
+      }));
+    }, re = () => {
+      J && (J.disconnect(), J = null);
+    }, O = p(t.value.default.firstScene), ie = P(() => {
+      const o = [];
+      if (t.value) {
+        const e = t.value.scenes;
+        for (const i in e)
+          if (Object.prototype.hasOwnProperty.call(e, i)) {
+            const n = e[i];
+            o.push({
+              label: n.label,
+              value: i,
+              thumbnail: n.cover
             });
           }
       }
-      return t.sort((e, n) => {
-        const a = parseInt(e.value.replace("scene", "")), w = parseInt(n.value.replace("scene", ""));
-        return a - w;
+      return o.sort((e, i) => {
+        const n = parseInt(e.value.replace("scene", "")), a = parseInt(i.value.replace("scene", ""));
+        return n - a;
       });
     });
-    z(
-      () => o.value.default,
+    D(
+      () => t.value.default,
       () => {
-        window.SHJSceneVrViewer && (H ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate());
+        window.SHJSceneVrViewer && (k ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate());
       },
       { deep: !0 }
     );
-    const ie = (t) => {
-      window.SHJSceneVrViewer && T.value !== t && (T.value = t, window.SHJSceneVrViewer.isLoaded() && (window.SHJSceneVrViewer.loadScene(t), H ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate()));
-    }, I = c(), J = c(!0), re = () => {
-      J.value ? I.value.style.bottom = "-999px" : I.value.style.bottom = "80px", J.value = !J.value;
+    const ne = (o) => {
+      window.SHJSceneVrViewer && O.value !== o && (O.value = o, window.SHJSceneVrViewer.isLoaded() && (window.SHJSceneVrViewer.loadScene(o), k ? window.SHJSceneVrViewer.stopAutoRotate() : window.SHJSceneVrViewer.startAutoRotate()));
+    }, L = p(), E = p(!0), le = () => {
+      E.value ? L.value.style.bottom = "-999px" : L.value.style.bottom = "80px", E.value = !E.value;
     };
-    de(() => {
-      o.value && (o.value.default.controls === void 0 && (o.value.default.controls = i.value.controls), o.value.default.audio === void 0 && (o.value.default.audio = i.value.audio)), X(), me();
-    }), z(p, (t) => {
-      t && !f.value && h(() => {
-        y();
+    we(() => {
+      t.value && (t.value.default.controls === void 0 && (t.value.default.controls = r.value.controls), t.value.default.audio === void 0 && (t.value.default.audio = r.value.audio)), te(), ve();
+    }), D(v, (o) => {
+      o && !V.value && C(() => {
+        h();
       });
-    }), ve(() => {
-      oe(), window.SHJSceneVrViewer && (window.SHJSceneVrViewer.destroy(), window.SHJSceneVrViewer = null), v.value && (v.value.dispose(), v.value = null);
+    }), fe(() => {
+      if (re(), window.SHJSceneVrViewer) {
+        try {
+          window.SHJSceneVrViewer.destroy();
+        } catch {
+        }
+        window.SHJSceneVrViewer = null;
+      }
+      if (m.value) {
+        try {
+          m.value.dispose();
+        } catch {
+        }
+        m.value = null;
+      }
+      if (S.value) {
+        try {
+          S.value.destroy();
+        } catch {
+        }
+        S.value = null;
+      }
     });
-    const ne = () => {
+    const ae = () => {
       window.SHJSceneVrViewer.setPitch(window.SHJSceneVrViewer.getPitch() + 10);
-    }, le = () => {
-      window.SHJSceneVrViewer.setPitch(window.SHJSceneVrViewer.getPitch() - 10);
     }, se = () => {
+      window.SHJSceneVrViewer.setPitch(window.SHJSceneVrViewer.getPitch() - 10);
+    }, ce = () => {
       window.SHJSceneVrViewer.setYaw(window.SHJSceneVrViewer.getYaw() - 10);
-    }, ae = () => {
-      window.SHJSceneVrViewer.setYaw(window.SHJSceneVrViewer.getYaw() + 10);
     }, ue = () => {
+      window.SHJSceneVrViewer.setYaw(window.SHJSceneVrViewer.getYaw() + 10);
+    }, pe = () => {
       window.SHJSceneVrViewer.setHfov(window.SHJSceneVrViewer.getHfov() - 10);
-    }, ce = () => {
+    }, me = () => {
       window.SHJSceneVrViewer.setHfov(window.SHJSceneVrViewer.getHfov() + 10);
-    }, k = c(!1), j = (t) => {
-      m.value && (t === "play" ? (m.value.play(), k.value = !1) : (m.value.pause(), k.value = !0));
-    }, pe = () => {
+    }, T = p(!1), B = (o) => {
+      w.value && (o === "play" ? (w.value.play(), T.value = !1) : (w.value.pause(), T.value = !0));
+    }, de = () => {
       window.SHJSceneVrViewer.startAutoRotate();
     };
-    let O;
-    const R = c(!1), me = () => {
-      o.value.default.controls ? R.value = o.value.default.controls.mouseTipShow : R.value = !0, O && clearTimeout(O), O = setTimeout(() => {
+    let x;
+    const R = p(!1), ve = () => {
+      t.value.default.controls ? R.value = t.value.default.controls.mouseTipShow : R.value = !0, x && clearTimeout(x), x = setTimeout(() => {
         R.value = !1;
       }, 3500);
     };
-    return $({
-      forceInit: ee,
-      isVisible: p,
-      isInitialized: f
-    }), (t, e) => {
-      const n = M("el-tooltip"), a = M("el-scrollbar");
-      return s(), l("div", {
+    return Z({
+      forceInit: oe,
+      isVisible: v,
+      isInitialized: V
+    }), (o, e) => {
+      const i = N("el-tooltip"), n = N("el-scrollbar");
+      return c(), s("div", {
         ref_key: "containerRef",
-        ref: _,
+        ref: A,
         class: "vr-scene-wrap"
       }, [
-        !p.value && !f.value ? (s(), l("div", Re, e[2] || (e[2] = [
-          r("div", { class: "loading-content" }, [
-            r("div", { class: "loading-spinner" }),
-            r("p", null, "全景场景加载中...")
+        !v.value && !V.value ? (c(), s("div", Oe, e[2] || (e[2] = [
+          l("div", { class: "loading-content" }, [
+            l("div", { class: "loading-spinner" }),
+            l("p", null, "全景场景加载中...")
           ], -1)
         ]))) : u("", !0),
-        i.value && p.value ? (s(), l(D, { key: 1 }, [
-          B(r("div", Ce, null, 512), [
-            [N, i.value.sceneType === "image"]
+        r.value && v.value ? (c(), s(G, { key: 1 }, [
+          W(l("div", Re, null, 512), [
+            [U, r.value.sceneType === "image"]
           ]),
-          B(r("div", _e, null, 512), [
-            [N, i.value.sceneType !== "image"]
+          W(l("div", _e, null, 512), [
+            [U, r.value.sceneType !== "image"]
           ])
         ], 64)) : u("", !0),
-        o.value.default.controls && p.value ? (s(), l("div", Ie, [
-          o.value.default.controls.scene ? (s(), l("div", {
+        t.value.default.controls && v.value ? (c(), s("div", Ae, [
+          t.value.default.controls.scene ? (c(), s("div", {
             key: 0,
             class: "btn-icon left",
-            style: x({ borderColor: J.value ? "#ff7d00" : "#ffffff3d" }),
-            onClick: re
+            style: j({ borderColor: E.value ? "#ff7d00" : "#ffffff3d" }),
+            onClick: le
           }, [
-            G(n, { content: "场景选择" }, {
-              default: U(() => e[3] || (e[3] = [
-                r("img", {
-                  src: Ve,
+            Y(i, { content: "场景选择" }, {
+              default: F(() => e[3] || (e[3] = [
+                l("img", {
+                  src: ge,
                   alt: ""
                 }, null, -1)
               ])),
@@ -460,146 +537,146 @@ const Re = {
               __: [3]
             })
           ], 4)) : u("", !0),
-          o.value.default.controls.left ? (s(), l("div", {
+          t.value.default.controls.left ? (c(), s("div", {
             key: 1,
             class: "btn-icon left",
-            onClick: se
+            onClick: ce
           }, e[4] || (e[4] = [
-            r("img", {
-              src: C,
+            l("img", {
+              src: _,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          o.value.default.controls.right ? (s(), l("div", {
+          t.value.default.controls.right ? (c(), s("div", {
             key: 2,
             class: "btn-icon right",
-            onClick: ae
+            onClick: ue
           }, e[5] || (e[5] = [
-            r("img", {
-              src: C,
+            l("img", {
+              src: _,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          o.value.default.controls.top ? (s(), l("div", {
+          t.value.default.controls.top ? (c(), s("div", {
             key: 3,
             class: "btn-icon up",
-            onClick: ne
+            onClick: ae
           }, e[6] || (e[6] = [
-            r("img", {
-              src: C,
+            l("img", {
+              src: _,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          o.value.default.controls.bottom ? (s(), l("div", {
+          t.value.default.controls.bottom ? (c(), s("div", {
             key: 4,
             class: "btn-icon down",
-            onClick: le
+            onClick: se
           }, e[7] || (e[7] = [
-            r("img", {
-              src: C,
+            l("img", {
+              src: _,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          o.value.default.controls.magnify ? (s(), l("div", {
+          t.value.default.controls.magnify ? (c(), s("div", {
             key: 5,
             class: "btn-icon",
-            onClick: ue
+            onClick: pe
           }, e[8] || (e[8] = [
-            r("img", {
-              src: ye,
+            l("img", {
+              src: he,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          o.value.default.controls.shrink ? (s(), l("div", {
+          t.value.default.controls.shrink ? (c(), s("div", {
             key: 6,
             class: "btn-icon",
-            onClick: ce
+            onClick: me
           }, e[9] || (e[9] = [
-            r("img", {
-              src: ge,
+            l("img", {
+              src: He,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          k.value && d.value.src && o.value.default.audio ? (s(), l("div", {
+          T.value && f.value.src && t.value.default.audio ? (c(), s("div", {
             key: 7,
             class: "btn-icon",
-            onClick: e[0] || (e[0] = (w) => j("play"))
+            onClick: e[0] || (e[0] = (a) => B("play"))
           }, e[10] || (e[10] = [
-            r("img", {
+            l("img", {
               src: be,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          !k.value && d.value.src && o.value.default.audio ? (s(), l("div", {
+          !T.value && f.value.src && t.value.default.audio ? (c(), s("div", {
             key: 8,
             class: "btn-icon",
-            onClick: e[1] || (e[1] = (w) => j("pause"))
+            onClick: e[1] || (e[1] = (a) => B("pause"))
           }, e[11] || (e[11] = [
-            r("img", {
-              src: He,
+            l("img", {
+              src: Je,
               alt: ""
             }, null, -1)
           ]))) : u("", !0),
-          o.value.default.controls.rotate ? (s(), l("div", {
+          t.value.default.controls.rotate ? (c(), s("div", {
             key: 9,
             class: "btn-icon",
-            onClick: pe
+            onClick: de
           }, e[12] || (e[12] = [
-            r("img", {
-              src: Je,
+            l("img", {
+              src: ke,
               alt: ""
             }, null, -1)
           ]))) : u("", !0)
         ])) : u("", !0),
-        o.value.default.controls && p.value ? (s(), l("div", {
+        t.value.default.controls && v.value ? (c(), s("div", {
           key: 3,
           ref_key: "sceneMenuRef",
-          ref: I,
+          ref: L,
           class: "scene-menu",
-          style: x({
-            bottom: J.value && o.value.default.controls.scene ? "80px" : "-9999999999999px"
+          style: j({
+            bottom: E.value && t.value.default.controls.scene ? "80px" : "-9999999999999px"
           })
         }, [
-          G(a, null, {
-            default: U(() => [
-              r("div", Oe, [
-                (s(!0), l(D, null, we(te.value, (w) => (s(), l("div", {
-                  key: w.value,
+          Y(n, null, {
+            default: F(() => [
+              l("div", Le, [
+                (c(!0), s(G, null, Se(ie.value, (a) => (c(), s("div", {
+                  key: a.value,
                   class: "scene-item",
-                  style: x({
-                    borderColor: T.value === w.value ? "#ff7d00" : "#fff"
+                  style: j({
+                    borderColor: O.value === a.value ? "#ff7d00" : "#fff"
                   }),
-                  onClick: (De) => ie(w.value)
+                  onClick: (d) => ne(a.value)
                 }, [
-                  r("img", {
+                  l("img", {
                     class: "thumbnail",
-                    src: w.thumbnail
-                  }, null, 8, xe),
-                  r("p", Le, fe(w.label), 1)
-                ], 12, Ae))), 128))
+                    src: a.thumbnail
+                  }, null, 8, Pe),
+                  l("p", je, Ve(a.label), 1)
+                ], 12, xe))), 128))
               ])
             ]),
             _: 1
           })
         ], 4)) : u("", !0),
-        r("audio", {
+        l("audio", {
           ref_key: "audioRef",
-          ref: m,
-          autoplay: d.value.autoplay,
-          loop: d.value.loop,
-          volume: d.value.volume
+          ref: w,
+          autoplay: f.value.autoplay,
+          loop: f.value.loop,
+          volume: f.value.volume
         }, [
-          r("source", {
-            src: d.value.src
-          }, null, 8, je)
-        ], 8, Pe),
-        R.value && p.value ? (s(), l("div", ze, e[13] || (e[13] = [
-          Se('<div class="icon-wrap" data-v-eb6bdd6d><div class="left" data-v-eb6bdd6d><i class="iconfont zv-drop-down" data-v-eb6bdd6d></i></div><i class="iconfont zv-mouse" data-v-eb6bdd6d></i><div class="right" data-v-eb6bdd6d><i class="iconfont zv-drop-down" data-v-eb6bdd6d></i></div></div><p class="title" data-v-eb6bdd6d>左右拖动   更多精彩</p>', 2)
+          l("source", {
+            src: f.value.src
+          }, null, 8, ze)
+        ], 8, Me),
+        R.value && v.value ? (c(), s("div", Be, e[13] || (e[13] = [
+          ye('<div class="icon-wrap" data-v-5d09e9c5><div class="left" data-v-5d09e9c5><i class="iconfont zv-drop-down" data-v-5d09e9c5></i></div><i class="iconfont zv-mouse" data-v-5d09e9c5></i><div class="right" data-v-5d09e9c5><i class="iconfont zv-drop-down" data-v-5d09e9c5></i></div></div><p class="title" data-v-5d09e9c5>左右拖动   更多精彩</p>', 2)
         ]))) : u("", !0)
       ], 512);
     };
   }
 });
 export {
-  qi as default
+  Xr as default
 };