ghaymah_dev/codepill-sfu
1
0
نسخ 0
الشفرة المشكلات طلبات السحب Actions Packages المشاريع الإصدارات الويكي النشاط

more css fixed, removed unusued buttons + remove other bg images:

تصفح المصدر
هذا الالتزام موجود في:
Your Name
2025-11-24 09:03:40 +00:00
الأصل 53b4b146e4
التزام 8c9dd84bae
4 ملفات معدلة مع 116 إضافات و69 حذوفات
تنزيل ملف التصحيح تنزيل ملف الاختلاف توسيع جميع الملفات طي جميع الملفات

55
public/css/Room.css
عرض الملف

@@ -430,6 +430,61 @@ body {
color: red; color: red;
} }
#toggleExtraButton i {
color: red;
}
#startAudioButton i {
color: red;
}
#stopAudioButton i {
color: red;
}
#startVideoButton i {
color: red;
}
#stopVideoButton i {
color: red;
}
#swapCameraButton i {
color: red;
}
#startScreenButton i {
color: red;
}
#stopScreenButton i {
color: red;
}
#raiseHandButton i {
color: red;
}
#lowerHandButton i {
color: red;
}
#chatButton i {
color: red;
}
#settingsButton i {
color: red;
}
#exitButton i {
color: red;
}
#toggleExtraButton { #toggleExtraButton {
color: #66beff; color: #66beff;
} }

86
public/js/Room.js
عرض الملف

