@trtc/calls-uikit-vue2 4.1.0

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

@@ -0,0 +1,145 @@
+<template>
+  <div class="swipe">
+    <div ref="swiperContainerRef" class="swiper-sliders-container">
+      <slot />
+    </div>
+
+    <!--左右滑动控制栏 -->
+    <div v-if="showTurnPageControl" class="swipe-dots-container">
+      <span v-for="item in pageCount" :key="item" class="swipe-dots" :class="[currentIndex === item - 1 ? 'swipe-current-dots' : '']"></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, ref, watch } from '../../../../adapter-vue';
+import useSlide from './useSlide';
+import { useSwiperSliders } from './useSwiperSliders';
+
+const swiperContainerRef = ref();
+const sliders = useSwiperSliders(swiperContainerRef);
+
+// grid表示布局，2 * 2布局就是 rows * clos
+const props = defineProps<{
+  grid?: { rows?: number; cols?: number };
+}>();
+const perViewCount = computed(() => {
+  const { rows = 1, cols = 1 } = props?.grid || {};
+  return rows * cols;
+});
+const pageCount = computed(() => Math.ceil(sliders.value.length / perViewCount.value));
+const showTurnPageControl = computed(() => pageCount.value > 1);
+const { direction, currentIndex } = useSlide({ pageCount });
+
+function calcSwiperSliderPosition({
+  count,
+  width,
+  height,
+  rows,
+  cols,
+  currentIndex,
+}) {
+  const positionArr: { top: string, left: string, width: number, height: number, visible: boolean }[] = [];
+  const calcPageNumber = (index: number) => Math.floor(index / (rows * cols));
+  
+  for (let i = 0; i < count; i++) {
+    positionArr[i] = {
+      width,
+      height,
+      top: `${height * Math.floor((i - (calcPageNumber(i) * perViewCount.value)) / cols)}px`,
+      left: `${width * (Math.floor(i % cols) + ((calcPageNumber(i) - currentIndex) * rows))}px`,
+      visible: currentIndex === calcPageNumber(i),
+    }
+  }  
+
+  return positionArr;
+}
+
+function getDirectionPropertyValue(node, label) {
+  return parseFloat(node.getPropertyValue(label) || 0);
+}
+
+function updateSliderItemStyle(positionArr) {
+  sliders.value.forEach((item, index) => {
+    const { width, height, top, left, visible } = positionArr[index];
+    item.style.top = top;
+    item.style.left = left;
+    item.style.width = width+'px';
+    item.style.height = height+'px';
+    item.style.visible = visible;
+  });
+}
+
+watch([sliders, currentIndex], () => {
+  const swipoerContainerWidth = swiperContainerRef.value.clientWidth;
+  const { rows = 1, cols = 1 } = props?.grid || {};
+  const sliderItemWidth = (parseInt(swipoerContainerWidth) / cols);
+  const sliderItemStyle = getComputedStyle(sliders.value?.[0]);
+  const sliderItemHeight = getDirectionPropertyValue(sliderItemStyle, 'height');
+
+  // 因为swiplerSlider是absolute，所以父容器要计算高度，并更新
+  swiperContainerRef.value.style.height = `${rows * sliderItemHeight}px`;
+
+  // 计算每个swiplerSlider的宽高，绝对位置，保证rows * cols布局
+  const positionArr = calcSwiperSliderPosition({
+    count: sliders.value.length,
+    width: sliderItemWidth,
+    height: sliderItemHeight,
+    rows,
+    cols,
+    currentIndex: currentIndex.value,
+  });
+  updateSliderItemStyle(positionArr);
+});
+
+provide('direction', direction);
+</script>
+
+<style lang="scss" scope>
+.swipe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  flex-wrap: wrap;
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  .swiper-sliders-container {
+    position: relative;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-start;
+    width: 100%;
+    overflow-x: hidden;
+    &.swiper-sliders-container-column {
+      flex-direction: column;
+    }
+    &.swiper-sliders-container-row {
+      flex-direction: row;
+    }
+  }
+  .swipe-dots-container {
+    position: absolute;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    top: 400px;
+    .swipe-dots {
+      width: 8px;
+      height: 8px;
+      background: #000;
+      opacity: 0.15;
+      border-radius: 20px;
+      margin: 5px;
+    }
+    .swipe-current-dots {
+      width: 8px;
+      height: 8px;
+      background: #000;
+      opacity: 1;
+      border-radius: 20px;
+      margin: 5px;
+    }
+  }
+}
+</style>

package/src/Components/components/common/Swiper/SwiperSlider.vue

