@ruc-lib/screen-recorder 2.9.2 → 3.1.0

package/{fesm2020 → fesm2022}/ruc-lib-screen-recorder.mjs

@@ -1,648 +1,636 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ChangeDetectionStrategy, Input, ViewChild, NgModule } from '@angular/core';
-import * as i4 from '@angular/common';
-import { CommonModule } from '@angular/common';
+import { Injectable, ViewChild, Input, Component } from '@angular/core';
 import * as i2 from '@angular/platform-browser';
 import { BehaviorSubject, Subject, timer, Subscription } from 'rxjs';
 import { tap, takeWhile } from 'rxjs/operators';
+import * as i4 from '@angular/common';
+import { CommonModule } from '@angular/common';
 
-var ScreenRecorderPosition;
-(function (ScreenRecorderPosition) {
-    ScreenRecorderPosition["Top"] = "top";
-    ScreenRecorderPosition["Bottom"] = "bottom";
-    ScreenRecorderPosition["Left"] = "left";
-    ScreenRecorderPosition["Right"] = "right";
-})(ScreenRecorderPosition || (ScreenRecorderPosition = {}));
-var DisplayFormat;
-(function (DisplayFormat) {
-    DisplayFormat["Icon"] = "icon";
-    DisplayFormat["Text"] = "text";
-})(DisplayFormat || (DisplayFormat = {}));
-var RecordingState;
-(function (RecordingState) {
-    RecordingState["Idle"] = "idle";
-    RecordingState["Recording"] = "recording";
-    RecordingState["Paused"] = "paused";
-    RecordingState["Stopped"] = "stopped";
+var ScreenRecorderPosition;
+(function (ScreenRecorderPosition) {
+    ScreenRecorderPosition["Top"] = "top";
+    ScreenRecorderPosition["Bottom"] = "bottom";
+    ScreenRecorderPosition["Left"] = "left";
+    ScreenRecorderPosition["Right"] = "right";
+})(ScreenRecorderPosition || (ScreenRecorderPosition = {}));
+var DisplayFormat;
+(function (DisplayFormat) {
+    DisplayFormat["Icon"] = "icon";
+    DisplayFormat["Text"] = "text";
+})(DisplayFormat || (DisplayFormat = {}));
+var RecordingState;
+(function (RecordingState) {
+    RecordingState["Idle"] = "idle";
+    RecordingState["Recording"] = "recording";
+    RecordingState["Paused"] = "paused";
+    RecordingState["Stopped"] = "stopped";
 })(RecordingState || (RecordingState = {}));
 
-class ScreenRecorderConstants {
-    constructor() {
-        this.DEFAULT_ICONS = {
-            record: 'fiber_manual_record',
-            stop: 'stop',
-            pause: 'pause',
-            resume: 'play_arrow',
-            play: 'play_circle_filled',
-            download: 'download',
-            audioOn: 'volume_up',
-            audioOff: 'volume_off',
-        };
-        this.DEFAULT_LABELS = {
-            recordButton: 'Start Recording',
-            stopButton: 'Stop Recording',
-            pauseButton: 'Pause Recording',
-            resumeButton: 'Resume Recording',
-            audioToggleButton: 'Toggle Audio',
-            downloadButton: 'Download Recording',
-            playbackVideo: 'Screen Recording Playback',
-        };
-        this.INACTIVE = 'inactive';
-        this.AUDIO_ON = 'Audio ON';
-        this.AUDIO_OFF = 'Audio OFF';
-        this.RECORDING_IN_PROGRESS_ERROR = 'Recording is already in progress.';
-        this.FAILED_TO_GET_DISPLAY_MEDIA_STREAM_ERROR = 'Failed to get display media stream';
-        this.NO_SUPPORT_MIME = 'No supported MIME type found for MediaRecorder.';
-        this.NO_RECORDING_DOWNLOAD = 'No recording available to download.';
-        this.MEDIA_ERROR = 'MediaRecorder error';
-        this.PERMISSION_DENIED = "Error starting screen recording: NotAllowedError - Permission denied";
-        this.NO_SUPPORT = 'Screen recording is not supported in this browser.';
-    }
-}
-ScreenRecorderConstants.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderConstants, deps: [], target: i0.ɵɵFactoryTarget.Injectable });
-ScreenRecorderConstants.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderConstants, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderConstants, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root',
-                }]
-        }], ctorParameters: function () { return []; } });
+class ScreenRecorderConstants {
+    constructor() {
+        this.DEFAULT_ICONS = {
+            record: 'fiber_manual_record', // Material Icon name
+            stop: 'stop',
+            pause: 'pause',
+            resume: 'play_arrow',
+            play: 'play_circle_filled',
+            download: 'download',
+            audioOn: 'volume_up',
+            audioOff: 'volume_off',
+        };
+        this.DEFAULT_LABELS = {
+            recordButton: 'Start Recording',
+            stopButton: 'Stop Recording',
+            pauseButton: 'Pause Recording',
+            resumeButton: 'Resume Recording',
+            audioToggleButton: 'Toggle Audio',
+            downloadButton: 'Download Recording',
+            playbackVideo: 'Screen Recording Playback',
+        };
+        this.INACTIVE = 'inactive';
+        this.AUDIO_ON = 'Audio ON';
+        this.AUDIO_OFF = 'Audio OFF';
+        this.RECORDING_IN_PROGRESS_ERROR = 'Recording is already in progress.';
+        this.FAILED_TO_GET_DISPLAY_MEDIA_STREAM_ERROR = 'Failed to get display media stream';
+        this.NO_SUPPORT_MIME = 'No supported MIME type found for MediaRecorder.';
+        this.NO_RECORDING_DOWNLOAD = 'No recording available to download.';
+        this.MEDIA_ERROR = 'MediaRecorder error';
+        this.PERMISSION_DENIED = "Error starting screen recording: NotAllowedError - Permission denied";
+        this.NO_SUPPORT = 'Screen recording is not supported in this browser.';
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScreenRecorderConstants, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScreenRecorderConstants, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScreenRecorderConstants, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root',
+                }]
+        }], ctorParameters: () => [] });
 
