// 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" 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); }