@ruc-lib/screen-recorder 3.1.0 → 3.1.1

package/fesm2022/ruc-lib-screen-recorder.mjs

@@ -1,636 +0,0 @@
-import * as i0 from '@angular/core';
-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";
-})(RecordingState || (RecordingState = {}));
-
-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: () => [] });
-
-/* 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 }] });
-
-/* 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']
-            }] } });
-
-/**
- * Generated bundle index. Do not edit.
- */
-
-export { DisplayFormat, RecordingState, RuclibScreenRecorderComponent, ScreenRecorderPosition, ScreenRecorderService };
-//# sourceMappingURL=ruc-lib-screen-recorder.mjs.map