-class ScreenRecorderService {
-    constructor(screenRecordingConstant) {
-        this.screenRecordingConstant = screenRecordingConstant;
-        this.stream = null;
-        this.mediaRecorder = null;
-        this.recordedBlobs = [];
-        this.currentRecordedTime = 0;
-        this.recordingStateSubject = new BehaviorSubject(RecordingState.Idle);
-        this.recordingState$ = this.recordingStateSubject.asObservable();
-        this.recordedTimeSubject = new BehaviorSubject(0);
-        this.recordedTime$ = this.recordedTimeSubject.asObservable();
-        this.recordedUrlSubject = new BehaviorSubject(null);
-        this.recordedUrl$ = this.recordedUrlSubject.asObservable();
-        this.recordingTimestampSubject = new BehaviorSubject('');
-        this.recordingTimestamp$ = this.recordingTimestampSubject.asObservable();
-        this.errorSubject = new Subject();
-        this.error$ = this.errorSubject.asObservable();
-    }
-    /**
-     * Starts the screen recording with optional audio
-     *
-     * @param options - Configuration options for recording
-     * @param options.audio - Whether to include audio in the recording
-     *
-     * @throws Error if recording is already in progress or if media access is denied
-     * @returns Promise<void>
-     */
-    async startRecording(options) {
-        if (this.recordingStateSubject.value === RecordingState.Recording || this.recordingStateSubject.value === RecordingState.Paused) {
-            this.handleError(this.screenRecordingConstant.RECORDING_IN_PROGRESS_ERROR);
-            return;
-        }
-        this.cleanupPreviousRecording();
-        try {
-            // The browser's native picker handles "specific area" selection (window, tab, screen).
-            const displayStream = await navigator.mediaDevices.getDisplayMedia({
-                video: true
-            });
-            // If audio is enabled, get the audio stream
-            let audioStream = null;
-            if (options.audio) {
-                audioStream = await navigator.mediaDevices.getUserMedia({
-                    audio: {
-                        echoCancellation: true,
-                        noiseSuppression: true,
-                        sampleRate: 44100
-                    }
-                });
-            }
-            // Combine the streams if audio is enabled
-            if (audioStream) {
-                this.stream = new MediaStream([...displayStream.getTracks(), ...audioStream.getTracks()]);
-            }
-            else {
-                this.stream = displayStream;
-            }
-            // Listen for when the user stops sharing via browser UI
-            this.stream.getVideoTracks()[0].onended = () => {
-                if (this.recordingStateSubject.value === RecordingState.Recording || this.recordingStateSubject.value === RecordingState.Paused) {
-                    this.stopRecordingInternal();
-                }
-            };
-            // Handle errors
-            if (!this.stream) {
-                this.handleError(this.screenRecordingConstant.FAILED_TO_GET_DISPLAY_MEDIA_STREAM_ERROR);
-                return;
-            }
-            // Set recording timestamp
-            const now = new Date();
-            const timestamp = now.toLocaleString('en-IN', {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: true
-            });
-            this.recordingTimestampSubject.next(timestamp);
-            this.recordedBlobs = [];
-            const mimeType = this.getSupportedMimeType();
-            if (!mimeType) {
-                this.handleError(this.screenRecordingConstant.NO_SUPPORT_MIME);
-                this.stream?.getTracks().forEach(track => track.stop());
-                this.stream = null;
-                return;
-            }
-            // Create a canvas for timestamp overlay
-            const canvas = document.createElement('canvas');
-            const videoTrack = this.stream?.getVideoTracks()[0];
-            if (videoTrack) {
-                const video = document.createElement('video');
-                video.srcObject = this.stream;
-                // Wait for video to load metadata
-                video.onloadedmetadata = () => {
-                    canvas.width = video.videoWidth;
-                    canvas.height = video.videoHeight;
-                    const ctx = canvas.getContext('2d');
-                    if (ctx) {
-                        // Draw video frame
-                        ctx.drawImage(video, 0, 0);
-                        // Draw timestamp
-                        ctx.font = '16px Arial';
-                        ctx.fillStyle = 'white';
-                        ctx.textAlign = 'right';
-                        ctx.textBaseline = 'top';
-                        ctx.fillText(`Recorded on: ${this.recordingTimestampSubject.value}`, canvas.width - 10, 10);
-                    }
-                };
-            }
-            // Create a new stream with the canvas
-            const canvasStream = canvas.captureStream();
-            const combinedStream = new MediaStream([...this.stream?.getTracks() ?? [], canvasStream.getVideoTracks()[0]]);
-            this.mediaRecorder = new MediaRecorder(combinedStream, { mimeType });
-            this.mediaRecorder.ondataavailable = (event) => {
-                if (event.data && event.data.size > 0) {
-                    this.recordedBlobs.push(event.data);
-                }
-            };
-            this.mediaRecorder.onstop = () => {
-                const superBuffer = new Blob(this.recordedBlobs, { type: mimeType });
-                const url = window.URL.createObjectURL(superBuffer);
-                this.recordedUrlSubject.next(url);
-                this.recordingStateSubject.next(RecordingState.Stopped);
-                this.stopTimer();
-            };
-            this.mediaRecorder.onerror = (event) => {
-                const errorEvent = event; // More specific type if available
-                let message = this.screenRecordingConstant.MEDIA_ERROR;
-                if (errorEvent.error && errorEvent.error.name) {
-                    message += `: ${errorEvent.error.name}`;
-                    if (errorEvent.error.message)
-                        message += ` - ${errorEvent.error.message}`;
-                }
-                this.handleError(message);
-                this.recordingStateSubject.next(RecordingState.Idle);
-                this.stopTimer();
-            };
-            this.mediaRecorder.start(); // Start recording
-            this.recordingStateSubject.next(RecordingState.Recording);
-            this.startTimer();
-        }
-        catch (err) {
-            this.handleError(`Error starting screen recording: ${err.name} - ${err.message}`);
-            this.recordingStateSubject.next(RecordingState.Idle);
-        }
-    }
-    /**
-   * Gets the first supported MIME type for MediaRecorder
-   *
-   * @returns string|null - The supported MIME type or null if none found
-   */
-    getSupportedMimeType() {
-        const mimeTypes = [
-            'video/webm;codecs=vp9,opus',
-            'video/webm;codecs=vp8,opus',
-            'video/webm;codecs=h264,opus',
-            'video/mp4;codecs=h264,aac',
-            'video/webm',
-        ];
-        for (const mimeType of mimeTypes) {
-            if (MediaRecorder.isTypeSupported(mimeType)) {
-                return mimeType;
-            }
-        }
-        return null;
-    }
-    /**
-     * Internal method to stop the recording process
-     *
-     * @private
-     * @returns void
-     */
-    stopRecordingInternal() {
-        if (this.mediaRecorder && (this.recordingStateSubject.value === RecordingState.Recording || this.recordingStateSubject.value === RecordingState.Paused)) {
-            this.mediaRecorder.stop();
-        }
-        this.stream?.getTracks().forEach(track => track.stop());
-        this.stream = null;
-        // State will be updated by onstop handler
-    }
-    /**
-     *
-     * @returns Promise<void>
-     * @throws Error if recording is not in progress
-     */
-    stopRecording() {
-        this.stopRecordingInternal();
-    }
-    /**
-     * Pauses the current recording
-     *
-     * @returns Promise<void>
-     * @throws Error if recording is not in progress
-     */
-    pauseRecording() {
-        if (this.mediaRecorder && this.recordingStateSubject.value === RecordingState.Recording) {
-            this.mediaRecorder.pause();
-            this.recordingStateSubject.next(RecordingState.Paused);
-            this.stopTimer(); // Pauses the timer display
-        }
-    }
-    /**
-     * Resumes a paused recording
-     *
-     * @returns Promise<void>
-     * @throws Error if recording is not paused
-     */
-    resumeRecording() {
-        if (this.mediaRecorder && this.recordingStateSubject.value === RecordingState.Paused) {
-            this.mediaRecorder.resume();
-            this.recordingStateSubject.next(RecordingState.Recording);
-            this.startTimer(this.currentRecordedTime); // Resumes timer display
-        }
-    }
-    /**
-     *
-     * @param fileName
-     */
-    downloadRecording(fileName = 'recording.webm') {
-        const url = this.recordedUrlSubject.value;
-        const timestamp = this.recordingTimestampSubject.value;
-        if (url && timestamp) {
-            // Format the timestamp for filename (remove spaces and special characters)
-            const formattedTimestamp = timestamp.replace(/[^a-zA-Z0-9]/g, '_');
-            // Create filename with timestamp
-            const fileExtension = fileName.split('.').pop() || 'webm';
-            const newFileName = `screen_recording_${formattedTimestamp}.${fileExtension}`;
-            const a = document.createElement('a');
-            a.style.display = 'none';
-            a.href = url;
-            a.download = newFileName;
-            document.body.appendChild(a);
-            a.click();
-            document.body.removeChild(a);
-            // No need to revoke URL here if user might want to play it again.
-            // Revoke on cleanup or new recording.
-        }
-        else {
-            this.handleError(this.screenRecordingConstant.NO_RECORDING_DOWNLOAD);
-        }
-    }
-    /**
-   * Starts the recording timer
-   *
-   * @param startTime - Optional start time for the timer
-   * @private
-   * @returns void
-   */
-    startTimer(startTime = 0) {
-        this.stopTimer(); // Ensure no multiple timers
-        this.currentRecordedTime = startTime;
-        this.recordedTimeSubject.next(this.currentRecordedTime);
-        this.timerSubscription = timer(0, 1000)
-            .pipe(tap(() => {
-            if (this.recordingStateSubject.value === RecordingState.Recording) {
-                this.currentRecordedTime++;
-                this.recordedTimeSubject.next(this.currentRecordedTime);
-            }
-        }), takeWhile(() => this.recordingStateSubject.value === RecordingState.Recording))
-            .subscribe();
-    }
-    /**
-     * Stops the recording timer
-     *
-     * @private
-     * @returns void
-     */
-    stopTimer() {
-        if (this.timerSubscription) {
-            this.timerSubscription.unsubscribe();
-            this.timerSubscription = null;
-        }
-    }
-    /**
-     * Cleans up resources from previous recording
-     *
-     * @private
-     * @returns void
-     */
-    cleanupPreviousRecording() {
-        if (this.recordedUrlSubject.value) {
-            window.URL.revokeObjectURL(this.recordedUrlSubject.value);
-            this.recordedUrlSubject.next(null);
-        }
-        this.recordedBlobs = [];
-        this.currentRecordedTime = 0;
-        this.recordedTimeSubject.next(0);
-        if (this.stream) {
-            this.stream.getTracks().forEach(track => track.stop());
-            this.stream = null;
-        }
-        if (this.mediaRecorder && this.mediaRecorder.state !== this.screenRecordingConstant.INACTIVE) {
-            this.mediaRecorder.stop();
-        }
-        this.mediaRecorder = null;
-    }
-    /**
-   * Resets the recording state to idle
-   *
-   * @returns void
-   */
-    resetToIdle() {
-        this.cleanupPreviousRecording();
-        this.recordingStateSubject.next(RecordingState.Idle);
-        this.errorSubject.next(''); // Clear any previous errors
-    }
-    /**
-   * Handles and broadcasts recording errors
-   *
-   * @private
-   * @param error - The error message to handle
-   * @returns void
-   */
-    handleError(error) {
-        this.errorSubject.next(error);
-    }
-}
-ScreenRecorderService.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderService, deps: [{ token: ScreenRecorderConstants }], target: i0.ɵɵFactoryTarget.Injectable });
-ScreenRecorderService.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderService, providedIn: 'root' });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderService, decorators: [{
-            type: Injectable,
-            args: [{
-                    providedIn: 'root', // Or provide in your module if preferred
-                }]
-        }], ctorParameters: function () { return [{ type: ScreenRecorderConstants }]; } });
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+//import { ScreenRecorderConstants } from '../screen-recorder/screen-recorder-constant';
+class ScreenRecorderService {
+    constructor(screenRecordingConstant) {
+        this.screenRecordingConstant = screenRecordingConstant;
+        this.stream = null;
+        this.mediaRecorder = null;
+        this.recordedBlobs = [];
+        this.currentRecordedTime = 0;
+        this.recordingStateSubject = new BehaviorSubject(RecordingState.Idle);
+        this.recordingState$ = this.recordingStateSubject.asObservable();
+        this.recordedTimeSubject = new BehaviorSubject(0);
+        this.recordedTime$ = this.recordedTimeSubject.asObservable();
+        this.recordedUrlSubject = new BehaviorSubject(null);
+        this.recordedUrl$ = this.recordedUrlSubject.asObservable();
+        this.recordingTimestampSubject = new BehaviorSubject('');
+        this.recordingTimestamp$ = this.recordingTimestampSubject.asObservable();
+        this.errorSubject = new Subject();
+        this.error$ = this.errorSubject.asObservable();
+    }
+    /**
+     * Starts the screen recording with optional audio
+     *
+     * @param options - Configuration options for recording
+     * @param options.audio - Whether to include audio in the recording
+     *
+     * @throws Error if recording is already in progress or if media access is denied
+     * @returns Promise<void>
+     */
+    async startRecording(options) {
+        if (this.recordingStateSubject.value === RecordingState.Recording || this.recordingStateSubject.value === RecordingState.Paused) {
+            this.handleError(this.screenRecordingConstant.RECORDING_IN_PROGRESS_ERROR);
+            return;
+        }
+        this.cleanupPreviousRecording();
+        try {
+            // The browser's native picker handles "specific area" selection (window, tab, screen).
+            const displayStream = await navigator.mediaDevices.getDisplayMedia({
+                video: true
+            });
+            // If audio is enabled, get the audio stream
+            let audioStream = null;
+            if (options.audio) {
+                audioStream = await navigator.mediaDevices.getUserMedia({
+                    audio: {
+                        echoCancellation: true,
+                        noiseSuppression: true,
+                        sampleRate: 44100
+                    }
+                });
+            }
+            // Combine the streams if audio is enabled
+            if (audioStream) {
+                this.stream = new MediaStream([...displayStream.getTracks(), ...audioStream.getTracks()]);
+            }
+            else {
+                this.stream = displayStream;
+            }
+            // Listen for when the user stops sharing via browser UI
+            this.stream.getVideoTracks()[0].onended = () => {
+                if (this.recordingStateSubject.value === RecordingState.Recording || this.recordingStateSubject.value === RecordingState.Paused) {
+                    this.stopRecordingInternal();
+                }
+            };
+            // Handle errors
+            if (!this.stream) {
+                this.handleError(this.screenRecordingConstant.FAILED_TO_GET_DISPLAY_MEDIA_STREAM_ERROR);
+                return;
+            }
+            // Set recording timestamp
+            const now = new Date();
+            const timestamp = now.toLocaleString('en-IN', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: true
+            });
+            this.recordingTimestampSubject.next(timestamp);
+            this.recordedBlobs = [];
+            const mimeType = this.getSupportedMimeType();
+            if (!mimeType) {
+                this.handleError(this.screenRecordingConstant.NO_SUPPORT_MIME);
+                this.stream?.getTracks().forEach(track => track.stop());
+                this.stream = null;
+                return;
+            }
+            // Create a canvas for timestamp overlay
+            const canvas = document.createElement('canvas');
+            const videoTrack = this.stream?.getVideoTracks()[0];
+            if (videoTrack) {
+                const video = document.createElement('video');
+                video.srcObject = this.stream;
+                // Wait for video to load metadata
+                video.onloadedmetadata = () => {
+                    canvas.width = video.videoWidth;
+                    canvas.height = video.videoHeight;
+                    const ctx = canvas.getContext('2d');
+                    if (ctx) {
+                        // Draw video frame
+                        ctx.drawImage(video, 0, 0);
+                        // Draw timestamp
+                        ctx.font = '16px Arial';
+                        ctx.fillStyle = 'white';
+                        ctx.textAlign = 'right';
+                        ctx.textBaseline = 'top';
+                        ctx.fillText(`Recorded on: ${this.recordingTimestampSubject.value}`, canvas.width - 10, 10);
+                    }
+                };
+            }
+            // Create a new stream with the canvas
+            const canvasStream = canvas.captureStream();
+            const combinedStream = new MediaStream([...this.stream?.getTracks() ?? [], canvasStream.getVideoTracks()[0]]);
+            this.mediaRecorder = new MediaRecorder(combinedStream, { mimeType });
+            this.mediaRecorder.ondataavailable = (event) => {
+                if (event.data && event.data.size > 0) {
+                    this.recordedBlobs.push(event.data);
+                }
+            };
+            this.mediaRecorder.onstop = () => {
+                const superBuffer = new Blob(this.recordedBlobs, { type: mimeType });
+                const url = window.URL.createObjectURL(superBuffer);
+                this.recordedUrlSubject.next(url);
+                this.recordingStateSubject.next(RecordingState.Stopped);
+                this.stopTimer();
+            };
+            this.mediaRecorder.onerror = (event) => {
+                const errorEvent = event; // More specific type if available
+                let message = this.screenRecordingConstant.MEDIA_ERROR;
+                if (errorEvent.error && errorEvent.error.name) {
+                    message += `: ${errorEvent.error.name}`;
+                    if (errorEvent.error.message)
+                        message += ` - ${errorEvent.error.message}`;
+                }
+                this.handleError(message);
+                this.recordingStateSubject.next(RecordingState.Idle);
+                this.stopTimer();
+            };
+            this.mediaRecorder.start(); // Start recording
+            this.recordingStateSubject.next(RecordingState.Recording);
+            this.startTimer();
+        }
+        catch (err) {
+            this.handleError(`Error starting screen recording: ${err.name} - ${err.message}`);
+            this.recordingStateSubject.next(RecordingState.Idle);
+        }
+    }
+    /**
+   * Gets the first supported MIME type for MediaRecorder
+   *
+   * @returns string|null - The supported MIME type or null if none found
+   */
+    getSupportedMimeType() {
+        const mimeTypes = [
+            'video/webm;codecs=vp9,opus',
+            'video/webm;codecs=vp8,opus',
+            'video/webm;codecs=h264,opus',
+            'video/mp4;codecs=h264,aac', // MP4 might have broader compatibility but less browser support for recording
+            'video/webm',
+        ];
+        for (const mimeType of mimeTypes) {
+            if (MediaRecorder.isTypeSupported(mimeType)) {
+                return mimeType;
+            }
+        }
+        return null;
+    }
+    /**
+     * Internal method to stop the recording process
+     *
+     * @private
+     * @returns void
+     */
+    stopRecordingInternal() {
+        if (this.mediaRecorder && (this.recordingStateSubject.value === RecordingState.Recording || this.recordingStateSubject.value === RecordingState.Paused)) {
+            this.mediaRecorder.stop();
+        }
+        this.stream?.getTracks().forEach(track => track.stop());
+        this.stream = null;
+        // State will be updated by onstop handler
+    }
+    /**
+     *
+     * @returns Promise<void>
+     * @throws Error if recording is not in progress
+     */
+    stopRecording() {
+        this.stopRecordingInternal();
+    }
+    /**
+     * Pauses the current recording
+     *
+     * @returns Promise<void>
+     * @throws Error if recording is not in progress
+     */
+    pauseRecording() {
+        if (this.mediaRecorder && this.recordingStateSubject.value === RecordingState.Recording) {
+            this.mediaRecorder.pause();
+            this.recordingStateSubject.next(RecordingState.Paused);
+            this.stopTimer(); // Pauses the timer display
+        }
+    }
+    /**
+     * Resumes a paused recording
+     *
+     * @returns Promise<void>
+     * @throws Error if recording is not paused
+     */
+    resumeRecording() {
+        if (this.mediaRecorder && this.recordingStateSubject.value === RecordingState.Paused) {
+            this.mediaRecorder.resume();
+            this.recordingStateSubject.next(RecordingState.Recording);
+            this.startTimer(this.currentRecordedTime); // Resumes timer display
+        }
+    }
+    /**
+     *
+     * @param fileName
+     */
+    downloadRecording(fileName = 'recording.webm') {
+        const url = this.recordedUrlSubject.value;
+        const timestamp = this.recordingTimestampSubject.value;
+        if (url && timestamp) {
+            // Format the timestamp for filename (remove spaces and special characters)
+            const formattedTimestamp = timestamp.replace(/[^a-zA-Z0-9]/g, '_');
+            // Create filename with timestamp
+            const fileExtension = fileName.split('.').pop() || 'webm';
+            const newFileName = `screen_recording_${formattedTimestamp}.${fileExtension}`;
+            const a = document.createElement('a');
+            a.style.display = 'none';
+            a.href = url;
+            a.download = newFileName;
+            document.body.appendChild(a);
+            a.click();
+            document.body.removeChild(a);
+            // No need to revoke URL here if user might want to play it again.
+            // Revoke on cleanup or new recording.
+        }
+        else {
+            this.handleError(this.screenRecordingConstant.NO_RECORDING_DOWNLOAD);
+        }
+    }
+    /**
+   * Starts the recording timer
+   *
+   * @param startTime - Optional start time for the timer
+   * @private
+   * @returns void
+   */
+    startTimer(startTime = 0) {
+        this.stopTimer(); // Ensure no multiple timers
+        this.currentRecordedTime = startTime;
+        this.recordedTimeSubject.next(this.currentRecordedTime);
+        this.timerSubscription = timer(0, 1000)
+            .pipe(tap(() => {
+            if (this.recordingStateSubject.value === RecordingState.Recording) {
+                this.currentRecordedTime++;
+                this.recordedTimeSubject.next(this.currentRecordedTime);
+            }
+        }), takeWhile(() => this.recordingStateSubject.value === RecordingState.Recording))
+            .subscribe();
+    }
+    /**
+     * Stops the recording timer
+     *
+     * @private
+     * @returns void
+     */
+    stopTimer() {
+        if (this.timerSubscription) {
+            this.timerSubscription.unsubscribe();
+            this.timerSubscription = null;
+        }
+    }
+    /**
+     * Cleans up resources from previous recording
+     *
+     * @private
+     * @returns void
+     */
+    cleanupPreviousRecording() {
+        if (this.recordedUrlSubject.value) {
+            window.URL.revokeObjectURL(this.recordedUrlSubject.value);
+            this.recordedUrlSubject.next(null);
+        }
+        this.recordedBlobs = [];
+        this.currentRecordedTime = 0;
+        this.recordedTimeSubject.next(0);
+        if (this.stream) {
+            this.stream.getTracks().forEach(track => track.stop());
+            this.stream = null;
+        }
+        if (this.mediaRecorder && this.mediaRecorder.state !== this.screenRecordingConstant.INACTIVE) {
+            this.mediaRecorder.stop();
+        }
+        this.mediaRecorder = null;
+    }
+    /**
+   * Resets the recording state to idle
+   *
+   * @returns void
+   */
+    resetToIdle() {
+        this.cleanupPreviousRecording();
+        this.recordingStateSubject.next(RecordingState.Idle);
+        this.errorSubject.next(''); // Clear any previous errors
+    }
+    /**
+   * Handles and broadcasts recording errors
+   *
+   * @private
+   * @param error - The error message to handle
+   * @returns void
+   */
+    handleError(error) {
+        this.errorSubject.next(error);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScreenRecorderService, deps: [{ token: ScreenRecorderConstants }], target: i0.ɵɵFactoryTarget.Injectable }); }
+    static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScreenRecorderService, providedIn: 'root' }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: ScreenRecorderService, decorators: [{
+            type: Injectable,
+            args: [{
+                    providedIn: 'root', // Or provide in your module if preferred
+                }]
+        }], ctorParameters: () => [{ type: ScreenRecorderConstants }] });
 
