@trtc/calls-uikit-vue 4.1.0

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

@@ -0,0 +1,33 @@
+import { createVNode, render } from '../../../../adapter-vue';
+// @ts-ignore
+import PermitTipComp from './PermitTip.vue';
+
+const PermitTip: any = {};
+let instance: any = null;
+let seed = 1;
+
+export const createToast = () => {
+  const appendTo = document.body;
+  const container = document.createElement('div');
+
+  if (instance) {
+    appendTo.removeChild(instance.el);
+    render(null, container);
+  }
+
+  const vnode = createVNode(PermitTipComp, {
+    index: `permit-item-${seed++}`, // eslint-disable-line
+    destroy() {
+      render(null, container);
+    },
+  });
+  render(vnode, container);
+  appendTo.appendChild(container.firstElementChild!);
+  instance = vnode;
+};
+
+PermitTip.show = () => createToast();
+
+export {
+  PermitTip,
+};

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

@@ -0,0 +1,62 @@
+<template>
+  <div class="tip">
+    <div class="card">
+      <SystemPermitTip
+        :platform="platform"
+        :language="language"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { onMounted, onUnmounted, ref, computed } from '../../../../adapter-vue';
+import { NAME, StoreName, TUIStore, TUIGlobal } from '../../../../TUICallService';
+import { PLATFORM } from '../../../../TUICallService/const/index';
+import SystemPermitTip from './SystemPermitTip.vue';
+
+const platform = computed(() => (TUIGlobal.isMAC ? PLATFORM.MAC : PLATFORM.WIN));
+const language = ref(TUIStore.getData(StoreName.CALL, NAME.LANGUAGE));
+
+const updateLanguage = value => language.value = value;
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, {
+    [NAME.LANGUAGE]: updateLanguage,
+  }, {
+    notifyRangeWhenWatch: NAME.MYSELF,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, {
+    [NAME.LANGUAGE]: updateLanguage,
+  });
+});
+</script>
+
+<style lang='scss' scoped>
+.tips {
+  width: 100%;
+  height: 100%;
+}
+.card {
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 10%);
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  background-color: #FFF;
+  overflow: hidden;
+  color: #303133;
+  transition: .3s;
+}
+.tag {
+  position: fixed;
+  left: 0;
+  top: 0;
+  width: 320px;
+  text-align: left;
+}
+</style>

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

