feat: prefer native hls on safari (#25)

* feat: choose native HLS playback on Safari * CR fixes and tests * fix eslint errors * change impl * fixes * revert index.html
kaltura · Sep 10, 2017 · 81ba2bf · 81ba2bf
1 parent a41633e
commit 81ba2bf
Show file tree

Hide file tree

Showing 3 changed files with 98 additions and 4 deletions.
diff --git a/src/setup.js b/src/setup.js
@@ -5,7 +5,9 @@ import {
   extractPlayerConfig,
   extractProvidersConfig,
   createKalturaPlayerContainer,
-  validateTargetId, validateProvidersConfig
+  validateTargetId,
+  validateProvidersConfig,
+  checkNativeHlsSupport
 } from "./utils/setup-helpers"
 
 /**
@@ -19,6 +21,7 @@ function setup(targetId: string, options: Object): KalturaPlayer {
   let playerConfig = extractPlayerConfig(options);
   let providersConfig = extractProvidersConfig(options);
   let containerId = createKalturaPlayerContainer(targetId);
+  checkNativeHlsSupport(playerConfig);
   let player = loadPlayer(containerId, playerConfig);
   let kalturaPlayer = new KalturaPlayer(player, containerId, providersConfig);
   return Object.assign(player, kalturaPlayer);

diff --git a/src/utils/setup-helpers.js b/src/utils/setup-helpers.js
@@ -1,5 +1,5 @@
 // @flow
-import {Utils} from 'playkit-js'
+import {Env, Utils} from 'playkit-js'
 import {ValidationErrorType} from './validation-error'
 
 const CONTAINER_CLASS_NAME: string = 'kaltura-player-container';
@@ -93,11 +93,32 @@ function addKalturaPoster(metadata: Object, width: number, height: number): void
   metadata.poster = `${metadata.poster}/height/${height}/width/${width}`;
 }
 
+/**
+ * Sets config option for native HLS playback
+ * @param {Object} playerConfig - the player config
+ * @returns {void}
+ */
+function checkNativeHlsSupport(playerConfig: Object): void {
+  if (Env.browser.name === "Safari") {
+    let preferNativeHlsValue = Utils.Object.getPropertyPath(playerConfig, 'playback.preferNative.hls');
+    if (typeof preferNativeHlsValue !== 'boolean') {
+      Utils.Object.mergeDeep(playerConfig, {
+        playback: {
+          preferNative: {
+            hls: true
+          }
+        }
+      });
+    }
+  }
+}
+
 export {
   extractPlayerConfig,
   extractProvidersConfig,
   createKalturaPlayerContainer,
   addKalturaPoster,
   validateTargetId,
-  validateProvidersConfig
+  validateProvidersConfig,
+  checkNativeHlsSupport
 };
diff --git a/test/src/setup-helpers.spec.js b/test/src/setup-helpers.spec.js
@@ -1,3 +1,4 @@
+import {Env} from 'playkit-js'
 import * as TestUtils from 'playkit-js/test/src/utils/test-utils'
 import {ValidationErrorType} from '../../src/utils/validation-error'
 import {
@@ -6,7 +7,8 @@ import {
   createKalturaPlayerContainer,
   validateTargetId,
   validateProvidersConfig,
-  addKalturaPoster
+  addKalturaPoster,
+  checkNativeHlsSupport
 } from '../../src/utils/setup-helpers'
 
 const targetId = 'player-placeholder_setup-helpers.spec';
@@ -262,3 +264,71 @@ describe('addKalturaPoster', function () {
     metadata.poster.should.equal('https//my/kaltura/poster/height/360/width/640');
   });
 });
+
+describe('checkNativeHlsSupport', function () {
+  it('set preferNative to true if user preference was set to true', function () {
+    const playerConfig = {
+      playback: {
+        preferNative: {
+          hls: true
+        }
+      }
+    };
+    checkNativeHlsSupport(playerConfig);
+    playerConfig.playback.preferNative.hls.should.be.true;
+  });
+
+  it('set preferNative to false if user preference was set to false', function () {
+    const playerConfig = {
+      playback: {
+        preferNative: {
+          hls: false
+        }
+      }
+    };
+    checkNativeHlsSupport(playerConfig);
+    playerConfig.playback.preferNative.hls.should.be.false;
+  });
+
+  it('set preferNative to default value if user preference was not set 1', function () {
+    const playerConfig = {};
+    checkNativeHlsSupport(playerConfig);
+    if (Env.browser.name === "Safari") {
+      playerConfig.playback.preferNative.hls.should.be.true;
+    } else {
+      playerConfig.should.deep.equal({});
+    }
+  });
+
+  it('set preferNative to default value if user preference was not set 2', function () {
+    const playerConfig = {
+      playback: {}
+    };
+    checkNativeHlsSupport(playerConfig);
+    if (Env.browser.name === "Safari") {
+      playerConfig.playback.preferNative.hls.should.be.true;
+    } else {
+      playerConfig.should.deep.equal({
+        playback: {}
+      });
+    }
+  });
+
+  it('set preferNative to default value if user preference was not set 3', function () {
+    const playerConfig = {
+      playback: {
+        preferNative: {}
+      }
+    };
+    checkNativeHlsSupport(playerConfig);
+    if (Env.browser.name === "Safari") {
+      playerConfig.playback.preferNative.hls.should.be.true;
+    } else {
+      playerConfig.should.deep.equal({
+        playback: {
+          preferNative: {}
+        }
+      });
+    }
+  });
+});