tuikit-atomicx-vue3 0.1.0

package/src/components/MicButton/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <div class="mic-button-container">
+    <div class="mic-button" :class="{ 'disabled': !hasPublishAudioPermission }" @click="handleClick">
+      <audio-icon
+        :audio-volume="audioVolume"
+        :is-muted="isMuted"
+        :is-disabled="!hasPublishAudioPermission"
+      />
+      <IconUnSupport v-if="microphoneLastError !== DeviceError.NoError" class="unsupport-icon" size="14" />
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from 'vue';
+import { IconUnSupport } from '@tencentcloud/uikit-base-component-vue3';
+import { useDeviceState } from '../../states/DeviceState';
+import { DeviceStatus, DeviceError } from '../../types';
+import AudioIcon from './AudioIcon.vue';
+
+const {
+  audioVolume,
+  hasPublishAudioPermission,
+  microphoneStatus,
+  microphoneLastError,
+  muteLocalAudio,
+  openLocalMicrophone,
+  unmuteLocalAudio,
+} = useDeviceState();
+
+const isMuted = computed(() => {
+  return microphoneStatus.value !== DeviceStatus.On;
+});
+
+async function handleClick() {
+  if (!hasPublishAudioPermission.value) {
+    return;
+  }
+  if (microphoneStatus.value === DeviceStatus.On) {
+    await muteLocalAudio();
+  } else {
+    await openLocalMicrophone();
+    await unmuteLocalAudio();
+  }
+}
+
+</script>
+
+<style scoped lang="scss">
+.mic-button-container {
+  display: flex;
+  align-items: center;
+  .mic-button {
+    position: relative;
+
+    .unsupport-icon {
+      position: absolute;
+      right: 0;
+      bottom: 0;
+    }
+  }
+}
+</style>

package/src/components/StreamMixer/LocalMixer/MixerControl.vue

