Update types in vast-client to version 2.1

This commit is contained in:
Sara Nordmyr da Cunha 2018-12-27 17:17:46 +01:00
parent 72810f1a57
commit 64e58df5b8
4 changed files with 368 additions and 219 deletions

View File

@ -1,79 +1,94 @@
// Type definitions for vast-client 1.7
// Type definitions for vast-client 2.1
// Project: https://github.com/dailymotion/vast-client-js#readme
// Definitions by: John G. Gainfort, Jr. <https://github.com/jgainfort>
// Definitions by: John G. Gainfort Jr. <https://github.com/jgainfort>, Sara Nordmyr da Cunha <https://github.com/kobawan>
// Definitions: https://github.com/DefinitelyTyped/DefinitelyTyped
// TypeScript Version: 2.8
export const client: VastClient;
export const parser: VastParser;
import { EventEmitter } from 'events';
export class tracker {
export class VASTTracker extends EventEmitter {
/**
* The VAST tracker constructor will process the tracking URLs of the selected ad/creative and returns an instance of VASTTracker.
* You can create an instance with new DMVAST.tracker( ad , creative ).
*
* Object ad Reference to the <Ad> element of the selected mediaFile
* Object creative Reference to the <Creative> element of the selected mediaFile
* Object variationd - An optional reference to the selected <NonLinear>/<Companion> element for non-linear ads
*/
constructor(ad: VastAd, creative: VastCreativeLinear, companion?: VastCreativeCompanion);
constructor(
/**
* An optional instance of VASTClient that can be updated by the tracker.
*/
client: VASTClient | null,
/**
* The ad of the selected mediaFile to track
*/
ad: VastAd,
/**
* The creative of the selected mediaFile to track
*/
creative: VastCreativeLinear,
/**
* An optional variation of the creative, for Companion and NonLinear Ads
*/
variation?: VastCreativeCompanion | VastCreativeNonLinear,
);
/**
* Add a listener function for the specified event.
*
* eventName Name of the event to attach the listener to. See events below for all details.
* listener Method to be called when the event is emitted.
* Sets the duration of the ad and updates the quartiles based on that.
*/
on(eventName: string, listener: (data?: any) => void): void;
setDuration(duration: number): void;
/**
* Remove a listener function for the specified event.
*
* eventName Name of the event.
* listener Method to remove. Will remove all listeners for the given event if no specific callback is passed.
* Update the current time value.
* This is required for tracking time related events such as start, firstQuartile, midpoint, thirdQuartile or rewind.
*/
off(eventName: string, listener?: () => void): void;
/**
* Remove all listener functions for the specified event.
*
* eventName Name of the event.
*/
removeAllListeners(eventName: string): void;
/**
* Update the current time value. This is required for tracking time related events such as start, firstQuartile, midpoint, thirdQuartile or rewind.
*
* progess Current playback time in seconds.
*/
setProgress(progress: number): void;
setProgress(
/**
* Current playback time in seconds.
*/
progress: number
): void;
/**
* Update the mute state and call the mute/unmute tracking URLs. Emit a mute or unmute event.
*
* muted Indicate if the video is muted or not.
*/
setMuted(muted: boolean): void;
setMuted(
/**
* Indicate if the video is muted or not.
*/
muted: boolean
): void;
/**
* Update the pause state and call the resume/pause tracking URLs. Emit a resume or pause event.
*
* paused Indicate if the video is paused or not.
*/
setPaused(paused: boolean): void;
setPaused(
/**
* Indicate if the video is paused or not.
*/
paused: boolean
): void;
/**
* Update the fullscreen state and call the fullscreen tracking URLs. Emit a fullscreen or exitFullscreen event.
*
* fullscreen Indicate the fullscreen mode.
*/
setFullscreen(fullscreen: boolean): void;
setFullscreen(
/**
* Indicate the fullscreen mode.
*/
fullscreen: boolean
): void;
/**
* Update the expand state and call the expand/collapse tracking URLs. Emit a expand or collapse event
*
* Boolean expanded Indicate if the video is expanded or no
*/
setExpand(expanded: boolean): void;
setExpand(
/**
* Indicate if the video is expanded or no
*/
expanded: boolean,
): void;
/**
* Must be called if you want to overwrite the <Linear> Skipoffset value. This will init the skip countdown duration.
* Then, every time you call setProgress(), it will decrease the countdown and emit a skip-countdown event with the remaining time.
* Do not call this method if you want to keep the original Skipoffset value.
*
* duration The time in seconds until the skip button is displayed.
*/
setSkipDelay(duration: number): void;
setSkipDelay(
/**
* The time in seconds until the skip button is displayed.
*/
duration: number
): void;
/**
* Report the impression URI. Can only be called once. Will report the following URI:
*
@ -82,19 +97,24 @@ export class tracker {
*
* Once done, a creativeView event is emitted.
*/
load(): void;
trackImpression(): void;
/**
* Send a request to the URI provided by the VAST <Error> element. If an [ERRORCODE] macro is included, it will be substitute with code.
*
* code Replaces [ERRORCODE] macro. [ERRORCODE] values are liste in the VAST specification.
*/
errorWithCode(code: string): void;
errorWithCode(
/**
* Replaces [ERRORCODE] macro. [ERRORCODE] values are liste in the VAST specification.
*/
errorCode: string
): void;
/**
* Must be called when the user watched the linear creative until its end. Call the complete tracking URLs. Emit a complete events when done.
* Must be called when the user watched the linear creative until its end. Call the complete tracking URLs.
* Emit a complete events when done.
*/
complete(): void;
/**
* Must be called when the player or the window is closed during the ad. Call the closeLinear (in VAST 3.0) and close tracking URLs. Emit a closeLinear or a close event when done.
* Must be called when the player or the window is closed during the ad. Call the closeLinear (in VAST 3.0) and close tracking URLs.
* Emit a closeLinear or a close event when done.
*/
close(): void;
/**
@ -102,43 +122,68 @@ export class tracker {
*/
skip(): void;
/**
* Must be called when the user clicks on the creative. Call the tracking URLs. Emit a clickthrough event with the resolved clickThrough URL when done.
* Must be called when the user clicks on the creative. Call the tracking URLs.
* Emit a clickthrough event with the resolved clickThrough URL when done.
*/
click(): void;
}
export interface VastClient {
/**
* Used for ignoring the first n calls. Automatically reset 1 hour after the 1st ignored call. Free Lunch capping is disable if sets to 0.
* Default: 0
*/
export class VASTClient {
constructor(
/**
* Used for ignoring the first n calls. Automatically reset 1 hour after the 1st ignored call. Free Lunch capping is disable if sets to 0.
* Default: 0
*/
cappingFreeLunch?: number,
/**
* Used for ignoring calls that happen n ms after the previous call. Minimum time interval is disabled if sets to 0.
* Default: 0
*/
cappingMinimumTimeInterval?: number,
/**
* Optional custom storage to be used instead of the default one
*/
customStorage?: VASTClientCustomStorage,
);
cappingFreeLunch: number;
/**
* Used for ignoring calls that happen n ms after the previous call. Minimum time interval is disabled if sets to 0.
* Default: 0
*/
cappingMinimumTimeInterval: number;
storage: VASTClientCustomStorage | Storage;
/**
* Fetch a URL and parse the response into a valid VAST object.
*
* String url Contains the URL for fetching the VAST XML document.
* Object options An optional set of key/value to configure the Ajax request:
* String response A VAST XML document. When response is provided, no Ajax request is made and thus the url parameter is ignored
* Object urlhandler A URL handler module, used to fetch the VAST document instead of the default ones.
* Boolean withCredentials A boolean to enable the withCredentials options for the XHR and FLASH URLHandlers.
* Number wrapperLimit A number of available Wrapper responses that can be received with no InLine response.
* Function done Method to be called once the VAST document is parsed. The VAST JS object is passed as the 1st parameter. If null, an error is provided as a 2nd parameter.
* @param url Contains the URL for fetching the VAST XML document.
* @param options An optional set of key/value to configure the Ajax request
*/
get(url: string, done: (response: VastResponse, error: Error) => void): void;
get(url: string, options: VastRequestOptions, done: (response: VastResponse, error: Error) => void): void;
get(url: string, options?: VastRequestOptions): Promise<VastResponse>;
/**
* Returns a boolean indicating if there are more ads to resolve for the current parsing.
*/
hasRemainingAds(): boolean;
/**
* Resolves the next group of ads. If all is true resolves all the remaining ads.
*/
getNextAds(all?: boolean): Promise<VastResponse>;
/**
* Returns the instance of VASTParser used by the client to parse the VAST.
* Use it to directly call a method provided by the VASTParser class.
*/
getParser(): VASTParser;
}
export interface VastParser {
export class VASTParser extends EventEmitter {
/**
* util method for handling urls, it is used to make the requests.
*/
urlHandler: VASTClientUrlHandler;
/**
* Add the replace function at the end of the URLTemplateFilters array.
* All functions in URLTemplateFilters will be called with the VAST URL as parameter before fetching the VAST URL document.
*/
addURLTemplateFilter(cb: (vastUrl: string) => string): void;
/**
* Removes the last element of the url templates filters array.
*/
removeURLTemplateFilter(): void;
/**
* Reset URLTemplateFilters to empty, previous replace function set with addURLTemplateFilter() are no longer called.
*/
@ -148,70 +193,102 @@ export interface VastParser {
*/
countURLTemplateFilters(): number;
/**
* Parse an VAST xml, resolve any wrappers and execute callback function done
*
* String XMLDocument A VAST XML document.
* Object options An optional set of key/value to configure the Ajax request:
* Object urlhandler A URL handler module, used to fetch VASTAdTagURI URL. If defined, will be used instead of the default ones.
* Boolean withCredentials A boolean to enable the withCredentials options for the XHR and FLASH URLHandlers.
* Number wrapperLimit A number of available Wrapper responses that can be received with no InLine response.
* Function done Method to be called once the VAST document is parsed. When at least 1 valid <inline> has been found, the 1st parameter will be an array of VASTAd instances.
* Hoverwise, in case of no ads, it will be null, and an error as a 2nd parameter is provided.
* Tracks the error provided in the errorCode parameter and emits a VAST-error event for the given error.
*/
load(xml: string, done: (response: VastResponse, error: Error) => void): void;
load(xml: string, options: VastRequestOptions, done: (response: VastResponse, error: Error) => void): void;
trackVastError(
/**
* An Array of url templates to use to make the tracking call
*/
urlTemplates: string[],
errorCode: Pick<VastError, 'ERRORCODE'>,
...data: Array<Pick<VastError, Exclude<keyof VastError, 'ERRORCODE'>>>,
): void;
/**
* Add the listener function for the event named eventName. eventName value can be :
*
* String VAST-error emitted when the parser encountered a VAST error (ie: no ads, warapper timeout...).
* The VAST error code is passed to the listener function as a parameter.
* Fetches a VAST document for the given url.
* Returns a Promise which resolves with the fetched xml or rejects with an error, according to the result of the request.
*/
on(eventName: string, listener: (error: VastError) => void): void;
fetchVAST(
/**
* The url to request the VAST document.
*/
url: string,
/**
* how many times the current url has been wrapped
*/
wrapperDepth?: number,
/**
* url of original wrapper
*/
originalUrl?: string
): Promise<Document>;
/**
* Add a one time listener function for the event named eventName.
* Fetches and parses a VAST for the given url.
* Returns a Promise which resolves with a fully parsed VASTResponse or rejects with an Error.
*/
once(eventName: string, listener: (data?: any) => void): void;
getAndParseVAST(
/**
* The url to request the VAST document.
*/
url: string,
/**
* An optional Object of parameters to be used in the parsing process.
*/
options?: VastRequestOptions,
): Promise<VastResponse>;
/**
* Fetch a URL and parse the response into a valid VAST object.
*
* String url The VAST XML document URL to fetch.
* Object options An optional set of key/value to configure the Ajax request:
* Object urlhandler A URL handler module, used to fetch the VAST document instead of the default ones.
* Boolean withCredentials A boolean to enable the withCredentials options for the XHR and FLASH URLHandlers.
* Number wrapperLimit A number of available Wrapper responses that can be received with no InLine response.
* Function done Method to be called once the VAST document is parsed. When at least 1 valid <inline> has been found, the 1st parameter will be an array of VASTAd instances.
* Hoverwise, in case of no ads, it will be null, and an error as a 2nd parameter is provided.
* Parses the given xml Object into a VASTResponse.
* Returns a Promise which either resolves with the fully parsed VASTResponse or rejects with an Error.
*/
parse(url: string, done: (response: VastResponse, error: Error) => void): void;
parse(url: string, options: VastRequestOptions, done: (response: VastResponse, error: Error) => void): void;
/**
* Remove the specified listener for the event named eventName.
*/
off(eventName: string, listener: (error: VastError) => void): void;
/**
* Remove replace function from URLTemplateFilters array.
* Replace function won't be called on the next VAST URL encountred by the parser.
*/
removeURLTemplateFilter(cb: (vastUrl: string) => string): void;
parseVAST(
/**
* A VAST XML document
*/
vastXml: Document,
/**
* An optional Object of parameters to be used in the parsing process.
*/
options?: VastRequestOptions,
): Promise<VastResponse>;
}
export interface VASTClientCustomStorage {
getItem(key: string): string | null;
setItem(key: string, val: string): void;
[key: string]: any | (() => any);
}
export function UrlHandlerCbType(err: null, xml: XMLDocument): void;
export function UrlHandlerCbType(err: Error): void;
export interface VASTClientUrlHandler {
get(
url: string,
options: { timeout: number, withCredentials: boolean },
cb: typeof UrlHandlerCbType,
): void;
}
export interface VastRequestOptions {
/**
* A VAST XML document. When response is provided, no Ajax request is made and thus the url parameter is ignored.
* A custom timeout for the requests (default 0)
*/
response?: string;
timeout?: number;
/**
* A URL handler module, used to fetch the VAST document instead of the default ones.
*/
urlhandler?: any;
/**
* A boolean to enable the withCredentials options for the XHR and FLASH URLHandlers.
* A boolean to enable the withCredentials options for the XHR and FLASH URLHandlers (default false)
*/
withCredentials?: boolean;
/**
* A number of available Wrapper responses that can be received with no InLine response.
* A number of Wrapper responses that can be received with no InLine response (default 0)
*/
wrapperLimit?: number;
/**
* Custom urlhandler to be used instead of the default ones urlhandlers
*/
urlHandler?: VASTClientUrlHandler;
/**
* Allows you to parse all the ads contained in the VAST or to parse them ad by ad or adPod by adPod (default true)
*/
resolveAll?: boolean;
}
export interface VastResponse {
@ -228,25 +305,28 @@ export interface VastError {
* VAST error 302: Wrapper limit reached.
* VAST error 303: No VAST response after one or more Wrappers.
*/
ERRORCODE: string;
ERRORCODE: string | number;
ERRORMESSAGE?: string;
extensions?: VastAdExtension[];
system?: VastSystem | string | null;
}
export interface VastCreative {
id: string;
adId: string;
id: string | null;
adId: string | null;
trackingEvents: VastTrackingEvents;
apiFramework: any;
sequence: any;
apiFramework: string | null;
sequence: string | number | null;
type: string;
}
export interface VastCreativeLinear extends VastCreative {
adParameters: any;
adParameters: string | null;
duration: number;
icons: string[];
icons: VastIcon[];
mediaFiles: VastMediaFile[];
skipDelay: boolean;
videoClickThroughURLTemplate: string;
skipDelay: number | null;
videoClickThroughURLTemplate: string | null;
videoClickTrackingURLTemplates: string[];
videoCustomClickURLTempaltes: string[];
}
@ -260,19 +340,18 @@ export interface VastCreativeCompanion extends VastCreative {
}
export interface VastAd {
advertiser: any;
advertiser: string | null;
creatives: VastCreative[];
description: string;
description: string | null;
errorURLTemplates: string[];
extensions: VastAdExtension[];
id: string;
id: string | null;
impressionURLTemplates: string[];
pricing: any;
sequence: string;
survey: any;
system: VastSystem;
title: string;
hasHLS: boolean;
pricing: string | null;
sequence: string | null;
survey: string | null;
system: VastSystem | string | null;
title: string | null;
}
export interface VastAdExtension {
@ -282,67 +361,71 @@ export interface VastAdExtension {
export interface VastAdAttributes {
type: string;
fallback_index: string | null;
}
export interface VastAdExtensionChild {
attributes: VastAdChildAttributes;
name: string;
value: string;
name: string | undefined;
value: string | number;
}
export interface VastAdChildAttributes {
name: string;
[key: string]: any;
}
export interface VastNonLinearAd {
nonLinearClickTrackingURLTemplates: string[];
nonLinearClickThroughURLTemplate: string;
adParameters: string;
type: string;
iframeResource: string;
htmlResource: string;
id: string;
nonLinearClickThroughURLTemplate: string | null;
adParameters: string | null;
type: string | null;
iframeResource: string | null;
htmlResource: string | null;
id: string | null;
width: string;
height: string;
expandedWidth: string;
expandedHeight: string;
scalablle: boolean;
scalable: boolean;
maintainAspectRatio: boolean;
minSuggestedDuration: number;
apiFramework: any;
apiFramework: string;
staticResource: string | null;
}
export interface VastCompanionAd {
companionClickThroughURLTemplate: string;
companionClickTrackingURLTemplate: string;
companionClickThroughURLTemplate: string | null;
companionClickTrackingURLTemplate: string | null | undefined;
companionClickTrackingURLTemplates: string[];
height: string;
htmlResource: string;
id: string;
iframeResource: string;
staticResource: string;
htmlResource: string | null;
id: string | null;
iframeResource: string | null;
staticResource: string | null;
trackingEvents: VastCompanionTrackingEvents;
type: string;
type: string | null;
width: string;
altText: string | null;
}
export interface VastCompanionTrackingEvents {
creativeView: string[];
[key: string]: string[];
}
export interface VastMediaFile {
apiFramework: any;
apiFramework: string | null;
bitrate: number;
codec: string;
codec: string | null;
deliveryType: string;
fileURL: string;
fileURL: string | null;
height: number;
id: string;
maintainAspectRatio: boolean;
id: string | null;
maintainAspectRatio: boolean | null;
maxBitrate: number;
mimeType: string;
mimeType: string | null;
minBitrate: number;
scalable: any;
scalable: boolean | null;
width: number;
}
@ -351,9 +434,28 @@ export interface VastTrackingEvents {
firstQuartile: string[];
midpoint: string[];
thirdQuartile: string[];
[key: string]: string[];
}
export interface VastSystem {
value: string;
version: string;
version: string | null;
}
export interface VastIcon {
program: string | null;
height: number;
width: number;
xPosition: number;
yPosition: number;
apiFramework: string | null;
offset: string | null;
duration: number;
type: string | null;
staticResource: string | null;
htmlResource: string | null;
iframeResource: string | null;
iconClickThroughURLTemplate: string | null;
iconClickTrackingURLTemplates: string[];
iconViewTrackingURLTemplate: string | null;
}

View File

@ -21,4 +21,4 @@
"index.d.ts",
"vast-client-tests.ts"
]
}
}

View File

@ -1,8 +1,7 @@
{
"extends": "dtslint/dt.json",
"rules": {
// TODO
"no-angle-bracket-type-assertion": false,
"no-object-literal-type-assertion": false
}
"extends": "dtslint/dt.json",
"rules": {
"no-object-literal-type-assertion": false,
"no-any-union": false
}
}

View File

@ -1,85 +1,133 @@
import * as DMVAST from 'vast-client';
import {
VASTClient,
VASTParser,
VASTTracker,
VastResponse,
VastAd,
VastCreativeLinear,
VASTClientCustomStorage,
VASTClientUrlHandler,
VastCreativeCompanion,
} from 'vast-client';
const VASTUrl = 'http://example.dailymotion.com/vast.xml';
function cb(response: DMVAST.VastResponse, error: Error): void {
if (error) return;
const VASTXml = new DOMParser().parseFromString("<vast></vast>", "text/xml");
function cbSuccess(response: VastResponse): void {
// process the VAST response
const ads: DMVAST.VastAd[] = response.ads;
const ads: VastAd[] = response.ads;
const linearCreative = response.ads[0].creatives.filter(creative => {
return creative.type === 'linear';
});
if (linearCreative && linearCreative.length > 0) {
const creative = linearCreative[0] as DMVAST.VastCreativeLinear;
const creative = linearCreative[0] as VastCreativeLinear;
const mediaFiles = creative.mediaFiles;
}
}
function cbError(error: Error): void {
// handle error
return;
}
// CLIENT
// Ignore the first 2 calls
DMVAST.client.cappingFreeLunch = 2;
const customStorage: VASTClientCustomStorage = {
data: {},
getItem(key) {
return this.data[key];
},
setItem(key, value) {
this.data[key] = value;
},
};
// Those following DMVAST.client.get calls won't be done
DMVAST.client.get(VASTUrl, cb);
DMVAST.client.get(VASTUrl, cb);
const client = new VASTClient(5, 60000, customStorage);
// Ignore the first 2 calls
client.cappingFreeLunch = 2;
// Those following client.get calls won't be done
client.get(VASTUrl).then(cbSuccess).catch(cbError);
client.get(VASTUrl).then(cbSuccess).catch(cbError);
// VASTUrl will be called
DMVAST.client.get(VASTUrl, cb);
client.get(VASTUrl).then(cbSuccess).catch(cbError);
// Ignore any call made 5 minutes or less after one.
DMVAST.client.cappingMinimumTimeInterval = 5 * 60 * 1000;
// Work
DMVAST.client.get(VASTUrl, cb);
client.cappingMinimumTimeInterval = 5 * 60 * 1000;
// ...
// 2 minutes later
// Ignored
DMVAST.client.get(VASTUrl, cb);
client.get(VASTUrl).then(cbSuccess).catch(cbError);
// ...
// 4 minutes later
// Work
DMVAST.client.get(VASTUrl, cb);
client.get(VASTUrl).then(cbSuccess).catch(cbError);
// with options
const urlHandler: VASTClientUrlHandler = {
get: (url, options, cb) => {
// get xml
cb(null, VASTXml);
// or call with error
cb(new Error("no vast"));
},
};
client.get(VASTUrl, { urlHandler }).then(cbSuccess).catch(cbError);
if (client.hasRemainingAds()) {
client.getNextAds()
.then(res => {
// Do something with the next Ads
})
.catch(err => {
// Deal with the error
});
}
// PARSER
DMVAST.parser.addURLTemplateFilter((vastUrl: string): string => {
return vastUrl.replace('[DOMAIN]', 'mywebsite.com');
});
const count = DMVAST.parser.countURLTemplateFilters();
DMVAST.parser.clearUrlTemplateFilters();
const xml = 'some xml';
const options = {
withCredentials: true,
wrapperLimit: 5
};
DMVAST.parser.load(xml, options, cb);
const url = 'http://example.dailymotion.com/vast.xml';
DMVAST.parser.parse(url, options, cb);
const parser = new VASTParser();
const replaceDomain = (url: string): string => {
return url.replace('[DOMAIN]', 'mywebsite.com');
};
DMVAST.parser.addURLTemplateFilter(replaceDomain);
DMVAST.parser.removeURLTemplateFilter(replaceDomain);
parser.addURLTemplateFilter(replaceDomain);
const count = parser.countURLTemplateFilters();
parser.clearUrlTemplateFilters();
parser.trackVastError(['http://errorUrlTemplate.com/'], { ERRORCODE: 301 }, { ERRORMESSAGE: "error message" });
parser.fetchVAST(VASTUrl).then(xml => {
// do something with xml document
return xml.documentElement.nodeName === 'VAST';
}).catch(error => {
// handle error
});
const options = {
withCredentials: true,
wrapperLimit: 5
};
parser.getAndParseVAST(VASTUrl, options).then(cbSuccess).catch(cbError);
parser.parseVAST(VASTXml).then(cbSuccess).catch(cbError);
// TRACKER
// Create a VAST Tracker instance for a linear ad
const vastTracker = new DMVAST.tracker({} as DMVAST.VastAd, {} as DMVAST.VastCreativeLinear);
const vastTracker = new VASTTracker(client, {} as VastAd, {} as VastCreativeLinear);
// Create a VAST Tracker instance for a companion ad
// const vastTracker = new DMVAST.tracker({} as DMVAST.VastAd, {} as DMVAST.VastCreativeLinear, {} as DMVAST.VastCreativeCompanion);
const vastTrackerCompanion = new VASTTracker(client, {} as VastAd, {} as VastCreativeLinear, {} as VastCreativeCompanion);
const onSkip = () => {
console.log('Ad unit skipped');
@ -88,13 +136,13 @@ const onSkip = () => {
// Log a message when event 'skip' is emitted
vastTracker.on('skip', onSkip);
// Stop logging message
vastTracker.off('skip', onSkip);
// vastTracker.off('skip', onSkip);
const player: HTMLVideoElement = <HTMLVideoElement> document.getElementById('playerId');
const player = document.getElementById('playerId') as HTMLVideoElement;
// Bind a timeupdate listener to the player
player.addEventListener('timeupdate', (e) => {
vastTracker.setProgress((<HTMLVideoElement> e.target).currentTime);
vastTracker.setProgress((e.target as HTMLVideoElement).currentTime);
});
vastTracker.on('firstQuartile', () => {
@ -103,7 +151,7 @@ vastTracker.on('firstQuartile', () => {
// Bind a volumechange listener to the player
player.addEventListener('volumechange', (e) => {
vastTracker.setMuted((<HTMLVideoElement> e.target).muted);
vastTracker.setMuted((e.target as HTMLVideoElement).muted);
});
vastTracker.on('mute', () => {
@ -129,7 +177,7 @@ vastTracker.on('pause', () => {
// Bind fullscreenchange listener to the player
// Note that the fullscreen API is still vendor-prefixed in browsers
player.addEventListener('fullscreenchange', (e) => {
const isFullscreen = !!document.fullscreenElement;
const isFullscreen = true;
vastTracker.setFullscreen(isFullscreen);
});
@ -144,7 +192,7 @@ vastTracker.on('exitFullscreen', () => {
// Sample function for a button that increase/decrease player size
let playerExpanded = false;
const expandButton = <HTMLButtonElement> document.getElementById('buttonId');
const expandButton = document.getElementById('buttonId') as HTMLButtonElement;
function increasePlayerSize(): void {
// do nothing
@ -177,7 +225,7 @@ vastTracker.setSkipDelay(5);
// Bind canplay listener to the player
player.addEventListener('canplay', () => {
vastTracker.load();
vastTracker.trackImpression();
});
vastTracker.on('creativeView', () => {
@ -216,7 +264,7 @@ vastTracker.on('close', () => {
});
// Bind click listener to the skip button
const skipButton = <HTMLButtonElement> document.getElementById('buttonId');
const skipButton = document.getElementById('buttonId') as HTMLButtonElement;
skipButton.addEventListener('click', () => {
vastTracker.skip();