tuikit-atomicx-vue3 0.1.0 → 3.3.0-beta.3

package/src/rtc/index.ts

@@ -0,0 +1,97 @@
+// Live related exports
+import { AudioSetting as AudioSettingComponent } from '../components/AudioSetting';
+import { AudioSettingPanel as AudioSettingPanelComponent } from '../components/AudioSettingPanel';
+import { BarrageInput as BarrageInputComponent } from '../components/BarrageInput';
+import { BarrageList as BarrageListComponent } from '../components/BarrageList';
+import { CameraButton as CameraButtonComponent } from '../components/CameraButton';
+import { CoGuestPanel as CoGuestPanelComponent } from '../components/CoGuestPanel';
+import { LiveAudienceList as LiveAudienceListComponent } from '../components/LiveAudienceList';
+import { LiveCoreView as LiveCoreViewComponent } from '../components/LiveCoreView';
+import { LiveList as LiveListComponent } from '../components/LiveList';
+import { LiveMonitorView as LiveMonitorViewComponent } from '../components/LiveMonitorView';
+import { LiveScenePanel as LiveScenePanelComponent } from '../components/LiveScenePanel';
+import { MicButton as MicButtonComponent } from '../components/MicButton';
+import { StreamMixer as StreamMixerComponent } from '../components/StreamMixer';
+import { StreamView as StreamViewComponent } from '../components/StreamView';
+import { VideoSetting as VideoSettingComponent } from '../components/VideoSetting';
+import { VideoSettingPanel as VideoSettingPanelComponent } from '../components/VideoSettingPanel';
+import { useBarrageListState as BarrageListState } from '../states/BarrageListState';
+import { useCoGuestState as CoGuestState } from '../states/CoGuestState';
+import { useCoHostState as CoHostState } from '../states/CoHostState';
+import { useDeviceState as DeviceState } from '../states/DeviceState';
+import { useLiveAudienceState as LiveAudienceState } from '../states/LiveAudienceState';
+import { useLiveMonitorState as LiveMonitorState } from '../states/LiveMonitorState';
+import { useLiveSeatState as LiveSeatState } from '../states/LiveSeatState';
+import { useLiveState as LiveState } from '../states/LiveState';
+import { useRoomState as RoomState } from '../states/RoomState';
+import { useUserState as UserState } from '../states/UserState';
+import { useVideoMixerState as VideoMixerState } from '../states/VideoMixerState';
+import { useRoomEngine as RoomEngine } from '../hooks/useRoomEngine';
+
+import RTCLoginServer from './server';
+
+RTCLoginServer.getInstance().init();
+
+const BarrageList = BarrageListComponent;
+const BarrageInput = BarrageInputComponent;
+const LiveCoreView = LiveCoreViewComponent;
+const StreamMixer = StreamMixerComponent;
+const LiveScenePanel = LiveScenePanelComponent;
+const LiveAudienceList = LiveAudienceListComponent;
+const CoGuestPanel = CoGuestPanelComponent;
+const AudioSettingPanel = AudioSettingPanelComponent;
+const VideoSettingPanel = VideoSettingPanelComponent;
+const MicButton = MicButtonComponent;
+const CameraButton = CameraButtonComponent;
+const LiveList = LiveListComponent;
+const LiveMonitorView = LiveMonitorViewComponent;
+const StreamView = StreamViewComponent;
+const AudioSetting = AudioSettingComponent;
+const VideoSetting = VideoSettingComponent;
+
+const useBarrageListState = BarrageListState;
+const useLiveMonitorState = LiveMonitorState;
+const useLiveSeatState = LiveSeatState;
+const useLiveState = LiveState;
+const useUserState = UserState;
+const useCoGuestState = CoGuestState;
+const useCoHostState = CoHostState;
+const useDeviceState = DeviceState;
+const useLiveAudienceState = LiveAudienceState;
+const useRoomState = RoomState;
+const useVideoMixerState = VideoMixerState;
+const useRoomEngine = RoomEngine;
+
+export {
+  // Components
+  BarrageList,
+  BarrageInput,
+  LiveCoreView,
+  StreamMixer,
+  LiveScenePanel,
+  LiveAudienceList,
+  CoGuestPanel,
+  AudioSettingPanel,
+  VideoSettingPanel,
+  MicButton,
+  CameraButton,
+  LiveList,
+  LiveMonitorView,
+  StreamView,
+  AudioSetting,
+  VideoSetting,
+
+  // States
+  useRoomEngine,
+  useLiveState,
+  useRoomState,
+  useUserState,
+  useDeviceState,
+  useVideoMixerState,
+  useLiveSeatState,
+  useCoGuestState,
+  useCoHostState,
+  useLiveAudienceState,
+  useLiveMonitorState,
+  useBarrageListState,
+};

