@trtc/calls-uikit-vue 4.1.0

package/src/Components/components/SingleCall/MediaContainer/MediaContainer.vue

@@ -0,0 +1,165 @@
+<template>
+  <Portal id="source" :disabled="!isFloatWindow" source="#source" to="body">
+    <FloatWindow>
+      <div :class="singleMediaContainerClassName">
+        <ToggleWindow
+          :big-window="largeViewName"
+          :show-small-window="showSmallWindow"
+          @toggle="handleToggle"
+        >
+          <ToggleWindowItem :value="ViewName.LOCAL" :key="ViewName.LOCAL">
+            <Pusher
+              :domId="localUserInfoExcludeVolume.domId"
+              :show-audio-stream="!localUserInfoExcludeVolume.isVideoAvailable"
+            >
+              <template v-slot:audio-stream>
+                <AudioStream
+                  :userId="localUserInfoExcludeVolume.userId"
+                  :username="localUserInfoExcludeVolume.displayUserInfo"
+                  :avatar="localUserInfoExcludeVolume.avatar"
+                  :is-video-available="localUserInfoExcludeVolume.isVideoAvailable"
+                  :is-small-window="!(largeViewName === ViewName.LOCAL)"
+                  :is-muted="!localUserInfoExcludeVolume.isAudioAvailable"
+                  :volume="volumeMap && volumeMap[localUserInfoExcludeVolume.domId]"
+                />
+              </template>
+              <template v-slot:stream-info>
+                <TKStreamInfo
+                  v-if="callType === CallMediaType.VIDEO"
+                  :nick-name="localUserInfoExcludeVolume.displayUserInfo"
+                  :is-self="true"
+                  :is-muted="!localUserInfoExcludeVolume.isAudioAvailable"
+                  :volume="volumeMap && volumeMap[localUserInfoExcludeVolume.domId]"
+                />
+              </template>
+            </Pusher>
+          </ToggleWindowItem>
+          <ToggleWindowItem :value="ViewName.REMOTE" :key="ViewName.REMOTE">
+            <Player
+              :dom-id="playerDomId"
+              :show-audio-stream="!isPusherVideoAvailable"
+            >
+              <template v-slot:audio-stream>
+                <AudioStream
+                  :userId="remoteUserListExcludeVolume[0] && remoteUserListExcludeVolume[0].userId"
+                  :username="remoteUserListExcludeVolume[0] && remoteUserListExcludeVolume[0].displayUserInfo"
+                  :avatar="remoteUserListExcludeVolume[0] && remoteUserListExcludeVolume[0].avatar"
+                  :is-video-available="isPusherVideoAvailable"
+                  :is-small-window="!(largeViewName === ViewName.REMOTE)"
+                  :is-muted="remoteUserListExcludeVolume[0] && !remoteUserListExcludeVolume[0].isAudioAvailable"
+                  :volume="remoteStreamVolume"
+                />
+              </template>
+              <template v-slot:stream-info>
+                <TKStreamInfo
+                  v-if="callType === CallMediaType.VIDEO"
+                  :nick-name="remoteUserListExcludeVolume[0] && remoteUserListExcludeVolume[0].displayUserInfo"
+                  :is-muted="remoteUserListExcludeVolume[0] && !remoteUserListExcludeVolume[0].isAudioAvailable"
+                  :volume="remoteStreamVolume"
+                />
+              </template>
+            </Player>
+          </ToggleWindowItem>
+        </ToggleWindow>
+      </div>
+    </FloatWindow>
+</Portal>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { ref, watch, toRefs, computed } from '../../../../adapter-vue';
+import { CallMediaType, CallStatus, TUIGlobal } from '../../../../TUICallService';
+import ToggleWindow from '../../base/ToggleWindow/ToggleWindow.vue';
+import Portal from '../../base/Portal/Portal.vue';
+import ToggleWindowItem from '../../base/ToggleWindow/ToggleWindowItem/ToggleWindowItem.vue';
+import TKStreamInfo from '../../common/TKStreamInfo/TKStreamInfo.vue';
+import Pusher from '../../common/Pusher/Pusher.vue';
+import Player from '../../common/Player/Player.vue';
+import AudioStream from '../../common/AudioStream/AudioStream.vue';
+import FloatWindow from '../../common/FloatWindow/FloatWindow.vue';
+import {
+  useUserInfoExcludeVolumeContext,
+  useCallInfoContext,
+  useGetVolumeMap,
+  usePlayer,
+  useFloatWindowContext,
+} from '../../../hooks';
+import { useGetLargeViewName } from '../hooks/useGetLargeViewName';
+import { classNames } from '../../base/util';
+import { ViewName } from '../../../../TUICallService/const/index';
+
+const largeViewName = useGetLargeViewName();
+const showSmallWindow = ref(true);
+const { isFloatWindow } = toRefs(useFloatWindowContext());
+function toggle() {
+  isFloatWindow.value = !isFloatWindow.value;
+}
+const { localUserInfoExcludeVolume, remoteUserListExcludeVolume } = toRefs(useUserInfoExcludeVolumeContext());
+const volumeMap = useGetVolumeMap();
+const { callType, callStatus } = toRefs(useCallInfoContext());
+const wxPlayer = usePlayer();
+
+const isPusherVideoAvailable = computed(() => remoteUserListExcludeVolume.value?.[0]?.isVideoAvailable);
+
+const playerDomId = computed(() => remoteUserListExcludeVolume.value?.[0]?.domId);
+const remoteStreamVolume = computed(() => volumeMap.value?.[remoteUserListExcludeVolume.value?.[0]?.domId]);
+
+watch([callType, callStatus], () => {
+  if (callType.value === CallMediaType.AUDIO || callStatus.value === CallStatus.CALLING) {
+    showSmallWindow.value = false;
+  } else {
+    showSmallWindow.value = true;
+  }
+}, {
+  immediate: true,
+});
+
+const singleMediaContainerClassName = computed(() => classNames([
+  'singlecall-media-container',
+  {
+    mobile: !TUIGlobal.isPC,
+    pc: TUIGlobal.isPC,
+    float: isFloatWindow.value,
+  }
+]));
+
+function handleToggle(value) {
+  largeViewName.value = value;
+}
+</script>
+
+<style lang="scss" scoped>
+.singlecall-media-container {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  z-index: 0;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &.float {
+    position: relative;
+  }
+
+  &.pc {
+    border-radius: 12px;
+    overflow: hidden;
+  }
+}
+.roggle-btn {
+  position: absolute;
+  left: 100px;
+  z-index: 100;
+  top: 0;
+}
+</style>