@@ -0,0 +1,170 @@
+<template>
+  <div class="mixer-control" @mousedown="handleMouseDown">
+    <div
+      class="mixer-control-item"
+      v-for="control in controlList"
+      :class="{ 'disable': control.disable }"
+      :key="control.name"
+      :style="control.style"
+      @click.stop="control.onClick"
+    >
+      <div class="mixer-control-item-icon">
+        <component :is="control.icon" style="width: 100%; height: 100%" :style="control.style" />
+      </div>
+      <span class="mixer-control-item-name">{{ control.text }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import CameraMirror from '../icons/CameraMirror.vue';
+import Delete from '../icons/Delete.vue';
+import Rotation from '../icons/Rotation.vue';
+import Up from '../icons/Up.vue';
+import Down from '../icons/Down.vue';
+import { useVideoMixerState } from '../../../states/VideoMixerState';
+import { TRTCVideoMirrorType, TRTCVideoRotation } from '@tencentcloud/tuiroom-engine-js';
+import { computed, reactive } from 'vue';
+import { MediaSource } from '../../../types';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { activeMediaSource, mediaSourceList, updateMediaSource, removeMediaSource } = useVideoMixerState();
+const { t } = useUIKit();
+
+function handleMouseDown(event: Event) {
+  event.stopPropagation();
+}
+
+const orderMediaSourceList = computed(() => {
+  return [...mediaSourceList.value].sort((a: MediaSource, b: MediaSource) => a.layout.zOrder - b.layout.zOrder);
+});
+
+const isActiveMediaSourceTop = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[0].id);
+const isActiveMediaSourceBottom = computed(() => activeMediaSource.value.id === orderMediaSourceList.value[orderMediaSourceList.value.length - 1].id);
+
+const controlList = computed(() => [
+  {
+    name: 'mirror',
+    text: t('Mirror'),
+    icon: CameraMirror,
+    onClick: () => {
+      const currentMirror = activeMediaSource.value.layout.mirror;
+      updateMediaSource(activeMediaSource.value, {
+        layout: {
+          mirror:
+            currentMirror === TRTCVideoMirrorType.TRTCVideoMirrorType_Enable
+              ? TRTCVideoMirrorType.TRTCVideoMirrorType_Disable
+              : TRTCVideoMirrorType.TRTCVideoMirrorType_Enable,
+        },
+      });
+    },
+  },
+  {
+    name: 'rotate',
+    text: t('Rotate'),
+    icon: Rotation,
+    onClick: () => {
+      const currentRotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
+      const rotationObj = {
+        [TRTCVideoRotation.TRTCVideoRotation0]: TRTCVideoRotation.TRTCVideoRotation90,
+        [TRTCVideoRotation.TRTCVideoRotation90]: TRTCVideoRotation.TRTCVideoRotation180,
+        [TRTCVideoRotation.TRTCVideoRotation180]: TRTCVideoRotation.TRTCVideoRotation270,
+        [TRTCVideoRotation.TRTCVideoRotation270]: TRTCVideoRotation.TRTCVideoRotation0,
+      };
+      const rotation = rotationObj[currentRotation];
+      updateMediaSource(activeMediaSource.value, { layout: { rotation } });
+    },
+  },
+  {
+    name: 'up',
+    text: t('Move Up'),
+    icon: Up,
+    disable: isActiveMediaSourceBottom.value,
+    onClick: async () => {
+      const currentIndex = orderMediaSourceList.value.findIndex(item => item.id === activeMediaSource.value.id);
+      const nextMediaSource = orderMediaSourceList.value[currentIndex + 1];
+      const activeZOrder = activeMediaSource.value.layout.zOrder;
+      const nextZOrder = nextMediaSource?.layout.zOrder;
+      if (nextMediaSource) {
+        await updateMediaSource(activeMediaSource.value, { layout: { zOrder: 999 } });
+        await updateMediaSource(nextMediaSource, { layout: { zOrder: activeZOrder } });
+        await updateMediaSource(activeMediaSource.value, { layout: { zOrder: nextZOrder } });
+      } else {
+        console.error(t('Already at top'));
+      }
+    },
+  },
+  {
+    name: 'down',
+    text: t('Move Down'),
+    icon: Down,
+    disable: isActiveMediaSourceTop.value,
+    onClick: async () => {
+      const currentIndex = orderMediaSourceList.value.findIndex(item => item.id === activeMediaSource.value.id);
+      const nextMediaSource = orderMediaSourceList.value[currentIndex - 1];
+      const activeZOrder = activeMediaSource.value.layout.zOrder;
+      const nextZOrder = nextMediaSource?.layout.zOrder;
+      if (nextMediaSource) {
+        await updateMediaSource(activeMediaSource.value, { layout: { zOrder: 0 } });
+        await updateMediaSource(nextMediaSource, { layout: { zOrder: activeZOrder } });
+        await updateMediaSource(activeMediaSource.value, { layout: { zOrder: nextZOrder } });
+      } else {
+        console.error(t('Already at bottom'));
+      }
+    },
+  },
+  {
+    name: 'delete',
+    text: t('Delete'),
+    icon: Delete,
+    style: 'color: red',
+    onClick: () => {
+      removeMediaSource(activeMediaSource.value);
+    },
+  },
+]);
+</script>
+
+<style scoped lang="scss">
+.mixer-control {
+  display: flex;
+  flex-direction: row;
+  background-color: #ffffff;
+  border-radius: 4px;
+  padding: 6px 12px;
+  gap: 16px;
+  pointer-events: auto;
+  .mixer-control-item {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    padding: 2px 4px;
+    cursor: pointer;
+    border-radius: 4px;
+    &:hover {
+      background-color: rgba(255, 255, 255, 0.1);
+    }
+    .mixer-control-item-icon {
+      width: 18px;
+      height: 18px;
+      color: #0F1014;
+    }
+    .mixer-control-item-name {
+      font-size: 12px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 18px;
+      white-space: nowrap;
+      margin-top: 2px;
+    }
+    &.disable {
+      color: rgba(0, 0, 0, 0.25);
+      cursor: not-allowed;
+      .mixer-control-item-icon {
+        color: rgba(0, 0, 0, 0.25);
+      }
+    }
+  }
+}
+</style>

