Universal comic reader
Ekde
This script should not be not be installed directly. It is a library for other scripts to include with the meta directive // @require https://update.greasyfork.org/scripts/417893/876728/vim%20comic%20viewer.js
// ==UserScript==
// @name vim comic viewer
// @description Universal comic reader
// @version 1.0
// @namespace https://openuserjs.org/users/keut
// @exclude *
// @match http://unused.field.xxxx
// @author keut
// @grant GM_getResourceText
// @grant window.close
// @license MIT
// ==/UserScript==
'use strict';
Object.defineProperty(exports, '__esModule', { value: true });
var react = require('react');
var reactDom = require('react-dom');
var react$1 = require('@stitches/react');
const timeout = (millisecond) =>
new Promise((resolve) => setTimeout(resolve, millisecond));
const waitDomContent = (document) =>
document.readyState === 'loading'
? new Promise((r) =>
document.addEventListener('readystatechange', r, {
once: true,
}),
)
: true;
const insertCss = (css) => {
const style = document.createElement('style');
style.innerHTML = css;
document.head.append(style);
};
var utils = /*#__PURE__*/ Object.freeze({
__proto__: null,
timeout: timeout,
waitDomContent: waitDomContent,
insertCss: insertCss,
});
const waitFullscreenChange = () =>
new Promise((resolve) => {
document.addEventListener(
'fullscreenchange',
() => resolve(document.fullscreenElement),
{
once: true,
},
);
});
const useFullscreen = (ref, { onEnter, onExit }) => {
const toggle = react.useCallback(async () => {
if (document.fullscreenElement) {
return document.exitFullscreen();
} else {
await ref.current.requestFullscreen();
await onEnter?.();
while (await waitFullscreenChange());
await onExit?.();
}
}, [onEnter, onExit, ref.current]);
return toggle;
};
const usePageNavigator = () => {
const [observer, setObserver] = react.useState();
const [captures] = react.useState([
{
entries: [],
isSorted: true,
},
]);
const sortAndGetAnchor = react.useCallback(
(pages) => {
const first = pages.entries?.[0]?.target;
if (!pages.isSorted && !!first) {
const children = [...first.parentElement.children];
pages.entries.sort((a, b) => {
const aRatio = Math.round(a.intersectionRatio * 10);
const bRatio = Math.round(b.intersectionRatio * 10);
const aIndex = children.indexOf(a.target);
const bIndex = children.indexOf(b.target);
return (bRatio - aRatio) * 10 + (bIndex - aIndex);
});
pages.isSorted = true;
}
return pages.entries?.[0]?.target;
},
[captures],
);
const goNext = react.useCallback(() => {
const anchor = sortAndGetAnchor(captures[0]);
if (!anchor) {
return;
}
let cursor = anchor;
const originBound = cursor.getBoundingClientRect();
while (cursor.nextElementSibling) {
const next = cursor.nextElementSibling;
const nextBound = next.getBoundingClientRect();
if (originBound.bottom < nextBound.top) {
next.scrollIntoView({
block: 'center',
});
break;
}
cursor = next;
}
}, [sortAndGetAnchor]);
const goPrevious = react.useCallback(() => {
const anchor = sortAndGetAnchor(captures[0]);
if (!anchor) {
return;
}
let cursor = anchor;
const originBound = cursor.getBoundingClientRect();
while (cursor.previousElementSibling) {
const previous = cursor.previousElementSibling;
const previousBound = previous.getBoundingClientRect();
if (previousBound.bottom < originBound.top) {
previous.scrollIntoView({
block: 'center',
});
break;
}
cursor = previous;
}
}, [sortAndGetAnchor]);
const restore = react.useCallback(() => {
const anchor = sortAndGetAnchor(captures[1]);
if (!anchor) {
return;
}
anchor.scrollIntoView({
block: 'center',
});
}, [captures, sortAndGetAnchor]);
react.useEffect(() => {
const newObserver = new IntersectionObserver(
(entries) => {
let newIntersections = captures[0].entries;
for (const entry of entries) {
newIntersections = newIntersections.filter(
(item) => item.target !== entry.target,
);
if (entry.isIntersecting) {
newIntersections.push(entry);
}
}
captures.unshift({
entries: newIntersections,
isSorted: false,
});
captures.splice(2);
console.log(captures[0].entries);
},
{
threshold: [0.01, 0.5],
},
);
setObserver(newObserver);
return () => newObserver.disconnect();
}, [captures]);
return react.useMemo(
() => ({
goNext,
goPrevious,
restore,
observer,
}),
[goNext, goPrevious, restore, observer],
);
};
const init = (source) => {
if (typeof source === 'string') {
return {
src: source,
iterator: (function* () {})(),
};
}
if (Array.isArray(source)) {
return {
src: source[0],
iterator: (function* () {
for (const url of source.slice(1)) {
yield url;
}
})(),
};
}
throw new Error('unknown image source');
};
const reducer = (state, action) => {
if (action !== 'next') {
return init(action);
}
if (state.iterator == null) {
return state;
}
const result = state.iterator.next();
if (result.done === true) {
return {};
}
return {
...state,
src: result.value,
};
};
const usePageReducer = (source) => {
const [state, dispatch] = react.useReducer(reducer, source, init);
const onError = react.useCallback(() => {
dispatch('next');
}, []);
return {
src: state.src,
onError,
};
};
const { styled, css } = react$1.createStyled({});
const Image = styled('img', {
height: '100vh',
maxWidth: '100vw',
objectFit: 'contain',
margin: '4px 1px',
});
const Page = ({ source, observer, ...props }) => {
const { src, onError } = usePageReducer(source);
const ref = react.useRef();
react.useEffect(() => {
const target = ref.current;
if (target && observer) {
observer.observe(target);
return () => observer.unobserve(target);
}
}, [observer, ref.current]);
return react.createElement(
Image,
Object.assign(
{
ref: ref,
src: src,
onError: onError,
loading: 'lazy',
},
props,
),
);
};
const ImageContainer = styled('div', {
backgroundColor: '#eee',
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
flexFlow: 'row-reverse wrap',
overflowY: 'auto',
});
const Viewer = ({ source, ...props }) => {
const [images, setImages] = react.useState();
const [status, setStatus] = react.useState('loading');
const navigator = usePageNavigator();
const ref = react.useRef();
const handleNavigation = react.useCallback(
(event) => {
switch (event.key) {
case 'j':
navigator.goNext();
break;
case 'k':
navigator.goPrevious();
break;
case 'o':
window.close();
break;
}
},
[navigator],
);
const fetchSource = react.useCallback(async () => {
try {
setImages(await source());
setStatus('complete');
} catch (error) {
setStatus('error');
console.log(error);
throw error;
}
}, [source]);
const onEnterFullscreen = react.useCallback(async () => {
ref.current?.focus?.();
await timeout(102);
navigator.restore();
}, [ref.current]);
const onExitFullscreen = react.useCallback(async () => {
await timeout(102);
navigator.restore();
}, [navigator]);
const toggleFullscreen = useFullscreen(ref, {
onEnter: onEnterFullscreen,
onExit: onExitFullscreen,
});
react.useEffect(() => {
const globalKeyHandler = async (event) => {
if (event.key === 'i') {
toggleFullscreen();
}
};
window.addEventListener('keydown', globalKeyHandler);
return () => {
window.removeEventListener('keydown', globalKeyHandler);
};
}, [navigator]);
react.useEffect(() => {
ref.current?.focus?.();
}, [ref.current]);
react.useEffect(() => {
fetchSource();
}, [fetchSource]);
return react.createElement(
ImageContainer,
Object.assign(
{
ref: ref,
className: 'vim_comic_viewer',
css: {
'&&:fullscreen': {
display: 'flex',
},
},
tabIndex: -1,
onKeyDown: handleNavigation,
},
props,
),
status === 'complete'
? images?.map((image, index) =>
react.createElement(Page, {
key: index,
source: image,
observer: navigator.observer,
}),
) || false
: react.createElement(
'p',
null,
status === 'error' ? '에러가 발생했습니다' : '로딩 중...',
),
);
};
const initializeViewer = (root, source) => {
reactDom.render(
react.createElement(Viewer, {
source: source,
}),
root,
);
};
const initializeWithSource = async (source) => {
const root = document.createElement('div');
while (true) {
if (document.body) {
document.body.append(root);
initializeViewer(root, source);
break;
}
await timeout(1);
}
};
const initialize = async (sourceOrSources) => {
if (Array.isArray(sourceOrSources)) {
const source = sourceOrSources.find((x) => x.isApplicable());
if (source) {
await initializeWithSource(source.comicSource);
}
} else {
await initializeWithSource(sourceOrSources.comicSource);
}
};
exports.initialize = initialize;
exports.utils = utils;