Skip to content

Commit

Permalink
Merge pull request #77 from zoom/2.1.0
Browse files Browse the repository at this point in the history
Video SDK Web 2.1.0 update
  • Loading branch information
endazoom authored Dec 31, 2024
2 parents 4648395 + 172eb54 commit a0b6af5
Show file tree
Hide file tree
Showing 48 changed files with 623 additions and 243 deletions.
17 changes: 15 additions & 2 deletions .eslintrc
Original file line number Diff line number Diff line change
Expand Up @@ -45,19 +45,32 @@
"no-unused-vars": 0,
"no-unreachable": 2,
"no-duplicate-imports": 2,
"max-params":["error", 8],
"max-params": ["error", 8],
"react/display-name": 0,
"react-hooks/rules-of-hooks": 2,
"react-hooks/exhaustive-deps": 1,
"react/no-unescaped-entities": 1,
"react/jsx-uses-react": "off",
"react/react-in-jsx-scope": "off",
"complexity": "off",
"prefer-object-has-own": "off",
"prettier/prettier": [
"error",
{
"endOfLine": "auto"
}
]
],
"@typescript-eslint/no-unused-vars": [
"error",
{
"args": "all",
"argsIgnorePattern": "^_",
"caughtErrors": "none",
"caughtErrorsIgnorePattern": "^_",
"destructuredArrayIgnorePattern": "^_",
"varsIgnorePattern": "^_",
"ignoreRestSiblings": true,
},
],
}
}
23 changes: 14 additions & 9 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
{
"name": "react-video-sdk-demo",
"version": "1.12.14",
"version": "2.1.0",
"private": true,
"dependencies": {
"@ant-design/icons": "4.7.0",
"@testing-library/jest-dom": "^5.11.9",
"@testing-library/react": "^11.2.5",
"@testing-library/user-event": "^12.8.3",
"@zoom/videosdk": "^1.12.14",
"@zoom/videosdk": "^2.1.0",
"antd": "4.24.3",
"classnames": "^2.2.6",
"crypto-js": "^4.0.0",
Expand Down Expand Up @@ -59,18 +59,23 @@
"@types/react-dom": "18.2.18",
"@types/react-router-dom": "^5.3.3",
"@types/uuid": "^9.0.7",
"@typescript-eslint/eslint-plugin": "^5.31.0",
"@typescript-eslint/parser": "^5.31.0",
"@typescript-eslint/eslint-plugin": "^5.62.0",
"@typescript-eslint/parser": "^5.62.0",
"copy-webpack-plugin": "6.2.1",
"customize-cra": "1.0.0",
"eslint-config-alloy": "^4.6.2",
"eslint-config-prettier": "^8.5.0",
"eslint-plugin-prettier": "^4.2.1",
"prettier": "^2.6.2",
"eslint-config-alloy": "^5.1.2",
"eslint-config-prettier": "^9.1.0",
"eslint-plugin-prettier": "^5.2.1",
"prettier": "^3.3.3",
"react-app-rewired": "2.2.1",
"sass": "1.32.8",
"sass-loader": "10.1.1",
"typescript": "^4.3.5",
"typescript": "^5.5.4",
"write-file-webpack-plugin": "4.5.1"
},
"overrides": {
"react-scripts": {
"typescript": "^5"
}
}
}
40 changes: 35 additions & 5 deletions src/App.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,21 @@
import { useEffect, useContext, useState, useCallback, useReducer, useMemo } from 'react';
import {
type HTMLAttributes,
type DetailedHTMLProps,
type DOMAttributes,
useEffect,
useContext,
useState,
useCallback,
useReducer,
useMemo
} from 'react';
import { BrowserRouter as Router, Switch, Route } from 'react-router-dom';
import ZoomVideo, { ConnectionState, ReconnectReason } from '@zoom/videosdk';
import ZoomVideo, {
type VideoPlayerContainer,
type VideoPlayer,
ConnectionState,
ReconnectReason
} from '@zoom/videosdk';
import { message, Modal } from 'antd';
import 'antd/dist/antd.min.css';
import produce from 'immer';
Expand All @@ -15,8 +30,9 @@ import LoadingLayer from './component/loading-layer';
import Chat from './feature/chat/chat';
import Command from './feature/command/command';
import Subsession from './feature/subsession/subsession';
import { MediaStream } from './index-types';
import type { MediaStream } from './index-types';
import './App.css';
type CustomElement<T> = Partial<T & DOMAttributes<T> & { children: any }>;

