Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

update: New Login Interface Update #25

Open
wants to merge 1 commit into
base: master
Choose a base branch
from
Open

update: New Login Interface Update #25

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,8 +67,11 @@ To get started, clone the repo:

1. Navigate to http://localhost:3000 and click "Join Meeting".

![login screen](/public/images/saulo-costa.jpeg)

### Client View


![Zoom Meeting SDK Client View](/public/images/meetingsdk-web-client-view.gif)

### Component View
Expand Down
15,441 changes: 8,094 additions & 7,347 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

15 changes: 10 additions & 5 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,23 @@
"contributors": [
{
"name": "Tommy Gaessler"
},
{
"name": "Saulo Costa",
"url": "https://github.com/saulotarsobc"
}
],
"homepage": "",
"private": true,
"dependencies": {
"@testing-library/jest-dom": "^5.16.5",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@zoom/meetingsdk": "^3.6.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-scripts": "5.0.1",
"@zoom/meetingsdk": "^3.6.1",
"jsrsasign": "^11.1.0",
"react": "^18.3.1",
"react-dom": "^18.3.1",
"react-scripts": "^5.0.1",
"web-vitals": "^2.1.4"
},
"scripts": {
Expand Down
Binary file added public/images/saulo-costa.jpeg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
100 changes: 100 additions & 0 deletions src/App-New.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,100 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}


main#home {
width: 100%;
height: 100vh;
background-color: #3ba3f8;

.title {
color: #fff;
font-weight: 600;
margin-bottom: 20px;
font-size: 35px;
height: 40px;
text-align: center;
justify-self: center;
}

#container {
height: calc(100vh - 40px);
width: 100%;
min-width: 410px;

display: flex;
justify-content: center;
align-items: center;

#form {
background-color: #fff;
border-radius: 12px;
padding: 10px;
padding-top: 10px;
padding-bottom: 10px;
border-radius: 10px;
width: 400px;

input {
border-radius: 10px;
border: 1px solid #dbdbdb;
outline: none;
height: 50px;
text-decoration: none;
width: 100%;
margin-bottom: 10px;
padding-left: 10px;
}

select {
border-radius: 10px;
border: 1px solid #dbdbdb;
outline: none;
height: 50px;
text-decoration: none;
width: 100%;
padding-left: 10px;
margin-bottom: 10px;
}

input::placeholder {
color: #111;
opacity: .2;
}

span {
font-weight: bold;
color: #383838;
font-size: 20px;
}

button {
background-color: #2D8CFF;
color: #ffffff;
text-decoration: none;
height: 50px;
display: inline-block;
border-radius: 10px;
cursor: pointer;
border: none;
outline: none;
width: 100%;

align-items: center;

&:hover {
background-color: #2681F2;
}
}
}


#meetingSDKElement {
display: block;
position: absolute;
}
}
}
193 changes: 139 additions & 54 deletions src/App-New.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,77 +1,162 @@
import React from 'react';
import React, { useState } from "react";

import './App.css';
import ZoomMtgEmbedded from '@zoom/meetingsdk/embedded';
import "./App-New.css";
import ZoomMtgEmbedded from "@zoom/meetingsdk/embedded";
import { generateSignature, language } from "./utils";

