From 5bc6b8980328b582cd84d4922bfb16cb4f0a4189 Mon Sep 17 00:00:00 2001 From: Your Name Date: Fri, 14 Nov 2025 13:34:42 +0000 Subject: [PATCH] fixed --- app/src/Room.js | 2 +- app/src/Server.js | 92 ++-- public/css/GroupChat.css | 3 +- public/css/Room.css | 57 +- public/css/Root.css | 79 +-- public/css/RtmpStreamer.css | 4 +- public/css/VideoGrid.css | 4 +- public/css/widgets/Support.css | 2 +- public/js/Room.js | 68 +-- public/js/RoomClient.js | 8 +- public/js/RtmpStreamer.js | 4 +- public/views/404.html | 497 +++++++++++------- public/views/Room.html | 9 +- .../demo/client-server-axios/client/style.css | 2 +- .../client-server-socket/client/style.css | 2 +- 15 files changed, 490 insertions(+), 343 deletions(-) diff --git a/app/src/Room.js b/app/src/Room.js index 190098fc..2f2c1322 100644 --- a/app/src/Room.js +++ b/app/src/Room.js @@ -35,7 +35,7 @@ module.exports = class Room { // ########################## this.recording = { recSyncServerToS3: (config?.integrations?.aws?.enabled && config?.media?.recording?.uploadToS3) || false, - recSyncServerRecording: config?.media?.recording?.enabled || false, + recSyncServerRecording: config?.media?.recording?.enabled || true, recSyncServerEndpoint: config?.media?.recording?.endpoint || '', }; // ########################## diff --git a/app/src/Server.js b/app/src/Server.js index 548daa63..53d50560 100644 --- a/app/src/Server.js +++ b/app/src/Server.js @@ -594,63 +594,63 @@ function startServer() { }); // main page - app.get('/', OIDCAuth, (req, res) => { - //log.debug('/ - hostCfg ----->', hostCfg); - if (!OIDC.enabled && hostCfg.protected) { - hostCfg.authenticated = false; - res.redirect('/login'); - return; - } else { - return htmlInjector.injectHtml(views.landing, res); - } - }); + // app.get('/', OIDCAuth, (req, res) => { + // //log.debug('/ - hostCfg ----->', hostCfg); + // if (!OIDC.enabled && hostCfg.protected) { + // hostCfg.authenticated = false; + // res.redirect('/login'); + // return; + // } else { + // return htmlInjector.injectHtml(views.landing, res); + // } + // }); // Route to display rtmp streamer - app.get('/rtmp', OIDCAuth, (req, res) => { - if (!rtmpCfg || !rtmpCfg.fromStream) { - return res.json({ message: 'The RTMP Streamer is currently disabled.' }); - } - return res.sendFile(views.rtmpStreamer); - }); + // app.get('/rtmp', OIDCAuth, (req, res) => { + // if (!rtmpCfg || !rtmpCfg.fromStream) { + // return res.json({ message: 'The RTMP Streamer is currently disabled.' }); + // } + // return res.sendFile(views.rtmpStreamer); + // }); // set new room name and join - app.get('/newroom', OIDCAuth, (req, res) => { - //log.info('/newroom - hostCfg ----->', hostCfg); + // app.get('/newroom', OIDCAuth, (req, res) => { + // //log.info('/newroom - hostCfg ----->', hostCfg); - if (!OIDC.enabled && hostCfg.protected) { - hostCfg.authenticated = false; - res.redirect('/login'); - return; - } else { - htmlInjector.injectHtml(views.newRoom, res); - } - }); + // if (!OIDC.enabled && hostCfg.protected) { + // hostCfg.authenticated = false; + // res.redirect('/login'); + // return; + // } else { + // htmlInjector.injectHtml(views.newRoom, res); + // } + // }); // Get Active rooms - app.get('/activeRooms', OIDCAuth, (req, res) => { - res.sendFile(views.activeRooms); - }); + // app.get('/activeRooms', OIDCAuth, (req, res) => { + // res.sendFile(views.activeRooms); + // }); - // Check if room active (exists) - app.post('/isRoomActive', (req, res) => { - const { roomId } = checkXSS(req.body); + // // Check if room active (exists) + // app.post('/isRoomActive', (req, res) => { + // const { roomId } = checkXSS(req.body); - if (roomId && (hostCfg.protected || hostCfg.user_auth || OIDC.enabled)) { - const roomActive = roomList.has(roomId); - if (roomActive) log.debug('isRoomActive', { roomId, roomActive }); - res.status(200).json({ message: roomActive }); - } else { - res.status(400).json({ message: 'Unauthorized' }); - } - }); + // if (roomId && (hostCfg.protected || hostCfg.user_auth || OIDC.enabled)) { + // const roomActive = roomList.has(roomId); + // if (roomActive) log.debug('isRoomActive', { roomId, roomActive }); + // res.status(200).json({ message: roomActive }); + // } else { + // res.status(400).json({ message: 'Unauthorized' }); + // } + // }); // Check if Widget room active (exists) - app.post('/isWidgetRoomActive', (req, res) => { - const { roomId } = checkXSS(req.body); - const roomWidgetActive = roomId && roomId === widget.roomId && roomList.has(roomId); - log.debug('isWidgetRoomActive', { roomId, roomWidgetActive }); - res.status(200).json({ message: roomWidgetActive }); - }); + // app.post('/isWidgetRoomActive', (req, res) => { + // const { roomId } = checkXSS(req.body); + // const roomWidgetActive = roomId && roomId === widget.roomId && roomList.has(roomId); + // log.debug('isWidgetRoomActive', { roomId, roomWidgetActive }); + // res.status(200).json({ message: roomWidgetActive }); + // }); // Handle Direct join room with params app.get('/join/', async (req, res) => { diff --git a/public/css/GroupChat.css b/public/css/GroupChat.css index 95b28308..424316d2 100644 --- a/public/css/GroupChat.css +++ b/public/css/GroupChat.css @@ -347,6 +347,7 @@ .ml5 { margin-left: 5px; + color: black; } .ml10 { @@ -357,7 +358,7 @@ textarea, input[type='text'] { background: var(--msger-bg) !important; - color: #fff !important; + color: black !important; transition: height 0.5s !important; } diff --git a/public/css/Room.css b/public/css/Room.css index 9a870909..a578920f 100644 --- a/public/css/Room.css +++ b/public/css/Room.css @@ -4,6 +4,24 @@ # Keyframes --------------------------------------------------------------*/ + +:root { + --primary-red: #e53935; + --dark-red: #c62828; + --light-red: #ff5252; + --accent-red: #ff8a80; + --text-dark: #333333; + --text-light: #666666; + --background: #f9f9f9; + --white: #ffffff; + --gray-light: #f5f5f5; + --gray-medium: #e0e0e0; + --shadow: 0 4px 12px rgba(229, 57, 53, 0.15); + --shadow-hover: 0 6px 20px rgba(229, 57, 53, 0.25); +} + + + @-webkit-keyframes fadeIn { from { opacity: 0; @@ -67,29 +85,34 @@ body { --------------------------------------------------------------*/ #loadingDiv { - color: #fff; + color: var(--text-dark); padding: 30px; text-align: center; border-radius: 10px; - background: rgba(0, 0, 0, 0.7); + background: var(--white); + box-shadow: var(--shadow); + border: 1px solid var(--gray-medium); } + #loadingDiv h1 { padding: 10px; font-size: 60px; - font-family: 'Montserrat'; - border-radius: 10px; -} -#loadingDiv img { - margin-top: 5px; - margin-bottom: 10px; + font-family: 'IBM Plex Sans'; border-radius: 10px; + color: var(--primary-red); } + + + #loadingDiv pre { padding: 10px; - font-family: 'Montserrat'; + font-family: 'IBM Plex Sans'; border-radius: 10px; } + + + /*-------------------------------------------------------------- # Init User --------------------------------------------------------------*/ @@ -154,7 +177,7 @@ body { width: 100%; margin-top: 15px; padding: 10px; - background-color: var(--select-bg) !important; + background-color: red !important; color: white; border: var(--border); border-radius: 5px; @@ -171,7 +194,8 @@ body { font-size: 1.2rem; border: var(--border); border-radius: 5px; - background-color: transparent; + background-color: red; + color: black !important; } .init-user button:hover { @@ -404,7 +428,6 @@ body { /*-------------------------------------------------------------- # Bottom buttons --------------------------------------------------------------*/ - #bottomButtons { z-index: 3; position: fixed; @@ -556,7 +579,7 @@ body { #mySettings p { display: inline-flex; margin: auto; - color: #fff; + color: black; padding: 5px; background: transparent; } @@ -1060,7 +1083,7 @@ body { #notificationsModeDiv input[type='text'] { width: 100%; - color: #fff; + color: black; padding: 10px; margin: 10px 0; border: var(--border); @@ -1374,6 +1397,10 @@ body { # swal2 --------------------------------------------------------------*/ + +.swal2-styled.swal2-confirm{ + background-color: red !important; +} .swal2-popup { /* border: var(--border) !important; */ /* border: 0.5px solid rgb(255 255 255 / 32%) !important; */ @@ -1389,7 +1416,7 @@ body { .swal2-content, .swal2-input { text-align: center; - color: #fff !important; + color: black !important; background-color: transparent !important; } .swal2-html-container { diff --git a/public/css/Root.css b/public/css/Root.css index 991865b9..42f96591 100644 --- a/public/css/Root.css +++ b/public/css/Root.css @@ -1,67 +1,78 @@ -@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500&display=swap'); +@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@400,500,600,700&display=swap'); :root { - --body-bg: radial-gradient(#393939, #000000); - --border: 0.5px solid rgb(255 255 255 / 32%); - --border-radius: 1rem; + /* Red Color Scheme from 404 page */ + --primary-red: #e53935; + --dark-red: #c62828; + --light-red: #ff5252; + --accent-red: #ff8a80; + + /* Background and text colors */ + --body-bg: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%); + --border: 1px solid rgba(229, 57, 53, 0.2); + --border-radius: 8px; + + /* Main containers */ --msger-width: 800px; --msger-height: 700px; --msger-bubble-width: 85%; - --msger-bg: radial-gradient(#393939, #000000); + --msger-bg: #ffffff; + --box-shadow: 0 8px 32px rgba(229, 57, 53, 0.1); + + /* Whiteboard */ --wb-width: 800px; --wb-height: 600px; - --wb-bg: radial-gradient(#393939, #000000); - --select-bg: #2c2c2c; - --left-msg-bg: #252d31; - --right-msg-bg: #056162; - --private-msg-bg: #6b1226; - --box-shadow: 0px 8px 16px 0px rgb(0 0 0); - --btns-hover-scale: scale(1.1); - --settings-bg: radial-gradient(#393939, #000000); - --tab-btn-active: rgb(42 42 42 / 70%); - --btns-bg-color: rgba(0, 0, 0, 0.7); - /* buttons bar horizontal */ + --wb-bg: #ffffff; + + /* Selection and messages */ + --select-bg: #f8f9fa; + --left-msg-bg: #f1f3f4; + --right-msg-bg: var(--primary-red); + --private-msg-bg: var(--dark-red); + + /* Buttons and interactive elements */ + --btns-bg-color: var(--primary-red); + --btns-hover-scale: scale(1.05); + --settings-bg: #ffffff; + --tab-btn-active: rgba(229, 57, 53, 0.1); + + /* Button bars positioning */ --btns-top: 50%; --btns-right: 0%; - --btns-left: 10px; + --btns-left: 20px; --btns-margin-left: 0px; --btns-width: 60px; --btns-flex-direction: column; - /* buttons bar horizontal - --btns-top: 95%; - --btns-right: 25%; - --btns-left: 50%; - --btns-margin-left: -160px; - --btns-width: 320px; - --btns-flex-direction: row; - */ - /* bottom buttons bar horizontal default */ + + /* Bottom buttons bar */ --bottom-btns-top: auto; --bottom-btns-left: 50%; --bottom-btns-bottom: 0; --bottom-btns-translate-X: -50%; --bottom-btns-translate-Y: 0%; - --bottom-btns-margin-bottom: 18px; + --bottom-btns-margin-bottom: 20px; --bottom-btns-flex-direction: row; + /* Transcription */ --transcription-height: 680px; --transcription-width: 420px; - --trx-bg: radial-gradient(#393939, #000000); + --trx-bg: #ffffff; + /* Editor */ --editor-container-width: 100%; --editor-container-height: 100%; --editor-height: 85vh; + /* Video */ --vmi-wh: 15vw; - /* https://developer.mozilla.org/en-US/docs/Web/CSS/object-fit */ --videoObjFit: cover; + --videoBar-active: 2px solid var(--primary-red); - --dd-color: #ffffff; - - --videoBar-active: 1px solid rgba(102, 190, 255, 0.32); + /* Dropdown and text */ + --dd-color: #333333; } * { outline: none; - font-family: 'Montserrat'; -} + font-family: 'IBM Plex Sans', sans-serif; +} \ No newline at end of file diff --git a/public/css/RtmpStreamer.css b/public/css/RtmpStreamer.css index cbbb7ca3..4f138565 100644 --- a/public/css/RtmpStreamer.css +++ b/public/css/RtmpStreamer.css @@ -72,13 +72,13 @@ button { input[type='text'], input[type='password'] { flex: 1; - color: #fff; + color: black; border: var(--border); background: var(--body-bg); } input[type='text'][readonly] { - color: #fff; + color: black; border: var(--border); background: var(--body-bg); } diff --git a/public/css/VideoGrid.css b/public/css/VideoGrid.css index a2671c31..1a510633 100644 --- a/public/css/VideoGrid.css +++ b/public/css/VideoGrid.css @@ -100,7 +100,7 @@ position: absolute; right: 0; bottom: 0; - color: #fff; + color: black; font-size: 10px; display: flex; align-items: center; @@ -205,7 +205,7 @@ .videoAvatarMenuBar button:hover, .videoMenuBarShare button:hover { color: #fff; - background: var(--btns-bg-color); + background: red; } /* Touch-friendly sizing for buttons within menu bar */ diff --git a/public/css/widgets/Support.css b/public/css/widgets/Support.css index ce76fefd..8501ad23 100644 --- a/public/css/widgets/Support.css +++ b/public/css/widgets/Support.css @@ -39,7 +39,7 @@ /* Main Widget Styles */ .mirotalk-support-widget { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; - background: linear-gradient(135deg, #1f1f2e 0%, #2a2a3e 100%); + background: linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%); color: #fff; padding: 24px; border-radius: 20px; diff --git a/public/js/Room.js b/public/js/Room.js index 8ddb4e32..4326b0a7 100644 --- a/public/js/Room.js +++ b/public/js/Room.js @@ -738,22 +738,22 @@ function setupInitButtons() { initAudioVideoButton.onclick = async (e) => { await handleAudioVideo(e); }; - initStartScreenButton.onclick = async () => { - await toggleScreenSharing(); - }; - initStopScreenButton.onclick = async () => { - await toggleScreenSharing(); - }; - initVideoMirrorButton.onclick = () => { - initVideo.classList.toggle('mirror'); - }; + // initStartScreenButton.onclick = async () => { + // await toggleScreenSharing(); + // }; + // initStopScreenButton.onclick = async () => { + // await toggleScreenSharing(); + // }; + // initVideoMirrorButton.onclick = () => { + // initVideo.classList.toggle('mirror'); + // }; initVirtualBackgroundButton.onclick = () => { showImageSelector(); }; - initUsernameEmojiButton.onclick = () => { - getId('usernameInput').value = ''; - toggleUsernameEmoji(); - }; + // initUsernameEmojiButton.onclick = () => { + // getId('usernameInput').value = ''; + // toggleUsernameEmoji(); + // }; } // #################################################### @@ -1141,9 +1141,9 @@ async function whoAreYou() { console.error('04 ----> AXIOS GET CONFIG ERROR', error.message); } - if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) { - BUTTONS.main.startScreenButton && show(initStartScreenButton); - } + // if (navigator.getDisplayMedia || navigator.mediaDevices.getDisplayMedia) { + // BUTTONS.main.startScreenButton && show(initStartScreenButton); + // } // Virtual Background if supported (Chrome/Edge/Opera/Vivaldi/...) if ( @@ -1238,7 +1238,7 @@ async function whoAreYou() { inputAttributes: { maxlength: 254, id: 'usernameInput' }, inputValue: default_name, html: initUser, // Inject HTML - confirmButtonText: `Join meeting`, + confirmButtonText: `Join class`, customClass: { popup: 'init-modal-size' }, showClass: { popup: 'animate__animated animate__fadeInDown' }, hideClass: { popup: 'animate__animated animate__fadeOutUp' }, @@ -2104,15 +2104,15 @@ function handleButtons() { chatShareRoomBtn.onclick = (e) => { shareRoom(true); }; - chatGhostButton.onclick = (e) => { - rc.chatToggleBg(); - }; - chatCleanButton.onclick = () => { - rc.chatClean(); - }; - chatSaveButton.onclick = () => { - rc.chatSave(); - }; + // chatGhostButton.onclick = (e) => { + // rc.chatToggleBg(); + // }; + // chatCleanButton.onclick = () => { + // rc.chatClean(); + // }; + // chatSaveButton.onclick = () => { + // rc.chatSave(); + // }; chatCloseButton.onclick = () => { rc.toggleChat(); }; @@ -3820,7 +3820,7 @@ function leaveFeedback(allowCancel) { function redirectOnLeave() { endRoomSession(); rc.exitRoom(); - redirect && redirect.enabled ? openURL(redirect.url) : openURL('/newroom'); + redirect && redirect.enabled ? openURL(redirect.url) : openURL('/feedback'); } function userLog(icon, message, position, timer = 3000) { @@ -5121,19 +5121,19 @@ function setTheme() { const theme = selectTheme.value; switch (theme) { case 'default': - swalBackground = 'linear-gradient(135deg, #000000, #434343)'; - document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #434343)'); - document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #000000, #434343)'); - document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #000000, #434343)'); + swalBackground = 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'; + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'); + document.documentElement.style.setProperty('--trx-bg', 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'); + document.documentElement.style.setProperty('--msger-bg', 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'); document.documentElement.style.setProperty('--left-msg-bg', '#1a1a1a'); document.documentElement.style.setProperty('--right-msg-bg', '#2e2e2e'); document.documentElement.style.setProperty('--select-bg', '#333333'); document.documentElement.style.setProperty('--tab-btn-active', '#434343'); - document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #000000, #434343)'); - document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #000000, #434343)'); + document.documentElement.style.setProperty('--settings-bg', 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'); + document.documentElement.style.setProperty('--wb-bg', 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'); document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)'); document.documentElement.style.setProperty('--dd-color', '#FFFFFF'); - document.body.style.background = 'linear-gradient(135deg, #000000, #434343)'; + document.body.style.background = 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'; selectTheme.selectedIndex = 0; break; case 'dark': diff --git a/public/js/RoomClient.js b/public/js/RoomClient.js index 8ad41bb6..ed1fcdd2 100644 --- a/public/js/RoomClient.js +++ b/public/js/RoomClient.js @@ -383,7 +383,7 @@ class RoomClient { this.audioRecorder = null; this.recScreenStream = null; this.recording = { - recSyncServerRecording: false, + recSyncServerRecording: true, recSyncServerToS3: false, recSyncServerEndpoint: '', }; @@ -8011,7 +8011,7 @@ class RoomClient { await this.joinAllowed(data.room); control.style.display = 'flex'; bottomButtons.style.display = 'flex'; - this.msgPopup('info', 'Your join meeting request was accepted by the moderator', 3000, 'top'); + this.msgPopup('info', 'Your join class request was accepted by the moderator', 3000, 'top'); break; case 'reject': if (this.lobbyRemovePearForPresenter(data)) { @@ -8027,7 +8027,7 @@ class RoomClient { showConfirmButton: true, background: swalBackground, title: 'Rejected', - text: 'Your join meeting request was rejected by the moderator', + text: 'Your join class request was rejected by the moderator', confirmButtonText: `Ok`, showClass: { popup: 'animate__animated animate__fadeInDown' }, hideClass: { popup: 'animate__animated animate__fadeOutUp' }, @@ -8328,7 +8328,7 @@ class RoomClient { background: swalBackground, imageUrl: image.poster, title: 'Room has lobby enabled', - text: 'Asking to join meeting...', + text: 'Asking to join class...', confirmButtonText: `Ok`, denyButtonText: `Leave room`, showClass: { popup: 'animate__animated animate__fadeInDown' }, diff --git a/public/js/RtmpStreamer.js b/public/js/RtmpStreamer.js index 4d706de9..89871a10 100644 --- a/public/js/RtmpStreamer.js +++ b/public/js/RtmpStreamer.js @@ -313,10 +313,10 @@ function setCustomTheme() { function setTheme() { switch (theme) { case 'default': - document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #434343)'); + document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'); document.documentElement.style.setProperty('--select-bg', '#333333'); document.documentElement.style.setProperty('--btns-bg-color', 'rgba(0, 0, 0, 0.7)'); - document.body.style.background = 'linear-gradient(135deg, #000000, #434343)'; + document.body.style.background = 'linear-gradient(135deg, #f9f9f9 0%, #f0f0f0 100%);'; break; case 'dark': document.documentElement.style.setProperty('--body-bg', 'linear-gradient(135deg, #000000, #1a1a1a)'); diff --git a/public/views/404.html b/public/views/404.html index 411427a3..7d5d1ae0 100755 --- a/public/views/404.html +++ b/public/views/404.html @@ -1,205 +1,318 @@ - - - - + + + + + + CodePill - 404 Page Not Found + + + + +
+ - - - - +
404
+ +

Page Not Found

+ +

+ The page you're looking for seems to have disappeared. It might have been moved, deleted, + or perhaps you entered the wrong URL. +

+ +
+
+
+
+
+
+
+
+ +
+ Go to Homepage + Go Back +
+ +
+

© 2025 CodePill. All rights reserved.

+
+
+ + + + \ No newline at end of file diff --git a/public/views/Room.html b/public/views/Room.html index 7648c4d5..76247ac6 100644 --- a/public/views/Room.html +++ b/public/views/Room.html @@ -153,7 +153,6 @@

Loading

- 
 Please allow the camera or microphone
 access to use this app.
@@ -178,11 +177,7 @@ access to use this app.
 
 
 
-
-
-
 
-
 
 
 
@@ -1498,7 +1493,7 @@ access to use this app.
-
  • +