package/src/Components/components/SingleCall/SingleCall.vue

@@ -0,0 +1,28 @@
+<template>
+  <div class="singlecall-container">
+    <TopBar />
+    <Waiting v-if="callStatus === CallStatus.CALLING" />
+    <MediaContainer />
+    <Tip />
+    <ButtonPanel />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { toRefs } from '../../../adapter-vue';
+import { CallStatus } from '../../../TUICallService';
+import TopBar from '../common/TopBar/TopBar.vue';
+import Waiting from '../common/Waiting/Waiting.vue';
+import MediaContainer from './MediaContainer/MediaContainer.vue';
+import Tip from '../common/Tip/Tip.vue';
+import ButtonPanel from '../common/ButtonPanel/ButtonPanel.vue';
+import { useCallInfoContext } from '../../hooks';
+
+const { callStatus } = toRefs(useCallInfoContext());
+</script>
+
+<style lang="scss" scoped>
+.singlecall-container {
+  height: 100%;
+}
+</style>

package/src/Components/components/SingleCall/hooks/useGetLargeViewName.ts

@@ -0,0 +1,32 @@
+import { CallStatus, LayoutMode, ViewName } from '../../../../TUICallService/const';
+import { ref, watch, toRefs } from '../../../../adapter-vue';
+import { useCallInfoContext, useCustomUI, useUserInfoExcludeVolumeContext } from '../../../hooks';
+
+export function useGetLargeViewName() {
+  const config = useCustomUI();
+  const { callStatus } = toRefs(useCallInfoContext());
+  const largeViewName = ref(ViewName.LOCAL);
+  const { remoteUserListExcludeVolume } = toRefs(useUserInfoExcludeVolumeContext());
+
+  watch([remoteUserListExcludeVolume, config, callStatus], () => {
+    if (callStatus.value === CallStatus.CALLING) {
+      return;
+    }
+
+    const c2cLayoutModes = [LayoutMode.RemoteInLargeView, LayoutMode.LocalInLargeView];
+    const customLayoutMode = config.value?.layoutMode;
+    if (c2cLayoutModes.includes(customLayoutMode)) {
+      // @ts-ignore
+      largeViewName.value = config.value?.layoutMode;
+      return;
+    }
+
+    if (remoteUserListExcludeVolume.value?.[0]?.isEnter) {
+      largeViewName.value = ViewName.REMOTE;
+    }
+  }, {
+    immediate: true,
+  });
+
+  return largeViewName;
+}