@@ -735,9 +735,9 @@ function setupInitButtons() {
initAudioButton.onclick = () => { initAudioButton.onclick = () => {
handleAudio(); handleAudio();
}; };
initAudioVideoButton.onclick = async (e) => { // initAudioVideoButton.onclick = async (e) => {
await handleAudioVideo(e); // await handleAudioVideo(e);
}; // };
// initStartScreenButton.onclick = async () => { // initStartScreenButton.onclick = async () => {
// await toggleScreenSharing(); // await toggleScreenSharing();
// }; // };
@@ -1172,7 +1172,7 @@ async function whoAreYou() {
isInitVideoLoaded = true; isInitVideoLoaded = true;
elemDisplay('initVideo', false); elemDisplay('initVideo', false);
elemDisplay('initVideoButton', false); elemDisplay('initVideoButton', false);
elemDisplay('initAudioVideoButton', false); // elemDisplay('initAudioVideoButton', false);
elemDisplay('initVideoAudioRefreshButton', false); elemDisplay('initVideoAudioRefreshButton', false);
elemDisplay('initVideoSelect', false); elemDisplay('initVideoSelect', false);
elemDisplay('tabVideoDevicesBtn', false); elemDisplay('tabVideoDevicesBtn', false);
@@ -1181,7 +1181,7 @@ async function whoAreYou() {
if (!BUTTONS.main.startAudioButton) { if (!BUTTONS.main.startAudioButton) {
isAudioAllowed = false; isAudioAllowed = false;
elemDisplay('initAudioButton', false); elemDisplay('initAudioButton', false);
elemDisplay('initAudioVideoButton', false); // elemDisplay('initAudioVideoButton', false);
elemDisplay('initVideoAudioRefreshButton', false); elemDisplay('initVideoAudioRefreshButton', false);
elemDisplay('initMicrophoneSelect', false); elemDisplay('initMicrophoneSelect', false);
elemDisplay('initSpeakerSelect', false); elemDisplay('initSpeakerSelect', false);
@@ -1344,14 +1344,14 @@ async function handleAudioVideo() {
lS.setInitConfig(lS.MEDIA_TYPE.audioVideo, isAudioVideoAllowed); lS.setInitConfig(lS.MEDIA_TYPE.audioVideo, isAudioVideoAllowed);
initAudioButton.className = 'fas fa-microphone' + (isAudioVideoAllowed ? '' : '-slash'); initAudioButton.className = 'fas fa-microphone' + (isAudioVideoAllowed ? '' : '-slash');
initVideoButton.className = 'fas fa-video' + (isAudioVideoAllowed ? '' : '-slash'); initVideoButton.className = 'fas fa-video' + (isAudioVideoAllowed ? '' : '-slash');
initAudioVideoButton.className = 'fas fa-eye' + (isAudioVideoAllowed ? '' : '-slash'); // initAudioVideoButton.className = 'fas fa-eye' + (isAudioVideoAllowed ? '' : '-slash');
if (!isAudioVideoAllowed) { if (!isAudioVideoAllowed) {
hide(initAudioButton); hide(initAudioButton);
hide(initVideoButton); hide(initVideoButton);
hide(initVideoAudioRefreshButton); hide(initVideoAudioRefreshButton);
} }
if (isAudioAllowed && isVideoAllowed && !isMobileDevice) show(initVideoAudioRefreshButton); if (isAudioAllowed && isVideoAllowed && !isMobileDevice) show(initVideoAudioRefreshButton);
setColor(initAudioVideoButton, isAudioVideoAllowed ? 'white' : 'red'); // setColor(initAudioVideoButton, isAudioVideoAllowed ? 'white' : 'red');
setColor(initAudioButton, isAudioAllowed ? 'white' : 'red'); setColor(initAudioButton, isAudioAllowed ? 'white' : 'red');
setColor(initVideoButton, isVideoAllowed ? 'white' : 'red'); setColor(initVideoButton, isVideoAllowed ? 'white' : 'red');
setColor(startAudioButton, isAudioAllowed ? 'white' : 'red'); setColor(startAudioButton, isAudioAllowed ? 'white' : 'red');
@@ -2396,7 +2396,7 @@ function setButtonsInit() {
if (!isMobileDevice) { if (!isMobileDevice) {
setTippy('initAudioButton', 'Toggle the audio', 'top'); setTippy('initAudioButton', 'Toggle the audio', 'top');
setTippy('initVideoButton', 'Toggle the video', 'top'); setTippy('initVideoButton', 'Toggle the video', 'top');
setTippy('initAudioVideoButton', 'Toggle the audio & video', 'top'); // setTippy('initAudioVideoButton', 'Toggle the audio & video', 'top');
setTippy('initStartScreenButton', 'Toggle screen sharing', 'top'); setTippy('initStartScreenButton', 'Toggle screen sharing', 'top');
setTippy('initStopScreenButton', 'Toggle screen sharing', 'top'); setTippy('initStopScreenButton', 'Toggle screen sharing', 'top');
setTippy('initVideoMirrorButton', 'Toggle video mirror', 'top'); setTippy('initVideoMirrorButton', 'Toggle video mirror', 'top');
@@ -2405,7 +2405,7 @@ function setButtonsInit() {
} }
if (!isAudioAllowed) hide(initAudioButton); if (!isAudioAllowed) hide(initAudioButton);
if (!isVideoAllowed) hide(initVideoButton); if (!isVideoAllowed) hide(initVideoButton);
if (!isAudioAllowed || !isVideoAllowed) hide(initAudioVideoButton); // if (!isAudioAllowed || !isVideoAllowed) hide(initAudioVideoButton);
if ((!isAudioAllowed && !isVideoAllowed) || isMobileDevice) hide(initVideoAudioRefreshButton); if ((!isAudioAllowed && !isVideoAllowed) || isMobileDevice) hide(initVideoAudioRefreshButton);
isAudioVideoAllowed = isAudioAllowed && isVideoAllowed; isAudioVideoAllowed = isAudioAllowed && isVideoAllowed;
} }
@@ -2667,7 +2667,7 @@ async function toggleScreenSharing() {
hide(initStartScreenButton); hide(initStartScreenButton);
disable(initVideoSelect, true); disable(initVideoSelect, true);
disable(initVideoButton, true); disable(initVideoButton, true);
disable(initAudioVideoButton, true); // disable(initAudioVideoButton, true);
disable(initVideoAudioRefreshButton, true); disable(initVideoAudioRefreshButton, true);
disable(initVirtualBackgroundButton, true); disable(initVirtualBackgroundButton, true);
}) })
@@ -2682,7 +2682,7 @@ async function toggleScreenSharing() {
show(initStartScreenButton); show(initStartScreenButton);
disable(initVideoSelect, false); disable(initVideoSelect, false);
disable(initVideoButton, false); disable(initVideoButton, false);
disable(initAudioVideoButton, false); // disable(initAudioVideoButton, false);
disable(initVideoAudioRefreshButton, false); disable(initVideoAudioRefreshButton, false);
disable(initVirtualBackgroundButton, false); disable(initVirtualBackgroundButton, false);
} }
@@ -5414,40 +5414,40 @@ function showImageSelector() {
); );
// Handle file upload (common logic for file selection) // Handle file upload (common logic for file selection)
function setupFileUploadButton(buttonId, sourceImg, tooltip, handler) { // function setupFileUploadButton(buttonId, sourceImg, tooltip, handler) {
const imgButton = document.createElement('img'); // const imgButton = document.createElement('img');
imgButton.id = buttonId; // imgButton.id = buttonId;
imgButton.src = sourceImg; // imgButton.src = sourceImg;
imgButton.addEventListener('click', handler); // imgButton.addEventListener('click', handler);
imageGrid.appendChild(imgButton); // imageGrid.appendChild(imgButton);
setTippy(imgButton.id, tooltip, 'top'); // setTippy(imgButton.id, tooltip, 'top');
} // }
function handleFileUpload(file) { // function handleFileUpload(file) {
if (file && file.type.startsWith('image/')) { // if (file && file.type.startsWith('image/')) {
const reader = new FileReader(); // const reader = new FileReader();
reader.onload = async (e) => { // reader.onload = async (e) => {
const imgData = e.target.result; // const imgData = e.target.result;
await indexedDBHelper.saveImage(imgData); // await indexedDBHelper.saveImage(imgData);
addImageToUI(imgData); // addImageToUI(imgData);
}; // };
reader.readAsDataURL(file); // reader.readAsDataURL(file);
} // }
} // }
function createUploadImageButton() { // function createUploadImageButton() {
const fileInput = document.createElement('input'); // const fileInput = document.createElement('input');
fileInput.type = 'file'; // fileInput.type = 'file';
fileInput.accept = 'image/*'; // fileInput.accept = 'image/*';
fileInput.style.display = 'none'; // fileInput.style.display = 'none';
fileInput.addEventListener('change', (event) => { // fileInput.addEventListener('change', (event) => {
handleFileUpload(event.target.files[0]); // handleFileUpload(event.target.files[0]);
}); // });
setupFileUploadButton('initUploadImg', image.upload, 'Upload your custom image', () => fileInput.click()); // setupFileUploadButton('initUploadImg', image.upload, 'Upload your custom image', () => fileInput.click());
return fileInput; // return fileInput;
} // }
// Function to add an image to UI // Function to add an image to UI
function addImageToUI(imgData) { function addImageToUI(imgData) {
@@ -5519,10 +5519,10 @@ function showImageSelector() {
}); });
// Upload from file button // Upload from file button
createUploadImageButton(); // createUploadImageButton();
// Upload from URL button // Upload from URL button
setupFileUploadButton('initLinkImage', image.link, 'Upload Image from URL', askForImageURL); // setupFileUploadButton('initLinkImage', image.link, 'Upload Image from URL', askForImageURL);
// Load default virtual backgrounds // Load default virtual backgrounds
virtualBackgrounds.forEach((imageUrl, index) => { virtualBackgrounds.forEach((imageUrl, index) => {

11
public/js/RoomClient.js
عرض الملف

@@ -122,16 +122,7 @@ const image = {
upload: '../images/upload.png', upload: '../images/upload.png',
virtualBackground: { virtualBackground: {
one: '../images/virtual-background/default/background-1.jpg', one: '../images/virtual-background/default/background-1.jpg',
two: '../images/virtual-background/default/background-2.webp', two: '../images/virtual-background/default/background-2.webp'
three: '../images/virtual-background/default/background-3.jpg',
four: '../images/virtual-background/default/background-4.jpg',
five: '../images/virtual-background/default/background-5.jpg',
six: '../images/virtual-background/default/background-6.jpg',
seven: '../images/virtual-background/default/background-7.jpg',
eight: '../images/virtual-background/default/background-8.jpg',
nine: '../images/virtual-background/default/background-9.jpg',
ten: '../images/virtual-background/default/background-10.jpg',
eleven: '../images/virtual-background/default/background-11.gif',
}, },
}; };

33
public/views/Room.html
عرض الملف

@@ -174,7 +174,7 @@ access to use this app.
</div> </div>
<div class="initComands"> <div class="initComands">
<button id="initVideoAudioRefreshButton" class="ph ph-arrow-clockwise"></button> <button id="initVideoAudioRefreshButton" class="ph ph-arrow-clockwise"></button>
<button id="initAudioVideoButton" class="ph ph-eye"></button> <!-- <button id="initAudioVideoButton" class="ph ph-eye"></button> -->
<button id="initVideoButton" class="ph ph-video-camera"></button> <button id="initVideoButton" class="ph ph-video-camera"></button>
<button id="initAudioButton" class="ph ph-microphone"></button> <button id="initAudioButton" class="ph ph-microphone"></button>
<button id="initVirtualBackgroundButton" class="ph ph-image hidden"></button> <button id="initVirtualBackgroundButton" class="ph ph-image hidden"></button>
@@ -225,23 +225,24 @@ access to use this app.
<button id="aboutButton" class="hidden"><i class="ph ph-question"></i></button> <button id="aboutButton" class="hidden"><i class="ph ph-question"></i></button>
</div> </div>
<div id="bottomButtons" class="fadein">
<div id="bottomButtons" class="fadein" style="display: none;">
<button id="toggleExtraButton" class=""><i class="fas fa-chevron-up meeting-icon toggle-extra-icon"></i></button>
<button id="startAudioButton" class="hidden"><i class="ph ph-microphone-slash meeting-icon audio-icon"></i></button>
<button id="stopAudioButton" class=""><i class="ph ph-microphone meeting-icon audio-icon red-icon"></i></button>
<button id="startVideoButton" class="hidden"><i class="ph ph-video-camera-slash meeting-icon video-icon"></i></button>
<button id="stopVideoButton" class=""><i class="ph ph-video-camera meeting-icon video-icon"></i></button>
<button id="swapCameraButton" class="hidden"><i class="ph ph-camera-rotate meeting-icon camera-rotate-icon"></i></button>
<button id="startScreenButton" class=""><i class="ph ph-monitor meeting-icon screen-share-icon"></i></button>
<button id="stopScreenButton" class="hidden"><i class="ph ph-stop-circle meeting-icon stop-screen-icon"></i></button>
<button id="raiseHandButton" class=""><i class="ph ph-hand meeting-icon hand-icon"></i></button>
<button id="lowerHandButton" class="hidden"><i id="lowerHandIcon" class="ph ph-hand meeting-icon hand-icon"></i></button>
<button id="chatButton" class=""><i class="ph ph-chats meeting-icon chat-icon"></i></button>
<button id="settingsButton" class=""><i class="ph ph-gear meeting-icon settings-icon"></i></button>
<button id="exitButton" class=""><i class="ph ph-phone-slash meeting-icon exit-icon"></i></button>
</div>
<button id="toggleExtraButton" class="hidden"><i class="ph ph-caret-down"></i></button>
<button id="startAudioButton" class="hidden"><i class="ph ph-microphone-slash"></i></button>
<button id="stopAudioButton" class="hidden"><i class="ph ph-microphone"></i></button>
<button id="startVideoButton" class="hidden"><i class="ph ph-video-camera-slash"></i></button>
<button id="stopVideoButton" class="hidden"><i class="ph ph-video-camera"></i></button>
<button id="swapCameraButton" class="hidden"><i class="ph ph-camera-rotate"></i></button>
<button id="startScreenButton" class="hidden"><i class="ph ph-monitor"></i></button>
<button id="stopScreenButton" class="hidden"><i class="ph ph-stop-circle"></i></button>
<button id="raiseHandButton" class="hidden"><i class="ph ph-hand"></i></button>
<button id="lowerHandButton" class="hidden"><i id="lowerHandIcon" class="ph ph-hand"></i></button>
<button id="chatButton" class="hidden"><i class="ph ph-chats"></i></button>
<button id="settingsButton" class="hidden"><i class="ph ph-gear"></i></button>
<button id="exitButton" class="hidden"><i class="ph ph-phone-slash"></i></button>
</div>
<div id="emojiPickerContainer" class="roomEmoji fadein"></div> <div id="emojiPickerContainer" class="roomEmoji fadein"></div>
<div id="userEmoji" class="userEmoji"></div> <div id="userEmoji" class="userEmoji"></div>