Merge pull request #181 from bitmovin/feature/yospace-sdk-3.8.x

Update Yospace SDK to 3.8.3

CHANGELOG.md

@@ -11,6 +11,10 @@ and this project adheres to [Semantic Versioning](http://semver.org/).
 
 - Support for the `DVRLIVE` PlaybackMode to not rely on Metadata parsing for live streams anymore
 
+### Changed
+
+- Yospace SDK to v3.8.3
+
 ### Fixed
 
 - Wrong playback position after skipping over ad breaks using ad immunity

README.md

@@ -172,20 +172,31 @@ const yospaceConfig = {
 
 ## Development, Contribution, Releases
 
-### Set up environment
+### Set up dev environment
 
 1. Use node.js version specified in `.nvmrc`
 2. Set up your access to the private npm registry of Yospace
 3. Run `npm ci`
 4. Use `npm run start` to run a webpack dev server
 
-### Branching & Releasing
+### Branching & Development
 
-- This repo uses git-flow and semantic versioning
-- PRs should be made against `develop` branch
+- This repo uses semantic versioning. Features and bug fixes should be implemented in separate feature branches, branch off the `main` branch.
+- PRs should be made against `main` branch
 - PRs should always contain an update of the [CHANGELOG.md](CHANGELOG.md) file
-- New versions will be manually released into the `main` branch and tagged there
-- Tagged versions will be manually published to [npm](https://www.npmjs.com/package/@bitmovin/player-integration-yospace)
+
+### Validation & Release
+- Especially when updating the Yospace SDK, this project should be validated following https://developer.yospace.com/sdk-documentation/javascript/userguide/yosdk/latest/en/validate-your-app.html. This can be done using the sample page with the following steps:
+  1. Run `npm start`
+  2. Open `localhost:8080?validation=true` in a browser
+  3. Select a source from the list to start playback and the validation logs. Alternatively, you can add the URL parameter `autoLoadSource=1` (to load the first source in the list).
+  4. Save console logs and upload them to the [Yospace validation tool](https://sdkvalidation.yospace.com/)
+- Releasing a new version is fully automated. It can be triggered using the [Release a new version](https://github.com/bitmovin/bitmovin-player-web-integrations-yospace/actions/workflows/release.yml) Github Action on the `main` branch. The workflow will:
+  - bump the version automatically based on the current version in `package.json` and changes in the `[Unreleased]` section of the `CHANGELOG.md`
+  - build the project
+  - tag the new release in git
+  - create a new release on GitHub
+  - publish the update to [npm](https://www.npmjs.com/package/@bitmovin/player-integration-yospace)
 
 ### Principles
 

package.json

@@ -35,7 +35,7 @@
   "author": "Bitmovin",
   "license": "MIT",
   "dependencies": {
-    "@yospace/admanagement-sdk": "3.6.9",
+    "@yospace/admanagement-sdk": "3.8.3",
     "fast-safe-stringify": "^2.0.7",
     "process": "^0.11.10",
     "stream-browserify": "^3.0.0"

web/index.html

@@ -72,8 +72,8 @@
               <button class="btn btn-outline-secondary" type="button" data-toggle="collapse" data-target="#collapsable-customization">
                 🛠️ Customize asset
               </button>
-              <label class="btn btn-outline-secondary">
-                <input type="radio" name="options" id="option-close" autocomplete="off" checked />✖️ Close Player
+              <label class="btn btn-outline-secondary" id="option-close">
+                <input type="radio" name="options" autocomplete="off" checked />✖️ Close Player
               </label>
             </div>
           </div>
@@ -92,8 +92,9 @@
                 />
                 <select class="custom-select col-2" id="stream-type-select">
                   <option value="1">VoD</option>
-                  <option value="2">Live</option>
-                  <option value="3">None</option>
+                  <option value="2">Live (deprecated)</option>
+                  <option value="3">DVRLive</option>
+                  <option value="4">None</option>
                 </select>
                 <div class="input-group-append">
                   <button id="load-custom-steam" class="btn btn-outline-secondary" type="button">Load</button>
@@ -140,9 +141,12 @@
       </div>
 
       <div class="row">
-        <div class="col-12">
+        <div class="col-9">
           <p1 id="segmentPlaybackLabel">Playing Segment: unknown</p1>
         </div>
+        <div class="col-3">
+          <label class="btn btn-outline-secondary" id="toggle-ad-immunity"> Enable Ad Immunity (60sec) </label>
+        </div>
       </div>
 
       <div class="row">
@@ -169,14 +173,46 @@
     </div>
     <script type="text/javascript">
       /* queryParameters */
+
+      /**
+       * validation = true|false
+       *
+       * Should be used to enable Yospace SDK logs (and disable other logs) for validating the yospace integration at
+       * https://developer.yospace.com/sdk-documentation/javascript/userguide/yosdk/latest/en/validate-your-app.html
+       */
       var isValidationMode = false;
+
+      /**
+       * debug = true|false
+       */
       var debugOverride = true;
+
+      /**
+       * autoplay = true|false
+       */
       var autoplay = true;
+
+      /**
+       * aggressiveVpaid = true|false
+       */
       var aggressiveVpaid = true;
+
+      /**
+       * vpaid = true|false
+       */
       var vpaid = true;
+
+      /**
+       * autoLoadSource = <number>
+       *
+       * Automatically load a pre-defined source into the player after loading the sample page.
+       * Index starts at 1.
+       */
       var autoLoadSource = platformType !== 'web' ? 1 : -1;
+
       /* end of queryParameters */
 
+
       var bitmovinPlayerLicenseKey = 'YOUR-KEY';
 
       var yospacePlayer;
@@ -296,6 +332,10 @@
         // We are using the default, built-in policy in the demo. Another policy can easily be set using this method:
         // yospacePlayer.setPolicy(simplePolicy);
 
+        yospacePlayer.on(bitmovin.player.ads.yospace.YospacePlayerEvent.AdImmunityEnded, adImmunityEndedEventHandler);
+
+        yospacePlayer.on(bitmovin.player.ads.yospace.YospacePlayerEvent.AdImmunityStarted, adImmunityStartedEventHandler);
+
         yospacePlayer.on('segmentplayback', function (event) {
           if (event.mimeType === 'video/mp4') {
             let segmentUrl = event.url;

web/js/pageSetup.js

@@ -35,11 +35,35 @@ function setupTestPage() {
       customSource.assetType = bitmovin.player.ads.yospace.YospaceAssetType.VOD;
     } else if (customStreamTypeSelect.val() === '2') {
       customSource.assetType = bitmovin.player.ads.yospace.YospaceAssetType.LINEAR;
+    } else if (customStreamTypeSelect.val() === '3') {
+      customSource.assetType = bitmovin.player.ads.yospace.YospaceAssetType.DVRLIVE;
     }
 
     yospacePlayer.unload();
     yospacePlayer.load(modifySourceBeforeLoading(customSource));
   });
+
+  document.querySelector('#toggle-ad-immunity').addEventListener('click', toggleAdImmunity);
+
+  function toggleAdImmunity() {
+    if (yospacePlayer.isAdImmunityActive()) {
+      yospacePlayer.endAdImmunity();
+    } else {
+      yospacePlayer.setAdImmunityConfig({
+        duration: 60,
+        disablePassedAdBreaks: true,
+      });
+      yospacePlayer.startAdImmunity();
+    }
+  }
+}
+
+function adImmunityEndedEventHandler() {
+  document.querySelector('#toggle-ad-immunity').innerHTML = 'Enable Ad Immunity for 60sec';
+}
+
+function adImmunityStartedEventHandler() {
+  document.querySelector('#toggle-ad-immunity').innerHTML = 'Disable Ad Immunity';
 }
 
 function applyQueryParameters() {