openplayerjs - npm Package Compare versions

Comparing version 2.2.4 to 2.3.0

CHANGELOG.md

@@ -7,2 +7,13 @@ ### Changelog
 
+#### [v2.3.0](https://github.com/openplayerjs/openplayerjs/compare/v2.2.4...v2.3.0)
+
+> 6 January 2021
+
+- feat(ads): Added RESUMED and USER_CLOSE IMA AdEvent to ads event list. [`#199`](https://github.com/openplayerjs/openplayerjs/pull/199)
+- fix(ads): Added conditionals to avoid errors when setting volume in an Ad that comes empty; fixes #198 [`#198`](https://github.com/openplayerjs/openplayerjs/issues/198)
+- fix(ads): Changed default value for preloading ads to `false`; fixes #193 [`#193`](https://github.com/openplayerjs/openplayerjs/issues/193)
+- feat(player): Added new `defaultLevel` and `levelchanged` event to support more in-depth operations with levels; fixed issue with CSSNano and updated documentation [`2b2fd55`](https://github.com/openplayerjs/openplayerjs/commit/2b2fd550916d7d0498904d8577821fd191a269f4)
+- Reverted changes for test file [`0609c62`](https://github.com/openplayerjs/openplayerjs/commit/0609c62bb894ff2eedb39ca6d9b516fdf1a54b5b)
+- fix: upgrade core-js from 3.8.1 to 3.8.2 [`cd06312`](https://github.com/openplayerjs/openplayerjs/commit/cd06312f130976ed849d10811002259e408d255e)
+
 #### [v2.2.4](https://github.com/openplayerjs/openplayerjs/compare/v2.2.3...v2.2.4)
@@ -14,2 +25,3 @@
 - fix(player): Added conditionals to avoid showing errors for passive events; fixes #192 [`#192`](https://github.com/openplayerjs/openplayerjs/issues/192)
+- Release 2.2.4 [`0f87282`](https://github.com/openplayerjs/openplayerjs/commit/0f87282ff31ec8027b1d61c5cd144aaf235c70a6)
 - Fixed merge issues [`196c5d2`](https://github.com/openplayerjs/openplayerjs/commit/196c5d2dbc33ec9d431860b8a1274701bfc48953)
@@ -16,0 +28,0 @@ - fix(player): Added missing element in conditional to execute pause correctly once ads are auto playing [`7a6cd5c`](https://github.com/openplayerjs/openplayerjs/commit/7a6cd5c26862014711519ae6d349a320f092bb6d)

dist/esm/controls.js

@@ -133,3 +133,3 @@ import Captions from './controls/captions';
     _createControlsLayer() {
-        if (!this.controls) {
+        if (!this.controls || !this.player.getContainer().querySelector('.op-controls')) {
             this.controls = document.createElement('div');
@@ -136,0 +136,0 @@ this.controls.className = 'op-controls';

dist/esm/controls/levels.js

@@ -22,6 +22,9 @@ import { EVENT_OPTIONS, IS_ANDROID, IS_IOS, NAV } from '../utils/constants';
     create() {
-        this.default = `${this.player.getMedia().level}`;
+        const initialLevel = this.player.getOptions().defaultLevel !== null ?
+            parseInt(this.player.getOptions().defaultLevel, 10) : this.player.getMedia().level;
+        this.default = `${initialLevel}`;
         const menuItems = this._formatMenuItems();
         const defaultLevel = menuItems.length ? menuItems.find((items) => items.key === this.default) : null;
         const defaultLabel = defaultLevel ? defaultLevel.label : this.labels.auto;
+        let levelSet = false;
         this.button = document.createElement('button');
@@ -38,5 +41,10 @@ this.button.className = `op-controls__levels op-control__${this.position}`;
                 this._gatherLevels.bind(this);
+                this.player.getMedia().level = initialLevel;
                 const e = addEvent('controlschanged');
                 this.player.getElement().dispatchEvent(e);
             }
+            else if (!levelSet) {
+                this.player.getMedia().level = initialLevel;
+                levelSet = true;
+            }
         };
@@ -121,2 +129,9 @@ this.events.media.loadedmetadata = loadLevelsEvent.bind(this);
                 }
+                const event = addEvent('levelchanged', {
+                    detail: {
+                        label: option.innerText.trim(),
+                        level,
+                    },
+                });
+                this.player.getElement().dispatchEvent(event);
                 e.preventDefault();
@@ -180,3 +195,3 @@ }
             className: 'op-levels__option',
-            default: '-1',
+            default: this.default || '-1',
             key: 'levels',
@@ -183,0 +198,0 @@ name: this.labels.levels,

dist/esm/media/ads.js

@@ -26,3 +26,3 @@ import { EVENT_OPTIONS, IS_ANDROID, IS_IOS, IS_IPHONE } from '../utils/constants';
             debug: false,
-            enablePreloading: true,
+            enablePreloading: false,
             language: 'en',
@@ -176,7 +176,9 @@ loop: false,
     set volume(value) {
-        this.adsVolume = value;
-        this.adsManager.setVolume(value);
-        this.media.volume = value;
-        this.media.muted = (value === 0);
-        this.adsMuted = (value === 0);
+        if (this.adsManager) {
+            this.adsVolume = value;
+            this.adsManager.setVolume(value);
+            this.media.volume = value;
+            this.media.muted = (value === 0);
+            this.adsMuted = (value === 0);
+        }
     }
@@ -187,14 +189,16 @@ get volume() {
     set muted(value) {
-        if (value === true) {
-            this.adsManager.setVolume(0);
-            this.adsMuted = true;
-            this.media.muted = true;
-            this.media.volume = 0;
+        if (this.adsManager) {
+            if (value === true) {
+                this.adsManager.setVolume(0);
+                this.adsMuted = true;
+                this.media.muted = true;
+                this.media.volume = 0;
+            }
+            else {
+                this.adsManager.setVolume(this.adsVolume);
+                this.adsMuted = false;
+                this.media.muted = false;
+                this.media.volume = this.adsVolume;
+            }
         }
-        else {
-            this.adsManager.setVolume(this.adsVolume);
-            this.adsMuted = false;
-            this.media.muted = false;
-            this.media.volume = this.adsVolume;
-        }
     }
@@ -386,2 +390,4 @@ get muted() {
             google.ima.AdEvent.Type.PAUSED,
+            google.ima.AdEvent.Type.RESUMED,
+            google.ima.AdEvent.Type.USER_CLOSE,
             google.ima.AdEvent.Type.STARTED,
@@ -388,0 +394,0 @@ google.ima.AdEvent.Type.THIRD_QUARTILE,

dist/esm/player.js

@@ -35,2 +35,3 @@ import 'core-js/features/array/find';
             },
+            defaultLevel: null,
             detachMenus: false,
@@ -37,0 +38,0 @@ height: 0,

docs/api.md

@@ -59,2 +59,3 @@ # API/Events
 `captionschanged` | Event triggered when user changes the current caption by selecting a new one from the `Settings` menu.
+`levelchanged` | Event triggered when user changes the current level (if actvated) by selecting a new one from the `Settings` menu.
 `playererror` | Event executed when any error has occurred within the OpenPlayerJS instance; a response will be sent via `onError` config callback. See [Usage with Javascript](#usage-with-javascript) for more details.
@@ -74,1 +75,11 @@ `playerdestroyed` | Event executed when an instance of OpenPlayerJS is destroyed (useful to remove extra elements created with the player's help).
 In addition to the list above, all [HLS events](https://github.com/video-dev/hls.js/blob/master/docs/API.md#runtime-events) and [HLS error events](https://github.com/video-dev/hls.js/blob/master/docs/API.md#errors) are supported using the same approach described above, including all their details. For the error ones, they are classified as `networkError`, `mediaError`, `muxError` and `otherError`.
+
+### Error Events
+
+In order to determine if an error is being triggered with OpenPlayerJS, you can use the following snippet, since the `playererror` event contains the type of error (`Ads`, `Hls`, `Dash`, etc.), and all the information you will need to customize the error experience:
+
+```javascript
+player.getElement().addEventListener('playererror', function(e) {
+    console.log(e); // { type, message, data }
+});
+```

docs/customize.md

@@ -1,2 +0,2 @@
-# Customizations
+# NEW! Player Customizations
 
@@ -3,0 +3,0 @@ ## Modify Look

docs/usage.md

@@ -81,2 +81,5 @@ # Usage
     // Callback to be executed once an error is found (default, `console.error`)
+    onError,
+    // If `levels` configuration is added, set programatically the default level as a numeric ID of the level (-1 for auto, default: `null`)
+    defaultLevel,
     // Params passed: Custom event with `detail: { type: 'HTML5|Ads|M(PEG)-DASH|HLS', message, data },`
@@ -89,3 +92,2 @@ live: {
     }
-    onError,
     ads: {
@@ -92,0 +94,0 @@ // The Ad(s) URLs to be processed

package.json

 {
   "name": "openplayerjs",
-  "version": "2.2.4",
+  "version": "2.3.0",
   "homepage": "https://www.openplayerjs.com/",
@@ -102,3 +102,3 @@ "author": {
     "auto-changelog": "^1.16.4",
-    "core-js": "^3.8.1",
+    "core-js": "^3.8.2",
     "custom-event-polyfill": "^1.0.7",
@@ -105,0 +105,0 @@ "element-closest": "^3.0.2",

README.md

@@ -20,5 +20,5 @@ # [OpenPlayer.js](https://www.openplayerjs.com)
 * **Enhance your player** adding your own buttons. Check [here](./docs/customize.md) for more details.
-* Provides the ability to use a single VAST/VPAID source or a VAST/VPAID playlist from several different sources (including URLs and valid XML strings).
+* Provides the ability to use a **single VAST/VPAID** source or a **VAST/VPAID playlist** from several different sources (including URLs and valid XML strings).
 * **Can play ads in infinite loop**, desired for ads that are in a heavy text page.
-* Always **responsive** by default, for both video/audio tags; a new **`fill`** mode is also included to scale and crop media relative to its parent container.
+* Always **responsive** by default, for both video/audio tags; for video, **`fill`** and **fit** modes are available to either scale and crop media relative to its parent container, or to attempt to make the media fit its parent container (including black bars), respectively.
 
@@ -25,0 +25,0 @@ ## :warning: IMPORTANT: Migrating from v1.x.x to v2.x.x :warning:

No alert changes

Improved metrics

Total package byte prevSize

850804

increased by0.6%

Lines of code

16910

increased by0.04%

Dependency changes

• Updatedcore-js@^3.8.2