bitmovin-player-ui - npm Package Compare versions

Comparing version 2.0.3 to 2.0.4

CHANGELOG.md

@@ -7,2 +7,7 @@ # Change Log
 
+## [2.0.4]
+
+### Added
+- Add `ErrorMessageOverlayConfig#messages` to translate and customize error messages in the `ErrorMessageOverlay`
+
 ## [2.0.3]
@@ -88,2 +93,3 @@
 
+[2.0.4]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.0.3...v2.0.4
 [2.0.3]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.0.2...v2.0.3
@@ -90,0 +96,0 @@ [2.0.2]: https://github.com/bitmovin/bitmovin-player-ui/compare/v2.0.1...v2.0.2

dist/js/framework/components/errormessageoverlay.d.ts

 import { ContainerConfig, Container } from './container';
 import { UIInstanceManager } from '../uimanager';
+import ErrorEvent = bitmovin.player.ErrorEvent;
+export interface ErrorMessageTranslator {
+    (error: ErrorEvent): string;
+}
+export interface ErrorMessageMap {
+    [code: number]: string | ErrorMessageTranslator;
+}
 /**
+ * Configuration interface for the {@link ErrorMessageOverlay}.
+ */
+export interface ErrorMessageOverlayConfig extends ContainerConfig {
+    /**
+     * Allows overwriting of the error messages displayed in the overlay for customization and localization.
+     * This is either a function that receives any {@link ErrorEvent} as parameter and translates error messages,
+     * or a map of error codes that overwrites specific error messages with a plain string or a function that
+     * receives the {@link ErrorEvent} as parameter and returns a customized string.
+     * The translation functions can be used to extract data (e.g. parameters) from the original error message.
+     *
+     * Example 1 (catch-all translation function):
+     * <code>
+     * errorMessageOverlayConfig = {
+     *   messages: function(error) {
+     *     switch (error.code) {
+     *       // Overwrite error 3000 'Unknown error'
+     *       case 3000:
+     *         return 'Houston, we have a problem'
+     *
+     *       // Transform error 3001 'Unsupported manifest format' to uppercase
+     *       case 3001:
+     *         return error.message.toUpperCase();
+     *
+     *       // Customize error 3006 'Could not load manifest, got HTTP status code XXX'
+     *       case 3006:
+     *         var statusCode = error.message.substring(46);
+     *         return 'Manifest loading failed with HTTP error ' + statusCode;
+     *     }
+     *     // Return unmodified error message for all other errors
+     *     return error.message;
+     *   }
+     * };
+     * </code>
+     *
+     * Example 2 (translating specific errors):
+     * <code>
+     * errorMessageOverlayConfig = {
+     *   messages: {
+     *     // Overwrite error 3000 'Unknown error'
+     *     3000: 'Houston, we have a problem',
+     *
+     *     // Transform error 3001 'Unsupported manifest format' to uppercase
+     *     3001: function(error) {
+     *       return error.message.toUpperCase();
+     *     },
+     *
+     *     // Customize error 3006 'Could not load manifest, got HTTP status code XXX'
+     *     3006: function(error) {
+     *       var statusCode = error.message.substring(46);
+     *       return 'Manifest loading failed with HTTP error ' + statusCode;
+     *     }
+     *   }
+     * };
+     * </code>
+     */
+    messages?: ErrorMessageMap | ErrorMessageTranslator;
+}
+/**
  * Overlays the player and displays error messages.
  */
