From 91a51417fbb8289cbc76ac9bf3a90f5f4dfd8f81 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Niklas=20N=C3=A4rhinen?= <niklas.narhinen@flowplayer.com>
Date: Tue, 12 Jul 2022 10:32:02 +0300
Subject: [PATCH] chore: upgrade flowplayer to v3

---
 _includes/video/pb-is-fp.html                 | 143 +++++++++---------
 .../instream/flowplayer/pb-ve-flowplayer.html |  72 ++-------
 2 files changed, 89 insertions(+), 126 deletions(-)

diff --git a/_includes/video/pb-is-fp.html b/_includes/video/pb-is-fp.html
index a86e9d9b9c..8fceac5010 100644
--- a/_includes/video/pb-is-fp.html
+++ b/_includes/video/pb-is-fp.html
@@ -8,9 +8,9 @@
 
     <!--pbjs and player code -->
 
-    <link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css">
-    <script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"></script>
-    <script src="//cdn.flowplayer.com/releases/native/stable/plugins/ads.min.js"></script>
+    <link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css">
+    <script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"></script>
+    <script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"></script>
     <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
 
     <style>
@@ -28,78 +28,81 @@
 
     <script type="text/javascript">
 
-      var pbjs = pbjs || {};
-      pbjs.que = pbjs.que || [];
-
-      // The ad tag in Flowplayer can be actual ad tag or promise to an ad tag.
-      // We return the ad tag if it is available before the player is ready to play
-      // Otherwise the player waits for 2 secs for tag to be available.
-      var adtag = null
-      var timeout = 2000
-      var asyncTag = function() {
-        if (adtag) return Promise.resolve(adtag)
-
-        return new Promise(function (resolve) {
-          setTimeout(function() {
-            resolve(adtag)
-          }, timeout)
-        })
+var pbjs = pbjs || {};
+  pbjs.que = pbjs.que || [];
+
+  const BIDDER1_PROVIDER = 'appnexus';
+  const BIDDER1_PLACEMENT_ID = '13232361';
+
+  // The ad tag in Flowplayer can be actual ad tag or promise to an ad tag. &nbsp;
+  // We return the ad tag if it is available before the player is ready to play &nbsp;
+  // Otherwise the player waits for 2 secs for tag to be available.<br>
+  var adtag = null
+  var timeout = 2000
+  window.prebid_fetcher = function() {
+    if (adtag) return Promise.resolve(adtag)
+
+    return new Promise(function (resolve) {
+      setTimeout(function() {
+        resolve(adtag)
+      }, timeout)
+    })
+  }
+
+  /*
+   Prebid Video adUnit
+   */
+
+  var videoAdUnit = {
+    code: 'video1',
+    sizes: [640,480],
+    mediaTypes: {
+      video: {
+          context: 'instream',
+          playerSize: [640, 480],
+          mimes: ['video/mp4'],
+          protocols: [1, 2, 3, 4, 5, 6, 7, 8],
+          playbackmethod: [2],
+          skip: 1
       }
+    },
+    bids: [
+      {
+        bidder: BIDDER1_PROVIDER,
+        params: {
+          placementId: BIDDER1_PLACEMENT_ID
+        }
+      }
+    ]
+  };
 
-      /*
-       Prebid Video adUnit
-       */
-
-      var videoAdUnit = {
-        code: 'video1',
-        sizes: [640,480],
-        mediaTypes: {
-          video: {
-                context: 'instream',
-                playerSize: [640, 480],
-                mimes: ['video/mp4'],
-                protocols: [1, 2, 3, 4, 5, 6, 7, 8],
-                playbackmethod: [2],
-                skip: 1
-          }
-        },
-        bids: [
-          {
-            bidder: 'appnexus',
-            params: {
-              placementId: '13232361' // Add your own placement id here
-            }
-          }
-        ]
-      };
-
-      pbjs.que.push(function(){
-        pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request
+  pbjs.que.push(function(){
+    pbjs.addAdUnits(videoAdUnit); // add your ad units to the bid request<br>
 
-        pbjs.setConfig({
-          debug: true,
-          cache: {
-            url: 'https://prebid.adnxs.com/pbc/v1/cache'
-          }
-        });
-
-        pbjs.requestBids({
-          bidsBackHandler: function(bids) {
-            var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
-              adUnit: videoAdUnit,
-              params: {
-                iu: '/19968336/prebid_cache_video_adunit',
-                cust_params: {
-                  section: "blog",
-                  anotherKey: "anotherValue"
-                },
-                output: "vast"
-              }
-            });
-            adtag = videoUrl;
+    pbjs.setConfig({
+      debug: true,
+      cache: {
+        url: 'https://prebid.adnxs.com/pbc/v1/cache'
+      }
+    });
+
+    pbjs.requestBids({
+      bidsBackHandler: function(bids) {
+        var videoUrl = pbjs.adServers.dfp.buildVideoUrl({
+          adUnit: videoAdUnit,
+          params: {
+            iu: '/19968336/prebid_cache_video_adunit',
+            cust_params: {
+              section: "blog",
+              anotherKey: "anotherValue"
+            },
+            output: "vast"
           }
         });
-      });
+        adtag = videoUrl;
+      }
+    });
+  }); 
 
 	</script>
 
diff --git a/examples/video/instream/flowplayer/pb-ve-flowplayer.html b/examples/video/instream/flowplayer/pb-ve-flowplayer.html
index 6ccb3b07ef..a7d4dd1774 100644
--- a/examples/video/instream/flowplayer/pb-ve-flowplayer.html
+++ b/examples/video/instream/flowplayer/pb-ve-flowplayer.html
@@ -18,23 +18,13 @@ <h1>{{ page.title }}</h1>
 
 		<!--video warning-->
 		<div class="pb-alert pb-alert-important" >
-			<p style="color:#85720f"><b>Important:</b>
 			<p style="color:#85720f"><b>Important:</b>
 			This example uses a test version of Prebid.js hosted on our CDN that is not recommended for production use. It includes all available adapters. Production implementations should build from source or customize the build using the Download page to make sure only the necessary bidder adapters are included.</p>
 		</div>
 
 		<!--video placeholder | this should be formatted per the needs of each player-->
-		<div>
 
 			<div id="player"></div>
-			<div id="controls">
-			    <button id="ad-toggle" disabled>
-			        Toggle ad playback
-			    </button>
-			    <p>The button will be enabled only during ads</p>
-			</div>
-
-		</div>
 
 	</div>
 
@@ -53,9 +43,9 @@ <h4>Place this code in the page header.</h4>
       <pre class="pb-code-hl">
 <!--put javascript code here-->
 &lt;script async src="//cdn.jsdelivr.net/npm/prebid.js@latest/dist/not-for-prod/prebid.js"&gt;&lt;/script&gt;
-&lt;link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/stable/style/flowplayer.css"&gt;
-&lt;script src="//cdn.flowplayer.com/releases/native/stable/flowplayer.min.js"&gt;&lt;/script&gt;
-&lt;script src="//cdn.flowplayer.com/releases/native/stable/plugins/ads.min.js"&gt;&lt;/script&gt;
+&lt;link rel="stylesheet" href="//cdn.flowplayer.com/releases/native/3/stable/style/flowplayer.css"&gt;
+&lt;script src="//cdn.flowplayer.com/releases/native/3/stable/flowplayer.min.js"&gt;&lt;/script&gt;
+&lt;script src="//cdn.flowplayer.com/releases/native/3/stable/plugins/ads.min.js"&gt;&lt;/script&gt;
 &lt;script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"&gt;&lt;/script&gt;
 &lt;style&gt;
     #player {
@@ -64,21 +54,20 @@ <h4>Place this code in the page header.</h4>
         float: left;
     }
 
-    #controls {
-        float: left;
-        padding: 1em;
-    }
 &lt;/style&gt;
 &lt;script&gt;
   var pbjs = pbjs || {};
   pbjs.que = pbjs.que || [];
 