@@ -0,0 +1,55 @@
+<template>
+  <div class="swiper-item" name="swiper-silder">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts" setup>
+defineProps<{
+  index: number;
+}>();
+
+</script>
+
+<style scoped>
+.swiper-item {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+/* 左滑动画 */
+.slide-left-enter-active {
+  transition: all 0.3s;
+}
+.slide-left-leave-active {
+  transform: all 0.3s;
+}
+.slide-left-enter-from {
+  /* opacity: 0; */
+  transform: translateX(100%);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(0%);
+}
+
+/* 右滑动画 */
+.slide-right-enter-active {
+  transition: all 0.3s;
+
+}
+.slide-right-leave-active {
+  transition: all 0.3s;
+  /* transform: translateX(50%); */
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>

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

@@ -0,0 +1,10 @@
+// @ts-nocheck
+import Swiper from './Swiper.vue';
+import SwiperSlider from './SwiperSlider.vue';
+
+export enum Direction {
+  LEFT = 'left', // eslint-disable-line
+  RIGHT = 'right', // eslint-disable-line
+}
+
+export { Swiper, SwiperSlider };

package/src/Components/components/common/Swiper/useSlide.ts

@@ -0,0 +1,56 @@
+import { onMounted, onUnmounted, ref, watch } from '../../../../adapter-vue';
+import { Direction } from '.';
+
+export default function useSlide({ pageCount }) {
+  const startX = ref();
+  const startY = ref();
+  const currentIndex = ref(0);
+  const direction = ref<Direction>(Direction.RIGHT);
+
+  function handleTouchStart(event: any) {
+    startX.value = event.changedTouches[0].pageX;
+    startY.value = event.changedTouches[0].pageY;
+  }
+  function handleTurnPageRight() {
+    currentIndex.value = currentIndex.value + 1;
+  }
+  function handleTurnPageLeft() {
+    currentIndex.value = currentIndex.value - 1;
+  }
+  function handleTouchEnd(event: any) {
+    const moveDirection = event.changedTouches[0].pageX - startX.value;
+    if (Math.abs(moveDirection) < 5) return;
+    if (moveDirection < 0) {
+      if (currentIndex.value === pageCount.value - 1) return;
+      direction.value = Direction.LEFT;
+      handleTurnPageRight();
+    }
+    if (moveDirection > 0) {
+      if (currentIndex.value === 0) return;
+      direction.value = Direction.RIGHT;
+      handleTurnPageLeft();
+    }
+  }
+
+  watch(pageCount, () => {
+    // 当总页数只有一页时，更新当前所在页索引为第一页
+    if (pageCount.value === 1 && currentIndex.value !== 0) {
+      currentIndex.value = 0;
+    }
+  });
+
+  onMounted(() => {
+    document.addEventListener('touchstart', handleTouchStart, false);
+    document.addEventListener('touchend', handleTouchEnd, false);
+  });
+
+  onUnmounted(() => {
+    document.removeEventListener('touchstart', handleTouchStart, false);
+    document.removeEventListener('touchend', handleTouchEnd, false);
+  });
+
+  return {
+    currentIndex,
+    direction,
+  };
+}

package/src/Components/components/common/Swiper/useSwiperSliders.ts

@@ -0,0 +1,34 @@
+import { onMounted, onUpdated, ref } from '../../../../adapter-vue';
+
+function filterSwiplerSlider(els: HTMLCollection) {
+  const rs: Element[] = [];
+  for (let i = 0; i < els.length; i++) {
+    const el = els[i];
+    if (el.className.includes('swiper-item')) {
+      rs.push(el);
+    }
+  }
+  return rs;
+}
+
+export function useSwiperSliders(swiperContainerRef): any {
+  const sliders = ref<Element[]>([]);
+  const updateSliders = () => {
+    const els = swiperContainerRef.value.children;
+    const slotsList = filterSwiplerSlider(els);
+    if (sliders.value.length !== slotsList.length) {
+      sliders.value = slotsList;
+    }
+  };
+
+  onMounted(() => {
+    updateSliders();
+  });
+
+  onUpdated(() => {
+    updateSliders();
+  });
+
+  // @ts-ignore
+  return sliders;
+}

package/src/Components/components/common/SwiperWx/Swiper.vue

@@ -0,0 +1,123 @@
+<template>
+  <div class="swipe" @touchstart="handleTouchStart" @touchend="handleTouchEnd">
+    <div class="swiper-sliders-container">
+      <slot />
+    </div>
+
+    <!--左右滑动控制栏 -->
+    <div v-if="showTurnPageControl" class="swipe-dots-container">
+      <span v-for="item in pageArr" :key="item" class="swipe-dots" :class="[currentIndex === item ? 'swipe-current-dots' : '']"></span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, provide, ref, watch } from '../../../../adapter-vue';
+import { Direction } from './index';
+
+// grid表示布局，2 * 2布局就是 rows * clos
+const props = defineProps<{
+  grid?: { rows?: number; cols?: number };
+  renderStreamList: any;
+}>();
+
+const direction = ref<Direction>(Direction.RIGHT);
+const currentIndex = ref(0);
+const startX = ref();
+const startY = ref();
+
+// 每屏显示数量
+const perViewCount = computed(() => {
+  const { rows = 1, cols = 1 } = props?.grid || {};
+  return rows * cols;
+});
+
+const sliderArr = ref([]);
+const pageCount = ref(0);
+const pageArr = ref([]);
+watch(() => props.renderStreamList, () => {
+  pageCount.value = Math.ceil(props.renderStreamList.length / perViewCount.value);
+  if (pageCount.value === 1) {
+    currentIndex.value = 0;
+  }
+  let arr = [];
+  for (let i = 0; i < pageCount.value; i++) {
+    arr.push(i);
+  }
+  pageArr.value = arr;
+  sliderArr.value = Object.keys(Array.from({ length: props.renderStreamList.length })).map(item => parseInt(item));
+  console.log(props.renderStreamList, pageCount.value)
+}, {
+  immediate: true,
+})
+const showTurnPageControl = computed(() => pageCount.value > 1);
+
+// 根据当前所在页数，每页显示元素数和swiperslider列表计算需要渲染的swpierlist
+const showSliderList = computed(() => sliderArr.value.slice(currentIndex.value * perViewCount.value, currentIndex.value * perViewCount.value + perViewCount.value));
+function handleTouchStart(event: any) {
+  startX.value = event.changedTouches[0].pageX;
+  startY.value = event.changedTouches[0].pageY;
+}
+function handleTurnPageRight() {
+  currentIndex.value = currentIndex.value + 1;
+}
+function handleTurnPageLeft() {
+  currentIndex.value = currentIndex.value - 1;
+}
+function handleTouchEnd(event: any) {
+  const moveDirection = event.changedTouches[0].pageX - startX.value;
+  if (Math.abs(moveDirection) < 5) return;
+  if (moveDirection < 0) {
+    if (currentIndex.value === pageCount.value - 1) return;
+    direction.value = Direction.LEFT;
+    handleTurnPageRight();
+  }
+  if (moveDirection > 0) {
+    if (currentIndex.value === 0) return;
+    direction.value = Direction.RIGHT;
+    handleTurnPageLeft();
+  }
+}
+
+provide('showSliderList', showSliderList);
+provide('direction', direction);
+</script>
+
+<style lang="scss" scope>
+.swipe {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  flex-wrap: wrap;
+  display: flex;
+  align-items: flex-start;
+  align-content: flex-start;
+  .swiper-sliders-container {
+    position: relative;
+    width: 100%;
+  }
+  .swipe-dots-container {
+    position: absolute;
+    width: 100%;
+    display: flex;
+    justify-content: center;
+    top: 400px;
+    .swipe-dots {
+      width: 8px;
+      height: 8px;
+      background: #000;
+      opacity: 0.15;
+      border-radius: 20px;
+      margin: 5px;
+    }
+    .swipe-current-dots {
+      width: 8px;
+      height: 8px;
+      background: #000;
+      opacity: 1;
+      border-radius: 20px;
+      margin: 5px;
+    }
+  }
+}
+</style>

package/src/Components/components/common/SwiperWx/SwiperSlider.vue

@@ -0,0 +1,87 @@
+<template>
+  <div v-if="isShow" class="swiper-item" :style="{ left: left, top: top }">
+    <slot></slot>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+<script lang="ts" setup>
+import { inject, computed, ref, watch } from '../../../../adapter-vue';
+
+const props = defineProps<{
+  index: number;
+}>();
+const showSliderList = inject('showSliderList');
+const left = ref('0px');
+const top = ref('0px');
+
+watch(() => props.index, () => {
+  left.value = (props.index % 2 * 50) + '%';
+  top.value = ((props.index % 4 - 1) * 187) + 'px';
+}, { immediate: true });
+
+const isShow = computed(() => {
+  left.value = (props.index % 2 * 50) + '%';
+  switch(props.index % 4) {
+    case 0:
+    case 1:
+      top.value = '0px';
+      break;
+    case 2:
+    case 3:
+      top.value = '187px';
+      break;
+  }
+  return showSliderList.value?.includes(props.index)});
+</script>
+
+<style scoped>
+.swiper-item {
+  position: absolute;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  width: 50%;
+  height: 187px;
+}
+
+/* 左滑动画 */
+.slide-left-enter-active {
+  transition: all 0.3s;
+}
+.slide-left-leave-active {
+  transform: all 0.3s;
+}
+.slide-left-enter-from {
+  /* opacity: 0; */
+  transform: translateX(100%);
+}
+.slide-left-leave-to {
+  opacity: 0;
+  transform: translateX(0%);
+}
+
+/* 右滑动画 */
+.slide-right-enter-active {
+  transition: all 0.3s;
+
+}
+.slide-right-leave-active {
+  transition: all 0.3s;
+  /* transform: translateX(50%); */
+}
+.slide-right-enter-from {
+  opacity: 0;
+  transform: translateX(-100%);
+}
+.slide-right-leave-to {
+  opacity: 0;
+  transform: translateX(100%);
+}
+</style>

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

@@ -0,0 +1,5 @@
+// @ts-nocheck
+export enum Direction {
+  LEFT = 'left', // eslint-disable-line
+  RIGHT = 'right', // eslint-disable-line
+}

package/src/Components/components/common/SwiperWx/useSlide.ts

@@ -0,0 +1,60 @@
+import { onMounted, onUnmounted, ref, watch } from '../../../../adapter-vue';
+import { Direction } from '.';
+
+export default function useSlide({ pageCount }: { pageCount: any }) {
+  const startX = ref();
+  const startY = ref();
+  const currentIndex = ref(0);
+  const direction = ref<Direction>(Direction.RIGHT);
+
+  function handleTouchStart(event: any) {    
+    startX.value = event.changedTouches[0].pageX;
+    startY.value = event.changedTouches[0].pageY;
+  }
+  function handleTurnPageRight() {
+    currentIndex.value = currentIndex.value + 1;
+  }
+  function handleTurnPageLeft() {
+    currentIndex.value = currentIndex.value - 1;
+  }
+  function handleTouchEnd(event: any) {
+    const moveDirection = event.changedTouches[0].pageX - startX.value;
+    if (Math.abs(moveDirection) < 5) return;
+    if (moveDirection < 0) {
+      if (currentIndex.value === pageCount.value - 1) return;
+      direction.value = Direction.LEFT;
+      handleTurnPageRight();
+    }
+    if (moveDirection > 0) {
+      if (currentIndex.value === 0) return;
+      direction.value = Direction.RIGHT;
+      handleTurnPageLeft();
+    }
+  }
+
+  watch(pageCount, () => {
+    // 当总页数只有一页时，更新当前所在页索引为第一页
+    if (pageCount.value === 1 && currentIndex.value !== 0) {
+      currentIndex.value = 0;
+    }
+  });
+
+  onMounted(() => {
+    // 微信小程序环境下就不执行了
+    document?.addEventListener('touchstart', handleTouchStart, false);
+    document?.addEventListener('touchend', handleTouchEnd, false);
+  });
+
+  onUnmounted(() => {
+    // 微信小程序环境下就不执行了
+    document?.removeEventListener('touchstart', handleTouchStart, false);
+    document?.removeEventListener('touchend', handleTouchEnd, false);
+  });
+
+  return {
+    currentIndex,
+    direction,
+    handleTouchStart,
+    handleTouchEnd,
+  };
+}

package/src/Components/components/common/SwiperWx/useSwiperSliders.ts

@@ -0,0 +1,23 @@
+import { onMounted, ref, watch } from "../../../../adapter-vue";
+
+export function useSwiperSliders(props: any) {
+  const sliders = ref<Element[]>([]);
+  const updateSliders = () => {
+    const renderUserIds = props.renderStreamList.map(item => item.userId);
+
+    sliders.value = props.slider.filter((item) => renderUserIds.includes(item.userId));
+  };
+
+  onMounted(() => {
+    sliders.value = props.slider;
+  });
+
+  watch(() => props.renderStreamList, () => {
+    updateSliders();
+  }, {
+    immediate: true,
+  })
+
+  // @ts-ignore
+  return sliders;
+}

package/src/Components/components/common/TKStreamInfo/StreamInfo.ts

@@ -0,0 +1,34 @@
+export const StreamInfoProps = {
+  nickName: {
+    type: String,
+    default: '',
+  },
+  isSelf: {
+    type: Boolean,
+    default: false,
+  },
+  isMuted: {
+    type: Boolean,
+    default: false,
+  },
+  volume: {
+    type: Number,
+    default: 0,
+  },
+  showNickName: {
+    type: Boolean,
+    default: false,
+  },
+  showSwitchCameraButton: {
+    type: Boolean,
+    default: false,
+  },
+  showVirtualBackgroundButton: {
+    type: Boolean,
+    default: false,
+  },
+  showNetWorkStatus: { 
+    type: Boolean,
+    default: false,
+  }
+};