@trtc/calls-uikit-vue2 4.1.0

package/src/Components/components/SingleCall/InviteInfo/mobile/SingleAudio.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="singleInvite-message">
+    <img class="singleInvite-avatar" :src="remoteUsersList[0].avatar || defaultAvatar" :onerror="handleErrorImage" />
+    <label class="singleInvite-nick">{{ remoteUsersList[0].nick || remoteUsersList[0].userId }}</label>
+    <span v-if="callStatus === CallStatus.CALLING" class="singleInvite-tips">{{ callAlertMessage }}</span>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import defaultAvatar from '../../../../assets/mobile/default_avatar.png';
+import { CallStatus } from '../../../../../TUICallService/index';
+const props = defineProps({
+  isSponsor: {
+    type: Boolean,
+    required: true,
+  },
+  remoteUsersList: {
+    type: Array,
+    required: true,
+  },
+  callAlertMessage: {
+    type: String,
+    required: true,
+  },
+  callStatus: {
+    type: String,
+    required: true,
+  },
+});
+
+function handleErrorImage(e: any) {
+  e.target.src = defaultAvatar;
+}
+</script>
+
+<style lang="scss" scoped>
+.singleInvite-message {
+  display: flex;
+  flex-direction: column;
+  padding: 0 16px;
+  justify-content: center;
+
+  .singleInvite-nick {
+    line-height: 40px;
+    text-align: center;
+    font-size: 20px;
+    color: #333333;
+    letter-spacing: 0;
+    font-weight: 500;
+  }
+
+  .singleInvite-tips {
+    height: 20px;
+    font-size: 14px;
+    color: #97989c;
+    letter-spacing: 0;
+    font-weight: 400;
+    text-align: center;
+  }
+}
+
+.singleInvite-avatar {
+  width: 100px;
+  height: 100px;
+  border-radius: 12px;
+  margin-bottom: 12px;
+  margin: 0 auto;
+}
+</style>

package/src/Components/components/SingleCall/InviteInfo/mobile/SingleVideo.vue

