@trtc/calls-uikit-vue 4.1.0

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

@@ -0,0 +1,43 @@
+<template>
+  <div>
+    <StreamInfoPC
+      v-if="isPC"
+      :nickName="nickName"
+      :isSelf="isSelf"
+      :isMuted="isMuted"
+      :volume="volume"
+      :showNetWorkStatus="showNetWorkStatus"
+    />
+    <StreamInfoMobile
+      v-if="isGroupCall && !isPC"
+      :showSwitchCameraButton="showSwitchCameraButton"
+      :showVirtualBackgroundButton="showVirtualBackgroundButton"
+      :showNetWorkStatus="showNetWorkStatus"
+      :nickName="nickName"
+      :showNickName="showNickName"
+      :isSelf="isSelf"
+      :isMuted="isMuted"
+      :volume="volume"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { TUIGlobal } from '../../../../TUICallService';
+import StreamInfoPC from './StreamInfoPC.vue';
+import StreamInfoMobile from './StreamInfoMobile.vue';
+import { StreamInfoProps } from './StreamInfo';
+import { useCallInfoContext } from '../../../hooks';
+
+const { isGroupCall } = useCallInfoContext();
+const isPC = TUIGlobal.isPC;
+defineProps(StreamInfoProps);
+</script>

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

@@ -0,0 +1,14 @@
+export const TimerProps = {
+  color: {
+    type: String,
+    default: '#FFF',
+  },
+  callDuration: {
+    type: String,
+    default: '',
+  },
+  fontSize: {
+    type: String,
+    default: '16px',
+  },
+};

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

@@ -0,0 +1,24 @@
+<template>
+  <span :style="[timerStyle]">{{ callDuration }}</span>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { computed } from '../../../../adapter-vue';
+import { TimerProps } from './Timer';
+
+const props = defineProps(TimerProps);
+
+const timerStyle = computed(() => ({
+  color: props.color,
+  fontSize: props.fontSize,
+}));
+</script>
+

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

@@ -0,0 +1,5 @@
+export const TipProps = {
+  customClass: {
+    type: String,
+  }
+};

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

@@ -0,0 +1,67 @@
+<template>
+  <div>
+    <Message :showIcon="false" :class="tipClassName" ref="message" :customStyle="customStyle"></Message>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+    styleIsolation: 'shared',
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { watch, ref, computed, toRefs } from '../../../../adapter-vue';
+import { TUIGlobal } from '../../../../TUICallService';
+import Message from '../../base/Message/Message.vue';
+import { TipProps } from './Tip';
+import { useFloatWindowContext, useTip, useCallInfoContext, useTranslate } from '../../../hooks';
+import { filterObject } from '../../base/util';
+
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+const { tip, duration } = useTip();
+const t = useTranslate();
+const { isGroupCall } = toRefs(useCallInfoContext());
+const message = ref(null);
+const props = defineProps(TipProps);
+const isPC = TUIGlobal.isPC;
+
+const tipClassName = computed(() => [props.customClass]);
+
+const singleCustomStyle = computed(() =>
+  filterObject({
+    color: 'white',
+    background: 'none',
+    position: 'absolute',
+    'z-index': 4,
+    'align-items': 'center',
+    left: '50%',
+    top: `${isPC ? '60%' : '70%'}`,
+    transform: 'translate(-50%, -50%)',
+    'font-size': isFloatWindow.value ? '12px' : undefined,
+  }),
+);
+
+const groupCustomStyle = computed(() =>
+  filterObject({
+    color: 'white',
+    background: 'none',
+    position: 'static',
+    transform: 'none',
+    'font-size': isFloatWindow.value ? '12px' : undefined,
+  }),
+);
+
+const customStyle = computed(() => (isGroupCall.value ? groupCustomStyle.value : singleCustomStyle.value));
+
+watch([tip, t, duration], () => {
+  message.value?.show({
+    message: t.value(tip.value),
+    duration: duration.value,
+    offset: 0,
+  });
+});
+</script>

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

