From 3eefcfb71e184e03c4263343b0c5ba4d3c8509db Mon Sep 17 00:00:00 2001 From: Adam Weeks Date: Fri, 24 May 2024 14:47:35 -0400 Subject: [PATCH] refactor: style with prettier formatting --- index.html | 172 ++++++++++++++++++++++++++++++++++++++---------- index.js | 63 +++++++++--------- meeting-info.js | 6 +- styles.css | 28 ++++++-- webex.js | 145 ++++++++++++++++++++++------------------ 5 files changed, 275 insertions(+), 139 deletions(-) diff --git a/index.html b/index.html index 72fe320..454bd34 100644 --- a/index.html +++ b/index.html @@ -1,4 +1,4 @@ - +
-
+
- My-store + My-store +
+
+ Dashboard
-
Dashboard
-

Your Orders

+

+ Your Orders +

+
+
+ Settings +
+
+ Profile +
+
+ Logout
-
Settings
-
Profile
-
Logout

John Doe

@@ -34,7 +50,9 @@
- + 2024-03-02 @@ -91,7 +113,11 @@
- + 2024-01-22 @@ -109,7 +135,11 @@
- + 2023-04-15 @@ -128,7 +158,11 @@
- + 2023-05-05 @@ -147,7 +181,11 @@
- + 2023-06-20 @@ -166,7 +204,11 @@
- + 2023-07-10 @@ -178,19 +220,31 @@

X

How can we help you

-

Please choose an option bellow

+

+ Please choose an option bellow +

Smart TV - Electronics - Delivered - 2024-03-19

What do you need assistance with?

-
+
@@ -204,7 +258,10 @@

Smart TV - Electronics - Delivered - 2024-03-19

What kind kind of support you are looking for?

-
+
@@ -222,7 +279,14 @@

Smart TV - Electronics - Delivered - 2024-03-19

X @@ -231,7 +295,11 @@

Smart TV - Electronics - Delivered - 2024-03-19

-
+
John Doe (Customer) @@ -241,27 +309,58 @@

Smart TV - Electronics - Delivered - 2024-03-19

- - Steve (Support Executive) + + Steve (Support Executive)
-
+
- - - + +
-
+
VBG
@@ -284,8 +383,11 @@

Smart TV - Electronics - Delivered - 2024-03-19

