tuikit-atomicx-vue3 0.1.0

package/src/components/LiveList/LiveListH5.vue

@@ -0,0 +1,323 @@
+<template>
+  <div class="live-list-panel-h5" v-if="loginUserInfo">
+    <div v-if="liveList.length > 0" class="live-list" @scroll="handleScroll" @wheel="handleWheel" ref="scrollContainerRef">
+      <div class="live-list-items">
+        <div class="live-item" v-for="item in liveList" :key="item.liveId" @click="liveRoomClick(item)">
+          <div class="live-room-cover">
+            <div class="header">
+              <IconLiveCoverHeader :size="10" />
+              <span class="viewer-count"> {{ item.currentViewerCount || 0 }} </span>
+              <span> {{ t('people have watched the live') }} </span>
+            </div>
+            <img :src="item.coverUrl || DEFAULT_COVER" alt="" @error="handleCoverImageError" />
+          </div>
+          <span class="live-name">{{ item.liveName }} </span>
+          <div class="owner-info">
+            <Avatar :src="item.liveOwner.avatarUrl" :size="16" />
+            <span class="owner-name">{{ item.liveOwner.userName || item.liveOwner.userId }} </span>
+          </div>
+        </div>
+      </div>
+      <div class="bottom-text-no-more" v-if="!hasMoreLive">
+        <span>{{ t('No More') }}</span>
+      </div>
+    </div>
+    <div v-else-if="!isLoadingLiveList" class="no-live">
+      <IconNoLiveRoom :size="60" />
+      <span>{{ t('No Live') }}</span>
+    </div>
+    <div class="bottom-text" v-if="liveList.length > 0 && (isShowMoreVisible || isLoadingMore)">
+      <span v-if="isShowMoreVisible">{{ t('Load More') }}</span>
+      <span v-if="isLoadingMore">{{ t('Loading...') }}</span>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import { ref, watch, computed, defineEmits, onMounted, onUnmounted } from 'vue';
+import { useUIKit, IconLiveCoverHeader, IconNoLiveRoom } from '@tencentcloud/uikit-base-component-vue3';
+import { useLiveState } from '../../states/LiveState';
+import { LiveInfo } from '../../types';
+import { useLoginState } from '../../states/LoginState';
+import { Avatar } from '../Avatar';
+
+const { liveList, hasMoreLive, isLoadingLiveList, isLoadingMore, fetchLiveList } = useLiveState();
+const { loginUserInfo } = useLoginState();
+const { t } = useUIKit();
+
+const DEFAULT_COVER = 'https://liteav-test-1252463788.cos.ap-guangzhou.myqcloud.com/voice_room/voice_room_cover1.png';
+const scrollContainerRef = ref<HTMLElement | null>(null);
+
+const liveItemWidth = ref('168px');
+const liveItemHeight = ref('262px');
+
+const shouldFetchMoreLiveList = computed(() => {
+  return hasMoreLive.value && !isLoadingMore.value && !isLoadingLiveList.value;
+});
+
+const isShowMoreVisible = computed(() => {
+  return shouldFetchMoreLiveList.value && !scrollContainerRef.value;
+});
+
+const emit = defineEmits<{
+  (e: 'live-room-click', liveInfo: LiveInfo): void;
+}>();
+
+watch(
+  loginUserInfo,
+  user => {
+    if (user && user.userId) {
+      fetchLiveList({});
+    }
+  },
+  { immediate: true }
+);
+
+watch(scrollContainerRef, () => {
+  if (scrollContainerRef.value && screen.width < screen.height) {
+    const { width } = scrollContainerRef.value.getBoundingClientRect();
+    const marginWidth = 10 * 2 + 5;
+    const newItemWidth = (width - marginWidth) / 2;
+    const newItemHeight = newItemWidth * 1.6;
+
+    liveItemWidth.value = `${newItemWidth}px`;
+    liveItemHeight.value = `${newItemHeight}px`;
+  }
+});
+
+function liveRoomClick(liveInfo: LiveInfo) {
+  console.log('liveRoomClick,liveInfo:', liveInfo);
+  emit('live-room-click', liveInfo);
+}
+
+function isScrollAtBottom(threshold = 50) {
+  if (!scrollContainerRef.value) {
+    return false;
+  }
+  return (
+    scrollContainerRef.value.scrollTop + scrollContainerRef.value.clientHeight >=
+    scrollContainerRef.value.scrollHeight - threshold
+  );
+}
+
+function handleWheel(event: WheelEvent) {
+  if (!scrollContainerRef.value) {
+    return;
+  }
+
+  if (event.deltaY > 0 && isScrollAtBottom() && shouldFetchMoreLiveList.value) {
+    fetchLiveList({ append: true });
+  }
+}
+
+function handleScroll() {
+  if (!scrollContainerRef.value) {
+    return;
+  }
+
+  if (isScrollAtBottom() && shouldFetchMoreLiveList.value) {
+    fetchLiveList({ append: true });
+  }
+}
+
+function handleCoverImageError(event: Event) {
+  const image = event.target as HTMLImageElement;
+  if (image) {
+    image.src = DEFAULT_COVER;
+  }
+}
+
+onMounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.addEventListener('scroll', handleScroll);
+  }
+});
+
+onUnmounted(() => {
+  if (scrollContainerRef.value) {
+    scrollContainerRef.value.removeEventListener('scroll', handleScroll);
+  }
+});
+
+</script>
+
+<style lang="scss" scoped>
+$text-color1: var(--text-color-primary);
+$text-color2: var(--text-color-secondary);
+
+@mixin text-size-12 {
+  font-size: 12px;
+  font-weight: 400;
+}
+
+@mixin text-size-14 {
+  font-size: 14px;
+  font-weight: 400;
+}
+
+@mixin scrollbar {
+  &::-webkit-scrollbar {
+    width: 0px;
+    display: none;
+  }
+
+  &::-webkit-scrollbar-track {
+    background: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background: var(--uikit-color-gray-3);
+    border-radius: 3px;
+    border: 2px solid transparent;
+    background-clip: padding-box;
+
+    &:hover {
+      background: var(--uikit-color-gray-3);
+    }
+  }
+}
+
+.live-list-panel-h5 {
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  align-items: center;
+  width: 100%;
+  height: 100%;
+}
+
+.live-list {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: auto;
+  align-items: center;
+  @include scrollbar;
+  scrollbar-width: none;
+}
+
+.live-list-items {
+  flex: 1;
+  width: 100%;
+  display: grid;
+  grid-template-columns: repeat(auto-fill, v-bind(liveItemWidth));
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 5px;
+}
+
+.live-item {
+  position: relative;
+  display: flex;
+  overflow: hidden;
+  flex-direction: column;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  width: v-bind(liveItemWidth);
+  height: v-bind(liveItemHeight);
+  gap: 5px;
+  border-radius: 10px;
+
+  :hover {
+    cursor: pointer;
+  }
+
+  .live-room-cover {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+  }
+
+  .header {
+    position: absolute;
+    display: flex;
+    top: 5px;
+    height: 20px;
+    margin-left: 10px;
+    gap: 2px;
+    color: $text-color1;
+    @include text-size-12;
+    align-items: center;
+  }
+
+  .live-name {
+    position: absolute;
+    bottom: 35px;
+    height: 20px;
+    max-width: 100px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    align-items: center;
+    margin-left: 10px;
+    color: $text-color1;
+    @include text-size-12;
+  }
+
+  .owner-info {
+    position: absolute;
+    bottom: 10px;
+    height: 20px;
+    display: flex;
+    align-items: center;
+    text-overflow: ellipsis;
+    margin-left: 10px;
+    gap: 4px;
+    color: $text-color2;
+    @include text-size-12;
+
+    .owner-name {
+      max-width: 80px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+}
+
+.bottom-text-no-more {
+  flex: 1;
+  min-height: 30px;
+  position: relative;
+
+  span {
+    width: 200px;
+    position: absolute;
+    bottom: 5px;
+    text-align: center;
+    transform: translate(-50%, 0);
+    color: $text-color1;
+    @include text-size-14;
+  }
+}
+
+.bottom-text {
+  margin: 8px;
+  color: $text-color1;
+  @include text-size-14;
+}
+
+.load-more-lives:hover {
+  cursor: pointer;
+}
+
+.no-live {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+
+  span {
+    color: $text-color1;
+    @include text-size-12;
+  }
+}
+</style>

package/src/components/LiveList/i18n/en-US/index.ts

@@ -0,0 +1,8 @@
+export const resource = {
+  LIVE: 'LIVE',
+  'people have watched the live': 'people have watched the live',
+  'Load More': 'Load More',
+  'Loading...': 'Loading...',
+  'No More': 'No More',
+  'No Live': 'No Live',
+};

package/src/components/LiveList/i18n/index.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/src/components/LiveList/i18n/zh-CN/index.ts

@@ -0,0 +1,8 @@
+export const resource = {
+  LIVE: 'LIVE',
+  'people have watched the live': '人看过',
+  'Load More': '加载更多',
+  'Loading...': '加载中...',
+  'No More': '没有更多',
+  'No Live': '暂无直播间',
+};

package/src/components/LiveList/index.ts

@@ -0,0 +1,12 @@
+import LiveListPC from './LiveList.vue';
+import LiveListH5 from './LiveListH5.vue';
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n/index';
+import { isMobile } from '../../utils/environment';
+
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+
+const LiveList = isMobile ? LiveListH5 : LiveListPC;
+
+export { LiveList };

package/src/components/LiveMonitorView/LiveMonitorView.vue

@@ -0,0 +1,172 @@
+<template>
+  <div ref="liveContainerRef" class="live-monitor-container">
+    <div :id="viewId" class="live-monitor-view"></div>
+    <div
+      v-for="region in regionList"
+      class="live-tag-mask"
+      :class="{ 'hide-tag': !isFullscreen }"
+      :style="styleList[region.userInfo.userId]"
+    >
+      <div class="live-id live-tag">{{ `${t('RoomId')}: ${region.liveId}` }}</div>
+      <div class="user-id live-tag">{{ `${t('UserId')}: ${region.userInfo.userId}` }}</div>
+      <div class="force-close live-tag" @click="handleForceClose">
+        <IconEndLive />
+        <span>{{ t('Force Close') }}</span>
+      </div>
+      <div :class="['toggle-audio-state', ' live-tag', { 'is-unmuted': !isMuted }]" @click="toggleMuteAudio">
+        <IconMute v-if="isMuted" />
+        <IconSpeakerPhone v-else />
+        <span>{{ isMuted ? t('Unmute Audio') : t('Mute Audio') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { defineProps, computed, ref, watch, onMounted, onUnmounted } from 'vue';
+import { useUIKit, IconEndLive, IconMute, IconSpeakerPhone } from '@tencentcloud/uikit-base-component-vue3';
+import { MonitorLiveInfo } from '../../types';
+import { useLiveMonitorState } from '../../states/LiveMonitorState';
+import { exitFullScreen } from '../../utils/utils';
+
+const { monitorLiveInfoList, closeRoom, muteLiveAudio } = useLiveMonitorState();
+const { t } = useUIKit();
+
+interface Props {
+  liveInfo: MonitorLiveInfo;
+}
+const isFullscreen = ref(false);
+const isMuted = ref(true);
+const styleList = ref<Record<string, any>>({});
+const props = defineProps<Props>();
+const liveContainerRef = ref<HTMLDivElement>();
+
+const viewId = computed(() => {
+  return `live_monitor_view_${props.liveInfo.liveId}`;
+});
+
+const regionList = computed(() => {
+  return monitorLiveInfoList.value.find(liveInfo => liveInfo.liveId === props.liveInfo.liveId)?.regionList;
+});
+
+const toggleMuteAudio = () => {
+  muteLiveAudio(props.liveInfo.liveId, !isMuted.value);
+  isMuted.value = !isMuted.value;
+};
+
+const handleForceClose = () => {
+  closeRoom(props.liveInfo.liveId);
+  if (isFullscreen.value) {
+    exitFullScreen();
+  }
+};
+
+const handleFullscreenChange = () => {
+  if (document.fullscreenElement) {
+    isFullscreen.value = true;
+  } else {
+    isFullscreen.value = false;
+    muteLiveAudio(props.liveInfo.liveId, true);
+    isMuted.value = true;
+  }
+};
+
+onMounted(() => {
+  addEventListener('fullscreenchange', handleFullscreenChange);
+});
+
+onUnmounted(() => {
+  removeEventListener('fullscreenchange', handleFullscreenChange);
+});
+
+watch(
+  regionList,
+  () => {
+    if (!liveContainerRef.value) return;
+    const containerWidth = liveContainerRef.value.clientWidth;
+    const containerHeight = liveContainerRef.value.clientHeight;
+    const isSingleStream = regionList.value?.length === 1;
+    regionList.value?.forEach(region => {
+      styleList.value[region.userInfo.userId] = {
+        left: `${region.rect.x * containerWidth}px`,
+        top: `${region.rect.y * containerHeight}px`,
+        width: `${isSingleStream ? '100%' : region.rect.w * containerWidth + 'px'}`,
+        height: `${isSingleStream ? '100%' : region.rect.h * containerHeight + 'px'}`,
+      };
+    });
+  },
+  { immediate: true }
+);
+</script>
+
+<style lang="scss" scoped>
+.live-monitor-container {
+  position: relative;
+  height: 100%;
+  aspect-ratio: 9 / 16;
+
+  .live-monitor-view {
+    width: 100%;
+    height: 100%;
+  }
+
+  .live-tag-mask {
+    position: absolute;
+
+    .live-tag {
+      position: absolute;
+      top: 10px;
+      left: 10px;
+      color: #ffece5;
+      font-size: 12px;
+      font-weight: 500;
+      background-color: #e57849;
+      padding: 4px;
+      border-radius: 4px;
+    }
+
+    .user-id {
+      top: 44px;
+    }
+
+    .force-close,
+    .toggle-audio-state {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 150px;
+      left: unset;
+      top: unset;
+      right: 10px;
+      font-weight: 500;
+      font-size: 14px;
+      cursor: pointer;
+
+      span {
+        margin-left: 4px;
+      }
+    }
+
+    .force-close {
+      background-color: #e54545;
+      color: #ffe7e5;
+      bottom: 10px;
+    }
+
+    .toggle-audio-state {
+      background-color: #e54545;
+      color: #ffe7e5;
+      bottom: 50px;
+    }
+
+    .is-unmuted {
+      background-color: #0abf77;
+      color: #e6ffe5;
+    }
+  }
+
+  .hide-tag {
+    display: none;
+  }
+}
+</style>

package/src/components/LiveMonitorView/i18n/en-US/index.ts

@@ -0,0 +1,7 @@
+export const resource = {
+  RoomId: 'RoomId',
+  UserId: 'UserId',
+  'Force Close': 'Force Close',
+  'Unmute Audio': 'Unmute Audio',
+  'Mute Audio': 'Mute Audio',
+};

package/src/components/LiveMonitorView/i18n/index.ts

@@ -0,0 +1,4 @@
+import { resource as enResource } from './en-US/index';
+import { resource as zhResource } from './zh-CN/index';
+
+export { enResource, zhResource };

package/src/components/LiveMonitorView/i18n/zh-CN/index.ts

@@ -0,0 +1,7 @@
+export const resource = {
+  RoomId: '房间ID',
+  UserId: '用户ID',
+  'Force Close': '强制解散',
+  'Unmute Audio': '取消静音',
+  'Mute Audio': '静音',
+};

package/src/components/LiveMonitorView/index.ts

@@ -0,0 +1,6 @@
+import LiveMonitorView from './LiveMonitorView.vue';
+import { addI18n } from '../../i18n';
+import { enResource, zhResource } from './i18n/index';
+addI18n('en-US', { translation: enResource });
+addI18n('zh-CN', { translation: zhResource });
+export { LiveMonitorView };