@tencentcloud/roomkit-electron-vue3 2.3.3

package/src/TUIRoom/components/RoomHeader/index/LayoutControl.vue

@@ -0,0 +1,280 @@
+<!--
+  * Name: LayoutControl
+  * Usage:
+  * Use <layout-control /> in template
+  *
+-->
+<template>
+  <div v-if="layoutControlConfig.visible" v-click-outside="handleClickOutSide" class="layout-container">
+    <icon-button
+      :title="t('Layout')"
+      :disabled="isStreamNumberLessThanTwo"
+      :layout="IconButtonLayout.HORIZONTAL"
+      @click-icon="handleClickLayoutIcon"
+    >
+      <layout-icon></layout-icon>
+    </icon-button>
+    <div v-if="showLayoutList" class="layout-list">
+      <!--
+        * Sidebar and upper sidebar arrows
+        *
+      -->
+      <div
+        :class="['layout1', 'layout-item', `${layout === LAYOUT.NINE_EQUAL_POINTS ? 'checked' : ''}`]"
+        @click="handleClick(LAYOUT.NINE_EQUAL_POINTS)"
+      >
+        <div class="layout-block-container">
+          <div
+            v-for="(item, index) in new Array(9).fill('')"
+            :key="index"
+            class="layout-block"
+          >
+          </div>
+        </div>
+        <span class="layout-title">{{ t('Grid') }}</span>
+      </div>
+      <!--
+        * Right side member list
+        *
+      -->
+      <div
+        :class="['layout2', 'layout-item', `${layout === LAYOUT.RIGHT_SIDE_LIST ? 'checked' : ''}`]"
+        @click="handleClick(LAYOUT.RIGHT_SIDE_LIST)"
+      >
+        <div class="layout-block-container">
+          <div class="left-container"></div>
+          <div class="right-container">
+            <div
+              v-for="(item, index) in new Array(3).fill('')"
+              :key="index"
+              class="layout-block"
+            >
+            </div>
+          </div>
+        </div>
+        <span class="layout-title">{{ t('Gallery on right') }}</span>
+      </div>
+      <!--
+        * Top Member List
+        *
+      -->
+      <div
+        :class="['layout3', 'layout-item', `${layout === LAYOUT.TOP_SIDE_LIST ? 'checked' : ''}`]"
+        @click="handleClick(LAYOUT.TOP_SIDE_LIST)"
+      >
+        <div class="layout-block-container">
+          <div class="top-container">
+            <div
+              v-for="(item, index) in new Array(3).fill('')"
+              :key="index"
+              class="layout-block"
+            >
+            </div>
+          </div>
+          <div class="bottom-container"></div>
+        </div>
+        <span class="layout-title">{{ t('Gallery at top') }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, computed } from 'vue';
+import { LAYOUT } from '../../../constants/render';
+import { useBasicStore } from '../../../stores/basic';
+import { useRoomStore } from '../../../stores/room';
+import { storeToRefs } from 'pinia';
+import TUIRoomAegis from '../../../utils/aegis';
+import { useI18n } from '../../../locales';
+import { IconButtonLayout } from '../../../constants/room';
+import IconButton from '../../common/base/IconButton.vue';
+import LayoutIcon from '../../common/icons/LayoutIcon.vue';
+import vClickOutside from '../../../directives/vClickOutside';
+import { roomService } from '../../../services';
+
+const { t } = useI18n();
+
+const basicStore = useBasicStore();
+const { layout } = storeToRefs(basicStore);
+const roomStore = useRoomStore();
+const { streamNumber } = storeToRefs(roomStore);
+
+const showLayoutList: Ref<boolean> = ref(false);
+const isStreamNumberLessThanTwo = computed(() => streamNumber.value < 2);
+const layoutControlConfig = roomService.getComponentConfig('LayoutControl');
+
+
+function handleClick(layout: any) {
+  basicStore.setLayout(layout);
+  TUIRoomAegis.reportEvent({ name: 'layout', ext1: layout });
+}
+
+function handleClickLayoutIcon() {
+  if (isStreamNumberLessThanTwo.value) {
+    return;
+  }
+  showLayoutList.value = !showLayoutList.value;
+}
+
+function handleClickOutSide() {
+  if (showLayoutList.value) {
+    showLayoutList.value = false;
+  }
+}
+
+</script>
+
+<style lang="scss" scoped>
+
+.tui-theme-black .layout-container {
+  --background-color: var(--background-color-2);
+  --box-shadow: 0px 0px 40px rgba(23, 25, 31, 0.60), 0px 0px 12px rgba(23, 25, 31, 0.40);
+  --block-background-color: var(--background-color-3);
+}
+
+.tui-theme-white .layout-container {
+  --background-color: var(--background-color-1);
+  --box-shadow: 0px 3px 8px #E9F0FB;
+  --block-background-color: #E4EAF7;
+}
+
+.layout-container {
+  position: relative;
+  .layout-list {
+    position: absolute;
+    top: calc(100% + 12px);
+    left: 0;
+    background-color: var(--background-color);
+    box-shadow: var(--box-shadow);
+    border-radius: 8px;
+    padding: 16px 16px 6px;
+    display: flex;
+    .layout-item {
+      cursor: pointer;
+      position: relative;
+      &:not(:first-child) {
+        margin-left: 12px;
+      }
+      .layout-block-container {
+        width: 130px;
+        height: 88px;
+        border-radius: 6px;
+        border: 2px solid transparent;
+        padding: 4px;
+      }
+      &:hover, &.checked  {
+        .layout-block-container {
+          border: 2px solid var(--active-color-1);
+        }
+      }
+      .layout-title {
+        font-size: 12px;
+        font-weight: 400;
+        line-height: 24px;
+        display: inline-block;
+        color: var(--font-color-1);
+        margin-top: 2px;
+        width: 100%;
+        text-align: center;
+      }
+      &.checked {
+        .layout-title {
+          color: var(--active-color-1);
+          font-weight: 500;
+        }
+      }
+    }
+    .layout1 {
+      .layout-block-container {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: space-between;
+        align-content: space-between;
+        .layout-block {
+          width: 38px;
+          height: 24px;
+          background-color: var(--block-background-color);
+          &:nth-child(1) {
+            border-top-left-radius: 4px;
+          }
+          &:nth-child(3) {
+            border-top-right-radius: 4px;
+          }
+          &:nth-child(7) {
+            border-bottom-left-radius: 4px;
+          }
+          &:nth-child(9) {
+            border-bottom-right-radius: 4px;
+          }
+        }
+      }
+    }
+    .layout2 {
+      .layout-block-container {
+        display: flex;
+        justify-content: space-between;
+        .left-container {
+          width: 78px;
+          height: 100%;
+          background-color: var(--block-background-color);
+          border-top-left-radius: 4px;
+          border-bottom-left-radius: 4px;
+        }
+        .right-container {
+          width: 38px;
+          height: 100%;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-content: space-between;
+          > div {
+            width: 38px;
+            height: 24px;
+            background-color: var(--block-background-color);
+            &:nth-child(1) {
+              border-top-right-radius: 4px;
+            }
+            &:nth-child(3) {
+              border-bottom-right-radius: 4px;
+            }
+          }
+        }
+      }
+    }
+    .layout3 {
+      .layout-block-container {
+        display: flex;
+        flex-wrap: wrap;
+        align-content: space-between;
+        .top-container {
+          width: 100%;
+          height: 24px;
+          display: flex;
+          flex-wrap: wrap;
+          justify-content: space-between;
+          align-content: space-between;
+          > div {
+            width: 38px;
+            height: 24px;
+            background-color: var(--block-background-color);
+            &:nth-child(1) {
+              border-top-left-radius: 4px;
+            }
+            &:nth-child(3) {
+              border-top-right-radius: 4px;
+            }
+          }
+        }
+        .bottom-container {
+          width: 118px;
+          height: 50px;
+          background-color: var(--block-background-color);
+          border-bottom-left-radius: 4px;
+          border-bottom-right-radius: 4px;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/TUIRoom/components/RoomHeader/index/NetworkInfo.vue

@@ -0,0 +1,202 @@
+<!--
+  * Name: NetworkInfo
+  * Usage:
+  * Use <network-info /> in template
+-->
+<template>
+  <div v-click-outside="handleClickOutSide" class="network-info-container">
+    <icon-button
+      :layout="IconButtonLayout.HORIZONTAL"
+      :icon="state.networkIcon"
+      @click-icon="handleClickNetworkIcon"
+    >
+      <template #title>
+        <span :class="[`title-type-${state.titleType}`]">{{ t(`${state.title}`) }}</span>
+      </template>
+    </icon-button>
+    <div v-if="showNetworkInfo" ref="networkBoard" class="network-info-board">
+      <div class="network-detail-item">
+        <span>{{ t('Latency') }}</span>
+        <span :class="['title-latency',`title-type-${state.titleType}`]">{{ `${networkInfo.delay} ms` }}</span>
+      </div>
+      <div class="network-detail-item">
+        <span>{{ t('Packet loss') }}</span>
+        <div class="network-detail-packet">
+          <div class="network-detail-packet-item">
+            <ArrowStrokeUpIcon />
+            <span>{{ `${(networkInfo.upLoss)}%` }}</span>
+          </div>
+          <div class="network-detail-packet-item">
+            <ArrowStrokeUpIcon class="arrow-down" />
+            <span>{{ `${(networkInfo.downLoss)}%` }}</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ref, Ref, onUnmounted, watchEffect, reactive, shallowRef } from 'vue';
+import { useBasicStore } from '../../../stores/basic';
+import { storeToRefs } from 'pinia';
+import TUIRoomAegis from '../../../utils/aegis';
+import { useI18n } from '../../../locales';
+import TUIRoomEngine, { TUIRoomEvents, TUINetwork, TUINetworkQuality } from '@tencentcloud/tuiroom-engine-electron';
+import useRoomEngine from '../../../hooks/useRoomEngine';
+import IconButton from '../../common/base/IconButton.vue';
+import vClickOutside from '../../../directives/vClickOutside';
+import NetworkStabilityIcon from '../../common/icons/NetworkStabilityIcon.vue';
+import NetworkFluctuationIcon from '../../common/icons/NetworkFluctuationIcon.vue';
+import NetworkLagIcon from '../../common/icons/NetworkLagIcon.vue';
+import NetworkDisconnectedIcon from '../../common/icons/NetworkDisconnectedIcon.vue';
+import ArrowStrokeUpIcon from '../../common/icons/ArrowStrokeUpIcon.vue';
+import { IconButtonLayout } from '../../../constants/room';
+
+const roomEngine = useRoomEngine();
+const { t } = useI18n();
+const basicStore = useBasicStore();
+const { networkInfo } = storeToRefs(basicStore);
+const networkBoard = ref();
+const showNetworkInfo: Ref<boolean> = ref(false);
+
+type TitleType = 'success' | 'warning' | 'danger' | 'info' | undefined;
+
+interface StateType {
+  title: string;
+  titleType: TitleType | undefined;
+  networkIcon: any;
+}
+
+const state = reactive<StateType>({
+  title: '',
+  titleType: undefined,
+  networkIcon: null,
+});
+
+const qualityMap: { [key in TUINetworkQuality]?: { title: string; titleType: TitleType; icon: any } } = {
+  [TUINetworkQuality.kQualityExcellent]: {
+    title: 'Stability',
+    titleType: 'success',
+    icon: shallowRef(NetworkStabilityIcon),
+  },
+  [TUINetworkQuality.kQualityPoor]: {
+    title: 'Fluctuation',
+    titleType: 'warning',
+    icon: shallowRef(NetworkFluctuationIcon),
+  },
+  [TUINetworkQuality.kQualityVeryBad]: {
+    title: 'Lag',
+    titleType: 'danger',
+    icon: shallowRef(NetworkLagIcon),
+  },
+  [TUINetworkQuality.kQualityDown]: {
+    title: 'Disconnected',
+    titleType: 'info',
+    icon: shallowRef(NetworkDisconnectedIcon),
+  },
+};
+
+watchEffect(() => {
+  const quality = qualityMap[networkInfo.value.quality];
+  if (quality) {
+    state.title = quality.title;
+    state.titleType = quality.titleType;
+    state.networkIcon = quality.icon;
+  }
+});
+
+function handleClickNetworkIcon() {
+  showNetworkInfo.value = !showNetworkInfo.value;
+  TUIRoomAegis.reportEvent({ name: 'networkInfo', ext1: 'networkInfo' });
+}
+
+function handleClickOutSide() {
+  if (showNetworkInfo.value) {
+    showNetworkInfo.value = false;
+  }
+}
+
+async function onUserNetworkQualityChanged({ userNetworkList }: { userNetworkList: TUINetwork[] }) {
+  userNetworkList.forEach((userNetwork: TUINetwork) => {
+    basicStore.setNetworkInfo(userNetwork);
+  });
+}
+
+TUIRoomEngine.once('ready', () => {
+  roomEngine.instance?.on(TUIRoomEvents.onUserNetworkQualityChanged, onUserNetworkQualityChanged);
+});
+
+onUnmounted(() => {
+  roomEngine.instance?.off(TUIRoomEvents.onUserNetworkQualityChanged, onUserNetworkQualityChanged);
+});
+
+</script>
+
+<style lang="scss" scoped>
+.tui-theme-white .network-info-board {
+  --title-font-color: var(--font-color-1);
+  --item-font-color: var(--font-color-6);
+  --filter-color: drop-shadow(0px 0px 4px rgba(32, 77, 141, 0.03)) drop-shadow(0px 4px 10px rgba(32, 77, 141, 0.06))
+    drop-shadow(0px 1px 14px rgba(32, 77, 141, 0.05));
+}
+.tui-theme-black .network-info-board {
+  --title-font-color: #8f9ab2;
+  --item-font-color: var(--font-color-1);
+  --filter-color: drop-shadow(0px 8px 40px rgba(23, 25, 31, 0.6)) drop-shadow(0px 4px 12px rgba(23, 25, 31, 0.4));
+}
+
+.network-info-container {
+  position: relative;
+  .network-info-board {
+    position: absolute;
+    background-color: var(--background-color-2);
+    border-radius: 10px;
+    width: 161px;
+    height: 130px;
+    filter: var(--filter-color);
+    padding: 24px;
+    top: 40px;
+    .network-state {
+      margin-bottom: 18px;
+    }
+    .network-detail-item {
+      display: flex;
+      justify-content: space-between;
+      margin-bottom: 30px;
+      font-size: 14px;
+      font-weight: 400;
+      line-height: 20px;
+      color: var(--title-font-color);
+      .title-latency {
+        font-weight: 500;
+        line-height: 22px;
+      }
+      .network-detail-packet {
+        display: flex;
+        flex-direction: column;
+        font-weight: 500;
+        color: var(--item-font-color);
+        .network-detail-packet-item {
+          display: flex;
+          .arrow-down {
+            transform: rotate(180deg);
+          }
+        }
+      }
+    }
+  }
+  .title-type-success {
+    color: #27C39F;
+  }
+  .title-type-warning {
+    color: #F39843;
+  }
+  .title-type-danger {
+    color: #ED414D;
+  }
+  .title-type-info {
+    color: #4F586B;
+  }
+}
+</style>

package/src/TUIRoom/components/RoomHeader/index/index.vue

@@ -0,0 +1,93 @@
+<template>
+  <div class="header-container">
+    <div class="left-container">
+      <switch-theme class="header-item"></switch-theme>
+      <layout-control class="header-item"></layout-control>
+      <network-info class="header-item"></network-info>
+    </div>
+    <div class="center-container">
+      <room-info class="header-item"></room-info>
+    </div>
+    <div class="right-container">
+      <language v-show="showHeaderInfo" class="header-item"></language>
+      <user-info
+        v-show="showHeaderInfo"
+        class="header-item"
+        :user-id="userId"
+        :user-name="userName"
+        :avatar-url="avatarUrl"
+        @log-out="$emit('log-out')"
+      ></user-info>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { inject } from 'vue';
+import UserInfo from '../UserInfo/index.vue';
+import Language from '../../common/Language.vue';
+import SwitchTheme from '../../common/SwitchTheme.vue';
+import RoomInfo from '../RoomInfo/index.vue';
+import LayoutControl from './LayoutControl.vue';
+import NetworkInfo from './NetworkInfo.vue';
+import { useBasicStore } from '../../../stores/basic';
+import { storeToRefs } from 'pinia';
+
+const basicStore = useBasicStore();
+
+const { userId, userName, avatarUrl } = storeToRefs(basicStore);
+
+const showHeaderInfo = inject('showHeaderInfo', true);
+
+defineEmits(['log-out']);
+
+</script>
+
+<style lang="scss" scoped>
+.header-container {
+  width: 100%;
+  height: 100%;
+  padding-left: 9px;
+  padding-right: 24px;
+  position: relative;
+  display: flex;
+  justify-content: space-between;
+  .left-container {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    padding-left: 24px;
+    .header-item:not(:first-child) {
+      margin-left: 1rem;
+    }
+  }
+  .center-container {
+    position: absolute;
+    left: 50%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    transform: translateX(-50%);
+  }
+  .right-container {
+    position: absolute;
+    top: 0;
+    right: 0;
+    height: 100%;
+    float: right;
+    padding-right: 24px;
+    display: flex;
+    align-items: center;
+    .header-item:not(:last-child) {
+      margin-right: 1rem;
+    }
+
+    .end-control-container {
+      display: none;
+    }
+  }
+}
+</style>