@@ -0,0 +1,84 @@
+import { VNode, createVNode, render } from '../../../../adapter-vue';
+// @ts-ignore
+import ToastVue from './Toast.vue';
+import { CreateToast, TToast, TToastOptions, ToastType } from './type';
+
+const Toast: TToast = {};
+const instances: VNode[] = [];
+let seed = 1;
+
+function getLastTop() {
+  const len = instances.length;
+  return len > 0 ? instances[len - 1]?.el?.style?.top : '30px';
+}
+function getLastOffsetHeight() {
+  const len = instances.length;
+  return len > 0 ? instances[len - 1]?.el?.offsetHeight : 0;
+}
+
+export const createToast: CreateToast = (options) => {
+  const { type, duration = 3000, message, showClose = false, onClose } = options; // eslint-disable-line
+  const appendTo = document.body;
+  const container = document.createElement('div');
+  const vnode = createVNode(ToastVue, {
+    type,
+    duration,
+    message,
+    showClose,
+    index: `toast-item-${seed++}`, // eslint-disable-line
+    close() {
+      const index = instances.findIndex(item =>  item === vnode);
+      console.log(instances[index]?.el?.offsetHeight);
+      const removeHeight = parseInt(instances[index]?.el?.offsetHeight) + 20; // eslint-disable-line
+      for (let i = 0; i < instances.length; i++) {
+        if (i < index) {
+          continue;
+        } else {
+          // @ts-ignore
+          instances[i].el.style.top = parseInt(instances[i].el.style.top) - removeHeight + 'px'; // eslint-disable-line
+        }
+      }
+      instances.splice(index, 1);
+    },
+    destroy() {
+      render(null, container);
+    },
+  });
+  render(vnode, container);
+  appendTo.appendChild(container.firstElementChild!);
+
+  const lastTop = getLastTop();
+  const lastOffsetHeight = getLastOffsetHeight();
+
+  // @ts-ignore
+  vnode.el.style.top = parseInt(lastTop) + parseInt(lastOffsetHeight) + 20 + 'px'; // eslint-disable-line
+  instances.push(vnode);
+};
+
+(['info', 'waring', 'error', 'success'] as ToastType[]).forEach((type) => {
+  let params: any = {};
+  Toast[type] = (options: TToastOptions | string) => {
+    if (typeof options === 'string') {
+      params.message = options;
+    } else {
+      params = options;
+    }
+
+    createToast({ type, ...params });
+  };
+});
+
+Toast.show = (options: TToastOptions) => {
+  let params: any = {};
+  if (typeof options === 'string') {
+    params.message = options;
+    params.type = 'info';
+  } else {
+    params = options;
+  }
+  return createToast({ type: 'info', ...params });
+};
+
+export {
+  Toast,
+};

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

@@ -0,0 +1,133 @@
+<template>
+  <Transition name="slide-up" @after-leave="handleAfterLeave">
+    <div v-show="isShow" :key="index" :class="toastClass">
+      <div class="toast-content">{{ message }}</div>
+      <i v-show="showClose" @click="handleClose" class="toast-close-icon"></i>
+    </div>
+  </Transition>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, computed } from '../../../../adapter-vue';
+import { ToastType } from './type';
+
+const props = defineProps<{
+  type: ToastType,
+  duration?: number,
+  message: string,
+  index: string,
+  showClose?: boolean,
+  destroy: () => void,
+  close: () => void,
+}>();
+
+const isShow = ref(false);
+const timer = ref<number | null>(null);
+const toastClass = computed(() => `toast-container ${props.type}`);
+
+const handleAfterLeave = () => {
+  props.destroy();
+};
+
+const handleClose = () => {
+  props.close();
+  isShow.value = false;
+};
+
+const startTimer = () => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+
+  if (props.duration) {
+    timer.value = setTimeout(() => {
+      handleClose();
+    }, props.duration);
+  }
+};
+
+onMounted(() => {
+  isShow.value = true;
+  startTimer();
+});
+
+onUnmounted(() => {
+  if (timer.value) {
+    clearTimeout(timer.value);
+  }
+});
+</script>
+
+<style lang="scss" scoped>
+.toast-container {
+  position: fixed;
+  display: flex;
+  align-items: center;
+  z-index: 1002;
+  justify-content: space-between;
+  left: 50%;
+  transform: translateX(-50%);
+  padding: 15px 15px 15px 20px;
+  background-color: #000;
+  color: #FFF;
+  box-sizing: border-box;
+  border-radius: 4px;
+  border-width: 1px;
+  border-style: solid;
+  .toast-content {
+    margin-right: 16px;
+  }
+  .toast-close-icon {
+    width: 16px;
+    line-height: 16px;
+    cursor: pointer;
+  }
+  .toast-close-icon::before {
+    font-style: normal;
+    content: url('../../../assets/common/close.svg');
+  }
+}
+
+.info {
+  border-color: #EBEEF5;
+  color: #909399;
+  background-color: #edf2fc;
+}
+
+.success {
+  color: #67C23A;
+  background-color: #f0f9eb;
+  border-color: #e1f3d8;
+}
+.waring {
+  color: #E6A23C;
+  background-color: #fdf6ec;
+  border-color: #faecd8;
+}
+.error {
+  color: #F56C6C;
+  background-color: #fef0f0;
+  border-color: #fde2e2;
+}
+
+.slide-up-enter-active,
+.slide-up-leave-active {
+  transition: all 0.5s ease-out;
+}
+
+.slide-up-enter-from {
+  opacity: 0;
+  transform: translate(-50%, 20px);
+}
+
+.slide-up-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -20px);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+  transform: translate(-50%, -100%);
+}
+</style>

