bitmovin-player-ui 3.65.0 → 3.66.0

package/CHANGELOG.md

@@ -960,6 +960,7 @@ Version 2.0 of the UI framework is built for player 7.1. If absolutely necessary
 ## 1.0.0 (2017-02-03)
 - First release
 
+[3.66.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.64.0...v3.66.0
 [3.65.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.64.0...v3.65.0
 [3.64.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.63.0...v3.64.0
 [3.63.0]: https://github.com/bitmovin/bitmovin-player-ui/compare/v3.62.0...v3.63.0

package/dist/index.html

@@ -41,6 +41,14 @@
                 </div>
                 <span class="col-sm-4 form-text">The UI skin or skin type to display.</span>
             </div>
+
+            <div class="form-group form-check row">
+              <label for="config-ads" class="col-sm-4 form-check-label" for="config-ads">Ads</label>
+              <div class="col-sm-4 form-check">
+                  <input type="checkbox" id="config-ads">
+              </div>
+              <span class="col-sm-4 form-text">Schedule client-side ads.</span>
+            </div>
         </div>
 
         <div class="card-block">
@@ -97,6 +105,7 @@
 </div>
 
 <script src="https://cdn.bitmovin.com/player/web/8/bitmovinplayer.js"></script>
+<script src="https://cdn.bitmovin.com/player/web/8/modules/bitmovinplayer-advertising-bitmovin.js"></script>
 <script src="js/bitmovinplayer-ui.js"></script>
 <script src="https://code.jquery.com/jquery-3.1.0.min.js"></script>
 <script type="text/javascript">
@@ -183,27 +192,24 @@
     }
   };
 
-  var advertisingConfig = {
-    adBreaks: [
-      {
-        tag: {
-          // skippable
-          url: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/32573358/skippable_ad_unit&impl=s&gdfp_req=1&env=vp&output=xml_vast2&unviewed_position_start=1&url=http%3A%2F%2Freleasetest.dash-player.com%2Fads%2F&description_url=[description_url]&correlator=[random]',
-          type: 'vast',
-        },
-        position: 'pre',
+  var adBreaks = [
+    {
+      tag: {
+        // skippable
+        url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_preroll_skippable&sz=640x480&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=[random]',
+        type: 'vast',
       },
-      {
-        tag: {
-          // nonskippable
-          url: 'https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/32573358/2nd_test_ad_unit&ciu_szs=300x100&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&url=[referrer_url]&description_url=[description_url]&correlator=[random]',
-          type: 'vast',
-        },
-        position: '10',
-      }
-    ]
-  };
-  var adsEnabled = false;
+      position: 'pre',
+    },
+    {
+      tag: {
+        // nonskippable
+        url: 'https://pubads.g.doubleclick.net/gampad/ads?iu=/21775744923/external/single_ad_samples&sz=640x480&cust_params=sample_ct%3Dlinear&ciu_szs=300x250%2C728x90&gdfp_req=1&output=vast&unviewed_position_start=1&env=vp&impl=s&correlator=[random]',
+        type: 'vast',
+      },
+      position: '10',
+    }
+  ];
 
   var config = {
     key: 'YOUR KEY HERE',
@@ -211,7 +217,7 @@
     remotecontrol: {
       type: 'googlecast',
     },
-    advertising: adsEnabled ? advertisingConfig : null
+    advertising: {},
   };
 
   var uiConfig = {
@@ -256,6 +262,8 @@
   var uiManager;
   bitmovin.playerui.UIManager.setLocalizationConfig({ language: 'en', browserLanguageDetection: false });
 
+  bitmovin.player.Player.addModule(bitmovin.player["advertising-bitmovin"].default);
+
   var playerSetup = function(config) {
     player = new bitmovin.player.Player(document.getElementById('player'), config);
 
@@ -264,11 +272,17 @@
       updateApiMethods();
     });
 
+    const playgroundConfig = getConfigFromStorage();
+
     // Add UI
-    uiManager = bitmovin.playerui.UIFactory.buildDefaultUI(player, uiConfig);
+    uiManager = bitmovin.playerui.UIFactory[playgroundConfig.uiOption || 'buildDefaultUI'](player, uiConfig);
 
-    player.load(sources.fullyFeatured).then(function() {
+    player.load(sources[playgroundConfig.source || 'fullyFeatured']).then(function() {
       console.log('source successfully loaded');
+
+      if (playgroundConfig.adsEnabled) {
+        scheduleAds();
+      }
     }, function(errorEvent) {
       console.log('error while loading source', errorEvent);
     });
@@ -282,6 +296,7 @@
   $('#config-source').change(function() {
     player.unload();
     player.load(sources[$(this).val()]);
+    storeConfigInStorage();
   });
 
   var printResult = function(result, method) {
@@ -710,11 +725,77 @@
     } else {
       uiManager = bitmovin.playerui.UIFactory[factoryMethod](player, uiConfig);
     }
+    storeConfigInStorage();
+  });
+
+  var scheduleAdsCheckbox = $('#config-ads');
+  scheduleAdsCheckbox.change(function() {
+    const isChecked = $(this).is(':checked');
+
+    if (isChecked) {
+      scheduleAds();
+    } else {
+      const ads = player.ads.list();
+      ads.forEach(function(ad) {
+        player.ads.discardAdBreak(ad.id);
+      })
+    }
+
+    storeConfigInStorage();
   });
 
+  function scheduleAds() {
+    adBreaks.forEach(function(adBreak) {
+      player.ads.schedule(adBreak);
+    });
+  }
+
   // Populate stats
   $('#userAgent').html(navigator.userAgent);
 
+  function storeConfigInStorage() {
+    var data = {
+      adsEnabled: $('#config-ads').is(':checked'),
+      source: $('#config-source').val(),
+      uiOption: $('#config-ui').val(),
+    };
+
+    try {
+      window.localStorage.setItem('bmpui-playground-config', JSON.stringify(data));
+    } catch (e) {
+      console.error('Local storage access denied', e);
+    }
+  }
+
+  function getConfigFromStorage() {
+    let config = {};
+    try {
+      const loadedEntry = window.localStorage.getItem('bmpui-playground-config');
+      if (!loadedEntry) {
+        console.log('No local storage entry found');
+        return {};
+      }
+      config = JSON.parse(loadedEntry);
+    } catch (e) {
+      console.error('Problem loading playground config from localStorage', e);
+    }
+
+    return config || {};
+  }
+
+  (function applyInitialConfiguration() {
+    const config = getConfigFromStorage();
+
+    if ($('#config-source') && config.source) {
+      $('#config-source').val(config.source);
+    }
+    if ($('#config-ui') && config.uiOption) {
+      $('#config-ui').val(config.uiOption);
+    }
+    if ($('#config-ads') && config.adsEnabled !== undefined) {
+      $('#config-ads').prop('checked', config.adsEnabled);
+    }
+  })();
 </script>
 </body>
 </html>

package/dist/js/bitmovinplayer-ui.js

@@ -10833,7 +10833,7 @@ module.exports={
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.VolumeControlButton = exports.TitleBar = exports.SubtitleSelectBox = exports.SubtitleOverlay = exports.SeekBarLabel = exports.RecommendationOverlay = exports.ErrorMessageOverlay = exports.Component = exports.CastToggleButton = exports.CastStatusOverlay = exports.AudioTrackSelectBox = exports.AudioQualitySelectBox = exports.Label = exports.Container = exports.UIContainer = exports.Watermark = exports.VRToggleButton = exports.VolumeToggleButton = exports.VideoQualitySelectBox = exports.ToggleButton = exports.SettingsToggleButton = exports.SettingsPanel = exports.ItemSelectionList = exports.SelectBox = exports.SeekBar = exports.PlaybackToggleButton = exports.PlaybackTimeLabelMode = exports.PlaybackTimeLabel = exports.HugePlaybackToggleButton = exports.FullscreenToggleButton = exports.ControlBar = exports.Button = exports.ListOrientation = exports.ListNavigationGroup = exports.RootNavigationGroup = exports.NavigationGroup = exports.SpatialNavigation = exports.i18n = exports.ErrorUtils = exports.StorageUtils = exports.BrowserUtils = exports.UIUtils = exports.PlayerUtils = exports.StringUtils = exports.ArrayUtils = exports.DemoFactory = exports.UIFactory = exports.UIInstanceManager = exports.UIManager = exports.version = void 0;
 exports.QuickSeekButton = exports.ReplayButton = exports.SettingsPanelItem = exports.SubtitleSettingsPanelPage = exports.SettingsPanelPageOpenButton = exports.SettingsPanelPageBackButton = exports.SettingsPanelPage = exports.AudioTrackListBox = exports.SubtitleListBox = exports.ListBox = exports.SubtitleSettingsResetButton = exports.WindowOpacitySelectBox = exports.WindowColorSelectBox = exports.SubtitleSettingsLabel = exports.SubtitleSettingSelectBox = exports.FontSizeSelectBox = exports.FontOpacitySelectBox = exports.FontFamilySelectBox = exports.FontColorSelectBox = exports.CharacterEdgeSelectBox = exports.BackgroundOpacitySelectBox = exports.BackgroundColorSelectBox = exports.Spacer = exports.PictureInPictureToggleButton = exports.VolumeSlider = exports.AirPlayToggleButton = exports.MetadataLabelContent = exports.MetadataLabel = exports.CloseButton = exports.PlaybackToggleOverlay = exports.CastUIContainer = exports.BufferingOverlay = exports.HugeReplayButton = exports.PlaybackSpeedSelectBox = exports.AdClickOverlay = exports.AdMessageLabel = exports.AdSkipButton = exports.ClickOverlay = void 0;
-exports.version = '3.65.0';
+exports.version = '3.66.0';
 // Management
 var uimanager_1 = require("./uimanager");
 Object.defineProperty(exports, "UIManager", { enumerable: true, get: function () { return uimanager_1.UIManager; } });