-class ScreenRecorderComponent {
-    set rucInputData(value) {
-        this._options = {
-            position: ScreenRecorderPosition.Bottom,
-            displayFormat: DisplayFormat.Icon,
-            showAudioToggle: true,
-            defaultAudioState: true,
-            downloadFileName: 'screen-recording.webm',
-            icons: { ...this.screenRecordingConstant.DEFAULT_ICONS },
-            showTimer: true,
-            showPauseResume: true,
-            showPlaybackControls: true,
-            showDownloadButton: true,
-            useUTCForTimer: false,
-            allowSpecificAreaSelection: true,
-            accessibilityLabels: { ...this.screenRecordingConstant.DEFAULT_LABELS },
-            ...value,
-        };
-        // Deep merge icons and labels
-        if (value.icons) {
-            this._options.icons = { ...this.screenRecordingConstant.DEFAULT_ICONS, ...value.icons };
-        }
-        if (value.accessibilityLabels) {
-            this._options.accessibilityLabels = { ...this.screenRecordingConstant.DEFAULT_LABELS, ...value.accessibilityLabels };
-        }
-        this.isAudioEnabled = this._options.defaultAudioState ?? true;
-    }
-    get rucInputData() {
-        return this._options;
-    }
-    /**
-     * Checks if recording is currently in progress
-     *
-     * @returns boolean - True if recording is in progress, false otherwise
-     */
-    isRecordingInProgress() {
-        return this.recordingState === RecordingState.Recording;
-    }
-    /**
-     * Gets the appropriate icon for recording based on audio state and settings
-     * @returns string - The icon name to display
-     */
-    getRecordingIcon() {
-        if (this.isAudioEnabled && this.rucInputData.showAudioToggle) {
-            return this.getIcon('recordWithAudio');
-        }
-        return this.getIcon('record');
-    }
-    constructor(screenRecorderService, sanitizer, cdr, screenRecordingConstant) {
-        this.screenRecorderService = screenRecorderService;
-        this.sanitizer = sanitizer;
-        this.cdr = cdr;
-        this.screenRecordingConstant = screenRecordingConstant;
-        this.recordingState = RecordingState.Idle;
-        this.recordedTime = 0;
-        this.formattedTime = '00:00:00';
-        this.safeRecordedUrl = null;
-        this.recordingTimestamp = '';
-        this.errorMessage = null;
-        this.isBrowserSupported = true;
-        this.isAudioEnabled = true;
-        // Expose enums to template
-        this.DisplayFormat = DisplayFormat;
-        this.RecordingState = RecordingState;
-        this.ScreenRecorderPosition = ScreenRecorderPosition;
-        this.subscriptions = new Subscription();
-        // Initialize with default options. The setter will override if an input is provided.
-        if (!this._options) {
-            this.rucInputData = {}; // Trigger setter with empty object to apply defaults
-        }
-    }
-    ngOnInit() {
-        this.subscriptions.add(this.screenRecorderService.recordingState$.subscribe((state) => {
-            this.recordingState = state;
-            if (state === RecordingState.Idle || state === RecordingState.Stopped) {
-                // Ensure audio toggle is reset to default if needed, or based on user action
-            }
-            this.cdr.detectChanges();
-        }));
-        this.subscriptions.add(this.screenRecorderService.recordingTimestamp$.subscribe((timestamp) => {
-            this.recordingTimestamp = timestamp;
-            this.cdr.detectChanges();
-        }));
-        this.subscriptions.add(this.screenRecorderService.recordedTime$.subscribe((time) => {
-            this.recordedTime = time;
-            this.formattedTime = this.formatTimeDisplay(time);
-            this.cdr.detectChanges();
-        }));
-        this.subscriptions.add(this.screenRecorderService.recordedUrl$.subscribe((url) => {
-            this.safeRecordedUrl = url ? this.sanitizer.bypassSecurityTrustUrl(url) : null;
-            this.cdr.detectChanges();
-        }));
-        this.subscriptions.add(this.screenRecorderService.error$.subscribe((error) => {
-            if (error != this.screenRecordingConstant.PERMISSION_DENIED) {
-                this.errorMessage = error;
-            }
-            this.cdr.detectChanges();
-        }));
-    }
-    ngOnDestroy() {
-        if (this.subscriptions) {
-            this.subscriptions.unsubscribe();
-        }
-    }
-    /**
-     * Toggles the recording state between start and stop
-     *
-     * @returns Promise<void>
-     */
-    async toggleRecord() {
-        this.errorMessage = null; // Clear previous errors
-        if (this.recordingState === RecordingState.Idle || this.recordingState === RecordingState.Stopped) {
-            // Set recording timestamp when starting recording
-            const now = new Date();
-            this.recordingTimestamp = now.toLocaleString('en-IN', {
-                year: 'numeric',
-                month: '2-digit',
-                day: '2-digit',
-                hour: '2-digit',
-                minute: '2-digit',
-                hour12: true
-            });
-            await this.screenRecorderService.startRecording({ audio: this.isAudioEnabled });
-        }
-        else {
-            this.screenRecorderService.stopRecording();
-        }
-    }
-    /**
-     * Toggles between pause and resume states during recording
-     *
-     * @returns void
-     */
-    togglePauseResume() {
-        this.errorMessage = null;
-        if (this.recordingState === RecordingState.Recording) {
-            this.screenRecorderService.pauseRecording();
-        }
-        else if (this.recordingState === RecordingState.Paused) {
-            this.screenRecorderService.resumeRecording();
-        }
-    }
-    /**
-     * Checks if recording can be resumed
-     *
-     * @returns boolean - True if recording can be resumed, false otherwise
-     */
-    canResume() {
-        return this.recordingState === RecordingState.Paused;
-    }
-    /**
-     * Downloads the recorded video file
-     *
-     * @returns void
-     */
-    onDownload() {
-        this.errorMessage = null;
-        this.screenRecorderService.downloadRecording(this.rucInputData.downloadFileName);
-    }
-    /**
-     * Checks if recording can be downloaded
-     *
-     * @returns boolean - True if recording can be downloaded, false otherwise
-     */
-    canDownload() {
-        return this.recordingState === RecordingState.Stopped;
-    }
-    /**
-     * Toggles audio recording on/off
-     *
-     * @returns void
-     */
-    toggleAudio() {
-        this.isAudioEnabled = !this.isAudioEnabled;
-        this.cdr.detectChanges();
-    }
-    /**
-     *
-     * @param iconName
-     * @returns
-     */
-    getIcon(iconName) {
-        return this.rucInputData.icons?.[iconName] || this.screenRecordingConstant.DEFAULT_ICONS[iconName];
-    }
-    /**
-     *
-     * @param labelName
-     * @returns
-     */
-    getLabel(labelName) {
-        return this.rucInputData.accessibilityLabels?.[labelName] || this.screenRecordingConstant.DEFAULT_LABELS[labelName];
-    }
-    /**
-     *
-     * @param time - The time in seconds to format
-     * @returns string - Formatted time string (HH:MM:SS)
-     */
-    formatTimeDisplay(time) {
-        const hours = Math.floor(time / 3600);
-        const minutes = Math.floor((time % 3600) / 60);
-        const seconds = time % 60;
-        const pad = (num) => num.toString().padStart(2, '0');
-        if (this.rucInputData && this.rucInputData.useUTCForTimer) {
-            // This is a simple duration format, not a specific UTC time.
-            // For actual UTC time of day, you'd use new Date().toUTCString() or similar.
-            // Assuming timer should show elapsed time formatted as HH:MM:SS.
-            return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-        }
-        return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
-    }
-    // Method to reset the component and service to initial state
-    reset() {
-        this.screenRecorderService.resetToIdle();
-        this.isAudioEnabled = this.rucInputData.defaultAudioState ?? true;
-        this.cdr.detectChanges();
-    }
-}
-ScreenRecorderComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderComponent, deps: [{ token: ScreenRecorderService }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: ScreenRecorderConstants }], target: i0.ɵɵFactoryTarget.Component });
-ScreenRecorderComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "15.2.10", type: ScreenRecorderComponent, selector: "uxp-screen-recorder", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "<div class=\"screen-recorder-controls\" [ngClass]=\"customTheme + ' position-' + (rucInputData.position || ScreenRecorderPosition.Bottom)\"\r\n  *ngIf=\"isBrowserSupported\">\r\n\r\n  <!-- Error Message -->\r\n  <div *ngIf=\"errorMessage\" class=\"recorder-error\">\r\n    {{ errorMessage }}\r\n  </div>\r\n\r\n  <!-- Record/Stop Button -->\r\n  <button\r\n    *ngIf=\"recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped\" (click)=\"toggleRecord()\"\r\n    [attr.aria-label]=\"getLabel('recordButton')\" [attr.aria-pressed]=\"false\" class=\"recorder-button record-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getRecordingIcon() || getIcon('record') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('recordButton')\r\n      }}</ng-container>\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"recordingState === RecordingState.Recording || recordingState === RecordingState.Paused\"\r\n    (click)=\"toggleRecord()\" [attr.aria-label]=\"getLabel('stopButton')\" [attr.aria-pressed]=\"true\"\r\n    class=\"recorder-button stop-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('stop') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('stopButton') }}</ng-container>\r\n  </button>\r\n\r\n  <!-- Pause/Resume Button -->\r\n  <button *ngIf=\"rucInputData.showPauseResume && recordingState === RecordingState.Recording\"\r\n    (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('pauseButton')\" [attr.aria-pressed]=\"false\"\r\n    class=\"recorder-button pause-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('pause') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('pauseButton') }}</ng-container>\r\n  </button>\r\n  <button *ngIf=\"rucInputData.showPauseResume && recordingState === RecordingState.Paused\"\r\n    (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('resumeButton')\" [attr.aria-pressed]=\"true\"\r\n    class=\"recorder-button resume-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('resume') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('resumeButton')\r\n      }}</ng-container>\r\n  </button>\r\n\r\n  <!-- Audio Toggle Button -->\r\n  <button\r\n    *ngIf=\"rucInputData.showAudioToggle && (recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped)\"\r\n    (click)=\"toggleAudio()\" [attr.aria-label]=\"getLabel('audioToggleButton')\" [attr.aria-pressed]=\"isAudioEnabled\"\r\n    class=\"recorder-button audio-toggle-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ isAudioEnabled ? getIcon('audioOn') : getIcon('audioOff') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">\r\n      {{ isAudioEnabled ? screenRecordingConstant.AUDIO_ON : screenRecordingConstant.AUDIO_OFF }}\r\n    </ng-container>\r\n  </button>\r\n\r\n  <!-- Timer -->\r\n  <div\r\n    *ngIf=\"rucInputData.showTimer && (recordingState === RecordingState.Recording || recordingState === RecordingState.Paused)\"\r\n    class=\"recorder-timer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n    {{ formattedTime }}\r\n  </div>\r\n\r\n  <!-- Download Button -->\r\n  <button\r\n    *ngIf=\"rucInputData.showDownloadButton && recordingState === RecordingState.Stopped && safeRecordedUrl\"\r\n    (click)=\"onDownload()\" [attr.aria-label]=\"getLabel('downloadButton')\" class=\"recorder-button download-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('download') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('downloadButton')\r\n      }}</ng-container>\r\n  </button>\r\n\r\n  <!-- Playback Area -->\r\n  <div *ngIf=\"rucInputData.showPlaybackControls && recordingState === RecordingState.Stopped && safeRecordedUrl\"\r\n    class=\"playback-area\">\r\n    <video #videoPlayer [src]=\"safeRecordedUrl\" controls [attr.aria-label]=\"getLabel('playbackVideo')\"></video>\r\n    <div class=\"video-timer-overlay\">\r\n      <span>Recorded on: {{ recordingTimestamp }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Reset Button (optional, good for testing/clearing state) -->\r\n  <button *ngIf=\"recordingState === RecordingState.Stopped && safeRecordedUrl\" (click)=\"reset()\"\r\n    aria-label=\"New Recording\" class=\"recorder-button reset-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">refresh</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">New</ng-container>\r\n  </button>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"!isBrowserSupported\" class=\"recorder-notsupported\" [ngClass]=\"customTheme\">\r\n  {{screenRecordingConstant.NO_SUPPORT}}\r\n</div>", styles: [":host{display:block;font-family:sans-serif}.screen-recorder-controls{display:flex;gap:8px;align-items:center;padding:8px;border-radius:4px;position:relative;z-index:1000}.screen-recorder-controls.position-top-left{margin-top:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-top-right{margin-top:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-bottom-left{margin-bottom:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-bottom-right{margin-bottom:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-left,.screen-recorder-controls.position-right{float:right}.recorder-button{padding:8px 12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.recorder-button:hover{background-color:#e9e9e9}.recorder-button:active{background-color:#d0d0d0}.recorder-button.record-button{color:red}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:20px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}.recorder-timer{padding:0 8px;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}.playback-area{width:100%;max-width:100%;margin-top:1rem;position:relative}.playback-area video{width:100%;height:auto;max-width:100%}.playback-area .video-timer-overlay{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.7);color:#fff;padding:5px 10px;border-radius:4px;font-size:14px;z-index:10}.recorder-error{color:red;padding:8px;border:1px solid red;background-color:#ffe0e0;border-radius:4px;margin-bottom:8px}.recorder-notsupported{padding:10px;background-color:#fff3cd;border:1px solid #ffeeba;color:#856404;border-radius:4px}\n"], dependencies: [{ kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }, { kind: "directive", type: i4.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: ScreenRecorderComponent, decorators: [{
-            type: Component,
-            args: [{ selector: 'uxp-screen-recorder', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"screen-recorder-controls\" [ngClass]=\"customTheme + ' position-' + (rucInputData.position || ScreenRecorderPosition.Bottom)\"\r\n  *ngIf=\"isBrowserSupported\">\r\n\r\n  <!-- Error Message -->\r\n  <div *ngIf=\"errorMessage\" class=\"recorder-error\">\r\n    {{ errorMessage }}\r\n  </div>\r\n\r\n  <!-- Record/Stop Button -->\r\n  <button\r\n    *ngIf=\"recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped\" (click)=\"toggleRecord()\"\r\n    [attr.aria-label]=\"getLabel('recordButton')\" [attr.aria-pressed]=\"false\" class=\"recorder-button record-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getRecordingIcon() || getIcon('record') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('recordButton')\r\n      }}</ng-container>\r\n  </button>\r\n\r\n  <button\r\n    *ngIf=\"recordingState === RecordingState.Recording || recordingState === RecordingState.Paused\"\r\n    (click)=\"toggleRecord()\" [attr.aria-label]=\"getLabel('stopButton')\" [attr.aria-pressed]=\"true\"\r\n    class=\"recorder-button stop-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('stop') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('stopButton') }}</ng-container>\r\n  </button>\r\n\r\n  <!-- Pause/Resume Button -->\r\n  <button *ngIf=\"rucInputData.showPauseResume && recordingState === RecordingState.Recording\"\r\n    (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('pauseButton')\" [attr.aria-pressed]=\"false\"\r\n    class=\"recorder-button pause-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('pause') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('pauseButton') }}</ng-container>\r\n  </button>\r\n  <button *ngIf=\"rucInputData.showPauseResume && recordingState === RecordingState.Paused\"\r\n    (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('resumeButton')\" [attr.aria-pressed]=\"true\"\r\n    class=\"recorder-button resume-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('resume') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('resumeButton')\r\n      }}</ng-container>\r\n  </button>\r\n\r\n  <!-- Audio Toggle Button -->\r\n  <button\r\n    *ngIf=\"rucInputData.showAudioToggle && (recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped)\"\r\n    (click)=\"toggleAudio()\" [attr.aria-label]=\"getLabel('audioToggleButton')\" [attr.aria-pressed]=\"isAudioEnabled\"\r\n    class=\"recorder-button audio-toggle-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ isAudioEnabled ? getIcon('audioOn') : getIcon('audioOff') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">\r\n      {{ isAudioEnabled ? screenRecordingConstant.AUDIO_ON : screenRecordingConstant.AUDIO_OFF }}\r\n    </ng-container>\r\n  </button>\r\n\r\n  <!-- Timer -->\r\n  <div\r\n    *ngIf=\"rucInputData.showTimer && (recordingState === RecordingState.Recording || recordingState === RecordingState.Paused)\"\r\n    class=\"recorder-timer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n    {{ formattedTime }}\r\n  </div>\r\n\r\n  <!-- Download Button -->\r\n  <button\r\n    *ngIf=\"rucInputData.showDownloadButton && recordingState === RecordingState.Stopped && safeRecordedUrl\"\r\n    (click)=\"onDownload()\" [attr.aria-label]=\"getLabel('downloadButton')\" class=\"recorder-button download-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">{{ getIcon('download') }}</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">{{ getLabel('downloadButton')\r\n      }}</ng-container>\r\n  </button>\r\n\r\n  <!-- Playback Area -->\r\n  <div *ngIf=\"rucInputData.showPlaybackControls && recordingState === RecordingState.Stopped && safeRecordedUrl\"\r\n    class=\"playback-area\">\r\n    <video #videoPlayer [src]=\"safeRecordedUrl\" controls [attr.aria-label]=\"getLabel('playbackVideo')\"></video>\r\n    <div class=\"video-timer-overlay\">\r\n      <span>Recorded on: {{ recordingTimestamp }}</span>\r\n    </div>\r\n  </div>\r\n\r\n  <!-- Reset Button (optional, good for testing/clearing state) -->\r\n  <button *ngIf=\"recordingState === RecordingState.Stopped && safeRecordedUrl\" (click)=\"reset()\"\r\n    aria-label=\"New Recording\" class=\"recorder-button reset-button\">\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Icon\">\r\n      <span class=\"material-icons\">refresh</span>\r\n    </ng-container>\r\n    <ng-container *ngIf=\"rucInputData.displayFormat === DisplayFormat.Text\">New</ng-container>\r\n  </button>\r\n\r\n</div>\r\n\r\n<div *ngIf=\"!isBrowserSupported\" class=\"recorder-notsupported\" [ngClass]=\"customTheme\">\r\n  {{screenRecordingConstant.NO_SUPPORT}}\r\n</div>", styles: [":host{display:block;font-family:sans-serif}.screen-recorder-controls{display:flex;gap:8px;align-items:center;padding:8px;border-radius:4px;position:relative;z-index:1000}.screen-recorder-controls.position-top-left{margin-top:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-top-right{margin-top:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-bottom-left{margin-bottom:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-bottom-right{margin-bottom:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-left,.screen-recorder-controls.position-right{float:right}.recorder-button{padding:8px 12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.recorder-button:hover{background-color:#e9e9e9}.recorder-button:active{background-color:#d0d0d0}.recorder-button.record-button{color:red}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:20px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}.recorder-timer{padding:0 8px;font-feature-settings:\"tnum\";font-variant-numeric:tabular-nums}.playback-area{width:100%;max-width:100%;margin-top:1rem;position:relative}.playback-area video{width:100%;height:auto;max-width:100%}.playback-area .video-timer-overlay{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.7);color:#fff;padding:5px 10px;border-radius:4px;font-size:14px;z-index:10}.recorder-error{color:red;padding:8px;border:1px solid red;background-color:#ffe0e0;border-radius:4px;margin-bottom:8px}.recorder-notsupported{padding:10px;background-color:#fff3cd;border:1px solid #ffeeba;color:#856404;border-radius:4px}\n"] }]
-        }], ctorParameters: function () { return [{ type: ScreenRecorderService }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: ScreenRecorderConstants }]; }, propDecorators: { customTheme: [{
-                type: Input
-            }], rucInputData: [{
-                type: Input
-            }], videoPlayer: [{
-                type: ViewChild,
-                args: ['videoPlayer']
+/* eslint-disable @typescript-eslint/no-inferrable-types */
+class RuclibScreenRecorderComponent {
+    set rucInputData(value) {
+        this._options = {
+            position: ScreenRecorderPosition.Bottom,
+            displayFormat: DisplayFormat.Icon,
+            showAudioToggle: true,
+            defaultAudioState: true,
+            downloadFileName: 'screen-recording.webm',
+            icons: { ...this.screenRecordingConstant.DEFAULT_ICONS },
+            showTimer: true,
+            showPauseResume: true,
+            showPlaybackControls: true,
+            showDownloadButton: true,
+            useUTCForTimer: false,
+            allowSpecificAreaSelection: true, // Default to allowing browser's native picker
+            accessibilityLabels: { ...this.screenRecordingConstant.DEFAULT_LABELS },
+            ...value,
+        };
+        // Deep merge icons and labels
+        if (value.icons) {
+            this._options.icons = { ...this.screenRecordingConstant.DEFAULT_ICONS, ...value.icons };
+        }
+        if (value.accessibilityLabels) {
+            this._options.accessibilityLabels = { ...this.screenRecordingConstant.DEFAULT_LABELS, ...value.accessibilityLabels };
+        }
+        this.isAudioEnabled = this._options.defaultAudioState ?? true;
+    }
+    get rucInputData() {
+        return this._options;
+    }
+    /**
+     * Checks if recording is currently in progress
+     *
+     * @returns boolean - True if recording is in progress, false otherwise
+     */
+    isRecordingInProgress() {
+        return this.recordingState === RecordingState.Recording;
+    }
+    /**
+     * Gets the appropriate icon for recording based on audio state and settings
+     * @returns string - The icon name to display
+     */
+    getRecordingIcon() {
+        if (this.isAudioEnabled && this.rucInputData.showAudioToggle) {
+            return this.getIcon('recordWithAudio');
+        }
+        return this.getIcon('record');
+    }
+    constructor(screenRecorderService, sanitizer, cdr, screenRecordingConstant) {
+        this.screenRecorderService = screenRecorderService;
+        this.sanitizer = sanitizer;
+        this.cdr = cdr;
+        this.screenRecordingConstant = screenRecordingConstant;
+        this.recordingState = RecordingState.Idle;
+        this.recordedTime = 0;
+        this.formattedTime = '00:00:00';
+        this.safeRecordedUrl = null;
+        this.recordingTimestamp = '';
+        this.errorMessage = null;
+        this.isBrowserSupported = true;
+        this.isAudioEnabled = true;
+        // Expose enums to template
+        this.DisplayFormat = DisplayFormat;
+        this.RecordingState = RecordingState;
+        this.ScreenRecorderPosition = ScreenRecorderPosition;
+        this.subscriptions = new Subscription();
+        // Initialize with default options. The setter will override if an input is provided.
+        if (!this._options) {
+            this.rucInputData = {}; // Trigger setter with empty object to apply defaults
+        }
+    }
+    ngOnInit() {
+        this.subscriptions.add(this.screenRecorderService.recordingState$.subscribe((state) => {
+            this.recordingState = state;
+            if (state === RecordingState.Idle || state === RecordingState.Stopped) {
+                // Ensure audio toggle is reset to default if needed, or based on user action
+            }
+            this.cdr.detectChanges();
+        }));
+        this.subscriptions.add(this.screenRecorderService.recordingTimestamp$.subscribe((timestamp) => {
+            this.recordingTimestamp = timestamp;
+            this.cdr.detectChanges();
+        }));
+        this.subscriptions.add(this.screenRecorderService.recordedTime$.subscribe((time) => {
+            this.recordedTime = time;
+            this.formattedTime = this.formatTimeDisplay(time);
+            this.cdr.detectChanges();
+        }));
+        this.subscriptions.add(this.screenRecorderService.recordedUrl$.subscribe((url) => {
+            this.safeRecordedUrl = url ? this.sanitizer.bypassSecurityTrustUrl(url) : null;
+            this.cdr.detectChanges();
+        }));
+        this.subscriptions.add(this.screenRecorderService.error$.subscribe((error) => {
+            if (error != this.screenRecordingConstant.PERMISSION_DENIED) {
+                this.errorMessage = error;
+            }
+            this.cdr.detectChanges();
+        }));
+    }
+    ngOnDestroy() {
+        if (this.subscriptions) {
+            this.subscriptions.unsubscribe();
+        }
+    }
+    /**
+     * Toggles the recording state between start and stop
+     *
+     * @returns Promise<void>
+     */
+    async toggleRecord() {
+        this.errorMessage = null; // Clear previous errors
+        if (this.recordingState === RecordingState.Idle || this.recordingState === RecordingState.Stopped) {
+            // Set recording timestamp when starting recording
+            const now = new Date();
+            this.recordingTimestamp = now.toLocaleString('en-IN', {
+                year: 'numeric',
+                month: '2-digit',
+                day: '2-digit',
+                hour: '2-digit',
+                minute: '2-digit',
+                hour12: true
+            });
+            await this.screenRecorderService.startRecording({ audio: this.isAudioEnabled });
+        }
+        else {
+            this.screenRecorderService.stopRecording();
+        }
+    }
+    /**
+     * Toggles between pause and resume states during recording
+     *
+     * @returns void
+     */
+    togglePauseResume() {
+        this.errorMessage = null;
+        if (this.recordingState === RecordingState.Recording) {
+            this.screenRecorderService.pauseRecording();
+        }
+        else if (this.recordingState === RecordingState.Paused) {
+            this.screenRecorderService.resumeRecording();
+        }
+    }
+    /**
+     * Checks if recording can be resumed
+     *
+     * @returns boolean - True if recording can be resumed, false otherwise
+     */
+    canResume() {
+        return this.recordingState === RecordingState.Paused;
+    }
+    /**
+     * Downloads the recorded video file
+     *
+     * @returns void
+     */
+    onDownload() {
+        this.errorMessage = null;
+        this.screenRecorderService.downloadRecording(this.rucInputData.downloadFileName);
+    }
+    /**
+     * Checks if recording can be downloaded
+     *
+     * @returns boolean - True if recording can be downloaded, false otherwise
+     */
+    canDownload() {
+        return this.recordingState === RecordingState.Stopped;
+    }
+    /**
+     * Toggles audio recording on/off
+     *
+     * @returns void
+     */
+    toggleAudio() {
+        this.isAudioEnabled = !this.isAudioEnabled;
+        this.cdr.detectChanges();
+    }
+    /**
+     *
+     * @param iconName
+     * @returns
+     */
+    getIcon(iconName) {
+        return this.rucInputData.icons?.[iconName] || this.screenRecordingConstant.DEFAULT_ICONS[iconName];
+    }
+    /**
+     *
+     * @param labelName
+     * @returns
+     */
+    getLabel(labelName) {
+        return this.rucInputData.accessibilityLabels?.[labelName] || this.screenRecordingConstant.DEFAULT_LABELS[labelName];
+    }
+    /**
+     *
+     * @param time - The time in seconds to format
+     * @returns string - Formatted time string (HH:MM:SS)
+     */
+    formatTimeDisplay(time) {
+        const hours = Math.floor(time / 3600);
+        const minutes = Math.floor((time % 3600) / 60);
+        const seconds = time % 60;
+        const pad = (num) => num.toString().padStart(2, '0');
+        if (this.rucInputData && this.rucInputData.useUTCForTimer) {
+            // This is a simple duration format, not a specific UTC time.
+            // For actual UTC time of day, you'd use new Date().toUTCString() or similar.
+            // Assuming timer should show elapsed time formatted as HH:MM:SS.
+            return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+        }
+        return `${pad(hours)}:${pad(minutes)}:${pad(seconds)}`;
+    }
+    // Method to reset the component and service to initial state
+    reset() {
+        this.screenRecorderService.resetToIdle();
+        this.isAudioEnabled = this.rucInputData.defaultAudioState ?? true;
+        this.cdr.detectChanges();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibScreenRecorderComponent, deps: [{ token: ScreenRecorderService }, { token: i2.DomSanitizer }, { token: i0.ChangeDetectorRef }, { token: ScreenRecorderConstants }], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.9", type: RuclibScreenRecorderComponent, isStandalone: true, selector: "uxp-ruclib-screen-recorder", inputs: { customTheme: "customTheme", rucInputData: "rucInputData" }, viewQueries: [{ propertyName: "videoPlayer", first: true, predicate: ["videoPlayer"], descendants: true }], ngImport: i0, template: "@if (isBrowserSupported) {\r\n  <div class=\"screen-recorder-controls\" [ngClass]=\"customTheme + ' position-' + (rucInputData.position || ScreenRecorderPosition.Bottom)\"\r\n    >\r\n    <!-- Error Message -->\r\n    @if (errorMessage) {\r\n      <div class=\"recorder-error\">\r\n        {{ errorMessage }}\r\n      </div>\r\n    }\r\n    <!-- Record/Stop Button -->\r\n    @if (recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped) {\r\n      <button\r\n        (click)=\"toggleRecord()\"\r\n        [attr.aria-label]=\"getLabel('recordButton')\" [attr.aria-pressed]=\"false\" class=\"recorder-button record-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getRecordingIcon() || getIcon('record') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('recordButton')\r\n          }}\r\n        }\r\n      </button>\r\n    }\r\n    @if (recordingState === RecordingState.Recording || recordingState === RecordingState.Paused) {\r\n      <button\r\n        (click)=\"toggleRecord()\" [attr.aria-label]=\"getLabel('stopButton')\" [attr.aria-pressed]=\"true\"\r\n        class=\"recorder-button stop-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('stop') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('stopButton') }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Pause/Resume Button -->\r\n    @if (rucInputData.showPauseResume && recordingState === RecordingState.Recording) {\r\n      <button\r\n        (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('pauseButton')\" [attr.aria-pressed]=\"false\"\r\n        class=\"recorder-button pause-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('pause') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('pauseButton') }}\r\n        }\r\n      </button>\r\n    }\r\n    @if (rucInputData.showPauseResume && recordingState === RecordingState.Paused) {\r\n      <button\r\n        (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('resumeButton')\" [attr.aria-pressed]=\"true\"\r\n        class=\"recorder-button resume-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('resume') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('resumeButton')\r\n          }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Audio Toggle Button -->\r\n    @if (rucInputData.showAudioToggle && (recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped)) {\r\n      <button\r\n        (click)=\"toggleAudio()\" [attr.aria-label]=\"getLabel('audioToggleButton')\" [attr.aria-pressed]=\"isAudioEnabled\"\r\n        class=\"recorder-button audio-toggle-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ isAudioEnabled ? getIcon('audioOn') : getIcon('audioOff') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ isAudioEnabled ? screenRecordingConstant.AUDIO_ON : screenRecordingConstant.AUDIO_OFF }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Timer -->\r\n    @if (rucInputData.showTimer && (recordingState === RecordingState.Recording || recordingState === RecordingState.Paused)) {\r\n      <div\r\n        class=\"recorder-timer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ formattedTime }}\r\n      </div>\r\n    }\r\n    <!-- Download Button -->\r\n    @if (rucInputData.showDownloadButton && recordingState === RecordingState.Stopped && safeRecordedUrl) {\r\n      <button\r\n        (click)=\"onDownload()\" [attr.aria-label]=\"getLabel('downloadButton')\" class=\"recorder-button download-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('download') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('downloadButton')\r\n          }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Playback Area -->\r\n    @if (rucInputData.showPlaybackControls && recordingState === RecordingState.Stopped && safeRecordedUrl) {\r\n      <div\r\n        class=\"playback-area\">\r\n        <video #videoPlayer [src]=\"safeRecordedUrl\" controls [attr.aria-label]=\"getLabel('playbackVideo')\"></video>\r\n        <div class=\"video-timer-overlay\">\r\n          <span>Recorded on: {{ recordingTimestamp }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Reset Button (optional, good for testing/clearing state) -->\r\n    @if (recordingState === RecordingState.Stopped && safeRecordedUrl) {\r\n      <button (click)=\"reset()\"\r\n        aria-label=\"New Recording\" class=\"recorder-button reset-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">refresh</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          New\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (!isBrowserSupported) {\r\n  <div class=\"recorder-notsupported\" [ngClass]=\"customTheme\">\r\n    {{screenRecordingConstant.NO_SUPPORT}}\r\n  </div>\r\n}\r\n", styles: [":host{display:block;font-family:sans-serif}.screen-recorder-controls{display:flex;gap:8px;align-items:center;padding:8px;border-radius:4px;position:relative;z-index:1000}.screen-recorder-controls.position-top-left{margin-top:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-top-right{margin-top:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-bottom-left{margin-bottom:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-bottom-right{margin-bottom:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-left,.screen-recorder-controls.position-right{float:right}.recorder-button{padding:8px 12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.recorder-button:hover{background-color:#e9e9e9}.recorder-button:active{background-color:#d0d0d0}.recorder-button.record-button{color:red}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:20px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}.recorder-timer{padding:0 8px;font-variant-numeric:tabular-nums}.playback-area{width:100%;max-width:100%;margin-top:1rem;position:relative}.playback-area video{width:100%;height:auto;max-width:100%}.playback-area .video-timer-overlay{position:absolute;top:10px;right:10px;background:#000000b3;color:#fff;padding:5px 10px;border-radius:4px;font-size:14px;z-index:10}.recorder-error{color:red;padding:8px;border:1px solid red;background-color:#ffe0e0;border-radius:4px;margin-bottom:8px}.recorder-notsupported{padding:10px;background-color:#fff3cd;border:1px solid #ffeeba;color:#856404;border-radius:4px}\n"], dependencies: [{ kind: "ngmodule", type: CommonModule }, { kind: "directive", type: i4.NgClass, selector: "[ngClass]", inputs: ["class", "ngClass"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.9", ngImport: i0, type: RuclibScreenRecorderComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'uxp-ruclib-screen-recorder', imports: [CommonModule], template: "@if (isBrowserSupported) {\r\n  <div class=\"screen-recorder-controls\" [ngClass]=\"customTheme + ' position-' + (rucInputData.position || ScreenRecorderPosition.Bottom)\"\r\n    >\r\n    <!-- Error Message -->\r\n    @if (errorMessage) {\r\n      <div class=\"recorder-error\">\r\n        {{ errorMessage }}\r\n      </div>\r\n    }\r\n    <!-- Record/Stop Button -->\r\n    @if (recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped) {\r\n      <button\r\n        (click)=\"toggleRecord()\"\r\n        [attr.aria-label]=\"getLabel('recordButton')\" [attr.aria-pressed]=\"false\" class=\"recorder-button record-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getRecordingIcon() || getIcon('record') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('recordButton')\r\n          }}\r\n        }\r\n      </button>\r\n    }\r\n    @if (recordingState === RecordingState.Recording || recordingState === RecordingState.Paused) {\r\n      <button\r\n        (click)=\"toggleRecord()\" [attr.aria-label]=\"getLabel('stopButton')\" [attr.aria-pressed]=\"true\"\r\n        class=\"recorder-button stop-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('stop') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('stopButton') }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Pause/Resume Button -->\r\n    @if (rucInputData.showPauseResume && recordingState === RecordingState.Recording) {\r\n      <button\r\n        (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('pauseButton')\" [attr.aria-pressed]=\"false\"\r\n        class=\"recorder-button pause-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('pause') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('pauseButton') }}\r\n        }\r\n      </button>\r\n    }\r\n    @if (rucInputData.showPauseResume && recordingState === RecordingState.Paused) {\r\n      <button\r\n        (click)=\"togglePauseResume()\" [attr.aria-label]=\"getLabel('resumeButton')\" [attr.aria-pressed]=\"true\"\r\n        class=\"recorder-button resume-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('resume') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('resumeButton')\r\n          }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Audio Toggle Button -->\r\n    @if (rucInputData.showAudioToggle && (recordingState === RecordingState.Idle || recordingState === RecordingState.Stopped)) {\r\n      <button\r\n        (click)=\"toggleAudio()\" [attr.aria-label]=\"getLabel('audioToggleButton')\" [attr.aria-pressed]=\"isAudioEnabled\"\r\n        class=\"recorder-button audio-toggle-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ isAudioEnabled ? getIcon('audioOn') : getIcon('audioOff') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ isAudioEnabled ? screenRecordingConstant.AUDIO_ON : screenRecordingConstant.AUDIO_OFF }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Timer -->\r\n    @if (rucInputData.showTimer && (recordingState === RecordingState.Recording || recordingState === RecordingState.Paused)) {\r\n      <div\r\n        class=\"recorder-timer\" aria-live=\"polite\" aria-atomic=\"true\">\r\n        {{ formattedTime }}\r\n      </div>\r\n    }\r\n    <!-- Download Button -->\r\n    @if (rucInputData.showDownloadButton && recordingState === RecordingState.Stopped && safeRecordedUrl) {\r\n      <button\r\n        (click)=\"onDownload()\" [attr.aria-label]=\"getLabel('downloadButton')\" class=\"recorder-button download-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">{{ getIcon('download') }}</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          {{ getLabel('downloadButton')\r\n          }}\r\n        }\r\n      </button>\r\n    }\r\n    <!-- Playback Area -->\r\n    @if (rucInputData.showPlaybackControls && recordingState === RecordingState.Stopped && safeRecordedUrl) {\r\n      <div\r\n        class=\"playback-area\">\r\n        <video #videoPlayer [src]=\"safeRecordedUrl\" controls [attr.aria-label]=\"getLabel('playbackVideo')\"></video>\r\n        <div class=\"video-timer-overlay\">\r\n          <span>Recorded on: {{ recordingTimestamp }}</span>\r\n        </div>\r\n      </div>\r\n    }\r\n    <!-- Reset Button (optional, good for testing/clearing state) -->\r\n    @if (recordingState === RecordingState.Stopped && safeRecordedUrl) {\r\n      <button (click)=\"reset()\"\r\n        aria-label=\"New Recording\" class=\"recorder-button reset-button\">\r\n        @if (rucInputData.displayFormat === DisplayFormat.Icon) {\r\n          <span class=\"material-icons\">refresh</span>\r\n        }\r\n        @if (rucInputData.displayFormat === DisplayFormat.Text) {\r\n          New\r\n        }\r\n      </button>\r\n    }\r\n  </div>\r\n}\r\n\r\n@if (!isBrowserSupported) {\r\n  <div class=\"recorder-notsupported\" [ngClass]=\"customTheme\">\r\n    {{screenRecordingConstant.NO_SUPPORT}}\r\n  </div>\r\n}\r\n", styles: [":host{display:block;font-family:sans-serif}.screen-recorder-controls{display:flex;gap:8px;align-items:center;padding:8px;border-radius:4px;position:relative;z-index:1000}.screen-recorder-controls.position-top-left{margin-top:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-top-right{margin-top:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-bottom-left{margin-bottom:10px;margin-left:10px;flex-direction:row}.screen-recorder-controls.position-bottom-right{margin-bottom:10px;margin-right:10px;flex-direction:row}.screen-recorder-controls.position-left,.screen-recorder-controls.position-right{float:right}.recorder-button{padding:8px 12px;border:1px solid #ccc;border-radius:4px;background-color:#fff;cursor:pointer;display:inline-flex;align-items:center;gap:4px}.recorder-button:hover{background-color:#e9e9e9}.recorder-button:active{background-color:#d0d0d0}.recorder-button.record-button{color:red}.material-icons{font-family:Material Icons;font-weight:400;font-style:normal;font-size:20px;display:inline-block;line-height:1;text-transform:none;letter-spacing:normal;word-wrap:normal;white-space:nowrap;direction:ltr;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;-moz-osx-font-smoothing:grayscale;font-feature-settings:\"liga\"}.recorder-timer{padding:0 8px;font-variant-numeric:tabular-nums}.playback-area{width:100%;max-width:100%;margin-top:1rem;position:relative}.playback-area video{width:100%;height:auto;max-width:100%}.playback-area .video-timer-overlay{position:absolute;top:10px;right:10px;background:#000000b3;color:#fff;padding:5px 10px;border-radius:4px;font-size:14px;z-index:10}.recorder-error{color:red;padding:8px;border:1px solid red;background-color:#ffe0e0;border-radius:4px;margin-bottom:8px}.recorder-notsupported{padding:10px;background-color:#fff3cd;border:1px solid #ffeeba;color:#856404;border-radius:4px}\n"] }]
+        }], ctorParameters: () => [{ type: ScreenRecorderService }, { type: i2.DomSanitizer }, { type: i0.ChangeDetectorRef }, { type: ScreenRecorderConstants }], propDecorators: { customTheme: [{
+                type: Input
+            }], rucInputData: [{
+                type: Input
+            }], videoPlayer: [{
+                type: ViewChild,
+                args: ['videoPlayer']
             }] } });
 
-class RuclibScreenRecorderModule {
-}
-RuclibScreenRecorderModule.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibScreenRecorderModule, deps: [], target: i0.ɵɵFactoryTarget.NgModule });
-RuclibScreenRecorderModule.ɵmod = i0.ɵɵngDeclareNgModule({ minVersion: "14.0.0", version: "15.2.10", ngImport: i0, type: RuclibScreenRecorderModule, declarations: [ScreenRecorderComponent], imports: [CommonModule], exports: [ScreenRecorderComponent] });
-RuclibScreenRecorderModule.ɵinj = i0.ɵɵngDeclareInjector({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibScreenRecorderModule, providers: [ScreenRecorderService], imports: [CommonModule] });
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "15.2.10", ngImport: i0, type: RuclibScreenRecorderModule, decorators: [{
-            type: NgModule,
-            args: [{
-                    imports: [CommonModule],
-                    declarations: [ScreenRecorderComponent],
-                    exports: [ScreenRecorderComponent],
-                    providers: [ScreenRecorderService],
-                }]
-        }] });
-
-/**
- * Generated bundle index. Do not edit.
+/**
+ * Generated bundle index. Do not edit.
  */
 
-export { DisplayFormat, RecordingState, RuclibScreenRecorderModule, ScreenRecorderComponent, ScreenRecorderPosition, ScreenRecorderService };
+export { DisplayFormat, RecordingState, RuclibScreenRecorderComponent, ScreenRecorderPosition, ScreenRecorderService };
 //# sourceMappingURL=ruc-lib-screen-recorder.mjs.map