feat: choose native hls playback on safari (#23)

kaltura · Sep 7, 2017 · 742cedf · 742cedf
1 parent 826a90d
commit 742cedf
Show file tree

Hide file tree

Showing 3 changed files with 71 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);
+  playerConfig = 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,39 @@ 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 {Object} - the player config
+ */
+function checkNativeHlsSupport(playerConfig: Object): Object{
+  if (Env.browser.name === "Safari"){
+    if (!playerConfig.playback){
+        playerConfig = {
+        playback:{
+          preferNative:{}
+        }
+      }
+    }
+    if (!playerConfig.playback.preferNative){
+      playerConfig.playback = {
+        preferNative:{}
+      }
+    }
+    //Set default value only if user didn't supply preferences
+    if (typeof(playerConfig.playback.preferNative.hls) !== "boolean") {
+      playerConfig.playback.preferNative.hls = true;
+    }
+  }
+  return playerConfig;
+}
+
 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,37 @@ 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 = checkNativeHlsSupport({
+      playback:{
+        preferNative:{
+          hls: true
+        }
+      }
+    });
+    playerConfig.playback.preferNative.hls.should.be.true;
+  });
+  it('set preferNative to false if user preference was set to false', function () {
+    const playerConfig = checkNativeHlsSupport({
+      playback:{
+        preferNative:{
+          hls: false
+        }
+      }
+    });
+    playerConfig.playback.preferNative.hls.should.be.false;
+  });
+
+  it('set preferNative to default value if user preference was not set', function () {
+    const playerConfig = checkNativeHlsSupport({
+      playback:{
+        preferNative:{}
+      }
+    });
+    if (Env.browser.name === "Safari"){
+      playerConfig.playback.preferNative.hls.should.be.true;
+    }
+  });
+});