fix: lint

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/.eslintrc

@@ -6,6 +6,10 @@
     "prettier",
     "react-hooks"
   ],
+  "env": {
+    "browser": true,
+    "node": true
+  },
   "extends": [
     "eslint:recommended",
     "plugin:@typescript-eslint/recommended",
@@ -20,6 +24,7 @@
         "allowTemplateLiterals": true
       }
     ],
+    "react/display-name": "off",
     "react-hooks/rules-of-hooks": "error", // Checks rules of Hooks
     "react-hooks/exhaustive-deps": "warn", // Checks effect dependencies
     "react/prop-types": "off",

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/.gitignore

@@ -9,6 +9,7 @@
 # production
 /dist
 dist.zip
+/output
 
 
 # misc
@@ -17,3 +18,5 @@ dist.zip
 # umi
 .umi
 .umi-production
+
+.idea/

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/.umirc.dev.ts

@@ -0,0 +1,10 @@
+export default {
+  define: {
+    'process.env': {
+      ENV: 'test',
+      SOCKETURL: 'wss://rtcio.bytedance.com',
+      ICEURL:
+        'https://rtc-access.bytedance.com/dispatch/v1/AccessInfo?Action=GetAccessInfo',
+    },
+  },
+};

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/.umirc.ts

@@ -46,12 +46,4 @@ export default defineConfig({
   chainWebpack: function (memo) {
     memo.resolve.extensions.add('.tsx');
   },
-  define: {
-    'process.env': {
-      ENV: 'PROD',
-      SOCKETURL: 'wss://rtcio.bytedance.com',
-      ICEURL:
-        'https://rtc-access.bytedance.com/dispatch/v1/AccessInfo?Action=GetAccessInfo',
-    },
-  }
 });

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Volcengine
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/package.json