@@ -0,0 +1,160 @@
+<template>
+  <div v-if="showModal" class="card">
+    <div class="card-body">
+      <div class="close" @click="handleClose"><CloseIcon /></div>
+      <div class="card-wrapper">
+        <div class="title">{{ t('browser-authorization') }}</div>
+        <div class="button">{{ t(preferences) }}</div>
+        <div class="allow">{{ t(privacy) }}</div>
+        <div class="image-wrapper">
+          <img :src="permitPng" class="image" alt="system permit">
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { computed, onMounted, onUnmounted, ref, watch } from '../../../../adapter-vue';
+import { TUIGlobal, TUIStore } from '../../../../TUICallService';
+import CloseIcon from './CloseIcon.vue';
+import { useTranslate } from '../../../hooks';
+import { NAME, PLATFORM, StoreName } from '../../../../TUICallService/const';
+import {
+  MacPermitZhPng,
+  MacPermitEnPng,
+  WinPermitZhPng,
+  WinPermitEnPng,
+} from '../../../assets/desktop/permission/index';
+
+const permitPngMap = {
+  mac: {
+    'zh-cn': MacPermitZhPng,
+    en: MacPermitEnPng,
+  },
+  win: {
+    'zh-cn': WinPermitZhPng,
+    en: WinPermitEnPng,
+  },
+};
+
+const props = defineProps<{
+  platform: PLATFORM,
+  language: string,
+}>();
+
+const privacy = computed(() => props.platform === 'mac' ? 'mac-privacy' : 'win-privacy');
+const preferences = computed(() => props.platform === 'mac' ? 'mac-preferences' : 'win-preferences');
+const permitPng = ref(MacPermitZhPng);
+const showModal = ref(true);
+const t = useTranslate();
+
+const handlePermissionErrorTipChange = (data) => {
+  if (data && TUIGlobal.isPC) {
+    showModal.value = true;
+  }
+};
+const handleClose = () => {
+  showModal.value = false;
+};
+
+watch(() => props.language, () => {
+  permitPng.value = permitPngMap[props.platform][props.language];
+}, {
+  immediate: true,
+});
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, {
+    [NAME.SHOW_PERMISSION_TIP]: handlePermissionErrorTipChange,
+  }, {
+    notifyRangeWhenWatch: NAME.MYSELF,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, {
+    [NAME.SHOW_PERMISSION_TIP]: handlePermissionErrorTipChange,
+  });
+});
+</script>
+
+<style lang="scss" scoped>
+.card {
+  box-sizing: border-box;
+  border-radius: 4px;
+  border: 1px solid #EBEEF5;
+  background-color: #FFF;
+  overflow: hidden;
+  color: #303133;
+  transition: .3s;
+  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 10%);
+  .card-body {
+    padding: 20px;
+  }
+}
+.card-wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  width: 500px;
+  position: relative;
+  .button {
+    box-sizing: border-box;
+    background-color: #104ef5;
+    color: #fff;
+    font-size: 12px;
+    height: 37px;
+    border-radius: 4px;
+    padding: 10px;
+  }
+  .image-wrapper {
+    box-sizing: border-box;
+  }
+}
+
+.title {
+  padding: 10px 0;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 22px;
+}
+
+.desc {
+  font-size: 12px;
+  margin-bottom: 10px;
+}
+
+.button {
+  background-color: #104EF5;
+  color: #fff;
+  font-size: 12px;
+  height: 37px;
+  border-radius: 4px;
+  padding: 10px;
+}
+
+.allow {
+  font-size: 12px;
+  color: #666;
+  padding: 10px 0 20px 0;
+}
+
+.image {
+  width: 100%;
+  border-radius: 10px;
+}
+
+.close {
+  position: absolute;
+  z-index: 999;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 20px;
+  right: 20px;
+  cursor: pointer;
+  width: 20px;
+  height: 20px;
+}
+</style>

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

@@ -0,0 +1,18 @@
+export const PlayerProps = {
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  domId: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+  },
+  showStreamInfo: {
+    type: Boolean,
+  },
+  showAudioStream: {
+    type: Boolean,
+  },
+};

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

@@ -0,0 +1,59 @@
+<template>
+  <div v-show="show" :id="domId" class="player-container">
+    <div v-show="showAudioStream" class="audio-stream-container">
+      <slot name="audio-stream" />
+    </div>
+    <slot name="loading" />
+    <div :class="streamInfoContainerClassName">
+      <slot name="stream-info" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+
+<script lang="ts" setup>
+import { TUIGlobal } from '../../../../TUICallService';
+import { classNames } from '../../base/util';
+import { PlayerProps } from './Player';
+
+defineProps(PlayerProps);
+
+const streamInfoContainerClassName = classNames([
+  'stream-info-container',
+  { mobile: !TUIGlobal.isPC },
+]);
+</script>
+
+<style lang="scss" scoped>
+.player-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #4c515a;
+
+  .audio-stream-container {
+    position: absolute;
+    z-index: 1;
+    width: 100%;
+    height: 100%;
+  }
+
+  .stream-info-container {
+    position: absolute;
+    bottom: 0;
+    z-index: 10;
+    width: 100%;
+
+    &.mobile {
+      margin-bottom: 8px;
+    }
+  }
+}
+</style>

package/src/Components/components/common/Player/WeChatPlayer/WeChatPlayer.vue

