Compare commits

...

9 commits

Author SHA1 Message Date
Anthony
939be05e5d
working prototype 2021-10-12 19:02:11 +03:00
Anthony
85447185a8
enable show internal feature 2021-10-11 18:56:50 +03:00
Anthony
59a9f46c29
allow for embeds 2021-10-11 17:57:32 +03:00
Anthony
5b4151bc72
only run twenty percent of the time for unauthed users 2021-10-11 17:11:58 +03:00
Anthony
6c463e7310
bugfix and turn skip back on 2021-10-11 16:19:38 +03:00
Anthony
3afee8e5c9
improving documentation 2021-10-08 18:37:03 +03:00
Anthony
26fc53bb4d
point towards test server 2021-10-07 20:36:48 +03:00
Anthony
858d038c48
switch macro to aniview 2021-10-05 20:16:27 +03:00
Anthony
65994c4ebf
re enable preload ads 2021-10-05 20:05:43 +03:00
6 changed files with 117 additions and 56 deletions

View file

@ -240,7 +240,7 @@ const analytics: Analytics = {
startWatchmanIntervalIfNotRunning();
}
},
videoStartEvent: (claimId, duration, poweredBy, passedUserId, canonicalUrl, passedPlayer) => {
videoStartEvent: (claimId, timeToStartVideo, poweredBy, passedUserId, canonicalUrl, passedPlayer) => {
// populate values for watchman when video starts
userId = passedUserId;
claimUrl = canonicalUrl;
@ -249,8 +249,8 @@ const analytics: Analytics = {
videoType = passedPlayer.currentSource().type;
videoPlayer = passedPlayer;
sendPromMetric('time_to_start', duration);
sendMatomoEvent('Media', 'TimeToStart', claimId, duration);
sendPromMetric('time_to_start', timeToStartVideo);
sendMatomoEvent('Media', 'TimeToStart', claimId, timeToStartVideo);
},
error: (message) => {
return new Promise((resolve) => {

View file

@ -327,19 +327,17 @@ function App(props: Props) {
// Load IMA3 SDK for aniview: DISABLED FOR NOW
// @if TARGET='web'
// useEffect(() => {
// if (ENABLE_PREROLL_ADS) {
// const script = document.createElement('script');
// script.src = `https://imasdk.googleapis.com/js/sdkloader/ima3.js`;
// script.async = true;
// // $FlowFixMe
// document.body.appendChild(script);
// return () => {
// // $FlowFixMe
// document.body.removeChild(script);
// };
// }
// });
useEffect(() => {
const script = document.createElement('script');
script.src = `https://imasdk.googleapis.com/js/sdkloader/ima3.js`;
script.async = true;
// $FlowFixMe
document.body.appendChild(script);
return () => {
// $FlowFixMe
document.body.removeChild(script);
};
});
// @endif
// @if TARGET='app'

View file

@ -30,9 +30,11 @@ const select = (state, props) => {
const urlParams = new URLSearchParams(search);
const autoplay = urlParams.get('autoplay');
const uri = props.uri;
// TODO: eventually this should be received from DB and not local state (https://github.com/lbryio/lbry-desktop/issues/6796)
const position = urlParams.get('t') !== null ? urlParams.get('t') : makeSelectContentPositionForUri(uri)(state);
const userId = selectUser(state) && selectUser(state).id;
const internalFeature = selectUser(state) && selectUser(state).internal_feature;
const playingUri = selectPlayingUri(state);
const collectionId = urlParams.get(COLLECTIONS_CONSTS.COLLECTION_ID) || (playingUri && playingUri.collectionId);
const isMarkdownOrComment = playingUri && (playingUri.source === 'markdown' || playingUri.source === 'comment');
@ -50,6 +52,7 @@ const select = (state, props) => {
return {
position,
userId,
internalFeature,
collectionId,
nextRecommendedUri,
previousListUri,

View file

@ -26,13 +26,19 @@ const VERSION = '0.0.1';
* */
// TEST PRE-ROLL WITH THIS TAG:
// 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=
// const macroUrl = '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=';
// live channel
// b354389c7adb506d0bd9a4
// ford ad
// 612fb75a42715a07645a614c
// Modified to work with IMA
const macroUrl =
`https://vast.aniview.com/api/adserver61/vast/` +
`?AV_PUBLISHERID=60afcbc58cfdb065440d2426` +
`&AV_CHANNELID=60b354389c7adb506d0bd9a4` +
`&AV_CHANNELID=612fb75a42715a07645a614c` +
`&AV_URL=[URL]` +
`&cb=[CACHEBUSTING]` +
`&AV_WIDTH=[WIDTH]` +
@ -45,7 +51,7 @@ const macroUrl =
`&skiptimer=5` +
`&logo=true` +
`&usevslot=true` +
`&vastretry=5` +
`&vastretry=2` +
`&hidecontrols=false`;
const defaults = {
@ -69,16 +75,16 @@ class AniviewPlugin extends Component {
this.player = player;
// request ads whenever there's new video content
/* player.on('contentchanged', () => {
player.on('contentchanged', () => {
// in a real plugin, you might fetch your ad inventory here
player.trigger('adsready');
}); */
});
// Plugin event listeners
// player.on('readyforpreroll', (event) => this.onReadyForPreroll(event));
player.on('readyforpreroll', (event) => this.onReadyForPreroll(event));
}
/* onReadyForPreroll(event) {
onReadyForPreroll(event) {
// send event when ad is playing to remove loading spinner
this.player.one('adplaying', () => {
this.player.trigger('ads-ad-started');
@ -88,7 +94,7 @@ class AniviewPlugin extends Component {
this.player.one('adended', () => {
this.player.ads.endLinearAdMode();
});
} */
}
log(...args) {
if (this.options_.debug) {

View file

@ -16,7 +16,7 @@ import qualityLevels from 'videojs-contrib-quality-levels';
import isUserTyping from 'util/detect-typing';
// @if TARGET='web'
// Disabled for now.
// import './plugins/videojs-aniview/plugin';
import './plugins/videojs-aniview/plugin';
// @endif
const isDev = process.env.NODE_ENV !== 'production';
@ -60,7 +60,8 @@ type Props = {
adUrl: ?string,
claimId: ?string,
userId: ?number,
// allowPreRoll: ?boolean,
allowPreRoll: ?boolean,
internalFeatureEnabled: ?boolean,
shareTelemetry: boolean,
replay: boolean,
videoTheaterMode: boolean,
@ -77,6 +78,30 @@ type Props = {
// muted?: boolean,
// };
function hitsTwentyPercent() {
// from 0 - 999
var rand = Math.floor(Math.random() * (1000 + 1));
console.log(rand);
console.log('rand');
setTimeout(function(){
console.log('play here');
player.play()
}, 1000)
return true
if (rand > 799) {
return true;
} else {
return false;
}
}
const videoPlaybackRates = [0.25, 0.5, 0.75, 1, 1.1, 1.25, 1.5, 1.75, 2];
const IS_IOS =
@ -178,7 +203,8 @@ export default React.memo<Props>(function VideoJs(props: Props) {
adUrl,
claimId,
userId,
// allowPreRoll,
allowPreRoll,
internalFeatureEnabled,
shareTelemetry,
replay,
videoTheaterMode,
@ -539,6 +565,14 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// this seems like a weird thing to have to check for here
if (!player) return;
// 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();
}
// Add various event listeners to player
player.one('play', onInitialPlay);
player.on('play', resolveCtrlText);
@ -579,6 +613,7 @@ export default React.memo<Props>(function VideoJs(props: Props) {
// I think this is a callback function
const videoNode = containerRef.current && containerRef.current.querySelector('video, audio');
onPlayerReady(player, videoNode);
});

View file

@ -55,6 +55,7 @@ type Props = {
setVideoPlaybackRate: (number) => void,
authenticated: boolean,
userId: number,
internalFeature: boolean,
homepageData?: { [string]: HomepageCat },
shareTelemetry: boolean,
isFloating: boolean,
@ -98,6 +99,7 @@ function VideoViewer(props: Props) {
homepageData,
authenticated,
userId,
internalFeature,
shareTelemetry,
isFloating,
doPlayUri,
@ -152,6 +154,7 @@ function VideoViewer(props: Props) {
};
}, [embedded, videoPlaybackRate]);
// TODO: analytics functionality
function doTrackingBuffered(e: Event, data: any) {
fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => {
data.playerPoweredBy = response.headers.get('x-powered-by');
@ -159,21 +162,37 @@ function VideoViewer(props: Props) {
});
}
/**
* Analytics functionality that is run on first video start
* @param e - event from videojs (from the plugin?)
* @param data - only has secondsToLoad property
*/
function doTrackingFirstPlay(e: Event, data: any) {
let timeToStart = data.secondsToLoad;
// how long until the video starts
let timeToStartVideo = data.secondsToLoad;
if (desktopPlayStartTime !== undefined) {
const differenceToAdd = Date.now() - desktopPlayStartTime;
timeToStart += differenceToAdd;
// TODO: what's happening here briefly?
if (!IS_WEB) {
if (desktopPlayStartTime !== undefined) {
const differenceToAdd = Date.now() - desktopPlayStartTime;
timeToStartVideo += differenceToAdd;
}
}
// send matomo event (embedded is boolean)
analytics.playerStartedEvent(embedded);
// figure out what server the video is served from and then run start analytic event
fetch(source, { method: 'HEAD', cache: 'no-store' }).then((response) => {
// server string such as 'eu-p6'
let playerPoweredBy = response.headers.get('x-powered-by') || '';
analytics.videoStartEvent(claimId, timeToStart, playerPoweredBy, userId, claim.canonical_url, this);
// populates data for watchman, sends prom and matomo event
analytics.videoStartEvent(claimId, timeToStartVideo, playerPoweredBy, userId, claim.canonical_url, this);
});
doAnalyticsView(uri, timeToStart).then(() => {
// hit backend to mark a view
doAnalyticsView(uri, timeToStartVideo).then(() => {
claimRewards();
});
}
@ -256,6 +275,7 @@ function VideoViewer(props: Props) {
clearPosition(uri);
}, [adUrl, autoplayNext, clearPosition, collectionId, embedded, ended, setAdUrl, uri]);
// MORE ON PLAY STUFF
function onPlay(player) {
setEnded(false);
setIsLoading(false);
@ -436,29 +456,28 @@ function VideoViewer(props: Props) {
</>
)}
{!isFetchingAd && (
<VideoJs
adUrl={adUrl}
source={adUrl || source}
sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType}
isAudio={isAudio}
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
onPlayerReady={onPlayerReady}
startMuted={autoplayIfEmbedded}
toggleVideoTheaterMode={toggleVideoTheaterMode}
autoplay={!embedded || autoplayIfEmbedded}
autoplaySetting={autoplayNext}
claimId={claimId}
userId={userId}
allowPreRoll={!embedded && !authenticated}
shareTelemetry={shareTelemetry}
replay={replay}
videoTheaterMode={videoTheaterMode}
playNext={doPlayNext}
playPrevious={doPlayPrevious}
embedded={embedded}
/>
)}
<VideoJs
adUrl={adUrl}
source={adUrl || source}
sourceType={forcePlayer || adUrl ? 'video/mp4' : contentType}
isAudio={isAudio}
poster={isAudio || (embedded && !autoplayIfEmbedded) ? thumbnail : ''}
onPlayerReady={onPlayerReady}
startMuted={autoplayIfEmbedded}
toggleVideoTheaterMode={toggleVideoTheaterMode}
autoplay={!embedded || autoplayIfEmbedded}
autoplaySetting={autoplayNext}
claimId={claimId}
userId={userId}
allowPreRoll={!authenticated} // used to not include embeds, removed for now
internalFeatureEnabled={internalFeature}
shareTelemetry={shareTelemetry}
replay={replay}
videoTheaterMode={videoTheaterMode}
playNext={doPlayNext}
playPrevious={doPlayPrevious}
embedded={embedded}
/>
</div>
);
}