interface AppProps {
meetingArgs: {
Expand Down Expand Up @@ -91,6 +107,12 @@ declare global {
ltClient: any | undefined;
logClient: any | undefined;
}
namespace JSX {
interface IntrinsicElements {
['video-player']: DetailedHTMLProps<HTMLAttributes<VideoPlayer>, VideoPlayer> & { class?: string };
['video-player-container']: CustomElement<VideoPlayerContainer> & { class?: string };
}
}
}

function App(props: AppProps) {
Expand Down Expand Up @@ -167,7 +189,9 @@ function App(props: AppProps) {
};
init();
return () => {
ZoomVideo.destroyClient();
if (zmClient.getSessionInfo()?.isInMeeting) {
ZoomVideo.destroyClient();
}
};
}, [
sdkKey,
Expand Down Expand Up @@ -205,9 +229,15 @@ function App(props: AppProps) {
window.mediaStream = zmClient.getMediaStream();

console.log('getSessionInfo', zmClient.getSessionInfo());
} else if (payload.state === ConnectionState.Closed) {
} else if (payload.state === ConnectionState.Closed || payload.state === ConnectionState.Fail) {
setStatus('closed');
dispatch({ type: 'reset-media' });
if (payload.state === ConnectionState.Fail) {
Modal.error({
title: 'Join meeting failed',
content: `Join meeting failed. reason:${payload.reason ?? ''}`
});
}
if (payload.reason === 'ended by host') {
Modal.warning({
title: 'Meeting ended',
Expand Down
2 changes: 1 addition & 1 deletion src/feature/chat/chat.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@
align-items: center;
justify-content: center;
.chat-wrap {
width: 60vw;
width: max(340px,60vw);
max-width: 800px;
height: 80vh;
background: #fff;
Expand Down
4 changes: 3 additions & 1 deletion src/feature/chat/chat.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,6 @@
import React, { useCallback, useContext, useEffect, useState, useRef, useLayoutEffect } from 'react';
import type React from 'react';
// eslint-disable-next-line no-duplicate-imports
import { useCallback, useContext, useState, useRef, useLayoutEffect } from 'react';
import { Input } from 'antd';
import { ChatPrivilege } from '@zoom/videosdk';
import ZoomContext from '../../context/zoom-context';
Expand Down
4 changes: 2 additions & 2 deletions src/feature/command/command.scss
Original file line number Diff line number Diff line change
@@ -1,12 +1,12 @@
.chat-container {
.cmd-container {
width: 100vw;
height: 100vh;
background: rgba(0,0,0,0.6);
display: flex;
align-items: center;
justify-content: center;
.chat-wrap {
width: 60vw;
width: max(340px,60vw);
max-width: 800px;
height: 80vh;
background: #fff;
Expand Down
10 changes: 6 additions & 4 deletions src/feature/command/command.tsx
Original file line number Diff line number Diff line change
@@ -1,14 +1,16 @@
import React, { useCallback, useContext, useEffect, useState, useRef } from 'react';
import type React from 'react';
// eslint-disable-next-line no-duplicate-imports
import { useCallback, useContext, useEffect, useState, useRef } from 'react';
import produce from 'immer';
import { Input } from 'antd';
import ZoomContext from '../../context/zoom-context';
import { CommandReceiver, CommandRecord } from './cmd-types';
import type { CommandReceiver, CommandRecord } from './cmd-types';
import { useParticipantsChange } from './hooks/useParticipantsChange';
import ChatMessageItem from './component/cmd-message-item';
import CommandReceiverContainer from './component/cmd-receiver';
import { useMount } from '../../hooks';
import './command.scss';
import { CommandChannelMsg } from '@zoom/videosdk';
import type { CommandChannelMsg } from '@zoom/videosdk';
const { TextArea } = Input;

const oneToAllUser = {
Expand Down Expand Up @@ -140,7 +142,7 @@ const CommandContainer = () => {
setCurrentUserId(zmClient.getSessionInfo().userId);
});
return (
<div className="chat-container">
<div className="cmd-container">
<div className="chat-wrap">
<h2>Command Channel Chat</h2>
<div className="chat-message-wrap" ref={chatWrapRef}>
Expand Down
19 changes: 13 additions & 6 deletions src/feature/preview/preview.scss
Original file line number Diff line number Diff line change
Expand Up @@ -16,23 +16,30 @@
background: rgba(0, 0, 0, 1);
border-radius: 14px;
overflow: hidden;
&>video, &>canvas {
& > video,
.video-player-container {
position: absolute;
top:0;
top: 0;
left: 0;
width: 100%;
height: 100%;
display: none;
}
& > .preview-video-show{
& .video-player {
height: 100%;
}
.preview-video-show {
z-index: 1;
display: block;
width: 100%;
height: 100%;
}
}

.video-operations-preview > div{
.video-operations-preview > div {
display: flex;
padding: 15px 20px;
background-color: rgba(0,0,0,0.7);
background-color: rgba(0, 0, 0, 0.7);
border-radius: 14px;
}
.join-button {
Expand Down Expand Up @@ -91,7 +98,7 @@
width: 800px;
margin: 0 auto;
text-align: left;
h3{
h3 {
margin-top: 30px;
}
.speaker-action {
Expand Down
Loading

0 comments on commit a0b6af5

Please sign in to comment.