+  const BIDDER1_PROVIDER = 'appnexus';
+  const BIDDER1_PLACEMENT_ID = '13232361';
+
   // The ad tag in Flowplayer can be actual ad tag or promise to an ad tag. &nbsp;
   // We return the ad tag if it is available before the player is ready to play &nbsp;
   // Otherwise the player waits for 2 secs for tag to be available.<br>
   var adtag = null
   var timeout = 2000
-  var asyncTag = function() {
+  window.prebid_fetcher = function() {
     if (adtag) return Promise.resolve(adtag)
 
     return new Promise(function (resolve) {
@@ -107,9 +96,9 @@ <h4>Place this code in the page header.</h4>
     },
     bids: [
       {
-        bidder: 'appnexus',
+        bidder: BIDDER1_PROVIDER,
         params: {
-          placementId: '13232361'  // Add your own placement id here<br>
+          placementId: BIDDER1_PLACEMENT_ID
         }
       }
     ]
@@ -167,30 +156,15 @@ <h4>Place this code in the page body.</h4>
     src: "//edge.flowplayer.org/drive.mp4",
     title: "Flowplayer demo",
     description: "Demo showing ads",
-    autoplay: true,
     ima: {
-      ads: [
-        {"time":0,"adTag":asyncTag}
+      ads: [{
+        time: 0, // preroll
+        adTag: 'flowplayer://prebid_fetcher' // this will try to call window.prebid_fetcher
       ]
     },
     token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
   })
 
-  var btn = document.querySelector('#ad-toggle');
-
-  btn.addEventListener('click', function() {
-    if (player.ads.adPlaying) player.ads.pause();
-    else player.ads.resume();
-  })
-
-  function toggleDisabled(disabled) {
-    return function() { btn.disabled = disabled }
-  }
-
-  player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
-  player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
-  player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));
-
 &lt;/script&gt;
       </pre>
 		</div>
@@ -203,29 +177,15 @@ <h4>Place this code in the page body.</h4>
 		src: "//edge.flowplayer.org/drive.mp4",
 		title: "Flowplayer demo",
 		description: "Demo showing ads",
-		autoplay: true,
 		ima: {
-		  ads: [
-		    {"time":0,"adTag":asyncTag}
-		  ]
+		  ads: [{
+        time: 0,  //preroll
+        adTag: 'flowplayer://prebid_fetcher'
+      }]
 		},
 		token:"eyJraWQiOiJZSVI0VVJZODA2TGoiLCJ0eXAiOiJKV1QiLCJhbGciOiJFUzI1NiJ9.eyJjIjoie1wiYWNsXCI6NixcImlkXCI6XCJZSVI0VVJZODA2TGpcIn0iLCJpc3MiOiJGbG93cGxheWVyIn0.YUoY8b2vl1Z15PikwgYeWQ8Cp85C-TvtmwIJ_UFxpfAYYH8yiiUrhmd3SaY_qb3AvVDz45xVV6R9wizYl-NRGQ"
 		})
 
-		var btn = document.querySelector('#ad-toggle');
-
-		btn.addEventListener('click', function() {
-		if (player.ads.adPlaying) player.ads.pause();
-		else player.ads.resume();
-		})
-
-		function toggleDisabled(disabled) {
-		return function() { btn.disabled = disabled }
-		}
-
-		player.ads.on(flowplayer.AdEvents.AD_STARTED, toggleDisabled(false));
-		player.ads.on(flowplayer.AdEvents.AD_COMPLETED, toggleDisabled(true));
-		player.ads.on(flowplayer.AdEvents.AD_SKIPPED, toggleDisabled(true));
 
 	</script>