Source code
Revision control
Copy as Markdown
Other Tools
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this
"use strict";
/**
*
* Sites relying on Vidible's video player may experience broken videos if that
* script is blocked. This shim allows users to opt into viewing those videos
* regardless of any tracking consequences, by providing placeholders for each.
*/
if (!window.vidible?.version) {
const originalScript = document.currentScript.src;
const getGUID = () => {
const v = crypto.getRandomValues(new Uint8Array(20));
return Array.from(v, c => c.toString(16)).join("");
};
const sendMessageToAddon = (function () {
const shimId = "Vidible";
const pendingMessages = new Map();
const channel = new MessageChannel();
channel.port1.onerror = console.error;
channel.port1.onmessage = event => {
const { messageId, response } = event.data;
const resolve = pendingMessages.get(messageId);
if (resolve) {
pendingMessages.delete(messageId);
resolve(response);
}
};
function reconnect() {
const detail = {
pendingMessages: [...pendingMessages.values()],
port: channel.port2,
shimId,
};
window.dispatchEvent(new CustomEvent("ShimConnects", { detail }));
}
window.addEventListener("ShimHelperReady", reconnect);
reconnect();
return function (message) {
const messageId = getGUID();
return new Promise(resolve => {
const payload = { message, messageId, shimId };
pendingMessages.set(messageId, resolve);
channel.port1.postMessage(payload);
});
};
})();
const Shimmer = (function () {
// If a page might store references to an object before we replace it,
// ensure that it only receives proxies to that object created by
// `Shimmer.proxy(obj)`. Later when the unshimmed object is created,
// call `Shimmer.unshim(proxy, unshimmed)`. This way the references
// will automatically "become" the unshimmed object when appropriate.
const shimmedObjects = new WeakMap();
const unshimmedObjects = new Map();
function proxy(shim) {
if (shimmedObjects.has(shim)) {
return shimmedObjects.get(shim);
}
const prox = new Proxy(shim, {
get: (target, k) => {
if (unshimmedObjects.has(prox)) {
return unshimmedObjects.get(prox)[k];
}
return target[k];
},
apply: (target, thisArg, args) => {
if (unshimmedObjects.has(prox)) {
return unshimmedObjects.get(prox)(...args);
}
return target.apply(thisArg, args);
},
construct: (target, args) => {
if (unshimmedObjects.has(prox)) {
return new unshimmedObjects.get(prox)(...args);
}
return new target(...args);
},
});
shimmedObjects.set(shim, prox);
shimmedObjects.set(prox, prox);
for (const key in shim) {
const value = shim[key];
if (typeof value === "function") {
shim[key] = function () {
const unshimmed = unshimmedObjects.get(prox);
if (unshimmed) {
return unshimmed[key].apply(unshimmed, arguments);
}
return value.apply(this, arguments);
};
} else if (typeof value !== "object" || value === null) {
shim[key] = value;
} else {
shim[key] = Shimmer.proxy(value);
}
}
return prox;
}
function unshim(shim, unshimmed) {
unshimmedObjects.set(shim, unshimmed);
for (const prop in shim) {
if (prop in unshimmed) {
const un = unshimmed[prop];
if (typeof un === "object" && un !== null) {
unshim(shim[prop], un);
}
} else {
unshimmedObjects.set(shim[prop], undefined);
}
}
}
return { proxy, unshim };
})();
const extras = [];
const playersByNode = new WeakMap();
const playerData = new Map();
const getJSONPVideoPlacements = () => {
return document.querySelectorAll(
`script[src*="delivery.vidible.tv/jsonp"]`
);
};
const allowVidible = () => {
if (allowVidible.promise) {
return allowVidible.promise;
}
const shim = window.vidible;
window.vidible = undefined;
allowVidible.promise = sendMessageToAddon("optIn")
.then(() => {
return new Promise((resolve, reject) => {
const script = document.createElement("script");
script.src = originalScript;
script.addEventListener("load", () => {
Shimmer.unshim(shim, window.vidible);
for (const args of extras) {
window.visible.registerExtra(...args);
}
for (const jsonp of getJSONPVideoPlacements()) {
const { src } = jsonp;
const jscript = document.createElement("script");
jscript.onload = resolve;
jscript.src = src;
jsonp.replaceWith(jscript);
}
for (const [playerShim, data] of playerData.entries()) {
const { loadCalled, on, parent, placeholder, setup } = data;
placeholder?.remove();
const player = window.vidible.player(parent);
Shimmer.unshim(playerShim, player);
for (const [type, fns] of on.entries()) {
for (const fn of fns) {
try {
player.on(type, fn);
} catch (e) {
console.error(e);
}
}
}
if (setup) {
player.setup(setup);
}
if (loadCalled) {
player.load();
}
}
resolve();
});
script.addEventListener("error", () => {
script.remove();
reject();
});
document.head.appendChild(script);
});
})
.catch(() => {
window.vidible = shim;
delete allowVidible.promise;
});
return allowVidible.promise;
};
const createVideoPlaceholder = (service, callback) => {
const placeholder = document.createElement("div");
placeholder.style = `
position: absolute;
width: 100%;
height: 100%;
min-width: 160px;
min-height: 100px;
top: 0px;
left: 0px;
background: #000;
color: #fff;
text-align: center;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
background-image: url(${PlayIconURL});
background-position: 50% 47.5%;
background-repeat: no-repeat;
background-size: 25% 25%;
-moz-text-size-adjust: none;
-moz-user-select: none;
color: #fff;
align-items: center;
padding-top: 200px;
font-size: 14pt;
`;
placeholder.textContent = `Click to allow blocked ${service} content`;
placeholder.addEventListener("click", evt => {
evt.isTrusted && callback();
});
return placeholder;
};
const Player = function (parent) {
const existing = playersByNode.get(parent);
if (existing) {
return existing;
}
const player = Shimmer.proxy(this);
playersByNode.set(parent, player);
const placeholder = createVideoPlaceholder("Vidible", allowVidible);
parent.parentNode.insertBefore(placeholder, parent);
playerData.set(player, {
on: new Map(),
parent,
placeholder,
});
return player;
};
const changeData = function (fn) {
const data = playerData.get(this);
if (data) {
fn(data);
playerData.set(this, data);
}
};
Player.prototype = {
addEventListener() {},
destroy() {
const { placeholder } = playerData.get(this);
placeholder?.remove();
playerData.delete(this);
},
dispatchEvent() {},
getAdsPassedTime() {},
getAllMacros() {},
getCurrentTime() {},
getDuration() {},
getHeight() {},
getPixelsLog() {},
getPlayerContainer() {},
getPlayerInfo() {},
getPlayerStatus() {},
getRequestsLog() {},
getStripUrl() {},
getVolume() {},
getWidth() {},
hidePlayReplayControls() {},
isMuted() {},
isPlaying() {},
load() {
changeData(data => (data.loadCalled = true));
},
mute() {},
on(type, fn) {
changeData(({ on }) => {
if (!on.has(type)) {
on.set(type, new Set());
}
on.get(type).add(fn);
});
},
off(type, fn) {
changeData(({ on }) => {
on.get(type)?.delete(fn);
});
},
overrideMacro() {},
pause() {},
play() {},
playVideoByIndex() {},
removeEventListener() {},
seekTo() {},
sendBirthDate() {},
sendKey() {},
setup(s) {
changeData(data => (data.setup = s));
return this;
},
setVideosToPlay() {},
setVolume() {},
showPlayReplayControls() {},
toggleFullscreen() {},
toggleMute() {},
togglePlay() {},
updateBid() {},
version() {},
volume() {},
};
const vidible = {
ADVERT_CLOSED: "advertClosed",
AD_END: "adend",
AD_META: "admeta",
AD_PAUSED: "adpaused",
AD_PLAY: "adplay",
AD_START: "adstart",
AD_TIMEUPDATE: "adtimeupdate",
AD_WAITING: "adwaiting",
AGE_GATE_DISPLAYED: "agegatedisplayed",
BID_UPDATED: "BidUpdated",
CAROUSEL_CLICK: "CarouselClick",
CONTEXT_ENDED: "contextended",
CONTEXT_STARTED: "contextstarted",
ENTER_FULLSCREEN: "playerenterfullscreen",
EXIT_FULLSCREEN: "playerexitfullscreen",
FALLBACK: "fallback",
FLOAT_END_ACTION: "floatended",
FLOAT_START_ACTION: "floatstarted",
HIDE_PLAY_REPLAY_BUTTON: "hideplayreplaybutton",
LIGHTBOX_ACTIVATED: "lightboxactivated",
LIGHTBOX_DEACTIVATED: "lightboxdeactivated",
MUTE: "Mute",
PLAYER_CONTROLS_STATE_CHANGE: "playercontrolsstatechaned",
PLAYER_DOCKED: "playerDocked",
PLAYER_ERROR: "playererror",
PLAYER_FLOATING: "playerFloating",
PLAYER_READY: "playerready",
PLAYER_RESIZE: "playerresize",
PLAYLIST_END: "playlistend",
SEEK_END: "SeekEnd",
SEEK_START: "SeekStart",
SHARE_SCREEN_CLOSED: "sharescreenclosed",
SHARE_SCREEN_OPENED: "sharescreenopened",
SHOW_PLAY_REPLAY_BUTTON: "showplayreplaybutton",
SUBTITLES_DISABLED: "subtitlesdisabled",
SUBTITLES_ENABLED: "subtitlesenabled",
SUBTITLES_READY: "subtitlesready",
UNMUTE: "Unmute",
VIDEO_DATA_LOADED: "videodataloaded",
VIDEO_END: "videoend",
VIDEO_META: "videometadata",
VIDEO_MODULE_CREATED: "videomodulecreated",
VIDEO_PAUSE: "videopause",
VIDEO_PLAY: "videoplay",
VIDEO_SEEKEND: "videoseekend",
VIDEO_SELECTED: "videoselected",
VIDEO_START: "videostart",
VIDEO_TIMEUPDATE: "videotimeupdate",
VIDEO_VOLUME_CHANGED: "videovolumechanged",
VOLUME: "Volume",
_getContexts: () => [],
"content.CLICK": "content.click",
"content.IMPRESSION": "content.impression",
"content.QUARTILE": "content.quartile",
"content.VIEW": "content.view",
createPlayer: parent => new Player(parent),
createPlayerAsync: parent => new Player(parent),
createVPAIDPlayer: parent => new Player(parent),
destroyAll() {},
extension() {},
getContext() {},
player: parent => new Player(parent),
playerInceptionTime() {
return { undefined: 1620149827713 };
},
registerExtra(a, b, c) {
extras.push([a, b, c]);
},
version: () => "21.1.313",
};
window.vidible = Shimmer.proxy(vidible);
for (const jsonp of getJSONPVideoPlacements()) {
const player = new Player(jsonp);
const { placeholder } = playerData.get(player);
jsonp.parentNode.insertBefore(placeholder, jsonp);
}
}