npm package: @ruc-lib/screen-recorder
Description: This library provides a feature to record and download the screen with and without Audio
Latest version: 4.0.0

# ruclib-screen-recorder

This library provides a feature to record and download the screen with and without Audio

## RUC Library Installation Guide

Users can easily install the RUC (Ruxptest Library) from npm. Additionally, they can also choose to install individual components based on their requirements.
Install RUC Library.

To install the entire RUC library:

`npm install @uxpractice/ruc-lib` 

### Install Individual Component

If you only need the ScreenRecorder component:

**For Angular 15:**
```bash
npm install @ruc-lib/screen-recorder@3.2.0 @angular/material@^15.0.0 @angular/cdk@^15.0.0
```

**For Angular 16:**
```bash
npm install @ruc-lib/screen-recorder@3.2.0 @angular/material@^16.0.0 @angular/cdk@^16.0.0
```

**For Angular 17:**
```bash
npm install @ruc-lib/screen-recorder@4.0.0 @angular/material@^17.0.0 @angular/cdk@^17.0.0
```

**For Angular 18:**
```bash
npm install @ruc-lib/screen-recorder@4.0.0 @angular/material@^18.0.0 @angular/cdk@^18.0.0
```

**For Angular 19:**
```bash
npm install @ruc-lib/screen-recorder@4.0.0 @angular/material@^19.0.0 @angular/cdk@^19.0.0
```

**For Angular 20:**
```bash
npm install @ruc-lib/screen-recorder@4.0.0
```

> **Note:** When installing in Angular 15-19 apps, you must specify the matching `@angular/material` and `@angular/cdk` versions to avoid peer dependency conflicts. Angular 20 will automatically use the correct versions.

## Version Compatibility
 
Please ensure you install the correct version of `@ruc-lib/screen-recorder` based on your Angular version.
 
| Angular Version    | Compatible `@ruc-lib/screen-recorder` Version     |
|--------------------|---------------------------------------------------|
| 15.x.x             | `npm install @ruc-lib/screen-recorder@^3.2.0`     |
| 16.x.x             | `npm install @ruc-lib/screen-recorder@^3.2.0`     |
| 17.x.x             | `npm install @ruc-lib/screen-recorder@^4.0.0`     |
| 18.x.x             | `npm install @ruc-lib/screen-recorder@^4.0.0`     |
| 19.x.x             | `npm install @ruc-lib/screen-recorder@^4.0.0`     |
| 20.x.x             | `npm install @ruc-lib/screen-recorder@^4.0.0`     |

## Usage

To use the screen recorder component in your project, follow the integration guidelines provided in the documentation. 

## Using Selector

1.	Import `RuclibScreenRecorderModule` from `@ruclib/screen-recorder` into `component.ts` file. 
2.	Use the selector in your HTML file.

```
<uxp-ruclib-screen-recorder [rucInputData]="recorderConfig" [customTheme]="'custom-theme'"></uxp-ruclib-screen-recorder>

```


### Component Inputs

| Input          | Type                    | Description                                      |
|----------------|-------------------------|--------------------------------------------------|
| `rucInputData` | `ScreenRecorderOptions` | The main configuration object for the component. |
| `customTheme`  | `string`                | An optional CSS class for custom theming.        |


### `ScreenRecorderOptions`
This is the main configuration object for the Screen recording.

| Property                      | Type                             | Description                                          |
|-------------------------------|----------------------------------|------------------------------------------------------|
| `position`                    | `'left' \| 'right'` (Optional)   | Position of icon                                     |
| `displayFormat`               | `'icon' \| 'text'`               | Screen option format like - icpn and text            |
| `defaultAudioState`           | `boolean`           (Optional)   | true for audio on, false for audio off               |
| `showAudioToggle`             | `boolean`           (Optional)   | If `true`, displays audio option                     |
| `icons`                       | `ScreenRecorderIcons` (Optional) | For custom icons (e.g., CSS classes for icon fonts)  |
| `showTimer`                   | `boolean`            (Optional)  | Show timer                                           |
| `categoryLabelStyle`          | `'basic' \| 'widget'` (Optional) | The display style for category labels.               |
| `showCategoryLabels`          | `boolean`            (Optional)  | If `true`, displays the category labels.             |
| `showPauseResume`             | `boolean`                        | Show pause resume option.                            |
| `downloadFileName`            | `string`             (Optional)  | Download file name                                   |
| `showPlaybackControls`        | `boolean`            (Optional)  | To show/hide the video player preview                |
| `showDownloadButton`          | `boolean`                        | To show download button                              |
| `useUTCForTimer`              | `boolean`            (Optional)  | If `true`, displays the UTC time labels.             |
| `allowSpecificAreaSelection`  | `boolean`            (Optional)  | Record specific screen                               |
| `accessibilityLabels`         | `accessibilityLabels`(Optional)  | Accessibility related texts                          |