@@ -1,7 +1,9 @@
 {
   "private": true,
   "scripts": {
-    "start": "cross-env umi dev",
+    "start": "cross-env UMI_ENV=dev umi dev",
+    "build": "cross-env UMI_ENV=build umi build",
+    "build_test": "cross-env UMI_ENV=dev umi build",
     "postinstall": "umi generate tmp",
     "prettier": "prettier --write '**/*.{js,jsx,tsx,ts,less,md,json}'",
     "test": "umi-test",
@@ -24,13 +26,16 @@
     "@ant-design/icons": "^4.7.0",
     "@ant-design/pro-layout": "^6.5.0",
     "@umijs/hooks": "^1.9.3",
+    "@volcengine/rtc": "^4.36.0",
     "antd": "^4.16.6",
     "debug": "^4.3.1",
     "dva-model-creator": "^0.4.3",
     "eventemitter3": "^4.0.7",
+    "lodash": "^4.17.21",
     "lodash.chunk": "^4.2.0",
     "lodash.debounce": "^4.0.8",
     "socket.io-client": "2.3.1",
+    "styled-components": "^5.3.3",
     "umi": "^3.5.0",
     "uuid": "^8.3.2"
   },
@@ -42,6 +47,7 @@
     "@types/react-dom": "^17.0.0",
     "@types/react-test-renderer": "^16.0.3",
     "@types/socket.io-client": "1.4.32",
+    "@types/styled-components": "^5.1.24",
     "@types/uuid": "^8.3.0",
     "@typescript-eslint/eslint-plugin": "^4.26.0",
     "@typescript-eslint/parser": "^4.26.0",

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/src/app-interfaces.ts

@@ -3,14 +3,11 @@ import { MeetingModelState } from './models/meeting';
 import { MeetingSettingsState } from './models/meeting-settings';
 import { RTCClientControlModelState } from './models/meeting-client';
 
-import { MeetingControlModelState } from '@@/plugin-dva/connect';
-import {ImmerReducer} from '@@/plugin-dva/connect';
-import {Action} from 'dva-model-creator';
-import {EffectsMapObject, SubscriptionsMapObject} from 'dva';
+import { MeetingControlModelState, ImmerReducer } from '@@/plugin-dva/connect';
+import { Action } from 'dva-model-creator';
+import { EffectsMapObject, SubscriptionsMapObject } from 'dva';
 import { AudioStats } from '@/lib/socket-interfaces';
-import {
-  RTCStream,
-} from '@volcengine/rtc';
+import { RTCStream } from '@volcengine/rtc';
 import { ConnectedProps, connector } from '@/pages/Meeting/configs/config';
 
 export interface AppState {
@@ -25,14 +22,15 @@ export interface AppModel<S> {
   namespace: string;
   state: S;
   reducers: {
-    [K in string]: ImmerReducer<S, Action<any>>
-  },
-  effects?: EffectsMapObject,
-  subscriptions?: SubscriptionsMapObject,
+    [K in string]: ImmerReducer<S, Action<any>>;
+  };
+  effects?: EffectsMapObject;
+  subscriptions?: SubscriptionsMapObject;
 }
 
 export enum FitType {
-  cover, contain
+  cover,
+  contain,
 }
 
 type EncoderConfiguration = {
@@ -113,8 +111,8 @@ export interface RTCClint {
   ) => void;
   leave: (onSuccess?: () => void, onFailure?: (err: Error) => void) => void;
   on: (event: string, callback: (param: any) => void) => void;
-  getRemoteAudioStats(callback: (param: AudioStats) => void): void;
-  getLocalAudioStats(callback: (param: AudioStats) => void): void;
+  getRemoteAudioStats: (callback: (param: AudioStats) => void) => void;
+  getLocalAudioStats: (callback: (param: AudioStats) => void) => void;
 }
 
 export interface ConnectStatus {
@@ -166,9 +164,7 @@ export interface IMeetingState {
   users: any[];
 }
 
-
-export type MeetingProps = ConnectedProps<typeof connector>
-
+export type MeetingProps = ConnectedProps<typeof connector>;
 
 export type LocalStats = {
   audioStats: {

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/src/app.less

@@ -1,14 +1,14 @@
-
 #root {
-  height:100%;
-  >div{
+  height: 100%;
+  > div {
     height: inherit;
   }
 }
 
 /*reset antd theme css*/
 #root {
-  .ant-input:focus, .ant-input-focused {
+  .ant-input:focus,
+  .ant-input-focused {
     border-color: transparent;
     box-shadow: none;
   }

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/src/components/FeedBack/index.less

@@ -1,5 +1,5 @@
-.feedback{
-  .title{
+.feedback {
+  .title {
     font-family: PingFang SC;
     font-size: 14px;
     font-style: normal;
@@ -9,16 +9,17 @@
     text-align: left;
     margin-bottom: 16px;
   }
-  .good, .bad{
+  .good,
+  .bad {
     width: 28px;
     height: 28px;
     display: inline-block;
     text-align: center;
   }
-  .good{
+  .good {
     background-image: url('../../../assets/images/good.png');
     background-size: contain;
-    &:hover{
+    &:hover {
       background-image: url('../../../assets/images/good_selected.png');
     }
   }
@@ -30,13 +31,13 @@
       background-image: url('../../../assets/images/bad_selected.png');
     }
   }
-  .questions{
+  .questions {
     margin-bottom: 24px;
-    span{
+    span {
       width: 80px;
       height: 32px;
       padding: 6px 16px;
-      background: #F2F3F8;
+      background: #f2f3f8;
       border-radius: 2px;
       font-family: PingFang SC;
       font-size: 12px;
@@ -47,21 +48,21 @@
       text-align: left;
       margin-right: 16px;
       cursor: pointer;
-      color: #1D2129;
-      &.span-selected{
-        background: #E8F3FF;
-        color: #165DFF;
+      color: #1d2129;
+      &.span-selected {
+        background: #e8f3ff;
+        color: #165dff;
       }
     }
   }
-  .bottom{
+  .bottom {
     text-align: center;
     margin-top: 24px;
-    span{
+    span {
       font-size: 12px;
     }
   }
-  .text{
+  .text {
     position: relative;
     textarea::placeholder {
       font-family: PingFang SC;
@@ -71,13 +72,13 @@
       line-height: 20px;
     }
   }
-  :global{
-    .ant-input-textarea-show-count::after{
+  :global {
+    .ant-input-textarea-show-count::after {
       position: absolute;
       bottom: 4px;
       right: 10px;
       font-size: 12px;
       line-height: 20px;
     }
   }
-}
+}

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/src/components/FeedBack/index.tsx

@@ -25,7 +25,9 @@ const ToggleButton = () => {
         <span
           key={item}
           onClick={() => clickDom(item)}
-          className={selected.indexOf(item) == -1 ? '' : styles['span-selected']}
+          className={
+            selected.indexOf(item) === -1 ? '' : styles['span-selected']
+          }
         >
           {item}
         </span>
@@ -35,7 +37,7 @@ const ToggleButton = () => {
 };
 
 const FeedBack: FC<{ status: string }> = ({ status }) => {
-  const [ visible, setVisible ] = useState(status === 'end');
+  const [visible, setVisible] = useState(status === 'end');
   const [detailVisible, setDetailVisible] = useState(false);
 
   const openDetail = () => {

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/src/components/IconBtn/icon-btn.less

@@ -1,14 +1,14 @@
 .icon-btn {
-  background: #F2F3F5;
+  background: #f2f3f5;
   margin-left: 16px;
   display: flex;
   justify-content: center;
   align-items: center;
   cursor: pointer;
-  transition: background-color .3s ease;
+  transition: background-color 0.3s ease;
   user-select: none;
   &:hover {
-    background: darken(#F2F3F5, 5%);
+    background: darken(#f2f3f5, 5%);
   }
 
   &:last-child {

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/src/components/IconBtn/index.tsx

@@ -1,17 +1,17 @@
-import React, {ReactEventHandler, CSSProperties} from 'react';
+import React, { ReactEventHandler, CSSProperties } from 'react';
 import styles from './icon-btn.less';
 export interface IconBtnProps {
-  onClick?: ReactEventHandler,
-  onMouseEnter?: ReactEventHandler,
-  width?: number,
-  height?: number,
-  shape?: 'circle' | 'square',
-  radius?: number,
-  style?: CSSProperties
+  onClick?: ReactEventHandler;
+  onMouseEnter?: ReactEventHandler;
+  width?: number;
+  height?: number;
+  shape?: 'circle' | 'square';
+  radius?: number;
+  style?: CSSProperties;
 }
 
-const IconBtn: React.FC<IconBtnProps> = props => {
-  const {radius = 0, shape = 'circle', style = {}} = props;
+const IconBtn: React.FC<IconBtnProps> = (props) => {
+  const { radius = 0, shape = 'circle', style = {} } = props;
   const finalRadius = shape === 'circle' ? '50%' : radius;
   return (
     <div
@@ -22,8 +22,8 @@ const IconBtn: React.FC<IconBtnProps> = props => {
         ...style,
         width: props.width || 24,
         height: props.height || 24,
-        borderRadius: finalRadius
-     }}
+        borderRadius: finalRadius,
+      }}
     >
       {props.children}
     </div>

Web/veRTCScenesDemo/veRTC_Demo/MeetingDemo/src/components/Logo/index.tsx

@@ -5,12 +5,7 @@ import styles from './index.less';
 const Logo: React.FC = () => {
   return (
     <div className={styles.container}>
-      <img
-        src={logoImg}
-        alt="logo"
-        draggable="false"
-        width={242}
-      />
+      <img src={logoImg} alt="logo" draggable="false" width={242} />
     </div>
   );
 };