package/src/rtc/server.ts

@@ -0,0 +1,119 @@
+import type { Ref } from 'vue';
+import { ref } from 'vue';
+import TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+import TUICore, { TUILogin, TUIConstants } from '@tencentcloud/tui-core';
+import TUIRoomEngine from '@tencentcloud/tuiroom-engine-js';
+import { useLoginState } from '../states/LoginState';
+
+export default class RTCLoginServer {
+  private static instance: RTCLoginServer;
+  private isReady = false;
+  private isEngineLoggingIn = false;
+  public isLogin: Ref<boolean> = ref(false);
+  private resolveList: any[] = [];
+  private rejectList: any[] = [];
+
+  constructor() {
+    this.init();
+  }
+
+  static getInstance() {
+    if (!RTCLoginServer.instance) {
+      RTCLoginServer.instance = new RTCLoginServer();
+    }
+    return RTCLoginServer.instance;
+  }
+
+  public init() {
+    if (!this.isReady) {
+      this.isReady = true;
+      TUICore.registerEvent(
+        TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED,
+        TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS,
+        this,
+      );
+    }
+  }
+
+  /**
+   * @param { TUIInitParam } params
+   */
+  public onNotifyEvent(eventName: string, subKey: string) {
+    if (eventName === TUIConstants.TUILogin.EVENT.LOGIN_STATE_CHANGED) {
+      switch (subKey) {
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGIN_SUCCESS:
+          this.login();
+          break;
+        case TUIConstants.TUILogin.EVENT_SUB_KEY.USER_LOGOUT_SUCCESS:
+          this.logout();
+          break;
+        default:
+          break;
+      }
+    }
+  }
+
+  public async login() {
+    const {
+      chat,
+      SDKAppID,
+      userID,
+      userSig,
+    } = TUILogin.getContext();
+    if (this.isEngineLoggingIn) {
+      return new Promise((resolve, reject) => {
+        this.resolveList.push(resolve);
+        this.rejectList.push(reject);
+      });
+    }
+
+    try {
+      this.isEngineLoggingIn = true;
+      await TUIChatEngine.login({
+        chat,
+        SDKAppID,
+        userID,
+        userSig,
+      });
+      const res = await TUIRoomEngine.login({
+        sdkAppId: SDKAppID,
+        userId: userID,
+        userSig,
+        tim: chat,
+      });
+      this.isLogin.value = true;
+      this.resolveList.forEach((resolve) => {
+        resolve();
+      });
+      this.rejectList = [];
+      this.resolveList = [];
+      const { loginUserInfo } = useLoginState();
+      const result = await chat.getUserProfile({ userIDList: [userID] });
+      const localUserInfo = result.data[0];
+      if (!localUserInfo.value) {
+        loginUserInfo.value = {
+          userId: localUserInfo.userID,
+          userName: localUserInfo.nick,
+          avatarUrl: localUserInfo.avatar,
+          customInfo: localUserInfo.profileCustomField,
+        };
+      }
+      return res;
+    } catch (error) {
+      this.rejectList.forEach((reject) => {
+        reject(error);
+      });
+      this.rejectList = [];
+      this.resolveList = [];
+      throw error;
+    } finally {
+      this.isEngineLoggingIn = false;
+    }
+  }
+
+  public logout() {
+    TUIRoomEngine.logout();
+    this.isLogin.value = false;
+    this.isEngineLoggingIn = false;
+  }
+}

package/src/types/contact.ts

