tuikit-atomicx-vue3 3.3.3 → 3.4.1

package/src/components/ChatSetting/GroupChatSetting/GroupActions/GroupActions.vue

@@ -39,6 +39,7 @@
 
     <!-- Transfer Group Owner Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowTransferDialog"
       :title="t('ChatSetting.transfer_group_owner')"
       :custom-classes="['user-picker-dialog']"
@@ -62,6 +63,7 @@
 
     <!-- Dismiss Group Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowDismissDialog"
       :title="t('ChatSetting.dismiss_group')"
       @close="() => isShowDismissDialog = false"
@@ -71,6 +73,7 @@
 
     <!-- Quit Group Dialog -->
     <TUIDialog
+      appendTo="body"
       :visible="isShowQuitDialog"
       :title="t('ChatSetting.quit_group')"
       @close="() => isShowQuitDialog = false"

package/src/components/ChatSetting/GroupChatSetting/GroupChatSetting.vue

@@ -260,6 +260,7 @@ const userPickerDialogTitle = computed(() => {
       <PersonalSettings />
       <GroupActions />
       <TUIDialog
+        appendTo="body"
         :visible="isShowUserPickerDialog"
         :title="userPickerDialogTitle"
         :custom-classes="['user-picker-dialog']"

package/src/components/ChatSetting/GroupChatSetting/GroupManagement/GroupManagement.vue

@@ -63,6 +63,7 @@
 
     <!-- User Picker Dialog -->
     <TUIDialog
+      appendTo="body"
       :custom-classes="['user-picker-dialog']"
       :visible="isShowUserPickerDialog"
       :title="userPickerTitle"

package/src/components/CoGuestPanel/CoGuestPanel.vue

@@ -73,7 +73,8 @@
           <div class="user-list-title">
             <span class="user-list-title-text">{{ t('Current seat') }}</span>
             <span class="user-list-title-count">
-              {{ `(${userListInCoGuest.length}/${ seatList.length})` }}
+              {{ `(${userListInCoGuest.length})` }}
+              <!-- {{ `(${userListInCoGuest.length}/${ seatList.length})` }} -->
             </span>
           </div>
           <div class="user-list">

package/src/components/CoHostPanel/BattlePanel.vue

@@ -0,0 +1,271 @@
+<template>
+  <div id="AtomicxCoHostPanel" class="battle-panel">
+    <div v-if="currentBattleInfo?.battleId" class="battle-user-list">
+      <UserList :userList="battleUsers">
+        <template #user-actions="{ user }">
+          <div class="user-status">
+            {{ t('In battle') }}...
+          </div>
+        </template>
+      </UserList>
+    </div>
+    <RecommendHostList v-else class="recommend-host-list">
+      <template #host-item-actions="{ user }">
+        <TUIButton
+          v-if="!isUserInvited(user.userId, user.liveId)"
+          size="small"
+          type="primary"
+          @click="handleSendBattleRequest(user)"
+        >
+          {{ t('Invite battle') }}
+        </TUIButton>
+        <TUIButton
+          v-else
+          size="small"
+          color="gray"
+          @click="handleCancelBattleRequest(user)"
+        >
+          {{ t('Cancel invitation') }}
+        </TUIButton>
+      </template>
+    </RecommendHostList>
+  </div>
+  <div v-if="currentBattleInfo?.battleId" class="battle-panel-footer">
+    <TUIButton
+      type="primary"
+      :color="'red'"
+      @click="showExitCoHostDialog = true"
+    >
+      {{ t('End battle') }}
+    </TUIButton>
+  </div>
+  <TUIDialog
+    :visible="showExitCoHostDialog"
+    :showClose="false"
+    :modal="false"
+    :customClasses="['exit-co-host-dialog']"
+    @confirm="handleExitBattle"
+    @cancel="showExitCoHostDialog = false"
+  >
+    {{ t('Are you sure you want to exit the battle') }}
+    <template #footer>
+      <TUIButton
+        type="default"
+        color="gray"
+        @click="showExitCoHostDialog = false"
+      >
+        {{ t('Cancel') }}
+      </TUIButton>
+      <TUIButton
+        type="primary"
+        color="red"
+        @click="handleExitBattle"
+      >
+        {{ t('End battle') }}
+      </TUIButton>
+    </template>
+  </TUIDialog>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, onUnmounted } from 'vue';
+import { TUIConnectionCode, TUILiveBattleManagerEvents } from '@tencentcloud/tuiroom-engine-js';
+import { TUIButton, TUIToast, useUIKit, TOAST_TYPE, TUIDialog } from '@tencentcloud/uikit-base-component-vue3';
+import { useBattleState } from '../../states/BattleState';
+import { useCoHostState } from '../../states/CoHostState';
+import { useLoginState } from '../../states/LoginState';
+import { CoHostLayoutTemplate, CoHostEvent } from '../../types';
+import UserList from './UserList.vue';
+import RecommendHostList from './RecommendHostList.vue';
+import type { SeatUserInfo } from '../../types';
+import type { TUIBattleUser } from '@tencentcloud/tuiroom-engine-js';
+
+const { t } = useUIKit();
+const props = defineProps<{
+  battleDuration: number;
+  coHostLayoutTemplate: CoHostLayoutTemplate;
+}>();
+const { loginUserInfo } = useLoginState();
+const {
+  invitees,
+  requestHostConnection,
+  cancelHostConnection,
+  subscribeEvent: subscribeCoHostEvent,
+  unsubscribeEvent: unsubscribeCoHostEvent,
+} = useCoHostState();
+const {
+  currentBattleInfo,
+  battleUsers,
+  requestBattle,
+  exitBattle,
+  subscribeEvent: subscribeBattleEvent,
+  unsubscribeEvent: unsubscribeBattleEvent,
+} = useBattleState();
+
+const showExitCoHostDialog = ref(false);
+const isUserInvited = (userId: string, liveId: string) => invitees.value.some(user => user.userId === userId && user.liveId === liveId);
+
+const pkUserIds = new Set<string>();
+const handleSendBattleRequest = async (user: SeatUserInfo) => {
+  try {
+    const result = await requestHostConnection({
+      liveId: user.liveId,
+      layoutTemplate: props.coHostLayoutTemplate,
+      timeout: 10,
+      extensionInfo: JSON.stringify({
+        timeout: 10,
+        withBattle: true,
+      }),
+    });
+    switch (result.get(user.liveId)) {
+      case TUIConnectionCode.TUIConnectionCodeSuccess:
+        pkUserIds.add(user.userId);
+        TUIToast({ type: TOAST_TYPE.SUCCESS, message: t('Battle invitation sent to user', { userName: user.userName }) });
+        break;
+      case TUIConnectionCode.TUIConnectionCodeRoomNotExist:
+        TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed, Room not exist') });
+        break;
+      case TUIConnectionCode.TUIConnectionCodeConnecting:
+        TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed, Room is connecting') });
+        break;
+      case TUIConnectionCode.TUIConnectionCodeConnectingOtherRoom:
+        TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed, Room is connecting other room') });
+        break;
+      case TUIConnectionCode.TUIConnectionCodeFull:
+        TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed, Connected count is full') });
+        break;
+      case TUIConnectionCode.TUIConnectionCodeRetry:
+        TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed') });
+        break;
+      default:
+        break;
+    }
+  } catch (error) {
+    pkUserIds.delete(user.userId);
+    TUIToast({ type: TOAST_TYPE.ERROR, message: t('Send battle request failed') });
+    throw error;
+  }
+};
+
+const handleCancelBattleRequest = async (user: SeatUserInfo) => {
+  await cancelHostConnection({ liveId: user.liveId });
+  pkUserIds.delete(user.userId);
+};
+
+const handleExitBattle = () => {
+  if (currentBattleInfo.value?.battleId) {
+    exitBattle({ battleId: currentBattleInfo.value?.battleId });
+    showExitCoHostDialog.value = false;
+  }
+};
+
+const handleCoHostRequestAccepted = async ({ invitee }: { invitee: SeatUserInfo }) => {
+  if (!pkUserIds.has(invitee.userId)) {
+    return;
+  }
+  try {
+    await requestBattle({
+      config: {
+        duration: props.battleDuration,
+        needResponse: false,
+      },
+      userIdList: [invitee.userId],
+      timeout: 0,
+    });
+    pkUserIds.delete(invitee.userId);
+  } catch (error) {
+    TUIToast({ type: TOAST_TYPE.ERROR, message: t('Request battle failed') });
+    throw error;
+  }
+};
+
+const handleCoHostRequestCancelled = ({ inviter }: { inviter: SeatUserInfo }) => {
+  if (!pkUserIds.has(inviter.userId)) {
+    return;
+  }
+  pkUserIds.delete(inviter.userId);
+};
+
+const handleCoHostRequestRejected = ({ invitee }: { invitee: SeatUserInfo }) => {
+  if (!pkUserIds.has(invitee.userId)) {
+    return;
+  }
+  pkUserIds.delete(invitee.userId);
+  TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request rejected by user', { userName: invitee.userName }) });
+};
+
+const handleCoHostRequestTimeout = ({ inviter, invitee }: { inviter: SeatUserInfo; invitee: SeatUserInfo }) => {
+  if (inviter.userId === loginUserInfo.value?.userId && pkUserIds.has(invitee.userId)) {
+    pkUserIds.delete(invitee.userId);
+    TUIToast({ type: TOAST_TYPE.INFO, message: t('Battle request timeout for user', { userName: invitee.userName }) });
+  }
+};
+
+onMounted(() => {
+  subscribeCoHostEvent(CoHostEvent.onCoHostRequestAccepted, handleCoHostRequestAccepted);
+  subscribeCoHostEvent(CoHostEvent.onCoHostRequestCancelled, handleCoHostRequestCancelled);
+  subscribeCoHostEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
+  subscribeCoHostEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
+});
+
+onUnmounted(() => {
+  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestAccepted, handleCoHostRequestAccepted);
+  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestCancelled, handleCoHostRequestCancelled);
+  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestRejected, handleCoHostRequestRejected);
+  unsubscribeCoHostEvent(CoHostEvent.onCoHostRequestTimeout, handleCoHostRequestTimeout);
+});
+</script>
+
+<style lang="scss">
+.exit-co-host-dialog {
+  width: 300px;
+  border-radius: 16px;
+  border: 1px solid var(--stroke-color-module);
+  background: var(--bg-color-operate);
+  box-shadow: 0 1px 8px 0 var(---Black-5), 0 4px 12px 0 var(---Black-5), 0 10px 30px 0 var(---Black-5);
+}
+</style>
+
+<style scoped lang="scss">
+.battle-panel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  overflow: auto;
+}
+
+.battle-user-list {
+  flex: 1;
+  min-height: 0;
+  overflow: hidden;
+}
+
+.user-status {
+  color: var(--text-color-secondary);
+  font-size: 14px;
+  margin-right: 12px;
+}
+
+.recommend-host-list {
+  flex: 1;
+  min-height: 0;
+}
+
+.empty-state {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  align-self: center;
+  flex: 1;
+  color: var(--text-color-secondary);
+  min-height: 60px;
+}
+
+.battle-panel-footer {
+  display: flex;
+  gap: 12px;
+  justify-content: right;
+  align-items: center;
+  padding: 20px 0 0 0;
+}
+</style>

