@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/common/Button/Minimize.vue

@@ -0,0 +1,39 @@
+<template>
+  <Button 
+    :iconSrc="config.iconSrc"
+    :iconSize="config.iconSize"
+    @click="handleClick"
+  >
+  </Button>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from '../../../../adapter-vue';
+import { TUICallKitAPI } from '../../../../TUICallService/index';
+import Button from '../../base/Button/Button.vue';
+import { useBtnConfig } from './hooks/useConfig';
+
+const config = useBtnConfig('minimize', ref('basicConfig'));
+const handleClick = async () => {
+  if (document?.fullscreenElement) {
+    try {
+      document?.exitFullscreen();
+    } catch (error) {
+      console.debug(error);
+    }
+  }
+  await TUICallKitAPI.toggleMinimize();
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

package/src/Components/components/common/Button/Reject.vue

@@ -0,0 +1,52 @@
+<template>
+  <div class="btn-content">
+    <Button
+      :iconSrc="config.iconSrc"
+      :color="config.color"
+      :iconSize="config.iconSize"
+      :width="props.width || config.width"
+      :height="props.height || config.height"
+      :shape="config.shape"
+      @click="handleClick"
+    >
+    </Button>
+    <TKText
+      v-if="config.showText"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ t('reject') }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from '../../../../adapter-vue';
+import { TUICallKitAPI } from '../../../../TUICallService/index';
+import Button from '../../base/Button/Button.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import { useBtnConfig } from './hooks/useConfig';
+import { useTranslate } from '../../../hooks';
+import { ButtonProps } from './props/Button';
+
+const props = defineProps(ButtonProps);
+const config = useBtnConfig('reject', ref('basicConfig'));
+const t = useTranslate();
+
+const handleClick = async () => {
+  await TUICallKitAPI.reject();
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

package/src/Components/components/common/Button/Speaker.vue

@@ -0,0 +1,98 @@
+<template>
+  <div class="btn-content">
+    <Popover
+      color="rgba(107, 117, 138, 0.5)"
+      :show="isShowPopover"
+      @hover="handleMouseEnter"
+      trigger="hover"
+    >
+      <template #content>
+        <DeviceSelect 
+          :isShowControlBtn="true"
+          :deviceType="DeviceType.SPEAKER">
+        </DeviceSelect>
+      </template>
+      <template #trigger>
+        <Button 
+          :iconSrc="config.iconSrc"
+          :color="config.color"
+          :iconSize="props.iconSize || config.iconSize"
+          :width="props.width || config.width"
+          :height="props.height || config.height"
+          :shape="config.shape"
+          @click="handleClick"
+        >
+        </Button>
+      </template>
+    </Popover>
+    <TKText
+      v-if="config.showText"
+      width="60px"
+      :truncated="true"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+      :lineClamp='2'
+    >
+      {{getButtonText()}}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, toRefs } from '../../../../adapter-vue';
+import { TUICallKitAPI, TUIGlobal } from '../../../../TUICallService/index';
+import { DeviceType } from '../../../../TUICallService/const';
+import Button from '../../base/Button/Button.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import Popover from '../../base/Popover/Popover.vue';
+import DeviceSelect from '../DeviceSelect/DeviceSelect.vue';
+import { useDeviceList } from '../../../hooks';
+import { useBtnConfig } from './hooks/useConfig';
+import { useTranslate } from '../../../hooks';
+import { ButtonProps } from './props/Button';
+import { useCallInfoContext, usePopover } from '../../../hooks';
+
+const isWeChat = TUIGlobal.isWeChat;
+const isPC = TUIGlobal.isPC;
+const props = defineProps(ButtonProps);
+const { isEarPhone, isMuteSpeaker } = toRefs(useCallInfoContext());
+const popoverValue = usePopover();
+const t = useTranslate();
+const wxConfigState = computed(() => (isEarPhone.value ? 'closedConfig' : 'basicConfig'));
+const webConfigState = computed(() => (isMuteSpeaker.value ? 'closedConfig' : 'basicConfig'));
+const [{ deviceList, currentDeviceId }] = useDeviceList(DeviceType.SPEAKER);
+const isShowPopover = computed(() => deviceList.value?.length > 0 && popoverValue.value === 'speaker' && isPC);
+const config = isWeChat ? useBtnConfig('speaker', wxConfigState) : useBtnConfig('speaker', webConfigState);
+const btnText = computed(() => (isEarPhone.value ? t.value('speaker disabled') : t.value('speaker enabled')));
+const handleClick = async () => {
+  if (isMuteSpeaker.value) {
+    await TUICallKitAPI.unMuteSpeaker();
+  } else {
+    await TUICallKitAPI.muteSpeaker();
+  }
+};
+const getButtonText = () => {
+  if (isPC) {
+    const result = deviceList.value.find(item => item.deviceId === currentDeviceId.value);
+    return result ? result.label : t.value('speaker enabled');
+  } else {
+    return isMuteSpeaker.value ? t.value('speaker disabled') : t.value('speaker enabled');
+  };
+};
+const handleMouseEnter = () => {
+  popoverValue.value = 'speaker';
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

package/src/Components/components/common/Button/SwitchCamera.vue

@@ -0,0 +1,58 @@
+<template>
+  <div class="btn-content">
+    <Button
+      :iconSrc="config.iconSrc"
+      :iconSize="config.iconSize"
+      :color="config.color"
+      :width="config.width"
+      :height="config.height"
+      :buttonStyle="config.buttonStyle"
+      shape="circle"
+      @click="handleClick"
+    >
+    </Button>
+    <TKText
+      v-if="config.showText"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ t('switch camera') }}
+    </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 Button from '../../base/Button/Button.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import { useBtnConfig } from './hooks/useConfig'
+import { useTranslate } from '../../../hooks';
+import { useUserInfoExcludeVolumeContext } from '../../../hooks';
+
+const { localUserInfoExcludeVolume : localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
+const isVideoAvailable = computed(() => localUserInfo?.value.isVideoAvailable);
+const configState = computed(() => {
+  return isVideoAvailable.value ? 'basicConfig' : 'disableConfig';
+});
+const config = useBtnConfig('switchCamera', configState);
+const t = useTranslate();
+
+const handleClick = async () => {
+  if(!isVideoAvailable.value) return
+  await TUICallKitAPI.switchCamera();
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

package/src/Components/components/common/Button/ToggleButtonPanel.vue

@@ -0,0 +1,44 @@
+<template>
+  <div class="btn-content">
+    <Button
+      :iconSrc="config.iconSrc"
+      :color="config.color"
+      :iconSize="props.iconSize || config.iconSize"
+      :width="props.width || config.width"
+      :height="props.height || config.height"
+      :shape="config.shape"
+      @click="handleClick"
+    >
+    </Button>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { ref } from '../../../../adapter-vue';
+import Button from '../../base/Button/Button.vue';
+import { ButtonProps } from './props/Button';
+import { useBtnConfig } from './hooks/useConfig';
+import { useButtonPanelStatus } from '../../../hooks';
+
+const { status: panelStatus } = useButtonPanelStatus();
+
+const props = defineProps(ButtonProps);
+const config = useBtnConfig('toggleButtonPanel', ref('basicConfig'));
+
+const handleClick = async () => {
+  panelStatus.value = panelStatus.value === 'close' ? 'open' : 'close';
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>
+

package/src/Components/components/common/Button/VirtualBackground.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="btn-content">
+    <Button
+      :loading="!clickAble"
+      :iconSrc="config.iconSrc"
+      :color="config.color"
+      :iconSize="props.iconSize || config.iconSize"
+      :width="props.width || config.width"
+      :height="props.height || config.height"
+      :shape="config.shape"
+      :loadingWidth="config.loadingWidth"
+      :loadingHeight="config.loadingHeight"
+      :buttonStyle="config.buttonStyle"
+      @click="handleClick"
+    >
+    </Button>
+    <TKText 
+      v-if="config.showText"
+      width="70px"
+      :lineClamp="2"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ t('virtual-background') }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, computed, toRefs } from '../../../../adapter-vue';
+import { TUICallKitAPI } from '../../../../TUICallService/index';
+import Button from '../../base/Button/Button.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import { ButtonProps } from './props/Button';
+import { useBtnConfig } from './hooks/useConfig';
+import { useCallInfoContext, useUserInfoExcludeVolumeContext, useTranslate } from '../../../hooks';
+
+const props = defineProps(ButtonProps);
+const clickAble = ref(true);
+const { localUserInfoExcludeVolume : localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
+const isVideoAvailable = computed(() => localUserInfo?.value.isVideoAvailable);
+const { enableVirtualBackground } = toRefs(useCallInfoContext());
+const configState = computed(() => {
+  if (!clickAble.value) {
+    return 'loadingConfig';
+  }
+
+  if (enableVirtualBackground.value) {
+    return 'closedConfig';
+  }
+
+  return isVideoAvailable.value ? 'basicConfig' : 'disableConfig';
+});
+const config = useBtnConfig('virtualBackground', configState);
+const t = useTranslate();
+const handleClick = async () => {
+  if(!isVideoAvailable.value) return
+  clickAble.value = false;
+  await TUICallKitAPI.setBlurBackground(!enableVirtualBackground.value);
+  clickAble.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>
+

package/src/Components/components/common/Button/hooks/useConfig.ts

@@ -0,0 +1,33 @@
+import { CallRole, CallStatus, TUIGlobal, CallMediaType } from '../../../../../TUICallService';
+import { watch, ref, toRefs, Ref } from '../../../../../adapter-vue';
+import { useButtonPanelStatus, useCallInfoContext } from '../../../../hooks';
+import { InitialUI, closedPanelUI, defaultButtonUI } from '../../../config/button/index';
+
+export const useBtnConfig = (type: string, state: Ref<string>) => {
+  const key1 = TUIGlobal.isPC ? 'pc' : 'mobile';
+  const { status: panelStatus } = useButtonPanelStatus();
+  const { callStatus, callRole, isGroupCall, callType } = toRefs(useCallInfoContext());
+  const btnConfig = ref(defaultButtonUI?.[type]?.[state.value]);
+
+  watch(
+    [state, panelStatus, callStatus, isGroupCall, callType],
+    () => {
+      const key2 = isGroupCall.value ? 'groupCall' : 'singleCall';
+      const key3 = callType.value === CallMediaType.AUDIO ? 'audio' : 'video';
+      let key4 = '';
+      if (callStatus.value === CallStatus.CALLING) {
+        key4 = callRole.value === CallRole.CALLER ? 'calling' : 'accept';
+      } else if (callStatus.value === CallStatus.CONNECTED) {
+        key4 = 'connected';
+      }
+      let config = InitialUI;
+      if (panelStatus.value === 'close') {
+        // @ts-ignore
+        config = closedPanelUI;
+      }
+      btnConfig.value = config?.[key1]?.[key2]?.[key3]?.[key4]?.[type]?.[state.value] || {};
+    },
+    { immediate: true },
+  );
+  return btnConfig;
+};

package/src/Components/components/common/Button/props/Button.ts

@@ -0,0 +1,15 @@
+export const ButtonProps = {
+  width: {
+    type: String,
+  },
+  height: {
+    type: String,
+  },
+  showText: {
+    type: Boolean,
+    default: true,
+  },
+  iconSize: {
+    type: String,
+  },
+};

package/src/Components/components/common/Button/style/common.scss

@@ -0,0 +1,5 @@
+.btn-content {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}

package/src/Components/components/common/Button/style/desktop.scss

@@ -0,0 +1,49 @@
+.btn-operate-desktop {
+  .call-operate {
+    display: flex;
+    flex-direction: column;
+    width: 40px;
+    height: 40px;
+    margin: 0 40px;
+    cursor: pointer;
+  }
+
+  .invite-calling-item-loading {
+    width: 40px;
+    height: 40px;
+    animation: rotation 2s linear infinite;
+  }
+
+  @keyframes rotation {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+
+  .invite-calling-item-loading img {
+    width: 100%;
+    height: 100%;
+  }
+
+  img {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+  }
+
+  span {
+    display: block;
+    margin-top: 5px;
+    white-space: nowrap;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 20px;
+    text-align: center;
+  }
+}

package/src/Components/components/common/Button/style/index.scss

@@ -0,0 +1,2 @@
+@import './mobile.scss';
+@import './desktop.scss';

package/src/Components/components/common/Button/style/mobile.scss

@@ -0,0 +1,63 @@
+.btn-operate-mobile {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+
+  .call-operate {
+    width: 50px;
+    height: 50px;
+    border-radius: 8vh;
+    margin: 0 5vw;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    .invite-calling-item-loading {
+      width: 40px;
+      height: 40px;
+      animation: rotation 2s linear infinite;
+    }
+
+    @keyframes rotation {
+      from {
+        transform: rotate(0deg);
+      }
+      to {
+        transform: rotate(360deg);
+      }
+    }
+
+    .invite-calling-item-loading img {
+      width: 100%;
+      height: 100%;
+    }
+
+    .operate-img {
+      width: 100%;
+      height: 100%;
+      background: none;
+
+      .hangup-img{
+        width: 100%;
+        height: 100%;
+      }
+    }
+
+    .switchAudioCall {
+      width: 6vw;
+      height: 3vh;
+    }
+  }
+
+  .call-switch .call-operate {
+    width: 4vh;
+    height: 3vh;
+  }
+
+  .operate-text {
+    margin: 6px 0px 6px 0px;
+  }
+}
+