package/src/Components/components/common/Toast/index.ts

@@ -0,0 +1,6 @@
+import { createToast, Toast } from './Toast';
+
+export {
+  createToast,
+  Toast,
+};

package/src/Components/components/common/Toast/type.ts

@@ -0,0 +1,16 @@
+export type ToastType = 'info' | 'waring' | 'error';
+export type TToastOptions = {
+  type?: ToastType,
+  duration?: number;
+  message: string;
+  showClose?: boolean;
+  onClose?: () => void;
+}
+export type CreateToast = (options: TToastOptions) => any;
+export type TToast = {
+  info?: (options: TToastOptions) => void;
+  success?: (options: TToastOptions) => void;
+  waring?: (options: TToastOptions) => void;
+  error?: (options: TToastOptions) => void;
+  show?: (options: TToastOptions) => void;
+};

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

@@ -0,0 +1,8 @@
+export const TopBarProps = {
+  customStyle: {
+    type: Object,
+  },
+  customClass: {
+    type: String,
+  },
+};

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

@@ -0,0 +1,116 @@
+<template >
+<div :style="customStyle" class="top-bar-container">
+  <Row v-if="isPC">
+    <Col :span="8" />
+    <Col :span="8" justify="center" align="center">
+      <Timer v-if="showTimer" :call-duration="callDuration" />
+    </Col>
+    <Col :span="8" justify="end" align="center">
+      <Row>
+        <Col :span="18" />
+        <Col :span="3" justify="center">
+          <Minimize v-if="showMinimize" />
+        </Col>
+        <Col :span="3" justify="center">
+          <FullScreen v-if="allowedFullScreen" />
+        </Col>
+      </Row>
+    </Col>
+  </Row>
+  <Row v-if="!isPC">
+    <Col :span="8" align="center">
+      <Row>
+        <Col :span="8" justify="center">
+          <Minimize v-if="!isPC && showMinimize" />
+        </Col>
+        <Col :span="16" />
+      </Row>
+    </Col>
+    <Col :span="8" justify="center" align="center">
+      <Timer v-if="showTimer" :call-duration="callDuration" />
+    </Col>
+    <Col :span="8" justify="end" align="center">
+      <Row>
+        <Col :span="16" />
+        <Col :span="8" justify="center">
+          <InviteUser v-if="showInviteUser" :show-text="isPC" />
+        </Col>
+      </Row>
+    </Col>
+  </Row>
+</div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { toRefs, computed, ref, onMounted, onUnmounted } from '../../../../adapter-vue';
+import { useCallInfoContext, useCallDuration, useCustomUI } from '../../../hooks';
+import { CallRole, CallStatus, FeatureButton, NAME, StoreName, TUIGlobal, TUIStore } from '../../../../TUICallService';
+import { TopBarProps } from './TopBar';
+import Row from '../../base/Layout/Row/Row.vue';
+import Col from '../../base/Layout/Col/Col.vue';
+import Minimize from '../Button/Minimize.vue';
+import FullScreen from '../Button/FullScreen.vue';
+import InviteUser from '../Button/InviteUser.vue';
+import Timer from '../Timer/Timer.vue';
+
+defineProps(TopBarProps);
+const isPC = TUIGlobal.isPC;
+const { callStatus, isGroupCall, callRole, allowedFullScreen } = toRefs(useCallInfoContext());
+const { callDuration } = useCallDuration();
+const customUIConfig = useCustomUI();
+const showTimer = computed(() => (callStatus.value === CallStatus.CONNECTED));
+const showMinimize = ref(TUIStore.getData(StoreName.CALL, NAME.ENABLE_FLOAT_WINDOW));
+const showInviteUser = computed(() => {
+  if (
+    !isGroupCall.value
+    || customUIConfig.value.button?.[FeatureButton.InviteUser]?.show === false
+  ) {
+    return false;
+  }
+
+  if (callStatus.value === CallStatus.CALLING) {
+    return callRole.value === CallRole.CALLER;
+  }
+
+  return true;
+});
+function handleEnableFloatWindowChange(value) {
+  showMinimize.value = value;
+}
+const watchOptions = {
+  [NAME.ENABLE_FLOAT_WINDOW]: handleEnableFloatWindowChange,
+};
+onMounted(() => {
+  TUIStore.watch(
+    StoreName.CALL,
+    watchOptions,
+    {
+      notifyRangeWhenWatch: NAME.MYSELF,
+    },
+  );
+});
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, {
+    ...watchOptions,
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.top-bar-container {
+  position: absolute;
+  z-index: 2;
+  width: 100%;
+  height: 5.8%;
+  display: flex;
+  align-items: center;
+}
+</style>

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

@@ -0,0 +1,126 @@
+<template>
+  <div class="waiting-container">
+    <OverlayStream
+      :username="username"
+      :avatar="avatar"
+      :bg-image="bgImage"
+      :show-avatar="!TUIGlobal.isPC"
+      :show-loading="false"
+      bg-color="#22262ed9"
+      :show-mask="showMask"
+      :show-background-image="showBackgroundImage"
+      :tip="tip"
+      :fit="fit"
+      @error="handleError"
+    >
+    <div v-if="!TUIGlobal.isPC && isGroupCall" class="groupcall-info">
+      <div class="tip">
+        <TKText color="#FFF">{{ remoteUserListExcludeVolume.length }}{{ t('people in the call') }}</TKText>
+      </div>
+      <div class="avatar-group">
+        <div v-for="item in remoteUserListExcludeVolume" class="avatar-item">
+          <Avatar size="100%" :src="item.avatar || defaultAvatarSrc" />
+        </div>
+      </div>
+    </div>
+    </OverlayStream>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { toRefs, computed, ref, watchEffect } from '../../../../adapter-vue';
+import { TUIGlobal } from '../../../../TUICallService';
+import OverlayStream from '../../common/OverlayStream/OverlayStream.vue';
+import Avatar from '../../base/Avatar/Avatar.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import {
+  useCallInfoContext,
+  useCallerUserInfoContext,
+  useUserInfoExcludeVolumeContext,
+  useViewBackgroundConfig,
+  useTranslate,
+} from '../../../hooks';
+import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+
+const { localUserInfoExcludeVolume, remoteUserListExcludeVolume } = toRefs(useUserInfoExcludeVolumeContext());
+const { callerUserInfo } = toRefs(useCallerUserInfoContext());
+const { isGroupCall } = toRefs(useCallInfoContext());
+const viewBackgroundConfigObj = useViewBackgroundConfig();
+const t = useTranslate();
+
+const username = computed(() => !isGroupCall.value
+  ? remoteUserListExcludeVolume.value?.[0]?.displayUserInfo
+  : callerUserInfo.value.displayUserInfo);
+const avatar = computed(() => !isGroupCall.value
+  ? remoteUserListExcludeVolume.value?.[0]?.avatar
+  : callerUserInfo.value.avatar);
+const showBackgroundImage = computed(() => isGroupCall.value ? true : !localUserInfoExcludeVolume.value.isVideoAvailable);
+const tip = computed(() => isGroupCall.value ? t.value('Invited group call') : null);
+const bgImage = computed(() => {
+  if (isGroupCall.value) {
+    return viewBackgroundConfigObj.value[callerUserInfo.value.userId] || avatar.value;
+  } else {
+    return viewBackgroundConfigObj.value[remoteUserListExcludeVolume.value?.[0]?.userId] || avatar.value;
+  }
+});
+const showMask = ref<boolean>(false);
+const fit = ref<string>('fill');
+let triggerError = ref<boolean>(false);
+
+watchEffect(() => {
+  if (triggerError.value) {
+    showMask.value = isGroupCall.value ? true : !localUserInfoExcludeVolume.value.isVideoAvailable;
+    fit.value = 'cover';
+
+    return;
+  }
+
+  if (isGroupCall.value) {
+    showMask.value = !viewBackgroundConfigObj.value[callerUserInfo.value.userId];
+    fit.value = viewBackgroundConfigObj.value[callerUserInfo.value.userId] ? 'fill' : 'cover';
+  } else {
+    showMask.value = !localUserInfoExcludeVolume.value.isVideoAvailable && !viewBackgroundConfigObj.value[remoteUserListExcludeVolume.value?.[0]?.userId];
+    fit.value = viewBackgroundConfigObj.value[remoteUserListExcludeVolume.value?.[0]?.userId] ? 'fill' : 'cover';
+  }
+});
+
+const handleError = () => {
+  triggerError.value = true;
+}
+</script>
+
+<style lang="scss" scoped>
+.waiting-container {
+  position: absolute;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 1;
+}
+.groupcall-info {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  margin-top: 24px;
+  z-index: 1;
+  color: #FFF;
+  width: 100%;
+
+  .avatar-group {
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 12px;
+    align-items: center;
+    justify-content: center;
+    max-width: 70%;
+
+    .avatar-item {
+      width: 10vw;
+      height: 10vw;
+      margin-left: 10px;
+      margin-top: 10px;
+    }
+  }
+}
+</style>