@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/common/JoinGroupCard/desktop/JoinGroupCard.scss

@@ -0,0 +1,80 @@
+.banner-pc {
+  position: relative;
+  cursor: pointer;
+
+  .top {
+    height: 24px;
+    padding-right: 10px;
+    border-radius: 4px;
+    background: #F4F5F9;
+    display: inline-flex;
+    align-items: center;
+
+    .call-icon {
+      margin: 4px 4px 4px 8px;
+    }
+
+    .text {
+      font-weight: 400;
+      font-size: 12px;
+      line-height: 16px;
+      color: #666666;
+    }
+  }
+
+  .content {
+    width: 220px;
+    margin-top: 8px;
+    padding: 10px 18px 6px 18px;
+    box-shadow: 0px 0px 24px rgba(22, 30, 39, 0.2);
+    background-color: #ffffff;
+    border-radius: 10px;
+
+    position: absolute;
+    z-index: 10;
+
+    display: flex;
+    display: -webkit-flex;
+    flex-direction: column;
+    align-items: center;
+
+    .content-arrows {
+      width: 12px;
+      height: 12px;
+      border-radius: 2px;
+      background-color: #ffffff;
+      transform: rotate(45deg);
+      position: absolute;
+      top: -5px;
+      left: 80px;
+    }
+
+    .avatar-box {
+      display: flex;
+      justify-content: center;
+      flex-wrap: wrap;
+    }
+
+    .avatar {
+      margin: 6px;
+      display: flex;
+      border-radius: 4px;
+    }
+
+    .btn{
+      margin: 10px 0;
+      width: 97px;
+      height: 30px;
+      background: #F2F5FC;
+      border-radius: 4px;
+    
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    
+      font-size: 12px;
+      color: #1C66E5;
+      cursor: pointer;
+    }
+  }
+}

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

@@ -0,0 +1,57 @@
+<template>
+  <div class="banner-pc">
+    <div class="top" @click="handleClick">
+      <TKImage class="call-icon" :src="CallIcon" width="16px" height="16px" />
+      <span class="text"> {{userListInfo.length}} {{ t('people on the call') }} </span>
+    </div>
+    <div class="content" v-show="isShowContent">
+      <div class="content-arrows"></div>
+      <div class="avatar-box">
+        <TKImage 
+          class="avatar"
+          v-for="userInfo in userListInfo"
+          :src="userInfo?.avatar" 
+          :defaultSrc="defaultAvatarSrc"
+          fit="cover" 
+          width="32px" 
+          height="32px"
+        />
+      </div>
+      <div class="btn" @click="handleJoinGroup">{{ t('join') || 'join' }}</div>
+    </div>
+  </div>
+
+</template>
+
+<script lang="ts" setup>
+import { ref } from '../../../../../adapter-vue';
+import { IUserInfo } from '../../../../../TUICallService/interface/index';
+import { useTranslate } from '../../../../hooks';
+import TKImage from '../../../base/TKImage/TKImage.vue';
+import CallIcon from '../../../../assets/common/call.svg';
+import defaultAvatarSrc from '../../../../assets/common/defaultAvatar.svg';
+
+defineProps({
+  userListInfo: {
+    type: Array<IUserInfo>,
+    default: []
+  }
+});
+
+const emit = defineEmits(['joinGroupCall']);
+const isShowContent = ref<boolean>(false);
+const t = useTranslate();
+
+const handleJoinGroup = () => {
+  emit('joinGroupCall');
+  isShowContent.value = false;
+}
+const handleClick = () => {
+  isShowContent.value = !isShowContent.value;
+}
+
+</script>
+
+<style lang="scss">
+@import './JoinGroupCard.scss';
+</style>

package/src/Components/components/common/JoinGroupCard/mobile/JoinGroupCard.scss

