mirror/poke
1
0
Fork 0
mirror of https://codeberg.org/ashley/poke.git synced 2024-11-14 22:48:44 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions
poke/css/player-base.js
ashley 78b42e1de4 REFDGHFDG AM STUPID
2024-10-24 19:54:54 +00:00

1388 lines
45 KiB
JavaScript
Raw Blame History

// in the beginning.... god made mrrprpmnaynayaynaynayanyuwuuuwmauwnwanwaumawp :p
var _yt_player= videojs;
document.addEventListener("DOMContentLoaded", () => {
// video.js 8 init - source can be seen in https://poketube.fun/static/vjs.min.js or the vjs.min.js file
const video = videojs('video', {
controls: true,
autoplay: false,
preload: 'auto',
});
// todo : remove this code lol
const qua = new URLSearchParams(window.location.search).get("quality") || "";
localStorage.setItem(`progress-${new URLSearchParams(window.location.search).get('v')}`, 0);
// syncs stuff if used in HD mode
if (qua !== "medium") {
const audio = document.getElementById('aud');
const syncVolume = () => {
audio.volume = video.volume();
};
const syncVolumeWithVideo = () => {
video.volume(audio.volume);
};
// we check if a video is buffered
const checkAudioBuffer = () => {
const buffered = audio.buffered;
const bufferedEnd = buffered.length > 0 ? buffered.end(buffered.length - 1) : 0;
return audio.currentTime <= bufferedEnd;
};
const isVideoBuffered = () => {
const buffered = video.buffered();
return buffered.length > 0 && buffered.end(buffered.length - 1) >= video.currentTime();
};
// pauses and syncs the video when the seek is finnished :3
const handleSeek = () => {
video.pause();
audio.pause();
if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
audio.currentTime = video.currentTime();
}
if (!checkAudioBuffer()) {
audio.addEventListener('canplay', () => {
if (video.paused && isVideoBuffered()) {
video.play();
audio.play();
}
}, { once: true });
}
};
const handleBufferingComplete = () => {
if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
audio.currentTime = video.currentTime();
}
};
// Sync when playback starts
video.on('play', () => {
if (Math.abs(video.currentTime() - audio.currentTime) > 0.3) {
audio.currentTime = video.currentTime();
}
if (isVideoBuffered()) {
audio.play();
}
});
video.on('pause', () => {
audio.pause();
});
video.on('seeking', handleSeek);
video.on('seeked', () => {
if (isVideoBuffered()) {
video.play();
}
audio.play();
});
// le volume :3
video.on('volumechange', syncVolume);
audio.addEventListener('volumechange', syncVolumeWithVideo);
// Detects when video or audio finishes buffering
video.on('canplaythrough', handleBufferingComplete);
audio.addEventListener('canplaythrough', handleBufferingComplete);
// media control events
document.addEventListener('play', (e) => {
if (e.target === video) {
audio.play();
}
});
document.addEventListener('pause', (e) => {
if (e.target === video) {
audio.pause();
}
});
// pause if it becomes full screen :3
document.addEventListener('fullscreenchange', () => {
if (!document.fullscreenElement) {
video.pause();
audio.pause();
}
});
}
});
// hai!! if ur asking why are they here - its for smth in the future!!!!!!
const FORMATS = {
"5": { ext: "flv", width: 400, height: 240, acodec: "mp3", abr: 64, vcodec: "h263" },
"6": { ext: "flv", width: 450, height: 270, acodec: "mp3", abr: 64, vcodec: "h263" },
"13": { ext: "3gp", acodec: "aac", vcodec: "mp4v" },
"17": { ext: "3gp", width: 176, height: 144, acodec: "aac", abr: 24, vcodec: "mp4v" },
"18": { ext: "mp4", width: 640, height: 360, acodec: "aac", abr: 96, vcodec: "h264" },
"34": { ext: "flv", width: 640, height: 360, acodec: "aac", abr: 128, vcodec: "h264" },
"35": { ext: "flv", width: 854, height: 480, acodec: "aac", abr: 128, vcodec: "h264" },
"36": { ext: "3gp", width: 320, acodec: "aac", vcodec: "mp4v" },
"37": { ext: "mp4", width: 1920, height: 1080, acodec: "aac", abr: 192, vcodec: "h264" },
"38": { ext: "mp4", width: 4096, height: 3072, acodec: "aac", abr: 192, vcodec: "h264" },
"43": { ext: "webm", width: 640, height: 360, acodec: "vorbis", abr: 128, vcodec: "vp8" },
"44": { ext: "webm", width: 854, height: 480, acodec: "vorbis", abr: 128, vcodec: "vp8" },
"45": { ext: "webm", width: 1280, height: 720, acodec: "vorbis", abr: 192, vcodec: "vp8" },
"46": { ext: "webm", width: 1920, height: 1080, acodec: "vorbis", abr: 192, vcodec: "vp8" },
"59": { ext: "mp4", width: 854, height: 480, acodec: "aac", abr: 128, vcodec: "h264" },
"78": { ext: "mp4", width: 854, height: 480, acodec: "aac", abr: 128, vcodec: "h264" },
// 3D videos
"82": { ext: "mp4", height: 360, format: "3D", acodec: "aac", abr: 128, vcodec: "h264" },
"83": { ext: "mp4", height: 480, format: "3D", acodec: "aac", abr: 128, vcodec: "h264" },
"84": { ext: "mp4", height: 720, format: "3D", acodec: "aac", abr: 192, vcodec: "h264" },
"85": { ext: "mp4", height: 1080, format: "3D", acodec: "aac", abr: 192, vcodec: "h264" },
"100": { ext: "webm", height: 360, format: "3D", acodec: "vorbis", abr: 128, vcodec: "vp8" },
"101": { ext: "webm", height: 480, format: "3D", acodec: "vorbis", abr: 192, vcodec: "vp8" },
"102": { ext: "webm", height: 720, format: "3D", acodec: "vorbis", abr: 192, vcodec: "vp8" },
// Apple HTTP Live Streaming
"91": { ext: "mp4", height: 144, format: "HLS", acodec: "aac", abr: 48, vcodec: "h264" },
"92": { ext: "mp4", height: 240, format: "HLS", acodec: "aac", abr: 48, vcodec: "h264" },
"93": { ext: "mp4", height: 360, format: "HLS", acodec: "aac", abr: 128, vcodec: "h264" },
"94": { ext: "mp4", height: 480, format: "HLS", acodec: "aac", abr: 128, vcodec: "h264" },
"95": { ext: "mp4", height: 720, format: "HLS", acodec: "aac", abr: 256, vcodec: "h264" },
"96": { ext: "mp4", height: 1080, format: "HLS", acodec: "aac", abr: 256, vcodec: "h264" },
"132": { ext: "mp4", height: 240, format: "HLS", acodec: "aac", abr: 48, vcodec: "h264" },
"151": { ext: "mp4", height: 72, format: "HLS", acodec: "aac", abr: 24, vcodec: "h264" },
// DASH mp4 video
"133": { ext: "mp4", height: 240, format: "DASH video", vcodec: "h264" },
"134": { ext: "mp4", height: 360, format: "DASH video", vcodec: "h264" },
"135": { ext: "mp4", height: 480, format: "DASH video", vcodec: "h264" },
"136": { ext: "mp4", height: 720, format: "DASH video", vcodec: "h264" },
"137": { ext: "mp4", height: 1080, format: "DASH video", vcodec: "h264" },
"138": { ext: "mp4", format: "DASH video", vcodec: "h264" }, // Height can vary
"160": { ext: "mp4", height: 144, format: "DASH video", vcodec: "h264" },
"212": { ext: "mp4", height: 480, format: "DASH video", vcodec: "h264" },
"264": { ext: "mp4", height: 1440, format: "DASH video", vcodec: "h264" },
"298": { ext: "mp4", height: 720, format: "DASH video", vcodec: "h264", fps: 60 },
"299": { ext: "mp4", height: 1080, format: "DASH video", vcodec: "h264", fps: 60 },
"266": { ext: "mp4", height: 2160, format: "DASH video", vcodec: "h264" },
// Dash mp4 audio
"139": { ext: "m4a", format: "DASH audio", acodec: "aac", abr: 48, container: "m4a_dash" },
"140": { ext: "m4a", format: "DASH audio", acodec: "aac", abr: 128, container: "m4a_dash" },
"141": { ext: "m4a", format: "DASH audio", acodec: "aac", abr: 256, container: "m4a_dash" },
"256": { ext: "m4a", format: "DASH audio", acodec: "aac", container: "m4a_dash" },
"258": { ext: "m4a", format: "DASH audio", acodec: "aac", container: "m4a_dash" },
"325": { ext: "m4a", format: "DASH audio", acodec: "dtse", container: "m4a_dash" },
"328": { ext: "m4a", format: "DASH audio", acodec: "ec-3", container: "m4a_dash" },
// Dash webm
"167": { ext: "webm", height: 360, width: 640, vcodec: "vp9", acodec: "vorbis" },
"171": { ext: "webm", height: 480, width: 854, vcodec: "vp9", acodec: "vorbis" },
"172": { ext: "webm", height: 720, width: 1280, vcodec: "vp9", acodec: "vorbis" },
"248": { ext: "webm", height: 1080, width: 1920, vcodec: "vp9", acodec: "vorbis" },
"249": { ext: "webm", height: 1440, width: 2560, vcodec: "vp9", acodec: "vorbis" },
"250": { ext: "webm", height: 2160, width: 3840, vcodec: "vp9", acodec: "vorbis" },
// Extra formats
"264": { ext: "mp4", height: 1440, vcodec: "h264" }
};
// youtube client stuff
const YoutubeAPI = {
DEFAULT_API_KEY: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
ANDROID_API_KEY: "AIzaSyA8eiZmM1FaDVjRy-df2KTyQ_vz_yYM39w",
ANDROID_APP_VERSION: "19.14.42",
ANDROID_USER_AGENT: "com.google.android.youtube/19.14.42 (Linux; U; Android 12; US) gzip",
ANDROID_SDK_VERSION: 31,
ANDROID_VERSION: "12",
ANDROID_TS_APP_VERSION: "1.9",
ANDROID_TS_USER_AGENT: "com.google.android.youtube/1.9 (Linux; U; Android 12; US) gzip",
IOS_APP_VERSION: "19.16.3",
IOS_USER_AGENT: "com.google.ios.youtube/19.16.3 (iPhone14,5; U; CPU iOS 17_4 like Mac OS X;)",
IOS_VERSION: "17.4.0.21E219",
WINDOWS_VERSION: "10.0",
ClientType: {
web: "Web",
web_embedded_player: "WebEmbeddedPlayer",
web_mobile: "WebMobile",
web_screen_embed: "WebScreenEmbed",
android: "Android",
android_embedded_player: "AndroidEmbeddedPlayer",
android_screen_embed: "AndroidScreenEmbed",
android_test_suite: "AndroidTestSuite",
ios: "IOS",
ios_embedded: "IOSEmbedded",
ios_music: "IOSMusic",
tv_html5: "TvHtml5",
tv_html5_screen_embed: "TvHtml5ScreenEmbed"
},
HARDCODED_CLIENTS: {
web: {
name: "WEB",
name_proto: "1",
version: "2.20240304.00.00",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
screen: "WATCH_FULL_SCREEN",
os_name: "Windows",
os_version: "10.0",
platform: "DESKTOP"
},
web_embedded_player: {
name: "WEB_EMBEDDED_PLAYER",
name_proto: "56",
version: "1.20240303.00.00",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
screen: "EMBED",
os_name: "Windows",
os_version: "10.0",
platform: "DESKTOP"
},
web_mobile: {
name: "MWEB",
name_proto: "2",
version: "2.20240304.08.00",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
os_name: "Android",
os_version: "12",
platform: "MOBILE"
},
web_screen_embed: {
name: "WEB",
name_proto: "1",
version: "2.20240304.00.00",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
screen: "EMBED",
os_name: "Windows",
os_version: "10.0",
platform: "DESKTOP"
},
android: {
name: "ANDROID",
name_proto: "3",
version: "19.14.42",
api_key: "AIzaSyA8eiZmM1FaDVjRy-df2KTyQ_vz_yYM39w",
android_sdk_version: 31,
user_agent: "com.google.android.youtube/19.14.42 (Linux; U; Android 12; US) gzip",
os_name: "Android",
os_version: "12",
platform: "MOBILE"
},
android_embedded_player: {
name: "ANDROID_EMBEDDED_PLAYER",
name_proto: "55",
version: "19.14.42",
api_key: "AIzaSyCjc_pVEDi4qsv5MtC2dMXzpIaDoRFLsxw"
},
android_screen_embed: {
name: "ANDROID",
name_proto: "3",
version: "19.14.42",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
screen: "EMBED",
android_sdk_version: 31,
user_agent: "com.google.android.youtube/19.14.42 (Linux; U; Android 12; US) gzip",
os_name: "Android",
os_version: "12",
platform: "MOBILE"
},
android_test_suite: {
name: "ANDROID_TESTSUITE",
name_proto: "30",
version: "1.9",
api_key: "AIzaSyA8eiZmM1FaDVjRy-df2KTyQ_vz_yYM39w",
android_sdk_version: 31,
user_agent: "com.google.android.youtube/1.9 (Linux; U; Android 12; US) gzip",
os_name: "Android",
os_version: "12",
platform: "MOBILE"
},
ios: {
name: "IOS",
name_proto: "5",
version: "19.16.3",
api_key: "AIzaSyB-63vPrdThhKuerbB2N_l7Kwwcxj6yUAc",
user_agent: "com.google.ios.youtube/19.16.3 (iPhone14,5; U; CPU iOS 17_4 like Mac OS X;)",
device_make: "Apple",
device_model: "iPhone14,5",
os_name: "iPhone",
os_version: "17.4.0.21E219",
platform: "MOBILE"
},
ios_embedded: {
name: "IOS_MESSAGES_EXTENSION",
name_proto: "66",
version: "19.16.3",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
user_agent: "com.google.ios.youtube/19.16.3 (iPhone14,5; U; CPU iOS 17_4 like Mac OS X;)",
device_make: "Apple",
device_model: "iPhone14,5",
os_name: "iPhone",
os_version: "17.4.0.21E219",
platform: "MOBILE"
},
ios_music: {
name: "IOS_MUSIC",
name_proto: "26",
version: "6.42",
api_key: "AIzaSyBAETezhkwP0ZWA02RsqT1zu78Fpt0bC_s",
user_agent: "com.google.ios.youtubemusic/6.42 (iPhone14,5; U; CPU iOS 17_4 like Mac OS X;)",
device_make: "Apple",
device_model: "iPhone14,5",
os_name: "iPhone",
os_version: "17.4.0.21E219",
platform: "MOBILE"
},
tv_html5: {
name: "TVHTML5",
name_proto: "7",
version: "7.20240304.10.00",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8"
},
tv_html5_screen_embed: {
name: "TVHTML5_SIMPLY_EMBEDDED_PLAYER",
name_proto: "85",
version: "2.0",
api_key: "AIzaSyAO_FJ2SlqU8Q4STEHLGCilw_Y9_11qcW8",
screen: "EMBED"
}
},
DEFAULT_CLIENT_CONFIG: {
client_type: "web",
region: "US"
}
};
// player base
const base_player = "https://www.youtube.com/s/player/a87a9450/player_ias.vflset/en_US/base.js"
const saa = document.createElement('style');
saa.innerHTML = `
.vjs-play-progress {
background-image: linear-gradient(to right,
#ff0045,
#ff0e55,
#ff1d79
);
}
.vjs-control-bar {
border-radius: 16px;
background-color: #0007 !important;
}
.vjs-remaining-time,
.vjs-fullscreen-control {
background-color: transparent !important;
}
`;
document.head.appendChild(saa);
window.pokePlayer = {
ver:`20-a87a9450-vjs-${videojs.VERSION}`,
canHasAmbientMode:true,
video:new URLSearchParams(window.location.search).get('v'),
supported_itag_list:["136", "140", "298", "18"],
formats:["SD", "HD"],
YoutubeAPI,
}
/* video js plugins */
/* github: https://github.com/afrmtbl/videojs-youtube-annotations */
class AnnotationParser {
static get defaultAppearanceAttributes() {
return {
bgColor: 0xFFFFFF,
bgOpacity: 0.80,
fgColor: 0,
textSize: 3.15
};
}
static get attributeMap() {
return {
type: "tp",
style: "s",
x: "x",
y: "y",
width: "w",
height: "h",
sx: "sx",
sy: "sy",
timeStart: "ts",
timeEnd: "te",
text: "t",
actionType: "at",
actionUrl: "au",
actionUrlTarget: "aut",
actionSeconds: "as",
bgOpacity: "bgo",
bgColor: "bgc",
fgColor: "fgc",
textSize: "txsz"
};
}
/* AR ANNOTATION FORMAT */
deserializeAnnotation(serializedAnnotation) {
const map = this.constructor.attributeMap;
const attributes = serializedAnnotation.split(",");
const annotation = {};
for (const attribute of attributes) {
const [ key, value ] = attribute.split("=");
const mappedKey = this.getKeyByValue(map, key);
let finalValue = "";
if (["text", "actionType", "actionUrl", "actionUrlTarget", "type", "style"].indexOf(mappedKey) > -1) {
finalValue = decodeURIComponent(value);
}
else {
finalValue = parseFloat(value, 10);
}
annotation[mappedKey] = finalValue;
}
return annotation;
}
serializeAnnotation(annotation) {
const map = this.constructor.attributeMap;
let serialized = "";
for (const key in annotation) {
const mappedKey = map[key];
if ((["text", "actionType", "actionUrl", "actionUrlTarget"].indexOf(key) > -1) && mappedKey && annotation.hasOwnProperty(key)) {
let text = encodeURIComponent(annotation[key]);
serialized += `${mappedKey}=${text},`;
}
else if ((["text", "actionType", "actionUrl", "actionUrlTarget"].indexOf("key") === -1) && mappedKey && annotation.hasOwnProperty(key)) {
serialized += `${mappedKey}=${annotation[key]},`;
}
}
// remove trailing comma
return serialized.substring(0, serialized.length - 1);
}
deserializeAnnotationList(serializedAnnotationString) {
const serializedAnnotations = serializedAnnotationString.split(";");
serializedAnnotations.length = serializedAnnotations.length - 1;
const annotations = [];
for (const annotation of serializedAnnotations) {
annotations.push(this.deserializeAnnotation(annotation));
}
return annotations;
}
serializeAnnotationList(annotations) {
let serialized = "";
for (const annotation of annotations) {
serialized += this.serializeAnnotation(annotation) + ";";
}
return serialized;
}
/* PARSING YOUTUBE'S ANNOTATION FORMAT */
xmlToDom(xml) {
const parser = new DOMParser();
const dom = parser.parseFromString(xml, "application/xml");
return dom;
}
getAnnotationsFromXml(xml) {
const dom = this.xmlToDom(xml);
return dom.getElementsByTagName("annotation");
}
parseYoutubeAnnotationList(annotationElements) {
const annotations = [];
for (const el of annotationElements) {
const parsedAnnotation = this.parseYoutubeAnnotation(el);
if (parsedAnnotation) annotations.push(parsedAnnotation);
}
return annotations;
}
parseYoutubeAnnotation(annotationElement) {
const base = annotationElement;
const attributes = this.getAttributesFromBase(base);
if (!attributes.type || attributes.type === "pause") return null;
const text = this.getTextFromBase(base);
const action = this.getActionFromBase(base);
const backgroundShape = this.getBackgroundShapeFromBase(base);
if (!backgroundShape) return null;
const timeStart = backgroundShape.timeRange.start;
const timeEnd = backgroundShape.timeRange.end;
if (isNaN(timeStart) || isNaN(timeEnd) || timeStart === null || timeEnd === null) {
return null;
}
const appearance = this.getAppearanceFromBase(base);
// properties the renderer needs
let annotation = {
// possible values: text, highlight, pause, branding
type: attributes.type,
// x, y, width, and height as percent of video size
x: backgroundShape.x,
y: backgroundShape.y,
width: backgroundShape.width,
height: backgroundShape.height,
// what time the annotation is shown in seconds
timeStart,
timeEnd
};
// properties the renderer can work without
if (attributes.style) annotation.style = attributes.style;
if (text) annotation.text = text;
if (action) annotation = Object.assign(action, annotation);
if (appearance) annotation = Object.assign(appearance, annotation);
if (backgroundShape.hasOwnProperty("sx")) annotation.sx = backgroundShape.sx;
if (backgroundShape.hasOwnProperty("sy")) annotation.sy = backgroundShape.sy;
return annotation;
}
getBackgroundShapeFromBase(base) {
const movingRegion = base.getElementsByTagName("movingRegion")[0];
if (!movingRegion) return null;
const regionType = movingRegion.getAttribute("type");
const regions = movingRegion.getElementsByTagName(`${regionType}Region`);
const timeRange = this.extractRegionTime(regions);
const shape = {
type: regionType,
x: parseFloat(regions[0].getAttribute("x"), 10),
y: parseFloat(regions[0].getAttribute("y"), 10),
width: parseFloat(regions[0].getAttribute("w"), 10),
height: parseFloat(regions[0].getAttribute("h"), 10),
timeRange
}
const sx = regions[0].getAttribute("sx");
const sy = regions[0].getAttribute("sy");
if (sx) shape.sx = parseFloat(sx, 10);
if (sy) shape.sy = parseFloat(sy, 10);
return shape;
}
getAttributesFromBase(base) {
const attributes = {};
attributes.type = base.getAttribute("type");
attributes.style = base.getAttribute("style");
return attributes;
}
getTextFromBase(base) {
const textElement = base.getElementsByTagName("TEXT")[0];
if (textElement) return textElement.textContent;
}
getActionFromBase(base) {
const actionElement = base.getElementsByTagName("action")[0];
if (!actionElement) return null;
const typeAttr = actionElement.getAttribute("type");
const urlElement = actionElement.getElementsByTagName("url")[0];
if (!urlElement) return null;
const actionUrlTarget = urlElement.getAttribute("target");
const href = urlElement.getAttribute("value");
// only allow links to youtube
// can be changed in the future
if (href.startsWith("https://www.youtube.com/")) {
const url = new URL(href);
const srcVid = url.searchParams.get("src_vid");
const toVid = url.searchParams.get("v");
return this.linkOrTimestamp(url, srcVid, toVid, actionUrlTarget);
}
}
linkOrTimestamp(url, srcVid, toVid, actionUrlTarget) {
// check if it's a link to a new video
// or just a timestamp
if (srcVid && toVid && srcVid === toVid) {
let seconds = 0;
const hash = url.hash;
if (hash && hash.startsWith("#t=")) {
const timeString = url.hash.split("#t=")[1];
seconds = this.timeStringToSeconds(timeString);
}
return {actionType: "time", actionSeconds: seconds}
}
else {
return {actionType: "url", actionUrl: url.href, actionUrlTarget};
}
}
getAppearanceFromBase(base) {
const appearanceElement = base.getElementsByTagName("appearance")[0];
const styles = this.constructor.defaultAppearanceAttributes;
if (appearanceElement) {
const bgOpacity = appearanceElement.getAttribute("bgAlpha");
const bgColor = appearanceElement.getAttribute("bgColor");
const fgColor = appearanceElement.getAttribute("fgColor");
const textSize = appearanceElement.getAttribute("textSize");
// not yet sure what to do with effects
// const effects = appearanceElement.getAttribute("effects");
// 0.00 to 1.00
if (bgOpacity) styles.bgOpacity = parseFloat(bgOpacity, 10);
// 0 to 256 ** 3
if (bgColor) styles.bgColor = parseInt(bgColor, 10);
if (fgColor) styles.fgColor = parseInt(fgColor, 10);
// 0.00 to 100.00?
if (textSize) styles.textSize = parseFloat(textSize, 10);
}
return styles;
}
/* helper functions */
extractRegionTime(regions) {
let timeStart = regions[0].getAttribute("t");
timeStart = this.hmsToSeconds(timeStart);
let timeEnd = regions[regions.length - 1].getAttribute("t");
timeEnd = this.hmsToSeconds(timeEnd);
return {start: timeStart, end: timeEnd}
}
// https://stackoverflow.com/a/9640417/10817894
hmsToSeconds(hms) {
let p = hms.split(":");
let s = 0;
let m = 1;
while (p.length > 0) {
s += m * parseFloat(p.pop(), 10);
m *= 60;
}
return s;
}
timeStringToSeconds(time) {
let seconds = 0;
const h = time.split("h");
const m = (h[1] || time).split("m");
const s = (m[1] || time).split("s");
if (h[0] && h.length === 2) seconds += parseInt(h[0], 10) * 60 * 60;
if (m[0] && m.length === 2) seconds += parseInt(m[0], 10) * 60;
if (s[0] && s.length === 2) seconds += parseInt(s[0], 10);
return seconds;
}
getKeyByValue(obj, value) {
for (const key in obj) {
if (obj.hasOwnProperty(key)) {
if (obj[key] === value) {
return key;
}
}
}
}
}
class AnnotationRenderer {
constructor(annotations, container, playerOptions, updateInterval = 1000) {
if (!annotations) throw new Error("Annotation objects must be provided");
if (!container) throw new Error("An element to contain the annotations must be provided");
if (playerOptions && playerOptions.getVideoTime && playerOptions.seekTo) {
this.playerOptions = playerOptions;
}
else {
console.info("AnnotationRenderer is running without a player. The update method will need to be called manually.");
}
this.annotations = annotations;
this.container = container;
this.annotationsContainer = document.createElement("div");
this.annotationsContainer.classList.add("__cxt-ar-annotations-container__");
this.annotationsContainer.setAttribute("data-layer", "4");
this.annotationsContainer.addEventListener("click", e => {
this.annotationClickHandler(e);
});
this.container.prepend(this.annotationsContainer);
this.createAnnotationElements();
// in case the dom already loaded
this.updateAllAnnotationSizes();
window.addEventListener("DOMContentLoaded", e => {
this.updateAllAnnotationSizes();
});
this.updateInterval = updateInterval;
this.updateIntervalId = null;
}
changeAnnotationData(annotations) {
this.stop();
this.removeAnnotationElements();
this.annotations = annotations;
this.createAnnotationElements();
this.start();
}
createAnnotationElements() {
for (const annotation of this.annotations) {
const el = document.createElement("div");
el.classList.add("__cxt-ar-annotation__");
annotation.__element = el;
el.__annotation = annotation;
// close button
const closeButton = this.createCloseElement();
closeButton.addEventListener("click", e => {
el.setAttribute("hidden", "");
el.setAttribute("data-ar-closed", "");
if (el.__annotation.__speechBubble) {
const speechBubble = el.__annotation.__speechBubble;
speechBubble.style.display = "none";
}
});
el.append(closeButton);
if (annotation.text) {
const textNode = document.createElement("span");
textNode.textContent = annotation.text;
el.append(textNode);
el.setAttribute("data-ar-has-text", "");
}
if (annotation.style === "speech") {
const containerDimensions = this.container.getBoundingClientRect();
const speechX = this.percentToPixels(containerDimensions.width, annotation.x);
const speechY = this.percentToPixels(containerDimensions.height, annotation.y);
const speechWidth = this.percentToPixels(containerDimensions.width, annotation.width);
const speechHeight = this.percentToPixels(containerDimensions.height, annotation.height);
const speechPointX = this.percentToPixels(containerDimensions.width, annotation.sx);
const speechPointY = this.percentToPixels(containerDimensions.height, annotation.sy);
const bubbleColor = this.getFinalAnnotationColor(annotation, false);
const bubble = this.createSvgSpeechBubble(speechX, speechY, speechWidth, speechHeight, speechPointX, speechPointY, bubbleColor, annotation.__element);
bubble.style.display = "none";
bubble.style.overflow = "visible";
el.style.pointerEvents = "none";
bubble.__annotationEl = el;
annotation.__speechBubble = bubble;
const path = bubble.getElementsByTagName("path")[0];
path.addEventListener("mouseover", () => {
closeButton.style.display = "block";
// path.style.cursor = "pointer";
closeButton.style.cursor = "pointer";
path.setAttribute("fill", this.getFinalAnnotationColor(annotation, true));
});
path.addEventListener("mouseout", e => {
if (!e.relatedTarget.classList.contains("__cxt-ar-annotation-close__")) {
closeButton.style.display ="none";
// path.style.cursor = "default";
closeButton.style.cursor = "default";
path.setAttribute("fill", this.getFinalAnnotationColor(annotation, false));
}
});
closeButton.addEventListener("mouseleave", () => {
closeButton.style.display = "none";
path.style.cursor = "default";
closeButton.style.cursor = "default";
path.setAttribute("fill", this.getFinalAnnotationColor(annotation, false));
});
el.prepend(bubble);
}
else if (annotation.type === "highlight") {
el.style.backgroundColor = "";
el.style.border = `2.5px solid ${this.getFinalAnnotationColor(annotation, false)}`;
if (annotation.actionType === "url")
el.style.cursor = "pointer";
}
else if (annotation.style !== "title") {
el.style.backgroundColor = this.getFinalAnnotationColor(annotation);
el.addEventListener("mouseenter", () => {
el.style.backgroundColor = this.getFinalAnnotationColor(annotation, true);
});
el.addEventListener("mouseleave", () => {
el.style.backgroundColor = this.getFinalAnnotationColor(annotation, false);
});
if (annotation.actionType === "url")
el.style.cursor = "pointer";
}
el.style.color = `#${this.decimalToHex(annotation.fgColor)}`;
el.setAttribute("data-ar-type", annotation.type);
el.setAttribute("hidden", "");
this.annotationsContainer.append(el);
}
}
createCloseElement() {
const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.setAttribute("viewBox", "0 0 100 100")
svg.classList.add("__cxt-ar-annotation-close__");
const path = document.createElementNS(svg.namespaceURI, "path");
path.setAttribute("d", "M25 25 L 75 75 M 75 25 L 25 75");
path.setAttribute("stroke", "#bbb");
path.setAttribute("stroke-width", 10)
path.setAttribute("x", 5);
path.setAttribute("y", 5);
const circle = document.createElementNS(svg.namespaceURI, "circle");
circle.setAttribute("cx", 50);
circle.setAttribute("cy", 50);
circle.setAttribute("r", 50);
svg.append(circle, path);
return svg;
}
createSvgSpeechBubble(x, y, width, height, pointX, pointY, color = "white", element, svg) {
const horizontalBaseStartMultiplier = 0.17379070765180116;
const horizontalBaseEndMultiplier = 0.14896346370154384;
const verticalBaseStartMultiplier = 0.12;
const verticalBaseEndMultiplier = 0.3;
let path;
if (!svg) {
svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
svg.classList.add("__cxt-ar-annotation-speech-bubble__");
path = document.createElementNS("http://www.w3.org/2000/svg", "path");
path.setAttribute("fill", color);
svg.append(path);
}
else {
path = svg.children[0];
}
svg.style.position = "absolute";
svg.setAttribute("width", "100%");
svg.setAttribute("height", "100%");
svg.style.left = "0";
svg.style.top = "0";
let positionStart;
let baseStartX = 0;
let baseStartY = 0;
let baseEndX = 0;
let baseEndY = 0;
let pointFinalX = pointX;
let pointFinalY = pointY;
let commentRectPath;
const pospad = 20;
let textWidth = 0;
let textHeight = 0;
let textX = 0;
let textY = 0;
let textElement;
let closeElement;
if (element) {
textElement = element.getElementsByTagName("span")[0];
closeElement = element.getElementsByClassName("__cxt-ar-annotation-close__")[0];
}
if (pointX > ((x + width) - (width / 2)) && pointY > y + height) {
positionStart = "br";
baseStartX = width - ((width * horizontalBaseStartMultiplier) * 2);
baseEndX = baseStartX + (width * horizontalBaseEndMultiplier);
baseStartY = height;
baseEndY = height;
pointFinalX = pointX - x;
pointFinalY = pointY - y;
element.style.height = pointY - y;
commentRectPath = `L${width} ${height} L${width} 0 L0 0 L0 ${baseStartY} L${baseStartX} ${baseStartY}`;
if (textElement) {
textWidth = width;
textHeight = height;
textX = 0;
textY = 0;
}
}
else if (pointX < ((x + width) - (width / 2)) && pointY > y + height) {
positionStart = "bl";
baseStartX = width * horizontalBaseStartMultiplier;
baseEndX = baseStartX + (width * horizontalBaseEndMultiplier);
baseStartY = height;
baseEndY = height;
pointFinalX = pointX - x;
pointFinalY = pointY - y;
element.style.height = `${pointY - y}px`;
commentRectPath = `L${width} ${height} L${width} 0 L0 0 L0 ${baseStartY} L${baseStartX} ${baseStartY}`;
if (textElement) {
textWidth = width;
textHeight = height;
textX = 0;
textY = 0;
}
}
else if (pointX > ((x + width) - (width / 2)) && pointY < (y - pospad)) {
positionStart = "tr";
baseStartX = width - ((width * horizontalBaseStartMultiplier) * 2);
baseEndX = baseStartX + (width * horizontalBaseEndMultiplier);
const yOffset = y - pointY;
baseStartY = yOffset;
baseEndY = yOffset;
element.style.top = y - yOffset + "px";
element.style.height = height + yOffset + "px";
pointFinalX = pointX - x;
pointFinalY = 0;
commentRectPath = `L${width} ${yOffset} L${width} ${height + yOffset} L0 ${height + yOffset} L0 ${yOffset} L${baseStartX} ${baseStartY}`;
if (textElement) {
textWidth = width;
textHeight = height;
textX = 0;
textY = yOffset;
}
}
else if (pointX < ((x + width) - (width / 2)) && pointY < y) {
positionStart = "tl";
baseStartX = width * horizontalBaseStartMultiplier;
baseEndX = baseStartX + (width * horizontalBaseEndMultiplier);
const yOffset = y - pointY;
baseStartY = yOffset;
baseEndY = yOffset;
element.style.top = y - yOffset + "px";
element.style.height = height + yOffset + "px";
pointFinalX = pointX - x;
pointFinalY = 0;
commentRectPath = `L${width} ${yOffset} L${width} ${height + yOffset} L0 ${height + yOffset} L0 ${yOffset} L${baseStartX} ${baseStartY}`;
if (textElement) {
textWidth = width;
textHeight = height;
textX = 0;
textY = yOffset;
}
}
else if (pointX > (x + width) && pointY > (y - pospad) && pointY < ((y + height) - pospad)) {
positionStart = "r";
const xOffset = pointX - (x + width);
baseStartX = width;
baseEndX = width;
element.style.width = width + xOffset + "px";
baseStartY = height * verticalBaseStartMultiplier;
baseEndY = baseStartY + (height * verticalBaseEndMultiplier);
pointFinalX = width + xOffset;
pointFinalY = pointY - y;
commentRectPath = `L${baseStartX} ${height} L0 ${height} L0 0 L${baseStartX} 0 L${baseStartX} ${baseStartY}`;
if (textElement) {
textWidth = width;
textHeight = height;
textX = 0;
textY = 0;
}
}
else if (pointX < x && pointY > y && pointY < (y + height)) {
positionStart = "l";
const xOffset = x - pointX;
baseStartX = xOffset;
baseEndX = xOffset;
element.style.left = x - xOffset + "px";
element.style.width = width + xOffset + "px";
baseStartY = height * verticalBaseStartMultiplier;
baseEndY = baseStartY + (height * verticalBaseEndMultiplier);
pointFinalX = 0;
pointFinalY = pointY - y;
commentRectPath = `L${baseStartX} ${height} L${width + baseStartX} ${height} L${width + baseStartX} 0 L${baseStartX} 0 L${baseStartX} ${baseStartY}`;
if (textElement) {
textWidth = width;
textHeight = height;
textX = xOffset;
textY = 0;
}
}
else {
return svg;
}
if (textElement) {
textElement.style.left = textX + "px";
textElement.style.top = textY + "px";
textElement.style.width = textWidth + "px";
textElement.style.height = textHeight + "px";
}
if (closeElement) {
const closeSize = parseFloat(this.annotationsContainer.style.getPropertyValue("--annotation-close-size"), 10);
if (closeSize) {
closeElement.style.left = ((textX + textWidth) + (closeSize / -1.8)) + "px";
closeElement.style.top = (textY + (closeSize / -1.8)) + "px";
}
}
const pathData = `M${baseStartX} ${baseStartY} L${pointFinalX} ${pointFinalY} L${baseEndX} ${baseEndY} ${commentRectPath}`;
path.setAttribute("d", pathData);
return svg;
}
getFinalAnnotationColor(annotation, hover = false) {
const alphaHex = hover ? (0xE6).toString(16) : Math.floor((annotation.bgOpacity * 255)).toString(16);
if (!isNaN(annotation.bgColor)) {
const bgColorHex = this.decimalToHex(annotation.bgColor);
const backgroundColor = `#${bgColorHex}${alphaHex}`;
return backgroundColor;
}
}
removeAnnotationElements() {
for (const annotation of this.annotations) {
annotation.__element.remove();
}
}
update(videoTime) {
for (const annotation of this.annotations) {
const el = annotation.__element;
if (el.hasAttribute("data-ar-closed")) continue;
const start = annotation.timeStart;
const end = annotation.timeEnd;
if (el.hasAttribute("hidden") && (videoTime >= start && videoTime < end)) {
el.removeAttribute("hidden");
if (annotation.style === "speech" && annotation.__speechBubble) {
annotation.__speechBubble.style.display = "block";
}
}
else if (!el.hasAttribute("hidden") && (videoTime < start || videoTime > end)) {
el.setAttribute("hidden", "");
if (annotation.style === "speech" && annotation.__speechBubble) {
annotation.__speechBubble.style.display = "none";
}
}
}
}
start() {
if (!this.playerOptions) throw new Error("playerOptions must be provided to use the start method");
const videoTime = this.playerOptions.getVideoTime();
if (!this.updateIntervalId) {
this.update(videoTime);
this.updateIntervalId = setInterval(() => {
const videoTime = this.playerOptions.getVideoTime();
this.update(videoTime);
window.dispatchEvent(new CustomEvent("__ar_renderer_start"));
}, this.updateInterval);
}
}
stop() {
if (!this.playerOptions) throw new Error("playerOptions must be provided to use the stop method");
const videoTime = this.playerOptions.getVideoTime();
if (this.updateIntervalId) {
this.update(videoTime);
clearInterval(this.updateIntervalId);
this.updateIntervalId = null;
window.dispatchEvent(new CustomEvent("__ar_renderer_stop"));
}
}
updateAnnotationTextSize(annotation, containerHeight) {
if (annotation.textSize) {
const textSize = (annotation.textSize / 100) * containerHeight;
annotation.__element.style.fontSize = `${textSize}px`;
}
}
updateTextSize() {
const containerHeight = this.container.getBoundingClientRect().height;
// should be run when the video resizes
for (const annotation of this.annotations) {
this.updateAnnotationTextSize(annotation, containerHeight);
}
}
updateCloseSize(containerHeight) {
if (!containerHeight) containerHeight = this.container.getBoundingClientRect().height;
const multiplier = 0.0423;
this.annotationsContainer.style.setProperty("--annotation-close-size", `${containerHeight * multiplier}px`);
}
updateAnnotationDimensions(annotations, videoWidth, videoHeight) {
const playerWidth = this.container.getBoundingClientRect().width;
const playerHeight = this.container.getBoundingClientRect().height;
const widthDivider = playerWidth / videoWidth;
const heightDivider = playerHeight / videoHeight;
let scaledVideoWidth = playerWidth;
let scaledVideoHeight = playerHeight;
if (widthDivider % 1 !== 0 || heightDivider % 1 !== 0) {
// vertical bars
if (widthDivider > heightDivider) {
scaledVideoWidth = (playerHeight / videoHeight) * videoWidth;
scaledVideoHeight = playerHeight;
}
// horizontal bars
else if (heightDivider > widthDivider) {
scaledVideoWidth = playerWidth;
scaledVideoHeight = (playerWidth / videoWidth) * videoHeight;
}
}
const verticalBlackBarWidth = (playerWidth - scaledVideoWidth) / 2;
const horizontalBlackBarHeight = (playerHeight - scaledVideoHeight) / 2;
const widthOffsetPercent = (verticalBlackBarWidth / playerWidth * 100);
const heightOffsetPercent = (horizontalBlackBarHeight / playerHeight * 100);
const widthMultiplier = (scaledVideoWidth / playerWidth);
const heightMultiplier = (scaledVideoHeight / playerHeight);
for (const annotation of annotations) {
const el = annotation.__element;
let ax = widthOffsetPercent + (annotation.x * widthMultiplier);
let ay = heightOffsetPercent + (annotation.y * heightMultiplier);
let aw = annotation.width * widthMultiplier;
let ah = annotation.height * heightMultiplier;
el.style.left = `${ax}%`;
el.style.top = `${ay}%`;
el.style.width = `${aw}%`;
el.style.height = `${ah}%`;
let horizontalPadding = scaledVideoWidth * 0.008;
let verticalPadding = scaledVideoHeight * 0.008;
if (annotation.style === "speech" && annotation.text) {
const pel = annotation.__element.getElementsByTagName("span")[0];
horizontalPadding *= 2;
verticalPadding *= 2;
pel.style.paddingLeft = horizontalPadding + "px";
pel.style.paddingRight = horizontalPadding + "px";
pel.style.paddingBottom = verticalPadding + "px";
pel.style.paddingTop = verticalPadding + "px";
}
else if (annotation.style !== "speech") {
el.style.paddingLeft = horizontalPadding + "px";
el.style.paddingRight = horizontalPadding + "px";
el.style.paddingBottom = verticalPadding + "px";
el.style.paddingTop = verticalPadding + "px";
}
if (annotation.__speechBubble) {
const asx = this.percentToPixels(playerWidth, ax);
const asy = this.percentToPixels(playerHeight, ay);
const asw = this.percentToPixels(playerWidth, aw);
const ash = this.percentToPixels(playerHeight, ah);
let sx = widthOffsetPercent + (annotation.sx * widthMultiplier);
let sy = heightOffsetPercent + (annotation.sy * heightMultiplier);
sx = this.percentToPixels(playerWidth, sx);
sy = this.percentToPixels(playerHeight, sy);
this.createSvgSpeechBubble(asx, asy, asw, ash, sx, sy, null, annotation.__element, annotation.__speechBubble);
}
this.updateAnnotationTextSize(annotation, scaledVideoHeight);
this.updateCloseSize(scaledVideoHeight);
}
}
updateAllAnnotationSizes() {
if (this.playerOptions && this.playerOptions.getOriginalVideoWidth && this.playerOptions.getOriginalVideoHeight) {
const videoWidth = this.playerOptions.getOriginalVideoWidth();
const videoHeight = this.playerOptions.getOriginalVideoHeight();
this.updateAnnotationDimensions(this.annotations, videoWidth, videoHeight);
}
else {
const playerWidth = this.container.getBoundingClientRect().width;
const playerHeight = this.container.getBoundingClientRect().height;
this.updateAnnotationDimensions(this.annotations, playerWidth, playerHeight);
}
}
hideAll() {
for (const annotation of this.annotations) {
annotation.__element.setAttribute("hidden", "");
}
}
annotationClickHandler(e) {
let annotationElement = e.target;
// if we click on annotation text instead of the actual annotation element
if (!annotationElement.matches(".__cxt-ar-annotation__") && !annotationElement.closest(".__cxt-ar-annotation-close__")) {
annotationElement = annotationElement.closest(".__cxt-ar-annotation__");
if (!annotationElement) return null;
}
let annotationData = annotationElement.__annotation;
if (!annotationElement || !annotationData) return;
if (annotationData.actionType === "time") {
const seconds = annotationData.actionSeconds;
if (this.playerOptions) {
this.playerOptions.seekTo(seconds);
const videoTime = this.playerOptions.getVideoTime();
this.update(videoTime);
}
window.dispatchEvent(new CustomEvent("__ar_seek_to", {detail: {seconds}}));
}
else if (annotationData.actionType === "url") {
const data = {url: annotationData.actionUrl, target: annotationData.actionUrlTarget || "current"};
const timeHash = this.extractTimeHash(new URL(data.url));
if (timeHash && timeHash.hasOwnProperty("seconds")) {
data.seconds = timeHash.seconds;
}
window.dispatchEvent(new CustomEvent("__ar_annotation_click", {detail: data}));
}
}
setUpdateInterval(ms) {
this.updateInterval = ms;
this.stop();
this.start();
}
// https://stackoverflow.com/a/3689638/10817894
decimalToHex(dec) {
let hex = dec.toString(16);
hex = "000000".substr(0, 6 - hex.length) + hex;
return hex;
}
extractTimeHash(url) {
if (!url) throw new Error("A URL must be provided");
const hash = url.hash;
if (hash && hash.startsWith("#t=")) {
const timeString = url.hash.split("#t=")[1];
const seconds = this.timeStringToSeconds(timeString);
return {seconds};
}
else {
return false;
}
}
timeStringToSeconds(time) {
let seconds = 0;
const h = time.split("h");
const m = (h[1] || time).split("m");
const s = (m[1] || time).split("s");
if (h[0] && h.length === 2) seconds += parseInt(h[0], 10) * 60 * 60;
if (m[0] && m.length === 2) seconds += parseInt(m[0], 10) * 60;
if (s[0] && s.length === 2) seconds += parseInt(s[0], 10);
return seconds;
}
percentToPixels(a, b) {
return a * b / 100;
}
}
function youtubeAnnotationsPlugin(options) {
if (!options.annotationXml) throw new Error("Annotation data must be provided");
if (!options.videoContainer) throw new Error("A video container to overlay the data on must be provided");
const player = this;
const xml = options.annotationXml;
const parser = new AnnotationParser();
const annotationElements = parser.getAnnotationsFromXml(xml);
const annotations = parser.parseYoutubeAnnotationList(annotationElements);
const videoContainer = options.videoContainer;
const playerOptions = {
getVideoTime() {
return player.currentTime();
},
seekTo(seconds) {
player.currentTime(seconds);
},
getOriginalVideoWidth() {
return player.videoWidth();
},
getOriginalVideoHeight() {
return player.videoHeight();
}
};
raiseControls();
const renderer = new AnnotationRenderer(annotations, videoContainer, playerOptions, options.updateInterval);
setupEventListeners(player, renderer);
renderer.start();
}
function setupEventListeners(player, renderer) {
if (!player) throw new Error("A video player must be provided");
// should be throttled for performance
player.on("playerresize", e => {
renderer.updateAllAnnotationSizes(renderer.annotations);
});
// Trigger resize since the video can have different dimensions than player
player.one("loadedmetadata", e => {
renderer.updateAllAnnotationSizes(renderer.annotations);
});
player.on("pause", e => {
renderer.stop();
});
player.on("play", e => {
renderer.start();
});
player.on("seeking", e => {
renderer.update();
});
player.on("seeked", e => {
renderer.update();
});
}
function raiseControls() {
const styles = document.createElement("style");
styles.textContent = `
.vjs-control-bar {
z-index: 21;
}
`;
document.body.append(styles);
}
Reference in a new issue View git blame Copy permalink