tuikit-atomicx-vue3 3.4.2 → 4.3.0

package/dist/states/SeatStore.js

@@ -1,19 +1,18 @@
-import { computed as p, ref as t, watch as g } from "vue";
-import S, { TUIRoomEvents as c, TUIRequestAction as s, TUIMediaDevice as l } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomEngine as A } from "../hooks/useRoomEngine.js";
-import { useLiveState as C } from "./LiveState/index.js";
-import { useLoginState as q } from "./LoginState.js";
-import { LiveStatus as M } from "../types/live.js";
+import { computed as v, ref as t, watch as A } from "vue";
+import S, { TUIRoomEvents as c, TUIRequestAction as a } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as g } from "../hooks/useRoomEngine.js";
+import { useLoginState as C } from "./LoginState.js";
+import { useLiveListState as O } from "./LiveListState/LiveListState.js";
 import { DeviceStatus as f } from "../types/device.js";
-const { localLiveStatus: O, currentLive: w } = C(), { loginUserInfo: $ } = q(), k = A(), u = p(() => {
+const { currentLive: k } = O(), { loginUserInfo: q } = C(), h = g(), m = v(() => {
   var e, o;
-  return ((o = (e = w.value) == null ? void 0 : e.liveOwner) == null ? void 0 : o.userId) || "";
-}), y = p(() => {
+  return ((o = (e = k.value) == null ? void 0 : e.liveOwner) == null ? void 0 : o.userId) || "";
+}), w = v(() => {
   var e;
-  return ((e = $.value) == null ? void 0 : e.userId) || "";
-}), R = t(/* @__PURE__ */ new Map()), n = t(/* @__PURE__ */ new Map()), h = t(/* @__PURE__ */ new Map()), I = t([]), L = t([]), U = t([]), d = t(/* @__PURE__ */ new Set()), m = t(/* @__PURE__ */ new Set()), T = async (e) => {
+  return ((e = q.value) == null ? void 0 : e.userId) || "";
+}), R = t(/* @__PURE__ */ new Map()), n = t(/* @__PURE__ */ new Map()), p = t(/* @__PURE__ */ new Map()), I = t([]), L = t([]), T = t([]), u = t(/* @__PURE__ */ new Set()), l = t(/* @__PURE__ */ new Set()), U = async (e) => {
   var i;
-  const o = await ((i = k.instance) == null ? void 0 : i.getUserInfo({
+  const o = await ((i = h.instance) == null ? void 0 : i.getUserInfo({
     userId: e
   }));
   return {
@@ -24,17 +23,14 @@ const { localLiveStatus: O, currentLive: w } = C(), { loginUserInfo: $ } = q(),
     userRole: o.userRole,
     isMessageDisabled: o.isMessageDisabled
   };
-}, b = (e) => ({
+}, y = (e) => ({
   userId: e.userId,
   userName: e.userName,
   avatarUrl: e.avatarUrl,
   customInfo: e.roomCustomInfo,
   userRole: e.userRole,
   isMessageDisabled: e.isMessageDisabled
-}), v = (e, o) => {
-  const a = m.value.has(e) || d.value.has(e);
-  return n.value.has(`${u.value}-${o}`) || R.value.has(`${e}-${o}`) ? f.AdminInviting : a ? f.On : f.Off;
-}, N = p(() => I.value.map((e) => {
+}), d = (e, o) => l.value.has(e) || u.value.has(e) ? f.On : f.Off, M = v(() => I.value.map((e) => {
   const o = e.userId !== "";
   return {
     index: e.index,
@@ -46,14 +42,14 @@ const { localLiveStatus: O, currentLive: w } = C(), { loginUserInfo: $ } = q(),
       userId: e.userId,
       userName: e.userName,
       avatarUrl: e.avatarUrl,
-      microphoneStatus: v(e.userId, l.kMicrophone),
-      cameraStatus: v(e.userId, l.kCamera),
+      microphoneStatus: d(e.userId),
+      cameraStatus: d(e.userId),
       onSeatTimestamp: 0,
       customInfo: {}
     } : void 0
   };
-})), D = p(() => L.value.map((e) => {
-  const o = h.value.get(e.userId);
+})), $ = v(() => L.value.map((e) => {
+  const o = p.value.get(e.userId);
   return {
     index: 0,
     // todo engine 未提供
@@ -68,112 +64,115 @@ const { localLiveStatus: O, currentLive: w } = C(), { loginUserInfo: $ } = q(),
       userId: o.userId,
       userName: o.userName,
       avatarUrl: o.avatarUrl,
-      microphoneStatus: v(o.userId, l.kMicrophone),
-      cameraStatus: v(o.userId, l.kCamera),
+      microphoneStatus: d(o.userId),
+      cameraStatus: d(o.userId),
       onSeatTimestamp: e.joinConnectionTime,
       networkQuality: void 0,
       customInfo: o.customInfo
     } : void 0
   };
-})), E = async ({ request: e }) => {
-  const { userId: o, requestAction: a } = e;
-  switch (h.value.set(o, await T(o)), a) {
-    case s.kRequestToOpenRemoteCamera:
-    case s.kRequestToOpenRemoteMicrophone:
-      n.value.set(`${u.value}-${a}`, e);
+})), b = async ({ request: e }) => {
+  const { userId: o, requestAction: s } = e;
+  switch (p.value.set(o, await U(o)), s) {
+    case a.kRequestToOpenRemoteCamera:
+    case a.kRequestToOpenRemoteMicrophone:
+      n.value.set(`${m.value}-${s}`, e);
       break;
-    case s.kApplyToAdminToOpenLocalCamera:
-    case s.kApplyToAdminToOpenLocalMicrophone:
-      n.value.set(`${o}-${a}`, e);
+    case a.kApplyToAdminToOpenLocalCamera:
+    case a.kApplyToAdminToOpenLocalMicrophone:
+      n.value.set(`${o}-${s}`, e);
       break;
   }
-}, V = ({
+}, N = ({
   requestId: e,
   userId: o,
-  request: a,
+  request: s,
   userInfo: i
 }) => {
-  const { requestAction: r } = a;
+  const { requestAction: r } = s;
   switch (r) {
-    case s.kRequestToOpenRemoteCamera:
-    case s.kRequestToOpenRemoteMicrophone:
-      n.value.delete(`${u.value}-${r}`);
+    case a.kRequestToOpenRemoteCamera:
+    case a.kRequestToOpenRemoteMicrophone:
+      n.value.delete(`${m.value}-${r}`);
       break;
-    case s.kApplyToAdminToOpenLocalCamera:
-    case s.kApplyToAdminToOpenLocalMicrophone:
+    case a.kApplyToAdminToOpenLocalCamera:
+    case a.kApplyToAdminToOpenLocalMicrophone:
       n.value.delete(`${o}-${r}`);
       break;
   }
-}, x = ({
+}, D = ({
   requestId: e,
   userId: o,
-  request: a,
+  request: s,
   userInfo: i
 }) => {
-  const { requestAction: r } = a;
+  const { requestAction: r } = s;
   switch (r) {
-    case s.kRequestToOpenRemoteCamera:
-    case s.kRequestToOpenRemoteMicrophone:
-      n.value.delete(`${u.value}-${r}`);
+    case a.kRequestToOpenRemoteCamera:
+    case a.kRequestToOpenRemoteMicrophone:
+      n.value.delete(`${m.value}-${r}`);
       break;
-    case s.kApplyToAdminToOpenLocalCamera:
-    case s.kApplyToAdminToOpenLocalMicrophone:
+    case a.kApplyToAdminToOpenLocalCamera:
+    case a.kApplyToAdminToOpenLocalMicrophone:
       n.value.delete(`${o}-${r}`);
       break;
   }
-}, P = async (e) => {
+}, E = async (e) => {
   I.value = e.seatList;
-}, Q = ({ userNetworkList: e }) => {
-  U.value = e;
-}, H = ({
+}, V = ({ userNetworkList: e }) => {
+  T.value = e;
+}, x = ({
   userId: e,
   streamType: o,
-  hasVideo: a,
+  hasVideo: s,
   reason: i
 }) => {
-  a ? d.value.add(e) : d.value.delete(e);
-}, j = ({
+  s ? u.value.add(e) : u.value.delete(e);
+}, Q = ({
   userId: e,
   hasAudio: o,
-  reason: a
+  reason: s
 }) => {
-  o ? m.value.add(e) : m.value.delete(e);
-}, z = [
-  { event: c.onRequestReceived, handler: E },
-  { event: c.onRequestProcessed, handler: V },
-  { event: c.onRequestCancelled, handler: x },
-  { event: c.onSeatListChanged, handler: P },
-  { event: c.onUserNetworkQualityChanged, handler: Q },
-  { event: c.onUserVideoStateChanged, handler: H },
-  { event: c.onUserAudioStateChanged, handler: j }
-], B = () => {
-  z.forEach(({ event: e, handler: o }) => {
-    var a;
-    (a = k.instance) == null || a.on(e, o);
+  o ? l.value.add(e) : l.value.delete(e);
+}, H = [
+  { event: c.onRequestReceived, handler: b },
+  { event: c.onRequestProcessed, handler: N },
+  { event: c.onRequestCancelled, handler: D },
+  { event: c.onSeatListChanged, handler: E },
+  { event: c.onUserNetworkQualityChanged, handler: V },
+  { event: c.onUserVideoStateChanged, handler: x },
+  { event: c.onUserAudioStateChanged, handler: Q }
+], P = () => {
+  H.forEach(({ event: e, handler: o }) => {
+    var s;
+    (s = h.instance) == null || s.on(e, o);
   });
-}, F = () => {
-  R.value.clear(), n.value.clear(), h.value.clear(), I.value = [], L.value = [], U.value = [], d.value.clear(), m.value.clear();
+}, j = () => {
+  R.value.clear(), n.value.clear(), p.value.clear(), I.value = [], L.value = [], T.value = [], u.value.clear(), l.value.clear();
 };
-g(O, async (e) => {
+A(() => {
+  var e;
+  return (e = k.value) == null ? void 0 : e.liveId;
+}, async (e) => {
   var o;
-  e === M.Live ? I.value = await ((o = k.instance) == null ? void 0 : o.getSeatList()) || [] : F();
+  e ? I.value = await ((o = h.instance) == null ? void 0 : o.getSeatList()) || [] : j();
 });
 S.once("ready", () => {
-  B();
+  P();
 });
-function _() {
+function W() {
   return {
-    liveOwnerUserId: u,
-    localUserId: y,
-    seatList: N,
-    coHostUserList: D,
+    liveOwnerUserId: m,
+    localUserId: w,
+    seatList: M,
+    coHostUserList: $,
     sentDeviceRequestMap: R,
     receivedDeviceRequestMap: n,
-    userInfoMap: h,
-    getUserInfo: T,
-    convertUserInfoToAudienceInfo: b
+    userInfoMap: p,
+    getUserInfo: U,
+    convertUserInfoToAudienceInfo: y
   };
 }
 export {
-  _ as useSeatStore
+  W as useSeatStore
 };

package/dist/states/{VideoMixerState.d.ts → VideoMixerState/VideoMixerState.d.ts}

@@ -1,4 +1,4 @@
-import { TUIVideoQuality, MediaSource } from '../types';
+import { TUIVideoQuality, MediaSource } from '../../types';
 
 declare function addMediaSource(source: MediaSource): Promise<void>;
 declare function updateMediaSource(source: MediaSource, config: Partial<MediaSource>): Promise<void>;

package/dist/states/VideoMixerState/VideoMixerState.js

@@ -0,0 +1,269 @@
+import { computed as v, ref as C, watch as F } from "vue";
+import L, { TRTCVideoResolutionMode as m, TRTCVideoResolution as u, TUIRoomDeviceMangerEvents as B, TRTCMediaMixingEvent as f, TUIResolutionMode as w, TUIMediaDeviceType as j, TUIMediaDeviceState as H, TRTCMediaSourceType as c, TRTCVideoRotation as E, TRTCVideoMirrorType as I, TRTCVideoFillMode as _ } from "@tencentcloud/tuiroom-engine-js";
+import { useRoomEngine as W } from "../../hooks/useRoomEngine.js";
+import { objectMerge as K } from "../../utils/utils.js";
+import { dataReport as Q } from "../../report/dataReport.js";
+import { MetricsKey as D } from "../../report/MetricsKey.js";
+import { useLiveListState as N } from "../LiveListState/LiveListState.js";
+import { LiveOrientation as R } from "../../types/live.js";
+import { TUIVideoQuality as a, TUIVideoStreamType as X } from "../../types/types.js";
+const M = W(), { currentLive: h } = N(), S = v(() => {
+  var e, i;
+  return h.value && ((e = h.value) == null ? void 0 : e.layoutTemplate) >= 200 && ((i = h.value) == null ? void 0 : i.layoutTemplate) <= 599 ? R.Landscape : R.Portrait;
+});
+function $(e) {
+  return {
+    [a.kVideoQuality_1080p]: {
+      fps: 20,
+      bitrate: 3e3
+    },
+    [a.kVideoQuality_720p]: {
+      fps: 15,
+      bitrate: 1800
+    },
+    [a.kVideoQuality_540p]: {
+      fps: 15,
+      bitrate: 1200
+    },
+    [a.kVideoQuality_360p]: {
+      fps: 15,
+      bitrate: 800
+    }
+  }[e];
+}
+function z(e) {
+  return {
+    [a.kVideoQuality_1080p]: {
+      width: 1920,
+      height: 1080
+    },
+    [a.kVideoQuality_720p]: {
+      width: 1280,
+      height: 720
+    },
+    [a.kVideoQuality_540p]: {
+      width: 960,
+      height: 540
+    },
+    [a.kVideoQuality_360p]: {
+      width: 640,
+      height: 360
+    }
+  }[e];
+}
+function Z(e) {
+  return {
+    [u.TRTCVideoResolution_480_270]: { width: 480, height: 270 },
+    [u.TRTCVideoResolution_640_360]: { width: 640, height: 360 },
+    [u.TRTCVideoResolution_960_540]: { width: 960, height: 540 },
+    [u.TRTCVideoResolution_1280_720]: { width: 1280, height: 720 },
+    [u.TRTCVideoResolution_1920_1080]: { width: 1920, height: 1080 }
+  }[e] || { width: 1280, height: 720 };
+}
+const y = C(a.kVideoQuality_720p), q = v(() => {
+  const { width: e, height: i } = z(y.value);
+  return S.value === R.Portrait ? i : e;
+}), G = v(() => {
+  const { width: e, height: i } = z(y.value);
+  return S.value === R.Portrait ? e : i;
+});
+function J(e) {
+  return {
+    [a.kVideoQuality_1080p]: u.TRTCVideoResolution_1920_1080,
+    [a.kVideoQuality_720p]: u.TRTCVideoResolution_1280_720,
+    [a.kVideoQuality_540p]: u.TRTCVideoResolution_960_540,
+    [a.kVideoQuality_360p]: u.TRTCVideoResolution_640_360
+  }[e];
+}
+function Y(e) {
+  return {
+    [u.TRTCVideoResolution_1920_1080]: a.kVideoQuality_1080p,
+    [u.TRTCVideoResolution_1280_720]: a.kVideoQuality_720p,
+    [u.TRTCVideoResolution_960_540]: a.kVideoQuality_540p,
+    [u.TRTCVideoResolution_640_360]: a.kVideoQuality_360p
+  }[e];
+}
+function ee(e) {
+  return {
+    [m.TRTCVideoResolutionModePortrait]: w.kResolutionMode_Portrait,
+    [m.TRTCVideoResolutionModeLandscape]: w.kResolutionMode_Landscape
+  }[e];
+}
+const T = v(() => {
+  const { fps: e, bitrate: i } = $(y.value);
+  return {
+    videoEncoderParams: {
+      videoResolution: J(y.value),
+      resMode: S.value === R.Portrait ? m.TRTCVideoResolutionModePortrait : m.TRTCVideoResolutionModeLandscape,
+      videoFps: e,
+      videoBitrate: i
+    }
+  };
+}), g = C(!1), d = C([]), V = v(() => d.value.find((e) => e.isSelected) || null);
+let s;
+function k(e) {
+  if (V.value) {
+    const i = d.value.find((o) => o.id === V.value.id) || null;
+    i && (i.isSelected = !1);
+  }
+  if (e) {
+    const i = d.value.find((o) => o.id === e.id) || null;
+    i && (i.isSelected = !0);
+  }
+}
+async function O() {
+  var e;
+  T.value && await ((e = M.instance) == null ? void 0 : e.updateVideoQualityEx({
+    streamType: X.kCameraStream,
+    encoderParams: {
+      videoResolution: Y(T.value.videoEncoderParams.videoResolution),
+      fps: T.value.videoEncoderParams.videoFps,
+      bitrate: T.value.videoEncoderParams.videoBitrate,
+      resolutionMode: ee(T.value.videoEncoderParams.resMode)
+    }
+  }));
+}
+F(
+  () => T.value,
+  async () => {
+    await s && s.updatePublishParams(T.value), await O();
+  },
+  { immediate: !0, deep: !0 }
+);
+let p = 1;
+function P(e) {
+  var i, o;
+  if (e.type === c.kCamera || e.type === c.kScreen) {
+    let t, r;
+    e.type === c.kCamera ? (t = ((i = e.camera) == null ? void 0 : i.resolution) || u.TRTCVideoResolution_1280_720, r = _.TRTCVideoFillMode_Fill) : e.type === c.kScreen && (t = ((o = e.screen) == null ? void 0 : o.resolution) || u.TRTCVideoResolution_1920_1080, r = _.TRTCVideoFillMode_Fit);
+    const { width: n, height: l } = Z(t), b = Math.min(q.value / n, G.value / l), A = {
+      rect: {
+        left: 0,
+        top: 0,
+        right: n * b,
+        bottom: l * b
+      },
+      zOrder: p,
+      fillMode: r,
+      mirror: I.TRTCVideoMirrorType_Disable,
+      rotation: E.TRTCVideoRotation_0
+    };
+    return p += 1, A;
+  }
+  if (e.type === c.kText) {
+    const t = {
+      rect: {
+        left: 20,
+        top: 400,
+        right: 220,
+        bottom: 500
+      },
+      zOrder: p
+    };
+    return p += 1, t;
+  }
+  if (e.type === c.kImage || e.type === c.kVideo) {
+    const t = {
+      rect: {
+        left: 0,
+        top: 0,
+        right: 400,
+        bottom: 300
+      },
+      zOrder: p,
+      fillMode: _.TRTCVideoFillMode_Fit,
+      mirror: I.TRTCVideoMirrorType_Disable,
+      rotation: E.TRTCVideoRotation_0
+    };
+    return p += 1, t;
+  }
+  return null;
+}
+async function ie(e) {
+  var i, o, t, r;
+  if (e.type === c.kCamera) {
+    const n = D.T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_CAMERA_COUNT;
+    Q.reportCount(n);
+    try {
+      (await navigator.mediaDevices.getUserMedia({ audio: !1, video: !0 })).getVideoTracks()[0].stop();
+    } catch (l) {
+      throw l;
+    }
+  }
+  if (e.type === c.kScreen) {
+    const n = D.T_METRICS_STATE_API_VIDEO_MIXER_ADD_MEDIA_SCREEN_COUNT;
+    Q.reportCount(n);
+  }
+  e.layout ? e.layout = Object.assign({}, P(e), e.layout) : e.layout = P(e), e.type === c.kText && (e.text = {
+    content: ((i = e.text) == null ? void 0 : i.content) || "",
+    color: (o = e.text) == null ? void 0 : o.fontColor,
+    font: `${(t = e.text) == null ? void 0 : t.fontSize}px ${(r = e.text) == null ? void 0 : r.fontFamily}`
+  }), await s.addMediaSource(e), d.value.push(e), k(e);
+}
+async function te(e, i) {
+  const o = K(e, i);
+  await s.updateMediaSource(o), e.isSelected && k(o);
+  const t = d.value.findIndex((r) => r.id === e.id);
+  t !== -1 && (d.value[t] = o);
+}
+async function oe(e) {
+  await s.removeMediaSource(e), d.value = d.value.filter((i) => i.id !== e.id);
+}
+function ae() {
+  g.value = !0, U();
+}
+function ne() {
+  d.value.forEach(async (e) => {
+    await s.removeMediaSource(e);
+  }), d.value = [];
+}
+async function de(e) {
+  const { deviceId: i, type: o, state: t } = e;
+  o === j.kMediaDeviceTypeVideoCamera && t === H.kMediaDeviceStateAdd && d.value.filter((n) => {
+    var l;
+    return ((l = n.camera) == null ? void 0 : l.cameraId) === i;
+  }).forEach(async (n) => {
+    await s.updateMediaSource(n);
+  });
+}
+async function U() {
+  var i, o;
+  if (!M.instance) return;
+  ((i = M.instance) == null ? void 0 : i.getMediaDeviceManager()).on(B.onDeviceChanged, de), s = (o = M.instance) == null ? void 0 : o.getTRTCCloud().getMediaMixingManager(), s.updatePublishParams(T.value), s.on(f.onSourceSelected, (t) => {
+    k(t);
+  }), s.on(f.onSourceDisconnected, (t) => {
+    t && t.id && (d.value = d.value.filter((r) => r.id !== t.id));
+  }), s.on(f.onSourceMoved, (t, r) => {
+    const n = d.value.find((l) => l.id === t.id && l.type === t.type) || null;
+    n && (n.layout.rect = r);
+  }), s.on(f.onSourceResized, (t, r) => {
+    const n = d.value.find((l) => l.id === t.id && l.type === t.type) || null;
+    n && (n.layout.rect = r);
+  }), s.on(f.onRightButtonClicked, (t) => {
+  });
+}
+L.once("ready", async () => {
+  g.value && await U();
+});
+let x = !1;
+function re() {
+  x || (L.once("ready", async () => {
+    await O();
+  }), x = !0);
+}
+function ve() {
+  return re(), {
+    isVideoMixerEnabled: g,
+    publishVideoQuality: y,
+    mediaSourceList: d,
+    activeMediaSource: V,
+    enableLocalVideoMixer: ae,
+    addMediaSource: ie,
+    updateMediaSource: te,
+    removeMediaSource: oe,
+    clearMediaSource: ne
+  };
+}
+export {
+  ve as useVideoMixerState
+};

package/dist/states/VideoMixerState/index.d.ts

@@ -0,0 +1 @@
+export { useVideoMixerState } from './VideoMixerState';

package/dist/states/VideoMixerState/index.js

@@ -0,0 +1,4 @@
+import { useVideoMixerState as r } from "./VideoMixerState.js";
+export {
+  r as useVideoMixerState
+};