mediasfu-angular 2.2.3 → 2.2.5

package/dist/fesm2022/mediasfu-angular.mjs

@@ -1,6 +1,6 @@
 import * as i0 from '@angular/core';
 import { Injectable, Input, Optional, Inject, Component, ViewChild, HostListener, Injector, EventEmitter, Output, ContentChildren, forwardRef, ViewEncapsulation, InjectionToken, TemplateRef, Directive } from '@angular/core';
-import { joinConsumeRoom, producerClosed, newPipeProducer, getOverlayPosition as getOverlayPosition$1, translationRoomConfig, translationConfigUpdated, translationLanguageSet, translationSubscribed, translationUnsubscribed, translationProducerReady, translationProducerClosed, translationChannelsAvailable, translationMemberState, translationError, translationTranscript, translationSpeakerOutputChanged, controlMedia, isSubtitleExpired, autoAdjust, calculateRowsAndColumns, changeVids, checkGrid, checkPermission, checkScreenShare, closeAndResize, compareActiveNames, compareScreenStates, connectIps, connectLocalIps, connectRecvTransport, connectSendTransport, connectSendTransportAudio, connectSendTransportScreen, connectSendTransportVideo, createSendTransport, disconnectSendTransportAudio, disconnectSendTransportVideo, disconnectSendTransportScreen, dispStreams, generatePageContent, getEstimate, getPipedProducersAlt, getProducersPiped, getVideos, mixStreams, onScreenChanges, processConsumerTransports, processConsumerTransportsAudio, readjust, receiveAllPipedTransports, reorderStreams, rePort, requestScreenShare, resumePauseAudioStreams, resumePauseStreams, resumeSendTransportAudio, reUpdateInter, signalNewConsumerTransport, startShareScreen, stopShareScreen, streamSuccessAudio, streamSuccessAudioSwitch, streamSuccessScreen, switchUserAudio, clickVideo, switchUserVideo, switchUserVideoAlt, trigger, updateMiniCardsGrid, updateParticipantAudioDecibels, aParams, hParams, screenParams, vParams, launchBackground, launchBreakoutRooms, breakoutRoomUpdated, launchCoHost as launchCoHost$1, modifyCoHostSettings, launchDisplaySettings, modifyDisplaySettings, launchConfirmExit, confirmExit, launchMediaSettings, launchMenuModal, launchMessages, sendMessage, launchParticipants, messageParticipants, muteParticipants, removeParticipants, handleCreatePoll, handleEndPoll, handleVotePoll, launchPoll, pollUpdated, checkPauseState, checkResumeState, confirmRecording, launchRecording, recordPauseTimer, recordResumeTimer, recordStartTimer, recordUpdateTimer, startRecording, stopRecording, updateRecording, launchRequests, respondToRequests, launchSettings, modifySettings, clickAudio, clickChat, clickScreenShare, switchAudio, switchVideo, switchVideoAlt, joinRoomOnMediaSFU, formatNumber, getModalPosition as getModalPosition$1, sleep as sleep$1, validateAlphanumeric, launchWaiting, respondToWaiting, launchConfigureWhiteboard, createDeviceClient, joinRoomClient, updateRoomParametersClient, joinConRoom, joinRoom, checkMediasfuURL, joinLocalRoom, allMembers, allMembersRest, allWaitingRoomMembers, banParticipant, controlMediaHost, disconnect, disconnectUserSelf, getDomains, hostRequestResponse, meetingEnded, meetingStillThere, meetingTimeRemaining, participantRequested, personJoined, producerMediaClosed, producerMediaPaused, producerMediaResumed, reInitiateRecording, receiveMessage, recordingNotice, roomRecordParams, screenProducerId, startRecords, stoppedRecording, timeLeftRecording, updateConsumingDomains, updateMediaSettings, updatedCoHost, userWaiting, connectSocket, connectLocalSocket, disconnectSocket, checkLimitsAndMakeRequest, createRoomOnMediaSFU, SUPPORTED_LANGUAGE_CODES as SUPPORTED_LANGUAGE_CODES$1, isLanguageSupported as isLanguageSupported$1, normalizeLanguageCode as normalizeLanguageCode$1, getLanguageName as getLanguageName$1, getLanguageNativeName as getLanguageNativeName$1, getSupportedLanguages as getSupportedLanguages$1, getLanguageMetadata, addPanelist, removePanelist, focusPanelists, updateParticipantPermission, bulkUpdateParticipantPermissions, updatePermissionConfig, isSpeakerInMyBreakoutRoom, pauseOriginalProducer, resumeOriginalProducer, isConsumingTranslationForSpeaker, getActiveTranslationConsumers, findOriginalProducerForSpeaker, stopConsumingTranslation, syncTranslationStateAfterBreakoutChange, panelistsUpdated, panelistFocusChanged, panelistControlMedia, addedAsPanelist, removedFromPanelists, permissionUpdated, permissionConfigUpdated, receiveRoomMessages, createResponseJoinRoom as createResponseJoinRoom$1, createLiveSubtitle, SoundPlayer as SoundPlayer$1 } from 'mediasfu-shared';
+import { joinConsumeRoom, producerClosed, newPipeProducer, getOverlayPosition as getOverlayPosition$1, translationRoomConfig, translationConfigUpdated, translationLanguageSet, translationSubscribed, translationUnsubscribed, translationProducerReady, translationProducerClosed, translationChannelsAvailable, translationMemberState, translationError, translationTranscript, translationSpeakerOutputChanged, controlMedia, isSubtitleExpired, autoAdjust, calculateRowsAndColumns, changeVids, checkGrid, checkPermission, checkScreenShare, closeAndResize, compareActiveNames, compareScreenStates, connectIps, connectLocalIps, connectRecvTransport, connectSendTransport, connectSendTransportAudio, connectSendTransportScreen, connectSendTransportVideo, createSendTransport, disconnectSendTransportAudio, disconnectSendTransportVideo, disconnectSendTransportScreen, dispStreams, generatePageContent, getEstimate, getPipedProducersAlt, getProducersPiped, getVideos, mixStreams, onScreenChanges, processConsumerTransports, processConsumerTransportsAudio, readjust, receiveAllPipedTransports, reorderStreams, rePort, requestScreenShare, resumePauseAudioStreams, resumePauseStreams, resumeSendTransportAudio, reUpdateInter, signalNewConsumerTransport, startShareScreen, stopShareScreen, streamSuccessAudio, streamSuccessAudioSwitch, streamSuccessScreen, switchUserAudio, clickVideo, switchUserVideo, switchUserVideoAlt, trigger, updateMiniCardsGrid, updateParticipantAudioDecibels, aParams, hParams, screenParams, vParams, launchBackground, launchBreakoutRooms, breakoutRoomUpdated, launchCoHost as launchCoHost$1, modifyCoHostSettings, launchDisplaySettings, modifyDisplaySettings, launchConfirmExit, confirmExit, launchMediaSettings, launchMenuModal, launchMessages, launchParticipants, messageParticipants, muteParticipants, removeParticipants, handleCreatePoll, handleEndPoll, handleVotePoll, launchPoll, pollUpdated, checkPauseState, checkResumeState, confirmRecording, launchRecording, recordPauseTimer, recordResumeTimer, recordStartTimer, recordUpdateTimer, startRecording, stopRecording, updateRecording, launchRequests, respondToRequests, launchSettings, modifySettings, clickAudio, clickChat, clickScreenShare, switchAudio, switchVideo, switchVideoAlt, joinRoomOnMediaSFU, formatNumber, getModalPosition as getModalPosition$1, sleep as sleep$1, validateAlphanumeric, launchWaiting, respondToWaiting, launchConfigureWhiteboard, createDeviceClient, joinRoomClient, updateRoomParametersClient, joinConRoom, joinRoom, checkMediasfuURL, joinLocalRoom, allMembers, allMembersRest, allWaitingRoomMembers, banParticipant, controlMediaHost, disconnect, disconnectUserSelf, getDomains, hostRequestResponse, meetingEnded, meetingStillThere, meetingTimeRemaining, participantRequested, personJoined, producerMediaClosed, producerMediaPaused, producerMediaResumed, reInitiateRecording, receiveMessage, recordingNotice, roomRecordParams, screenProducerId, startRecords, stoppedRecording, timeLeftRecording, updateConsumingDomains, updateMediaSettings, updatedCoHost, userWaiting, connectSocket, connectLocalSocket, disconnectSocket, checkLimitsAndMakeRequest, createRoomOnMediaSFU, SUPPORTED_LANGUAGE_CODES as SUPPORTED_LANGUAGE_CODES$1, isLanguageSupported as isLanguageSupported$1, normalizeLanguageCode as normalizeLanguageCode$1, getLanguageName as getLanguageName$1, getLanguageNativeName as getLanguageNativeName$1, getSupportedLanguages as getSupportedLanguages$1, getLanguageMetadata, addPanelist, removePanelist, focusPanelists, updateParticipantPermission, bulkUpdateParticipantPermissions, updatePermissionConfig, isSpeakerInMyBreakoutRoom, pauseOriginalProducer, resumeOriginalProducer, isConsumingTranslationForSpeaker, getActiveTranslationConsumers, findOriginalProducerForSpeaker, stopConsumingTranslation, syncTranslationStateAfterBreakoutChange, panelistsUpdated, panelistFocusChanged, panelistControlMedia, addedAsPanelist, removedFromPanelists, permissionUpdated, permissionConfigUpdated, receiveRoomMessages, createResponseJoinRoom as createResponseJoinRoom$1, createLiveSubtitle, SoundPlayer as SoundPlayer$1 } from 'mediasfu-shared';
 export { createLiveSubtitle, isSubtitleExpired } from 'mediasfu-shared';
 import * as i1 from '@angular/common';
 import { CommonModule } from '@angular/common';