package/src/Components/components/base/Avatar/Avatar.ts

@@ -0,0 +1,38 @@
+const Fit = ['fill', 'contain', 'cover'] as const;
+const Shape = ['circle', 'square'] as const;
+
+export const AvatarProps = {
+  icon: {
+    type: String,
+  },
+  size: {
+    type: [Number, String],
+    default: 100,
+  },
+  shape: {
+    type: String,
+    values: Shape,
+    default: 'square',
+  },
+  src: {
+    type: String,
+  },
+  defaultSrc: {
+    type: String,
+  },
+  text: {
+    type: String,
+  },
+  fit: {
+    type: String,
+    values: Fit,
+    default: 'cover',
+  },
+  customClass: {
+    type: String,
+  },
+} as const;
+
+export const avatarEmits = {
+  error: (evt) => evt,
+};

package/src/Components/components/base/Avatar/Avatar.vue

@@ -0,0 +1,53 @@
+<template>
+  <div :class="classname" :style="[avatarStyle]">
+    <TKImage v-if="avatarSrc" :fit="fit" :width="width" :height="height" :src="avatarSrc" @error="handleError" />
+    <slot v-else />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { computed, ref, watch } from '../../../../adapter-vue';
+import TKImage from '../TKImage/TKImage.vue';
+import { classNames } from '../util';
+import { AvatarProps } from './Avatar';
+import { PREFIX } from '../constants/index';
+
+const props = defineProps(AvatarProps);
+
+const avatarSrc = ref('');
+
+watch(() => props.src, () => {
+  avatarSrc.value = props.src;
+}, {
+  immediate: true,
+});
+
+const classname = computed(() => classNames([
+  `${PREFIX}-avatar`,
+  `${PREFIX}-avatar--${props.shape}`,
+  `${PREFIX}-avatar--${props.size}`,
+  props.customClass,
+]));
+const width = computed(() => typeof props.size === 'number' ? `${props.size}px` : props.size);
+const height = computed(() => typeof props.size === 'number' ? `${props.size}px` : props.size);
+const avatarStyle = computed(() => ({ width: width.value, height: height.value }));
+
+function handleError(e) {
+  console.error(e);
+  if (props.defaultSrc) {
+    avatarSrc.value = props.defaultSrc;
+  }
+}
+</script>
+
+<style lang="scss">
+@import './style/Avatar.scss';
+</style>

package/src/Components/components/base/Avatar/style/Avatar.scss

@@ -0,0 +1,40 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+$--tk-avatar-text-color: $--tk-color-white;
+$--tk-avatar-bg-color: $--tk-text-color-disabled;
+$--tk-avatar-text-size: 14px;
+$--tk-avatar-icon-size: 18px;
+$--tk-avatar-border-radius: $--tk-border-radius-base;
+$--tk-avatar-size-large: 56px;
+$--tk-avatar-size-small: 24px;
+$--tk-avatar-size: 40px;
+
+.#{$PREFIX}-avatar {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  text-align: center;
+  overflow: hidden;
+  color: $--tk-avatar-text-color;
+  background: $--tk-avatar-bg-color;
+  width: $--tk-avatar-size;
+  height: $--tk-avatar-size;
+  font-size: $--tk-avatar-text-size;
+
+  &.#{$PREFIX}-avatar--square {
+    border-radius: $--tk-avatar-border-radius;
+  }
+  &.#{$PREFIX}-avatar--circle {
+    border-radius: $--tk-border-radius-circle;
+  }
+  .#{$PREFIX}-avatar_img {
+    width: 100%;
+    height: 100%;
+  }
+  .#{$PREFIX}-avatar_image {
+    width: 100%;
+    height: 100%;
+  }
+}