@@ -0,0 +1,309 @@
+import type { GroupModel } from './engine';
+import type TUIChatEngine from '@tencentcloud/chat-uikit-engine';
+
+export type ContactItem = Friend
+  | GroupModel
+  | UserProfile
+  | FriendApplication
+  | GroupApplication;
+
+export enum ContactItemType {
+  FRIEND = 'friend',
+  BLACK = 'black',
+  GROUP = 'group',
+  FRIEND_REQUEST = 'friendRequest',
+  GROUP_REQUEST = 'groupRequest',
+  SEARCH_USER = 'searchUser',
+  SEARCH_GROUP = 'searchGroup',
+}
+
+export enum GroupApplicationType {
+  USER_JOIN_REQUEST = 0,
+  INVITE_MEMBER_REQUEST = 2,
+}
+
+export interface UserProfile {
+  userID: string;
+  nick: string;
+  gender: typeof TUIChatEngine.TYPES.GENDER_UNKNOWN
+    | typeof TUIChatEngine.TYPES.GENDER_FEMALE
+    | typeof TUIChatEngine.TYPES.GENDER_MALE;
+  birthday: number;
+  location: string;
+  selfSignature: string;
+  allowType: typeof TUIChatEngine.TYPES.ALLOW_TYPE_ALLOW_ANY
+
+    | typeof TUIChatEngine.TYPES.ALLOW_TYPE_NEED_CONFIRM
+    | typeof TUIChatEngine.TYPES.ALLOW_TYPE_DENY_ANY;
+  avatar: string;
+  adminForbidType: typeof TUIChatEngine.TYPES.FORBID_TYPE_NONE
+    | typeof TUIChatEngine.TYPES.FORBID_TYPE_SEND_OUT;
+}
+
+export interface Friend extends UserProfile {
+  remark: string;
+}
+
+export interface FriendApplication {
+  userID: string;
+  avatar: string;
+  nick: string;
+  time: number;
+  source: string;
+  wording: string;
+  type: typeof TUIChatEngine.TYPES.SNS_APPLICATION_SENT_TO_ME
+    | typeof TUIChatEngine.TYPES.SNS_APPLICATION_SENT_BY_ME;
+}
+
+export interface FriendGroup {
+  name: string;
+  friendList: Friend[];
+  count: number;
+}
+
+export interface Group {
+  groupID: string;
+  name: string;
+  avatar: string;
+  type: typeof TUIChatEngine.TYPES.GRP_WORK
+    | typeof TUIChatEngine.TYPES.GRP_PUBLIC
+    | typeof TUIChatEngine.TYPES.GRP_MEETING
+    | typeof TUIChatEngine.TYPES.GRP_AVCHATROOM
+    | typeof TUIChatEngine.TYPES.GRP_COMMUNITY;
+  introduction: string;
+  notification: string;
+  ownerID: string;
+  selfInfo: {
+    userID: string;
+    role: typeof TUIChatEngine.TYPES.GRP_MBR_ROLE_OWNER
+      | typeof TUIChatEngine.TYPES.GRP_MBR_ROLE_ADMIN
+      | typeof TUIChatEngine.TYPES.GRP_MBR_ROLE_MEMBER;
+    nameCard: string;
+    joinTime: number;
+  };
+  memberCount: number;
+  maxMemberCount: number;
+  muteAllMembers: boolean;
+  joinOption: typeof TUIChatEngine.TYPES.JOIN_OPTIONS_FREE_ACCESS
+    | typeof TUIChatEngine.TYPES.JOIN_OPTIONS_NEED_PERMISSION
+    | typeof TUIChatEngine.TYPES.JOIN_OPTIONS_DISABLE_APPLY;
+}
+
+export interface GroupApplication {
+  applicant: string;
+  applicantNick: string;
+  groupID: string;
+  groupName: string;
+  applicationType: GroupApplicationType;
+  userID: string;
+  note: string;
+}
+
+export interface GroupApplicationParams {
+  application: GroupApplication;
+  handleMessage?: string;
+}
+
+export interface AddFriendParams {
+  userID: string;
+  addSource: string;
+  remark?: string;
+  groupName?: string;
+  wording?: string;
+  type?: typeof TUIChatEngine.TYPES.SNS_ADD_TYPE_SINGLE
+    | typeof TUIChatEngine.TYPES.SNS_ADD_TYPE_BOTH;
+}
+
+export interface FriendApplicationParams {
+  userID: string;
+  remark?: string;
+  type: typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE
+    | typeof TUIChatEngine.TYPES.SNS_APPLICATION_AGREE_AND_ADD;
+}
+
+export interface DeleteFriendParams {
+  userIDList: string[];
+  type?: typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_SINGLE
+    | typeof TUIChatEngine.TYPES.SNS_DELETE_TYPE_BOTH;
+}
+
+export interface FriendRemarkParams {
+  userID: string;
+  remark: string;
+}
+
+export interface FriendGroupParams {
+  name: string;
+  userIDList: string[];
+}
+
+export interface RenameFriendGroupParams {
+  oldName: string;
+  newName: string;
+}
+
+export interface JoinGroupParams {
+  groupID: string;
+  applyMessage?: string;
+}
+
+export interface ContactGroupItem {
+  type: ContactItemType;
+  data: ContactItem;
+}
+
+export interface ContactGroup {
+  key: string;
+  type: ContactItemType;
+  title: string;
+  items: ContactItem[];
+  unreadCount?: number;
+  isExpanded: boolean;
+}
+
+export interface CustomGroupConfig {
+  title?: string;
+  hidden?: boolean;
+  order?: number;
+}
+
+export interface ContactGroupHeaderProps {
+  data: ContactGroup;
+  onClick: (event: MouseEvent) => void;
+}
+
+export interface ContactListProps {
+  activeContactItem?: ContactGroupItem;
+  enableSearch?: boolean;
+  groupConfig?: Partial<Record<ContactItemType, CustomGroupConfig>>;
+
+  searchPlaceholder?: string;
+  emptyText?: string;
+
+  ContactItem?: any;
+  ContactSearchComponent?: any;
+  GroupHeader?: any;
+  PlaceholderEmptyList?: any;
+
+  onContactItemClick?: (item: ContactGroupItem) => void;
+  onFriendApplicationAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+  onGroupApplicationAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+}
+
+export interface ContactInfoBaseProps {
+  showActions?: boolean;
+  onClose?: () => void;
+}
+
+export interface ContactInfoProps extends ContactInfoBaseProps {
+  contactItem?: ContactGroupItem | undefined;
+  PlaceholderEmpty?: any;
+  FriendInfoComponent?: any;
+  GroupInfoComponent?: any;
+  BlacklistInfoComponent?: any;
+  FriendApplicationInfoComponent?: any;
+  GroupApplicationInfoComponent?: any;
+  SearchGroupInfoComponent?: any;
+  SearchUserInfoComponent?: any;
+  onSendMessage?: (friend: Friend) => void;
+  onDeleteFriend?: (friend: Friend) => void;
+  onUpdateFriendRemark?: (friend: Friend, remark: string) => void;
+  onAddToBlacklist?: (friend: Friend) => void;
+  onRemoveFromBlacklist?: (profile: UserProfile) => void;
+  onEnterGroup?: (group: GroupModel) => void;
+  onLeaveGroup?: (group: GroupModel) => void;
+  onDismissGroup?: (group: GroupModel) => void;
+  onFriendApplicationAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+  onGroupApplicationAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+  onAddFriend?: (user: UserProfile, wording: string) => void;
+  onJoinGroup?: (group: GroupModel, note: string) => void;
+}
+
+export interface BlacklistInfoProps extends ContactInfoBaseProps {
+  profile: UserProfile;
+  onRemoveFromBlacklist?: (profile: UserProfile) => void;
+}
+
+export interface FriendApplicationInfoProps extends ContactInfoBaseProps {
+  application: FriendApplication;
+  onAccept?: (application: FriendApplication) => void;
+  onRefuse?: (application: FriendApplication) => void;
+}
+
+export interface FriendInfoProps extends ContactInfoBaseProps {
+  friend: Friend;
+  onSendMessage?: (friend: Friend) => void;
+  onDeleteFriend?: (friend: Friend) => void;
+  onAddToBlacklist?: (friend: Friend) => void;
+  onUpdateFriendRemark?: (friend: Friend, remark: string) => void;
+}
+
+export interface GroupApplicationInfoProps extends ContactInfoBaseProps {
+  application: GroupApplication;
+  onAccept?: (application: GroupApplication) => void;
+  onRefuse?: (application: GroupApplication) => void;
+}
+
+export interface GroupInfoProps extends ContactInfoBaseProps {
+  group: GroupModel;
+  onEnterGroup?: (group: GroupModel) => void;
+  onLeaveGroup?: (group: GroupModel) => void;
+  onDismissGroup?: (group: GroupModel) => void;
+}
+
+export interface SearchGroupInfoProps extends ContactInfoBaseProps {
+  group: GroupModel;
+  onJoinGroup?: (group: GroupModel, note: string) => void;
+}
+
+export interface SearchUserInfoProps extends ContactInfoBaseProps {
+  user: UserProfile;
+  onAddFriend?: (user: UserProfile, wording: string) => void;
+}
+
+export interface ContactListItemProps {
+  contactItem: ContactGroupItem;
+  activeContactItem?: ContactGroupItem | undefined;
+  onClick?: (type: ContactItemType, item: ContactItem) => void;
+  onFriendApplicationAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+  onGroupApplicationAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+}
+
+export interface BlacklistItemProps {
+  profile: UserProfile;
+  isActive?: boolean;
+  onClick?: (profile: UserProfile) => void;
+}
+
+export interface FriendApplicationItemProps {
+  application: FriendApplication;
+  isActive?: boolean;
+  onClick?: (application: FriendApplication) => void;
+  onAction?: (action: 'accept' | 'refuse', application: FriendApplication) => void;
+}
+
+export interface FriendItemProps {
+  friend: Friend;
+  isActive?: boolean;
+  onClick?: (friend: Friend) => void;
+}
+
+export interface GroupApplicationItemProps {
+  application: GroupApplication;
+  isActive?: boolean;
+  onClick?: (application: GroupApplication) => void;
+  onAction?: (action: 'accept' | 'refuse', application: GroupApplication) => void;
+}
+
+export interface GroupItemProps {
+  group: GroupModel;
+  isActive?: boolean;
+  onClick?: (group: GroupModel) => void;
+}
+
+export interface ContactSearchProps {
+  placeholder?: string;
+  autoFocus?: boolean;
+  onResultClick?: (item: ContactGroupItem) => void;
+  onKeywordChange?: (keyword: string) => void;
+}