feat(poster): decorate poster call with player dimensions (#15)

* feat(poster): decorate poster call with player dimensions * Fix CSS for player display * CR fixes * chore: update test page * chore: update dist * Update index.html
kaltura · Aug 8, 2017 · 2a5b853 · 2a5b853
1 parent 2393215
commit 2a5b853
Show file tree

Hide file tree

Showing 8 changed files with 2,597 additions and 2,142 deletions.
diff --git a/dist/kaltura-player.js b/dist/kaltura-player.js
diff --git a/dist/kaltura-player.js.map b/dist/kaltura-player.js.map
diff --git a/dist/kaltura-player.min.js b/dist/kaltura-player.min.js
diff --git a/dist/kaltura-player.min.js.map b/dist/kaltura-player.min.js.map
diff --git a/src/assets/style.css b/src/assets/style.css
@@ -1,7 +1,7 @@
 .kaltura-player-container {
   width: 100%;
   height: 100%;
-  position: relative;
+  position: absolute;
   outline: none;
   -webkit-touch-callout: none;
   -webkit-user-select: none;

diff --git a/src/index.html b/src/index.html
@@ -41,18 +41,13 @@
     plugins: {
       kanalytics: {
         beUrl: "http://qa-apache-testing-ubu-01.dev.kaltura.com/api_v3"
-      },
-      ima: {
-        adTagUrl: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/ad_rule_samples&ciu_szs=300x250&ad_rule=1&impl=s&gdfp_req=1&env=vp&output=vmap&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ar%3Dpreonly&cmsid=496&vid=short_onecue&correlator='
       }
     }
   };
 
   try {
     var kalturaPlayer = KalturaPlayer.setup('player-placeholder', config);
-    kalturaPlayer.loadMedia('0_wifqaipd').then(function () {
-      kalturaPlayer.play();
-    });
+    kalturaPlayer.loadMedia('0_wifqaipd');
   } catch (e) {
     console.error(e.message)
   }

diff --git a/src/kaltura-player.js b/src/kaltura-player.js
@@ -4,6 +4,7 @@ import PlaykitUI from 'playkit-js-ui'
 import OvpProvider from 'playkit-js-providers/dist/ovpProvider'
 import LoggerFactory from './utils/logger'
 import {addKalturaParams} from './utils/kaltura-params'
+import {addKalturaPoster} from './utils/setup-helpers'
 import './assets/style.css'
 
 export default class KalturaPlayer {
@@ -28,9 +29,13 @@ export default class KalturaPlayer {
     return this._provider.getConfig(entryId, uiConfId)
       .then((data) => {
         let playerConfig = {};
+        const dimensions = this._player.dimensions;
+        addKalturaPoster(data.metadata, dimensions.width, dimensions.height);
         addKalturaParams(data.sources, this._player);
         Utils.Object.mergeDeep(playerConfig, this._player.config, data);
         this._player.configure(playerConfig);
       });
   }
 }
+
+
diff --git a/src/utils/setup-helpers.js b/src/utils/setup-helpers.js
@@ -82,10 +82,22 @@ function createKalturaPlayerContainer(targetId: string): string {
   return el.id;
 }
 
+/**
+ * Add poster with player dimensions to thumbnail API call
+ * @param {Object} metadata - metadata container
+ * @param {number} width - player width in px
+ * @param {number} height - player height in px
+ * @returns {void}
+ */
+function addKalturaPoster(metadata: Object, width: number, height: number): void{
+  metadata.poster = `${metadata.poster}/height/${height}/width/${width}`;
+}
+
 export {
   extractPlayerConfig,
   extractProvidersConfig,
   createKalturaPlayerContainer,
+  addKalturaPoster,
   validateTargetId,
   validateProvidersConfig
 };