package/src/components/CoHostPanel/CoHostPanel.vue

@@ -0,0 +1,218 @@
+<template>
+  <TUIDialog
+    :title="title"
+    :visible="props.visible"
+    :custom-classes="['co-host-dialog']"
+    @close="close"
+    @confirm="close"
+    @cancel="close"
+  >
+    <template #header>
+      <div class="dialog-header">
+        <span class="dialog-title">{{ title }}</span>
+        <div class="icon-buttons">
+          <IconLiveSetting
+            v-if="!inPk && !inConnection"
+            class="icon-button"
+            size="20"
+            @click="settingVisible = true"
+          />
+          <IconClose class="icon-button" @click="close" />
+        </div>
+      </div>
+    </template>
+    <div class="panel-content">
+      <div v-if="!inConnection && !inPk" class="panel-header">
+        <div class="tabs">
+          <span :class="['tab-item', { active: activeTab === 'battleTab' }]" @click="activeTab = 'battleTab'">
+            {{ t('Host Battle') }}
+          </span>
+          <span :class="['tab-item', { active: activeTab === 'coHostTab' }]" @click="activeTab = 'coHostTab'">
+            {{ t('Host Connection') }}
+          </span>
+        </div>
+      </div>
+      <div class="panel-body">
+        <div v-show="activeTab === 'battleTab'" class="battle-content">
+          <BattlePanel :battle-duration="configForm.battleDuration" :coHostLayoutTemplate="configForm.coHostLayoutTemplate" />
+        </div>
+        <div v-show="activeTab === 'coHostTab'" class="coHost-content">
+          <ConnectionPanel :battleDuration="configForm.battleDuration" :coHostLayoutTemplate="configForm.coHostLayoutTemplate" />
+        </div>
+      </div>
+    </div>
+    <template #footer>
+      <div />
+    </template>
+    <ConfigSettingPanel
+      v-model:visible="settingVisible"
+      :form="configForm"
+      @confirm="handleSettingConfirm"
+    />
+  </TUIDialog>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from 'vue';
+import { useUIKit, TUIDialog, IconClose, IconLiveSetting } from '@tencentcloud/uikit-base-component-vue3';
+import { useBattleState } from '../../states/BattleState';
+import { useCoHostState } from '../../states/CoHostState';
+import { CoHostStatus, CoHostLayoutTemplate } from '../../types';
+import BattlePanel from './BattlePanel.vue';
+import ConfigSettingPanel from './ConfigSettingPanel.vue';
+import ConnectionPanel from './ConnectionPanel.vue';
+
+const { t } = useUIKit();
+const props = defineProps<{
+  visible: boolean;
+}>();
+const { coHostStatus } = useCoHostState();
+const { currentBattleInfo } = useBattleState();
+const emit = defineEmits(['update:visible']);
+const close = () => {
+  emit('update:visible', false);
+};
+const activeTab = ref('battleTab');
+const settingVisible = ref(false);
+const inConnection = computed(() => coHostStatus.value === CoHostStatus.Connected);
+const inPk = computed(() => currentBattleInfo.value?.battleId !== undefined);
+
+const title = computed(() => {
+  if (inPk.value) {
+    return t('Anchor battling...');
+  }
+
+  if (inConnection.value) {
+    return t('Anchor connecting...');
+  }
+  return t('CoHost');
+});
+
+const configForm = ref({
+  battleDuration: 5 * 60,
+  coHostLayoutTemplate: CoHostLayoutTemplate.HostDynamicGrid,
+});
+
+const handleSettingConfirm = (form: {
+  battleDuration: number;
+  coHostLayoutTemplate: CoHostLayoutTemplate;
+}) => {
+  configForm.value = form;
+};
+
+watch(inPk, (newVal, oldVal) => {
+  if (newVal) {
+    emit('update:visible', false);
+    activeTab.value = 'battleTab';
+  }
+  if (newVal !== oldVal && !newVal) {
+    activeTab.value = 'coHostTab';
+  }
+}, {
+  immediate: true,
+});
+</script>
+
+<style lang="scss" scoped>
+.dialog-header {
+  display: flex;
+  align-items: center;
+  padding: 0;
+  width: 100%;
+  justify-content: space-between;
+
+  .dialog-title {
+    font-size: 16px;
+    line-height: 24px;
+    font-weight: 600;
+    color: var(--text-color-primary);
+  }
+  .icon-buttons {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+  }
+  .icon-button {
+    cursor: pointer;
+  }
+}
+.panel-content {
+  position: relative;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  min-height: 200px;
+  max-height: 530px;
+
+  .panel-header {
+    display: flex;
+    align-items: center;
+
+    .tabs {
+      display: flex;
+      gap: 24px;
+      flex-grow: 1;
+
+      .tab-item {
+        background: none;
+        border: none;
+        color: var(--text-color-secondary);
+        font-size: 16px;
+        padding: 12px 0;
+        cursor: pointer;
+        position: relative;
+        transition: color 0.3s ease;
+        user-select: none;
+
+        &.active {
+          color: var(--text-color-link);
+          font-weight: 500;
+
+          &::after {
+            content: '';
+            position: absolute;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            height: 3px;
+            background-color: var(--text-color-link);
+            border-radius: 1.5px;
+          }
+        }
+      }
+    }
+  }
+
+  .panel-body {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: auto;
+
+    &::-webkit-scrollbar {
+      width: 4px;
+    }
+
+    &::-webkit-scrollbar-thumb {
+      background: #414756;
+      border-radius: 2px;
+    }
+  }
+}
+
+.battle-content,
+.coHost-content {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+
+:deep(.co-host-dialog) {
+  width: 520px;
+}
+</style>