@@ -0,0 +1,101 @@
+<template>
+  <div :class="remoteClass" v-show="item.isVideoAvailable">
+    <TRTCPlayer
+      :id="playRegionDomId"
+      ref="player"
+      :stream-id="playRegionDomId"
+      class="stream"
+    />
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true,
+  },
+};
+</script>
+
+<script lang="ts" setup>
+import { onMounted, ref, onUnmounted, computed, watch } from '../../../../../adapter-vue';
+import { TUICallKitAPI, StoreName, NAME, TUIStore, AudioPlayBackDevice } from '../../../../../TUICallService/index';
+import TRTCPlayer from '@tencentcloud/trtc-component-uniapp/src/components/TRTCPlayer.vue';
+
+const player = ref();
+
+const playerList = ref(TUIStore.getData(StoreName.CALL, NAME.PLAYER));
+const remoteUserInfoList = ref(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
+const callStatus = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
+const soundMode = ref(TUIStore.getData(StoreName.CALL, NAME.IS_EAR_PHONE) ? AudioPlayBackDevice.EAR : AudioPlayBackDevice.SPEAKER);
+const props = defineProps({
+  remoteClass: {
+    type: String,
+    required: true,
+  },
+  domId: {
+    type: String,
+  },
+});
+
+const handlePlayerListChange = (value) => {
+  playerList.value = JSON.parse(JSON.stringify(value));
+};
+
+const handleRemoteUserInfoListChange = (value) => {
+  remoteUserInfoList.value = JSON.parse(JSON.stringify(value));
+};
+
+
+const item = computed(() => remoteUserInfoList.value?.find((remoteUser) => remoteUser?.userId === props.domId));
+
+const playRegionDomId = computed(() => `${item.value.userId}_0`);
+
+const handleCallStatusChange = (value) => {
+  callStatus.value = value;
+};
+
+const handEarPhoneChange = (value) => {
+  soundMode.value = value ? AudioPlayBackDevice.EAR : AudioPlayBackDevice.SPEAKER;
+};
+
+const watchOptions = {
+  [NAME.PLAYER]: handlePlayerListChange,
+  [NAME.REMOTE_USER_INFO_LIST]: handleRemoteUserInfoListChange,
+  [NAME.CALL_STATUS]: handleCallStatusChange,
+  [NAME.IS_EAR_PHONE]: handEarPhoneChange,
+};
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, watchOptions, { notifyRangeWhenWatch: NAME.MYSELF });
+  watch(() => props.domId, async(val) => {
+    if(val) {
+      await player.value.setTRTCStreamId(playRegionDomId.value);
+    }
+  }, {
+    immediate: true
+  })
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, watchOptions);
+});
+
+function playerStateChange(e: any) {
+  TUICallKitAPI._tuiCallEngine._playerStateChange(e);
+}
+
+function playerFullscreenChange(e: any) {
+  // TUICallKitAPI._tuiCallEngine._playNetStatus(e);
+}
+
+function playNetStatus(e: any) {
+  TUICallKitAPI._tuiCallEngine._playNetStatus(e);
+}
+
+function playerAudioVolumeNotify(e: any) {
+  TUICallKitAPI._tuiCallEngine._playerAudioVolumeNotify(e);
+}
+</script>
+
+<style lang="scss" src="./style/index.scss" scoped></style>

package/src/Components/components/common/Player/WeChatPlayer/style/index.scss

