tuikit-atomicx-vue3 4.5.2 → 4.5.4

package/dist/components/LiveView/PlayerControl/PlayerControlState.js

@@ -1,13 +1,14 @@
-import { ref as o, computed as N, watch as B } from "vue";
-import { TUIVideoQuality as w } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomEngine as K } from "../../../hooks/useRoomEngine.js";
-import { useLiveSeatState as W } from "../../../states/LiveSeatState/index.js";
-import { hadLandscapeRotationToUndo as Z, getDeviceType as ee, shouldRotateToLandscapeForFullscreen as te } from "./utils/deviceDetection.js";
-import { EventListenerManager as ne, DOMElementGetter as d } from "./utils/domHelpers.js";
-import { OrientationManager as P, StyleManager as M, FullscreenMode as S, FullscreenManager as b } from "./utils/fullscreenManager.js";
-import { useLiveListState as re } from "../../../states/LiveListState/LiveListState.js";
-var ae = /* @__PURE__ */ ((r) => (r.CONTAIN = "contain", r.COVER = "cover", r.FILL = "fill", r))(ae || {}), se = ((r) => (r[r.R360P = w.kVideoQuality_360p] = "R360P", r[r.R540P = w.kVideoQuality_540p] = "R540P", r[r.R720P = w.kVideoQuality_720p] = "R720P", r[r.R1080P = w.kVideoQuality_1080p] = "R1080P", r))(se || {});
-const l = {
+import { ref as i, computed as N, watch as C } from "vue";
+import { TUIVideoQuality as h } from "@tencentcloud/tuiroom-engine-js";
+import { useUIKit as te, TUIMessageBox as ne } from "@tencentcloud/uikit-base-component-vue3";
+import { useRoomEngine as ae } from "../../../hooks/useRoomEngine.js";
+import { useLiveSeatState as re } from "../../../states/LiveSeatState/index.js";
+import { isSafariBrowser as se, hadLandscapeRotationToUndo as ie, getDeviceType as le, shouldRotateToLandscapeForFullscreen as oe } from "./utils/deviceDetection.js";
+import { EventListenerManager as ce, DOMElementGetter as f, waitForVideoMounted as ue } from "./utils/domHelpers.js";
+import { OrientationManager as S, StyleManager as M, FullscreenMode as V, FullscreenManager as k } from "./utils/fullscreenManager.js";
+import { useLiveListState as de } from "../../../states/LiveListState/LiveListState.js";
+var fe = /* @__PURE__ */ ((r) => (r.CONTAIN = "contain", r.COVER = "cover", r.FILL = "fill", r))(fe || {}), ve = ((r) => (r[r.R360P = h.kVideoQuality_360p] = "R360P", r[r.R540P = h.kVideoQuality_540p] = "R540P", r[r.R720P = h.kVideoQuality_720p] = "R720P", r[r.R1080P = h.kVideoQuality_1080p] = "R1080P", r))(ve || {});
+const u = {
   // Default volume level when component initializes (100% volume)
   DEFAULT_VOLUME: 100,
   // Minimum allowed volume level (silent)
@@ -16,88 +17,100 @@ const l = {
   MAX_VOLUME: 100,
   // Volume level when muted (silent)
   MUTE_VOLUME: 0
-}, ie = {
-  // Delay in milliseconds before resuming playback after leaving picture-in-picture
-  // Allows browser to handle state transitions naturally
-  PIP_RESUME_DELAY: 300
-}, x = {
+}, D = {
   // Index of the first element in an array
   FIRST_INDEX: 0
-}, v = o(!0), V = o(
+}, o = i(!1), F = i(
   "contain"
   /* CONTAIN */
-), i = o(!1), E = o(!1), L = o(!1), m = o(l.DEFAULT_VOLUME), F = o(!1);
-let I = l.DEFAULT_VOLUME;
-const h = o([]), p = o(), u = K();
-function pe() {
-  const { currentLive: r } = re(), { canvas: f } = W(), c = new ne(), R = `player-control-${Date.now()}`, g = N(
-    () => f.value ? f.value.width > f.value.height : !1
-  ), C = N(
-    () => f.value ? f.value.width < f.value.height : !1
-  ), y = ee(), a = async (e, t, n) => {
+), l = i(!1), w = i(!1), E = i(!1), m = i(u.DEFAULT_VOLUME), T = i(!1), me = i(se()), g = i(!1);
+let I = u.DEFAULT_VOLUME;
+const L = i([]), y = i(), c = ae(), { t: q } = te();
+function Me() {
+  const { currentLive: r } = de(), { canvas: v } = re(), d = new ce(), O = `player-control-${Date.now()}`, P = N(
+    () => v.value ? v.value.width > v.value.height : !1
+  ), Q = N(
+    () => v.value ? v.value.width < v.value.height : !1
+  ), p = le(), s = async (e, t, n) => {
     try {
       return await e();
-    } catch (s) {
-      return console.error(`${t} operation failed:`, s), n;
+    } catch (a) {
+      return console.error(`${t} operation failed:`, a), n;
     }
-  }, T = async () => a(async () => {
-    var e;
-    return await ((e = u.instance) == null ? void 0 : e.callExperimentalAPI(JSON.stringify({
-      api: "resume",
-      params: {}
-    }))), v.value = !0, !0;
-  }, "Resume playback", !1), D = async () => a(async () => {
+  }, J = async () => s(async () => {
+    var e, t, n;
+    try {
+      return await ((e = c.instance) == null ? void 0 : e.callExperimentalAPI(JSON.stringify({
+        api: "resume",
+        params: {}
+      }))), o.value = !0, !0;
+    } catch (a) {
+      if ((a == null ? void 0 : a.name) === "NotAllowedError" && ((t = a == null ? void 0 : a.message) != null && t.includes("user agent") || (n = a == null ? void 0 : a.message) != null && n.includes("denied permission")))
+        return ne.alert({
+          content: q("Content is ready. Click the button to start playback"),
+          confirmText: q("Play"),
+          callback: async () => {
+            var x;
+            await ((x = c.instance) == null ? void 0 : x.callExperimentalAPI(JSON.stringify({
+              api: "resume",
+              params: {}
+            }))), o.value = !0;
+          }
+        }), !1;
+      throw a;
+    }
+  }, "Resume playback", !1), X = async () => s(async () => {
     var e;
-    return await ((e = u.instance) == null ? void 0 : e.callExperimentalAPI(JSON.stringify({
+    return await ((e = c.instance) == null ? void 0 : e.callExperimentalAPI(JSON.stringify({
       api: "pause",
       params: {}
-    }))), v.value = !1, !0;
-  }, "Pause playback", !1), k = (e) => {
-    if (!i.value || !g.value)
+    }))), o.value = !1, !0;
+  }, "Pause playback", !1), $ = (e) => {
+    if (!l.value || !P.value)
       return;
-    const t = d.getAllElements();
+    const t = f.getAllElements();
     if (!t.view) {
       console.warn("live-core-view element not found for orientation change handling");
       return;
     }
     M.smartApplyLandscapeStyles(t.view, e);
-  }, q = async () => a(async () => {
-    const e = d.getAllElements(), t = d.validateElements(e);
+  }, z = async () => s(async () => {
+    const e = f.getAllElements(), t = f.validateElements(e);
     if (!t.isValid)
       throw new Error(`Missing required DOM elements: ${t.missingElements.join(", ")}`);
-    const n = te(y, g.value), s = await b.requestFullscreen(
+    const n = oe(p, P.value), a = await k.requestFullscreen(
       e.container,
       e.view,
-      y,
-      C.value,
+      p,
+      Q.value,
       n
     );
-    return s.success ? i.value = !0 : console.error("Fullscreen request failed:", s.error), E.value = s.shouldRotateToLandscape, s;
-  }, "Request fullscreen", { success: !1, mode: S.CSS_SIMULATED, shouldRotateToLandscape: !1 }), Q = async () => a(async () => {
-    const e = d.getAllElements();
+    return a.success ? l.value = !0 : console.error("Fullscreen request failed:", a.error), w.value = a.shouldRotateToLandscape, a;
+  }, "Request fullscreen", { success: !1, mode: V.CSS_SIMULATED, shouldRotateToLandscape: !1 }), B = async () => s(async () => {
+    const e = f.getAllElements();
     if (!e.view)
       throw new Error("live-core-view element not found");
-    const t = Z(y, g.value), n = await b.exitFullscreen(
+    const t = ie(p, P.value), n = await k.exitFullscreen(
       e.view,
-      y,
+      p,
       t
     );
-    return n.mode === S.CSS_SIMULATED && (i.value = !1), n.success || console.error("Fullscreen exit failed:", n.error), E.value = !1, n;
-  }, "Exit fullscreen", { success: !1, mode: S.CSS_SIMULATED, shouldRotateToLandscape: !1 }), X = async () => a(async () => {
-    const e = d.getVideoElement();
+    return n.mode === V.CSS_SIMULATED && (l.value = !1), n.success || console.error("Fullscreen exit failed:", n.error), w.value = !1, n;
+  }, "Exit fullscreen", { success: !1, mode: V.CSS_SIMULATED, shouldRotateToLandscape: !1 }), G = async () => s(async () => {
+    const e = f.getVideoElement();
     if (!e)
       throw new Error("Video element not found");
     if (!e.requestPictureInPicture)
       throw new Error("Picture-in-picture not supported in current environment");
-    return U(), await e.requestPictureInPicture(), !0;
-  }, "Request picture-in-picture", !1), $ = async () => a(async () => {
+    return _(), await e.requestPictureInPicture(), !0;
+  }, "Request picture-in-picture", !1), j = async () => s(async () => {
     if (!document.exitPictureInPicture)
       throw new Error("Exit picture-in-picture not supported in current environment");
     return await document.exitPictureInPicture(), !0;
-  }, "Exit picture-in-picture", !1), A = async (e) => a(async () => {
-    if (!u.instance)
+  }, "Exit picture-in-picture", !1), A = async (e) => s(async () => {
+    if (!c.instance)
       throw new Error("Room engine instance not available");
-    return console.debug("Switching to resolution:", e), await u.instance.callExperimentalAPI(
+    return console.debug("Switching to resolution:", e), await c.instance.callExperimentalAPI(
       JSON.stringify({
         api: "switchPlaybackQuality",
         params: {
@@ -105,11 +118,11 @@ function pe() {
           autoSwitch: !1
         }
       })
-    ), v.value || (v.value = !0), p.value = e, !0;
-  }, "Switch resolution", !1), z = async (e) => a(async () => {
-    if (!u.instance)
+    ), o.value || (o.value = !0), y.value = e, !0;
+  }, "Switch resolution", !1), H = async (e) => s(async () => {
+    if (!c.instance)
       throw new Error("Room engine instance not available");
-    return await u.instance.callExperimentalAPI(
+    return await c.instance.callExperimentalAPI(
       JSON.stringify({
         api: "queryPlaybackQualityList",
         params: {
@@ -117,106 +130,119 @@ function pe() {
         }
       })
     ) || [];
-  }, "Get resolution list", []), J = async (e, t = !0) => {
+  }, "Get resolution list", []), K = async (e, t = !0) => {
     try {
-      const n = await z(e);
-      if (h.value = n, n.length === x.FIRST_INDEX) {
-        console.warn("[Resolution] No resolutions available for room:", e), p.value = void 0;
+      const n = await H(e);
+      if (L.value = n, n.length === D.FIRST_INDEX) {
+        console.warn("[Resolution] No resolutions available for room:", e), y.value = void 0;
         return;
       }
-      const s = n[x.FIRST_INDEX];
-      p.value = s, t && await A(s);
+      const a = n[D.FIRST_INDEX];
+      y.value = a, t && await A(a);
     } catch (n) {
       console.error("[Resolution] Failed to initialize resolution:", n);
     }
-  }, O = async (e) => a(async () => {
+  }, R = async (e) => s(async () => {
     var t;
-    if (e < l.MIN_VOLUME || e > l.MAX_VOLUME)
-      throw new Error(`Volume value must be between ${l.MIN_VOLUME}-${l.MAX_VOLUME}`);
-    return await ((t = u.instance) == null ? void 0 : t.setAudioPlayoutVolume({ volume: e })), m.value = e, I = e, F.value = e == l.MUTE_VOLUME, !0;
-  }, "Set volume", !1), G = async (e) => a(async () => {
+    if (e < u.MIN_VOLUME || e > u.MAX_VOLUME)
+      throw new Error(`Volume value must be between ${u.MIN_VOLUME}-${u.MAX_VOLUME}`);
+    return await ((t = c.instance) == null ? void 0 : t.setAudioPlayoutVolume({ volume: e })), m.value = e, I = e, T.value = e == u.MUTE_VOLUME, !0;
+  }, "Set volume", !1), Y = async (e) => s(async () => {
     var n;
     let t;
-    return e ? (I = m.value, t = l.MUTE_VOLUME) : t = I || l.DEFAULT_VOLUME, await ((n = u.instance) == null ? void 0 : n.setAudioPlayoutVolume({ volume: t })), m.value = t, F.value = e, !0;
-  }, "Set mute", !1), Y = async (e) => a(async () => (V.value = e, !0), "Change fill mode", !1), _ = () => {
+    return e ? (I = m.value, t = u.MUTE_VOLUME) : t = I || u.DEFAULT_VOLUME, await ((n = c.instance) == null ? void 0 : n.setAudioPlayoutVolume({ volume: t })), m.value = t, T.value = e, !0;
+  }, "Set mute", !1), W = async (e) => s(async () => (F.value = e, !0), "Change fill mode", !1), U = () => {
     try {
-      const e = d.getAllElements();
+      const e = f.getAllElements();
       if (!e.view) {
         console.warn("View element not found for fullscreen exit cleanup");
         return;
       }
-      M.removeFullscreenStyles(e.view), M.removeLandscapeStyles(e.view), y !== "desktop" && P.unlockOrientation().catch(() => {
-      }), E.value = !1;
+      M.removeFullscreenStyles(e.view), M.removeLandscapeStyles(e.view), p !== "desktop" && S.unlockOrientation().catch(() => {
+      }), w.value = !1;
     } catch (e) {
       console.error("Fullscreen exit cleanup failed:", e);
     }
-  }, j = () => {
+  }, Z = () => {
     const e = () => {
-      const n = !!document.fullscreenElement, s = i.value;
-      i.value = n, s && !n && _();
+      const n = !!document.fullscreenElement, a = l.value;
+      l.value = n, a && !n && U();
     };
-    c.addListener("fullscreenchange", document, "fullscreenchange", e), c.addListener("webkitfullscreenchange", document, "webkitfullscreenchange", e), c.addListener("mozfullscreenchange", document, "mozfullscreenchange", e), c.addListener("MSFullscreenChange", document, "MSFullscreenChange", e);
+    d.addListener("fullscreenchange", document, "fullscreenchange", e), d.addListener("webkitfullscreenchange", document, "webkitfullscreenchange", e), d.addListener("mozfullscreenchange", document, "mozfullscreenchange", e), d.addListener("MSFullscreenChange", document, "MSFullscreenChange", e);
     const t = () => {
-      document.visibilityState === "visible" && i.value && (document.fullscreenElement || (i.value = !1, _()));
+      document.visibilityState === "visible" && l.value && (document.fullscreenElement || (l.value = !1, U()));
     };
-    c.addListener("visibilitychange", document, "visibilitychange", t);
-  }, U = () => {
-    const e = d.getVideoElement();
+    d.addListener("visibilitychange", document, "visibilitychange", t);
+  }, _ = () => {
+    const e = f.getVideoElement();
     if (!e) {
       console.warn("Video element not found for setting up event listeners");
       return;
     }
     const t = () => {
-      L.value = !0;
+      E.value = !0;
     }, n = () => {
-      L.value = !1, setTimeout(T, ie.PIP_RESUME_DELAY);
+      E.value = !1;
     };
-    c.addListener("enterpictureinpicture", e, "enterpictureinpicture", t), c.addListener("leavepictureinpicture", e, "leavepictureinpicture", n);
-  }, H = () => {
-    P.removeOrientationListener(R), c.removeAllListeners();
+    d.addListener("enterpictureinpicture", e, "enterpictureinpicture", t), d.addListener("leavepictureinpicture", e, "leavepictureinpicture", n);
+  }, ee = () => {
+    S.removeOrientationListener(O), d.removeAllListeners();
+  };
+  Z(), _(), S.addOrientationListener(O, $);
+  const b = async () => {
+    try {
+      await ue();
+    } finally {
+      const e = f.hasTcPlayerElement();
+      e !== g.value && (g.value = e, console.log("[PlayerControl] isTcPlayer:", g.value));
+    }
   };
-  return j(), U(), P.addOrientationListener(R, k), B(
+  return C(
     () => {
       var e;
       return (e = r.value) == null ? void 0 : e.liveId;
     },
     async (e) => {
-      e && (v.value = !0, h.value = [], p.value = void 0, await O(m.value), await J(e, !1), console.log("[PlayerControl] State after entering room:", {
-        isPlaying: v.value,
-        currentFillMode: V.value,
-        isFullscreen: i.value,
-        isLandscapeStyleMode: E.value,
-        isPictureInPicture: L.value,
+      e && (o.value = !0, E.value = !1, l.value = !1, L.value = [], y.value = void 0, await R(m.value), await K(e, !1), b(), console.log("[PlayerControl] State after entering room:", JSON.stringify({
+        isPlaying: o.value,
+        currentFillMode: F.value,
+        isFullscreen: l.value,
+        isLandscapeStyleMode: w.value,
+        isPictureInPicture: E.value,
         currentVolume: m.value,
-        resolutionList: h.value,
-        currentResolution: p.value
-      }));
+        resolutionList: L.value,
+        currentResolution: y.value
+      })));
     }
-  ), {
-    isPlaying: v,
-    currentFillMode: V,
-    isFullscreen: i,
-    isLandscapeStyleMode: E,
-    isPictureInPicture: L,
+  ), C(() => o.value, (e) => {
+    e && b();
+  }, { immediate: !0 }), {
+    isPlaying: o,
+    currentFillMode: F,
+    isFullscreen: l,
+    isLandscapeStyleMode: w,
+    isPictureInPicture: E,
     currentVolume: m,
-    isMuted: F,
-    resolutionList: h,
-    currentResolution: p,
-    resume: T,
-    pause: D,
-    requestFullscreen: q,
-    exitFullscreen: Q,
-    requestPictureInPicture: X,
-    exitPictureInPicture: $,
+    isMuted: T,
+    resolutionList: L,
+    currentResolution: y,
+    isSafari: me,
+    isTcPlayer: g,
+    resume: J,
+    pause: X,
+    requestFullscreen: z,
+    exitFullscreen: B,
+    requestPictureInPicture: G,
+    exitPictureInPicture: j,
     switchResolution: A,
-    setVolume: O,
-    setMute: G,
-    changeFillMode: Y,
-    cleanup: H
+    setVolume: R,
+    setMute: Y,
+    changeFillMode: W,
+    cleanup: ee
   };
 }
 export {
-  ae as FillMode,
-  se as Resolution,
-  pe as usePlayerControlState
+  fe as FillMode,
+  ve as Resolution,
+  Me as usePlayerControlState
 };

package/dist/components/LiveView/PlayerControl/utils/domHelpers.d.ts

@@ -40,7 +40,8 @@ export declare class DOMElementGetter {
      */
     static getTcPlayerElement(): HTMLElement | null;
     /**
-     * Validate if elements exist
+     * Validate if required elements exist for fullscreen
+     * Note: video element is optional because canvas rendering (TRTC SDK) doesn't use video
      */
     static validateElements(elements: {
         container?: HTMLElement | null;

package/dist/components/LiveView/PlayerControl/utils/domHelpers.js

@@ -51,11 +51,12 @@ class s {
     return e ? e.querySelector(c.TCPLAYER_ELEMENT) : null;
   }
   /**
-   * Validate if elements exist
+   * Validate if required elements exist for fullscreen
+   * Note: video element is optional because canvas rendering (TRTC SDK) doesn't use video
    */
   static validateElements(e) {
     const t = [];
-    return e.container === null && t.push("live-core-view-container"), e.view === null && t.push("live-core-view"), e.video === null && t.push("video"), {
+    return e.container === null && t.push("live-core-view-container"), e.view === null && t.push("live-core-view"), {
       isValid: t.length === 0,
       missingElements: t
     };
@@ -100,10 +101,10 @@ const g = (i = 3e3) => new Promise((e) => {
   }
   let r = null;
   const o = new MutationObserver((v) => {
-    for (const l of v)
-      l.type === "childList" && l.addedNodes.forEach((a) => {
-        if (a.nodeName === "VIDEO") {
-          const n = a, u = n.onvolumechange;
+    for (const a of v)
+      a.type === "childList" && a.addedNodes.forEach((l) => {
+        if (l.nodeName === "VIDEO") {
+          const n = l, u = n.onvolumechange;
           n.onvolumechange = null;
           const E = () => {
             r && clearTimeout(r), o.disconnect(), n.removeEventListener("loadeddata", E), setTimeout(() => {

package/dist/components/LiveView/i18n/en-US/index.d.ts

@@ -10,6 +10,7 @@ export declare const resource: {
     'Open Speaker': string;
     'Close Speaker': string;
     'The system does not support picture-in-picture mode': string;
+    'Content is ready. Click the button to start playback': string;
     'co-Hosting': string;
     'In battle': string;
     '360P': string;
@@ -17,4 +18,6 @@ export declare const resource: {
     '720P': string;
     '1080P': string;
     Connecting: string;
+    'Not allow to "Pause" in picture-in-picture mode': string;
+    'Not allow to "Picture in Picture" in non-playing mode': string;
 };

package/dist/components/LiveView/i18n/en-US/index.js

@@ -10,13 +10,16 @@ const e = {
   "Open Speaker": "Open Speaker",
   "Close Speaker": "Close Speaker",
   "The system does not support picture-in-picture mode": "The system does not support picture-in-picture mode",
+  "Content is ready. Click the button to start playback": "Content is ready. Click the button to start playback",
   "co-Hosting": "co-Hosting",
   "In battle": "In battle",
   "360P": "360P",
   "540P": "540P",
   "720P": "720P",
   "1080P": "1080P",
-  Connecting: "Connecting"
+  Connecting: "Connecting",
+  'Not allow to "Pause" in picture-in-picture mode': 'Not allow to "Pause" in picture-in-picture mode',
+  'Not allow to "Picture in Picture" in non-playing mode': 'Not allow to "Picture in Picture" in non-playing mode'
 };
 export {
   e as resource

package/dist/components/LiveView/i18n/zh-CN/index.d.ts

@@ -10,6 +10,7 @@ export declare const resource: {
     'Open Speaker': string;
     'Close Speaker': string;
     'The system does not support picture-in-picture mode': string;
+    'Content is ready. Click the button to start playback': string;
     'co-Hosting': string;
     'In battle': string;
     '360P': string;
@@ -17,4 +18,6 @@ export declare const resource: {
     '720P': string;
     '1080P': string;
     Connecting: string;
+    'Not allow to "Pause" in picture-in-picture mode': string;
+    'Not allow to "Picture in Picture" in non-playing mode': string;
 };

package/dist/components/LiveView/i18n/zh-CN/index.js

@@ -10,13 +10,16 @@ const e = {
   "Open Speaker": "取消静音",
   "Close Speaker": "静音",
   "The system does not support picture-in-picture mode": "系统不支持画中画模式",
+  "Content is ready. Click the button to start playback": "画面已准备好，点击播放按钮开始播放",
   "co-Hosting": "连线中",
   "In battle": "PK中",
   "360P": "低清",
   "540P": "标清",
   "720P": "高清",
   "1080P": "超清",
-  Connecting: "连线中"
+  Connecting: "连线中",
+  'Not allow to "Pause" in picture-in-picture mode': "画中画模式下不允许暂停操作",
+  'Not allow to "Picture in Picture" in non-playing mode': "暂停状态下不允许进入画中画模式"
 };
 export {
   e as resource