tuikit-atomicx-vue3 3.4.1 → 3.5.0-beta.7

package/dist/states/LiveState/index.js

@@ -1,254 +0,0 @@
-import { ref as f, watch as I, nextTick as U } from "vue";
-import T, { TUIRoomEvents as d, TUILiveLayoutManagerEvents as M, TUILiveListManagerEvents as C, TUILiveModifyFlag as c, TUIRoomType as D } from "@tencentcloud/tuiroom-engine-js";
-import { useRoomEngine as O } from "../../hooks/useRoomEngine.js";
-import V from "../../rtc/server.js";
-import { LiveType as m, LiveStatus as l } from "../../types/live.js";
-import { TUISeatMode as R } from "../../types/types.js";
-import { useConversationListState as P } from "../ConversationListState/ConversationListState.js";
-const b = V.getInstance(), { setActiveConversation: k } = P(), r = O(), g = f([]), w = f(""), y = {
-  liveId: "",
-  liveName: "",
-  liveType: m.kLive,
-  liveDescription: "",
-  categoryList: [],
-  coverUrl: "",
-  backgroundUrl: "",
-  liveOwner: {
-    userId: "",
-    userName: "",
-    avatarUrl: "",
-    customInfo: {}
-  },
-  currentViewerCount: 0,
-  totalViewerCount: 0,
-  createTime: 0,
-  isMessageDisable: !1,
-  isGiftEnabled: !1,
-  isPublicVisible: !1,
-  isSeatEnabled: !1,
-  seatMode: R.kFreeToTake,
-  maxSeatCount: 0,
-  layoutTemplate: 0,
-  customInfo: {}
-}, E = (e) => ({
-  liveId: e.roomId,
-  liveName: e.name,
-  liveType: m.kLive,
-  // todo
-  liveDescription: "",
-  // todo
-  categoryList: e.categoryList,
-  coverUrl: e.coverUrl,
-  backgroundUrl: e.backgroundUrl,
-  liveOwner: {
-    userId: e.roomOwner || "",
-    userName: e.ownerName || "",
-    avatarUrl: e.ownerAvatarUrl || "",
-    customInfo: {}
-    // todo
-  },
-  currentViewerCount: e.totalViewers || 0,
-  totalViewerCount: e.totalViewers || 0,
-  createTime: e.createTime || 0,
-  isMessageDisable: e.isMessageDisableForAllUser,
-  isGiftEnabled: e.isGiftEnabled,
-  isPublicVisible: e.isPublicVisible,
-  isSeatEnabled: e.isSeatEnabled,
-  seatMode: e.seatMode,
-  maxSeatCount: e.maxSeatCount,
-  layoutTemplate: e.seatLayoutTemplateId,
-  customInfo: {}
-}), a = f({ ...y }), s = f(l.IDLE), S = (e) => {
-  a.value = { ...E(e) };
-}, G = async (e) => {
-  var o, t;
-  b.isLogin.value || await b.login();
-  try {
-    console.log("[liveState createLive] create live", e);
-    const i = await ((t = (o = r.instance) == null ? void 0 : o.getLiveListManager()) == null ? void 0 : t.startLive({
-      roomId: e.liveId,
-      roomType: D.kLive,
-      name: e.liveName,
-      notice: e.notice,
-      isMessageDisableForAllUser: e.isMessageDisableForAllUser,
-      isGiftEnabled: e.isGiftEnabled,
-      isLikeEnabled: e.isLikeEnabled,
-      isPublicVisible: e.isPublicVisible,
-      isSeatEnabled: e.isSeatEnabled,
-      keepOwnerOnSeat: e.keepOwnerOnSeat,
-      seatLayoutTemplateId: e.seatLayoutTemplateId,
-      maxSeatCount: e.maxSeatCount,
-      seatMode: e.seatMode,
-      coverUrl: e.coverUrl,
-      backgroundUrl: e.backgroundUrl,
-      categoryList: e.categoryList,
-      activityStatus: e.activityStatus
-    }));
-    if (!i)
-      throw new Error("[liveState createLive] create live failed");
-    S(i), s.value = l.NotStarted;
-  } catch (i) {
-    throw console.error("[liveState createLive] error", i), i;
-  }
-}, N = async ({ liveId: e }) => {
-  var t;
-  b.isLogin.value || await b.login(), console.log("[liveState joinLive] enter room", e);
-  const o = (t = r.instance) == null ? void 0 : t.getLiveListManager();
-  try {
-    await k(`GROUP${e}`);
-    const i = await (o == null ? void 0 : o.joinLive(e));
-    if (!i)
-      throw new Error("[liveState joinLive] join live failed");
-    S(i), s.value = l.Live;
-  } catch (i) {
-    throw console.error("[liveState joinLive] error", i), i;
-  }
-}, x = async () => {
-  var e, o;
-  try {
-    console.log("[liveState leaveLive] leave room"), await ((o = (e = r.instance) == null ? void 0 : e.getLiveListManager()) == null ? void 0 : o.leaveLive()), s.value = l.IDLE, a.value = { ...y };
-  } catch (t) {
-    throw console.error("[liveState leaveLive] error", t), t;
-  }
-}, j = async () => {
-  var e, o;
-  try {
-    console.log("[liveState endLive] destroy room"), await ((o = (e = r.instance) == null ? void 0 : e.getLiveListManager()) == null ? void 0 : o.stopLive()), a.value = { ...y }, s.value = l.IDLE;
-  } catch (t) {
-    throw console.error("[liveState endLive] error", t), t;
-  }
-}, p = async (e) => {
-  var o;
-  if (!a.value) {
-    a.value = { ...y, ...e };
-    return;
-  }
-  if (!a.value.liveId) {
-    Object.assign(a.value, { ...e });
-    return;
-  }
-  try {
-    console.log("[liveState updateLiveInfo]", JSON.stringify(e));
-    const t = (o = r.instance) == null ? void 0 : o.getLiveListManager(), i = {
-      roomId: e.liveId || a.value.liveId
-    };
-    e.activityStatus && (i.activityStatus = e.activityStatus), e.categoryList && (i.categoryList = e.categoryList), e.coverUrl && (i.coverUrl = e.coverUrl), e.backgroundUrl && (i.backgroundUrl = e.backgroundUrl), e.isPublicVisible && (i.isPublicVisible = e.isPublicVisible), e.layoutTemplate && (i.seatLayoutTemplateId = e.layoutTemplate), await (t == null ? void 0 : t.setLiveInfo(i));
-    const n = await (t == null ? void 0 : t.getLiveInfo({ roomId: i.roomId }));
-    if (!n)
-      throw new Error("[liveState updateLiveInfo] update live info failed");
-    S(n);
-  } catch (t) {
-    throw console.error("[liveState updateLiveInfo] error", t), t;
-  }
-}, A = async ({
-  category: e,
-  cursor: o = "",
-  count: t = 20
-}) => {
-  if (!r.instance) {
-    console.error("[liveState fetchLiveList] RoomEngine instance is not ready");
-    return;
-  }
-  try {
-    const i = r.instance.getLiveListManager();
-    if (!i)
-      throw console.error("[liveState fetchLiveList] get live list manager failed"), new Error("[liveState fetchLiveList] get live list manager failed");
-    const n = await i.fetchLiveList({
-      cursor: o,
-      count: t
-    }), v = n.liveInfoList.map((u) => E(u)), L = new Set(g.value.map((u) => u.liveId)), h = v.filter((u) => !L.has(u.liveId));
-    g.value = [...g.value, ...h], w.value = n.cursor;
-  } catch (i) {
-    throw console.error("[liveState fetchLiveList] error", i), i;
-  }
-}, F = async (e) => {
-  console.log("[liveState onRoomDismissed]", e), s.value = l.Ended, a.value = null, await U(), s.value = l.IDLE;
-}, K = ({ roomId: e, seatMode: o }) => {
-  a.value && a.value.liveId === e && (a.value.seatMode = o);
-}, B = ({ liveInfo: e, modifyFlag: o }) => {
-  if (console.log("[liveState onLiveInfoChanged]", e, o), !!a.value)
-    switch (o) {
-      case c.kActivityStatus:
-        break;
-      case c.kBackgroundUrl:
-        a.value.backgroundUrl = e.backgroundUrl;
-        break;
-      case c.kCategory:
-        break;
-      case c.kCoverUrl:
-        a.value.coverUrl = e.coverUrl;
-        break;
-      case c.kEnableGift:
-        a.value.isGiftEnabled = e.isGiftEnabled;
-        break;
-      case c.kEnableLike:
-        break;
-      case c.kNone:
-        break;
-      case c.kPublic:
-        a.value.isPublicVisible = e.isPublicVisible;
-        break;
-    }
-}, J = ({ roomId: e, seatLayout: o }) => {
-  var t;
-  e === ((t = a.value) == null ? void 0 : t.liveId) && a.value && (a.value.layoutTemplate = o.templateId);
-}, $ = () => {
-  s.value = l.IDLE, a.value = null;
-}, q = () => {
-  s.value = l.IDLE, a.value = null;
-}, z = [
-  { event: d.onRoomDismissed, handler: F },
-  { event: d.onKickedOutOfRoom, handler: $ },
-  { event: d.onKickedOffLine, handler: q },
-  {
-    event: d.onRoomSeatModeChanged,
-    handler: K
-  }
-], H = [
-  {
-    event: C.onLiveInfoChanged,
-    handler: B
-  }
-], Q = [
-  {
-    event: M.onSeatLayoutChanged,
-    handler: J
-  }
-], W = () => {
-  var t, i;
-  const e = (t = r.instance) == null ? void 0 : t.getLiveLayoutManager(), o = (i = r.instance) == null ? void 0 : i.getLiveListManager();
-  z.forEach(({ event: n, handler: v }) => {
-    var L;
-    (L = r.instance) == null || L.on(n, v);
-  }), e && Q.forEach(({ event: n, handler: v }) => {
-    e.on(n, v);
-  }), o && H.forEach(({ event: n, handler: v }) => {
-    o.on(n, v);
-  });
-};
-I(s, (e) => {
-  e === l.IDLE && k("");
-});
-T.once("ready", () => {
-  W();
-});
-function oe() {
-  return {
-    // 响应式数据
-    liveList: g,
-    currentCursor: w,
-    currentLive: a,
-    localLiveStatus: s,
-    // 操作接口
-    fetchLiveList: A,
-    createLive: G,
-    joinLive: N,
-    leaveLive: x,
-    endLive: j,
-    updateLiveInfo: p
-  };
-}
-export {
-  oe as default,
-  oe as useLiveState
-};