- - + + diff --git a/index.js b/index.js index b5c472f..212935b 100644 --- a/index.js +++ b/index.js @@ -1,59 +1,60 @@ -import { joinMeeting } from './webex.js'; +import { joinMeeting } from "./webex.js"; function openModal() { - const body = document.getElementById('#body'); - body.style.filter = 'blur(15px)'; + const body = document.getElementById("#body"); + body.style.filter = "blur(15px)"; - const formModal = document.getElementById('#formModal'); - formModal.style.display = 'block'; + const formModal = document.getElementById("#formModal"); + formModal.style.display = "block"; } function closeModal() { - const body = document.getElementById('#body'); - body.style.filter = 'none'; + const body = document.getElementById("#body"); + body.style.filter = "none"; - const formModal = document.getElementById('#formModal'); - formModal.style.display = 'none'; + const formModal = document.getElementById("#formModal"); + formModal.style.display = "none"; } async function openMeetingModal() { - const formModal = document.getElementById('#formModal'); - formModal.style.display = 'none'; + const formModal = document.getElementById("#formModal"); + formModal.style.display = "none"; - const meetingModal = document.getElementById('#meetingModal'); - meetingModal.style.display = 'block'; + const meetingModal = document.getElementById("#meetingModal"); + meetingModal.style.display = "block"; await joinMeeting(); } function closeMeetingModal() { - const body = document.getElementById('#body'); - body.style.filter = 'none'; - const meetingModal = document.getElementById('#meetingModal'); - meetingModal.style.display = 'none'; + const body = document.getElementById("#body"); + body.style.filter = "none"; + const meetingModal = document.getElementById("#meetingModal"); + meetingModal.style.display = "none"; } function handlerAssistanceOnchange() { - const supportRow = document.getElementById('support-row'); - supportRow.style.display = 'block'; + const supportRow = document.getElementById("support-row"); + supportRow.style.display = "block"; } function handlerSupportOnchange() { - const getHelpBtn = document.querySelector('.get-help'); - getHelpBtn.style.display = 'block'; + const getHelpBtn = document.querySelector(".get-help"); + getHelpBtn.style.display = "block"; } //Make the DIV element draggagle: -dragElement(document.getElementById('local-video-section')); +dragElement(document.getElementById("local-video-section")); function dragElement(elmnt) { var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0; - if (document.getElementById(elmnt.id + 'local-video')) { + if (document.getElementById(elmnt.id + "local-video")) { /* if present, the header is where you move the DIV from:*/ - document.getElementById(elmnt.id + 'local-video').onmousedown = dragMouseDown; + document.getElementById(elmnt.id + "local-video").onmousedown = + dragMouseDown; } else { /* otherwise, move the DIV from anywhere inside the DIV:*/ elmnt.onmousedown = dragMouseDown; @@ -79,8 +80,8 @@ function dragElement(elmnt) { pos3 = e.clientX; pos4 = e.clientY; // set the element's new position: - elmnt.style.top = elmnt.offsetTop - pos2 + 'px'; - elmnt.style.left = elmnt.offsetLeft - pos1 + 'px'; + elmnt.style.top = elmnt.offsetTop - pos2 + "px"; + elmnt.style.left = elmnt.offsetLeft - pos1 + "px"; } function closeDragElement() { @@ -91,8 +92,8 @@ function dragElement(elmnt) { } window.openModal = openModal; -window.handlerSupportOnchange = handlerSupportOnchange -window.handlerAssistanceOnchange = handlerAssistanceOnchange -window.closeMeetingModal = closeMeetingModal -window.openMeetingModal = openMeetingModal -window.closeModal = closeModal +window.handlerSupportOnchange = handlerSupportOnchange; +window.handlerAssistanceOnchange = handlerAssistanceOnchange; +window.closeMeetingModal = closeMeetingModal; +window.openMeetingModal = openMeetingModal; +window.closeModal = closeModal; diff --git a/meeting-info.js b/meeting-info.js index 66a7c52..bcd7d27 100644 --- a/meeting-info.js +++ b/meeting-info.js @@ -1,14 +1,14 @@ // This URL below can be replaced with any Virtual Background Image URL -export const vbgImageUrl = './images/V_B_G.jpg'; +export const vbgImageUrl = "./images/V_B_G.jpg"; // Obtain the following meetingInfo by creating a new meeting in the Webex Developer Portal // Read through this API Reference to know more: // https://developer.webex.com/docs/api/v1/meetings/create-a-meeting // Once meeting is created, copy the whole response and paste it here. // Note - Unless we have this information, this demo cannot join a meeting -export const meetingInfo = {} // REQUIRED +export const meetingInfo = {}; // REQUIRED -// To get guestIssueAccessToken and guestEndpointUrl +// To get guestIssueAccessToken and guestEndpointUrl // Update the following with the Guest Issuer Access Token through Service Apps // Read more about it here: https://developer.webex.com/docs/sa-guest-management // Note - Unless we have this token, this demo cannot join a meeting diff --git a/styles.css b/styles.css index cc99344..699b75b 100644 --- a/styles.css +++ b/styles.css @@ -1,6 +1,6 @@ * { font-size: small; - font-family: 'Roboto', 'Helvetica', 'Arial', sans-serif; + font-family: "Roboto", "Helvetica", "Arial", sans-serif; } .body { @@ -41,7 +41,11 @@ text-align: left; padding: 0 0 0 30px; color: white; - background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%); + background: linear-gradient( + 90deg, + rgba(37, 125, 232, 1) 0%, + rgba(57, 146, 235, 1) 52% + ); border-radius: 5px; margin-left: 4px; margin-top: -19px !important; @@ -54,7 +58,11 @@ position: relative; text-align: center; color: white; - background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%); + background: linear-gradient( + 90deg, + rgba(37, 125, 232, 1) 0%, + rgba(57, 146, 235, 1) 52% + ); border-radius: 5px; margin-top: 52vh; margin-left: 4px; @@ -209,7 +217,11 @@ tr .header { padding: 27px; border-radius: 10px; background: rgb(37, 125, 232); - background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%); + background: linear-gradient( + 90deg, + rgba(37, 125, 232, 1) 0%, + rgba(57, 146, 235, 1) 52% + ); position: absolute; top: 99px; font-weight: 500; @@ -273,7 +285,11 @@ tr .header { height: 67px; position: relative; background: rgb(37, 125, 232); - background: linear-gradient(90deg, rgba(37, 125, 232, 1) 0%, rgba(57, 146, 235, 1) 52%); + background: linear-gradient( + 90deg, + rgba(37, 125, 232, 1) 0%, + rgba(57, 146, 235, 1) 52% + ); } #formModal p { @@ -353,7 +369,7 @@ audio { margin-top: 1rem; } -input[type='radio'] { +input[type="radio"] { cursor: pointer; } #support-row { diff --git a/webex.js b/webex.js index dceb5f7..7928439 100644 --- a/webex.js +++ b/webex.js @@ -1,15 +1,21 @@ -const rootElement = document.getElementById('root'); -const joinWithMediaBtn = document.getElementById('join-with-media'); -const leaveMeetingBtn = document.getElementById('leave-meeting'); -const toggleVBGBtn = document.getElementById('toggle-vbg-btn'); +const rootElement = document.getElementById("root"); +const joinWithMediaBtn = document.getElementById("join-with-media"); +const leaveMeetingBtn = document.getElementById("leave-meeting"); +const toggleVBGBtn = document.getElementById("toggle-vbg-btn"); // Media elements -const remoteVideoStreamElm = document.getElementById('remote-video'); -const remoteAudioStreamElm = document.getElementById('remote-audio'); -const localVideoStreamElm = document.getElementById('local-video'); -const localAudioStreamElm = document.getElementById('local-audio'); - -import { meetingInfo, guestEndpointUrl, vbgImageUrl, guestIssuerAccessToken,personalAccessToken } from './meeting-info.js'; +const remoteVideoStreamElm = document.getElementById("remote-video"); +const remoteAudioStreamElm = document.getElementById("remote-audio"); +const localVideoStreamElm = document.getElementById("local-video"); +const localAudioStreamElm = document.getElementById("local-audio"); + +import { + meetingInfo, + guestEndpointUrl, + vbgImageUrl, + guestIssuerAccessToken, + personalAccessToken, +} from "./meeting-info.js"; let webex = null; let createdMeeting = null; @@ -18,17 +24,17 @@ let localStream = null; let vbgEffect = null; let isVBGEnabled = false; -rootElement.addEventListener('click', async (e) => { +rootElement.addEventListener("click", async (e) => { switch (e.target.id) { - case 'join-with-media': + case "join-with-media": await joinMeeting(); break; - case 'toggle-vbg-btn': + case "toggle-vbg-btn": await toggleVBG(); break; - case 'leave-meeting': + case "leave-meeting": await leaveMeeting(); break; @@ -39,20 +45,20 @@ rootElement.addEventListener('click', async (e) => { e.stopPropagation(); }); -const guestUrl = 'https://webexapis.com/v1/guests/token'; +const guestUrl = "https://webexapis.com/v1/guests/token"; // Via Service App async function getGuestAccessTokenV2() { const response = await fetch(guestUrl, { - method: 'post', + method: "post", headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', + Accept: "application/json", + "Content-Type": "application/json", Authorization: `Bearer ${guestIssuerAccessToken}`, }, body: JSON.stringify({ - subject: 'Guest token for Webex SDK Sample App', - displayName: 'Guest User', + subject: "Guest token for Webex SDK Sample App", + displayName: "Guest User", }), }); @@ -64,13 +70,13 @@ async function getGuestAccessTokenV2() { async function getGuestAccessToken() { // Create the end point using guest issuer const response = await fetch(guestEndpointUrl, { - method: 'post', + method: "post", headers: { - Accept: 'application/json', - 'Content-Type': 'application/json', + Accept: "application/json", + "Content-Type": "application/json", }, body: JSON.stringify({ - name: 'Guest User', + name: "Guest User", }), }); @@ -81,7 +87,7 @@ async function getGuestAccessToken() { async function initWebexAndRegisterDevice(access_token) { if (!access_token) { - alert('Please provide an access token'); + alert("Please provide an access token"); return; } @@ -103,25 +109,25 @@ async function createMeeting() { function setMediaListeners() { // Wait for media in order to show video - createdMeeting.on('media:ready', (media) => { - console.log('Media ready', media); + createdMeeting.on("media:ready", (media) => { + console.log("Media ready", media); switch (media.type) { - case 'remoteVideo': + case "remoteVideo": remoteVideoStreamElm.srcObject = media.stream; break; - case 'remoteAudio': + case "remoteAudio": remoteAudioStreamElm.srcObject = media.stream; break; } }); // Remove stream if media stopped - createdMeeting.on('media:stopped', (media) => { + createdMeeting.on("media:stopped", (media) => { switch (media.type) { - case 'remoteVideo': + case "remoteVideo": remoteVideoStreamElm.srcObject = null; break; - case 'remoteAudio': + case "remoteAudio": remoteAudioStreamElm.srcObject = null; break; } @@ -130,12 +136,16 @@ function setMediaListeners() { async function getLocalStreams() { // https://github.com/webex/webex-js-sdk/wiki/Streams-and-Effects - const microphoneStream = await webex.meetings.mediaHelpers.createMicrophoneStream({ - echoCancellation: true, - noiseSuppression: true, - }); + const microphoneStream = + await webex.meetings.mediaHelpers.createMicrophoneStream({ + echoCancellation: true, + noiseSuppression: true, + }); - const cameraStream = await webex.meetings.mediaHelpers.createCameraStream({ width: 640, height: 480 }); // Optional params + const cameraStream = await webex.meetings.mediaHelpers.createCameraStream({ + width: 640, + height: 480, + }); // Optional params localVideoStreamElm.srcObject = cameraStream.outputStream; return { @@ -145,12 +155,14 @@ async function getLocalStreams() { } async function verifyPassword() { - const { isPasswordValid } = await createdMeeting.verifyPassword(meetingInfo.password); + const { isPasswordValid } = await createdMeeting.verifyPassword( + meetingInfo.password, + ); if (!isPasswordValid) { - console.error('Invalid meeting password'); + console.error("Invalid meeting password"); - throw new Error('Invalid meeting password'); + throw new Error("Invalid meeting password"); } } @@ -164,12 +176,12 @@ async function joinMeetingWithMedia(localStreams) { await createdMeeting.joinWithMedia(meetingOptions); - leaveMeetingBtn.style.display = 'inline'; - joinWithMediaBtn.style.display = 'none'; + leaveMeetingBtn.style.display = "inline"; + joinWithMediaBtn.style.display = "none"; } async function leaveMeeting() { - leaveMeetingBtn.innerHTML = 'Leaving...'; + leaveMeetingBtn.innerHTML = "Leaving..."; leaveMeetingBtn.disabled = true; await createdMeeting.leave(); @@ -177,20 +189,20 @@ async function leaveMeeting() { } export async function joinMeeting() { - joinWithMediaBtn.innerHTML = 'Joining...'; + joinWithMediaBtn.innerHTML = "Joining..."; joinWithMediaBtn.disabled = true; - joinWithMediaBtn.style.backgroundColor = 'grey'; - joinWithMediaBtn.style.cursor = 'default'; + joinWithMediaBtn.style.backgroundColor = "grey"; + joinWithMediaBtn.style.cursor = "default"; try { // Step-1 - let accessToken - - if(guestEndpointUrl && guestIssuerAccessToken){ + let accessToken; + + if (guestEndpointUrl && guestIssuerAccessToken) { accessToken = await getGuestAccessTokenV2(); - } else{ - accessToken = personalAccessToken - } + } else { + accessToken = personalAccessToken; + } // Step-2 await initWebexAndRegisterDevice(accessToken); @@ -211,17 +223,17 @@ export async function joinMeeting() { // Step-7 await joinMeetingWithMedia(localStream); } catch (error) { - console.error('Error joining meeting', error); + console.error("Error joining meeting", error); reset(); } } async function toggleVBG() { - toggleVBGBtn.innerText = 'Toggling...'; + toggleVBGBtn.innerText = "Toggling..."; if (!vbgEffect) { vbgEffect = await webex.meetings.createVirtualBackgroundEffect({ - mode: 'IMAGE', // options are 'BLUR', 'IMAGE', 'VIDEO' + mode: "IMAGE", // options are 'BLUR', 'IMAGE', 'VIDEO' bgImageUrl: vbgImageUrl, // bgVideoUrl: blurVBGVideoUrl, }); @@ -237,7 +249,7 @@ async function toggleVBG() { isVBGEnabled = true; } - toggleVBGBtn.innerText = 'Toggle VBG'; + toggleVBGBtn.innerText = "Toggle VBG"; } async function addBNR() { @@ -252,15 +264,15 @@ async function disableBNR() { function reset() { // Join meeting button - joinWithMediaBtn.style.display = 'block'; - joinWithMediaBtn.innerHTML = 'Join'; + joinWithMediaBtn.style.display = "block"; + joinWithMediaBtn.innerHTML = "Join"; joinWithMediaBtn.disabled = false; - joinWithMediaBtn.style.backgroundColor = '#59b15d'; - joinWithMediaBtn.style.cursor = 'pointer'; + joinWithMediaBtn.style.backgroundColor = "#59b15d"; + joinWithMediaBtn.style.cursor = "pointer"; // Leave meeting button - leaveMeetingBtn.style.display = 'none'; - leaveMeetingBtn.innerHTML = 'Leave'; + leaveMeetingBtn.style.display = "none"; + leaveMeetingBtn.innerHTML = "Leave"; leaveMeetingBtn.disabled = false; cleanUpMedia(); @@ -269,12 +281,17 @@ function reset() { function cleanUpMedia() { // local streams can be used across meetings - [localAudioStreamElm, localVideoStreamElm, remoteVideoStreamElm, remoteAudioStreamElm].forEach((elem) => { + [ + localAudioStreamElm, + localVideoStreamElm, + remoteVideoStreamElm, + remoteAudioStreamElm, + ].forEach((elem) => { if (elem.srcObject) { try { elem.srcObject.getTracks().forEach((track) => track.stop()); } catch (error) { - console.log('Cleanup media error: ', error); + console.log("Cleanup media error: ", error); } finally { elem.srcObject = null; }