function App() {

const client = ZoomMtgEmbedded.createClient();

var authEndpoint = ''
var sdkKey = ''
var meetingNumber = '123456789'
var passWord = ''
var role = 0
var userName = 'React'
var userEmail = ''
var registrantToken = ''
var zakToken = ''

function getSignature(e) {
const [meetingNumber, setMeetingNumber] = useState("00000000000");
const [passWord, setPassword] = useState("12345678");
const [userName, setUserName] = useState("zoom");

const [lang, setLang] = useState("en-US");
const [role, setRole] = useState("0");

const userEmail = "";
const registrantToken = "";
const zakToken = "";

const sdkKey = "";
const sdkSecret = "";

async function getSignature(e) {
e.preventDefault();

fetch(authEndpoint, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({
meetingNumber: meetingNumber,
role: role
})
}).then(res => res.json())
.then(response => {
startMeeting(response.signature)
}).catch(error => {
console.error(error)
})
if (userName === "") return alert(language[lang].set_username_message);
if (meetingNumber === "") return alert(language[lang].set_meeting_id_message);
if (passWord === "") return alert(language[lang].set_password_message);

const signature = generateSignature(sdkKey, sdkSecret, meetingNumber, role);
startMeeting(signature);
}

function startMeeting(signature) {
let meetingSDKElement = document.getElementById("meetingSDKElement");

let meetingSDKElement = document.getElementById('meetingSDKElement');

client.init({zoomAppRoot: meetingSDKElement, language: 'en-US', patchJsMedia: true}).then(() => {
client.join({
signature: signature,
sdkKey: sdkKey,
meetingNumber: meetingNumber,
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
zak: zakToken
}).then(() => {
console.log('joined successfully')
}).catch((error) => {
console.log(error)
client
.init({
zoomAppRoot: meetingSDKElement,
language: lang,
patchJsMedia: true,
customize: {
video: {
defaultViewType: "gallery",
},
},
})
.then(() => {
client
.join({
signature: signature,
sdkKey: sdkKey,
meetingNumber: meetingNumber,
password: passWord,
userName: userName,
userEmail: userEmail,
tk: registrantToken,
zak: zakToken,
})
.then(() => {
console.log("joined successfully");
})
.catch((error) => {
console.log(error);
});
})
}).catch((error) => {
console.log(error)
})
.catch((error) => {
console.log(error);
});
}

return (
<div className="App">
<main>
<h1>Zoom Meeting SDK Sample React</h1>
<main id="home">
<h1 className="title">Zoom Meeting SDK React sample</h1>

<div id="container">
<div id="form">
<span>{language[lang].language}</span>
<select
name="ml"
id="ml"
value={lang}
onChange={(e) => setLang(e.currentTarget.value)}
>
<option value="de-DE">German | Deutsch</option>
<option value="es-ES">Spanish | Español</option>
<option value="en-US">English | English</option>
<option value="fr-FR">French | Français</option>
<option value="jp-JP">Japanese | 日本語</option>
<option value="pt-PT">Portuguese | Português</option>
<option value="ru-RU">Russian | Русский</option>
<option value="zh-CN">Simplified Chinese | 简体中文</option>
<option value="zh-TW">Traditional Chinese | 繁體中文</option>
<option value="ko-KO">Korean | 한국어</option>
<option value="vi-VN">Vietnamese | Tiếng Việt</option>
<option value="it-IT">Italian | Italiano</option>
<option value="id-ID">Indonesian | Bahasa Indonesia</option>
<option value="nl-NL">Dutch | Nederlands</option>
</select>

<span>{language[lang].name}</span>
<input
type="text"
name="mun"
id="mun"
placeholder="⚠️"
value={userName}
onInput={(e) => {
setUserName(e.currentTarget.value);
}}
/>

<span>{language[lang].meeting_id}</span>
<input
type="number"
name="mid"
id="mid"
placeholder="000 000 0000"
value={meetingNumber}
onInput={(e) => {
setMeetingNumber(e.currentTarget.value);
}}
/>

<span>{language[lang].password}</span>
<input
type="password"
name="mpass"
id="mpass"
placeholder="**********"
value={passWord}
onInput={(e) => {
setPassword(e.currentTarget.value);
}}
/>

<span>{language[lang].role}</span>
<select
name="ml"
id="ml"
value={role}
onChange={(e) => setRole(e.currentTarget.value)}
>
<option value="0">{language[lang].participant}</option>
<option value="1">{language[lang].host}</option>
</select>

<button id="btn" onClick={getSignature}>
{language[lang].join}
</button>
</div>

{/* For Component View */}
<div id="meetingSDKElement">
{/* Zoom Meeting SDK Component View Rendered Here */}
</div>

<button onClick={getSignature}>Join Meeting</button>
</main>
</div>
</div>
</main>
);
}

Expand Down
Loading