Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- {"[Extension]":{"link":"^imagus:\\/\\/extension","loop":1,"url":":'data:,' + this.TRG.IMGS_c_resolved.URL","res":":\nfunction inject(tag, id, content, parent) {\n const elem = document.createElement(tag)\n elem.setAttribute('id', id)\n elem.textContent = content\n return parent ? parent.appendChild(elem) : document.head.appendChild(elem)\n}\n\nfunction override(that) {\n function reset() {\n if (that.EXTENSION.VIME) {\n that.EXTENSION.VIME.remove()\n delete that.EXTENSION.VIME\n }\n\n if (that.EXTENSION.VIDEOJS) {\n that.EXTENSION.VIDEOJS.player?.dispose()\n that.EXTENSION.VIDEOJS.remove()\n delete that.EXTENSION.VIDEOJS\n }\n\n if (that.EXTENSION.IFRAME) {\n that.EXTENSION.IFRAME.remove()\n delete that.EXTENSION.IFRAME\n }\n\n that.EXTENSION.innerHTML = '';\n }\n\n function setSVG(width, height) {\n console.log('IMAGUS EXTENSION: setSVG ' + arguments);\n clearInterval(that.timers.onReady);\n that.set(`data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"${width}\" height=\"${height}\"></svg>`)\n if (cfg.hz.capWH) {\n that.CAP.children[1].textContent = `${width}\\u00d7${height}`\n }\n }\n\n that.resetNode_original = that.resetNode\n that.resetNode = (node, keepAlbum) => {\n if (node === that.TRG) reset()\n return that.resetNode_original(node, keepAlbum)\n }\n\n that.reset_original = that.reset\n that.reset = preventImmediateHover => {\n reset()\n return that.reset_original(preventImmediateHover)\n }\n\n /*let lastScrollTop = 0\n document.addEventListener('scroll', function (ev) {\n var st = document.documentElement.scrollTop\n if (st > lastScrollTop) {\n // downscroll code\n console.log('scroll down :>> ');\n } else if (st < lastScrollTop) {\n console.log('scroll up :>> ');\n // upscroll code\n }\n lastScrollTop = st <= 0 ? 0 : st\n }, false)*/\n\n platform.onkeydown_original = platform.onkeydown\n platform.onkeydown = e => {\n const url = that.TRG?.IMGS_ext?.attributes?.['url']?.textContent\n if (url && [e.code.replace(/^Key/, ''), e.key].includes(cfg.keys.hz_open)) {\n Port.send({ cmd: 'open', url: url, nf: e.shiftKey })\n } else {\n return platform.onkeydown_original(e)\n }\n }\n\n window.removeEventListener(platform[\"wheel\"], that.wheeler, true)\n that.wheeler_original = that.wheeler\n that.wheeler = function (ev) {\n if (that.EXTENSION.contains(ev.target) && that.EXTENSION.scrollHeight > that.EXTENSION.clientHeight) {\n return\n }\n /* if (!ev.ctrlKey) {\n var fullZmBackup = that.fullZm\n that.fullZm = 0\n } */\n return that.wheeler_original(ev)\n // that.fullZm = fullZmBackup ?? that.fullZm\n }\n window.addEventListener(platform[\"wheel\"], that.wheeler, { capture: true, passive: false })\n\n that.fzClickAct_original = that.fzClickAct\n that.fzClickAct = e => !that.EXTENSION.contains(e.target) ? that.fzClickAct_original(e) : undefined\n\n that.prepareCaption_original = that.prepareCaption\n that.prepareCaption = (trg, caption = '') => {\n const m = caption.match(/(<imagus-extension.+<\\/imagus-extension>)?(.*)/s)\n const e = () => { const t = document.createElement('template'); t.innerHTML = m[1]; return t.content.firstChild; }\n trg.IMGS_ext = trg.IMGS_ext_from_url || m[1] ? e() : undefined\n if (that.CAP) that.CAP.style.zIndex = 1\n return that.prepareCaption_original(trg, m[2])\n }\n\n that.show_original = that.show\n that.show = (msg, delayed) => {\n if (msg === 'load') {\n if (that.EXTENSION.VIDEOJS || that.EXTENSION.IFRAME) {\n return\n } else {\n return that.show_original(msg, delayed)\n }\n } else if (msg === undefined) {\n return that.show_original(msg, delayed)\n }\n\n const ext = that.TRG.IMGS_ext\n that.EXTENSION.style.display = ext ? 'block' : 'none'\n that.DIV.style.transform = ''\n\n const res = that.show_original(msg, delayed)\n\n if (ext) {\n const type = ext.getAttribute('type').split('-')\n const url = ext.getAttribute('url')\n that.EXTENSION.className = 'imagus-' + type[0]\n that.EXTENSION_custom_style.textContent = ext.getAttribute('custom-style')\n\n const isYoutube = /^https?:\\/\\/(www\\.)?(youtube\\.com|youtu\\.be)\\//i.test(url);\n if (isYoutube && type[0] === 'videojs') {\n type[0] = 'iframe'\n }\n\n switch (type[0]) {\n case 'iframe':\n if (!url || that.EXTENSION.IFRAME) {\n break\n }\n\n let html;\n if (isYoutube) {\n const ytId = url.match(/(?:v=|embed\\/|shorts\\/)([a-zA-Z0-9_-]{11})/)[1]\n const t = url.match(/t=([\\d,]+)/)?.[1] || 0\n html = `<iframe type=\"text/html\" frameborder=\"0\" allowfullscreen=\"true\" allow=\"autoplay\" src=\"https://www.youtube.com/embed/${ytId}?&autoplay=1&fs=1&iv_load_policy=3&rel=1&version=3&enablejsapi=1&loop=1&playlist=${ytId}&start=${t}\"></iframe>`\n\n } else {\n html = `<iframe src=\"${url}\"></iframe>`\n }\n that.EXTENSION.innerHTML = `<div class=\"imagus-iframe-control\">Click to enable/disable iframe control</div>${html}`\n that.EXTENSION.IFRAME = that.EXTENSION.querySelector(':scope > iframe')\n const h = [1440, 1080, 720, 360].find(i => i <= window.innerHeight) || 360;\n setSVG(h / 9 * 16, h)\n // setSVG(3840, 2160)\n\n that.EXTENSION.querySelector('.imagus-iframe-control').addEventListener('click', function (ev) {\n // that.EXTENSION.style.pointerEvents = that.EXTENSION.style.pointerEvents == 'none' ? 'auto' : 'none';\n that.EXTENSION.style.zIndex = that.EXTENSION.style.zIndex != 'auto' ? 'auto' : '-1';\n })\n break\n\n case 'sidebar':\n that.EXTENSION.innerHTML = ext.innerHTML\n that.EXTENSION.scrollTop = 0\n const rect = that.EXTENSION.getBoundingClientRect()\n const tfX = rect.left < 0 ? -rect.left : rect.right > window.innerWidth ? window.innerWidth - rect.right : 0\n const tfY = rect.top < 0 ? -rect.top : rect.bottom > window.innerHeight ? window.innerHeight - rect.bottom : 0\n if (tfX || tfY)\n that.DIV.style.transform = `translate(${tfX}px, ${tfY}px)`\n break\n\n case 'banner':\n that.EXTENSION.innerHTML = `\n <a target=\"_blank\" rel=\"noopener noreferrer\" href=\"${url}\">\n <svg viewBox=\"0 0 360 96\">\n <foreignObject width=\"100%\" height=\"100%\">\n <div>\n <span>${ext.getAttribute('text')}</span>\n </div>\n </foreignObject>\n </svg>\n </a>\n `.replace(/\\n\\s*/g, '')\n break\n\n case 'videojs':\n if (!url || that.EXTENSION.VIDEOJS) {\n break\n }\n\n if (!that.EXTENSION.VIDEOJS_status) {\n that.EXTENSION.VIDEOJS_status = 'loading'\n console.time('Load Video.js')\n\n if (typeof loadVideoJS === 'function') {\n loadVideoJS()\n that.EXTENSION.VIDEOJS_status = 'loaded'\n console.timeEnd('Load Video.js')\n createPlayer()\n break\n }\n\n const urlsCSS = [\n 'https://cdn.jsdelivr.net/npm/video.js@7.20.3/dist/video-js.min.css',\n 'https://cdn.jsdelivr.net/npm/videojs-max-quality-selector@0.9.1/dist/videojs-max-quality-selector.css'\n // 'https://unpkg.com/video.js@7.20.3/dist/video-js.min.css',\n // 'https://unpkg.com/videojs-max-quality-selector@0.9.1/dist/videojs-max-quality-selector.css'\n ]\n\n const urlsJS = [\n 'https://cdn.jsdelivr.net/npm/video.js@7.20.3/dist/video.min.js',\n 'https://cdn.jsdelivr.net/npm/videojs-contrib-quality-levels@2.2.0/dist/videojs-contrib-quality-levels.min.js',\n 'https://cdn.jsdelivr.net/npm/videojs-max-quality-selector@0.9.1/dist/videojs-max-quality-selector.min.js'\n // 'https://unpkg.com/video.js@7.20.3/dist/video.min.js',\n // 'https://unpkg.com/videojs-contrib-quality-levels@2.2.0/dist/videojs-contrib-quality-levels.min.js',\n // 'https://unpkg.com/videojs-max-quality-selector@0.9.1/dist/videojs-max-quality-selector.min.js'\n ]\n\n const urlGet = (url) => new Promise((resolve, reject) => {\n const xhr = new XMLHttpRequest()\n\n xhr.onload = () => {\n if (xhr.status === 200) {\n console.log(xhr.statusText, '|', url)\n resolve(xhr.responseText.replace(/\\n?\\/\\*.+?\\*\\/\\n?/gs, '').trim())\n } else {\n console.error(xhr.statusText, '|', url)\n reject(xhr.statusText)\n }\n }\n\n xhr.onerror = () => {\n console.error(xhr.statusText, '|', url)\n reject(xhr.statusText)\n }\n\n xhr.open('GET', url)\n xhr.send()\n })\n\n const pCSS = Promise.all(urlsCSS.map(urlGet)).then((result) => {\n document.head.insertAdjacentHTML('beforeend', `<style>${result.map(i => i.replace(/^@charset.+?;/, '')).join('')}</style>`)\n })\n\n const pJS = Promise.all(urlsJS.map(urlGet)).then((result) => {\n Function(result[0]\n .replace(\n 'new Uint8Array(t.data.data,i.byteOffset||0,i.byteLength||t.data.data.byteLength)',\n '/firefox/i.test(window.navigator.userAgent)?cloneInto(new Uint8Array(t.data.data,i.byteOffset||0,i.byteLength||t.data.data.byteLength),window):new Uint8Array(t.data.data,i.byteOffset||0,i.byteLength||t.data.data.byteLength)'\n )\n .replace(\n 'n[t].forEach', // _this6[idName].forEach\n 'structuredClone(n[t]).forEach' // https://caniuse.com/mdn-api_structuredclone\n ) + result.slice(1).join(''))()\n })\n\n Promise.all([ pCSS, pJS ]).then(() => {\n that.EXTENSION.VIDEOJS_status = 'loaded'\n console.timeEnd('Load Video.js')\n createPlayer()\n })\n }\n\n if (that.EXTENSION.VIDEOJS_status === 'loaded') {\n createPlayer()\n }\n\n function createPlayer() {\n that.EXTENSION.VIDEOJS = document.createElement('video')\n that.EXTENSION.VIDEOJS.setAttribute('class', 'video-js')\n that.EXTENSION.VIDEOJS.setAttribute('id', 'imagus-player')\n that.EXTENSION.appendChild(that.EXTENSION.VIDEOJS)\n\n const playerOptions = {\n autoplay: 'any',\n controls: true,\n loop: true,\n preload: 'auto'\n }\n\n videojs(that.EXTENSION.VIDEOJS, playerOptions, () => {\n const player = that.EXTENSION.VIDEOJS.player = videojs.players['imagus-player']\n const qLevels = player.qualityLevels()\n const mqSelectorOptions = {\n autoLabel: 'Auto ',\n disableAuto: true,\n displayMode: 1,\n defaultQuality: 2,\n // maxHeight: window.screen.height,\n // maxWidth: window.screen.width,\n filterDuplicateHeights: false,\n filterDuplicates: false,\n showBitrates: true\n }\n const mqSelector = player.maxQualitySelector(mqSelectorOptions)\n\n const setPlayerSize = (width, height) => {\n if (!player.isFullscreen()) {\n setSVG(width, height)\n }\n }\n\n qLevels.on('change', (e) => {\n setPlayerSize(qLevels[qLevels.selectedIndex].width, qLevels[qLevels.selectedIndex].height)\n })\n\n player.on('resize', () => {\n const vWidth = player.videoWidth()\n const vHeight = player.videoHeight()\n player.width(vWidth)\n player.height(vHeight)\n setPlayerSize(vWidth, vHeight)\n })\n\n player.on('fullscreenchange', () => {\n if (!mqSelector.selectedIndexPrevious) {\n mqSelector.selectedIndexPrevious = mqSelector.selectedIndex\n mqSelector.options.disableAuto = false\n mqSelector.changeLevel(-1) // auto\n } else {\n mqSelector.changeLevel(mqSelector.selectedIndexPrevious)\n delete mqSelector.selectedIndexPrevious\n }\n })\n\n player.volume(cfg.hz.mediaVolume / 100)\n player.src(url)\n })\n }\n\n break\n\n }\n }\n\n return res\n }\n\n that.switchToHiResInFZ_original = that.switchToHiResInFZ\n that.switchToHiResInFZ = () => {\n if (that.fullZm === 1) {\n that.EXTENSION.style.pointerEvents = 'auto'\n if (that.EXTENSION.VIME || that.EXTENSION.VIDEOJS || that.EXTENSION.IFRAME) {\n that.EXTENSION.style.zIndex = 'auto'\n }\n\n const iControl = that.EXTENSION.querySelector('.imagus-iframe-control')\n if (iControl) iControl.style.display = 'block'\n }\n if (that.fullZm === false) {\n that.EXTENSION.style.pointerEvents = ''\n that.EXTENSION.style.zIndex = ''\n }\n return that.switchToHiResInFZ_original()\n }\n}\n\nif (!this.EXTENSION) {\n const style = `\n #imagus-extension {\n pointer-events: none;\n }\n\n #imagus-extension.imagus-sidebar {\n background: padding-box rgb(31, 31, 31);\n border: ${this.DIV.style.border};\n border-radius: ${this.DIV.style.borderRadius};\n box-shadow: ${this.DIV.style.boxShadow};\n box-sizing: border-box;\n color: white;\n font: 13px / 1.3 sans-serif;\n left: calc(-360px + ${this.DIV.style.borderWidth} - 1px);\n padding: 5px 8px 6px;\n position: absolute;\n top: -${this.DIV.style.borderWidth};\n white-space: pre-wrap;\n width: 360px;\n z-index: -1;\n max-height: calc(100% + ${this.DIV.style.borderWidth} * 2);\n overflow-y: auto;\n overflow-wrap: break-word;\n overscroll-behavior: contain;\n scrollbar-color: auto;\n }\n #imagus-extension.imagus-sidebar > b {\n font-weight: bold;\n }\n\n #imagus-extension.imagus-sidebar a {\n color: #bbccff\n }\n\n #imagus-extension.imagus-banner {\n position: relative;\n top: -20%;\n }\n #imagus-extension.imagus-banner div {\n display: table;\n height: 100%;\n width: 100%;\n }\n #imagus-extension.imagus-banner span {\n color: white;\n display: table-cell;\n font: 18px sans-serif;\n vertical-align: middle;\n text-align: center;\n white-space: pre-wrap;\n }\n #imagus-extension.imagus-banner:hover span {\n color: #cceeff;\n text-decoration: underline;\n }\n\n #imagus-extension.imagus-videojs {\n height: 100%;\n position: relative;\n top: -100%;\n z-index: -1;\n }\n #imagus-extension.imagus-videojs > #imagus-player {\n --bottom: 0;\n --left: 0;\n --margin: auto;\n --position: absolute;\n --right: 0;\n --top: 0;\n height: 100%;\n width: 100%;\n }\n #imagus-extension .vjs-max-quality-selector-button .vjs-menu {\n width: 12em;\n }\n #imagus-extension .vjs-max-quality-selector-button .vjs-menu .vjs-menu-content {\n padding: 5px;\n }\n\n .imagus-iframe-control {\n pointer-events: auto;\n cursor: pointer;\n position: fixed;\n inset: 0 auto auto 0;\n width: 100%;\n height: 5vh;\n border-left-top-radius: 1vh;\n background: yellow;\n opacity: .1;\n line-height: 5vh;\n text-align: center;\n z-index: 2;\n font-family: sans-serif;\n display: none;\n }\n .imagus-iframe-control:hover {\n opacity: .7;\n }\n #imagus-extension.imagus-iframe {\n /* pointer-events: none; */\n height: 100%;\n position: relative;\n top: -100%;\n /* z-index: -1; */\n }\n #imagus-extension > iframe {\n width: 100%;\n height: 100%;\n border: none;\n }\n `.replace(/\\n\\s*/g, '')\n this.EXTENSION = inject('div', 'imagus-extension', null, this.DIV)\n inject('style', 'imagus-extension-style', style)\n this.EXTENSION_custom_style = inject('style', 'imagus-extension-custom-style')\n override(this)\n}\n\nconst url = new URL($[0])\nif (url.search) {\n const elem = document.createElement('imagus-extension')\n url.searchParams.forEach((val, key) => elem.setAttribute(key, val))\n this.TRG.IMGS_ext_from_url = elem\n}\n\nthis.TRG.IMGS_ext_data?.forEach?.(i => {\n if (i[0] === '') i[0] = 'data:image/svg+xml,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"640\" height=\"360\"></svg>'\n})\n\nreturn this.TRG.IMGS_ext_data","note":"64h + Hababr (fix)\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=2419&limit=1&m=1#1\nOLD\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=2212&limit=1&m=1#1\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=1484&limit=1&m=1#1\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=1379&limit=1&m=1#1\n\n\n!!!\nДинамически загружаемый Video.js (https://github.com/videojs/video.js), поддерживающий HLS, DASH и выбор разрешения.\n+\nДля остановки зацикливания видео - установить в параметре loop значение \"false\":\nhttps://i.imgur.com/iMVa3OF.png\n==\nDynamically loaded Video.js (https://github.com/videojs/video.js), supporting HLS, DASH and resolution selection.\nTo stop video looping, set the loop parameter to \"false\":\nhttps://i.imgur.com/iMVa3OF.png\n+\nБоковая панель с доп.инфо для некоторых сайтов (IMDB, YouTube)./ Side panel with add.info for some sites (IMDB, YouTube):\nhttps://i.imgur.com/se6MwJ6.png\n+\nПоддержка видео Ютуба во фреймах.\n==\nYoutube video support in frames.\n\n\nПРИМЕРЫ / EXAMPLES\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=1480#6\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=1240#9"}}
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
