@trtc/calls-uikit-vue2 4.1.0

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

@@ -0,0 +1,82 @@
+<template>
+<Row :custom-style="{ padding: '2px 5px' }">
+  <Col :span="12" justify="start" align="center">
+    <TKText
+      v-if="showNickName"
+      width="100px"
+      :truncated="true"
+      color="#FFF"
+    >
+      {{ nickName }}
+    </TKText>
+    <div v-show="!isMuted && volume">
+      <Icon :size="24" :src="MicOnH5"></Icon>
+    </div>
+    <div v-show="isMuted">
+      <Icon :size="24" :src="MicOffH5"></Icon> 
+    </div>
+  </Col>
+  <Col :span="12" justify="end" align="center">
+    <div v-if="showNetWorkStatus">
+      <TKImage width="24px" height="24px" :src="networkSrc" />
+    </div>
+    <div v-if="showSwitchCameraButton" class="switch-camera stream-icon" @click.stop="switchCamera">
+      <TKImage width="15px" height="15px" :src="SwitchCameraSrc" />
+    </div>
+    <div v-if="showVirtualBackgroundButton" class="stream-icon" @click.stop="setBlurBackground">
+      <TKImage width="15px" height="15px" :src="VirtualBackgroundOpenSrc" />
+    </div>
+  </Col>
+</Row>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+  
+<script setup lang="ts">
+import { toRefs } from '../../../../adapter-vue';
+import { StreamInfoProps } from './StreamInfo';
+import Row from "../../base/Layout/Row/Row.vue";
+import Col from "../../base/Layout/Col/Col.vue";
+import Icon from '../../base/Icon/Icon.vue';
+import TKImage from '../../base/TKImage/TKImage.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import { TUICallKitAPI } from '../../../../TUICallService';
+import MicOnH5 from '../../../assets/streamInfo/mobile/mic-on-h5.svg';
+import MicOffH5 from '../../../assets/streamInfo/mobile/mic-off-h5.svg';
+import SwitchCameraSrc from '../../../assets/button/mobile/switch-camera.svg';
+import VirtualBackgroundOpenSrc from '../../../assets/button/background-blur-open.svg';
+import networkSrc from '../../../assets/streamInfo/networkStatus.png'
+import { useCallInfoContext } from '../../../hooks';
+
+defineProps(StreamInfoProps);
+const { enableVirtualBackground } = toRefs(useCallInfoContext());
+
+const switchCamera = async () => {
+  await TUICallKitAPI.switchCamera();
+};
+
+const setBlurBackground = async () => {
+  await TUICallKitAPI.setBlurBackground(!enableVirtualBackground.value);
+};
+</script>
+
+<style lang="scss" scoped>
+.stream-icon {
+  width: 30px;
+  height: 30px;
+  background: #22262e80;
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.switch-camera {
+  margin: 0px 12px;
+}
+</style>

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

@@ -0,0 +1,58 @@
+<template>
+  <Row>
+    <Col :span="12" justify="start" align="center">
+      <div class="stream-userInfo">
+        <MicrophoneVolume class="mic-volume" :is-muted="isMuted" :volume="volume"></MicrophoneVolume>
+        <div class="nickname">
+          <TKText color="#fff" :truncated="true" width="80px" size="14px">{{ nickName }}</TKText>
+          <TKText color="#fff" v-show="isSelf" size="14px">{{ t('me') }}</TKText>
+        </div>
+      </div>
+    </Col>
+    <Col :span="12" justify="center">
+      <div v-if="showNetWorkStatus">
+        <TKImage width="24px" height="24px" :src="networkSrc" />
+      </div>
+    </Col>
+  </Row>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import MicrophoneVolume from '../MicrophoneVolume/MicrophoneVolume.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import TKImage from '../../base/TKImage/TKImage.vue';
+import Row from '../../base/Layout/Row/Row.vue';
+import Col from '../../base/Layout/Col/Col.vue';
+import { useTranslate } from '../../../hooks';
+import { StreamInfoProps } from './StreamInfo';
+import networkSrc from '../../../assets/streamInfo/networkStatus.png';
+import { t } from '../../../../TUICallService';
+
+defineProps(StreamInfoProps);
+
+const t = useTranslate();
+</script>
+
+<style lang="scss" scoped>
+$stream-info-bg-color: #000000a6;
+$stream-info-font-color: #fff;
+.stream-userInfo {
+  padding: 2px 5px;
+  display: flex;
+  align-items: center;
+  background-color: $stream-info-bg-color;
+  color: $stream-info-font-color;
+
+  .nickname {
+    display: flex;
+  }
+}
+</style>

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

@@ -0,0 +1,47 @@
+<template>
+  <div>
+    <!-- @if process.env.BUILD_TARGET!='MINI' -->
+    <StreamInfoPC
+      v-if="isPC"
+      :nickName="nickName"
+      :isSelf="isSelf"
+      :isMuted="isMuted"
+      :volume="volume"
+      :showNetWorkStatus="showNetWorkStatus"
+    />
+    <!-- @endif -->
+    <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';
+// @if process.env.BUILD_TARGET!='MINI'
+import StreamInfoPC from './StreamInfoPC.vue';
+// @endif
+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,87 @@
+import Vue from 'vue';
+// @ts-ignore
+import ToastVue from './Toast.vue';
+import { CreateToast, TToast, TToastOptions, ToastType } from './type';
+
+const Toast: TToast = {};
+const instances: any[] = [];
+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 appendTo = document.body;
+  const { type, duration = 3000, message, showClose = false, onClose } = options;
+  const ToastConstructor = Vue.extend(ToastVue);
+  const instance = new ToastConstructor({
+    propsData: {
+      type,
+      duration,
+      message,
+      showClose,
+      index: `toast-item-${seed++}`,
+      close() {
+        const index = instances.findIndex((item) =>  item === instance);
+        console.log(instances[index]?.$el?.offsetHeight);
+        const removeHeight = parseInt(instances[index]?.$el?.offsetHeight) + 20;
+        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';
+          }
+        }
+        instances.splice(index, 1);
+      },
+      destroy() {
+        appendTo.removeChild(instance.$el);
+        instance.$destroy();
+      }
+    }
+  });
+  
+  instance.$mount();
+  appendTo.appendChild(instance.$el);
+
+  const lastTop = getLastTop();
+  const lastOffsetHeight = getLastOffsetHeight();
+
+  // @ts-ignore
+  instance.$el.style.top = parseInt(lastTop) + parseInt(lastOffsetHeight) + 20 + 'px';
+  instances.push(instance);
+};
+
+(['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,120 @@
+<template >
+<div :style="customStyle" class="top-bar-container">
+  <!-- @if process.env.BUILD_TARGET!='MINI' -->
+  <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>
+  <!-- @endif -->
+  <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';
+// @if process.env.BUILD_TARGET!='MINI'
+import FullScreen from '../Button/FullScreen.vue';
+// @endif
+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>