-export declare class ErrorMessageOverlay extends Container<ContainerConfig> {
+export declare class ErrorMessageOverlay extends Container<ErrorMessageOverlayConfig> {
     private errorLabel;
     private tvNoiseBackground;
-    constructor(config?: ContainerConfig);
+    constructor(config?: ErrorMessageOverlayConfig);
     configure(player: bitmovin.player.Player, uimanager: UIInstanceManager): void;
 }

dist/js/framework/components/errormessageoverlay.js

@@ -30,4 +30,24 @@ "use strict";
         _super.prototype.configure.call(this, player, uimanager);
+        var config = this.getConfig();
         player.addEventHandler(player.EVENT.ON_ERROR, function (event) {
-            _this.errorLabel.setText(event.message);
+            var message = event.message;
+            // Process message translations
+            if (config.messages) {
+                if (typeof config.messages === 'function') {
+                    // Translation function for all errors
+                    message = config.messages(event);
+                }
+                else if (config.messages[event.code]) {
+                    // It's not a translation function, so it must be a map of strings or translation functions
+                    var customMessage = config.messages[event.code];
+                    if (typeof customMessage === 'string') {
+                        message = customMessage;
+                    }
+                    else {
+                        // The message is a translation function, so we call it
+                        message = customMessage(event);
+                    }
+                }
+            }
+            _this.errorLabel.setText(message);
             _this.tvNoiseBackground.start();
@@ -34,0 +54,0 @@ _this.show();

dist/js/framework/timeout.d.ts

@@ -18,4 +18,5 @@ /**
      * Starts the timeout and calls the callback when the timeout delay has passed.
+     * @returns {Timeout} the current timeout (so the start call can be chained to the constructor)
      */
-    start(): void;
+    start(): this;
     /**
@@ -22,0 +23,0 @@ * Clears the timeout. The callback will not be called if clear is called during the timeout.

dist/js/framework/timeout.js

@@ -22,5 +22,7 @@ "use strict";
      * Starts the timeout and calls the callback when the timeout delay has passed.
+     * @returns {Timeout} the current timeout (so the start call can be chained to the constructor)
      */
     Timeout.prototype.start = function () {
         this.reset();
+        return this;
     };
@@ -27,0 +29,0 @@ /**

package.json

 {
   "name": "bitmovin-player-ui",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "Bitmovin Player UI Framework",
@@ -5,0 +5,0 @@ "main": "dist/js/bitmovinplayer-ui.js",

src/ts/components/errormessageoverlay.ts

@@ -8,6 +8,73 @@ import {ContainerConfig, Container} from './container';
 
+export interface ErrorMessageTranslator {
+  (error: ErrorEvent): string;
+}
+
+export interface ErrorMessageMap {
+  [code: number]: string | ErrorMessageTranslator;
+}
+
 /**
+ * Configuration interface for the {@link ErrorMessageOverlay}.
+ */
+export interface ErrorMessageOverlayConfig extends ContainerConfig {
+  /**
+   * Allows overwriting of the error messages displayed in the overlay for customization and localization.
+   * This is either a function that receives any {@link ErrorEvent} as parameter and translates error messages,
+   * or a map of error codes that overwrites specific error messages with a plain string or a function that
+   * receives the {@link ErrorEvent} as parameter and returns a customized string.
+   * The translation functions can be used to extract data (e.g. parameters) from the original error message.
+   *
+   * Example 1 (catch-all translation function):
+   * <code>
+   * errorMessageOverlayConfig = {
+   *   messages: function(error) {
+   *     switch (error.code) {
+   *       // Overwrite error 3000 'Unknown error'
+   *       case 3000:
+   *         return 'Houston, we have a problem'
+   *
+   *       // Transform error 3001 'Unsupported manifest format' to uppercase
+   *       case 3001:
+   *         return error.message.toUpperCase();
+   *
+   *       // Customize error 3006 'Could not load manifest, got HTTP status code XXX'
+   *       case 3006:
+   *         var statusCode = error.message.substring(46);
+   *         return 'Manifest loading failed with HTTP error ' + statusCode;
+   *     }
+   *     // Return unmodified error message for all other errors
+   *     return error.message;
+   *   }
+   * };
+   * </code>
+   *
+   * Example 2 (translating specific errors):
+   * <code>
+   * errorMessageOverlayConfig = {
+   *   messages: {
+   *     // Overwrite error 3000 'Unknown error'
+   *     3000: 'Houston, we have a problem',
+   *
+   *     // Transform error 3001 'Unsupported manifest format' to uppercase
+   *     3001: function(error) {
+   *       return error.message.toUpperCase();
+   *     },
+   *
+   *     // Customize error 3006 'Could not load manifest, got HTTP status code XXX'
+   *     3006: function(error) {
+   *       var statusCode = error.message.substring(46);
+   *       return 'Manifest loading failed with HTTP error ' + statusCode;
+   *     }
+   *   }
+   * };
+   * </code>
+   */
+  messages?: ErrorMessageMap | ErrorMessageTranslator;
+}
+
+/**
  * Overlays the player and displays error messages.
  */
-export class ErrorMessageOverlay extends Container<ContainerConfig> {
+export class ErrorMessageOverlay extends Container<ErrorMessageOverlayConfig> {
 
@@ -17,3 +84,3 @@ private errorLabel: Label<LabelConfig>;
 
-  constructor(config: ContainerConfig = {}) {
+  constructor(config: ErrorMessageOverlayConfig = {}) {
     super(config);
@@ -34,4 +101,26 @@
 
+    let config = <ErrorMessageOverlayConfig>this.getConfig();
+
     player.addEventHandler(player.EVENT.ON_ERROR, (event: ErrorEvent) => {
-      this.errorLabel.setText(event.message);
+      let message = event.message;
+
+      // Process message translations
+      if (config.messages) {
+        if (typeof config.messages === 'function') {
+          // Translation function for all errors
+          message = config.messages(event);
+        } else if (config.messages[event.code]) {
+          // It's not a translation function, so it must be a map of strings or translation functions
+          let customMessage = config.messages[event.code];
+
+          if (typeof customMessage === 'string') {
+            message = customMessage;
+          } else {
+            // The message is a translation function, so we call it
+            message = customMessage(event);
+          }
+        }
+      }
+
+      this.errorLabel.setText(message);
       this.tvNoiseBackground.start();
@@ -38,0 +127,0 @@ this.show();

src/ts/player-config.d.ts

@@ -595,3 +595,3 @@ declare namespace bitmovin {
       /**
-       * Defines when the ad shall be played.
+       * Defines when the ad shall be played. Supports the same values as {@link AdvertisingConfig#offset}.
        */
@@ -605,3 +605,3 @@ offset: string;
 
-    interface AdvertisingConfig extends AdvertisingScheduleItem {
+    interface AdvertisingConfig {
       /**
@@ -624,3 +624,3 @@ * Mandatory. Specifies which ad client to use, like e.g., VAST or VPAID.
        */
-      skipMessage?: SkipMessage;
+      skipmessage?: SkipMessage;
       /**
@@ -632,2 +632,20 @@ * Specifies that cookies are send along with the ad request. The server needs to explicitly accept
       /**
+       * Defines the path to an ad manifest. Can be used to schedule a single ad without setting the {@link #schedule}
+       * property, that will be played at the time defined in the {@link #offset} property.
+       * It will be played as pre-roll add by default if no offset is set, or when as schedule with additional ads
+       * is provided.
+       */
+      tag?: string;
+      /**
+       * Defines when the ad shall be played.
+       *
+       * Allowed values are:
+       * - 'pre': pre-roll ad
+       * - 'post': post-roll ad
+       * - fractional seconds: '10', '12.5' (mid-roll ad)
+       * - percentage of the entire video duration: '25%', '50%' (mid-roll ad)
+       * - timecode [hh:mm:ss.mmm]: '00:10:30.000', '01:00:00.000' (mid-roll ad)
+       */
+      offset?: string;
+      /**
        * Contains one or more ad breaks. Each ad break defines when an ad shall be played and must contain
@@ -641,25 +659,21 @@ * an offset and a tag property.
       /**
-       * Specifies the path, relative or absolute, to bitmovinplayer-core.min.js, including the filename.
+       * Specifies the path, relative or absolute, to the file containing the Flash based player.
+       * Default name: bitmovinplayer.swf
        */
-      html5?: string;
-      /**
-       * Specifies the path, relative or absolute, to bitmovinplayer-core.min.css, including the filename.
-       */
-      css?: string;
-      /**
-       * Specifies the path, relative or absolute, to bitmovinplayer.swf, including the filename.
-       */
       flash?: string;
       /**
-       * Specifies the path, relative or absolute, to bitmovinplayer-vr.min.js, including the filename.
+       * Specifies the path, relative or absolute, to the file needed for VR and 360º video playback.
+       * Default name: bitmovinplayer-vr.js
        */
       vr?: string;
       /**
-       * Specifies the path, relative or absolute, to bitmovinplayer-controls.min.js, including the filename.
+       * Specifies the path, relative or absolute, to the UI/skin.
+       * Default name: bitmovinplayer-ui.js
        */
-      ctrls?: string;
+      ui?: string;
       /**
-       * Specifies the path, relative or absolute, to bitmovinplayer-controls.min.css, including the filename.
+       * Specifies the path, relative or absolute, to the style sheet of the UI/skin.
+       * Default name: bitmovinplayer-ui.css
        */
-      ctrls_css?: string;
+      ui_css?: string;
     }
@@ -666,0 +680,0 @@

src/ts/player.d.ts

@@ -183,6 +183,17 @@ /// <reference path='player-config.d.ts' />
        * The message that is displayed until the ad can be skipped.
-       * Has the placeholder 'xx', which is replaced by the remaining time until the ad can be skipped.
-       * TODO replace placeholder with a better pattern, e.g. '{remainingTime}' instead of 'xx' which can
-       *      appear in normal text (for backwards compatibility, the new pattern could be matched first and
-       *      if not found, fallback to the old pattern)
+       * Supports the placeholders '{remainingTime[formatString]}', '{playedTime[formatString]}' and
+       * '{adDuration[formatString]}', which are replaced by the remaining time until the ad can be skipped,
+       * the current time or the ad duration.
+       *
+       * The format string is optional. The default is the time in seconds.
+       *
+       * Supported format strings:
+       * - %d: Inserts the time as an integer.
+       * - %0Nd: Inserts the time as an integer with leading zeroes, if the length of the time string is smaller than N.
+       * - %f: Inserts the time as a float.
+       * - %0Nf: Inserts the time as a float with leading zeroes.
+       * - %.Mf: Inserts the time as a float with M decimal places. Can be combined with %0Nf, e.g. %04.2f
+       *    (the time 10.123 would be printed as 0010.12).
+       * - %hh:mm:ss
+       * - %mm:ss
        */
@@ -204,2 +215,3 @@ countdown: string;
        * The offset for the ad, may be 'pre', 'post', seconds, percent, or a string in the format hh:mm:ss
+       * @see AdvertisingConfig#offset
        */
@@ -206,0 +218,0 @@ timeOffset?: any;

src/ts/timeout.ts

@@ -27,5 +27,7 @@ // TODO change to internal (not exported) class, how to use in other files?
    * Starts the timeout and calls the callback when the timeout delay has passed.
+   * @returns {Timeout} the current timeout (so the start call can be chained to the constructor)
    */
-  start(): void {
+  start(): this {
     this.reset();
+    return this;
   }
@@ -32,0 +34,0 @@

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

2795593

increased by0.7%

Lines of code

28713

increased by0.85%

No dependency changes