### `ScreenRecorderIcons`
This values defines the configuration for screen recorder icons.

| Property             | Type      | Description                                                        |
|----------------------|-----------|--------------------------------------------------------------------|
| `record`             | `string`  | Default: '●' (filled circle) or a material icon class              |
| `recordWithAudio`    | `string`  | Alternative if specific icon for "record with audio" is needed     |
| `recordWithoutAudio` | `number`  | Alternative if specific icon for "record without audio" is needed  |
| `stop`               | `string`  | Default: '■ ' (filled square) or a material icon class             | 
| `pause`              | `string`  | Default: '❚❚' or a material icon class                              |  
| `resume`             | `string`  | Default: '►' (play symbol) or a material icon class                |
| `play`               | `string`  | Default: '►' (play symbol) or a material icon class                |
| `download`           | `number`  | Default: '💾' (floppy disk) or a material icon class               |
| `audioOn`            | `string`  | Default: '🔊' (speaker high volume) or a material icon class       |
| `audioOff`           | `string`  | Default: '🔇' (muted speaker) or a material icon class             |

### `accessibilityLabels`
This values defines the configuration for screen recorder accessibilityLabels.

| Property           | Type      | Description     |
|--------------------|-----------|-----------------|
| `recordButton`     | `string`  | label text      |
| `stopButton`       | `string`  | label text      |
| `pauseButton`      | `number`  | label text      |
| `resumeButton`     | `string`  | label text      | 
| `audioToggleButton`| `string`  | label text      |  
| `downloadButton`   | `string`  | label text      |
| `playbackVideo`    | `string`  | label text      |

## Example Configuration

Here's an example of how to configure the Metered Progress Bar in your component's TypeScript file.

```typescript
import { Component } from '@angular/core';
import { ScreenRecorderOptions, ScreenRecorderPosition, DisplayFormat } from '@ruclib/screen-recorder'; // Adjust import path


@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  recorderOptions: {
    position: 'Left',
    displayFormat: 'icon',
    showAudioToggle: true,
    defaultAudioState: true,
    downloadFileName: 'screen-recording.webm',
    showTimer: true,
    showPauseResume: true,
    showPlaybackControls: true,
    showDownloadButton: true,
    useUTCForTimer: false,
    allowSpecificAreaSelection: true,
    icons: {
      record: 'fiber_manual_record',
      stop: 'stop',
      pause: 'pause',
      resume: 'play_arrow',
      play: 'play_circle_filled',
      download: 'download',
      audioOn: 'volume_up',
      audioOff: 'volume_off',
    },
    accessibilityLabels: {
      recordButton: 'Start Recording',
      stopButton: 'Stop Recording',
      pauseButton: 'Pause Recording',
      resumeButton: 'Resume Recording',
      audioToggleButton: 'Toggle Audio',
      downloadButton: 'Download Recording',
      playbackVideo: 'Screen Recording Playback',
    },
  };
}
```

> ⚠️ **IMPORTANT: Custom Theme Usage in Angular Material**

When implementing **custom themes**, such as:

```scss
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
}

// You must also include the typography mixin to ensure text styles are applied correctly as shown below:
.custom-theme-1 {
  @include angular-material-theme($custom-theme);
  @include mat.typography-level($theme-custom-typography-name, body-1);
}
```

## Contribution

Contributions are welcome! Feel free to open issues or pull requests for any enhancements or fixes.

## Acknowledgements

Thank you for choosing the Screen Recorder Component Library. If you have any feedback or suggestions, please let us know!