@@ -0,0 +1,60 @@
+.banner-h5 {
+  padding: 0px 16px;
+  position: relative;
+
+  .top {
+    height: 36px;
+    background: #FFFFFF;
+    border-radius: 4px;
+
+    display: flex;
+    display: -webkit-flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .left {
+      display: flex;
+      align-items: center;
+
+      .text {
+        font-weight: 400;
+        font-size: 12px;
+        color: #666666;
+      }
+    }
+  }
+  .content-box {
+    box-sizing: border-box;
+    width: 100%;
+    padding: 0 16px 10px;
+    background: #FFFFFF;
+    box-shadow: 0px 3px 3px 1px rgb(180 180 180 / 25%);;
+    border-radius: 0 0 8px 8px;
+    position: absolute;
+    left: 0px;
+    z-index: 10;
+
+    .content {
+      background: #EEF0F2;
+      border-radius: 6px;
+
+      .avatar-box {
+        padding: 30px 6px;
+        border-bottom: 1px solid #7070701b;
+        display: flex;
+        display: -webkit-flex;
+        justify-content: center;
+        flex-wrap: wrap;
+      }
+  
+      .btn {
+        padding: 10px;
+        font-weight: 600;
+        font-size: 14px;
+        text-align: center;
+        color: #333333;
+        cursor: pointer;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+<template>
+<div class="banner-h5">
+  <div class="top"  @click="handleClick">
+    <div class="left">
+      <TKImage class="call-icon" :src="CallIcon" width="16px" height="16px" :customStyle="CallIconStyle" />
+      <span class="text"> {{userListInfo.length}} {{ t('people on the call') }} </span>
+    </div>
+    <TKImage :src="ArrowsIcon" width="9px" height="9px" />
+  </div>
+  <div class="content-box" v-show="isShowContent">
+    <div class="content">
+      <div class="avatar-box">
+        <TKImage
+          v-for="userInfo in userListInfo"
+          :src="userInfo?.avatar" 
+          :customStyle="avatarImgStyle" 
+          :defaultSrc="defaultAvatarSrc"
+          fit="cover" 
+          width="50px" 
+          height="50px"
+        />
+      </div>
+      <div class="btn" @click.stop="handleJoinGroup">{{ t('join') || 'join' }}</div>
+    </div>
+  </div>
+</div>
+</template>
+
+<script lang="ts" setup>
+import { ref } from '../../../../../adapter-vue';
+import { IUserInfo } from '../../../../../TUICallService/interface/index';
+import TKImage from '../../../base/TKImage/TKImage.vue';
+import { useTranslate } from '../../../../hooks';
+import CallIcon from '../../../../assets/common/call.svg';
+import ArrowsIcon from '../../../../assets/common/arrows.svg';
+import defaultAvatarSrc from '../../../../assets/common/defaultAvatar.svg';
+
+defineProps({
+  userListInfo: {
+    type: Array<IUserInfo>,
+    default: []
+  }
+});
+
+const t = useTranslate();
+const CallIconStyle = ref({ margin: '8px 10px 8px 0px' });
+const avatarImgStyle = ref({
+  margin: '6px',
+  borderRadius: '4px',
+});
+const isShowContent = ref<boolean>(false);
+const emit = defineEmits(['joinGroupCall']);
+const handleJoinGroup = () => {
+  emit('joinGroupCall');
+  isShowContent.value = false;
+};
+const handleClick = () => {
+  isShowContent.value = !isShowContent.value;
+};
+
+</script>
+
+<style lang="scss">
+@import './JoinGroupCard.scss';
+</style>

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

@@ -0,0 +1,37 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="design-iconfont">
+    <g v-if="volume && volume > 0">
+      <path
+        d="M8.62462 7.17395C8.90076 7.17395 9.12462 7.38807 9.12462 7.65221C9.12462 7.89434 8.93651 8.09444 8.69246 8.12611L8.62462 8.13047H7.3335C7.05735 8.13047 6.8335 7.91635 6.8335 7.65221C6.8335 7.41009 7.0216 7.20998 7.26565 7.17832L7.3335 7.17395H8.62462Z"
+        fill="#43D92B"
+      />
+    </g>
+    <g v-if="volume && volume > 5">
+      <path
+        d="M8.62462 5.57971C8.90076 5.57971 9.12462 5.79384 9.12462 6.05797C9.12462 6.3001 8.93651 6.5002 8.69246 6.53187L8.62462 6.53623H7.3335C7.05735 6.53623 6.8335 6.32211 6.8335 6.05797C6.8335 5.81585 7.0216 5.61575 7.26565 5.58408L7.3335 5.57971H8.62462Z"
+        fill="#43D92B"
+      />
+    </g>
+    <g v-if="volume && volume > 10">
+      <path
+        d="M8.62462 3.98547C8.90076 3.98547 9.12462 4.1996 9.12462 4.46373C9.12462 4.70586 8.93651 4.90596 8.69246 4.93763L8.62462 4.942H7.3335C7.05735 4.942 6.8335 4.72787 6.8335 4.46373C6.8335 4.22161 7.0216 4.02151 7.26565 3.98984L7.3335 3.98547H8.62462Z"
+        fill="#43D92B"
+      />
+    </g>
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M11.3301 3.45938C11.2517 1.89175 9.77808 0.658081 8 0.658081C6.17253 0.658081 4.66667 1.96123 4.66667 3.59077V7.72539L4.66994 7.85678C4.7483 9.42442 6.22192 10.6581 8 10.6581C9.82747 10.6581 11.3333 9.35493 11.3333 7.72539V3.59077L11.3301 3.45938ZM6.0035 3.54179C6.06337 2.69234 6.92083 1.99146 8.00016 1.99146C9.11947 1.99146 10.0002 2.74521 10.0002 3.63675V7.67949L9.99682 7.77446C9.93695 8.62391 9.07949 9.32479 8.00016 9.32479C6.88086 9.32479 6.00016 8.57103 6.00016 7.67949V3.63675L6.0035 3.54179ZM8.33333 15.3333C8.51743 15.3333 8.66667 15.1841 8.66667 15V13.2964C11.5402 12.9793 14 10.6655 14 8.27322V7.68092C14 7.49682 13.8508 7.34758 13.6667 7.34758H13C12.8159 7.34758 12.6667 7.49682 12.6667 7.68092V8.27322L12.6634 8.39309C12.5681 10.1524 10.3982 11.9979 8.00396 12C8.00264 12 8.00132 12 8 12C7.99868 12 7.99736 12 7.99604 12C5.54737 11.9979 3.33333 10.0675 3.33333 8.27322L3.33043 7.65652C3.32956 7.47164 3.17839 7.32278 2.99352 7.32477L2.32975 7.33191C2.14706 7.33387 2 7.48252 2 7.66522V8.27322L2.00292 8.4162C2.09825 10.757 4.51708 12.9856 7.33333 13.2964V15C7.33333 15.1841 7.48257 15.3333 7.66667 15.3333H8.33333Z"
+      fill="#fff"
+    />
+  </svg>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from '../../../../adapter-vue';
+const props = defineProps<{
+  volume?: number;
+}>();
+</script>
+
+<style scoped></style>

package/src/Components/components/common/MicVolume/MicVolumeClosed.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 16 16" class="design-iconfont">
+    <path
+      fill-rule="evenodd"
+      clip-rule="evenodd"
+      d="M4.82825 12.4759C5.58172 12.9048 6.43742 13.1978 7.33333 13.2967V15.0002C7.33333 15.1843 7.48257 15.3335 7.66667 15.3335H8.33333C8.51743 15.3335 8.66667 15.1843 8.66667 15.0002V13.2967C11.5402 12.9796 14 10.6658 14 8.27347V7.68116C14 7.49707 13.8508 7.34783 13.6667 7.34783H13C12.8159 7.34783 12.6667 7.49707 12.6667 7.68116V8.27347L12.6634 8.39333C12.5681 10.1526 10.3982 11.9982 8.00396 12.0002L8 12.0002L7.99604 12.0002C7.22514 11.9996 6.47749 11.8078 5.81487 11.4893L4.82825 12.4759ZM6.83168 10.4725C7.196 10.5927 7.5899 10.6583 8 10.6583C9.82747 10.6583 11.3333 9.35517 11.3333 7.72563V5.97083L6.83168 10.4725ZM10.9068 2.1547L4.73629 8.32524C4.70043 8.17327 4.67793 8.01689 4.66994 7.85702L4.66667 7.72563V3.59102C4.66667 1.96148 6.17253 0.658325 8 0.658325C9.24072 0.658325 10.3332 1.25901 10.9068 2.1547ZM3.62455 9.43698L2.64622 10.4153C2.26208 9.78985 2.03108 9.10804 2.00292 8.41644L2 8.27347V7.66546C2 7.48277 2.14706 7.33411 2.32975 7.33215L2.99352 7.32502C3.17839 7.32303 3.32956 7.47188 3.33043 7.65676L3.33333 8.27347C3.33333 8.66191 3.4371 9.05672 3.62455 9.43698Z"
+      fill="#fff"
+    />
+    <rect x=".609863" y="13.4514" width="19.0127" height="1.5" rx=".75" transform="rotate(-45 .609863 13.4514)" fill="#FE3C44" />
+  </svg>
+</template>

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

@@ -0,0 +1,10 @@
+export const MicrophoneVolumeProps = {
+  isMuted: {
+    type: Boolean,
+    default: false,
+  },
+  volume: {
+    type: Number,
+    default: 0,
+  },
+} as const;

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

@@ -0,0 +1,61 @@
+<template>
+  <div class="mic-container">
+    <div class="mic-level-container">
+      <div class="mic-level" :style="volumeLevelStyle"></div>
+    </div>
+    <Icon :src="iconSrc" />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<script setup lang="ts">
+import Icon from '../../base/Icon/Icon.vue';
+import MicOnIcon from '../../../assets/MicrophoneVolume/desktop/mic-on.svg';
+import MicOffIcon from '../../../assets/MicrophoneVolume/desktop/mic-off.svg';
+import { MicrophoneVolumeProps } from './MicrophoneVolume';
+import { computed } from '../../../../adapter-vue';
+
+const props = defineProps(MicrophoneVolumeProps);
+const iconSrc = computed(() => props.isMuted ? MicOffIcon : MicOnIcon);
+
+const volumeLevelStyle = computed(() => {
+  if(props.isMuted || !props.volume) {
+    return '';
+  }
+  return `height: ${props.volume * 4}%`;
+});
+
+</script>
+
+<style lang="scss" scoped>
+$volume-level-color: #27C39F;
+.mic-container {
+  position: relative;
+  width: 24px;
+  height: 24px;
+  .mic-level-container {
+    position: absolute;
+    left: 6px;
+    width: 8px;
+    height: 14px;
+    display: flex;
+    flex-wrap: wrap;
+    border-radius: 4px;
+    overflow: hidden;
+    flex-direction: column-reverse;
+    justify-content: space-between;
+    .mic-level {
+      width: 100%;
+      background-color: $volume-level-color;
+      transition: height 0.2s;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,102 @@
+import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+
+export const OverlayStreamProps = {
+  // ==============  OverlayStream 业务组件 =================
+  showOverlayStream: {
+    type: Boolean,
+    default: true,
+  },
+  customClass: {
+    type: String,
+  },
+  customStyle: {
+    type: Object,
+  },
+  isSmallWindow: {
+    type: Boolean,
+    default: false,
+  },
+  tip: {
+    type: String,
+    default: null,
+  },
+  // ============== Overlay 基础组件 =================
+  showOverlay: {
+    type: Boolean,
+    default: true,
+  },
+  showMask: {
+    type: Boolean,
+    default: true,
+  },
+  showBackgroundImage: {
+    type: Boolean,
+    default: true,
+  },
+  blur: {
+    type: Boolean,
+    default: true
+  },
+  bgColor: {
+    type: String,
+  },
+  bgImage: {
+    type: String,
+    default: defaultAvatarSrc,
+  },
+  overlayZIndex: {
+    type: Number,
+  },
+  customOverlayClass: { 
+    type: String,
+  },
+  fit: {
+    type: String,
+  },
+  // ============== Loading 基础组件 =================
+  showLoading: {
+    type: Boolean,
+    default: false,
+  },
+  // ============== Avatar 基础组件 =================
+  showAvatar: {
+    type: Boolean,
+    default: true,
+  },
+  avatar: {
+    type: String,
+    default: defaultAvatarSrc,
+  },
+  // ============== Text(username) 基础组件 =================
+  showUserName: {
+    type: Boolean,
+    default: true,
+  },
+  username: {
+    type: String,
+  },
+  color: {
+    type: String,
+    default: '#FFF',
+  },
+  // ==============  MicrophoneVolume 业务组件 =================
+  showMicVolume: {
+    type: Boolean,
+    default: false,
+  },
+  isMuted: {
+    type: Boolean,
+    default: false,
+  },
+  volume: {
+    type: Number,
+    default: 0,
+  },
+  // ==============  Tip 业务组件 =================
+  showTip: {
+    type: Boolean,
+    default: true,
+  },
+} as const;
+
+export const OverlayStreamEmits = ['error'];

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

@@ -0,0 +1,104 @@
+<template>
+<div v-if="showOverlayStream" :class="overlayStreamClassName" :style="[customStyle]">
+  <Overlay
+    :show="showOverlay"
+    :show-background-image="showBackgroundImage"
+    :show-mask="showMask"
+    :blur="blur"
+    :zIndex="overlayZIndex"
+    :bgColor="bgColor"
+    :bgImage="bgImage || defaultAvatarSrc"
+    :fit="fit"
+    :defaultSrc="defaultAvatarSrc"
+    :customStyle="{ position: 'absolute', width: '100%', height: '100%' }"
+    :custom-mask-style="{ 'backdrop-filter': 'blur(12px)', '-webkit-backdrop-filter': 'blur(12px)' }"
+    :customClass="customOverlayClass"
+    @error="handleError"
+    >
+    <div class="overlay-stream-content-container">
+      <div class="overlay-stream-content">
+        <Loading v-if="showLoading" mode="dot" />
+        <div class="overlay-stream-avatar">
+          <Avatar
+            v-if="showAvatar"
+            :src="avatar || defaultAvatarSrc"
+            :size="avatarSize"
+          />
+        </div>
+        <div class="overlay-stream-info">
+          <TKText 
+            v-if="showUserName"
+            :truncated="true"
+            :size="fontSize"
+            :color="color"
+            width="200px"
+            :weight="500"
+          >
+          {{ username }}
+          </TKText>
+          <MicrophoneVolume v-if="showMicVolume" :isMuted="isMuted" :volume="volume" />
+        </div>
+        <div class="overlay-stream-tip">
+          <div v-if="showTip && tip">{{ tip }}</div>
+        </div>
+      </div>
+      <slot></slot>
+    </div>
+  </Overlay>
+</div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { watch, ref, computed, toRefs } from '../../../../adapter-vue';
+import Overlay from '../../base/Overlay/Overlay.vue';
+import Loading from '../../base/Loading/Loading.vue';
+import TKText from '../../base/TKText/TKText.vue';
+import Avatar from '../../base/Avatar/Avatar.vue';
+import MicrophoneVolume from '../MicrophoneVolume/MicrophoneVolume.vue';
+import { TUIGlobal } from '../../../../TUICallService/index';
+import { classNames } from '../../base/util';
+import { useFloatWindowContext } from '../../../hooks';
+import { OverlayStreamProps, OverlayStreamEmits } from './OverlayStream';
+import defaultAvatarSrc from '../../../assets/common/defaultAvatar.svg';
+
+const emit = defineEmits(OverlayStreamEmits);
+const props = defineProps(OverlayStreamProps);
+const avatarSize = ref(100);
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+const fontSize = TUIGlobal.isPC ? '40px' : '20px';
+
+watch([() => props.isSmallWindow, isFloatWindow], () => {
+  if (isFloatWindow.value) {
+    avatarSize.value = props.isSmallWindow ? 20 : 40;
+  } else {
+    avatarSize.value = props.isSmallWindow ? 40 : 100;
+  }
+}, {
+  immediate: true,
+});
+
+const overlayStreamClassName = computed(() => classNames([
+  'overlay-stream-container',
+  {
+    pc: TUIGlobal.isPC,
+    mobile: !TUIGlobal.isPC,
+    float: isFloatWindow.value,
+  },
+]));
+
+const handleError = (event) => {
+  emit('error', event);
+}
+</script>
+
+<style lang="scss" scoped>
+@import './style/OverlayStream.scss';
+</style>

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

@@ -0,0 +1,12 @@
+@import './mobile.scss';
+@import './pc.scss';
+
+.overlay-stream-container {
+  position: absolute;
+  display: flex;
+  height: 100%;
+  width: 100%;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}

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

@@ -0,0 +1,32 @@
+.overlay-stream-container {
+  &.mobile {
+    .overlay-stream-content-container {
+      width: 100%;
+      top: 26%;
+      position: absolute;
+      display: flex;
+      justify-content: center;
+      flex-direction: column;
+
+      .overlay-stream-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        
+        .overlay-stream-avatar {
+          margin-bottom: 12px;
+        }
+    
+        .overlay-stream-info {
+          display: flex;
+          align-items: center;
+        }
+    
+        .overlay-stream-tip {
+          margin-top: 12px;
+          color: #FFF;
+        }
+      }
+    }
+  }
+}

package/src/Components/components/common/OverlayStream/style/pc.scss

@@ -0,0 +1,21 @@
+.overlay-stream-container {
+  &.pc {
+    .overlay-stream-content-container {
+      display: flex;
+      height: 100%;
+      align-items: center;
+      justify-content: center;
+
+      .overlay-stream-content {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+  
+        .overlay-stream-info {
+          display: flex;
+          align-items: center;
+        }
+      }
+    }
+  }
+}

package/src/Components/components/common/PermitTip/CloseIcon.vue

@@ -0,0 +1,3 @@
+<template>
+  <svg viewBox="0 0 1024 1024" xmlns="http://www.w3.org/2000/svg" data-v-ea893728=""><path fill="currentColor" d="M764.288 214.592 512 466.88 259.712 214.592a31.936 31.936 0 0 0-45.12 45.12L466.752 512 214.528 764.224a31.936 31.936 0 1 0 45.12 45.184L512 557.184l252.288 252.288a31.936 31.936 0 0 0 45.12-45.12L557.12 512.064l252.288-252.352a31.936 31.936 0 1 0-45.12-45.184z"></path></svg>
+</template>