@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/base/util/checkEnv.ts

@@ -0,0 +1,51 @@
+// eslint-disable-next-line
+declare var wx: any;
+// eslint-disable-next-line
+declare var uni: any;
+// eslint-disable-next-line
+declare var window: any;
+
+// 在 uniApp 框架下，打包 H5、ios app、android app 时存在 wx/qq/tt/swan/my 等变量会导致引入 web sdk 环境判断失效
+// 小程序 getSystemInfoSync 返回的 fontSizeSetting 在 H5 和 app 中为 undefined，所以通过 fontSizeSetting 增强小程序环境判断
+// wx 小程序
+export const IN_WX_MINI_APP = (typeof wx !== 'undefined' && typeof wx.getSystemInfoSync === 'function' && Boolean(wx.getSystemInfoSync().fontSizeSetting));
+
+// 用 uni-app 打包 native app，此时运行于 js core，无 window 等对象，此时调用 api 都得 uni.xxx，由于风格跟小程序类似，就归为 IN_MINI_APP 的一种
+export const IN_UNI_NATIVE_APP = (typeof uni !== 'undefined' && typeof uni === 'undefined');
+
+export const IN_MINI_APP = IN_WX_MINI_APP || IN_UNI_NATIVE_APP;
+
+export const IN_UNI_APP = (typeof uni !== 'undefined');
+
+// 在 uniApp 框架下，由于客户打包 ios app、android app 时 window 不一定存在，所以通过 !IN_MINI_APP 进行判断
+// 非 uniApp 框架下，仍然通过 window 结合 IN_MINI_APP 进行判断，可兼容 Taro3.0+ 暴露 window 对象引起的 IN_BROWSER 判断失效问题
+export const IN_BROWSER = (function () {
+  if (typeof uni !== 'undefined') {
+    return !IN_MINI_APP;
+  }
+  return (typeof window !== 'undefined') && !IN_MINI_APP;
+}());
+
+// 命名空间
+export const APP_NAMESPACE = (function () {
+  if (IN_WX_MINI_APP) {
+    return wx;
+  }
+  if (IN_UNI_APP) {
+    return uni;
+  }
+  return window;
+}());
+
+// eslint-disable-next-line no-mixed-operators
+const USER_AGENT = IN_BROWSER && window && window.navigator && window.navigator.userAgent || '';
+const IS_ANDROID = /Android/i.test(USER_AGENT);
+const IS_WIN_PHONE = /(?:Windows Phone)/.test(USER_AGENT);
+const IS_SYMBIAN = /(?:SymbianOS)/.test(USER_AGENT);
+const IS_IOS = /iPad/i.test(USER_AGENT) || /iPhone/i.test(USER_AGENT) || /iPod/i.test(USER_AGENT);
+
+export const IS_H5 = IS_ANDROID || IS_WIN_PHONE || IS_SYMBIAN || IS_IOS;
+
+export const IS_PC = IN_BROWSER && !IS_H5;
+export const IS_WIN = IS_PC && USER_AGENT.includes('Windows NT');
+export const IS_MAC = IS_PC && USER_AGENT.includes('Mac');

package/src/Components/components/base/util/checkVueVersion.ts

@@ -0,0 +1,11 @@
+import { version } from '../../../../adapter-vue';
+
+export function checkVueVersion() {
+  let majorVersion = 'unknow';
+
+  if (typeof version === 'string') {
+    majorVersion = version.split('.')[0];
+  }
+
+  return { version, majorVersion };
+}

package/src/Components/components/base/util/classNames.ts

@@ -0,0 +1,34 @@
+export function classNames(...rest) {
+  const classes = [];
+  const hasOwn = {}.hasOwnProperty;
+  for (let i = 0; i < rest.length; i++) {
+    const arg = rest[i];
+    if (!arg) continue;
+
+    const argType = typeof arg;
+
+    if (argType === 'string' || argType === 'number') {
+      classes.push(arg);
+    } else if (Array.isArray(arg)) {
+      if (arg.length) {
+        const inner = classNames.apply(null, arg);
+        if (inner) {
+          classes.push(inner);
+        }
+      }
+    } else if (argType === 'object') {
+      if (arg.toString !== Object.prototype.toString && !arg.toString.toString().includes('[native code]')) {
+        classes.push(arg.toString());
+        continue;
+      }
+
+      for (const key in arg) {
+        if (hasOwn.call(arg, key) && arg[key]) {
+          classes.push(key);
+        }
+      }
+    }
+  }
+
+  return classes.join(' ');
+}

