eko-js-sdk - npm Package Compare versions

Comparing version 0.0.5 to 0.0.6

package.json

 {
     "name": "eko-js-sdk",
-    "version": "0.0.5",
+    "version": "0.0.6",
     "description": "A lightweight SDK that allows for easy integration of eko videos into webpages.",
@@ -45,3 +45,2 @@ "main": "src/EkoPlayer.js",
     "dependencies": {
-        "axios": "^0.20.0",
         "deepmerge": "^4.2.2",
@@ -48,0 +47,0 @@ "eventemitter3": "^4.0.7",

README.md

@@ -25,21 +25,2 @@ # eko-js-sdk
 
-#### getProjectInfo(projectId)
-
-Retrieves delivery information about the project. See our [project schema documentation](https://developer.eko.com/docs/embedding/http.html#project-overrides-schema) for more information about what is delivered.
-
-| Param           | Type           | Description  |
-| :-------------: |:--------------:| :------------|
-| projectId | `String` | The id of the project to retrieve information for. |
-
-**Example**
-
-```javascript
-EkoPlayer.getProjectInfo('AWLLK1')
-    .then(projectInfo => {
-        const { title, description, thumbnail } = projectInfo;
-        console.log(`Got project info: ${title} - ${description}`);
-    })
-    .catch(e => console.error('Failed to fetch project info:', e));
-```
-
 ### Methods
@@ -64,4 +45,4 @@
 | options.events | `String[]` | A list of events that should be forwarded. |
-| 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. |
+| 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 completes, the `eko-player-loading` class will be removed and replaced with `eko-player-loaded`. Once video begins playback, the `eko-player-loaded` class will be removed and replaced by `eko-player-started`. If a function is passed, it will be invoked with a string argument (state) whenever the state changes. Some states may also include a 2nd object argument which contains properties pertaining to the state. The possible state values are `loading` (cover should be shown), `loaded` (cover should be hidden and play button shown) and `started` (both cover and play button should be hidden). If no cover is provided, the default eko loading cover will be shown. |
+| options.iframeAttributes | `Object` | standard attributes of iframe HTML element
 | 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. |
@@ -81,3 +62,3 @@
     cover: '#myCoverId',
-    frameTitle: 'My Eko Player',
+    iframeAttributes: { title: 'My Eko Player' },
     pageParams: ['myCustomQueryParam']
@@ -84,0 +65,0 @@ });

src/EkoPlayer.js

@@ -1,2 +0,1 @@
-import axios from 'axios';
 import deepmerge from 'deepmerge';
@@ -9,3 +8,12 @@ import EventEmitter from 'eventemitter3';
     env: '',
-    frameTitle: 'Eko Player',
+    iframeAttributes: {
+        title: 'Eko Player',
+        style: 'position: absolute; width: 100%; height: 100%; border: 0;',
+        allowfullscreen: '',
+        allow: 'autoplay *; fullscreen *',
+
+        // These are currently experimental attributes, so they may not have any effect on some browsers
+        importance: 'high',
+        loading: 'eager'
+    },
     params: {
@@ -46,2 +54,15 @@ autoplay: true
 
+// All player states (used for cover functionality)
+const COVER_STATES = {
+    LOADING: 'loading',
+    LOADED: 'loaded',
+    STARTED: 'started',
+};
+
+const COVER_STATE_CLASSES = {
+    LOADING: 'eko-player-loading',
+    LOADED: 'eko-player-loaded',
+    STARTED: 'eko-player-started',
+};
+
 let instanceCount = 0;
@@ -118,3 +139,3 @@ let isEkoSupported = null;
      * If no cover is provided, the default eko loading cover will be shown.
-     * @param {string} [options.frameTitle] -  The title for the iframe.
+     * @param {object} [options.iframeAttributes] - standard attributes of iframe HTML element
      * @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
@@ -178,8 +199,2 @@ * @returns Promise that will fail if the project id is invalid
 
-        if (typeof options.frameTitle === 'string') {
-            this._iframe.setAttribute('title', options.frameTitle);
-        } else {
-            throw new Error(`Received type ${typeof options.frameTitle}. Expected string.`);
-        }
-
         // Get the final embed params object
@@ -198,17 +213,26 @@ // (merging params with selected page params to forward)
         if (coverDomEl || coverCallback) {
+            // LOADING
             if (coverDomEl) {
-                coverDomEl.classList.add('eko-player-loading');
+                coverDomEl.classList.add(COVER_STATE_CLASSES.LOADING);
             } else if (coverCallback) {
-                coverCallback('loading');
+                coverCallback(COVER_STATES.LOADING);
             }
 
-            const autoplay = typeof embedParams.autoplay === 'boolean' ?
-                embedParams.autoplay :
-                embedParams.autoplay !== 'false';
+            // 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 });
+                }
+            });
 
