feat: video chat init

Author: xgChange

client/packages/rtc-web/src/assets/svg-icon/audio.svg

@@ -1,6 +1,7 @@
 import { SetupContext } from 'vue';
 import { SvgIcon, NavIcons } from './base';
 import { MenuSide } from './menu';
+import { resetUrl } from '@/utils';
 
 export const NavHeader = () => {
   return (
@@ -18,11 +19,15 @@ export const NavHeader = () => {
               />
             </label>
           </div>
-          <div class="mx-2 flex-1 px-2">Web-Rtc</div>
+          <div class="mx-2 flex-1 px-2">
+            <span class="cursor-pointer" onClick={resetUrl}>
+              Web-Rtc
+            </span>
+          </div>
           <NavIcons class="flex-none pr-3" />
         </div>
       </div>
-      <div class="drawer-side">
+      <div class="drawer-side z-50">
         <label for="my-drawer-3" class="drawer-overlay"></label>
         <MenuSide class="bg-base-200"></MenuSide>
       </div>

client/packages/rtc-web/src/assets/svg-icon/camera.svg

@@ -6,11 +6,19 @@ defineOptions({
 });
 
 type PropTypes = {
-  menuAction: { name: string; tip: string; color?: string }[];
+  menuAction: {
+    name: string;
+    tip: string;
+    color?: string;
+    tipDir?: string;
+    btn?: boolean;
+  }[];
+  gap?: number;
 };
 
 const props = withDefaults(defineProps<PropTypes>(), {
   menuAction: () => [] as PropTypes['menuAction'],
+  gap: 0,
 });
 
 const emits = defineEmits(['clickIcon']);
@@ -21,10 +29,18 @@ const handleClick = (name: string) => emits('clickIcon', name);
 <template>
   <div class="flex">
     <div
-      v-for="item in props.menuAction"
+      v-for="(item, index) in props.menuAction"
       :key="item.name"
       :data-tip="item.tip"
-      class="tooltip tooltip-bottom"
+      class="tooltip"
+      :class="[item.tipDir ?? 'tooltip-bottom', props.gap ? 'first:ml-0' : '']"
+      :style="
+        props.gap && index === 0
+          ? `margin-left: 0`
+          : props.gap
+          ? `margin-left: ${props.gap}px`
+          : ''
+      "
     >
       <emoji-picker v-if="item.name === 'emoji'" v-bind="$attrs">
         <svg-icon
@@ -34,6 +50,14 @@ const handleClick = (name: string) => emits('clickIcon', name);
           @click="handleClick(item.name)"
         />
       </emoji-picker>
+      <button v-else-if="item.btn" class="btn-circle btn">
+        <svg-icon
+          :color="item.color"
+          :name="item.name"
+          class="h-6 w-6 cursor-pointer"
+          @click="handleClick(item.name)"
+        />
+      </button>
       <svg-icon
         v-else
         :color="item.color"

client/packages/rtc-web/src/assets/svg-icon/hang-up.svg

@@ -20,6 +20,11 @@ const menuListData = ref([
     icon: 'add-icon',
     label: '聊天',
   },
+  {
+    key: 'video',
+    icon: 'add-icon',
+    label: '视频聊天',
+  },
 ]);
 
 const currentCreateRoomByKey = ref('');

client/packages/rtc-web/src/assets/svg-icon/mirror-image.svg

@@ -1,13 +1,16 @@
 <script lang="ts" setup>
 import MenuList from './menu-list.vue';
+import { useSwitchSiderbar } from '@/hooks';
 
 defineOptions({
   name: 'MenuSide',
 });
+
+const { open } = useSwitchSiderbar();
 </script>
 
 <template>
-  <div class="menu h-full w-80 min-w-[320px] p-4">
+  <div v-show="open" class="menu h-full w-80 min-w-[320px] p-4">
     <MenuList />
   </div>
 </template>

client/packages/rtc-web/src/assets/svg-icon/up.svg

@@ -1,4 +1,10 @@
-type MenuActionType = { name: string; tip: string; color?: string };
+export type MenuActionType = {
+  name: string;
+  tip: string;
+  color?: string;
+  tipDir?: string;
+  btn?: boolean;
+};
 
 export const ChatAction: MenuActionType[] = [
   { name: 'member', tip: '显示成员', color: undefined },
@@ -7,3 +13,37 @@ export const ChatAction: MenuActionType[] = [
 export const ChatInputAction: MenuActionType[] = [
   { name: 'emoji', tip: '表情' },
 ];
+
+export const VideoMenuAction: MenuActionType[] = [
+  {
+    name: 'member',
+    tip: '显示成员',
+    color: undefined,
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+];
+
+export const VideoControlMenuAction: MenuActionType[] = [
+  {
+    name: 'camera',
+    tip: '开启/关闭摄像头',
+    color: '#707070',
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+  {
+    name: 'mirror-image',
+    tip: '开启镜像',
+    color: '#707070',
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+  {
+    name: 'hang-up',
+    tip: '结束通话',
+    color: undefined,
+    tipDir: 'tooltip-top',
+    btn: true,
+  },
+];