package/src/Components/components/base/Button/Button.ts

@@ -0,0 +1,60 @@
+const Size = ['small','middle','large'] as const;
+const Direction = ['row','column'] as const;
+const Shape = ['circle','round'] as const;
+
+export const ButtonProps = {
+  iconSrc: {
+    type: String,
+  },
+  iconSize: {
+    type: Number,
+  },
+  text: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+    default: false,
+  },
+  loadingColor: {
+    type: String,
+    default: '#fff',
+  },
+  loadingWidth: {
+    type: String,
+    default: '40px',
+  },
+  loadingHeight: {
+    type: String,
+    default: '40px',
+  },
+  size: {
+    type: String,
+    values: Size,
+    default: 'middle',
+  },
+  width: {
+    type: String,
+  },
+  height: {
+    type: String,
+  },
+  color: {
+    type: String,
+  },
+  direction: {
+    type: String,
+    values: Direction,
+    default: 'row',
+  },
+  shape: {
+    type: String,
+    values: Shape,
+  },
+  buttonStyle: {
+    type: Object,
+  },
+  buttonTextStyle: {
+    type: Object,
+  },
+};

package/src/Components/components/base/Button/Button.vue

@@ -0,0 +1,61 @@
+<template>
+  <div :style="[style]" :class="buttonClassName" @click="handleClick">
+    <Loading
+      v-if="loading"
+      :loadingWidth="loadingWidth"
+      :loadingHeight="loadingHeight"
+      :color="loadingColor"
+    />
+    <Icon v-if="iconSrc && !loading" :size="iconSize" :src="iconSrc"></Icon>
+    <div
+      v-if="text"
+      :style="[buttonTextStyle]"
+      :class="buttonTextClassName"
+    >
+      {{ text }}
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import Loading from '../Loading/Loading.vue';
+import Icon from '../Icon/Icon.vue';
+import { classNames, IS_PC } from '../util';
+import { ButtonProps } from './Button';
+import { PREFIX } from '../constants/index';
+
+const props = defineProps(ButtonProps);
+const buttonTextClassName = `${PREFIX}-button--content`;
+const style = computed(() => ({
+  width: props.width,
+  height: props.height,
+  backgroundColor: props.color,
+  flexDirection: props.direction,
+  cursor: IS_PC ? 'pointer' : 'auto',
+  ...props.buttonStyle,
+}));
+
+const buttonClassName = classNames([
+  `${PREFIX}-button`,
+  {[`${PREFIX}-${props.shape}`]: props.shape},
+   `${PREFIX}-button--${props.size}`
+]);
+
+const emit = defineEmits(['click']);
+const handleClick = (event) => {
+  !props.loading && emit('click', event);
+};
+</script>
+
+<style lang="scss">
+@import './style/Button.scss';
+</style>

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

@@ -0,0 +1,42 @@
+@import '../../styles/var.scss';
+@import '../../styles/common.scss';
+
+$--tk-button-size-default: $--tk-button-size-middle;
+
+.#{$PREFIX}-button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+
+  &.#{$PREFIX}-button--small {
+    height: $--tk-button-size-small;
+  }
+
+  &.#{$PREFIX}-button--middle {
+    height: $--tk-button-size-middle;
+  }
+
+  &.#{$PREFIX}-button--large {
+    height: $--tk-button-size-large;
+  }
+
+  .#{$PREFIX}-button--content {
+    color: $--tk-text-color-regular;
+    font-size: $--tk-font-size-base;
+    font-weight: $--tk-font-weight-primary;
+  }
+
+  &.#{$PREFIX}-circle {
+    &.#{$PREFIX}-button--small {
+      width: $--tk-button-size-small;
+    }
+
+    &.#{$PREFIX}-button--default {
+      width: $--tk-button-size-default;
+    }
+
+    &.#{$PREFIX}-button--large {
+      width: $--tk-button-size-large;
+    }
+  }
+}

package/src/Components/components/base/Grid/Grid.ts

