405 lines
11 KiB
JavaScript
405 lines
11 KiB
JavaScript
/*
|
|
This script is MUTATED and EXECUTED after DOM has loaded
|
|
It is wrapped into a `(() => {})();` to prevent it from polluting its surroundings.
|
|
|
|
Avoid using array functions, such as `arr.forEach`, as some websites override them with incompatible functions
|
|
|
|
Do not remove the `SETTINGS_START` and `SETTINGS_END` markers below,
|
|
they are used for dynamically injecting settings from Electron.
|
|
*/
|
|
|
|
const sizePairs = [
|
|
['naturalWidth', 'naturalHeight'],
|
|
['videoWidth', 'videoHeight'],
|
|
['width', 'height'],
|
|
];
|
|
|
|
|
|
class FListImagePreviewDomMutator {
|
|
constructor(settings) {
|
|
/* ## SETTINGS_START ## */
|
|
this.settings = settings || {
|
|
selectors: ['video', 'img'],
|
|
debug: true,
|
|
skipElementRemove: false,
|
|
safeTags: [],
|
|
injectStyle: false,
|
|
delayPreprocess: false
|
|
};
|
|
/* ## SETTINGS_END ## */
|
|
|
|
// this.settings.debug = true;
|
|
|
|
this.startTime = Date.now();
|
|
|
|
this.selectors = this.settings.selectors;
|
|
this.skipElementRemove = this.settings.skipElementRemove;
|
|
this.safeTags = this.settings.safeTags;
|
|
this.delayPreprocess = this.settings.delayPreprocess;
|
|
|
|
this.body = document.querySelector('body');
|
|
this.html = document.querySelector('html');
|
|
|
|
this.ipcRenderer = {
|
|
sendToHost: ((window) && (window.rising) && (window.rising.sendToHost))
|
|
? window.rising.sendToHost
|
|
: (...args) => (this.debug('MOCK.ipc.sendToHost', ...args))
|
|
};
|
|
|
|
if (!this.delayPreprocess) {
|
|
this.preprocess();
|
|
}
|
|
|
|
this.img = this.detectImage(this.selectors, this.body);
|
|
this.wrapper = this.createWrapperElement();
|
|
this.style = this.createStyleElement();
|
|
}
|
|
|
|
|
|
preprocess() {
|
|
for (const el of document.querySelectorAll('header, .header, nav, .nav, .navbar, .navigation')) {
|
|
try {
|
|
el.remove();
|
|
} catch (err) {
|
|
this.error('preprocess', err);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
detectImage(selectors, body) {
|
|
let selected = [];
|
|
|
|
for (const selector of selectors) {
|
|
const selectedElements = (Array.from(document.querySelectorAll(selector)).filter((i) => ((i.width !== 1) && (i.height !== 1))));
|
|
selected = selected.concat(selectedElements);
|
|
}
|
|
|
|
this.debug('detectImage.selected', selectors, selected);
|
|
|
|
const img = selected.filter(el => (el !== body)).shift();
|
|
|
|
this.debug('detectImage.found', !!img, img);
|
|
|
|
return img;
|
|
}
|
|
|
|
|
|
run() {
|
|
if (!this.img) {
|
|
return;
|
|
}
|
|
|
|
if (this.delayPreprocess) {
|
|
this.preprocess();
|
|
}
|
|
|
|
this.updateImgSize(this.img, 'pre');
|
|
|
|
this.attachImgToWrapper(this.img, this.wrapper);
|
|
this.attachWrapperToBody(this.wrapper, this.body);
|
|
this.attachStyleToWrapper(this.style, this.wrapper);
|
|
|
|
this.forceElementStyling(this.html, this.body, this.wrapper, this.img);
|
|
|
|
this.resolveVideoSrc(this.img);
|
|
|
|
this.setEventListener('DOMContentLoaded', this.img);
|
|
this.setEventListener('load', this.img);
|
|
this.setEventListener('loadstart', this.img);
|
|
|
|
this.attemptPlay(this.img, true);
|
|
|
|
this.updateImgSizeTimer(this.img);
|
|
|
|
this.cleanDom(this.body);
|
|
}
|
|
|
|
|
|
cleanDom(body) {
|
|
if (this.skipElementRemove) {
|
|
return;
|
|
}
|
|
|
|
const removeList = [];
|
|
const safeIds = ['flistWrapper', 'flistError', 'flistHider', 'flistStyle'];
|
|
const safeTags = this.safeTags;
|
|
|
|
for (const el of body.childNodes) {
|
|
try {
|
|
if (
|
|
(safeIds.indexOf(el.id) < 0)
|
|
&& ((!el.tagName) || (safeTags.indexOf(el.tagName.toLowerCase())) < 0)
|
|
) {
|
|
removeList.push(el);
|
|
}
|
|
} catch (err) {
|
|
this.error('cleanDom find nodes', err);
|
|
}
|
|
}
|
|
|
|
for (const el of removeList) {
|
|
try {
|
|
el.remove();
|
|
} catch (err) {
|
|
this.error('cleanDom remove element', err);
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
updateImgSizeTimer(img) {
|
|
const result = this.updateImgSize(img, 'timer');
|
|
|
|
if (!result) {
|
|
setTimeout(() => this.updateImgSizeTimer(img), 100);
|
|
}
|
|
}
|
|
|
|
|
|
resolveVideoSrc(img) {
|
|
if ((img.src) || (!img.tagName) || ((img.tagName) && (img.tagName.toUpperCase() !== 'VIDEO'))) {
|
|
return;
|
|
}
|
|
|
|
this.debug('resolveVideoSrc', 'Needs a content URL', img);
|
|
|
|
const contentUrls = document.querySelectorAll('meta[itemprop="contentURL"]');
|
|
|
|
if ((contentUrls) && (contentUrls.length > 0)) {
|
|
this.debug('Found content URLs', contentUrls);
|
|
|
|
const cu = contentUrls[0];
|
|
|
|
if ((cu.attributes) && (cu.attributes.content) && (cu.attributes.content.value)) {
|
|
this.debug('Content URL', cu.attributes.content.value);
|
|
|
|
img.src = cu.attributes.content.value;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
setEventListener(eventName, img) {
|
|
document.addEventListener(eventName, (event) => {
|
|
this.debug('event', eventName, event);
|
|
|
|
this.updateImgSize(img, `event.${eventName}`);
|
|
this.attemptPlay(img, false);
|
|
});
|
|
}
|
|
|
|
|
|
async attemptPlay(img, lessStrict) {
|
|
this.debug('attemptPlay', img, lessStrict);
|
|
|
|
try {
|
|
if (
|
|
(img.play)
|
|
&& (
|
|
(lessStrict)
|
|
|| ((!lessStrict) && (!img.ended) && (!(img.currentTime > 0)))
|
|
)
|
|
)
|
|
{
|
|
img.onpause = () => {
|
|
img.muted = true;
|
|
img.loop = true;
|
|
img.play();
|
|
};
|
|
|
|
img.muted = true;
|
|
img.loop = true;
|
|
|
|
const result = await img.play();
|
|
|
|
img.muted = true;
|
|
img.loop = true;
|
|
|
|
this.debug('attemptPlay result', result);
|
|
}
|
|
else {
|
|
this.debug('attemptPlay skip', img.ended, img.currentTime);
|
|
}
|
|
} catch (err) {
|
|
this.error('attemptPlay', err, img, lessStrict);
|
|
}
|
|
}
|
|
|
|
|
|
forceElementStyling(html, body, wrapper, img) {
|
|
try {
|
|
body.class = '';
|
|
img.class = '';
|
|
wrapper.class = '';
|
|
html.class = '';
|
|
|
|
body.removeAttribute('class');
|
|
img.removeAttribute('class');
|
|
wrapper.removeAttribute('class');
|
|
html.removeAttribute('class');
|
|
|
|
img.removeAttribute('width');
|
|
img.removeAttribute('height');
|
|
} catch (err) {
|
|
this.error('forceElementStyling remove class', err);
|
|
}
|
|
|
|
html.style = this.getWrapperStyleOverrides();
|
|
body.style = this.getWrapperStyleOverrides();
|
|
img.style = this.getImageStyleOverrides();
|
|
}
|
|
|
|
|
|
attachWrapperToBody(wrapper, body) {
|
|
body.append(wrapper);
|
|
}
|
|
|
|
|
|
attachStyleToWrapper(style, wrapper) {
|
|
try {
|
|
wrapper.append(style);
|
|
} catch (err) {
|
|
this.error('attach style', err);
|
|
}
|
|
}
|
|
|
|
|
|
attachImgToWrapper(img, wrapper) {
|
|
try {
|
|
img.remove();
|
|
} catch(err) {
|
|
this.error('attachImgToWrapper', 'remove()', err);
|
|
|
|
try {
|
|
img.parentNode.removeChild(img);
|
|
} catch(err2) {
|
|
this.error('attachImgToWrapper', 'removeChild()', err2);
|
|
}
|
|
}
|
|
|
|
wrapper.append(img);
|
|
}
|
|
|
|
|
|
createWrapperElement() {
|
|
const el = document.createElement('div');
|
|
el.id = 'flistWrapper';
|
|
|
|
el.style = this.getWrapperStyleOverrides()
|
|
+ 'z-index: 100000 !important;'
|
|
+ 'background-color: black !important;'
|
|
+ 'background-size: contain !important;'
|
|
+ 'background-repeat: no-repeat !important;'
|
|
+ 'background-position: top left !important;';
|
|
|
|
return el;
|
|
}
|
|
|
|
|
|
createStyleElement() {
|
|
if (!!this.settings.skipInjectStyle) {
|
|
return document.createElement('i');
|
|
}
|
|
|
|
const el = document.createElement('style');
|
|
|
|
el.id = 'flistStyle';
|
|
|
|
el.textContent = `
|
|
html {
|
|
${this.getWrapperStyleOverrides()}
|
|
}
|
|
|
|
body {
|
|
${this.getWrapperStyleOverrides()}
|
|
}
|
|
|
|
#flistWrapper img, #flistWrapper video {
|
|
${this.getImageStyleOverrides()}
|
|
}
|
|
`;
|
|
|
|
return el;
|
|
}
|
|
|
|
|
|
resolveImgSize(img) {
|
|
const solved = {};
|
|
|
|
for (let ri = 0; ri < sizePairs.length; ri++) {
|
|
const val = sizePairs[ri];
|
|
|
|
if ((img[val[0]]) && (img[val[1]])) {
|
|
solved.width = img[val[0]];
|
|
solved.height = img[val[1]];
|
|
break;
|
|
}
|
|
}
|
|
|
|
return solved;
|
|
}
|
|
|
|
|
|
updateImgSize(img, stage) {
|
|
const imSize = this.resolveImgSize(img);
|
|
|
|
if ((imSize.width) && (imSize.height)) {
|
|
this.debug('IPC webview.img', imSize, stage);
|
|
|
|
this.ipcRenderer.sendToHost('webview.img', imSize.width, imSize.height, stage);
|
|
return true;
|
|
}
|
|
|
|
return false;
|
|
}
|
|
|
|
|
|
getBasicStyleOverrides() {
|
|
return 'border: 0 !important;'
|
|
+ 'padding: 0 !important;'
|
|
+ 'margin: 0 !important;'
|
|
+ 'width: 100% !important;'
|
|
+ 'height: 100% !important;'
|
|
+ 'opacity: 1 !important;'
|
|
+ 'min-width: initial !important;'
|
|
+ 'min-height: initial !important;'
|
|
+ 'max-width: initial !important;'
|
|
+ 'max-height: initial !important;'
|
|
+ 'display: block !important;'
|
|
+ 'visibility: visible !important;';
|
|
}
|
|
|
|
|
|
getWrapperStyleOverrides() {
|
|
return this.getBasicStyleOverrides()
|
|
+ 'overflow: hidden !important;'
|
|
+ 'top: 0 !important;'
|
|
+ 'left: 0 !important;'
|
|
+ 'position: absolute !important;';
|
|
}
|
|
|
|
|
|
getImageStyleOverrides() {
|
|
return this.getBasicStyleOverrides()
|
|
+ 'object-position: top left !important;'
|
|
+ 'object-fit: contain !important;';
|
|
}
|
|
|
|
|
|
debug(...args) {
|
|
if (this.settings.debug) {
|
|
console.log('DOM Mutator:', ...args, `${(Date.now() - this.startTime)/1000}s`);
|
|
}
|
|
}
|
|
|
|
error(...args) {
|
|
console.error('DOM Mutator:', ...args, `${(Date.now() - this.startTime)/1000}s`);
|
|
}
|
|
}
|
|
|
|
/* ## EXECUTION_START ## */
|
|
const flistImagePreviewMutator = new FListImagePreviewDomMutator();
|
|
flistImagePreviewMutator.run();
|
|
/* ## EXECUTION_END ## */
|