@trtc/calls-uikit-vue2 4.1.0

package/src/Components/components/common/DeviceSelect/DeviceSelect.vue

@@ -0,0 +1,158 @@
+<template>
+  <div class="device-selector-container">
+    <div class="scroll-container">
+      <div class="scroll-content">
+        <div v-for="device in deviceList" :key="device.deviceId">
+          <TKText
+            width="100%"
+            color="#ffff"
+            :truncated="true"
+            size="14px"
+            class="device-item"
+            :class="{ select: currentDeviceId === device.deviceId }"
+            @click="() => handleClickDeviceItem(device.deviceId)"
+          >
+          {{ device.label }}
+          </TKText>
+        </div>
+      </div>
+    </div>
+    <div class="control-item"></div>
+    <TKText
+      v-if="isShowControlBtn"
+      width="100%"
+      color="#ffff"
+      :truncated="true"
+      size="14px"
+      class="device-item"
+      @click="switchStatus" 
+    >
+      {{ deviceText }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { toRefs, computed } from '../../../../adapter-vue';
+import { TUICallKitAPI } from '../../../../TUICallService/index';
+import { DeviceType } from '../../../../TUICallService/const';
+import TKText from '../../base/TKText/TKText.vue';
+import { useDeviceList, usePopover, useUserInfoExcludeVolumeContext, useCallInfoContext, useTranslate } from '../../../hooks';
+import { DeviceSelectProps } from './DeviceSelect';
+
+const props = defineProps(DeviceSelectProps);
+const [{ deviceList, currentDeviceId }, { updateCurrentDeviceId }] = useDeviceList(props.deviceType);
+const { localUserInfoExcludeVolume: localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
+const { isMuteSpeaker } = toRefs(useCallInfoContext());
+const popoverValue = usePopover();
+const t = useTranslate();
+
+const handleClickDeviceItem = async (deviceId: string) => {
+  try {
+    updatePopover();
+    await TUICallKitAPI.switchDevice({
+      deviceType: props.deviceType,
+      deviceId,
+    });
+    updateCurrentDeviceId(deviceId);
+  } catch (err) {
+    console.debug(err);
+  }
+};
+const switchStatus = async () => {
+  updatePopover();
+  if (props.deviceType === DeviceType.CAMERA) {
+    if (localUserInfo.value?.isVideoAvailable) {
+      await TUICallKitAPI.closeCamera();
+    } else {
+      await TUICallKitAPI.openCamera('localVideo');
+    }
+  }
+
+  if (props.deviceType === DeviceType.MICROPHONE) {
+    if (localUserInfo.value?.isAudioAvailable) {
+      await TUICallKitAPI.closeMicrophone();
+    } else {
+      await TUICallKitAPI.openMicrophone();
+    }
+  }
+
+  if (props.deviceType === DeviceType.SPEAKER) {
+    if (isMuteSpeaker.value) {
+      await TUICallKitAPI.unMuteSpeaker();
+    } else {
+      await TUICallKitAPI.muteSpeaker();
+    }
+  }
+};
+const deviceText = computed(() => {
+  if (props.deviceType === DeviceType.CAMERA) {
+    return localUserInfo?.value.isVideoAvailable ? t.value('close camera') : t.value('open camera');
+  }
+  if (props.deviceType === DeviceType.MICROPHONE) {
+    return localUserInfo?.value?.isAudioAvailable ? t.value('close microphone') : t.value('open microphone');
+  }
+  if (props.deviceType === DeviceType.SPEAKER) {
+    return isMuteSpeaker.value ? t.value('open speaker') : t.value('close speaker');
+  }
+});
+
+const updatePopover = () => {
+  popoverValue.value = 'close';
+};
+</script>
+
+<style lang="scss" scoped>
+.device-selector-container {
+  width: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 6px;
+  font-weight: 500;
+
+  .device-item {
+    overflow: hidden;
+    padding: 5px 3px;
+    text-align: left;
+    line-height: 16px;
+    cursor: pointer;
+
+    &:hover {
+      border-radius: 5px;
+      background: #ffffff52;
+    }
+
+    &.select {
+      background-color: #0f101433;
+      border-radius: 3px;
+    }
+  }
+
+  .control-item {
+    width: 100%;
+    height: 1px;
+    background-color: #ffffff33;
+  }
+}
+
+.scroll-container {
+  width: 100%;
+  overflow: hidden;
+
+  .scroll-content {
+    max-height: 60px;
+    margin-right: -26px;
+    overflow: hidden auto;
+    padding-right: 20px;
+  }
+}
+</style>

package/src/Components/components/common/FloatWindow/FloatWindow.vue

@@ -0,0 +1,68 @@
+<template>
+  <div :class="floatWindowContainerClassName">
+    <!-- @if process.env.BUILD_TARGET!='MINI' -->
+    <FloatWindowPC v-if="TUIGlobal.isPC">
+      <slot />
+    </FloatWindowPC>
+    <!-- @endif -->
+    <FloatWindowMobile v-if="!TUIGlobal.isPC">
+      <slot />
+    </FloatWindowMobile>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, toRefs } from '../../../../adapter-vue';
+// @if process.env.BUILD_TARGET!='MINI'
+import FloatWindowPC from './desktop/FloatWindow.vue';
+// @endif
+import FloatWindowMobile from './mobile/FloatWindow.vue';
+import { TUIGlobal } from '../../../../TUICallService';
+import { classNames } from '../../base/util';
+import { useFloatWindowContext } from '../../../hooks';
+
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+
+const floatWindowContainerClassName = computed(() => classNames([
+  'float-window-container',
+  {
+    float: isFloatWindow.value,
+    'not-float': !isFloatWindow.value,
+    pc: TUIGlobal.isPC,
+    mobile: !TUIGlobal.isPC,
+  },
+]));
+
+</script>
+
+<style lang="scss" scoped>
+.float-window-container {
+  &.not-float {
+    width: 100%;
+    height: 100%;
+  }
+
+  &.float {
+    position: absolute;
+
+    &.pc {
+      top: 50px;
+      left: 50%;
+      transform: translateX(-50%);
+    }
+
+    &.mobile {
+      top: 150px;
+      right: 0;
+    }
+  }
+}
+</style>

package/src/Components/components/common/FloatWindow/desktop/FloatWindow.vue

@@ -0,0 +1,106 @@
+<template>
+  <div class="float-window-container">
+    <div v-show="isFloatWindow" class="float-control-panel">
+      <div  class="float-control-item-icon">
+      <div class="float-control-item-icon-container" @click="hangup">
+        <img :src="FloatCallEnd" />
+      </div>
+    </div>
+    <div v-show="isFloatWindow"  class="float-control-item-icon">
+      <div class="float-control-item-icon-container" @click="toggleMicrophone">
+        <img v-if="localUserInfo.isAudioAvailable" :src="FloatMicrophoneSVG" />
+        <img v-else :src="FloatMicrophoneClosedSVG" />
+      </div>
+    </div>
+    <div v-show="isFloatWindow"  class="float-control-item-icon">
+      <div class="float-control-item-icon-container" @click="toggleMinimize">
+        <img :src="FloatFullScreenSVG" />
+      </div>
+    </div>
+    </div>
+    <div v-show="!isFloatWindow">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { toRefs } from '../../../../../adapter-vue';
+import { TUICallKitAPI, CallRole, CallStatus } from '../../../../../TUICallService/index';
+import FloatCallEnd from '../../../../assets/desktop/floatCallEnd.svg';
+import FloatMicrophoneSVG from '../../../../assets/desktop/floatMicrophone.svg';
+import FloatMicrophoneClosedSVG from '../../../../assets/desktop/floatMicrophoneClosed.svg';
+import FloatFullScreenSVG from '../../../../assets/desktop/floatFullScreen.svg';
+import { useUserInfoExcludeVolumeContext, useCallInfoContext, useFloatWindowContext } from '../../../../hooks';
+const { localUserInfoExcludeVolume: localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
+const { callRole, callStatus } = toRefs(useCallInfoContext());
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+
+function toggleMinimize() {
+  TUICallKitAPI.toggleMinimize();
+};
+
+async function hangup() {
+  if (callRole.value === CallRole.CALLEE && callStatus.value === CallStatus.CALLING) {
+    await TUICallKitAPI.reject();
+  } else {
+    await TUICallKitAPI.hangup();
+  }
+};
+
+async function toggleMicrophone() {
+  if (localUserInfo.value.isAudioAvailable) {
+    await TUICallKitAPI.closeMicrophone();
+  } else {
+    await TUICallKitAPI.openMicrophone();
+  }
+};
+</script>
+
+<style scoped>
+.float-control-panel {
+  width: 168px;
+  height: 56px;
+  background: white;
+  z-index: 13;
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: center;
+  border-radius: 40px;
+  box-shadow: rgba(0, 0, 0, 0.16) 0px 3px 6px, rgba(0, 0, 0, 0.23) 0px 3px 6px;
+}
+
+.float-control-item-icon {
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+  width: 56px;
+  height: 56px;
+  position: relative;
+}
+
+.float-control-item-icon-container {
+  border-radius: 40px;
+  width: 40px;
+  height: 40px;
+  margin: 0.5rem;
+  cursor: pointer;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  align-items: center;
+}
+
+.float-control-item-icon-container:hover {
+  background: rgba(218, 218, 218, 0.3);
+}
+</style>

package/src/Components/components/common/FloatWindow/mobile/FloatWindow.vue

@@ -0,0 +1,28 @@
+<template>
+  <div id="float-window-id">
+    <FloatWindowSingleCall v-if="!isGroupCall">
+      <slot />
+    </FloatWindowSingleCall>
+    <FloatWindowGroupCall v-else>
+      <slot />
+    </FloatWindowGroupCall>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { toRefs } from '../../../../../adapter-vue';
+import FloatWindowSingleCall from './FloatWindowSingleCall.vue';
+import FloatWindowGroupCall from './FloatWindowGroupCall.vue';
+import { useCallInfoContext } from '../../../../hooks';
+
+const { isGroupCall } = toRefs(useCallInfoContext());
+
+</script>

package/src/Components/components/common/FloatWindow/mobile/FloatWindowGroupCall.vue

@@ -0,0 +1,141 @@
+<template>
+  <div :class="floatWindowClassName">
+    <div v-if="isFloatWindow" class="click-container" @click.capture.stop="closeFloatWindow" />
+    <div class="stream-container">
+      <div class="video">
+        <slot />
+      </div>
+      <div v-show="isFloatWindow" class="audio">
+        <TKImage width="36px" height="36px" :src="earphoneSrc" />
+        <Timer v-if="callStatus === CallStatus.CONNECTED" fontSize="12px" :callDuration="callDuration" color="#12b969" />
+        <TKText v-if="callStatus === CallStatus.CALLING" size="12px" color="#12b969">{{ t('wait to be called') }}</TKText>
+      </div>
+    </div>
+    <div v-show="isFloatWindow" class="device-status">
+      <TKImage width="16px" height="16px" :src="microphoneSrc" />
+      <TKImage width="16px" height="16px" :src="cameraSrc" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { toRefs, computed } from '../../../../../adapter-vue';
+import { TUICallKitAPI } from '../../../../../TUICallService';
+import TKImage from '../../../base/TKImage/TKImage.vue';
+import Timer from '../../Timer/Timer.vue';
+import TKText from '../../../base/TKText/TKText.vue';
+import {
+  useCallDuration,
+  useCallInfoContext,
+  useFloatWindowContext,
+  useUserInfoExcludeVolumeContext,
+  useTranslate,
+} from '../../../../hooks';
+import { classNames } from '../../../base/util/classNames';
+import { CallStatus } from '../../../../../TUICallService';
+import earphoneSrc from '../../../../assets/floatingWindow/mobile/earphone.svg';
+import microphoneOpenSrc from '../../../../assets/floatingWindow/mobile/microphone-open.svg';
+import cameraOpenSrc from '../../../../assets/floatingWindow/mobile/camera-open.svg';
+import microphoneCloseSrc from '../../../../assets/floatingWindow/mobile/microphone-close.svg';
+import cameraCloseSrc from '../../../../assets/floatingWindow/mobile/camera-close.svg';
+
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+const { callDuration } = useCallDuration();
+const { localUserInfoExcludeVolume } = toRefs(useUserInfoExcludeVolumeContext());
+const { callStatus } = toRefs(useCallInfoContext());
+const t = useTranslate();
+
+const microphoneSrc = computed(() => localUserInfoExcludeVolume.value.isAudioAvailable ? microphoneOpenSrc : microphoneCloseSrc);
+const cameraSrc = computed(() => localUserInfoExcludeVolume.value.isVideoAvailable ? cameraOpenSrc : cameraCloseSrc);
+
+const floatWindowClassName = computed(() => classNames([
+  'groupcall-video-float',
+  {
+    'not-float': !isFloatWindow.value,
+    float: isFloatWindow.value,
+   },
+]));
+
+function closeFloatWindow() {
+  isFloatWindow.value && TUICallKitAPI.toggleMinimize();
+}
+</script>
+
+<style lang="scss" scoped>
+.click-container {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 2;
+}
+.groupcall-video-float {
+  &.float {
+    width: 72px;
+    height: 90px;
+    display: flex;
+    flex-direction: column;
+    display: flex;
+    z-index: 99;
+    flex-direction: column;
+    align-items: center;
+    border-radius: 12px;
+    background: #FFF;
+    box-shadow: 0 0 10px #35394166;
+    box-sizing: border-box;
+    overflow: hidden;
+
+    .stream-container {
+      position: relative;
+      width: 72px;
+      height: 70px;
+    }
+
+    .video {
+      width: 72px;
+      height: 70px;
+      position: absolute;
+    }
+    .audio {
+      position: absolute;
+      width: 100%;
+      height: 70px;
+      padding-top: 10px;
+      background-color: #FFF;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+    }
+
+    .device-status {
+      width: 100%;
+      height: 20px;
+      background-color: #f9f6f4;
+      display: flex;
+      position: relative;
+      justify-content: space-around;
+    }
+  }
+
+  &.not-float {
+    width: 100%;
+    height: 100%;
+
+    .stream-container {
+      height: 100%;
+
+      .video {
+        height: 100%;
+      }
+    }
+  }
+  
+}
+</style>

package/src/Components/components/common/FloatWindow/mobile/FloatWindowSingleCall.vue

@@ -0,0 +1,109 @@
+<template>
+  <div :class="floatWindowClassName">
+    <div
+      v-show="!(isFloatWindow && callType === CallMediaType.AUDIO)"
+      class="singlecall-video-float-content"
+      @click="closeFloatWindow"
+    >
+      <slot></slot>
+      <div class="float-window-tip-container">
+        <TKText v-if="callStatus === CallStatus.CALLING && isFloatWindow" color="#FFF" size="12px">{{ t('wait to be called') }}</TKText>
+      </div>
+    </div>
+    <div
+      v-show="isFloatWindow && callType === CallMediaType.AUDIO"
+      class="singlecall-audio-float-content"
+      @click="closeFloatWindow"
+    >
+      <TKImage width="36px" height="36px" :src="earphoneSrc" />
+      <Timer v-if="callStatus === CallStatus.CONNECTED" fontSize="12px" :callDuration="callDuration" color="#12b969" />
+      <TKText v-if="callStatus === CallStatus.CALLING && isFloatWindow" color="#12b969" size="12px">{{ t('wait to be called') }}</TKText>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { toRefs, computed } from '../../../../../adapter-vue';
+import { TUICallKitAPI, CallMediaType, CallStatus } from '../../../../../TUICallService';
+import TKImage from '../../../base/TKImage/TKImage.vue';
+import Timer from '../../Timer/Timer.vue';
+import TKText from '../../../base/TKText/TKText.vue';
+import { useCallDuration, useCallInfoContext, useFloatWindowContext, useTranslate } from '../../../../hooks';
+import { classNames } from '../../../base/util/classNames';
+import earphoneSrc from '../../../../assets/floatingWindow/mobile/earphone.svg';
+
+const { callType, callStatus } = toRefs(useCallInfoContext());
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+const { callDuration } = useCallDuration();
+const t = useTranslate();
+
+const floatWindowClassName = computed(() => classNames([
+  'float-window-container',
+  {
+    'singlecall-video-float': callType.value === CallMediaType.VIDEO && isFloatWindow.value,
+    'singlecall-audio-float': callType.value === CallMediaType.AUDIO && isFloatWindow.value,
+  }
+]));
+
+function closeFloatWindow() {
+  isFloatWindow.value && TUICallKitAPI.toggleMinimize();
+}
+</script>
+
+<style lang="scss" scoped>
+.singlecall-video-float {
+  width: 110px;
+  height: 196px;
+  display: flex;
+  z-index: 99;
+  flex-direction: column;
+  align-items: center;
+  background: #000;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #35394166;
+  overflow: hidden;
+
+  .singlecall-video-float-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+
+  .float-window-tip-container {
+    position: absolute;
+    bottom: 8px;
+  }
+}
+
+.singlecall-audio-float {
+  width: 72px;
+  height: 72px;
+  display: flex;
+  z-index: 99;
+  flex-direction: column;
+  align-items: center;
+  background: #FFF;
+  border-radius: 12px;
+  box-shadow: 0 0 10px #35394166;
+
+  .singlecall-audio-float-content {
+    width: 100%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+  }
+}
+</style>

package/src/Components/components/common/JoinGroupCard/JoinGroupCard.vue

@@ -0,0 +1,51 @@
+<template>
+  <div v-show="isShow">
+    <JoinGroupCardPC v-if="isPC" :userListInfo="groupCallMembers" @joinGroupCall="handleClick"/>
+    <JoinGroupCardMobile v-else :userListInfo="groupCallMembers" @joinGroupCall="handleClick" />
+    <Message ref="message"></Message>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, ref, toRefs } from '../../../../adapter-vue';
+import { TUIGlobal, CallStatus, TUICallKitAPI, NAME, StoreName, TUIStore} from '../../../../TUICallService/index';
+import { useJoinGroupCall } from '../../../hooks/index';
+import Message from '../../base/Message/Message.vue';
+import JoinGroupCardPC from './desktop/JoinGroupCard.vue';
+import JoinGroupCardMobile from './mobile/JoinGroupCard.vue';
+
+const isPC = ref(TUIGlobal.isPC);
+const message = ref(null);
+const { groupId, roomId, roomIdType, callMediaType, groupCallMembers, callStatus, callId } = toRefs(useJoinGroupCall());
+const isShow = computed(() =>  groupId && callStatus?.value === CallStatus.IDLE && groupCallMembers.value.length );
+
+const handleClick = async () => {
+  if (groupCallMembers.value.length > 9) {
+    message.value.show({
+      message: 'Supports a maximum of 9 people for simultaneous calls',
+      type: 'success',
+    })
+    return;
+  }
+  if (TUIStore.getData(StoreName.CALL, NAME.IS_FORCE_USE_V2_API)) {
+    const joinGroupCallParams = {
+      type: callMediaType.value,
+      groupID: groupId.value,
+      roomID: roomIdType.value === 1 ? Number(roomId.value) : 0,
+      strRoomID: String(roomId.value),
+    }
+    try {
+      await TUICallKitAPI.joinInGroupCall(joinGroupCallParams);
+    } catch(error) {
+      console.error(`${NAME.PREFIX}joinInGroupCall fail: ${error}`);
+    }
+  } else {
+    const joinParams = { callId: callId.value };
+    try {
+      await TUICallKitAPI.join(joinParams);
+    } catch(error) {
+      console.error(`${NAME.PREFIX}join fail: ${error}`);
+    }
+  }
+}
+</script>