package/src/components/StreamMixer/LocalMixer/index.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class="local-mixer-container" ref="localMixerRef">
+    <div class="local-mixer-content" id="local-video-mixer"></div>
+    <div class="mixer-control-container" v-if="activeMediaSource" :style="mixControlContainerStyle">
+      <MixerControl class="mixer-control" :style="mixControlStyle" />
+    </div>
+    <div class="local-mixer-placeholder" v-if="mediaSourceList.length === 0">
+      <span class="placeholder-text">{{ t('No video') }}</span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, watch, onUnmounted, Ref, computed } from 'vue';
+import { useRoomEngine } from '../../../hooks/useRoomEngine';
+import { useVideoMixerState } from '../../../states/VideoMixerState';
+import TUIRoomEngine, {
+  TRTCVideoResolutionMode,
+  TRTCVideoRotation,
+  TUIVideoQuality,
+} from '@tencentcloud/tuiroom-engine-js';
+import { useLiveState } from '../../../states/LiveState';
+import { LiveStatus, LiveOrientation } from '../../../types';
+import MixerControl from './MixerControl.vue';
+import { useUIKit } from '@tencentcloud/uikit-base-component-vue3';
+
+const { t } = useUIKit();
+
+const { currentLive } = useLiveState();
+
+const { publishVideoQuality, activeMediaSource, enableLocalVideoMixer, mediaSourceList } = useVideoMixerState();
+enableLocalVideoMixer();
+
+
+const currentLiveOrientation = computed(() => {
+  if (currentLive.value
+    && currentLive.value?.layoutTemplate >= 200 && currentLive.value?.layoutTemplate <= 599) {
+    return LiveOrientation.Landscape;
+  }
+  return LiveOrientation.Portrait;
+});
+
+const { localLiveStatus } = useLiveState();
+
+const roomEngine = useRoomEngine();
+const localMixerRef = ref();
+
+function getCanvasSize(
+  videoResolution: TUIVideoQuality,
+  resMode: TRTCVideoResolutionMode
+): { width: number; height: number } {
+  const sizeMap = {
+    [TUIVideoQuality.kVideoQuality_360p]: { width: 640, height: 360 },
+    [TUIVideoQuality.kVideoQuality_540p]: { width: 960, height: 540 },
+    [TUIVideoQuality.kVideoQuality_720p]: { width: 1280, height: 720 },
+    [TUIVideoQuality.kVideoQuality_1080p]: { width: 1920, height: 1080 },
+  };
+  let { width, height } = sizeMap[videoResolution];
+  if (resMode === TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait) {
+    [width, height] = [height, width];
+  }
+  return { width, height };
+}
+
+const mixControlContainerStyle = ref({
+  top: '0px',
+  left: '0px',
+  width: '0px',
+  height: '0px',
+});
+
+const mixControlStyle: Ref<{ top?: string; bottom?: string; transform: string }> = ref({
+  top: '-6px',
+  transform: 'translate(-50%, -100%)',
+});
+
+function getMixControlStyle() {
+  if (!localMixerRef.value || !activeMediaSource.value) {
+    return;
+  }
+  const { width: canvasWidth, height: canvasHeight } = getCanvasSize(
+    publishVideoQuality.value,
+    currentLiveOrientation.value === LiveOrientation.Landscape ? TRTCVideoResolutionMode.TRTCVideoResolutionModeLandscape : TRTCVideoResolutionMode.TRTCVideoResolutionModePortrait
+  );
+  const { width: realWidth, height: realHeight } = localMixerRef.value.getBoundingClientRect();
+  const scale = Math.max(realWidth / canvasWidth, realHeight / canvasHeight);
+
+  const previewWidth = canvasWidth * scale;
+  const previewHeight = canvasHeight * scale;
+
+  const { top, left, right, bottom } = activeMediaSource.value.layout.rect;
+  const mediaSourceWidth = right - left;
+  const mediaSourceHeight = bottom - top;
+  const rotation = activeMediaSource.value.layout.rotation || TRTCVideoRotation.TRTCVideoRotation0;
+  if (rotation === TRTCVideoRotation.TRTCVideoRotation0 || rotation === TRTCVideoRotation.TRTCVideoRotation180) {
+    mixControlContainerStyle.value = {
+      top: `${top * scale - (previewHeight - realHeight) / 2}px`,
+      left: `${left * scale - (previewWidth - realWidth) / 2}px`,
+      width: `${mediaSourceWidth * scale}px`,
+      height: `${mediaSourceHeight * scale}px`,
+    };
+  } else {
+    mixControlContainerStyle.value = {
+      top: `${top * scale - (previewHeight - realHeight) / 2}px`,
+      left: `${left * scale - (previewWidth - realWidth) / 2}px`,
+      width: `${mediaSourceHeight * scale}px`,
+      height: `${mediaSourceWidth * scale}px`,
+    };
+  }
+  if (top < 60) {
+    mixControlStyle.value = {
+      bottom: '-6px',
+      transform: 'translate(-50%, 100%)',
+    };
+  } else {
+    mixControlStyle.value = {
+      top: '-6px',
+      transform: 'translate(-50%, -100%)',
+    };
+  }
+}
+
+watch(
+  () => [publishVideoQuality.value, currentLiveOrientation.value, activeMediaSource.value?.layout],
+  ([newVideoQuality, newOrientation, newLayout]) => {
+    if (!newVideoQuality || !newOrientation || !newLayout) {
+      return;
+    }
+    getMixControlStyle();
+  },
+  { immediate: true, deep: true }
+);
+
+const re = new ResizeObserver(() => {
+  getMixControlStyle();
+});
+
+onMounted(() => {
+  re.observe(localMixerRef.value);
+  TUIRoomEngine.once('ready', async () => {
+    const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
+    await mediaSourceManager.setDisplayParams(document.getElementById('local-video-mixer') as HTMLElement);
+    getMixControlStyle();
+  });
+
+  watch(localLiveStatus, async newVal => {
+    if (newVal === LiveStatus.Live) {
+      const mediaSourceManager = roomEngine.instance?.getTRTCCloud().getMediaMixingManager();
+      await mediaSourceManager?.startPublish();
+    }
+  });
+});
+
+onUnmounted(() => {
+  re.unobserve(localMixerRef.value);
+});
+</script>
+
+<style scoped lang="scss">
+.local-mixer-container {
+  width: 100%;
+  height: 100%;
+  position: relative;
+  background-color: #000;
+  .local-mixer-content {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+  .mixer-control-container {
+    position: absolute;
+    pointer-events: none;
+    .mixer-control {
+      position: absolute;
+      left: 50%;
+    }
+  }
+  .local-mixer-placeholder {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    .placeholder-text {
+      color: var(--text-color-secondary, rgba(255, 255, 255, 0.55));
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 400;
+      line-height: 22px;
+    }
+  }
+}
+</style>

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

@@ -0,0 +1,12 @@
+export const resource = {
+  // MixerControl.vue
+  Mirror: 'Mirror',
+  Rotate: 'Rotate',
+  'Move Up': 'Move Up',
+  'Move Down': 'Move Down',
+  Delete: 'Delete',
+  'Already at top': 'Already at top',
+  'Already at bottom': 'Already at bottom',
+  // LocalMixer/index.vue
+  'No video': 'No video',
+};

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

@@ -0,0 +1,2 @@
+export { resource as zhCNResource } from './zh-CN/index';
+export { resource as enUSResource } from './en-US/index';

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

@@ -0,0 +1,12 @@
+export const resource = {
+  // MixerControl.vue
+  Mirror: '镜像',
+  Rotate: '旋转',
+  'Move Up': '向上一层',
+  'Move Down': '向下一层',
+  Delete: '删除',
+  'Already at top': '已经是最上一层了',
+  'Already at bottom': '已经是最下一层了',
+  // LocalMixer/index.vue
+  'No video': '暂无画面',
+};

package/src/components/StreamMixer/icons/CameraMirror.vue

@@ -0,0 +1,17 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M7.5 1H8.5V15H7.5V1Z" fill="black" fill-opacity="0.9" style="fill: black; fill-opacity: 0.9" />
+    <path
+      d="M14.7193 12.4367C14.7501 12.6777 14.6031 12.906 14.3709 12.9777C14.2988 13 14.196 13 13.9904 13H10.6499C10.5104 13 10.4407 13 10.3831 12.9862C10.2003 12.9423 10.0576 12.7995 10.0137 12.6167C9.99986 12.5592 9.99986 12.4895 9.99986 12.35V5.0008C9.99986 4.47031 9.99986 4.20506 10.0408 4.11027C10.1766 3.79537 10.5819 3.70757 10.8359 3.93804C10.9123 4.00742 11.0221 4.24889 11.2416 4.73183L14.5821 12.081C14.6672 12.2682 14.7098 12.3618 14.7193 12.4367ZM10.9999 12H13.4469L10.9999 6.61661V12Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: black; fill-opacity: 0.9"
+    />
+    <path
+      d="M1.62882 12.9777C1.70093 13 1.80374 13 2.00935 13H5.3499C5.48935 13 5.55908 13 5.61662 12.9862C5.79944 12.9423 5.94219 12.7995 5.98608 12.6167C5.9999 12.5592 5.9999 12.4895 5.9999 12.35V5.0008C5.9999 4.47031 5.9999 4.20506 5.95901 4.11027C5.82317 3.79537 5.41786 3.70757 5.16389 3.93804C5.08744 4.00742 4.97768 4.24889 4.75816 4.73183L1.41761 12.081C1.33253 12.2682 1.28999 12.3618 1.28043 12.4367C1.24964 12.6777 1.39664 12.906 1.62882 12.9777ZM4.9999 6.61661V12H2.5529L4.9999 6.61661Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: black; fill-opacity: 0.9"
+    />
+  </svg>
+</template>

package/src/components/StreamMixer/icons/Delete.vue

@@ -0,0 +1,11 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path d="M6 12V6H7V12H6Z" fill-opacity="0.9" style="fill: currentColor; fill-opacity: 0.9" />
+    <path d="M9 6V12H10V6H9Z" fill-opacity="0.9" style="fill: currentColor; fill-opacity: 0.9" />
+    <path
+      d="M10.5 3H14V4H13V14C13 14.5523 12.5523 15 12 15H4C3.44772 15 3 14.5523 3 14V4H2V3H5.5L5.5 1.8C5.5 1.35817 5.85817 1 6.3 1H9.7C10.1418 1 10.5 1.35817 10.5 1.8V3ZM6.5 3H9.5L9.5 2L6.5 2V3ZM4 4V14H12V4H4Z"
+      fill-opacity="0.9"
+      style="fill: currentColor; fill-opacity: 0.9"
+    />
+  </svg>
+</template>

package/src/components/StreamMixer/icons/Down.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path
+      d="M9.00342 12.8867V2.1575"
+      stroke="currentcolor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.06299 7.99265L9.00003 12.9297L13.9371 7.99265"
+      stroke="currentcolor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.06299 15.8457H13.9371"
+      stroke="currentcolor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/StreamMixer/icons/Rotation.vue

@@ -0,0 +1,16 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16" fill="none">
+    <path
+      d="M8.00016 2.71134C10.8965 2.71134 13.2534 5.0736 13.2534 7.99868H14.2148C14.2148 4.54763 11.4324 1.75 8.00016 1.75C5.76382 1.75 3.80336 2.93771 2.7087 4.72001L2.7087 2.64252H1.75V5.74894C1.75 6.02508 1.97386 6.24894 2.25 6.24894L5.33676 6.24894V5.28498L3.49045 5.28498C4.40906 3.74211 6.08692 2.71134 8.00016 2.71134Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: black; fill-opacity: 0.9"
+    />
+    <path
+      d="M1.78554 7.99863H2.74687C2.74687 10.9237 5.10379 13.286 8.00015 13.286C9.91339 13.286 11.5912 12.2553 12.5099 10.7124H10.6632V9.74843H13.75C14.0261 9.74843 14.25 9.97228 14.25 10.2484V13.3548H13.2913V11.2779C12.1966 13.0599 10.2363 14.2474 8.00015 14.2474C4.56792 14.2474 1.78554 11.4497 1.78554 7.99863Z"
+      fill="black"
+      fill-opacity="0.9"
+      style="fill: black; fill-opacity: 0.9"
+    />
+  </svg>
+</template>

package/src/components/StreamMixer/icons/Up.vue

@@ -0,0 +1,25 @@
+<template>
+  <svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 18 18" fill="none">
+    <path
+      d="M9.00342 5.11328V15.8425"
+      stroke="currentcolor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.06299 10.0074L9.00003 5.07031L13.9371 10.0074"
+      stroke="currentcolor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+    <path
+      d="M4.06299 2.15234H13.9371"
+      stroke="currentcolor"
+      stroke-width="1.5"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    />
+  </svg>
+</template>

package/src/components/StreamMixer/index.ts

@@ -0,0 +1,7 @@
+import StreamMixer from './index.vue';
+import { addI18n } from '../../i18n';
+import { enUSResource, zhCNResource } from './i18n';
+addI18n('en-US', { translation: enUSResource });
+addI18n('zh-CN', { translation: zhCNResource });
+
+export { StreamMixer };

package/src/components/StreamMixer/index.vue

@@ -0,0 +1,14 @@
+<template>
+  <live-stream-view :ignore-local-video="true">
+    <template #localVideo="{ style }">
+      <local-mixer :style="style" />
+    </template>
+  </live-stream-view>
+</template>
+
+<script setup lang="ts">
+import LocalMixer from './LocalMixer/index.vue';
+import { LiveStreamView } from '../LiveStreamView';
+</script>
+
+<style scoped lang="scss"></style>