eko-js-sdk - npm Package Compare versions

Comparing version 0.0.6 to 0.0.7

package.json

 {
     "name": "eko-js-sdk",
-    "version": "0.0.6",
+    "version": "0.0.7",
     "description": "A lightweight SDK that allows for easy integration of eko videos into webpages.",
@@ -40,2 +40,3 @@ "main": "src/EkoPlayer.js",
         "jest-junit": "^6.2.1",
+        "puppeteer": "^5.5.0",
         "webpack": "^4.26.0",
@@ -42,0 +43,0 @@ "webpack-cli": "^3.1.2",

README.md

@@ -33,2 +33,3 @@ # eko-js-sdk
 | el | `Element, String` | The container element to be used by the player, or a DOM selector string for the container element. |
+| embedapi | `String` | Optional. eko embed api version to be used internally. Valid values include `"1.0"`, `"2.0"`. If no value given, default value `"1.0"` will be used. |
 
@@ -52,3 +53,3 @@ #### load(projectId, options) → Promise
 ```javascript
-let ekoPlayer = new EkoPlayer('#myContainer');
+let ekoPlayer = new EkoPlayer('#myContainer', '1.0');
 ekoPlayer.load('AWLLK1', {
@@ -55,0 +56,0 @@ params: {

src/EkoPlayer.js

@@ -0,6 +1,9 @@
+import ekoEmbedFactory from './lib/ekoEmbed/factory';
+import coverFactory from './lib/cover/factory';
+import iframeCreator from './lib/iframeCreator';
+
 import deepmerge from 'deepmerge';
-import EventEmitter from 'eventemitter3';
+import utils from './lib/utils';
+import { parseQueryParams } from './lib/queryParamsUtils';
 
-import utils from './utils/utils';
-
 const DEFAULT_OPTIONS = {
@@ -60,9 +63,2 @@ env: '',
 
-const COVER_STATE_CLASSES = {
-    LOADING: 'eko-player-loading',
-    LOADED: 'eko-player-loaded',
-    STARTED: 'eko-player-started',
-};
-
-let instanceCount = 0;
 let isEkoSupported = null;
@@ -74,5 +70,6 @@
      * @param {Element|string} el - The container element to be used by the player, or a DOM selector string for the container element.
+     * @param {string} embedapi - embed api version
      * @memberof EkoPlayer
      */
-    constructor(el) {
+    constructor(el, embedapi) {
         if (!el) {
@@ -85,14 +82,7 @@ throw new Error('Constructor must get an element (or selector) as first argument.');
 
-        // Initialize private members
-        this._iframe = utils.buildIFrame(`ekoembed-${++instanceCount}`);
-        this._eventEmitter = new EventEmitter();
+        this.iframe = iframeCreator.create();
+        this.ekoEmbed = ekoEmbedFactory.create(this.iframe, embedapi || '1.0');
 
-        // Bind Listeners
-        this.onEkoEventFired = this.onEkoEventFired.bind(this);
-
-        // Attach event listeners
-        this.addEventListeners();
-
         // Append our iframe to provided DOM element/container
-        utils.getContainer(el).appendChild(this._iframe);
+        utils.getContainer(el).appendChild(this.iframe);
 
@@ -120,6 +110,6 @@ // Return our public API from the constructor
             isEkoSupported =
+                typeof window !== 'undefined' && // Added to support SSR
                 utils.isES6Supported() &&
                 utils.isWebAudioSupported();
         }
-
         return isEkoSupported;
@@ -147,104 +137,27 @@ }
     load(projectId, options) {
-        // Deep merge of default options with provided options (arrays are concatenated).
-        options = deepmerge.all([
-            DEFAULT_OPTIONS,
-            options || {},
-            {
-                params: {
-                    embedapi: '1.0',
-                    embedid: this._iframe.id
-                }
-            }
-        ]);
-
-        // Add embed params that are required for some events,
-        // For example, if the "urls.intent" event is included, we must add the "urlsmode=proxy" embed param.
-        Object.keys(EVENT_TO_EMBED_PARAMS_MAP)
-            .forEach(event => {
-                if (options.events.includes(event)) {
-                    options.params = Object.assign(options.params, EVENT_TO_EMBED_PARAMS_MAP[event]);
-                }
-            });
-
-        // Get rid of any duplications in arrays
-        options.events = utils.uniq(options.events);
-        options.pageParams = utils.uniq(options.pageParams);
-
-        // Add events to our params
-        options.params.events = options.events.join(',');
-
-        // If EkoAnalytics exists on parent frame, pass the EA user id to the child frame
-        /* eslint-disable new-cap */
-        if (window.EkoAnalytics && window.EkoAnalytics('getUid')) {
-            options.params.eauid = window.EkoAnalytics('getUid');
+        if (!projectId || typeof projectId !== 'string') {
+            throw new Error('Invalid projectId arg passed to load() method, expected a non-empty string');
         }
-        /* eslint-enable new-cap */
+        options = this.prepareLoadingOptions(options);
 
-        let coverDomEl;
-        let coverCallback;
+        // Handle cover
+        let cover = coverFactory.create(options.cover);
 
-        if (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);
-            }
+        // LOADING
+        cover.setState(COVER_STATES.LOADING);
 
-            // Custom cover was given, let's add a cover=false embed param to disable default cover.
-            if (!options.params.hasOwnProperty('cover')) {
-                options.params.cover = false;
-            }
-        }
+        // LOADED
+        this.once('canplay', (buffered, isAutoplayExpected) => {
+            cover.setState(COVER_STATES.LOADED, { buffered, isAutoplayExpected });
+        });
 
-        // Get the final embed params object
-        // (merging params with selected page params to forward)
-        const embedParams = Object.assign(
-            {},
-            options.params,
-            utils.pick(
-                utils.parseQueryParams(window.location.search),
-                options.pageParams
-            )
-        );
+        // STARTED
+        this.once('playing', () => {
+            cover.setState(COVER_STATES.STARTED);
+        });
 
-        // Handle cover logic
-        if (coverDomEl || coverCallback) {
-            // LOADING
-            if (coverDomEl) {
-                coverDomEl.classList.add(COVER_STATE_CLASSES.LOADING);
-            } else if (coverCallback) {
-                coverCallback(COVER_STATES.LOADING);
-            }
-
-            // LOADED
-            this.once('canplay', (buffered, isAutoplayExpected) => {
-                if (coverDomEl) {
-                    coverDomEl.classList.remove(COVER_STATE_CLASSES.LOADING);
-                    coverDomEl.classList.add(COVER_STATE_CLASSES.LOADED);
-                } else if (coverCallback) {
-                    coverCallback(COVER_STATES.LOADED, { buffered, isAutoplayExpected });
-                }
-            });
-
-            // STARTED
-            this.once('playing', () => {
-                if (coverDomEl) {
-                    coverDomEl.classList.remove(COVER_STATE_CLASSES.LOADED);
-                    coverDomEl.classList.add(COVER_STATE_CLASSES.STARTED);
-                } else if (coverCallback) {
-                    coverCallback(COVER_STATES.STARTED);
-                }
-            });
-        }
-
         // Handle iframe attributes
-        utils.setElAttributes(this._iframe, options.iframeAttributes);
+        utils.setElAttributes(this.iframe, options.iframeAttributes);
 
-        // Finally, let's set the iframe's src to begin loading the project
-        this._iframe.setAttribute(
-            'src',
-            utils.buildEmbedUrl(projectId, embedParams, options.env)
-        );
+        this.ekoEmbed.load(projectId, options);
     }
@@ -258,3 +171,3 @@
     play() {
-        this.invoke('play');
+        this.invoke('play', []);
     }
@@ -268,3 +181,3 @@
     pause() {
-        this.invoke('pause');
+        this.invoke('pause', []);
     }
@@ -280,10 +193,3 @@
     invoke(method, ...args) {
-        if (typeof method !== 'string') {
-            throw new Error('Expected required argument method to have type string');
-        }
-        const action = {
-            type: `eko.${method}`,
-            args: args
-        };
-        this._iframe.contentWindow.postMessage(action, '*');
+        this.ekoEmbed.invoke(method, args);
     }
@@ -300,3 +206,3 @@
     on(eventName, callback) {
-        this._eventEmitter.on(eventName, callback);
+        this.ekoEmbed.on(eventName, callback);
     }
@@ -313,3 +219,3 @@
     off(eventName, callback) {
-        this._eventEmitter.off(eventName, callback);
+        this.ekoEmbed.off(eventName, callback);
     }
@@ -327,3 +233,3 @@
     once(eventName, callback) {
-        this._eventEmitter.once(eventName, callback);
+        this.ekoEmbed.once(eventName, callback);
     }
@@ -335,26 +241,28 @@
 
-    /*
-     * Private function. Will emit an event and pass its arguments.
-     */
-    trigger(eventName, ...args) {
-        this._eventEmitter.emit(eventName, ...args);
-    }
+    prepareLoadingOptions(options) {
+        options = deepmerge.all([DEFAULT_OPTIONS, (options || {})]);
 
-    onEkoEventFired(event) {
-        if (!utils.isEkoDomain(event.origin)) {
-            return;
-        }
+        options.events = utils.uniq(options.events);
+        options.pageParams = utils.uniq(options.pageParams);
 
-        const msg = event.data;
+        // Add embed params that are required for some events,
+        // For example, if the "urls.intent" event is included, we must add the "urlsmode=proxy" embed param.
+        Object.keys(EVENT_TO_EMBED_PARAMS_MAP)
+            .forEach(event => {
+                if (options.events.includes(event)) {
+                    options.params = Object.assign(options.params, EVENT_TO_EMBED_PARAMS_MAP[event]);
+                }
+            });
 
-        // Do nothing if this message was not intended for us
-        if (!msg.type || msg.embedId !== this._iframe.id) {
-            return;
+        // If EkoAnalytics exists on parent frame, pass the EA user id to the child frame
+        /* eslint-disable new-cap */
+        if (window.EkoAnalytics && window.EkoAnalytics('getUid')) {
+            options.params.eauid = window.EkoAnalytics('getUid');
         }
+        /* eslint-enable new-cap */
 
-        this.trigger.apply(this, [msg.type.replace(/^eko./, '')].concat(msg.args));
-    }
+        const forwardParams = utils.pick(parseQueryParams(window.location.search), options.pageParams);
+        options.params = deepmerge.all([options.params, forwardParams]);
 
-    addEventListeners() {
-        window.addEventListener('message', this.onEkoEventFired);
+        return options;
     }
@@ -361,0 +269,0 @@ }

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

37426

increased by11.9%

Number of package files

15

increased by200%

Lines of code

559

increased by30.91%

Number of lines in readme file

135

increased by0.75%

Worsened metrics

Dev dependency count

23

increased by4.55%

Number of medium supply chain risk alerts

1

increased byInfinity%

No dependency changes