@filerobot/progress-panel

A panel showing the progress of uploading, downloading, transforming with possibility to cancel/retry/show location in Filerobot Media Asset Widget.

Usage

NPM

npm install --save @filerobot/progress-panel

YARN

yarn add @filerobot/progress-panel

then

import ProgressPanel from '@filerobot/progress-panel'
...
...
...
filerobot.use(ProgressPanel, propertiesObject)

From CDN

The plugin from CDN is found inside Filerobot global object Filerobot.ProgressPanel

const ProgressPanel = window.Filerobot.ProgressPanel
...
...
...
filerobot.use(ProgressPanel, propertiesObject)

If you are using @filerobot/explorer 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

import "@filerobot/core/dist/style.css";

or if you prefer the minified version

import "@filerobot/core/dist/style.min.css";

The plugin's css file should be imported after the Core's css file for having the styles shown correctly.

Example

  const Filerobot = window.Filerobot;
  const demoContainer = "scaleflex-tests-v5a";
  const demoSecurityTemplateId = "......";

  const filerobot = Filerobot.Core({
    securityTemplateId: demoSecurityTemplateId,
    container: demoContainer,
    dev: false, // optional, default: false
   });

  const Explorer = Filerobot.Explorer;
  const ProgressPanel = Filerobot.ProgressPanel
  const XHRUpload = Filerobot.XHRUpload

  filerobot
    .use(Explorer, { target: "#filerobot-widget", inline: true })
    .use(ProgressPanel, {
      target: '#filerobot-progress-panel',
    });
    .use(XHRUpload)

Properties

target

Type: string

Default: 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.

locale

Type: object.

Default:

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.