@@ -11292,23 +11292,59 @@ class SendMessage {
      * @throws Will throw an error if the message, sender, or receivers are not valid.
      * @throws Will throw an error if the user is not allowed to send a message in the event room.
      */
-    async sendMessage({ member, islevel, showAlert, coHostResponsibility, coHost, chatSetting, message, roomName, messagesLength, receivers, group, sender, socket, }) {
-        const normalizedEventType = roomName.startsWith('s') ? 'chat' : 'conference';
-        await sendMessage({
-            member,
-            islevel,
-            showAlert,
-            coHostResponsibility,
-            coHost,
-            chatSetting,
+    async sendMessage({ message, receivers, group, messagesLength, member, sender, islevel, showAlert, coHostResponsibility, coHost, roomName, socket, chatSetting, }) {
+        let chatValue = false;
+        const normalizedReceivers = (receivers ?? []).filter((receiver) => typeof receiver === 'string' && receiver.trim().length > 0);
+        if ((messagesLength > 100 && roomName.startsWith('d')) ||
+            (messagesLength > 500 && roomName.startsWith('s')) ||
+            (messagesLength > 100000 && roomName.startsWith('p'))) {
+            showAlert?.({
+                message: 'You have reached the maximum number of messages allowed.',
+                type: 'danger',
+                duration: 3000,
+            });
+            return;
+        }
+        if (!message || message === '') {
+            showAlert?.({
+                message: 'Message is not valid.',
+                type: 'danger',
+                duration: 3000,
+            });
+            return;
+        }
+        if (normalizedReceivers.length < 1 && group === false && islevel === '2') {
+            showAlert?.({
+                message: 'Please select a message to reply to',
+                type: 'danger',
+                duration: 3000,
+            });
+            return;
+        }
+        const messageObject = {
+            sender: sender ? sender : member,
+            receivers: normalizedReceivers,
             message,
+            timestamp: new Date().toLocaleTimeString(),
+            group: group !== undefined && group !== null ? group : false,
+        };
+        try {
+            chatValue = coHostResponsibility.find((item) => item.name === 'chat')?.value ?? false;
+        }
+        catch (error) {
+            console.error(error);
+        }
+        if (!(islevel === '2' || (coHost === member && chatValue === true)) && !chatSetting) {
+            showAlert?.({
+                message: 'You are not allowed to send a message in this event room',
+                type: 'danger',
+                duration: 3000,
+            });
+            return;
+        }
+        socket.emit('sendMessage', {
+            messageObject,
             roomName,
-            messagesLength,
-            receivers,
-            group,
-            sender,
-            socket,
-            eventType: normalizedEventType,
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: SendMessage, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
@@ -24350,6 +24386,20 @@ class MessagePanel {
         };
         this.senderId = senderId;
     }
+    getComposerPlaceholder() {
+        if (this.type === 'direct') {
+            if (this.senderId) {
+                return `Send a direct message to ${this.senderId}`;
+            }
+            if (this.directMessageDetails) {
+                return `Send a direct message to ${this.directMessageDetails.name}`;
+            }
+            return this.islevel === '2'
+                ? 'Select a message to reply to'
+                : 'Send a direct message to the host';
+        }
+        return this.eventType === 'chat' ? 'Send a message' : 'Send a message to everyone';
+    }
     async handleSendButton() {
         const message = this.type === 'direct' ? this.directMessageText : this.groupMessageText;
         if (!message) {
@@ -24365,7 +24415,7 @@ class MessagePanel {
             return;
         }
         if (this.type === 'direct' && !this.senderId && this.islevel == '2') {
-            this.showAlert?.({ message: 'Please select a user to send a message to.', type: 'danger' });
+            this.showAlert?.({ message: 'Please select a message to reply to.', type: 'danger' });
             return;
         }
         await this.onSendMessagePress({
@@ -24393,11 +24443,11 @@ class MessagePanel {
         this.senderId = null;
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MessagePanel, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MessagePanel, isStandalone: true, selector: "app-message-panel", inputs: { messages: "messages", messagesLength: "messagesLength", type: "type", username: "username", onSendMessagePress: "onSendMessagePress", backgroundColor: "backgroundColor", focusedInput: "focusedInput", eventType: "eventType", member: "member", islevel: "islevel", startDirectMessage: "startDirectMessage", updateStartDirectMessage: "updateStartDirectMessage", directMessageDetails: "directMessageDetails", updateDirectMessageDetails: "updateDirectMessageDetails", coHostResponsibility: "coHostResponsibility", coHost: "coHost", roomName: "roomName", socket: "socket", chatSetting: "chatSetting", showAlert: "showAlert" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"message-panel\" [style.background]=\"backgroundColor || 'transparent'\">\r\n  <div class=\"message-panel__scroll\">\r\n    <div *ngIf=\"!messages?.length\" class=\"message-panel__empty\">\r\n      No messages yet.\r\n    </div>\r\n\r\n    <div\r\n      *ngFor=\"let message of messages; let index = index\"\r\n      class=\"message-panel__row\"\r\n      [class.message-panel__row--self]=\"message.sender === username\"\r\n    >\r\n      <div class=\"message-panel__meta\">\r\n        <span *ngIf=\"message.sender === username && !message.group\" class=\"message-panel__sender\">\r\n          To: {{ message.receivers.join(', ') }}\r\n        </span>\r\n        <span *ngIf=\"message.sender !== username\" class=\"message-panel__sender\">\r\n          {{ message.sender }}\r\n        </span>\r\n        <span class=\"message-panel__time\">{{ message.timestamp }}</span>\r\n        <button\r\n          *ngIf=\"message.sender !== username && !message.group\"\r\n          type=\"button\"\r\n          class=\"message-panel__reply\"\r\n          (click)=\"openReplyInput(message.sender)\"\r\n          aria-label=\"Reply\"\r\n        >\r\n          <fa-icon [icon]=\"faReply\" size=\"xs\"></fa-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"message-panel__bubble\" [class.message-panel__bubble--self]=\"message.sender === member\">\r\n        {{ message.message }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"replyInfo\" class=\"message-panel__replying\">\r\n    <span>Replying to</span>\r\n    <strong>{{ replyInfo.username }}</strong>\r\n  </div>\r\n\r\n  <div class=\"message-panel__composer\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"message-panel__input\"\r\n      placeholder=\"{{ type === 'direct' ? (focusedInput && startDirectMessage && directMessageDetails ? 'Send a direct message to ' + directMessageDetails.name : 'Select a message to reply to') : (eventType === 'chat' ? 'Send a message' : 'Send a message to everyone') }}\"\r\n      maxLength=\"350\"\r\n      (input)=\"handleTextInputChange($event)\"\r\n      [value]=\"type === 'direct' ? directMessageText : groupMessageText\"\r\n    />\r\n    <button type=\"button\" class=\"message-panel__send\" (click)=\"handleSendButton()\" aria-label=\"Send message\">\r\n      <fa-icon [icon]=\"faPaperPlane\" size=\"sm\"></fa-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".message-panel{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0;gap:12px;color:var(--ms-modern-text-primary, #e2e8f0);font-family:var(--ms-modern-font-family, \"Segoe UI\", \"Aptos\", sans-serif)}.message-panel__scroll{flex:1;min-height:0;overflow-y:auto;padding-right:4px}.message-panel__empty{padding:18px 12px;text-align:center;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.86rem}.message-panel__row{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:12px}.message-panel__row--self{align-items:flex-end}.message-panel__meta{display:inline-flex;align-items:center;gap:8px;max-width:84%;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.72rem;font-weight:700}.message-panel__sender,.message-panel__time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-panel__reply{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0);cursor:pointer}.message-panel__bubble{max-width:min(82%,460px);padding:10px 13px;border-radius:16px 16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 18%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 26%,transparent);color:var(--ms-modern-text-primary, #e2e8f0);font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}.message-panel__bubble--self{border-radius:16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-success, #22c55e) 18%,transparent);border-color:color-mix(in srgb,var(--ms-modern-success, #22c55e) 26%,transparent)}.message-panel__replying{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--ms-modern-info, #3b82f6) 10%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-info, #3b82f6) 24%,transparent);color:var(--ms-modern-text-secondary, #94a3b8);font-size:.78rem}.message-panel__replying strong{color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__composer{display:flex;align-items:center;gap:10px;padding-top:4px}.message-panel__input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;outline:none;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__input::placeholder{color:var(--ms-modern-text-secondary, #94a3b8)}.message-panel__send{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:var(--ms-modern-accent, #14b8a6);color:#fff;box-shadow:0 10px 24px #0f172a2e;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: FormsModule }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: MessagePanel, isStandalone: true, selector: "app-message-panel", inputs: { messages: "messages", messagesLength: "messagesLength", type: "type", username: "username", onSendMessagePress: "onSendMessagePress", backgroundColor: "backgroundColor", focusedInput: "focusedInput", eventType: "eventType", member: "member", islevel: "islevel", startDirectMessage: "startDirectMessage", updateStartDirectMessage: "updateStartDirectMessage", directMessageDetails: "directMessageDetails", updateDirectMessageDetails: "updateDirectMessageDetails", coHostResponsibility: "coHostResponsibility", coHost: "coHost", roomName: "roomName", socket: "socket", chatSetting: "chatSetting", showAlert: "showAlert" }, usesOnChanges: true, ngImport: i0, template: "<div class=\"message-panel\" [style.background]=\"backgroundColor || 'transparent'\">\r\n  <div class=\"message-panel__scroll\">\r\n    <div *ngIf=\"!messages?.length\" class=\"message-panel__empty\">\r\n      No messages yet.\r\n    </div>\r\n\r\n    <div\r\n      *ngFor=\"let message of messages; let index = index\"\r\n      class=\"message-panel__row\"\r\n      [class.message-panel__row--self]=\"message.sender === username\"\r\n    >\r\n      <div class=\"message-panel__meta\">\r\n        <span *ngIf=\"message.sender === username && !message.group\" class=\"message-panel__sender\">\r\n          To: {{ message.receivers.join(', ') }}\r\n        </span>\r\n        <span *ngIf=\"message.sender !== username\" class=\"message-panel__sender\">\r\n          {{ message.sender }}\r\n        </span>\r\n        <span class=\"message-panel__time\">{{ message.timestamp }}</span>\r\n        <button\r\n          *ngIf=\"message.sender !== username && !message.group\"\r\n          type=\"button\"\r\n          class=\"message-panel__reply\"\r\n          (click)=\"openReplyInput(message.sender)\"\r\n          aria-label=\"Reply\"\r\n        >\r\n          <fa-icon [icon]=\"faReply\" size=\"xs\"></fa-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"message-panel__bubble\" [class.message-panel__bubble--self]=\"message.sender === member\">\r\n        {{ message.message }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"replyInfo\" class=\"message-panel__replying\">\r\n    <span>Replying to</span>\r\n    <strong>{{ replyInfo.username }}</strong>\r\n  </div>\r\n\r\n  <div class=\"message-panel__composer\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"message-panel__input\"\r\n      [placeholder]=\"getComposerPlaceholder()\"\r\n      maxLength=\"350\"\r\n      (input)=\"handleTextInputChange($event)\"\r\n      [value]=\"type === 'direct' ? directMessageText : groupMessageText\"\r\n    />\r\n    <button type=\"button\" class=\"message-panel__send\" (click)=\"handleSendButton()\" aria-label=\"Send message\">\r\n      <fa-icon [icon]=\"faPaperPlane\" size=\"sm\"></fa-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".message-panel{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0;gap:12px;color:var(--ms-modern-text-primary, #e2e8f0);font-family:var(--ms-modern-font-family, \"Segoe UI\", \"Aptos\", sans-serif)}.message-panel__scroll{flex:1;min-height:0;overflow-y:auto;padding-right:4px}.message-panel__empty{padding:18px 12px;text-align:center;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.86rem}.message-panel__row{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:12px}.message-panel__row--self{align-items:flex-end}.message-panel__meta{display:inline-flex;align-items:center;gap:8px;max-width:84%;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.72rem;font-weight:700}.message-panel__sender,.message-panel__time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-panel__reply{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0);cursor:pointer}.message-panel__bubble{max-width:min(82%,460px);padding:10px 13px;border-radius:16px 16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 18%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 26%,transparent);color:var(--ms-modern-text-primary, #e2e8f0);font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}.message-panel__bubble--self{border-radius:16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-success, #22c55e) 18%,transparent);border-color:color-mix(in srgb,var(--ms-modern-success, #22c55e) 26%,transparent)}.message-panel__replying{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--ms-modern-info, #3b82f6) 10%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-info, #3b82f6) 24%,transparent);color:var(--ms-modern-text-secondary, #94a3b8);font-size:.78rem}.message-panel__replying strong{color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__composer{display:flex;align-items:center;gap:10px;padding-top:4px}.message-panel__input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;outline:none;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__input::placeholder{color:var(--ms-modern-text-secondary, #94a3b8)}.message-panel__send{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:var(--ms-modern-accent, #14b8a6);color:#fff;box-shadow:0 10px 24px #0f172a2e;cursor:pointer}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: FormsModule }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: MessagePanel, decorators: [{
             type: Component,
-            args: [{ selector: 'app-message-panel', imports: [CommonModule, FontAwesomeModule, FormsModule], template: "<div class=\"message-panel\" [style.background]=\"backgroundColor || 'transparent'\">\r\n  <div class=\"message-panel__scroll\">\r\n    <div *ngIf=\"!messages?.length\" class=\"message-panel__empty\">\r\n      No messages yet.\r\n    </div>\r\n\r\n    <div\r\n      *ngFor=\"let message of messages; let index = index\"\r\n      class=\"message-panel__row\"\r\n      [class.message-panel__row--self]=\"message.sender === username\"\r\n    >\r\n      <div class=\"message-panel__meta\">\r\n        <span *ngIf=\"message.sender === username && !message.group\" class=\"message-panel__sender\">\r\n          To: {{ message.receivers.join(', ') }}\r\n        </span>\r\n        <span *ngIf=\"message.sender !== username\" class=\"message-panel__sender\">\r\n          {{ message.sender }}\r\n        </span>\r\n        <span class=\"message-panel__time\">{{ message.timestamp }}</span>\r\n        <button\r\n          *ngIf=\"message.sender !== username && !message.group\"\r\n          type=\"button\"\r\n          class=\"message-panel__reply\"\r\n          (click)=\"openReplyInput(message.sender)\"\r\n          aria-label=\"Reply\"\r\n        >\r\n          <fa-icon [icon]=\"faReply\" size=\"xs\"></fa-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"message-panel__bubble\" [class.message-panel__bubble--self]=\"message.sender === member\">\r\n        {{ message.message }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"replyInfo\" class=\"message-panel__replying\">\r\n    <span>Replying to</span>\r\n    <strong>{{ replyInfo.username }}</strong>\r\n  </div>\r\n\r\n  <div class=\"message-panel__composer\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"message-panel__input\"\r\n      placeholder=\"{{ type === 'direct' ? (focusedInput && startDirectMessage && directMessageDetails ? 'Send a direct message to ' + directMessageDetails.name : 'Select a message to reply to') : (eventType === 'chat' ? 'Send a message' : 'Send a message to everyone') }}\"\r\n      maxLength=\"350\"\r\n      (input)=\"handleTextInputChange($event)\"\r\n      [value]=\"type === 'direct' ? directMessageText : groupMessageText\"\r\n    />\r\n    <button type=\"button\" class=\"message-panel__send\" (click)=\"handleSendButton()\" aria-label=\"Send message\">\r\n      <fa-icon [icon]=\"faPaperPlane\" size=\"sm\"></fa-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".message-panel{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0;gap:12px;color:var(--ms-modern-text-primary, #e2e8f0);font-family:var(--ms-modern-font-family, \"Segoe UI\", \"Aptos\", sans-serif)}.message-panel__scroll{flex:1;min-height:0;overflow-y:auto;padding-right:4px}.message-panel__empty{padding:18px 12px;text-align:center;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.86rem}.message-panel__row{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:12px}.message-panel__row--self{align-items:flex-end}.message-panel__meta{display:inline-flex;align-items:center;gap:8px;max-width:84%;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.72rem;font-weight:700}.message-panel__sender,.message-panel__time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-panel__reply{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0);cursor:pointer}.message-panel__bubble{max-width:min(82%,460px);padding:10px 13px;border-radius:16px 16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 18%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 26%,transparent);color:var(--ms-modern-text-primary, #e2e8f0);font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}.message-panel__bubble--self{border-radius:16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-success, #22c55e) 18%,transparent);border-color:color-mix(in srgb,var(--ms-modern-success, #22c55e) 26%,transparent)}.message-panel__replying{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--ms-modern-info, #3b82f6) 10%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-info, #3b82f6) 24%,transparent);color:var(--ms-modern-text-secondary, #94a3b8);font-size:.78rem}.message-panel__replying strong{color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__composer{display:flex;align-items:center;gap:10px;padding-top:4px}.message-panel__input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;outline:none;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__input::placeholder{color:var(--ms-modern-text-secondary, #94a3b8)}.message-panel__send{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:var(--ms-modern-accent, #14b8a6);color:#fff;box-shadow:0 10px 24px #0f172a2e;cursor:pointer}\n"] }]
+            args: [{ selector: 'app-message-panel', imports: [CommonModule, FontAwesomeModule, FormsModule], template: "<div class=\"message-panel\" [style.background]=\"backgroundColor || 'transparent'\">\r\n  <div class=\"message-panel__scroll\">\r\n    <div *ngIf=\"!messages?.length\" class=\"message-panel__empty\">\r\n      No messages yet.\r\n    </div>\r\n\r\n    <div\r\n      *ngFor=\"let message of messages; let index = index\"\r\n      class=\"message-panel__row\"\r\n      [class.message-panel__row--self]=\"message.sender === username\"\r\n    >\r\n      <div class=\"message-panel__meta\">\r\n        <span *ngIf=\"message.sender === username && !message.group\" class=\"message-panel__sender\">\r\n          To: {{ message.receivers.join(', ') }}\r\n        </span>\r\n        <span *ngIf=\"message.sender !== username\" class=\"message-panel__sender\">\r\n          {{ message.sender }}\r\n        </span>\r\n        <span class=\"message-panel__time\">{{ message.timestamp }}</span>\r\n        <button\r\n          *ngIf=\"message.sender !== username && !message.group\"\r\n          type=\"button\"\r\n          class=\"message-panel__reply\"\r\n          (click)=\"openReplyInput(message.sender)\"\r\n          aria-label=\"Reply\"\r\n        >\r\n          <fa-icon [icon]=\"faReply\" size=\"xs\"></fa-icon>\r\n        </button>\r\n      </div>\r\n\r\n      <div class=\"message-panel__bubble\" [class.message-panel__bubble--self]=\"message.sender === member\">\r\n        {{ message.message }}\r\n      </div>\r\n    </div>\r\n  </div>\r\n\r\n  <div *ngIf=\"replyInfo\" class=\"message-panel__replying\">\r\n    <span>Replying to</span>\r\n    <strong>{{ replyInfo.username }}</strong>\r\n  </div>\r\n\r\n  <div class=\"message-panel__composer\">\r\n    <input\r\n      type=\"text\"\r\n      class=\"message-panel__input\"\r\n      [placeholder]=\"getComposerPlaceholder()\"\r\n      maxLength=\"350\"\r\n      (input)=\"handleTextInputChange($event)\"\r\n      [value]=\"type === 'direct' ? directMessageText : groupMessageText\"\r\n    />\r\n    <button type=\"button\" class=\"message-panel__send\" (click)=\"handleSendButton()\" aria-label=\"Send message\">\r\n      <fa-icon [icon]=\"faPaperPlane\" size=\"sm\"></fa-icon>\r\n    </button>\r\n  </div>\r\n</div>\r\n", styles: [".message-panel{display:flex;flex-direction:column;height:100%;max-height:100%;min-height:0;gap:12px;color:var(--ms-modern-text-primary, #e2e8f0);font-family:var(--ms-modern-font-family, \"Segoe UI\", \"Aptos\", sans-serif)}.message-panel__scroll{flex:1;min-height:0;overflow-y:auto;padding-right:4px}.message-panel__empty{padding:18px 12px;text-align:center;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.86rem}.message-panel__row{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-bottom:12px}.message-panel__row--self{align-items:flex-end}.message-panel__meta{display:inline-flex;align-items:center;gap:8px;max-width:84%;color:var(--ms-modern-text-secondary, #94a3b8);font-size:.72rem;font-weight:700}.message-panel__sender,.message-panel__time{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.message-panel__reply{width:24px;height:24px;display:inline-flex;align-items:center;justify-content:center;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0);cursor:pointer}.message-panel__bubble{max-width:min(82%,460px);padding:10px 13px;border-radius:16px 16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 18%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-accent, #14b8a6) 26%,transparent);color:var(--ms-modern-text-primary, #e2e8f0);font-size:.9rem;line-height:1.45;overflow-wrap:anywhere}.message-panel__bubble--self{border-radius:16px 16px 6px;background:color-mix(in srgb,var(--ms-modern-success, #22c55e) 18%,transparent);border-color:color-mix(in srgb,var(--ms-modern-success, #22c55e) 26%,transparent)}.message-panel__replying{display:inline-flex;align-items:center;gap:8px;padding:8px 10px;border-radius:12px;background:color-mix(in srgb,var(--ms-modern-info, #3b82f6) 10%,transparent);border:1px solid color-mix(in srgb,var(--ms-modern-info, #3b82f6) 24%,transparent);color:var(--ms-modern-text-secondary, #94a3b8);font-size:.78rem}.message-panel__replying strong{color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__composer{display:flex;align-items:center;gap:10px;padding-top:4px}.message-panel__input{flex:1;min-width:0;min-height:44px;padding:0 14px;border:1px solid var(--ms-modern-border-subtle, rgba(148, 163, 184, .24));border-radius:999px;outline:none;background:var(--ms-modern-field-background, rgba(15, 23, 42, .48));color:var(--ms-modern-text-primary, #e2e8f0)}.message-panel__input::placeholder{color:var(--ms-modern-text-secondary, #94a3b8)}.message-panel__send{width:44px;height:44px;flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;border:none;border-radius:999px;background:var(--ms-modern-accent, #14b8a6);color:#fff;box-shadow:0 10px 24px #0f172a2e;cursor:pointer}\n"] }]
         }], propDecorators: { messages: [{
                 type: Input
             }], messagesLength: [{
@@ -29647,11 +29697,11 @@ class Screenboard {
         this.parameters.updateIsScreenboardModalVisible(false);
     };
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Screenboard, deps: [{ token: 'customWidth', optional: true }, { token: 'customHeight', optional: true }, { token: 'parameters', optional: true }, { token: 'showAspect', optional: true }], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: Screenboard, isStandalone: true, selector: "app-screenboard", inputs: { customWidth: "customWidth", customHeight: "customHeight", parameters: "parameters", showAspect: "showAspect" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvasRef"], descendants: true }, { propertyName: "screenboardRef", first: true, predicate: ["screenboardRef"], descendants: true }, { propertyName: "screenboardContentRef", first: true, predicate: ["screenboardContentRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"screenboard-interface\" *ngIf=\"showAspect\" style=\"position: relative; display: block; justify-content: center; align-items: center; background-color: transparent; z-index: 1000; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: auto;\" #screenboardRef>\r\n  <div id=\"screenboardContent\" style=\"position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0;\" #screenboardContentRef>\r\n    <button id=\"annotateScreen\" class=\"btn btn-primary btnBoardScreen annotateScreenBtn\" style=\"position: absolute; top: 5px; right: 10px; z-index: 1000;\" (click)=\"toggleAnnotate()\">\r\n      <fa-icon [icon]=\"faPencilAlt\" [ngStyle]=\"{'color': parameters.annotateScreenStream ? 'red' : 'green'}\"></fa-icon>\r\n    </button>\r\n\r\n    <button id=\"toolbarToggleScreen\" *ngIf=\"parameters.annotateScreenStream\" class=\"btn btnBoardScreen btn-primary\" style=\"position: absolute; top: 5px; right: 55px; z-index: 1000;\" (click)=\"toggleToolbar()\">\r\n      <fa-icon [icon]=\"toolbarVisible ? faChevronRight : faChevronLeft\"></fa-icon>\r\n    </button>\r\n\r\n    <div class=\"toolbarScreen mb-3\" id=\"toolbarScreen\" style=\"position: absolute; top: 5px; right: 105px; z-index: 1000; background-color: transparent;\" [style.display]=\"toolbarVisible ? 'block' : 'none'\">\r\n      <!-- Draw Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-secondary dropdown-toggle\" id=\"drawModeScreen\" (click)=\"handleDropdownClick('drawModeScreen')\">\r\n          <fa-icon [icon]=\"faPencilAlt\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'drawModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(3)\">XX-Small (3px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(6)\">X-Small (6px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(12)\">Small (12px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(18)\">Medium (18px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(24)\">Large (24px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(36)\">X-Large (36px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Freehand Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"freehandModeScreen\" (click)=\"handleDropdownClick('freehandModeScreen')\">\r\n          <fa-icon [icon]=\"faPaintBrush\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'freehandModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(40)\">Large (40px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Shape Mode Dropdown with Images -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"shapeModeScreen\" (click)=\"handleDropdownClick('shapeModeScreen')\">\r\n          <fa-icon [icon]=\"faShapes\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'shapeModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('square')\">\r\n            <img src=\"https://mediasfu.com/images/svg/square.svg\" alt=\"Square\" class=\"shape-icon\" /> Square\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rectangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rectangle.svg\" alt=\"Rectangle\" class=\"shape-icon\" /> Rectangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('circle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/circle.svg\" alt=\"Circle\" class=\"shape-icon\" /> Circle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('triangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/triangle.svg\" alt=\"Triangle\" class=\"shape-icon\" /> Triangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('hexagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/hexagon.svg\" alt=\"Hexagon\" class=\"shape-icon\" /> Hexagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('pentagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/pentagon.svg\" alt=\"Pentagon\" class=\"shape-icon\" /> Pentagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rhombus')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rhombus.svg\" alt=\"Rhombus\" class=\"shape-icon\" /> Rhombus\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('octagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/octagon.svg\" alt=\"Octagon\" class=\"shape-icon\" /> Octagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('oval')\">\r\n            <img src=\"https://mediasfu.com/images/svg/oval.svg\" alt=\"Oval\" class=\"shape-icon\" /> Oval\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('parallelogram')\">\r\n            <img src=\"https://mediasfu.com/images/svg/parallelogram.svg\" alt=\"Parallelogram\" class=\"shape-icon\" /> Parallelogram\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Erase Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-danger dropdown-toggle\" id=\"eraseModeScreen\" (click)=\"handleDropdownClick('eraseModeScreen')\">\r\n          <fa-icon [icon]=\"faEraser\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'eraseModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(30)\">Large (30px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Additional Toolbar Controls -->\r\n      <button class=\"btn btnBoard btn-success\" id=\"zoomResetScreen\" style=\"display: none;\">\r\n        <fa-icon [icon]=\"faSearch\"></fa-icon>\r\n      </button>\r\n\r\n      <input type=\"color\" class=\"btn\" id=\"colorPickerScreen\" [(ngModel)]=\"color\">\r\n      <select id=\"lineTypePickerScreen\" class=\"custom-select\" style=\"width: auto;\" [(ngModel)]=\"lineType\">\r\n        <option value=\"solid\">Solid</option>\r\n        <option value=\"dashed\">Dashed</option>\r\n        <option value=\"dotted\">Dotted</option>\r\n        <option value=\"dashDot\">Dash-Dot</option>\r\n      </select>\r\n    </div>\r\n\r\n    <canvas id=\"canvasRef\" width=\"1280\" height=\"720\" [ngStyle]=\"{'display': parameters.annotateScreenStream ? 'block' : 'none'}\" style=\"padding: 0; margin: 0;\" #canvasRef></canvas>\r\n  </div>\r\n</div>\r\n", styles: ["#whiteboardCanvas{border:1px solid #000;cursor:crosshair;background-color:#fff}.resize-handle,.move-handle{width:8px;height:8px;background:red;position:absolute}.move-handle{background:#00f}#textInput{display:none;position:absolute;z-index:10;width:200px}.shape-icon{width:20px;height:20px;color:#fff}.toolbar .btn-group button,.toolbar .dropdown-menu a{font-size:.8rem;padding:5px 10px;margin:0 2px;border-radius:4px;transition:background-color .2s}.toolbar .dropdown-menu a{background-color:transparent;color:#1b1a1a}.toolbar .btn-group button:hover,.toolbar .dropdown-menu a:hover{background-color:#e3e7eb}.toolbar .btn-group button.active{background-color:#454d55}.toolbarScreen .btn-group button,.toolbarScreen .dropdown-menu a{font-size:.8rem;padding:5px 10px;margin:1px 2px;border-radius:4px;transition:background-color .2s;background-color:transparent;color:\"black\"}.toolbarScreen .btn-group button{color:#060606;border:none}.toolbarScreen .dropdown-menu a{background-color:transparent;color:#1b1a1a}.toolbarScreen .btn-group button.active{background-color:#454d55}#toolbar,#toolbarScreen{transition:display .3s ease-in-out}#toolbarToggle,#toolbarToggleScreen{cursor:pointer;border:\"2px solid black\"!important;font-size:.8rem}#colorPicker,#colorPickerScreen{font-size:.8rem;padding:2px;width:32px;height:32px}#lineTypePicker{font-size:.8rem;padding:2px auto;width:32px;height:32px}.btnBoard{font-size:1rem;padding:2px;width:40px;height:40px;margin:2px}#lineTypePickerScreen{font-size:.7rem;padding:2px auto;width:28px;height:28px;background-color:#d6d1d166;color:#000;border-radius:4px}.toggle-icon{width:30px;height:30px;padding:0;margin:0}#toggleBackground.active{background-color:#fdfeff}.annotateScreenBtn{background-color:#2d2e2f!important;border:2px solid #000!important;color:green!important;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "19.2.20", type: Screenboard, isStandalone: true, selector: "app-screenboard", inputs: { customWidth: "customWidth", customHeight: "customHeight", parameters: "parameters", showAspect: "showAspect" }, viewQueries: [{ propertyName: "canvasRef", first: true, predicate: ["canvasRef"], descendants: true }, { propertyName: "screenboardRef", first: true, predicate: ["screenboardRef"], descendants: true }, { propertyName: "screenboardContentRef", first: true, predicate: ["screenboardContentRef"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div id=\"screenboard-interface\" *ngIf=\"showAspect\" style=\"position: relative; display: block; justify-content: center; align-items: center; background-color: transparent; z-index: 1000; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: auto;\" #screenboardRef>\r\n  <div id=\"screenboardContent\" style=\"position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0;\" #screenboardContentRef>\r\n    <button id=\"annotateScreen\" class=\"btn btn-primary btnBoardScreen annotateScreenBtn\" style=\"position: absolute; top: 5px; right: 10px; z-index: 1000;\" (click)=\"toggleAnnotate()\">\r\n      <fa-icon [icon]=\"faPencilAlt\" [ngStyle]=\"{'color': parameters.annotateScreenStream ? 'red' : 'green'}\"></fa-icon>\r\n    </button>\r\n\r\n    <button id=\"toolbarToggleScreen\" *ngIf=\"parameters.annotateScreenStream\" class=\"btn btnBoardScreen btn-primary\" style=\"position: absolute; top: 5px; right: 55px; z-index: 1000;\" (click)=\"toggleToolbar()\">\r\n      <fa-icon [icon]=\"toolbarVisible ? faChevronRight : faChevronLeft\"></fa-icon>\r\n    </button>\r\n\r\n    <div class=\"toolbarScreen mb-3\" id=\"toolbarScreen\" style=\"position: absolute; top: 5px; right: 105px; z-index: 1000;\" [style.display]=\"toolbarVisible ? 'flex' : 'none'\">\r\n      <!-- Draw Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-secondary dropdown-toggle\" id=\"drawModeScreen\" (click)=\"handleDropdownClick('drawModeScreen')\">\r\n          <fa-icon [icon]=\"faPencilAlt\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'drawModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(3)\">XX-Small (3px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(6)\">X-Small (6px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(12)\">Small (12px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(18)\">Medium (18px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(24)\">Large (24px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(36)\">X-Large (36px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Freehand Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"freehandModeScreen\" (click)=\"handleDropdownClick('freehandModeScreen')\">\r\n          <fa-icon [icon]=\"faPaintBrush\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'freehandModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(40)\">Large (40px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Shape Mode Dropdown with Images -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"shapeModeScreen\" (click)=\"handleDropdownClick('shapeModeScreen')\">\r\n          <fa-icon [icon]=\"faShapes\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'shapeModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('square')\">\r\n            <img src=\"https://mediasfu.com/images/svg/square.svg\" alt=\"Square\" class=\"shape-icon\" /> Square\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rectangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rectangle.svg\" alt=\"Rectangle\" class=\"shape-icon\" /> Rectangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('circle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/circle.svg\" alt=\"Circle\" class=\"shape-icon\" /> Circle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('triangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/triangle.svg\" alt=\"Triangle\" class=\"shape-icon\" /> Triangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('hexagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/hexagon.svg\" alt=\"Hexagon\" class=\"shape-icon\" /> Hexagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('pentagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/pentagon.svg\" alt=\"Pentagon\" class=\"shape-icon\" /> Pentagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rhombus')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rhombus.svg\" alt=\"Rhombus\" class=\"shape-icon\" /> Rhombus\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('octagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/octagon.svg\" alt=\"Octagon\" class=\"shape-icon\" /> Octagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('oval')\">\r\n            <img src=\"https://mediasfu.com/images/svg/oval.svg\" alt=\"Oval\" class=\"shape-icon\" /> Oval\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('parallelogram')\">\r\n            <img src=\"https://mediasfu.com/images/svg/parallelogram.svg\" alt=\"Parallelogram\" class=\"shape-icon\" /> Parallelogram\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Erase Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-danger dropdown-toggle\" id=\"eraseModeScreen\" (click)=\"handleDropdownClick('eraseModeScreen')\">\r\n          <fa-icon [icon]=\"faEraser\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'eraseModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(30)\">Large (30px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Additional Toolbar Controls -->\r\n      <button class=\"btn btnBoard btn-success\" id=\"zoomResetScreen\" style=\"display: none;\">\r\n        <fa-icon [icon]=\"faSearch\"></fa-icon>\r\n      </button>\r\n\r\n      <input type=\"color\" class=\"btn\" id=\"colorPickerScreen\" [(ngModel)]=\"color\">\r\n      <select id=\"lineTypePickerScreen\" class=\"custom-select\" style=\"width: auto;\" [(ngModel)]=\"lineType\">\r\n        <option value=\"solid\">Solid</option>\r\n        <option value=\"dashed\">Dashed</option>\r\n        <option value=\"dotted\">Dotted</option>\r\n        <option value=\"dashDot\">Dash-Dot</option>\r\n      </select>\r\n    </div>\r\n\r\n    <canvas id=\"canvasRef\" width=\"1280\" height=\"720\" [ngStyle]=\"{'display': parameters.annotateScreenStream ? 'block' : 'none'}\" style=\"padding: 0; margin: 0;\" #canvasRef></canvas>\r\n  </div>\r\n</div>\r\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1050;display:none;min-width:11rem;padding:.5rem 0;margin:.25rem 0 0;font-size:.85rem;color:#e2e8f0;text-align:left;background:#0f172afa;border:1px solid rgba(148,163,184,.24);border-radius:10px;box-shadow:0 18px 40px #0f172a59;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.dropdown-menu.show{display:block}.dropdown-item{display:block;width:100%;padding:.5rem 1rem;clear:both;font-weight:500;color:#e2e8f0;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:hover,.dropdown-item:focus{background-color:#3b82f62e;color:#fff}#whiteboardCanvas{border:1px solid #000;cursor:crosshair;background-color:#fff}.resize-handle,.move-handle{width:8px;height:8px;background:red;position:absolute}.move-handle{background:#00f}#textInput{display:none;position:absolute;z-index:10;width:200px}.shape-icon{width:20px;height:20px;color:#fff}.toolbar .btn-group button,.toolbar .dropdown-menu a{font-size:.8rem;padding:5px 10px;margin:0 2px;border-radius:4px;transition:background-color .2s}.toolbar .dropdown-menu a{background-color:transparent;color:#1b1a1a}.toolbar .btn-group button:hover,.toolbar .dropdown-menu a:hover{background-color:#e3e7eb}.toolbar .btn-group button.active{background-color:#454d55}.toolbarScreen .btn-group>button{font-size:.8rem;padding:5px 10px;margin:1px 2px;border-radius:4px;transition:background-color .2s;background-color:#ffffff14;color:#f8fafc}.toolbarScreen{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:#0f172aeb;border:1px solid rgba(148,163,184,.28);box-shadow:0 16px 32px #0f172a47;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.toolbarScreen .btn-group>button{color:#f8fafc;border:1px solid rgba(148,163,184,.28)}.toolbarScreen .btn-group>button:hover,.toolbarScreen .btn-group>button:focus-visible{background-color:#ffffff2e;border-color:#bfdbfe80;color:#fff}.toolbarScreen .btn-group>button svg,.toolbarScreen .btn-group>button i,.toolbarScreen .btn-group>button fa-icon{color:inherit;fill:currentColor}.toolbarScreen .btn-group>button.active{background-color:#2563ebb8;border-color:#bfdbfe8c}.toolbarScreen .dropdown-item{display:flex;align-items:center;gap:.65rem}.toolbarScreen .dropdown-item .shape-icon{filter:brightness(0) invert(1)}.toolbarScreen .dropdown-item svg,.toolbarScreen .dropdown-item i,.toolbarScreen .dropdown-item fa-icon{color:inherit;fill:currentColor}#toolbar,#toolbarScreen{transition:display .3s ease-in-out}#toolbarToggle,#toolbarToggleScreen{cursor:pointer;border:\"2px solid black\"!important;font-size:.8rem}#colorPicker,#colorPickerScreen{font-size:.8rem;padding:2px;width:32px;height:32px;border:1px solid rgba(148,163,184,.28);border-radius:8px;background-color:#ffffff14}#lineTypePicker{font-size:.8rem;padding:2px auto;width:32px;height:32px}.btnBoard{font-size:1rem;padding:2px;width:40px;height:40px;margin:2px}#lineTypePickerScreen{font-size:.7rem;padding:0 .6rem;min-width:108px;width:auto;height:36px;background-color:#ffffff14;color:#f8fafc;border:1px solid rgba(148,163,184,.28);border-radius:8px}.toggle-icon{width:30px;height:30px;padding:0;margin:0}#toggleBackground.active{background-color:#fdfeff}.annotateScreenBtn{background-color:#2d2e2f!important;border:2px solid #000!important;color:green!important;font-size:.75rem}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: i1.NgStyle, selector: "[ngStyle]", inputs: ["ngStyle"] }, { kind: "ngmodule", type: FontAwesomeModule }, { kind: "component", type: i2.FaIconComponent, selector: "fa-icon", inputs: ["icon", "title", "animation", "mask", "flip", "size", "pull", "border", "inverse", "symbol", "rotate", "fixedWidth", "transform", "a11yRole"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: i2$1.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i2$1.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i2$1.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i2$1.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i2$1.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "19.2.20", ngImport: i0, type: Screenboard, decorators: [{
             type: Component,
-            args: [{ selector: 'app-screenboard', imports: [CommonModule, FontAwesomeModule, FormsModule], template: "<div id=\"screenboard-interface\" *ngIf=\"showAspect\" style=\"position: relative; display: block; justify-content: center; align-items: center; background-color: transparent; z-index: 1000; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: auto;\" #screenboardRef>\r\n  <div id=\"screenboardContent\" style=\"position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0;\" #screenboardContentRef>\r\n    <button id=\"annotateScreen\" class=\"btn btn-primary btnBoardScreen annotateScreenBtn\" style=\"position: absolute; top: 5px; right: 10px; z-index: 1000;\" (click)=\"toggleAnnotate()\">\r\n      <fa-icon [icon]=\"faPencilAlt\" [ngStyle]=\"{'color': parameters.annotateScreenStream ? 'red' : 'green'}\"></fa-icon>\r\n    </button>\r\n\r\n    <button id=\"toolbarToggleScreen\" *ngIf=\"parameters.annotateScreenStream\" class=\"btn btnBoardScreen btn-primary\" style=\"position: absolute; top: 5px; right: 55px; z-index: 1000;\" (click)=\"toggleToolbar()\">\r\n      <fa-icon [icon]=\"toolbarVisible ? faChevronRight : faChevronLeft\"></fa-icon>\r\n    </button>\r\n\r\n    <div class=\"toolbarScreen mb-3\" id=\"toolbarScreen\" style=\"position: absolute; top: 5px; right: 105px; z-index: 1000; background-color: transparent;\" [style.display]=\"toolbarVisible ? 'block' : 'none'\">\r\n      <!-- Draw Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-secondary dropdown-toggle\" id=\"drawModeScreen\" (click)=\"handleDropdownClick('drawModeScreen')\">\r\n          <fa-icon [icon]=\"faPencilAlt\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'drawModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(3)\">XX-Small (3px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(6)\">X-Small (6px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(12)\">Small (12px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(18)\">Medium (18px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(24)\">Large (24px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(36)\">X-Large (36px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Freehand Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"freehandModeScreen\" (click)=\"handleDropdownClick('freehandModeScreen')\">\r\n          <fa-icon [icon]=\"faPaintBrush\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'freehandModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(40)\">Large (40px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Shape Mode Dropdown with Images -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"shapeModeScreen\" (click)=\"handleDropdownClick('shapeModeScreen')\">\r\n          <fa-icon [icon]=\"faShapes\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'shapeModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('square')\">\r\n            <img src=\"https://mediasfu.com/images/svg/square.svg\" alt=\"Square\" class=\"shape-icon\" /> Square\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rectangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rectangle.svg\" alt=\"Rectangle\" class=\"shape-icon\" /> Rectangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('circle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/circle.svg\" alt=\"Circle\" class=\"shape-icon\" /> Circle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('triangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/triangle.svg\" alt=\"Triangle\" class=\"shape-icon\" /> Triangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('hexagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/hexagon.svg\" alt=\"Hexagon\" class=\"shape-icon\" /> Hexagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('pentagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/pentagon.svg\" alt=\"Pentagon\" class=\"shape-icon\" /> Pentagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rhombus')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rhombus.svg\" alt=\"Rhombus\" class=\"shape-icon\" /> Rhombus\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('octagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/octagon.svg\" alt=\"Octagon\" class=\"shape-icon\" /> Octagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('oval')\">\r\n            <img src=\"https://mediasfu.com/images/svg/oval.svg\" alt=\"Oval\" class=\"shape-icon\" /> Oval\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('parallelogram')\">\r\n            <img src=\"https://mediasfu.com/images/svg/parallelogram.svg\" alt=\"Parallelogram\" class=\"shape-icon\" /> Parallelogram\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Erase Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-danger dropdown-toggle\" id=\"eraseModeScreen\" (click)=\"handleDropdownClick('eraseModeScreen')\">\r\n          <fa-icon [icon]=\"faEraser\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'eraseModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(30)\">Large (30px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Additional Toolbar Controls -->\r\n      <button class=\"btn btnBoard btn-success\" id=\"zoomResetScreen\" style=\"display: none;\">\r\n        <fa-icon [icon]=\"faSearch\"></fa-icon>\r\n      </button>\r\n\r\n      <input type=\"color\" class=\"btn\" id=\"colorPickerScreen\" [(ngModel)]=\"color\">\r\n      <select id=\"lineTypePickerScreen\" class=\"custom-select\" style=\"width: auto;\" [(ngModel)]=\"lineType\">\r\n        <option value=\"solid\">Solid</option>\r\n        <option value=\"dashed\">Dashed</option>\r\n        <option value=\"dotted\">Dotted</option>\r\n        <option value=\"dashDot\">Dash-Dot</option>\r\n      </select>\r\n    </div>\r\n\r\n    <canvas id=\"canvasRef\" width=\"1280\" height=\"720\" [ngStyle]=\"{'display': parameters.annotateScreenStream ? 'block' : 'none'}\" style=\"padding: 0; margin: 0;\" #canvasRef></canvas>\r\n  </div>\r\n</div>\r\n", styles: ["#whiteboardCanvas{border:1px solid #000;cursor:crosshair;background-color:#fff}.resize-handle,.move-handle{width:8px;height:8px;background:red;position:absolute}.move-handle{background:#00f}#textInput{display:none;position:absolute;z-index:10;width:200px}.shape-icon{width:20px;height:20px;color:#fff}.toolbar .btn-group button,.toolbar .dropdown-menu a{font-size:.8rem;padding:5px 10px;margin:0 2px;border-radius:4px;transition:background-color .2s}.toolbar .dropdown-menu a{background-color:transparent;color:#1b1a1a}.toolbar .btn-group button:hover,.toolbar .dropdown-menu a:hover{background-color:#e3e7eb}.toolbar .btn-group button.active{background-color:#454d55}.toolbarScreen .btn-group button,.toolbarScreen .dropdown-menu a{font-size:.8rem;padding:5px 10px;margin:1px 2px;border-radius:4px;transition:background-color .2s;background-color:transparent;color:\"black\"}.toolbarScreen .btn-group button{color:#060606;border:none}.toolbarScreen .dropdown-menu a{background-color:transparent;color:#1b1a1a}.toolbarScreen .btn-group button.active{background-color:#454d55}#toolbar,#toolbarScreen{transition:display .3s ease-in-out}#toolbarToggle,#toolbarToggleScreen{cursor:pointer;border:\"2px solid black\"!important;font-size:.8rem}#colorPicker,#colorPickerScreen{font-size:.8rem;padding:2px;width:32px;height:32px}#lineTypePicker{font-size:.8rem;padding:2px auto;width:32px;height:32px}.btnBoard{font-size:1rem;padding:2px;width:40px;height:40px;margin:2px}#lineTypePickerScreen{font-size:.7rem;padding:2px auto;width:28px;height:28px;background-color:#d6d1d166;color:#000;border-radius:4px}.toggle-icon{width:30px;height:30px;padding:0;margin:0}#toggleBackground.active{background-color:#fdfeff}.annotateScreenBtn{background-color:#2d2e2f!important;border:2px solid #000!important;color:green!important;font-size:.75rem}\n"] }]
+            args: [{ selector: 'app-screenboard', imports: [CommonModule, FontAwesomeModule, FormsModule], template: "<div id=\"screenboard-interface\" *ngIf=\"showAspect\" style=\"position: relative; display: block; justify-content: center; align-items: center; background-color: transparent; z-index: 1000; width: 100%; height: 100%; max-width: 100%; max-height: 100%; overflow: auto;\" #screenboardRef>\r\n  <div id=\"screenboardContent\" style=\"position: relative; display: flex; justify-content: center; align-items: center; width: 100%; height: 100%; overflow: hidden; top: 0; left: 0;\" #screenboardContentRef>\r\n    <button id=\"annotateScreen\" class=\"btn btn-primary btnBoardScreen annotateScreenBtn\" style=\"position: absolute; top: 5px; right: 10px; z-index: 1000;\" (click)=\"toggleAnnotate()\">\r\n      <fa-icon [icon]=\"faPencilAlt\" [ngStyle]=\"{'color': parameters.annotateScreenStream ? 'red' : 'green'}\"></fa-icon>\r\n    </button>\r\n\r\n    <button id=\"toolbarToggleScreen\" *ngIf=\"parameters.annotateScreenStream\" class=\"btn btnBoardScreen btn-primary\" style=\"position: absolute; top: 5px; right: 55px; z-index: 1000;\" (click)=\"toggleToolbar()\">\r\n      <fa-icon [icon]=\"toolbarVisible ? faChevronRight : faChevronLeft\"></fa-icon>\r\n    </button>\r\n\r\n    <div class=\"toolbarScreen mb-3\" id=\"toolbarScreen\" style=\"position: absolute; top: 5px; right: 105px; z-index: 1000;\" [style.display]=\"toolbarVisible ? 'flex' : 'none'\">\r\n      <!-- Draw Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-secondary dropdown-toggle\" id=\"drawModeScreen\" (click)=\"handleDropdownClick('drawModeScreen')\">\r\n          <fa-icon [icon]=\"faPencilAlt\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'drawModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(3)\">XX-Small (3px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(6)\">X-Small (6px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(12)\">Small (12px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(18)\">Medium (18px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(24)\">Large (24px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setDrawMode(36)\">X-Large (36px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Freehand Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"freehandModeScreen\" (click)=\"handleDropdownClick('freehandModeScreen')\">\r\n          <fa-icon [icon]=\"faPaintBrush\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'freehandModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(40)\">Large (40px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setFreehandMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Shape Mode Dropdown with Images -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-dark dropdown-toggle\" id=\"shapeModeScreen\" (click)=\"handleDropdownClick('shapeModeScreen')\">\r\n          <fa-icon [icon]=\"faShapes\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'shapeModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('square')\">\r\n            <img src=\"https://mediasfu.com/images/svg/square.svg\" alt=\"Square\" class=\"shape-icon\" /> Square\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rectangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rectangle.svg\" alt=\"Rectangle\" class=\"shape-icon\" /> Rectangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('circle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/circle.svg\" alt=\"Circle\" class=\"shape-icon\" /> Circle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('triangle')\">\r\n            <img src=\"https://mediasfu.com/images/svg/triangle.svg\" alt=\"Triangle\" class=\"shape-icon\" /> Triangle\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('hexagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/hexagon.svg\" alt=\"Hexagon\" class=\"shape-icon\" /> Hexagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('pentagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/pentagon.svg\" alt=\"Pentagon\" class=\"shape-icon\" /> Pentagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('rhombus')\">\r\n            <img src=\"https://mediasfu.com/images/svg/rhombus.svg\" alt=\"Rhombus\" class=\"shape-icon\" /> Rhombus\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('octagon')\">\r\n            <img src=\"https://mediasfu.com/images/svg/octagon.svg\" alt=\"Octagon\" class=\"shape-icon\" /> Octagon\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('oval')\">\r\n            <img src=\"https://mediasfu.com/images/svg/oval.svg\" alt=\"Oval\" class=\"shape-icon\" /> Oval\r\n          </button>\r\n          <button class=\"dropdown-item\" (click)=\"setShapeMode('parallelogram')\">\r\n            <img src=\"https://mediasfu.com/images/svg/parallelogram.svg\" alt=\"Parallelogram\" class=\"shape-icon\" /> Parallelogram\r\n          </button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Erase Mode Dropdown -->\r\n      <div class=\"btn-group\" role=\"group\">\r\n        <button class=\"btn btnBoardScreen btn-danger dropdown-toggle\" id=\"eraseModeScreen\" (click)=\"handleDropdownClick('eraseModeScreen')\">\r\n          <fa-icon [icon]=\"faEraser\"></fa-icon>\r\n        </button>\r\n        <div *ngIf=\"dropdownOpen === 'eraseModeScreen'\" class=\"dropdown-menu show\">\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(5)\">X-Small (5px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(10)\">Small (10px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(20)\">Medium (20px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(30)\">Large (30px)</button>\r\n          <button class=\"dropdown-item\" (click)=\"setEraseMode(60)\">X-Large (60px)</button>\r\n        </div>\r\n      </div>\r\n\r\n      <!-- Additional Toolbar Controls -->\r\n      <button class=\"btn btnBoard btn-success\" id=\"zoomResetScreen\" style=\"display: none;\">\r\n        <fa-icon [icon]=\"faSearch\"></fa-icon>\r\n      </button>\r\n\r\n      <input type=\"color\" class=\"btn\" id=\"colorPickerScreen\" [(ngModel)]=\"color\">\r\n      <select id=\"lineTypePickerScreen\" class=\"custom-select\" style=\"width: auto;\" [(ngModel)]=\"lineType\">\r\n        <option value=\"solid\">Solid</option>\r\n        <option value=\"dashed\">Dashed</option>\r\n        <option value=\"dotted\">Dotted</option>\r\n        <option value=\"dashDot\">Dash-Dot</option>\r\n      </select>\r\n    </div>\r\n\r\n    <canvas id=\"canvasRef\" width=\"1280\" height=\"720\" [ngStyle]=\"{'display': parameters.annotateScreenStream ? 'block' : 'none'}\" style=\"padding: 0; margin: 0;\" #canvasRef></canvas>\r\n  </div>\r\n</div>\r\n", styles: [".dropdown-menu{position:absolute;top:100%;left:0;z-index:1050;display:none;min-width:11rem;padding:.5rem 0;margin:.25rem 0 0;font-size:.85rem;color:#e2e8f0;text-align:left;background:#0f172afa;border:1px solid rgba(148,163,184,.24);border-radius:10px;box-shadow:0 18px 40px #0f172a59;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}.dropdown-menu.show{display:block}.dropdown-item{display:block;width:100%;padding:.5rem 1rem;clear:both;font-weight:500;color:#e2e8f0;text-align:inherit;white-space:nowrap;background-color:transparent;border:0}.dropdown-item:hover,.dropdown-item:focus{background-color:#3b82f62e;color:#fff}#whiteboardCanvas{border:1px solid #000;cursor:crosshair;background-color:#fff}.resize-handle,.move-handle{width:8px;height:8px;background:red;position:absolute}.move-handle{background:#00f}#textInput{display:none;position:absolute;z-index:10;width:200px}.shape-icon{width:20px;height:20px;color:#fff}.toolbar .btn-group button,.toolbar .dropdown-menu a{font-size:.8rem;padding:5px 10px;margin:0 2px;border-radius:4px;transition:background-color .2s}.toolbar .dropdown-menu a{background-color:transparent;color:#1b1a1a}.toolbar .btn-group button:hover,.toolbar .dropdown-menu a:hover{background-color:#e3e7eb}.toolbar .btn-group button.active{background-color:#454d55}.toolbarScreen .btn-group>button{font-size:.8rem;padding:5px 10px;margin:1px 2px;border-radius:4px;transition:background-color .2s;background-color:#ffffff14;color:#f8fafc}.toolbarScreen{display:flex;align-items:center;gap:6px;padding:8px 12px;border-radius:12px;background:#0f172aeb;border:1px solid rgba(148,163,184,.28);box-shadow:0 16px 32px #0f172a47;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}.toolbarScreen .btn-group>button{color:#f8fafc;border:1px solid rgba(148,163,184,.28)}.toolbarScreen .btn-group>button:hover,.toolbarScreen .btn-group>button:focus-visible{background-color:#ffffff2e;border-color:#bfdbfe80;color:#fff}.toolbarScreen .btn-group>button svg,.toolbarScreen .btn-group>button i,.toolbarScreen .btn-group>button fa-icon{color:inherit;fill:currentColor}.toolbarScreen .btn-group>button.active{background-color:#2563ebb8;border-color:#bfdbfe8c}.toolbarScreen .dropdown-item{display:flex;align-items:center;gap:.65rem}.toolbarScreen .dropdown-item .shape-icon{filter:brightness(0) invert(1)}.toolbarScreen .dropdown-item svg,.toolbarScreen .dropdown-item i,.toolbarScreen .dropdown-item fa-icon{color:inherit;fill:currentColor}#toolbar,#toolbarScreen{transition:display .3s ease-in-out}#toolbarToggle,#toolbarToggleScreen{cursor:pointer;border:\"2px solid black\"!important;font-size:.8rem}#colorPicker,#colorPickerScreen{font-size:.8rem;padding:2px;width:32px;height:32px;border:1px solid rgba(148,163,184,.28);border-radius:8px;background-color:#ffffff14}#lineTypePicker{font-size:.8rem;padding:2px auto;width:32px;height:32px}.btnBoard{font-size:1rem;padding:2px;width:40px;height:40px;margin:2px}#lineTypePickerScreen{font-size:.7rem;padding:0 .6rem;min-width:108px;width:auto;height:36px;background-color:#ffffff14;color:#f8fafc;border:1px solid rgba(148,163,184,.28);border-radius:8px}.toggle-icon{width:30px;height:30px;padding:0;margin:0}#toggleBackground.active{background-color:#fdfeff}.annotateScreenBtn{background-color:#2d2e2f!important;border:2px solid #000!important;color:green!important;font-size:.75rem}\n"] }]
         }], ctorParameters: () => [{ type: undefined, decorators: [{
                     type: Optional
                 }, {
@@ -48382,6 +48432,7 @@ class MediasfuGeneric {
                 parameters: {
                     ...this.getAllParams(),
                     ...this.mediaSFUFunctions(),
+                    mediaDevices: navigator.mediaDevices,
                 },
             }),
             activeColor: 'green',
@@ -61322,6 +61373,7 @@ class MediasfuWebinar {
                 parameters: {
                     ...this.getAllParams(),
                     ...this.mediaSFUFunctions(),
+                    mediaDevices: navigator.mediaDevices,
                 },
             }),
             activeColor: 'green',
@@ -67262,6 +67314,7 @@ class MediasfuConference {
                 parameters: {
                     ...this.getAllParams(),
                     ...this.mediaSFUFunctions(),
+                    mediaDevices: navigator.mediaDevices,
                 },
             }),
             activeColor: 'green',