package/src/Components/components/base/util/filterObject.ts

@@ -0,0 +1,11 @@
+export function filterObject(obj) {
+  const filteredObj = {};
+
+  for (const key in obj) {
+    if (Object.prototype.hasOwnProperty.call(obj, key) && obj[key] !== undefined) {
+      filteredObj[key] = obj[key];
+    }
+  }
+
+  return filteredObj;
+}

package/src/Components/components/base/util/index.ts

@@ -0,0 +1,10 @@
+export * from './classNames';
+export * from './checkEnv';
+export * from './filterObject';
+
+export function findTarget(obj, options) {
+  const { key, value } = options;
+
+  return obj.find((item) => item[key] === value);
+}
+export * from './checkVueVersion';

package/src/Components/components/common/AudioStream/AudioStream.ts

@@ -0,0 +1,29 @@
+export const AudioStreamProps = {
+  avatar: {
+    type: String,
+  },
+  username: {
+    type: String,
+  },
+  isVideoAvailable: {
+    type: Boolean,
+  },
+  showStreamInfo: {
+    type: Boolean,
+  },
+  isSmallWindow: {
+    type: Boolean,
+    default: false,
+  },
+  isMuted: {
+    type: Boolean,
+    default: true,
+  },
+  volume: {
+    type: Number,
+    default: 0,
+  },
+  userId: {
+    type: String,
+  },
+};

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

@@ -0,0 +1,65 @@
+<template>
+  <OverlayStream
+    :avatar="avatar"
+    :bg-image="bgImage"
+    :show-avatar="showAvatar"
+    :username="username"
+    :show-user-name="showUserName"
+    :show-mask="!isGroupCall && showViewMask"
+    :fit="fit"
+    :blur="!isGroupCall"
+    :show-mic-volume="showMicVolume"
+    :show-tip="!isGroupCall && !isFloatWindow"
+    :custom-style="audioStreamStyle"
+    :is-small-window="isSmallWindow"
+    :is-muted="isMuted"
+    :volume="volume"
+    bg-color="rgba(0, 0, 0, 0.5)"
+    @error="handleError"
+  />
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { toRefs, computed, ref, watch } from '../../../../adapter-vue';
+import { CallMediaType, TUIGlobal } from '../../../../TUICallService';
+import OverlayStream from '../OverlayStream/OverlayStream.vue';
+import { useCallInfoContext, useFloatWindowContext, useViewBackgroundConfig } from '../../../hooks';
+import { AudioStreamProps } from './AudioStream';
+
+const props = defineProps(AudioStreamProps);
+const viewBackgroundConfigObj = useViewBackgroundConfig();
+const { callType, isGroupCall } = toRefs(useCallInfoContext());
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+const showAvatar = computed(() => !isGroupCall.value && !TUIGlobal.isPC);
+const showUserName = computed(() => isGroupCall.value ? TUIGlobal.isPC : callType.value === CallMediaType.AUDIO);
+const showMicVolume = computed(() => !isGroupCall.value && TUIGlobal.isPC && callType.value === CallMediaType.AUDIO);
+const audioStreamStyle = computed(() => ({ zIndex: 1 }));
+const bgImage = computed(() => viewBackgroundConfigObj.value[props.userId] || props.avatar);
+const showViewMask = ref<boolean>(!viewBackgroundConfigObj.value[props.userId]);
+const fit = ref<string>(viewBackgroundConfigObj.value[props.userId] ? 'fill' : 'cover');
+
+watch([() => props.userId, viewBackgroundConfigObj], () => {
+  if (viewBackgroundConfigObj.value[props.userId]) {
+    fit.value = 'fill';
+    showViewMask.value = false;
+  } else {
+    fit.value = 'cover';
+    showViewMask.value = true;
+  }
+}, {
+  immediate: true,
+})
+
+const handleError = () => {
+  showViewMask.value = true;
+  fit.value = 'cover';
+};
+</script>

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

