hababr
Junior Member | Редактировать | Профиль | Сообщение | Цитировать | Сообщить модератору
Код:| {"[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 that.reset_original = that.reset\n that.reset = preventImmediateHover => {\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 return that.reset_original(preventImmediateHover)\n }\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 that.wheeler_original(ev)\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 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) {\n return\n } else {\n return that.show_original(msg, delayed)\n }\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 switch (type[0]) {\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 setSVG = (width, height) => {\n if (!player.isFullscreen()) {\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\n qLevels.on('change', (e) => {\n setSVG(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 setSVG(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)\n that.EXTENSION.style.zIndex = 'auto'\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 }\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 `.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\nreturn this.TRG.IMGS_ext_data","note":"64h\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=1484&limit=1&m=1#1\nOLD\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=1379&limit=1&m=1#1\nhttp://forum.ru-board.com/topic.cgi?forum=5&topic=50874&start=1272&limit=1&m=1#1\n\n!!!\nДинамически загружаемый Video.js (https://github.com/videojs/video.js), поддерживающий HLS, DASH и выбор разрешения.\n==\nDynamically loaded Video.js (https://github.com/videojs/video.js), supporting HLS, DASH and resolution selection.\n+\nБоковая панель с доп.инфо для некоторых сайтов (пока только IMDB)./ Side panel with add.info for some sites (so far only IMDB):\nhttps://i.imgur.com/se6MwJ6.png\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"}} |
|
Всего записей: 108 | Зарегистр. 21-07-2014 | Отправлено: 00:24 10-09-2023 | Исправлено: hababr, 00:24 10-09-2023 |
|