package/dist/states/VideoMixerState.js

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

package/src/components/BarrageList/Message/FaceMessage/FaceMessage.vue

@@ -1,43 +0,0 @@
-<template>
-  <div :class="cs('face-message')">
-    <img
-      :src="messageContent.url"
-      :alt="messageContent.name"
-    >
-  </div>
-</template>
-
-<script lang="ts" setup>
-import cs from 'classnames';
-import type { IMessageModel } from '@tencentcloud/chat-uikit-engine';
-
-interface IFaceMessageProps {
-  message: IMessageModel;
-}
-
-interface IFaceMessageContent {
-  /** sender show name */
-  showName: string;
-  /** face image name [yz00@2x] */
-  name: string;
-  /** face image type[duplicate] */
-  type: string;
-  /** face image url */
-  url: string;
-}
-
-const props = withDefaults(defineProps<IFaceMessageProps>(), {
-  message: () => ({} as IMessageModel),
-});
-
-const messageContent = props.message.getMessageContent() as IFaceMessageContent;
-</script>
-
-<style lang="scss" scoped>
-.face-message {
-  // Face message styles will be implemented here
-  width: 150px;
-  height: 150px;
-  padding: 10px;
-}
-</style>

package/src/components/BarrageList/Message/FaceMessage/index.ts