@@ -0,0 +1,67 @@
+<template>
+  <div class="singleInvite-box">
+    <div class="singleInvite-message">
+      <label class="singleInvite-nick">{{ remoteUsersList[0].nick || remoteUsersList[0].userId }}</label>
+      <span class="singleInvite-tips">{{ callAlertMessage }}</span>
+    </div>
+    <img class="singleInvite-avatar" :src="remoteUsersList[0].avatar || defaultAvatar" :onerror="handleErrorImage" />
+  </div>
+</template>
+
+<script lang="ts" setup>
+import defaultAvatar from '../../../../assets/mobile/default_avatar.png';
+const props = defineProps({
+  isSponsor: {
+    type: Boolean,
+    required: true,
+  },
+  remoteUsersList: {
+    type: Array,
+    required: true,
+  },
+  callAlertMessage: {
+    type: String,
+    required: true,
+  },
+});
+
+function handleErrorImage(e: any) {
+  e.target.src = defaultAvatar;
+}
+</script>
+
+<style lang="scss" scoped>
+.singleInvite-box {
+  display: flex;
+  .singleInvite-message {
+    color: #ffffff;
+    display: flex;
+    flex-direction: column;
+    padding: 0 16px;
+    justify-content: center;
+
+    .singleInvite-nick {
+      font-size: 20px;
+      letter-spacing: 0;
+      margin: 0 auto;
+      font-weight: 600;
+      max-width: 150px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+
+    .singleInvite-tips {
+      font-size: 14px;
+      letter-spacing: 0;
+      text-align: center;
+      font-weight: 400;
+    }
+  }
+  .singleInvite-avatar {
+    width: 100px;
+    height: 100px;
+    border-radius: 12px;
+  }
+}
+</style>

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/PusherPlayer/PusherPlayer.vue

@@ -0,0 +1,215 @@
+<template>
+  <div class="streamBox">
+    <!-- 移动端 -->
+    <div v-show="callType === CallMediaType.VIDEO" v-if="isMobile" class="streamBox-mobile">
+      <!-- 本地流 -->
+      <div id="localVideo" class="localVideo" :class="localClass" @click="callStatus === CallStatus.CONNECTED ? switchUserView() : ''"></div>
+      <!-- 远端流 -->
+      <div v-if="remoteList.length !== 0" :id="remoteList[0].domId" :class="[remoteClass, 'remoteList']" @click="callStatus === CallStatus.CONNECTED ? switchUserView() : ''"></div>
+    </div>
+
+    <!-- 桌面端 -->
+    <div v-show="callType === CallMediaType.VIDEO" v-if="!isMobile" class="streamBox-deskTop">
+      <div id="localVideo" :class="localClass">
+        <span v-if="callStatus === CallStatus.CONNECTED" class="tag">
+          <div class="microphone-icon-container">
+            <MicVolume v-if="localUserInfo.isAudioAvailable" :volume="localUserInfo.volume"></MicVolume>
+            <MicVolumeClosed v-else />
+          </div>
+          {{ `${localUserInfo.nick || localUserInfo.userId} ${t('me')}` }}
+        </span>
+      </div>
+      <div v-if="remoteList.length !== 0 && callStatus === CallStatus.CONNECTED" :class="remoteClass" class="remoteList-desk">
+        <div :id="remoteList[0].domId" class="remoteListBox">
+          <span class="tag">
+            <div class="microphone-icon-container">
+              <MicVolume v-if="remoteList[0].isAudioAvailable" :volume="remoteList[0].volume"></MicVolume>
+              <MicVolumeClosed v-else />
+            </div>
+            {{ remoteList[0].nick || remoteList[0].userId }}
+          </span>
+        </div>
+      </div>
+      <div v-if="showSwitchScreen" class="switchScreen" @click="switchUserView">
+        <div class="screenImg">
+          <img :src="switchScreen" />
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, nextTick, onMounted, onUnmounted, computed } from '../../../../adapter-vue';
+import { TUIGlobal, TUIStore, StoreName, NAME, t, CallMediaType, CallStatus } from '../../../../TUICallService/index';
+import switchScreen from '../../../assets/desktop/switchScreen.svg';
+import MicVolume from '../../common/MicVolume/MicVolume.vue';
+import MicVolumeClosed from '../../common/MicVolume/MicVolumeClosed.vue';
+const callType = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE));
+const callStatus = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_STATUS));
+const localClass = ref('small');
+const remoteClass = ref('large');
+const remoteList = ref(TUIStore.getData(StoreName.CALL, NAME.REMOTE_USER_INFO_LIST));
+const localUserInfo = ref(TUIStore.getData(StoreName.CALL, NAME.LOCAL_USER_INFO));
+const isSwitchScreen = ref(false);
+const isMobile = !TUIGlobal.isPC;
+const showSwitchScreen = computed(() => {
+  return callStatus.value === CallStatus.CONNECTED
+    && remoteList.value.length !== 0
+    && callType.value === CallMediaType.VIDEO;
+  });
+
+const handleLocalUserInfoChange = (value) => {
+  localUserInfo.value = value;
+};
+const handleRemoteUserInfoListChange = (value) => {
+  remoteList.value = value;
+};
+const handleCallStatusChange = (value) => {
+  callStatus.value = value;
+};
+const handleCallMediaTypeChange = (value) => {
+  callType.value = value;
+};
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, {
+    [NAME.LOCAL_USER_INFO]: handleLocalUserInfoChange,
+    [NAME.REMOTE_USER_INFO_LIST]: handleRemoteUserInfoListChange,
+    [NAME.CALL_STATUS]: handleCallStatusChange,
+    [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
+  });
+  switchUserView();
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, {
+    [NAME.LOCAL_USER_INFO]: handleLocalUserInfoChange,
+    [NAME.REMOTE_USER_INFO_LIST]: handleRemoteUserInfoListChange,
+    [NAME.CALL_STATUS]: handleCallStatusChange,
+    [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
+  });
+});
+
+const switchUserView = async () => {
+  [localClass.value, remoteClass.value] = [remoteClass.value, localClass.value];
+  await nextTick();
+  const largeView = document.getElementsByClassName('large')[0] as HTMLElement;
+  const smallView = document.getElementsByClassName('small')[0] as HTMLElement;
+  largeView.className = 'localVideo';
+  if (!smallView) return;
+  if (!isMobile) {
+    smallView.className = 'remoteList-desk';
+  } else {
+    isSwitchScreen.value = true;
+    smallView.className = 'remoteList';
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.streamBox {
+  width: 100%;
+  height: 100%;
+}
+.streamBox-mobile {
+  position: relative;
+
+  .remoteList {
+    position: fixed;
+    top: 60px;
+    right: 40px;
+    z-index: 999;
+    width: 140px;
+    height: 200px;
+
+    .remoteListBox {
+      width: 140px;
+      height: 200px;
+    }
+  }
+
+  .localVideo {
+    width: 100vw;
+    height: 100vh;
+
+    .remoteList {
+      top: 0;
+      right: 0;
+    }
+
+    .remoteListBox {
+      width: 100vw;
+      height: 100vh;
+    }
+  }
+}
+
+.streamBox-deskTop {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  .switchScreen {
+    cursor: pointer;
+    position: absolute;
+    top: 20px;
+    left: 260px;
+    z-index: 999;
+
+    .screenImg {
+      width: 16px;
+    }
+  }
+
+  .remoteList-desk {
+    position: absolute;
+    top: 20px;
+    left: 20px;
+    width: 260px;
+    height: 180px;
+    z-index: 999;
+    background-color: black;
+    .remoteListBox {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .localVideo {
+    width: 100%;
+    height: 100%;
+    .remoteList {
+      top: 0;
+      right: 0;
+    }
+
+    .remoteListBox {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .tag {
+    color: white;
+    z-index: inherit;
+    background: rgba(0, 0, 0, 0.6);
+    padding: 2px 10px;
+    border-top-right-radius: inherit;
+    border-bottom-left-radius: inherit;
+    font-size: 14px;
+    position: absolute;
+    left: 0;
+    bottom: 0;
+    z-index: 11;
+    display: flex;
+    align-items: center;
+  }
+
+  .tag .microphone-icon-container {
+    margin-left: 0;
+    margin-right: 2px;
+    width: 20px;
+    background-color: transparent;
+  }
+}
+</style>

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

@@ -0,0 +1,53 @@
+<template>
+  <!-- 移动端 -->
+  <div v-show="callType === CallMediaType.VIDEO" class="streamBox-mobile">
+    <!-- 本地流 -->
+    <Pusher :screen="screen" @toggleViewSize="switchScreen"></Pusher>
+    <!-- 远端流 -->
+    <Player :screen="screen" @toggleViewSize="switchScreen"></Player>
+  </div>
+</template>
+  
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from '../../../../adapter-vue';
+import { TUIStore, StoreName, NAME, CallMediaType } from '../../../../TUICallService/index';
+import Pusher from './wechat/Pusher.vue';
+import Player from './wechat/Player.vue';
+const screen = ref(true);
+const callType = ref(TUIStore.getData(StoreName.CALL, NAME.CALL_MEDIA_TYPE));
+
+const handleCallMediaTypeChange = (value) => {
+  callType.value = value;
+};
+
+onMounted(function () {
+  TUIStore.watch(
+    StoreName.CALL,
+    {
+      [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
+    },
+    {
+      notifyRangeWhenWatch: NAME.MYSELF,
+    },
+  );
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, {
+    [NAME.CALL_MEDIA_TYPE]: handleCallMediaTypeChange,
+  });
+});
+
+function switchScreen() {
+  screen.value = !screen.value;
+}
+</script>
+  
+<style lang="scss" scoped>
+.streamBox-mobile {
+  width: 100vw;
+  height: 100vh;
+  position: relative;
+}
+</style>
+  

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

@@ -0,0 +1,110 @@
+<template>
+  <div>
+    <div v-for="(item, index) in playerList" :key="index" @click="toggleViewSize">
+      <live-player
+        v-if="callStatus === CallStatus.CONNECTED"
+        :class="!screen ? 'pusher-box' : 'player-container'"
+        :id="item.id"
+        :data-userid="item.userID"
+        :data-streamid="item.streamID"
+        :data-streamtype="item.streamType"
+        :src="item.src"
+        mode="RTC"
+        :autoplay="item.autoplay"
+        :mute-audio="item.muteAudio"
+        :mute-video="item.muteVideo"
+        :orientation="item.orientation"
+        :object-fit="item.objectFit"
+        :background-mute="item.enableBackgroundMute"
+        :min-cache="item.minCache"
+        :max-cache="item.maxCache"
+        :sound-mode="soundMode"
+        :enable-recv-message="item.enableRecvMessage"
+        :auto-pause-if-navigate="item.autoPauseIfNavigate"
+        :auto-pause-if-open-native="item.autoPauseIfOpenNative"
+        @statechange="playerStateChange"
+        @fullscreenchange="playerFullscreenChange"
+        @netstatus="playNetStatus"
+        @audiovolumenotify="playerAudioVolumeNotify"
+      />
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { TUICallKitAPI, StoreName, NAME, TUIStore, CallStatus, AudioPlayBackDevice } from '../../../../../TUICallService/index';
+import { onMounted, ref, onUnmounted } from '../../../../../adapter-vue';
+const playerList = ref(TUIStore.getData(StoreName.CALL, NAME.PLAYER));
+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 emit = defineEmits(['toggleViewSize']);
+const props = defineProps({
+  screen: {
+    type: Boolean,
+    required: true,
+  },
+});
+
+const handlePlayerListChange = (value) => {
+  playerList.value = Object.assign({}, playerList.value, value);
+};
+
+const handleCallStatusChange = (value) => {
+  callStatus.value = value;
+};
+
+const handEarPhoneChange = (value) => {
+  soundMode.value = value ? AudioPlayBackDevice.EAR : AudioPlayBackDevice.SPEAKER;
+};
+
+const watchOptions = {
+  [NAME.PLAYER]: handlePlayerListChange,
+  [NAME.CALL_STATUS]: handleCallStatusChange,
+  [NAME.IS_EAR_PHONE]: handEarPhoneChange,
+};
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CALL, watchOptions, { notifyRangeWhenWatch: NAME.MYSELF });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CALL, watchOptions);
+});
+
+function toggleViewSize() {
+  if (callStatus.value !== CallStatus.CONNECTED || !props.screen) return;
+  emit('toggleViewSize');
+}
+
+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 scoped>
+.pusher-box {
+  width: 100vw;
+  height: 100vh;
+}
+
+.player-container {
+  position: fixed;
+  top: 60px;
+  right: 40px;
+  z-index: 999;
+  width: 140px;
+  height: 200px;
+}
+</style>