@@ -0,0 +1,38 @@
+.stream {
+  width: 100%;
+  height: 100%;
+}
+
+.small-view {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  background-color: black;
+  z-index: 9;
+
+  .stream-box {
+    width: 100%;
+    height: 100%;
+
+    .stream {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}
+
+.large-view {
+  width: 100%;
+  height: 100%;
+  background-color: black;
+
+  .stream-box {
+    width: 100%;
+    height: 100%;
+
+    .stream {
+      width: 100%;
+      height: 100%;
+    }
+  }
+}

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

@@ -0,0 +1,85 @@
+<template>
+  <div
+    v-if="isShow"
+    class="popover-container"
+    :style="popoverStyle"
+  >
+    <div class="body">
+      <slot></slot>
+    </div>
+    <div class="triangle"></div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch } from '../../../../adapter-vue';
+
+const PopoverWidth = 180;
+
+interface TBoundingClientRect {
+  top?: number;
+  left?: number;
+  width?: number;
+  height?: number;
+}
+
+const props = defineProps<{
+  showPopover: boolean,
+  targetBoundingClientRect: TBoundingClientRect,
+  width?: number;
+}>();
+
+const isShow = ref(false);
+const popoverStyle = ref();
+
+watch(
+  () => props.showPopover,
+  () => {
+    isShow.value = props.showPopover;
+  },
+);
+watch(
+  () => props.targetBoundingClientRect,
+  () => {
+    const { width, height } = props.targetBoundingClientRect;
+    popoverStyle.value = {
+      left: `${( width / 2 - PopoverWidth / 2 )}px`,
+      bottom: `${( height + 10 )}px`,
+    };
+  },
+);
+</script>
+
+<style lang="scss" scoped>
+.popover-container {
+  position: absolute;
+  width: 180px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  .body {
+    display: flex;
+    overflow: hidden;
+    flex-direction: column;
+    align-items: flex-start;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+    border-radius: 10px;
+    background-color: #6b758a82;
+    text-overflow: ellipsis;
+    backdrop-filter: blur(20px);
+    color: #fff;
+    z-index: 10;
+  }
+  .triangle {
+    width: 6px;
+    height: 6px;
+    background-color: #6b758a82;
+    backdrop-filter: blur(20px);
+    transform: rotate(45deg);
+    margin-top: -3px;
+  }
+}
+</style>

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

@@ -0,0 +1,18 @@
+export const PusherProps = {
+  show: {
+    type: Boolean,
+    default: true,
+  },
+  domId: {
+    type: String,
+  },
+  loading: {
+    type: Boolean,
+  },
+  showStreamInfo: {
+    type: Boolean,
+  },
+  showAudioStream: {
+    type: Boolean,
+  },
+};

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

@@ -0,0 +1,78 @@
+<template>
+  <div v-show="show" :id="domId" class="pusher-container">
+    <div v-show="showAudioStream" class="audio-stream-container">
+      <slot name="audio-stream" />
+    </div>
+    <slot name="loading" />
+    <div :class="streamInfoContainerClassName">
+      <slot name="stream-info" />
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+export default {
+  options: {
+    virtualHost: true
+  }
+}
+</script>
+<script lang="ts" setup>
+import { onMounted, ref, onUnmounted } from '../../../../adapter-vue';
+import { StoreName, NAME, TUIStore } from '../../../../TUICallService/index';
+import { TUIGlobal } from '../../../../TUICallService';
+import { classNames } from '../../base/util';
+import { PusherProps } from './Pusher';
+
+const pusherId = ref(TUIStore.getData(StoreName.CALL, NAME.PUSHER_ID));
+
+const props = defineProps(PusherProps);
+
+const streamInfoContainerClassName = classNames([
+  'stream-info-container',
+  { mobile: !TUIGlobal.isPC },
+]);
+
+const handleReloadPusher =(value) =>{
+  pusherId.value = value;
+};
+
+const watchOptions = {
+  [NAME.PUSHER_ID]: handleReloadPusher,
+};
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, watchOptions, { notifyRangeWhenWatch: NAME.MYSELF });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, watchOptions);
+});
+</script>
+
+<style lang="scss" scoped>
+.pusher-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #4c515a;
+
+  .audio-stream-container {
+    position: absolute;
+    z-index: 3;
+    width: 100%;
+    height: 100%;
+  }
+
+  .stream-info-container {
+    position: absolute;
+    bottom: 0;
+    z-index: 3;
+    width: 100%;
+
+    &.mobile {
+      margin-bottom: 8px;
+    }
+  }
+}
+</style>