@trtc/calls-uikit-vue2 4.1.0

package/src/Components/components/SingleCall/PusherPlayer/wechat/Pusher.vue

@@ -0,0 +1,113 @@
+<template>
+  <div @click="toggleViewSize">
+    <live-pusher
+      :class="screen ? 'pusher-box' : 'player-container'"
+      :url="pusher.url"
+      :mode="pusher.mode"
+      :autopush="true"
+      :enable-camera="pusher.enableCamera"
+      :enable-mic="true"
+      :muted="!pusher.enableMic"
+      :enable-agc="true"
+      :enable-ans="true"
+      :enable-ear-monitor="pusher.enableEarMonitor"
+      auto-focus="false"
+      :zoom="pusher.enableZoom"
+      :min-bitrate="pusher.minBitrate"
+      :max-bitrate="pusher.maxBitrate"
+      :video-width="pusher.videoWidth"
+      :video-height="pusher.videoHeight"
+      :beauty="pusher.beautyLevel"
+      :whiteness="pusher.whitenessLevel"
+      :orientation="pusher.videoOrientation"
+      :aspect="pusher.videoAspect"
+      :device-position="pusher.frontCamera"
+      :remote-mirror="pusher.enableRemoteMirror"
+      :local-mirror="pusher.localMirror"
+      :background-mute="pusher.enableBackgroundMute"
+      :audio-quality="pusher.audioQuality"
+      :audio-volume-type="pusher.audioVolumeType"
+      :audio-reverb-type="pusher.audioReverbType"
+      :waiting-img="pusher.waitingImage"
+      :beauty-style="pusher.beautyStyle"
+      :filter="pusher.filter"
+      @statechange="pusherStateChangeHandler"
+      @netstatus="pusherNetStatus"
+      @error="pusherErrorHandler"
+      @audiovolumenotify="pusherAudioVolumeNotify"
+    ></live-pusher>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TUICallKitAPI, StoreName, NAME, TUIStore, CallStatus } from '../../../../../TUICallService/index';
+import { onMounted, ref, onUnmounted } from '../../../../../adapter-vue';
+const pusher = ref(TUIStore.getData(StoreName.CALL, NAME.PUSHER));
+const callStatus = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
+const props = defineProps({
+  screen: {
+    type: Boolean,
+    required: true,
+  },
+});
+const emit = defineEmits(['toggleViewSize']);
+
+function toggleViewSize() {
+  if (callStatus.value !== CallStatus.CONNECTED || props.screen) return;
+  emit('toggleViewSize');
+}
+
+const handlePusherChange = (value) => {
+  pusher.value = Object.assign({}, pusher.value, value);
+};
+
+const handleCallStatusChange = (value) => {
+  callStatus.value = value;
+};
+
+const watchOptions = {
+  [NAME.PUSHER]: handlePusherChange,
+  [NAME.CALL_STATUS]: handleCallStatusChange,
+};
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, watchOptions, { notifyRangeWhenWatch: NAME.MYSELF });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, watchOptions);
+});
+
+function pusherStateChangeHandler(e: any) {
+  TUICallKitAPI._tuiCallEngine._pusherStateChangeHandler(e);
+}
+
+function pusherNetStatus(e: any) {
+  TUICallKitAPI._tuiCallEngine._pusherNetStatus(e);
+}
+
+function pusherErrorHandler(e: any) {
+  TUICallKitAPI._tuiCallEngine._pusherNetStatus(e);
+}
+
+function pusherAudioVolumeNotify(e: any) {
+  TUICallKitAPI._tuiCallEngine._pusherAudioVolumeNotify(e);
+}
+</script>
+
+<style>
+.pusher-box {
+  width: 100vw;
+  height: 100vh;
+  z-index: -1;
+}
+
+.player-container {
+  position: fixed;
+  top: 60px;
+  right: 40px;
+  z-index: 999;
+  width: 140px;
+  height: 200px;
+}
+</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;
+  }
+}

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

@@ -0,0 +1,9 @@
+export const IconProps = {
+  src: {
+    type: String
+  },
+  size: {
+    type: Number,
+    default: 20,
+  },
+};

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

@@ -0,0 +1,21 @@
+<template>
+  <TKImage :src="src" :width="width" :height="height"></TKImage>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script setup lang="ts">
+import { computed } from '../../../../adapter-vue';
+import { IconProps } from './Icon';
+import TKImage from '../TKImage/TKImage.vue';
+
+const props = defineProps(IconProps);
+const width = computed(() => `${props.size}px`);
+const height = computed(() => `${props.size}px`);
+</script>

package/src/Components/components/base/Layout/Col/Col.ts

@@ -0,0 +1,23 @@
+const ColJustify = ['start', 'center', 'end', 'space-around', 'space-between', 'space-evenly'] as const;
+const ColAlign = ['top', 'middle', 'bottom'] as const;
+
+export const colProps = {
+  span: {
+    type: Number,
+    default: 24,
+  },
+  justify: {
+    type: String,
+    values: ColJustify,
+    default: 'start',
+  },
+  align: {
+    type: String,
+    values: ColAlign,
+    default: 'middle',
+  },
+  offset: {
+    type: Number,
+    default: 0,
+  },
+};