@@ -0,0 +1,26 @@
+const Unit = ['%', 'vw'];
+
+export const GridProps = {
+  length: {
+    type: Number,
+    default: 0,
+  },
+  unit: {
+    type: String,
+    values: Unit,
+    default: '%',
+  },
+  enableFocus: {
+    type: Boolean,
+    default: false,
+  },
+  layout: {
+    type: Array,
+  },
+  focus: {
+    type: [String, Number],
+  },
+} as const;
+
+export const ChangeFocusEmits = ['change', 'toggle'];
+export const GridContextKey = 'GridContextKey';

package/src/Components/components/base/Grid/Grid.vue

@@ -0,0 +1,40 @@
+<template>
+  <div :style="{ height: '100%'}">
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { provide, watch, ref } from '../../../../adapter-vue';
+import { ChangeFocusEmits, GridContextKey, GridProps } from './Grid';
+
+const props = defineProps(GridProps);
+const focus = ref(props.focus);
+const layout = ref(props.layout);
+const unit = ref(props.unit);
+const emit = defineEmits(ChangeFocusEmits);
+
+function handleFocusChange(value) {
+  emit('toggle', value);
+}
+
+watch(() => props.focus, () => focus.value = props.focus);
+watch(() => props.layout, () => layout.value = props.layout);
+watch(() => props.unit, () => unit.value = props.unit);
+
+provide(GridContextKey, {
+  layout,
+  enableFocus: props.enableFocus,
+  handleFocusChange,
+  focus,
+  unit,
+});
+</script>

package/src/Components/components/base/Grid/GridItem/GridItem.vue

@@ -0,0 +1,81 @@
+<template>
+  <div
+    v-if="show"
+    :class="gridItemClassName"
+    :style="[style]"
+    @click="handleClick"
+  >
+    <slot />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script setup lang="ts">
+import { inject, computed, ref, watchEffect, watch, onUnmounted } from '../../../../../adapter-vue';
+import { GridContextKey } from '../Grid';
+import { PREFIX } from '../../constants/index';
+import { IS_PC, IS_H5, classNames, findTarget } from '../../util';
+
+const props = defineProps(['index', 'height', 'customStyle']);
+const {
+  layout,
+  enableFocus,
+  handleFocusChange,
+  focus,
+  unit,
+} = inject(GridContextKey);
+
+const colWidth = 100 / 12;
+const rowHeight = colWidth;
+const style = ref({});
+const gridItemClassName = classNames([
+  `${PREFIX}-grid-item`,
+  {
+    pc: IS_PC,
+    mobile: !IS_PC,
+    h5: IS_H5,
+  },
+]);
+
+const handleClick = () => {
+  const value = String(props.index) === String(focus.value) ? null : props.index;
+  enableFocus && handleFocusChange(value);
+};
+
+const show = computed(() => !!findTarget(layout.value, { key: 'i', value: props.index}));
+
+watchEffect(() => {
+  const target = findTarget(layout.value, { key: 'i', value: props.index});
+
+  if (!target) return;
+  
+  const { x, y, w, h, customStyle, customProps } = target;
+  style.value = {
+    width: w * colWidth + unit.value,
+    height: props.height || h * rowHeight + unit.value,
+    left: x * colWidth + unit.value,
+    top: y * rowHeight + unit.value,
+    position: 'absolute',
+    visibility: customProps?.show === false ? 'hidden' : '',
+    ...props.customStyle,
+    ...customStyle,
+  };  
+});
+
+onUnmounted(() => {
+  if (String(props.index) === String(focus.value)) {
+    enableFocus && handleFocusChange(null);
+  }
+});
+</script>
+
+<style lang="scss">
+@import './style/GridItem.scss';
+</style>

package/src/Components/components/base/Grid/GridItem/style/GridItem.scss

@@ -0,0 +1,13 @@
+@import '../../../styles/common.scss';
+@import '../../../styles/var.scss';
+
+.#{$PREFIX}-grid-item {
+  display: flex;
+  justify-content: center;
+
+  &.h5 {
+    transition-property: width,height,left,top;
+    transition-duration: 0.3s;
+    transition-timing-function: ease-in;
+  }
+}