@@ -1,3 +0,0 @@
-import FaceMessage from './FaceMessage.vue';
-
-export { FaceMessage };

package/src/components/BarrageList/Message/GroupTipMessage/GroupTipMessage.vue

@@ -1,55 +0,0 @@
-<script lang="ts" setup>
-import { defineProps } from 'vue';
-import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
-import cs from 'classnames';
-import type { IMessageModel as MessageModel } from '@tencentcloud/chat-uikit-engine';
-
-interface GroupTipMessageProps {
-  message: MessageModel;
-}
-
-interface GroupTipMessageContent {
-  text: string;
-  businessID?: string;
-  showName?: string;
-}
-
-interface CustomMessageContent {
-  businessID?: string;
-  showName?: string;
-  custom?: string;
-}
-
-enum CustomMessageAsGroupTipEnum {
-  GROUP_CREATE = 'group_create',
-}
-
-const props = defineProps<GroupTipMessageProps>();
-
-const { t } = useUIKit();
-
-const messageContent = props.message.getMessageContent() as GroupTipMessageContent & CustomMessageContent;
-
-const renderText = () => {
-  switch (messageContent.businessID) {
-    case CustomMessageAsGroupTipEnum.GROUP_CREATE:
-      return `${messageContent.showName || ''} ${t('TUIChat.create group')}`;
-    default:
-      return messageContent.text;
-  }
-};
-</script>
-
-<template>
-  <div :class="cs('group-tip-message')">
-    {{ renderText() }}
-  </div>
-</template>
-
-<style lang="scss">
-.group-tip-message {
-  color: var(--text-color-secondary);
-  text-align: center;
-  font-size: 12px;
-}
-</style>

package/src/components/BarrageList/Message/GroupTipMessage/index.ts

@@ -1,3 +0,0 @@
-import GroupTipMessage from "./GroupTipMessage.vue";
-
-export { GroupTipMessage };