-            this.once(autoplay ? 'playing' : 'canplay', () => {
+            // STARTED
+            this.once('playing', () => {
                 if (coverDomEl) {
-                    coverDomEl.classList.remove('eko-player-loading');
+                    coverDomEl.classList.remove(COVER_STATE_CLASSES.LOADED);
+                    coverDomEl.classList.add(COVER_STATE_CLASSES.STARTED);
                 } else if (coverCallback) {
-                    coverCallback('loaded');
+                    coverCallback(COVER_STATES.STARTED);
                 }
@@ -218,2 +242,5 @@ });
 
+        // Handle iframe attributes
+        utils.setElAttributes(this._iframe, options.iframeAttributes);
+
         // Finally, let's set the iframe's src to begin loading the project
@@ -263,22 +290,2 @@ this._iframe.setAttribute(
     /**
-     * Retrieves the project info from the eko zuri APIs
-     *
-     * @param {string} projectId - project id to get info of
-     * @param {object} options - change the env if necessary
-     * @returns
-     * @memberof EkoPlayer
-     */
-    static getProjectInfo(projectId, options) {
-        let env = (options && options.env) || '';
-        return axios.get(`https://${env}api.eko.com/v1/projects/${projectId}`)
-            .then((response) => {
-                if (!response.data || !response.data.data) {
-                    throw new Error('Response is missing required data');
-                }
-
-                return response.data.data;
-            });
-    }
-
-    /**
      * Event emitter function that will let a module register a callback for a specified event issued from
@@ -285,0 +292,0 @@ * the EkoPlayer.

src/utils/utils.js

@@ -90,11 +90,2 @@ import featureDetectES6 from 'feature-detect-es6';
     iframe.setAttribute('id', id);
-    iframe.setAttribute('title', 'Eko Player');
-    iframe.setAttribute('style', 'position: absolute; width: 100%; height: 100%; border: 0;');
-    iframe.setAttribute('allowfullscreen', '');
-    iframe.setAttribute('allow', 'autoplay *; fullscreen *');
-
-    // These are currently experimental attributes, so they may not have any effect on some browsers
-    iframe.setAttribute('importance', 'high');
-    iframe.setAttribute('loading', 'eager');
-
     return iframe;
@@ -127,2 +118,15 @@ }
 
+function setElAttributes(el, attributes) {
+    Object.keys(attributes)
+        .forEach(attributeKey => {
+            const attributeValue = attributes[attributeKey];
+            if (typeof attributeValue === 'string') {
+                el.setAttribute(attributeKey, attributeValue);
+            } else {
+                throw new Error(`${el} attribute: ${attributeKey},
+                Received type ${typeof attributeValue}. Expected string.`);
+            }
+        });
+}
+
 export default {
@@ -139,2 +143,3 @@ pick,
     isWebAudioSupported,
+    setElAttributes
 };

No alert changes

Improved metrics

Dependency count

3

decreased by-25%

Lines of code

427

increased by2.89%

Worsened metrics

Total package byte prevSize

33447

decreased by-0.38%

Number of lines in readme file

134

decreased by-12.42%

Dependency changes

• - Removedaxios@^0.20.0

• - Removedaxios@0.20.0(transitive)

• - Removedfollow-redirects@1.15.9(transitive)