@@ -0,0 +1,66 @@
+<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"
+      :loading="!clickAble"
+      :loadingWidth="config.loadingWidth"
+      :loadingHeight="config.loadingHeight"
+      @click="handleClick"
+    >
+    </Button>
+    <TKText 
+      v-if="config.showText"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ t('accept') }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, computed } 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 { useTranslate } from '../../../hooks';
+
+const clickAble = ref(true);
+const props = defineProps(ButtonProps);
+const configState = computed(() => {
+  if (!clickAble.value) {
+    return 'loadingConfig';
+  }
+
+  return 'basicConfig';
+});
+const config = useBtnConfig('accept', configState);
+const t = useTranslate();
+
+const handleClick = async () => {
+  clickAble.value = false;
+  await TUICallKitAPI.accept();
+  clickAble.value = true;
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>
+

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

@@ -0,0 +1,115 @@
+<template>
+  <div class="btn-content">
+    <Popover 
+      v-if="isPC"
+      color="rgba(107, 117, 138, 0.5)"
+      :show="isShowPopover"
+      @hover="handleMouseEnter"
+      trigger="hover"
+    >
+      <template #content>
+        <DeviceSelect 
+          :isShowControlBtn='true'
+          :deviceType="DeviceType.CAMERA"/>
+      </template>
+      <template #trigger>
+        <Button 
+          :loading="!clickAble"
+          :iconSrc="config.iconSrc"
+          :color="config.color"
+          :iconSize="config.iconSize"
+          :width="props.width || config.width"
+          :height="props.height || config.height"
+          :loadingWidth="config.loadingWidth"
+          :loadingHeight="config.loadingHeight"
+          :shape="config.shape"
+          @click="handleClick"
+        >
+        </Button>
+      </template>
+    </Popover>
+    <Button
+      v-if='!isPC'
+      :loading="!clickAble"
+      :iconSrc="config.iconSrc"
+      :color="config.color"
+      :iconSize="props.iconSize || config.iconSize"
+      :width="props.width || config.width"
+      :height="props.height || config.height"
+      :loadingWidth="config.loadingWidth"
+      :loadingHeight="config.loadingHeight"
+      shape="circle"
+      @click="handleClick"
+    >
+    </Button>
+    <TKText
+      v-if="config.showText" 
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ btnText }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, toRefs, ref } 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 { useUserInfoExcludeVolumeContext, usePopover } from '../../../hooks';
+import { ButtonProps } from './props/Button';
+import { useBtnConfig } from './hooks/useConfig'
+import { useTranslate } from '../../../hooks/useTranslate';
+
+const t = useTranslate();
+const props = defineProps(ButtonProps);
+const clickAble = ref(true);
+const isPC = TUIGlobal.isPC;
+const { localUserInfoExcludeVolume : localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
+const targetVideoAvailable = ref(localUserInfo?.value.isVideoAvailable);
+const isVideoAvailable = computed(() => localUserInfo?.value.isVideoAvailable);
+const popoverValue = usePopover();
+const [{ deviceList }] = useDeviceList(DeviceType.CAMERA);
+const isShowPopover = computed(() => deviceList.value?.length > 0 && popoverValue.value === 'camera');
+const configState = computed(() => {
+  if (!clickAble.value) {
+    return 'loadingConfig';
+  }
+
+  return isVideoAvailable.value ? 'basicConfig' : 'closedConfig';
+});
+const btnText = computed(() => (localUserInfo?.value.isVideoAvailable ? t.value('camera enabled') : t.value('camera disabled')));
+const config = useBtnConfig('camera', configState);
+
+const handleClick = async () => {
+  clickAble.value = false;
+  targetVideoAvailable.value = !isVideoAvailable.value;
+  if (isVideoAvailable.value) {
+    await TUICallKitAPI.closeCamera();
+  } else {
+    await TUICallKitAPI.openCamera('localVideo');
+  }
+  clickAble.value = true;
+};
+const handleMouseEnter = () => {
+  popoverValue.value = 'camera';
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

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

@@ -0,0 +1,32 @@
+<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 { toggleScreen } from '../../../util';
+import Button from '../../base/Button/Button.vue';
+import { useBtnConfig } from './hooks/useConfig'
+
+const config = useBtnConfig('fullScreen', ref('basicConfig'));
+const handleClick = async () => {
+  await toggleScreen('tuicallkit-id');
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="btn-content">
+    <Button
+      :loading="!isClickable"
+      :loadingWidth="config.loadingWidth"
+      :loadingHeight="config.loadingHeight"
+      :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"
+    />
+    <TKText
+      v-if="config.showText"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ t('hangup') }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { computed } 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 { useIsClickableContext, useTranslate } from '../../../hooks';
+
+const props = defineProps(ButtonProps);
+const isClickable = useIsClickableContext();
+
+const hangupState = computed(() => isClickable.value ? 'basicConfig' : 'loadingConfig');
+const config = useBtnConfig('hangup', hangupState);
+const t = useTranslate();
+
+const handleClick = async () => {
+  await TUICallKitAPI.hangup();
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

package/src/Components/components/common/Button/InviteUser.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="showText"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ t('invite member') }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { ref, watch } from '../../../../adapter-vue';
+import { TUIStore, StoreName, NAME } 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 { useTranslate } from '../../../hooks';
+
+const props = defineProps(ButtonProps);
+const config = useBtnConfig('inviteUser', ref('basicConfig'));
+const t = useTranslate();
+
+const handleClick = async () => {
+  TUIStore.update(StoreName.CALL, NAME.SHOW_SELECT_USER, true);
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>

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

@@ -0,0 +1,109 @@
+<template>
+  <div class="btn-content">
+    <Popover 
+      v-if="isPC"
+      color="rgba(107, 117, 138, 0.5)"
+      :show="isShowPopover"
+      @hover="handleMouseEnter"
+      trigger="hover"
+    >
+      <template #content>
+        <DeviceSelect
+          :isShowControlBtn='true'
+          :deviceType="DeviceType.MICROPHONE"/>
+      </template>
+      <template #trigger>
+        <Button 
+          :loading="!clickAble"
+          :iconSrc="config.iconSrc"
+          :color="config.color"
+          :iconSize="config.iconSize"
+          :width="config.width"
+          :height="config.height"
+          :loadingWidth="config.loadingWidth"
+          :loadingHeight="config.loadingHeight"
+          :shape="config.shape"
+          @click="handleClick"
+        >
+        </Button>
+      </template>
+    </Popover>
+    <Button
+      v-if="!isPC"
+      :loading="!clickAble"
+      :iconSrc="config.iconSrc"
+      :color="config.color"
+      :iconSize="config.iconSize"
+      :width="config.width"
+      :height="config.height"
+      :loadingWidth="config.loadingWidth"
+      :loadingHeight="config.loadingHeight"
+      :shape="config.shape"
+      @click="handleClick"
+    >
+    </Button>
+    <TKText
+      v-if="config.showText"
+      :textStyle="config.textStyle"
+      :color="config.textColor"
+      :size="config.textSize"
+    >
+      {{ btnText }}
+    </TKText>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { computed, toRefs, ref } 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 { useUserInfoExcludeVolumeContext, usePopover } from '../../../hooks';
+import { ButtonProps } from './props/Button';
+import { useBtnConfig } from './hooks/useConfig'
+import { useTranslate } from '../../../hooks';
+
+defineProps(ButtonProps);
+const isPC = TUIGlobal.isPC;
+const clickAble = ref(true);
+const { localUserInfoExcludeVolume : localUserInfo } = toRefs(useUserInfoExcludeVolumeContext());
+const popoverValue = usePopover();
+const [{ deviceList }] = useDeviceList(DeviceType.MICROPHONE);
+const isShowPopover = computed(() => deviceList.value?.length > 0 && popoverValue.value === 'microphone');
+const configState = computed(() => {
+  if (!clickAble.value) {
+    return 'loadingConfig';
+  }
+
+  return localUserInfo?.value.isAudioAvailable ? 'basicConfig' : 'closedConfig';
+});
+const config = useBtnConfig('microphone', configState);
+const t = useTranslate();
+const btnText = computed(() => (localUserInfo?.value.isAudioAvailable ? t.value('microphone enabled') : t.value('microphone disabled')));
+const handleClick = async () => {
+  if (localUserInfo?.value.isAudioAvailable) {
+    await TUICallKitAPI.closeMicrophone();
+  } else {
+    await TUICallKitAPI.openMicrophone();
+  }
+};
+const handleMouseEnter = () => {
+  popoverValue.value = 'microphone';
+};
+</script>
+
+<style lang="scss" scoped>
+@import './style/common.scss';
+</style>