eko-js-sdk - npm Package Compare versions

Comparing version 0.0.2 to 0.0.3

package.json

 {
     "name": "eko-js-sdk",
-    "version": "0.0.2",
+    "version": "0.0.3",
     "description": "A lightweight SDK that allows for easy integration of eko videos into webpages.",
@@ -27,2 +27,3 @@ "main": "src/EkoPlayer.js",
         "@babel/runtime": "^7.3.4",
+        "@types/jest": "^26.0.13",
         "babel-core": "^7.0.0-bridge.0",
@@ -29,0 +30,0 @@ "babel-jest": "^24.3.0",

README.md

@@ -63,3 +63,3 @@ # eko-js-sdk
 | options.events | `String[]` | A list of events that should be forwarded. |
-| options.cover | `Element, string` | An element or the query selector string for a loading cover. When loading happens, a `"eko-player-loading"` class will be added to the element. When loading finishes, the class will be removed. If no cover is provided, the default eko loading cover will be shown. |
+| options.cover | `Element, string, function` | An element or the query selector string for a loading cover. When loading happens a “eko-player-loading” class will be added to the element. When loading finishes, the “eko-player-loading” class will be removed. If a function is passed, it will be invoked with a single string argument (state) whenever the state changes. The possible state values are "loading" (cover should be shown) and "loaded" (cover should be hidden). If no cover is provided, the default eko loading cover will be shown. |
 | options.frameTitle | `String` | The title for the iframe. |
@@ -66,0 +66,0 @@ | options.pageParams | `String[]` | Any query params from the page url that should be forwarded to the iframe. Can supply regex and strings. By default, the following query params will automatically be forwarded: autoplay, debug, utm_*, headnodeid. |

src/EkoPlayer.js

@@ -110,3 +110,8 @@ import axios from 'axios';
      * @param {string[]} [options.events] - A list of events that should be forwarded to the app.
-     * @param {Element|string} [options.cover] - An element or the query selector string for a loading cover. When loading happens a “eko-player-loading” class will be added to the element. When loading finishes, the “eko-player-loading” class will be removed. If no cover is provided, the default eko loading cover will be shown.
+     * @param {Element|string|function} [options.cover] - An element or the query selector string for a loading cover.
+     * When loading happens a “eko-player-loading” class will be added to the element.
+     * When loading finishes, the “eko-player-loading” class will be removed.
+     * If a function is passed, it will be invoked with a single string argument (state) whenever the state changes.
+     * The possible state values are "loading" (cover should be shown) and "loaded" (cover should be hidden).
+     * If no cover is provided, the default eko loading cover will be shown.
      * @param {string} [options.frameTitle] -  The title for the iframe.
@@ -147,6 +152,12 @@ * @param {array} [options.pageParams] - Any query params from the page url that should be forwarded to the iframe. Can supply regex and strings. By default, the following query params will automatically be forwarded: autoplay, debug, utm_*, headnodeid
         let coverDomEl;
+        let coverCallback;
 
-        // Resolve the cover DOM element if given
         if (options.cover) {
-            coverDomEl = utils.getContainer(options.cover);
+            // Handle cover callback
+            if (typeof options.cover === 'function') {
+                coverCallback = options.cover;
+            } else {
+                // Resolve the cover DOM element if given
+                coverDomEl = utils.getContainer(options.cover);
+            }
 
@@ -176,5 +187,10 @@ // Custom cover was given, let's add a cover=false embed param to disable default cover.
 
-        // Handle adding and removing the "eko-player-loading" CSS class to the cover
-        if (coverDomEl) {
-            coverDomEl.classList.add('eko-player-loading');
+        // Handle cover logic
+        if (coverDomEl || coverCallback) {
+            if (coverDomEl) {
+                coverDomEl.classList.add('eko-player-loading');
+            } else if (coverCallback) {
+                coverCallback('loading');
+            }
+
             const autoplay = typeof embedParams.autoplay === 'boolean' ?
@@ -185,3 +201,7 @@ embedParams.autoplay :
             this.once(autoplay ? 'playing' : 'canplay', () => {
-                coverDomEl.classList.remove('eko-player-loading');
+                if (coverDomEl) {
+                    coverDomEl.classList.remove('eko-player-loading');
+                } else if (coverCallback) {
+                    coverCallback('loaded');
+                }
             });
@@ -188,0 +208,0 @@ }

No alert changes

Improved metrics

Total package byte prevSize

33212

increased by3.08%

Lines of code

409

increased by4.6%

Worsened metrics

Dev dependency count

21

increased by5%

No dependency changes