From 2dbaf1acbd5926472f5a04f7cf66e67805e9a4d1 Mon Sep 17 00:00:00 2001 From: Anthony Date: Tue, 12 Oct 2021 22:52:13 +0300 Subject: [PATCH] seems to work well --- package.json | 1 + ui/component/app/view.jsx | 2 +- .../plugins/videojs-aniview/plugin.js | 95 +++++++++++++++---- .../viewers/videoViewer/internal/videojs.jsx | 50 ++++++++-- yarn.lock | 92 +++++++++++++++++- 5 files changed, 211 insertions(+), 29 deletions(-) diff --git a/package.json b/package.json index f1545afa3..6b237edda 100644 --- a/package.json +++ b/package.json @@ -68,6 +68,7 @@ "tempy": "^0.6.0", "videojs-contrib-ads": "^6.9.0", "videojs-ima": "^1.11.0", + "videojs-ima-player": "^0.5.6", "videojs-logo": "^2.1.4" }, "devDependencies": { diff --git a/ui/component/app/view.jsx b/ui/component/app/view.jsx index 8e4fdc1e6..08a20e65e 100644 --- a/ui/component/app/view.jsx +++ b/ui/component/app/view.jsx @@ -325,7 +325,7 @@ function App(props: Props) { } }, [previousRewardApproved, isRewardApproved]); - // Load IMA3 SDK for aniview: DISABLED FOR NOW + // Load IMA3 SDK for aniview // @if TARGET='web' useEffect(() => { const script = document.createElement('script'); diff --git a/ui/component/viewers/videoViewer/internal/plugins/videojs-aniview/plugin.js b/ui/component/viewers/videoViewer/internal/plugins/videojs-aniview/plugin.js index 9a0bc228e..6ac7efdab 100644 --- a/ui/component/viewers/videoViewer/internal/plugins/videojs-aniview/plugin.js +++ b/ui/component/viewers/videoViewer/internal/plugins/videojs-aniview/plugin.js @@ -69,37 +69,90 @@ class AniviewPlugin extends Component { // Plugin started if (options.debug) this.log(`Created aniview plugin.`); - // To help with debugging, we'll add a global vjs object with the video js player - window.aniview = player; + if (!this.ads) { + console.error("ima-player error: contrib-ads must be registered on player.") + return; + } - this.player = player; + console.log('this ads'); + + console.log(this.ads); + + this.ads(); // initialize videojs-contrib-ads // request ads whenever there's new video content - player.on('contentchanged', () => { - // in a real plugin, you might fetch your ad inventory here + player.on('contentchanged', function() { + // in a real plugin, you might fetch new ad inventory here player.trigger('adsready'); }); - // Plugin event listeners - player.on('readyforpreroll', (event) => this.onReadyForPreroll(event)); - } + player.on('readyforpreroll', function() { + player.ads.startLinearAdMode(); + // play your linear ad content + // in this example, we use a static mp4 + player.src('kitteh.mp4'); - onReadyForPreroll(event) { - // send event when ad is playing to remove loading spinner - this.player.one('adplaying', () => { - this.player.trigger('ads-ad-started'); + // send event when ad is playing to remove loading spinner + player.one('adplaying', function() { + player.trigger('ads-ad-started'); + }); + + // resume content when all your linear ads have finished + player.one('adended', function() { + + player.ads.endLinearAdMode(); + }); }); - // resume content when all your linear ads have finished - this.player.one('adended', () => { - this.player.ads.endLinearAdMode(); - }); - } + // in a real plugin, you might fetch ad inventory here + player.trigger('adsready'); - log(...args) { - if (this.options_.debug) { - console.log(`Aniview Debug:`, JSON.stringify(args)); - } + // window.player.ads(); + // + // // To help with debugging, we'll add a global vjs object with the video js player + // window.aniview = player; + // + // this.player = player; + // + // setTimeout(function(){ + // + // }) + // + // // request ads whenever there's new video content + // window.player.on('contentchanged', () => { + // console.log('CONTENT CHANGED'); + // // in a real plugin, you might fetch your ad inventory here + // player.trigger('adsready'); + // }); + // + // // Plugin event listeners + // window.player.on('readyforpreroll', (event) => this.onReadyForPreroll(event)); + // + // window.player.on('readyforpreroll', function(event){ + // console.log('ready for preroll'); + // }) + // } + // + // onReadyForPreroll(event) { + // // send event when ad is playing to remove loading spinner + // window.player.on('adstart', () => { + // console.log('ad playing'); + // this.player.trigger('ads-ad-started'); + // }); + // + // // resume content when all your linear ads have finished + // window.player.on('adend', () => { + // console.log('ad ended'); + // window.player.play() + // this.player.ads.endLinearAdMode(); + // }); + // } + // + // log(...args) { + // if (this.options_.debug) { + // console.log(`Aniview Debug:`, JSON.stringify(args)); + // } + // } } } diff --git a/ui/component/viewers/videoViewer/internal/videojs.jsx b/ui/component/viewers/videoViewer/internal/videojs.jsx index dd1799b98..280191825 100644 --- a/ui/component/viewers/videoViewer/internal/videojs.jsx +++ b/ui/component/viewers/videoViewer/internal/videojs.jsx @@ -6,6 +6,8 @@ import * as ICONS from 'constants/icons'; import * as KEYCODES from 'constants/keycodes'; import classnames from 'classnames'; import videojs from 'video.js'; +import 'videojs-contrib-ads'; +import 'videojs-ima'; import 'video.js/dist/alt/video-js-cdn.min.css'; import eventTracking from 'videojs-event-tracking'; import * as OVERLAY from './overlays'; @@ -85,10 +87,10 @@ function hitsTwentyPercent() { console.log(rand); console.log('rand'); - setTimeout(function(){ - console.log('play here'); - player.play() - }, 1000) + // setTimeout(function(){ + // console.log('play here'); + // player.play() + // }, 1000) return true @@ -565,14 +567,50 @@ export default React.memo(function VideoJs(props: Props) { // this seems like a weird thing to have to check for here if (!player) return; + // Modified to work with IMA + const macroUrl = + `https://vast.aniview.com/api/adserver61/vast/` + + `?AV_PUBLISHERID=60afcbc58cfdb065440d2426` + + `&AV_CHANNELID=612fb75a42715a07645a614c` + + `&AV_URL=[URL]` + + `&cb=[CACHEBUSTING]` + + `&AV_WIDTH=[WIDTH]` + + `&AV_HEIGHT=[HEIGHT]` + + // `&AV_SCHAIN=[SCHAIN_MACRO]` + + // `&AV_CCPA=[CCPA_MACRO]` + + // `&AV_GDPR=[GDPR_MACRO]` + + // `&AV_CONSENT=[CONSENT_MACRO]` + + `&skip=true` + + `&skiptimer=5` + + `&logo=true` + + `&usevslot=true` + + `&vastretry=2` + + `&hidecontrols=false`; + // always have ads on if internal feature is on, // otherwise if not authed, roll for 20% to see an ad const shouldShowAnAd = internalFeatureEnabled || (allowPreRoll && hitsTwentyPercent()); - if (shouldShowAnAd) { - vjs.aniview(); + console.log('BROWSER'); + console.log(videojs.browser); + + const browserIsChrome = videojs.browser.IS_CHROME; + console.log(browserIsChrome) + + if (shouldShowAnAd && browserIsChrome) { + player.ima({adTagUrl: macroUrl}); + + player.ima.on('adend', function(event){ + console.log('AD ENDED') + }) } + player.on('loadstart', function(event){ + console.log('RUNNING HERE!'); + player.play(); + }) + + // Add various event listeners to player player.one('play', onInitialPlay); player.on('play', resolveCtrlText); diff --git a/yarn.lock b/yarn.lock index 96aee291f..5e3a58712 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1820,6 +1820,20 @@ resolved "https://registry.yarnpkg.com/@ungap/from-entries/-/from-entries-0.2.1.tgz#7e86196b8b2e99d73106a8f25c2a068326346354" integrity sha512-CAqefTFAfnUPwYqsWHXpOxHaq1Zo5UQ3m9Zm2p09LggGe57rqHoBn3c++xcoomzXKynAUuiBMDUCQvKMnXjUpA== +"@videojs/http-streaming@2.10.2": + version "2.10.2" + resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-2.10.2.tgz#02e6fcfa74f7850b5f9eb40a8e5c85c9d7d33eaf" + integrity sha512-JTAlAUHzj0sTsge2WBh4DWKM2I5BDFEZYOvzxmsK/ySILmI0GRyjAHx9uid68ZECQ2qbEAIRmZW5lWp0R5PeNA== + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/vhs-utils" "3.0.3" + aes-decrypter "3.1.2" + global "^4.4.0" + m3u8-parser "4.7.0" + mpd-parser "0.19.0" + mux.js "5.13.0" + video.js "^6 || ^7" + "@videojs/http-streaming@2.2.4": version "2.2.4" resolved "https://registry.yarnpkg.com/@videojs/http-streaming/-/http-streaming-2.2.4.tgz#c71bb63dbc4749e35193c4c334430bd8ce728ec0" @@ -1848,6 +1862,15 @@ mux.js "5.11.1" video.js "^6 || ^7" +"@videojs/vhs-utils@3.0.3": + version "3.0.3" + resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-3.0.3.tgz#708bc50742e9481712039695299b32da6582ef92" + integrity sha512-bU7daxDHhzcTDbmty1cXjzsTYvx2cBGbA8hG5H2Gvpuk4sdfuvkZtMCwtCqL59p6dsleMPspyaNS+7tWXx2Y0A== + dependencies: + "@babel/runtime" "^7.12.5" + global "^4.4.0" + url-toolkit "^2.2.1" + "@videojs/vhs-utils@^2.2.1": version "2.3.0" resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-2.3.0.tgz#490a3a00dfc1b51d85d5dcf8f8361e2d4c4d1440" @@ -1866,6 +1889,15 @@ global "^4.4.0" url-toolkit "^2.2.1" +"@videojs/vhs-utils@^3.0.3": + version "3.0.4" + resolved "https://registry.yarnpkg.com/@videojs/vhs-utils/-/vhs-utils-3.0.4.tgz#e253eecd8e9318f767e752010d213587f94bb03a" + integrity sha512-hui4zOj2I1kLzDgf8QDVxD3IzrwjS/43KiS8IHQO0OeeSsb4pB/lgNt1NG7Dv0wMQfCccUpMVLGcK618s890Yg== + dependencies: + "@babel/runtime" "^7.12.5" + global "^4.4.0" + url-toolkit "^2.2.1" + "@videojs/xhr@2.5.1": version "2.5.1" resolved "https://registry.yarnpkg.com/@videojs/xhr/-/xhr-2.5.1.tgz#26bc5a79dbb3b03bfb13742c6ce559f89e90719e" @@ -1875,6 +1907,15 @@ global "~4.4.0" is-function "^1.0.1" +"@videojs/xhr@2.6.0": + version "2.6.0" + resolved "https://registry.yarnpkg.com/@videojs/xhr/-/xhr-2.6.0.tgz#cd897e0ad54faf497961bcce3fa16dc15a26bb80" + integrity sha512-7J361GiN1tXpm+gd0xz2QWr3xNWBE+rytvo8J3KuggFaLg+U37gZQ2BuPLcnkfGffy2e+ozY70RHC8jt7zjA6Q== + dependencies: + "@babel/runtime" "^7.5.5" + global "~4.4.0" + is-function "^1.0.1" + "@webassemblyjs/ast@1.8.5": version "1.8.5" resolved "https://registry.yarnpkg.com/@webassemblyjs/ast/-/ast-1.8.5.tgz#51b1c5fe6576a34953bf4b253df9f0d490d9e359" @@ -2008,6 +2049,11 @@ resolved "https://registry.yarnpkg.com/@wojtekmaj/date-utils/-/date-utils-1.0.3.tgz#2dcfd92881425c5923e429c2aec86fb3609032a1" integrity sha512-1VPkkTBk07gMR1fjpBtse4G+oJqpmE+0gUFB0dg3VIL7qJmUVaBoD/vlzMm/jNeOPfvlmerl1lpnsZyBUFIRuw== +"@xmldom/xmldom@^0.7.2": + version "0.7.5" + resolved "https://registry.yarnpkg.com/@xmldom/xmldom/-/xmldom-0.7.5.tgz#09fa51e356d07d0be200642b0e4f91d8e6dd408d" + integrity sha512-V3BIhmY36fXZ1OtVcI9W+FxQqxVLsPKcNjWigIaa81dLC9IolJl5Mt4Cvhmr0flUnjSpTdrbMTSbXqYqV5dT6A== + "@xtuc/ieee754@^1.2.0": version "1.2.0" resolved "https://registry.yarnpkg.com/@xtuc/ieee754/-/ieee754-1.2.0.tgz#eef014a3145ae477a1cbc00cd1e552336dceb790" @@ -11154,6 +11200,16 @@ mpd-parser@0.17.0: global "^4.4.0" xmldom "^0.5.0" +mpd-parser@0.19.0: + version "0.19.0" + resolved "https://registry.yarnpkg.com/mpd-parser/-/mpd-parser-0.19.0.tgz#8937044040ca85e20398ecf5d94552655e2c6728" + integrity sha512-FDLIXtZMZs99fv5iXNFg94quNFT26tobo0NUgHu7L3XgZvEq1NBarf5yxDFFJ1zzfbcmtj+NRaml6nYIxoPWvw== + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/vhs-utils" "^3.0.2" + "@xmldom/xmldom" "^0.7.2" + global "^4.4.0" + ms@2.0.0: version "2.0.0" resolved "https://registry.yarnpkg.com/ms/-/ms-2.0.0.tgz#5608aeadfc00be6c2901df5f9861788de0d597c8" @@ -11194,6 +11250,13 @@ mux.js@5.11.1: dependencies: "@babel/runtime" "^7.11.2" +mux.js@5.13.0: + version "5.13.0" + resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.13.0.tgz#99c3da21f6c0362a1529729d1c5e5b51f34f606d" + integrity sha512-PkmnzHcTQjUBEHp3KRPQAFoNkJtKlpCEvsYtXDfDrC+/WqbMuxHvoYfmAbHVAH7Sa/KliPVU0dT1ureO8wilog== + dependencies: + "@babel/runtime" "^7.11.2" + mux.js@5.6.7: version "5.6.7" resolved "https://registry.yarnpkg.com/mux.js/-/mux.js-5.6.7.tgz#d39fc85cded5a1257de9f6eeb5cf1578c4a63eb8" @@ -16566,6 +16629,25 @@ vfile@^2.0.0: videojs-font "3.2.0" videojs-vtt.js "^0.15.3" +"video.js@^6.0.1 || ^7": + version "7.15.4" + resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.15.4.tgz#0f96ef138035138cb30bf00a989b6174f0d16bac" + integrity sha512-hghxkgptLUvfkpktB4wxcIVF3VpY/hVsMkrjHSv0jpj1bW9Jplzdt8IgpTm9YhlB1KYAp07syVQeZcBFUBwhkw== + dependencies: + "@babel/runtime" "^7.12.5" + "@videojs/http-streaming" "2.10.2" + "@videojs/vhs-utils" "^3.0.3" + "@videojs/xhr" "2.6.0" + aes-decrypter "3.1.2" + global "^4.4.0" + keycode "^2.2.0" + m3u8-parser "4.7.0" + mpd-parser "0.19.0" + mux.js "5.13.0" + safe-json-parse "4.0.0" + videojs-font "3.2.0" + videojs-vtt.js "^0.15.3" + video.js@^7.0.0: version "7.10.2" resolved "https://registry.yarnpkg.com/video.js/-/video.js-7.10.2.tgz#5156aabad7820e726d72ea6c32324059c68885a4" @@ -16580,7 +16662,7 @@ video.js@^7.0.0: videojs-font "3.2.0" videojs-vtt.js "^0.15.2" -videojs-contrib-ads@^6.6.5, videojs-contrib-ads@^6.9.0: +videojs-contrib-ads@^6.6.5, videojs-contrib-ads@^6.7.0, videojs-contrib-ads@^6.9.0: version "6.9.0" resolved "https://registry.yarnpkg.com/videojs-contrib-ads/-/videojs-contrib-ads-6.9.0.tgz#c792d6fda77254b277545cc3222352fc653b5833" integrity sha512-nzKz+jhCGMTYffSNVYrmp9p70s05v6jUMOY3Z7DpVk3iFrWK4Zi/BIkokDWrMoHpKjdmCdKzfJVBT+CrUj6Spw== @@ -16608,6 +16690,14 @@ videojs-font@3.2.0: resolved "https://registry.yarnpkg.com/videojs-font/-/videojs-font-3.2.0.tgz#212c9d3f4e4ec3fa7345167d64316add35e92232" integrity sha512-g8vHMKK2/JGorSfqAZQUmYYNnXmfec4MLhwtEFS+mMs2IDY398GLysy6BH6K+aS1KMNu/xWZ8Sue/X/mdQPliA== +videojs-ima-player@^0.5.6: + version "0.5.6" + resolved "https://registry.yarnpkg.com/videojs-ima-player/-/videojs-ima-player-0.5.6.tgz#73f5aaaa7111ebffa7cb4eef84b2c6e62421368f" + integrity sha512-3QlzKqExLc30MMB4cRVbYluZGDPbxJ32HQ8nD+cGLM+e/oMwrb/rDyfMm1+fXKMhWKvV+pjiYtwx28hdciLTng== + dependencies: + video.js "^6.0.1 || ^7" + videojs-contrib-ads "^6.7.0" + videojs-ima@^1.11.0: version "1.11.0" resolved "https://registry.yarnpkg.com/videojs-ima/-/videojs-ima-1.11.0.tgz#26ad385e388c3da72372298d7d755b001d05a91d"