@tencentcloud/roomkit-electron-vue3 2.6.0 → 2.6.2

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-translate/index.vue

@@ -0,0 +1,124 @@
+<template>
+  <div
+    v-if="translationVisible"
+    ref="translationWrapperRef"
+    :class="{
+      'message-translation': true,
+      'reverse': props.message.flow === 'out',
+      'error': hasTranslationError,
+    }"
+  >
+    <TranslationContent
+      :message="props.message"
+      :translationContentVisible="translationVisible"
+      :translationWrapperRef="translationWrapperRef"
+      :isSingleTranslation="isSingleTranslation"
+      @toggleErrorStatus="toggleErrorStatus"
+    />
+    <div class="copyright">
+      <Icon
+        :file="checkIcon"
+        size="13px"
+      />
+      <div class="copyright-text">
+        {{ TUITranslateService.t('TUIChat.由IM提供翻译支持') }}
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, onMounted, onUnmounted } from '../../../../../adapter-vue';
+import {
+  TUIStore,
+  StoreName,
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import Icon from '../../../../common/Icon.vue';
+import TranslationContent from './translation-content.vue';
+import checkIcon from '../../../../../assets/icon/check-sm.svg';
+import { ITranslateInfo } from '../../../../../interface';
+
+interface IProps {
+  message: IMessageModel;
+}
+
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const translationVisible = ref<boolean>(false);
+const hasTranslationError = ref<boolean>(false);
+
+const translationWrapperRef = ref<HTMLDivElement>();
+
+let isSingleTranslation = true;
+
+onMounted(() => {
+  TUIStore.watch(StoreName.CHAT, {
+    translateTextInfo: onMessageTranslationUpdated,
+  });
+});
+
+onUnmounted(() => {
+  TUIStore.unwatch(StoreName.CHAT, {
+    translateTextInfo: onMessageTranslationUpdated,
+  });
+});
+
+function toggleErrorStatus(hasError: boolean) {
+  hasTranslationError.value = hasError;
+}
+
+function onMessageTranslationUpdated(info: Map<string, ITranslateInfo[]>) {
+  if (info === undefined) return;
+  isSingleTranslation = false;
+  const translationInfoList = info.get(props.message.conversationID) || [];
+  for (let i = 0; i < translationInfoList.length; ++i) {
+    const { messageID, visible } = translationInfoList[i];
+    if (messageID === props.message.ID && visible !== undefined) {
+      if (translationInfoList.length === 1 && visible) {
+        isSingleTranslation = true;
+      }
+      hasTranslationError.value = false;
+      translationVisible.value = visible;
+      break;
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.message-translation {
+  margin-top: 4px;
+  margin-left: 44px;
+  padding: 10px;
+  background-color: #f2f7ff;
+  border-radius: 10px;
+  display: flex;
+  flex-direction: column !important;
+  transition: background-color 0.15s ease-out;
+
+  &.error {
+    background-color: #ffdfdf;
+  }
+
+  .copyright {
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+
+    .copyright-text {
+      margin-left: 2px;
+      font-size: 12px;
+      color: #999;
+    }
+  }
+}
+
+.message-translation.reverse {
+  margin-right: 44px;
+  margin-left: auto;
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-translate/translation-content.vue

@@ -0,0 +1,166 @@
+<template>
+  <div
+    class="message-translation-container"
+    :style="{
+      height: calculateHeight > 0 ? `${calculateHeight}px` : 'auto',
+      width: calculateWidth > 0 ? `${calculateWidth}px` : 'auto',
+    }"
+  >
+    <div
+      v-if="translationFinished"
+      ref="translationContentRef"
+      :class="{
+        'translation-content': true,
+        'occur': calculateHeight > 0,
+      }"
+    >
+      <template
+        v-if="translationTextList.length > 0"
+      >
+        <span
+          v-for="(text, index) in translationTextList"
+          :key="index"
+        >
+          <img
+            v-if="text.type === 'face'"
+            class="text-face"
+            :src="text.value"
+          >
+          <span
+            v-else
+            class="text-plain"
+          >{{ text.value }}</span>
+        </span>
+      </template>
+      <template v-else>
+        {{ translationErrorText }}
+      </template>
+    </div>
+    <div
+      ref="translationLoadingRef"
+      :class="{
+        'loading': true,
+        'loading-end': translationFinished
+      }"
+    >
+      {{ TUITranslateService.t('TUIChat.翻译中') }}...
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, nextTick } from '../../../../../adapter-vue';
+import {
+  IMessageModel,
+  TUITranslateService,
+} from '@tencentcloud/chat-uikit-engine';
+import { getBoundingClientRectSync } from '@tencentcloud/universal-api';
+import { TranslationTextType, translator } from '../../../utils/translation';
+
+interface IProps {
+  message: IMessageModel;
+  translationContentVisible: boolean;
+  isSingleTranslation: boolean;
+  translationWrapperRef: HTMLDivElement | undefined;
+}
+
+interface IEmits {
+  (e: 'toggleErrorStatus', status: boolean): void;
+}
+
+const emits = defineEmits<IEmits>();
+const props = withDefaults(defineProps<IProps>(), {
+  message: () => ({} as IMessageModel),
+});
+
+const translationFinished = ref<boolean>(false);
+const translationErrorText = ref<string>('');
+const translationTextList = ref<TranslationTextType[]>([]);
+const calculateHeight = ref<number>(0);
+const calculateWidth = ref<number>(0);
+
+const translationLoadingRef = ref<HTMLDivElement>();
+const translationContentRef = ref<HTMLDivElement>();
+
+watch(() => props.translationContentVisible, (newVal: boolean) => {
+  if (newVal) {
+    translator.get(props.message)
+      .then((result) => {
+        translationFinished.value = true;
+        translationTextList.value = result;
+
+        nextTick(() => {
+          const { height: originHeight, width: originWidth } = getBoundingClientRectSync(translationLoadingRef.value!);
+          const { height, width } = getBoundingClientRectSync(translationContentRef.value!);
+          calculateHeight.value = originHeight;
+          calculateWidth.value = originWidth;
+          requestAnimationFrame(() => {
+            calculateHeight.value = height;
+            calculateWidth.value = width;
+            if (props.isSingleTranslation) {
+              nextTick(() => {
+                const { bottom } = getBoundingClientRectSync(props.translationWrapperRef);
+                const { bottom: bottomWindow } = getBoundingClientRectSync('#messageScrollList');
+                if (bottom > bottomWindow) {
+                  const timer = setTimeout(() => {
+                    props.translationWrapperRef!.scrollIntoView({ block: 'end', behavior: 'smooth' });
+                    clearTimeout(timer);
+                  }, 150);
+                }
+              });
+            }
+          });
+        });
+      })
+      .catch((err) => {
+        translationFinished.value = true;
+        const { height: originHeight } = getBoundingClientRectSync(translationLoadingRef.value!);
+        calculateHeight.value = originHeight;
+        translationTextList.value = [];
+        emits('toggleErrorStatus', true);
+        translationErrorText.value = err.message;
+      });
+  }
+}, { immediate: true });
+</script>
+
+<style lang="scss" scoped>
+.message-translation-container {
+  min-height: 16px;
+  min-width: 80px;
+  position: relative;
+  transition: width 0.15s ease-out, height 0.15s ease-out, ;
+  font-size: 14px;
+
+  .loading {
+    position: absolute;
+    top: 0;
+    left: 0;
+    opacity: 1;
+    transition: opacity 0.3s ease-out;
+
+    &.loading-end {
+      opacity: 0;
+    }
+  }
+
+  .translation-content {
+    opacity: 0;
+
+    &.occur {
+      animation: occur 0.3s ease-out 0.45s forwards;
+
+      @keyframes occur {
+        100% {
+          opacity: 1;
+        }
+      }
+    }
+
+    .text-face {
+      width: 20px;
+      height: 20px;
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/Chat/ChatKit/components/TUIChat/message-list/message-elements/message-video.vue

@@ -0,0 +1,312 @@
+<template>
+  <div class="message-video">
+    <div
+      ref="skeleton"
+      class="message-video-box"
+      :class="[
+        (!props.messageItem.progress || props.messageItem.progress === 1)
+          && !isPC
+          && 'message-video-cover',
+      ]"
+      @click="toggleVideoPreviewer"
+    >
+      <img
+        v-if="(props.messageItem.progress > 0 && props.messageItem.progress < 1 && poster) ||
+          (!isPC && poster)
+        "
+        class="message-img"
+        :class="[isWidth ? 'is-width' : 'is-height']"
+        :src="poster"
+      >
+      <video
+        v-else-if="!isPC"
+        ref="videoRef"
+        class="message-img video-h5-uploading"
+        :src="props.content.url + '#t=0.1'"
+        :poster="props.content.url"
+        preload="auto"
+        muted
+      />
+      <video
+        v-else
+        ref="videoRef"
+        class="message-img video-web"
+        :src="props.content.url"
+        controls
+        preload="metadata"
+        :poster="poster"
+      />
+    </div>
+    <div
+      v-if="isShow && !isPC"
+      class="dialog-video"
+    >
+      <div
+        class="dialog-video-close"
+        @click.stop="toggleVideoPreviewer"
+      >
+        <Icon :file="closeSVG" />
+      </div>
+      <div
+        class="dialog-video-box"
+        :class="[!isPC ? 'dialog-video-h5' : '']"
+        @click.self="toggleVideoPreviewer"
+      >
+        <video
+          :class="[isWidth ? 'is-width' : 'is-height']"
+          :src="props.content.url"
+          controls
+          autoplay
+        />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import {
+  ref,
+  watch,
+  computed,
+  nextTick,
+  watchEffect,
+  withDefaults,
+} from '../../../../adapter-vue';
+import { IMessageModel } from '@tencentcloud/chat-uikit-engine';
+import { handleSkeletonSize } from '../../utils/utils';
+import Icon from '../../../common/Icon.vue';
+import closeSVG from '../../../../assets/icon/icon-close.svg';
+import type { IVideoMessageContent } from '../../../../interface';
+import { isPC } from '../../../../utils/env';
+
+const props = withDefaults(
+  defineProps<{
+    content: IVideoMessageContent;
+    messageItem: IMessageModel;
+  }>(),
+  {
+    content: () => ({} as IVideoMessageContent),
+    messageItem: () => ({} as IMessageModel),
+  },
+);
+
+const emits = defineEmits(['uploading']);
+const isShow = ref(false);
+const poster = ref('');
+const posterWidth = ref(0);
+const posterHeight = ref(0);
+const skeleton = ref();
+const videoRef = ref();
+const transparentPosterUrl = 'https://web.sdk.qcloud.com/im/assets/images/transparent.png';
+
+watchEffect(async () => {
+  if (!props.content) return;
+  poster.value = await handlePosterUrl(props.content, props.messageItem);
+  nextTick(async () => {
+    const containerWidth
+      = document.getElementById('messageScrollList')?.clientWidth || 0;
+    const max = !isPC ? Math.min(containerWidth - 172, 300) : 300;
+    let size;
+    if (props.messageItem.status === 'success') {
+      let { snapshotWidth = 0, snapshotHeight = 0 } = props.content;
+      const { snapshotUrl } = props.content;
+      if (snapshotWidth === 0 || snapshotHeight === 0) return;
+      if (snapshotUrl === transparentPosterUrl) {
+        snapshotWidth = posterWidth.value;
+        snapshotHeight = posterHeight.value;
+      }
+      size = handleSkeletonSize(snapshotWidth, snapshotHeight, max, max);
+      skeleton?.value?.style
+      && (skeleton.value.style.width = `${size.width}px`);
+      skeleton?.value?.style
+      && (skeleton.value.style.height = `${size.height}px`);
+      if (isPC) {
+        videoRef?.value?.style && (videoRef.value.style.width = `${size.width}px`);
+        videoRef?.value?.style && (videoRef.value.style.height = `${size.height}px`);
+      }
+    } else {
+      emits('uploading');
+    }
+  });
+});
+
+const isWidth = computed(() => {
+  const { snapshotWidth = 0, snapshotHeight = 0 } = props.messageItem.payload;
+  return snapshotWidth >= snapshotHeight;
+});
+
+watch(() => props.messageItem.status, (newVal: string, oldVal: string) => {
+  if (newVal === 'success' && oldVal !== 'success') {
+    emits('uploading');
+  }
+});
+
+function toggleVideoPreviewer() {
+  // Video upload process does not support full-screen playback.
+  if (props.messageItem.progress > 0 && props.messageItem.progress < 1) {
+    return;
+  }
+  isShow.value = !isShow.value;
+}
+
+// For H5, some browsers (Safari/WeChat) have an issue where the cover image of the<video>` tag is empty before the video is fully uploaded.
+//  A separate processing and clipping method is required to display the cover image before the video upload is complete.
+function getVideoBase64(url: string) {
+  return new Promise((resolve) => {
+    let dataURL = '';
+    const video = document.createElement('video');
+    video.setAttribute('crossOrigin', 'anonymous');
+    video.setAttribute('src', url);
+    video.setAttribute('preload', 'auto');
+    video.addEventListener(
+      'loadeddata',
+      function () {
+        const canvas = document.createElement('canvas'),
+          width = video.videoWidth,
+          height = video.videoHeight;
+        canvas.width = width;
+        canvas.height = height;
+        (canvas as any).getContext('2d').drawImage(video, 0, 0, width, height);
+        dataURL = canvas.toDataURL('image/jpeg');
+        posterWidth.value = width;
+        posterHeight.value = height;
+        resolve(dataURL);
+      },
+      { once: true },
+    );
+  });
+}
+
+async function handlePosterUrl(messgeContent: IVideoMessageContent, messageItem: IMessageModel) {
+  if (!messageItem) return '';
+  if (messageItem.status !== 'success') {
+    return await getVideoBase64(messgeContent.url);
+  } else {
+    return (
+      (messgeContent.snapshotUrl !== transparentPosterUrl && messgeContent.snapshotUrl)
+      || (messageItem?.payload?.snapshotUrl !== transparentPosterUrl
+      && messageItem?.payload?.snapshotUrl)
+      || (messageItem.payload?.thumbUrl !== transparentPosterUrl
+      && messageItem?.payload?.thumbUrl)
+      || (await getVideoBase64(messgeContent.url))
+    );
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+@import "../../../../assets/styles/common";
+
+.message-video {
+  position: relative;
+  display: flex;
+  justify-content: center;
+  overflow: hidden;
+
+  &-box {
+    max-width: min(calc(100vw - 180px), 300px);
+    font-size: 0;
+
+    video {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+
+    img {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+
+    img[src=""],
+    img:not([src]) {
+      opacity: 0;
+    }
+  }
+
+  &-cover {
+    display: inline-block;
+    position: relative;
+
+    &::before {
+      position: absolute;
+      z-index: 1;
+      content: "";
+      width: 0;
+      height: 0;
+      border: 10px solid transparent;
+      border-left: 15px solid #fff;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      right: 0;
+      margin: auto;
+      transform: translate(5px, 0);
+    }
+
+    video {
+      max-width: min(calc(100vw - 180px), 300px);
+      max-height: min(calc(100vw - 180px), 300px);
+      width: inherit;
+      height: inherit;
+      border-radius: 10px;
+    }
+  }
+}
+
+.dialog-video {
+  position: fixed;
+  z-index: 12;
+  width: 100vw;
+  height: 100vh;
+  top: 0;
+  left: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  &-close {
+    display: flex;
+    justify-content: flex-end;
+    background: #000;
+    width: 100%;
+    box-sizing: border-box;
+    padding: 10px;
+  }
+
+  &-box {
+    display: flex;
+    flex: 1;
+    max-height: 100%;
+    padding: 6rem;
+    box-sizing: border-box;
+    justify-content: center;
+    align-items: center;
+
+    video {
+      max-width: 100%;
+      max-height: 100%;
+    }
+  }
+}
+
+.dialog-video-h5 {
+  width: 100%;
+  height: 100%;
+  background: #000;
+  padding: 30px 0;
+}
+
+.is-width {
+  width: 100%;
+}
+
+.is-height {
+  height: 100%;
+}
+</style>