npm package: @scaleflex/widget-progress-panel
Description: A progress panel for Scaleflex, handles upload, download, video transformation operation simultaneously
Latest version: 4.8.13

# `@scaleflex/widget-progress-panel`

[![Plugins][plugins-image]](#plugins)
[![Website][filerobot-image]][sfx-url]
[![Version][filerobot-version]][version-url]
[![Scaleflex team][made-by-image]][sfx-url]
[![License][license-image]][license-url]
[![CodeSandbox][codeSandbox-image]][codeSandbox-url]

<div align='center'>
<img title="Scaleflex Widget logo" alt="Scaleflex Widget logo" src="https://assets.scaleflex.com/Corporate+Branding/%5B2025%5D+ALL+LOGOS+%2B+ICONS/SCALEFLEX/VXP+logo/Horizontal+White/VXP+logo+WHITE.png?vh=663932" width="140"/>
</div>

A panel showing the progress of uploading, downloading, transforming with possibility to cancel/retry/show location in [Scaleflex Media Asset Widget](https://www.npmjs.com/package/@scaleflex/widget-core).

## Usage

### NPM

```bash
npm install --save @scaleflex/widget-progress-panel
```

### YARN

```bash
yarn add @scaleflex/widget-progress-panel
```

then

```js
import ProgressPanel from '@scaleflex/widget-progress-panel'
...
...
...
scaleflexWidget.use(ProgressPanel, propertiesObject)
```

### From CDN

The plugin from CDN is found inside `Scaleflex` global object `Scaleflex.ProgressPanel`

```js
const ProgressPanel = window.ScaleflexWidget.ProgressPanel
...
...
...
scaleflexWidget.use(ProgressPanel, propertiesObject)
```

> If you are using [`@scaleflex/widget-explorer`](../@scaleflex/widget-explorer/#scaleflexwidgetexplorer) plugin you don't need to manually import this plugin as it is being imported automatically there with its styles and the default id `ProgressPanel`.

### Plugin's styles

```js
import "@scaleflex/widget-core/dist/style.css";
```

or if you prefer the minified version

```js
import "@scaleflex/widget-core/dist/style.min.css";
```

> The plugin's css file should be imported after the [Core's css file](../@scaleflex/widget-core/#modules-styles) for having the styles shown correctly.

### Example

```js
  const ScaleflexWidget = window.ScaleflexWidget;
  const demoContainer = "scaleflex-tests-v5a";
  const demoSecurityTemplateId = "......";

  const widgetInstance = ScaleflexWidget.Core({
    securityTemplateId: demoSecurityTemplateId,
    container: demoContainer,
    dev: false, // optional, default: false
   });

  const Explorer = ScaleflexWidget.Explorer;
  const ProgressPanel = ScaleflexWidget.ProgressPanel
  const XHRUpload = ScaleflexWidget.XHRUpload

  widgetInstance
    .use(Explorer, { target: "#scaleflex-widget", inline: true })
    .use(ProgressPanel, {
      target: '#scaleflex-widget-progress-panel',
    });
    .use(XHRUpload)
```

## Properties

### `target`

<u>Type:</u> `string`

<u>Default:</u> `undefined`

The selector (ID, Class) of an HTML element or an existed HTML element that would be used for displaying the plugin.

> **NOTE** If no target provided, it wll show inside [Explorer](../@scaleflex/widget-explorer).

### `locale`

<u>Type:</u> `object`.

<u>Default:</u>

```js
strings: {
  progressPanelProcessingHeaderLabel: 'Processing',
  progressPanelProcessedHeaderLabel: 'Processed',
  progressPanelHeaderItemsText: {
    0: 'item',
    1: 'items'
  },
  progressPanelEtaLeftText: '%{time} left',
  progressPanelActivityCompleteLabel: 'Uploaded',
  progressPanelActivityErrorLabel: 'Uploading failed',
  progressPanelActivityProgressLabel: 'Uploading',
  progressPanelCompleteActionTitle: 'Show file location',
  progressPanelVideoActivityCompleteActionTitle: 'Show link',
  progressPanelErrorActionTitle: 'Retry',
  progressPanelProgressActionTitle: 'Cancel',
  progressPanelPauseActionTitle: 'Pause',
  progressPanelResumeActionTitle: 'Resume',
  progressPanelAssetProcessingTitle: 'Asset is being processed',
  uploadDelayedHint: 'It takes few seconds to complete processing, after you can use your uploaded assets.',
  progressPanelArchiveCompleteLabel: 'Completed archive',
  progressPanelArchiveFailedLabel: 'Failed archive',
  progressPanelPreparingArchiveLabel: 'Preparing archive',
  progressPanelDownloadingArchiveLabel: 'Downloading archive',
  progressPanelDownloadingActivityLabel: 'Downloading',
  progressPanelDownloadingActivityErrorLabel: 'Downloading failed',
  progressPanelDownloadingActivityCompleteLabel: 'Downloaded',
  progressPanelTranscodeActivityLabel: 'Transcoding',
  progressPanelTranscodedActivityLabel: 'Transcoded',
  progressPanelTranscodeErrorActivityLabel: 'Transcoding failed',
  progressPanelCompressActivityLabel: 'Compressing',
  progressPanelCompressedActivityLabel: 'Compressed',
  progressPanelCompressErrorActivityLabel: 'Compressing failed',
  progressPanelConvertActivityLabel: 'Converting',
  progressPanelConvertedActivityLabel: 'Converted',
  progressPanelConvertErrorActivityLabel: 'Converting failed',
  progressPanelPreparingCsvActivityLabel: 'Preparing CSV',
  progressPanelProcessingCsvActivityLabel: 'Processing CSV',
  progressPanelProcessingCsvActivityErrorLabel: 'Processing CSV failed',
  progressPanelProcessedCsvActivityLabel: 'Processed CSV'
}
```

Customizing some of the translations or the language's strings and replace the default locale.

## Events

The progress panel plugin emits different events that you could subscribe to or add your handler to be called with the provided arguments passed while emitting/firing the event, the events are listed below with examples show the parameters for handler:

### `progressPanel-minimize`

Emitted when progress panel is minimized.

- `value`: minimize value true/false.

### `progressPanel-toggle`

Emitted when progress panel is opened/closed.

- `value`: toggle value true/false.

### `activities-reset`

Emitted when progress panel is closed.

### `activity-progress`

Emitted when activity is on progress.

`params: object`:

- `id`: activity id.
- `percentage`: activity progress percentage.

### `activity-update`

Emitted when activity is updated.

`params: object`:

- `id`: activity id.
- `progress`: activity progress details.

### `activity-action`

Emitted when activity action button is clicked.

`params: object`:

- `id`: activity id.
- `activity`: whole activity details.
- `activityActionType`: action type(locate, play, pause, embed).

### `activity-error`

Emitted when activity has an error.

`params: object`:

- `id`: activity id.
- `error`: error details.

### `activity-retry`

Emitted when activity is retried.

`params: object`:

- `id`: activity id.

### `activity-cancel`

Emitted when activity is cancelled.

`params: object`:

- `id`: activity id.

<!-- Variables -->

[npm-url]: https://www.npmjs.com/package/@scaleflex/widget-progress-panel
[license-url]: https://opensource.org/licenses/MIT
[sfx-url]: https://www.scaleflex.com/
[version-url]: https://www.npmjs.com/package/@scaleflex/widget-progress-panel
[codeSandbox-url]: https://codesandbox.io/p/sandbox/scalelfex-widget-v4-sandbox-dtp6l3?file=%2Fsrc%2Findex.js
[npm-image]: https://img.shields.io/npm/v/@telus/remark-config.svg?style=for-the-badge&logo=npm
[license-image]: https://img.shields.io/badge/license-MIT-blue.svg?style=for-the-badge
[made-by-image]: https://img.shields.io/badge/%3C%2F%3E%20with%20%E2%99%A5%20by-the%20Scaleflex%20team-6986fa.svg?style=for-the-badge
[plugins-image]: https://img.shields.io/static/v1?label=Scaleflex&message=Plugins&color=yellow&style=for-the-badge
[filerobot-image]: https://img.shields.io/static/v1?label=Scaleflex&message=website&color=orange&style=for-the-badge
[filerobot-version]: https://img.shields.io/npm/v/@scaleflex/widget-progress-panel?label=Version&style=for-the-badge&logo=npm
[codeSandbox-image]: https://img.shields.io/badge/CodeSandbox-black?style=for-the-badge&logo=CodeSandbox