.
let div = document.createElement("div");
div.innerHTML = resource;
let node = div.firstElementChild;
node.remove();
/\x2f Stash the source path on the node. This is just for debugging to make
/\x2f it easy to tell where things came from.
node.dataset.ppixivResource = src;
/\x2f Cache the result, so we don't re-parse the node every time we create one.
this._resource_cache[src] = node;
}
let node = this._resource_cache[src];
return document.importNode(node, true);
}
/\x2f Prompt to save a blob to disk. For some reason, the really basic FileSaver API disappeared from
/\x2f the web.
static saveBlob(blob, filename)
{
let blobUrl = URL.createObjectURL(blob);
let a = document.createElement("a");
a.hidden = true;
a.href = blobUrl;
a.download = filename;
document.body.appendChild(a);
a.click();
/\x2f Clean up.
/\x2f
/\x2f If we revoke the URL now, or with a small timeout, Firefox sometimes just doesn't show
/\x2f the save dialog, and there's no way to know when we can, so just use a large timeout.
realSetTimeout(() => {
window.URL.revokeObjectURL(blobUrl);
a.remove();
}, 1000);
}
/\x2f Input elements have no way to tell when edits begin or end. The input event tells
/\x2f us when the user changes something, but it doesn't tell us when drags begin and end.
/\x2f This is important for things like undo: you want to save undo the first time a slider
/\x2f value changes during a drag, but not every time, or if the user clicks the slider but
/\x2f doesn't actually move it.
/\x2f
/\x2f This adds events:
/\x2f
/\x2f editbegin
/\x2f edit
/\x2f editend
/\x2f
/\x2f edit events are always surrounded by editbegin and editend. If the user makes multiple
/\x2f edits in one action (eg. moving an input slider), they'll be sent in the same begin/end
/\x2f block.
/\x2f
/\x2f This is only currently used for sliders, and doesn't handle things like keyboard navigation
/\x2f since that gets overridden by other UI anyway.
/\x2f
/\x2f signal can be an AbortSignal to remove these event listeners.
static watchEdits(input, { signal }={})
{
let dragging = false;
let insideEdit = false;
input.addEventListener("mousedown", (e) => {
if(e.button != 0 || dragging)
return;
dragging = true;
}, { signal });
input.addEventListener("mouseup", (e) => {
if(e.button != 0 || !dragging)
return;
dragging = false;
if(insideEdit)
{
insideEdit = false;
input.dispatchEvent(new Event("editend"));
}
}, { signal });
input.addEventListener("input", (e) => {
/\x2f Send an editbegin event if we haven't yet.
let send_editend = false;
if(!insideEdit)
{
insideEdit = true;
input.dispatchEvent(new Event("editbegin"));
/\x2f If we're not dragging, this is an isolated edit, so send editend immediately.
send_editend = !dragging;
}
/\x2f The edit event is like input, but surrounded by editbegin/editend.
input.dispatchEvent(new Event("edit"));
if(send_editend)
{
insideEdit = false;
input.dispatchEvent(new Event("editend"));
}
}, { signal });
}
/\x2f Force all external links to target=_blank on mobile.
/\x2f
/\x2f This improves links on iOS, especially when running as a PWA: the link will open in a nested Safari
/\x2f context and then return to us without reloading when the link is closed.
/\x2f
/\x2f We currently only look at links when they're first added to the document and don't listen for
/\x2f changes to href.
static forceTargetBlankOnElement(node)
{
if(node.href == "" || node.getAttribute("target") == "_blank")
return;
let url;
try {
url = new URL(node.href);
if(url.origin == document.location.origin)
return;
} catch(e) {
/\x2f Ignore invalid URLs.
return;
}
node.setAttribute("target", "_blank");
}
static forceTargetBlank()
{
if(!ppixiv.mobile)
return;
function updateNode(node)
{
if(node.querySelectorAll == null)
return;
helpers.forceTargetBlankOnElement(node);
for(let a of node.querySelectorAll("A:not([target='_blank'])"))
helpers.forceTargetBlankOnElement(a);
}
updateNode(document.documentElement);
let observer = new MutationObserver((mutations) => {
for(let mutation of mutations)
{
for(let node of mutation.addedNodes)
updateNode(node);
}
});
observer.observe(document.documentElement, { subtree: true, childList: true });
}
/\x2f Work around iOS Safari weirdness. If a drag from the left or right edge of the
/\x2f screen causes browser navigation, the underlying window position jumps, which
/\x2f causes us to see pointer movement that didn't actually happen. If this happens
/\x2f during a drag, it causes the drag to move horizontally by roughly the screen
/\x2f width.
static shouldIgnoreHorizontalDrag(event)
{
/\x2f If there are no other history entries, we don't need to do this, since browser back
/\x2f can't trigger.
if(!ppixiv.ios || window.history.length <= 1)
return false;
/\x2f Ignore this event if it's close to the left or right edge of the screen.
let width = 25;
return event.clientX < width || event.clientX > window.innerWidth - width;
}
static async hideBodyDuringRequest(func)
{
/\x2f This hack tries to prevent the browser from flickering content in the wrong
/\x2f place while switching to and from fullscreen by hiding content while it's changing.
/\x2f There's no reliable way to tell when changing opacity has actually been displayed
/\x2f since displaying frames isn't synchronized with toggling fullscreen, so we just
/\x2f wait briefly based on testing.
document.body.style.opacity = 0;
let waitPromise = null;
try {
/\x2f Wait briefly for the opacity change to be drawn.
let delay = 50;
let start = Date.now();
while(Date.now() - start < delay)
await helpers.other.vsync();
/\x2f Start entering or exiting fullscreen.
waitPromise = func();
start = Date.now();
while(Date.now() - start < delay)
await helpers.other.vsync();
} finally {
document.body.style.opacity = 1;
}
/\x2f Wait for requestFullscreen to finish after restoring opacity, so if it's waiting
/\x2f to request permission we won't leave the window blank the whole time. We'll just
/\x2f flash black briefly.
await waitPromise;
}
static isFullscreen()
{
/\x2f In VVbrowser, use our native interface.
let vvbrowser = this._vvbrowser();
if(vvbrowser)
return vvbrowser.getFullscreen();
if(document.fullscreenElement != null)
return true;
/\x2f Work around a dumb browser bug: document.fullscreen is false if fullscreen is set by something other
/\x2f than the page, like pressing F11, making it a pain to adjust the UI for fullscreen. Try to detect
/\x2f this by checking if the window size matches the screen size. This requires working around even more
/\x2f ugliness:
/\x2f
/\x2f - We have to check innerWidth rather than outerWidth. In fullscreen they should be the same since
/\x2f there's no window frame, but in Chrome, the inner size is 16px larger than the outer size.
/\x2f - innerWidth is scaled by devicePixelRatio, so we have to factor that out. Since this leads to
/\x2f fractional values, we also need to threshold the result.
/\x2f
/\x2f If only there was an API that could just tell us whether we're fullscreened. Maybe it could be called
/\x2f "document.fullscreen". We can only dream...
let windowWidth = window.innerWidth * devicePixelRatio;
let windowHeight = window.innerHeight * devicePixelRatio;
if(Math.abs(windowWidth - window.screen.width) < 2 && Math.abs(windowHeight - window.screen.height) < 2)
return true;
/\x2f In Firefox, outer size is correct, so check it too. This makes us detect fullscreen if inner dimensions
/\x2f are reduced by panels in fullscreen.
if(window.outerWidth == window.screen.width && window.outerHeight == window.screen.height)
return true;
return false;
}
/\x2f If we're in VVbrowser, return the host object implemented in VVbrowserInterface.cpp. Otherwise,
/\x2f return null.
static _vvbrowser({sync=true}={})
{
if(sync)
return window.chrome?.webview?.hostObjects?.sync?.vvbrowser;
else
return window.chrome?.webview?.hostObjects?.vvbrowser;
}
static async toggleFullscreen()
{
await helpers.hideBodyDuringRequest(async() => {
/\x2f If we're in VVbrowser:
let vvbrowser = this._vvbrowser();
if(vvbrowser)
{
vvbrowser.setFullscreen(!helpers.isFullscreen());
return;
}
/\x2f Otherwise, use the regular fullscreen API.
if(helpers.isFullscreen())
document.exitFullscreen();
else
document.documentElement.requestFullscreen();
});
}
/\x2f Return true if url1 and url2 are the same, ignoring any language prefix on the URLs.
static areUrlsEquivalent(url1, url2)
{
if(url1 == null || url2 == null)
return false;
url1 = helpers.pixiv.getUrlWithoutLanguage(url1);
url2 = helpers.pixiv.getUrlWithoutLanguage(url2);
return url1.toString() == url2.toString();
}
static setPageTitle(title)
{
let title_element = document.querySelector("title");
if(title_element.textContent == title)
return;
/\x2f Work around a Chrome bug: changing the title by modifying textContent occasionally flickers
/\x2f a default title. It seems like it's first assigning "", triggering the default, and then
/\x2f assigning the new value. This becomes visible especially on high refresh-rate monitors.
/\x2f Work around this by adding a new title element with the new text and then removing the old
/\x2f one, which prevents this from happening. This is easy to see by monitoring title change
/\x2f messages in VVbrowser.
let new_title = document.createElement("title");
new_title.textContent = title;
document.head.appendChild(new_title);
title_element.remove();
document.dispatchEvent(new Event("windowtitlechanged"));
}
static setPageIcon(url)
{
document.querySelector("link[rel='icon']").href = url;
}
/\x2f Given a list of tags, return the URL to use to search for them. This differs
/\x2f depending on the current page.
static getArgsForTagSearch(tags, url)
{
url = helpers.pixiv.getUrlWithoutLanguage(url);
let type = helpers.pixiv.getPageTypeFromUrl(url);
if(type == "tags")
{
/\x2f If we're on search already, just change the search tag, so we preserve other settings.
/\x2f /tags/tag/artworks -> /tag/new tag/artworks
let parts = url.pathname.split("/");
parts[2] = encodeURIComponent(tags);
url.pathname = parts.join("/");
} else {
/\x2f If we're not, change to search and remove the rest of the URL.
url = new URL("/tags/" + encodeURIComponent(tags) + "/artworks#ppixiv", url);
}
/\x2f Don't include things like the current page in the URL.
let args = helpers.getCanonicalUrl(url);
return args;
}
/\x2f Return a canonical URL for a data source. If the canonical URL is the same,
/\x2f the same instance of the data source should be used.
/\x2f
/\x2f A single data source is used eg. for a particular search and search flags. If
/\x2f flags are changed, such as changing filters, a new data source instance is created.
/\x2f However, some parts of the URL don't cause a new data source to be used. Return
/\x2f a URL with all unrelated parts removed, and with query and hash parameters sorted
/\x2f alphabetically.
static getCanonicalUrl(url, {
/\x2f If false, we'll leave the search page and current image in the URL so the data
/\x2f source will start where it left off.
startAtBeginning=true
}={})
{
/\x2f Make a copy of the URL.
url = new URL(url);
/\x2f Remove /en from the URL if it's present.
url = helpers.pixiv.getUrlWithoutLanguage(url);
let args = new helpers.args(url);
/\x2f Remove parts of the URL that don't affect which data source instance is used.
/\x2f
/\x2f If p=1 is in the query, it's the page number, which doesn't affect the data source.
if(startAtBeginning)
args.query.delete("p");
/\x2f The manga page doesn't affect the data source.
args.hash.delete("page");
/\x2f #view=thumbs controls which view is active.
args.hash.delete("view");
/\x2f illust_id in the hash is always just telling us which image within the current
/\x2f data source to view. data_sources.current_illust is different and is handled in
/\x2f the subclass.
if(startAtBeginning)
args.hash.delete("illust_id");
/\x2f These are for temp view and don't affect the data source.
args.hash.delete("virtual");
args.hash.delete("temp-view");
/\x2f This is for overriding muting.
args.hash.delete("view-muted");
/\x2f Ignore filenames for local IDs.
if(startAtBeginning)
args.hash.delete("file");
/\x2f slideshow is used by the viewer and doesn't affect the data source.
args.hash.delete("slideshow");
/\x2f Sort query and hash parameters.
args.query = helpers.other.sortQueryParameters(args.query);
args.hash = helpers.other.sortQueryParameters(args.hash);
return args;
}
/\x2f Add a basic event handler for an input:
/\x2f
/\x2f - When enter is pressed, submit will be called.
/\x2f - Event propagation will be stopped, so global hotkeys don't trigger.
/\x2f
/\x2f Note that other event handlers on the input will still be called.
static inputHandler(input, submit)
{
input.addEventListener("keydown", function(e) {
/\x2f Always stopPropagation, so inputs aren't handled by main input handling.
e.stopPropagation();
/\x2f Note that we need to use e.key here and not e.code. For enter presses
/\x2f that are IME confirmations, e.code is still "Enter", but e.key is "Process",
/\x2f which prevents it triggering this.
if(e.key == "Enter")
submit(e);
});
}
/\x2f Navigate to args, which can be a URL object or a helpers.args.
static navigate(args, {
/\x2f If true, push the navigation onto browser history. If false, replace the current
/\x2f state.
addToHistory=true,
/\x2f popstate.navigationCause is set to this. This allows event listeners to determine
/\x2f what caused a navigation. For browser forwards/back, this won't be present.
cause="navigation",
/\x2f When navigating from an image to a search, by default we try to scroll to the image
/\x2f we came from. If scrollToTop is true, scroll to the top of the search instead.
scrollToTop=false,
/\x2f We normally synthesize window.onpopstate, so listeners for navigation will see this
/\x2f as a normal navigation. If this is false, don't do this.
sendPopstate=true,
}={})
{
if(args instanceof URL)
args = new helpers.args(args);
/\x2f Store the previous URL for comparison. Normalize it with args, so comparing it with
/\x2f toString() is reliable if the escaping is different, such as different %1E case or
/\x2f not escaping spaces as +.
let old_url = new helpers.args(ppixiv.plocation).toString();
/\x2f Use the history state from args if it exists.
let history_data = {
...args.state,
};
/\x2f If the state wouldn't change at all, don't set it, so we don't add junk to
/\x2f history if the same link is clicked repeatedly. Comparing state via JSON
/\x2f is OK here since JS will maintain key order.
if(args.url.toString() == old_url && JSON.stringify(history_data) == JSON.stringify(history.state))
return;
/\x2f console.log("Changing state to", args.url.toString());
if(addToHistory)
ppixiv.phistory.pushState(history_data, "", args.url.toString());
else
ppixiv.phistory.replaceState(history_data, "", args.url.toString());
/\x2f Chrome is broken. After replacing state for a while, it starts logging
/\x2f
/\x2f "Throttling history state changes to prevent the browser from hanging."
/\x2f
/\x2f This is completely broken: it triggers with state changes no faster than the
/\x2f user can move the mousewheel (much too sensitive), and it happens on replaceState
/\x2f and not just pushState (which you should be able to call as fast as you want).
/\x2f
/\x2f People don't think things through.
/\x2f console.log("Set URL to", ppixiv.plocation.toString(), addToHistory);
if(ppixiv.plocation.toString() != old_url)
{
if(sendPopstate)
{
/\x2f Browsers don't send onpopstate for history changes, but we want them, so
/\x2f send a synthetic one.
/\x2f console.log("Dispatching popstate:", ppixiv.plocation.toString());
let event = new PopStateEvent("pp:popstate");
/\x2f Set initialNavigation to true. This indicates that this event is for a new
/\x2f navigation, and not from browser forwards/back.
event.navigationCause = cause;
event.scrollToTop = scrollToTop;
window.dispatchEvent(event);
}
/\x2f Always dispatch pp:statechange. This differs from popstate (pp:popstate) in that it's
/\x2f always sent for all state changes. This is used when we have UI that wants to refresh
/\x2f based on the current location, even if it's an in-place update for the same location where
/\x2f we don't send popstate.
window.dispatchEvent(new PopStateEvent("pp:statechange"));
}
}
static getTitleForIllust(mediaInfo)
{
if(mediaInfo == null)
return null;
let pageTitle = "";
if(!helpers.mediaId.isLocal(mediaInfo.mediaId))
{
/\x2f For Pixiv images, use the username and title, and indicate if the image is bookmarked.
/\x2f We don't show bookmarks in the title for local images, since it's less useful.
if(mediaInfo.bookmarkData)
pageTitle += "★";
pageTitle += mediaInfo.userName + " - " + mediaInfo.illustTitle;
return pageTitle;
}
else
{
/\x2f For local images, put the filename at the front, and the two parent directories after
/\x2f it. For example, "books/Book Name/001" will be displayed a "001 - books/Book Name".
/\x2f This is consistent with the title we use in the search view.
let {id} = helpers.mediaId.parse(mediaInfo.mediaId);
let name = helpers.strings.getPathSuffix(id, 1, 0); /\x2f filename
let parent = helpers.strings.getPathSuffix(id, 2, 1); /\x2f parent directories
pageTitle += \`\${name} - \${parent}\`;
}
return pageTitle;
}
static setTitle(mediaInfo)
{
let pageTitle = helpers.getTitleForIllust(mediaInfo) ?? "Loading...";
helpers.setPageTitle(pageTitle);
}
static setIcon({vview=false}={})
{
if(ppixiv.native || vview)
helpers.setPageIcon(ppixiv.resources['resources/vview-icon.png']);
else
helpers.setPageIcon(ppixiv.resources['resources/regular-pixiv-icon.png']);
}
static setTitleAndIcon(mediaInfo)
{
helpers.setTitle(mediaInfo)
helpers.setIcon()
}
/\x2f Return 1 if the given keydown event should zoom in, -1 if it should zoom
/\x2f out, or null if it's not a zoom keypress.
static isZoomHotkey(e)
{
if(!e.ctrlKey)
return null;
if(e.code == "NumpadAdd" || e.code == "Equal") /* = */
return +1;
if(e.code == "NumpadSubtract" || e.code == "Minus") /* - */
return -1;
return null;
}
}
/\x2f A convenience wrapper for setTimeout:
export class Timer
{
constructor(func)
{
this.func = func;
}
_runFunc = () =>
{
this.func();
}
clear()
{
if(this.id == null)
return;
realClearTimeout(this.id);
this.id = null;
}
set(ms)
{
this.clear();
this.id = realSetTimeout(this._runFunc, ms);
}
};
/\x2f Polyfill movementX and movementY for iOS < 17.
export class PointerEventMovement
{
constructor()
{
/\x2f If the browser supports movementX (everyone except for iOS Safari), this isn't
/\x2f needed.
if("movementX" in new PointerEvent("test"))
return;
this.last_pointer_positions = {};
window.addEventListener("pointerdown", (e) => this.pointerdown(e), { capture: true });
window.addEventListener("pointermove", (e) => this.pointerdown(e), { capture: true });
window.addEventListener("pointerup", (e) => this.pointerup(e), { capture: true });
window.addEventListener("pointercancel", (e) => this.pointerup(e), { capture: true });
}
pointerdown(e)
{
/\x2f If this is the first event for this pointerId, store the current position. Otherwise,
/\x2f store the previous position.
let previousX = this.last_pointer_positions[e.pointerId]?.x ?? e.screenX;
let previousY = this.last_pointer_positions[e.pointerId]?.y ?? e.screenY;
this.last_pointer_positions[e.pointerId] = { x: e.screenX, y: e.screenY };
e.movementX = e.screenX - previousX;
e.movementY = e.screenY - previousY;
}
pointerup(e)
{
delete this.last_pointer_positions[e.pointerId];
e.movementX = e.movementY = 0;
}
}
/\x2f This is like pointer_listener, but for watching for keys being held down.
/\x2f This isn't meant to be used for single key events.
class GlobalKeyListener
{
constructor()
{
this.keys_pressed = new Set();
this.listeners = new Map(); /\x2f by key
/\x2f Listen to keydown on bubble, so we don't see key presses that were stopped
/\x2f by the original target, but listen to keyup on capture.
window.addEventListener("keydown", (e) => {
if(this.keys_pressed.has(e.key))
return;
this.keys_pressed.add(e.key);
this._callListenersForKey(e.key, true);
});
window.addEventListener("keyup", (e) => {
if(!this.keys_pressed.has(e.key))
return;
this.keys_pressed.delete(e.key);
this._callListenersForKey(e.key, false);
}, true);
window.addEventListener("blur", (e) => {
this.releaseAllKeys();
});
/\x2f If the context menu is shown, release all keys, since browsers forget to send
/\x2f keyup events when the context menu is open.
window.addEventListener("contextmenu", async (e) => {
/\x2f This is a pain. We need to handle this event as late as possible, to let
/\x2f all other handlers have a chance to preventDefault. If we check it now,
/\x2f contextmenu handlers (like blocking_context_menu_until_timer) can be registered
/\x2f after us, and we won't see their preventDefault.
/\x2f
/\x2f This really wants an option for event listeners that causes it to be run after
/\x2f other event handlers, but doesn't allow it to preventDefault, for event handlers
/\x2f that specifically want to know if an event ended up being prevented. But that
/\x2f doesn't exist, so instead we just sleep to exit to the event loop, and look at
/\x2f the event after it's completed.
await helpers.other.sleep(0);
if(e.defaultPrevented)
return;
this.releaseAllKeys();
});
}
releaseAllKeys()
{
for(let key of this.keys_pressed)
this._callListenersForKey(key, false);
this.keys_pressed.clear();
}
_getListenersForKey(key, { create=false }={})
{
if(!this.listeners.has(key))
{
if(!create)
return [];
this.listeners.set(key, new Set);
}
return this.listeners.get(key);
}
_registerListener(key, listener)
{
let listeners_for_key = this._getListenersForKey(key, { create: true });
listeners_for_key.add(listener);
/\x2f If key is already pressed, run the callback. Defer this so we don't call
/\x2f it while the caller is still registering.
realSetTimeout(() => {
/\x2f Stop if the listener was unregistered before we got here.
if(!this._getListenersForKey(key).has(listener))
return;
if(this.keys_pressed.has(key))
listener.keyChanged(true);
}, 0);
}
_unregisterListener(key, listener)
{
let listeners_for_key = this._getListenersForKey(key, { create: false });
if(listeners_for_key)
listeners_for_key.delete(listener);
}
_callListenersForKey(key, down)
{
let listeners_for_key = this._getListenersForKey(key, { create: false });
if(listeners_for_key == null)
return;
for(let key_listener of listeners_for_key.values())
key_listener.keyChanged(down);
};
}
export class KeyListener
{
static singleton = null;
constructor(key, callback, {signal=null}={})
{
if(KeyListener.singleton == null)
KeyListener.singleton = new GlobalKeyListener();
this.callback = callback;
this.pressed = false;
KeyListener.singleton._registerListener(key, this);
if(signal)
{
signal.addEventListener("abort", (e) => {
KeyListener.singleton._unregisterListener(key, this);
});
}
}
keyChanged = (pressed) =>
{
if(this.pressed == pressed)
return;
this.pressed = pressed;
this.callback(pressed);
}
}
/\x2f A helper to run an async function and abort a previous call if it's still running.
/\x2f
/\x2f async function func({args, signal}) { signal.throwIfAborted(); }
/\x2f this.runner = new GuardedRunner();
/\x2f this.runner.call(func, { args });
/\x2f this.runner.call(func, { args }); /\x2f aborts the previous call
/\x2f this.runner.abort(); /\x2f also aborts the previous call
/\x2f await this.runner.promise; /\x2f wait for the most recent call
export class GuardedRunner
{
constructor({signal}={})
{
this._abort = null;
this._promise = null;
if(signal)
signal.addEventListener("abort", () => this.abort());
}
call(func, {...args})
{
/\x2f If a previous call is still running, abort it.
if(this._abort)
this.abort();
/\x2f Create an AbortController for this call.
let abort = this._abort = new AbortController();
args = { ...args, signal: abort.signal };
/\x2f Run the function.
let promise = this._promise = this._runIgnoringAborts(func, args);
promise.finally(() => {
if(this._abort == abort)
this._abort = null;
if(this._promise == promise)
this._promise = null;
});
return promise;
}
/\x2f If a call is running, return its promise, otherwise return null.
get promise()
{
return this._promise;
}
/\x2f Return true if a call is running.
get isRunning()
{
return this._abort != null;
}
async _runIgnoringAborts(func, args)
{
try {
return await func(args);
} catch(e) {
if(e.name == "AbortError")
return;
throw e;
}
}
abort()
{
if(this._abort)
{
this._abort.abort();
/\x2f Clear this._abort synchronously so isRunning is false when we return, and doesn't
/\x2f have to wait for the exception to resolve.
this._abort = null;
this._promise = null;
}
}
}
export class FixedDOMRect extends DOMRect
{
constructor(left, top, right, bottom)
{
super(left, top, right-left, bottom-top);
}
/\x2f Allow editing the rect as a pair of x1,y1/x2,y2 coordinates, which is more natural
/\x2f than x,y and width,height. x1 and y1 can be greater than x2 and y2 if the rect is
/\x2f inverted (width or height are negative).
get x1() { return this.x; }
get y1() { return this.y; }
get x2() { return this.x + this.width; }
get y2() { return this.y + this.height; }
set x1(value) { this.width += this.x - value; this.x = value; }
set y1(value) { this.height += this.y - value; this.y = value; }
set x2(value) { this.width = value - super.x; }
set y2(value) { this.height = value - super.y; }
get middleHorizontal() { return (super.right + super.left) / 2; }
get middleVertical() { return (super.top + super.bottom) / 2; }
/\x2f Return a new FixedDOMRect with the edges pushed outwards by value.
extendOutwards(value)
{
return new FixedDOMRect(
this.left - value,
this.top - value,
this.right + value,
this.bottom + value
)
}
/\x2f Crop this rect to fit within outer.
cropTo(outer)
{
return new FixedDOMRect(
helpers.math.clamp(this.x1, outer.x1, outer.x2),
helpers.math.clamp(this.y1, outer.y1, outer.y2),
helpers.math.clamp(this.x2, outer.x1, outer.x2),
helpers.math.clamp(this.y2, outer.y1, outer.y2),
);
}
}
/\x2f Add:
/\x2f
/\x2f await controller.signal.wait()
/\x2f
/\x2f to wait for an AbortSignal to be aborted.
AbortSignal.prototype.wait = function()
{
if(this.aborted)
return;
if(this._promise == null)
{
this._promise = new Promise((accept) => {
this._promise_accept = accept;
});
this.addEventListener("abort", (e) => {
this._promise_accept();
}, { once: true });
}
return this._promise;
};
/\x2f A helper for exponential backoff delays.
export class SafetyBackoffTimer
{
constructor({
/\x2f Reset the backoff after this much time elapses without requiring a backoff.
resetAfter=60,
/\x2f The maximum backoff delay time, in seconds.
maxBackoff=30,
/\x2f The exponent for backoff. Each successive backup waits for exponent^error count.
exponent=1.5,
}={})
{
this.resetAfterMs = resetAfter*1000;
this.maxBackoffTime = maxBackoff*1000;
this.exponent = exponent;
this.reset();
}
reset()
{
this.reset_at = Date.now() + this.resetAfterMs;
this.backoff_count = 0;
}
async wait()
{
/\x2f If enough time has passed without a backoff, reset.
if(Date.now() >= this.reset_at)
this.reset();
this.reset_at = Date.now() + this.resetAfterMs;
this.backoff_count++;
let delay_ms = Math.pow(this.exponent, this.backoff_count) * 1000;
delay_ms = Math.min(delay_ms, this.maxBackoffTime);
console.log("wait for", delay_ms);
await helpers.other.sleep(delay_ms);
}
};
/\x2f This is a wrapper to treat a classList as a set of flags that can be monitored.
/\x2f
/\x2f let flags = ClassFlags(element);
/\x2f flags.set("enabled", true); /\x2f class="enabled"
/\x2f flags.set("selected", true); /\x2f class="enabled selected"
/\x2f flags.set("enabled", false); /\x2f class="selected"
/\x2f
/\x2f
export class ClassFlags extends EventTarget
{
/\x2f This class can be used on anything, but it's normally used on for document-wide
/\x2f flags.
static get get()
{
if(this.singleton == null)
this.singleton = new ClassFlags(document.documentElement);
return this.singleton;
}
constructor(element)
{
super();
this.element = element;
/\x2f Use a MutationObserver, so we'll see changes whether they're made by us or something
/\x2f else.
let observer = new MutationObserver((mutations) => {
/\x2f If we have multiple mutation records, we only need to process the first one, comparing
/\x2f the first oldValue to the current value.
let mutation = mutations[0];
let old_classes = mutation.oldValue ?? "";
let old_set = new Set(old_classes.split(" "));
let new_set = this.element.classList;
for(let name of new_set)
if(!old_set.has(name))
this.broadcast(name, true);
for(let name of old_set)
if(!new_set.contains(name))
this.broadcast(name, false);
});
observer.observe(element, { attributeFilter: ["class"], attributeOldValue: true });
}
get(name) { return this.element.classList.contains(name); }
set(name, value)
{
/\x2f Update the class. The mutation observer will handle broadcasting the change.
helpers.html.setClass(this.element, name, value);
return true;
}
/\x2f Dispatch an event for a change to the given key.
broadcast(name, value)
{
let e = new Event(name);
e.value = value;
this.dispatchEvent(e);
}
};
/\x2f A simple wakeup event.
class WakeupEvent
{
constructor()
{
this._signal = new AbortController();
}
/\x2f Wait until a call to wake().
async wait()
{
await this._signal.signal.wait();
}
/\x2f Wake all current waiters.
wake()
{
this._signal.abort();
this._signal = new AbortController();
}
};
/\x2f This keeps track of open UI that the user is interacting with which should
/\x2f prevent us from auto-advancing images in the slideshow. This allows us to
/\x2f pause the slideshow or prevent it from advancing while the context menu or
/\x2f settings are open.
export class OpenWidgets extends EventTarget
{
static get singleton()
{
if(this._singleton == null)
this._singleton = new this;
return this._singleton;
}
constructor()
{
super();
this._openWidgets = new Set();
this.event = new WakeupEvent();
}
/\x2f If true, there are no open widgets or dialogs that should prevent the image from
/\x2f changing automatically.
get empty()
{
return this._openWidgets.size == 0;
}
/\x2f A shortcut to add or remove a widget.
set(widget, value)
{
if(value)
this.add(widget);
else
this.remove(widget);
}
/\x2f We're also an event target, so you can register to find out when dialogs are opened
/\x2f and closed.
_broadcastChanged()
{
this.dispatchEvent(new Event("changed"));
}
/\x2f Add an open widget to the list.
add(widget)
{
let wasEmpty = this.empty;
this._openWidgets.add(widget);
if(wasEmpty)
this._broadcastChanged();
}
/\x2f Remove an open UI from the list, possibly waking up callers to waitUntilEmpty.
async remove(widget)
{
if(!this._openWidgets.has(widget))
return;
this._openWidgets.delete(widget);
if(this.event.size > 0)
return;
/\x2f Another widget might be added immediately after this one is removed, so don't wake
/\x2f listeners immediately. Yield to the event loop, and check after anything else on
/\x2f the stack has finished.
await null;
/\x2f Let any listeners know that our empty status has changed. Do this before checking
/\x2f if we're empty, in case this causes somebody to open another dialog.
this._broadcastChanged();
if(this.event.size > 0)
return;
this.event.wake();
}
async waitUntilEmpty()
{
while(!this.empty)
await this.event.wait();
}
/\x2f Return all open widgets.
get_all()
{
return this._openWidgets;
}
}
/\x2f These are used all over the place, so we add them here to avoid having to import them
/\x2f everywhere. Eventually this module should just be a collection of these modules and
/\x2f everything else should be in submodules.
helpers.math = math;
helpers.strings = strings;
helpers.html = html;
helpers.other = other;
helpers.args = Args;
helpers.mediaId = mediaId;
helpers.pixiv = pixiv;
helpers.pixivRequest = pixivRequest;
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/helpers.js
`),
"/vview/misc/hide-mouse-cursor-on-idle.js": loadBlob("application/javascript",
`/\x2f A singleton that keeps track of whether the mouse has moved recently.
/\x2f
/\x2f Dispatch "mouseactive" on window when the mouse has moved recently and
/\x2f "mouseinactive" when it hasn't.
import { helpers } from '/vview/misc/helpers.js';
class TrackMouseMovement
{
constructor()
{
TrackMouseMovement._singleton = this;
this.forceHiddenUntil = null;
this.setMouseAnchorTimeout = -1;
this.lastMousePos = null;
window.addEventListener("mousemove", this.onmousemove, { capture: true });
}
static _singleton = null;
static get singleton() { return TrackMouseMovement._singleton; }
/\x2f True if the mouse is stationary. This corresponds to the mouseinactive event.
get stationary() { return !this._active; }
/\x2f Briefly pretend that the mouse is inactive.
/\x2f
/\x2f This is done when releasing a zoom to prevent spuriously showing the mouse cursor.
simulateInactivity()
{
this.forceHiddenUntil = Date.now() + 150;
this.idle();
}
onmousemove = (e) =>
{
let mousePos = [e.screenX, e.screenY];
this.lastMousePos = mousePos;
if(!this.anchorPos)
this.anchorPos = this.lastMousePos;
/\x2f Cleare the anchorPos timeout when the mouse moves.
this.clearMouseAnchorTimeout();
/\x2f If we're forcing the cursor inactive for a while, stop.
if(this.forceHiddenUntil && this.forceHiddenUntil > Date.now())
return;
/\x2f Show the cursor if the mouse has moved far enough from the current anchorPos.
let distanceMoved = helpers.math.distance({x: this.anchorPos[0], y: this.anchorPos[1]}, {x: mousePos[0], y: mousePos[1]});
if(distanceMoved > 10)
{
this.markMouseActive();
return;
}
/\x2f If we see mouse movement that isn't enough to cause us to display the cursor
/\x2f and we don't see more movement for a while, reset anchorPos so we discard
/\x2f the movement we saw.
this.setMouseAnchorTimeout = realSetTimeout(() => {
this.setMouseAnchorTimeout = -1;
this.anchorPos = this.lastMousePos;
}, 500);
}
/\x2f Remove the setMouseAnchorTimeout timeout, if any.
clearMouseAnchorTimeout()
{
if(this.setMouseAnchorTimeout == -1)
return;
realClearTimeout(this.setMouseAnchorTimeout);
this.setMouseAnchorTimeout = -1;
}
_removeTimer()
{
if(!this.timer)
return;
realClearTimeout(this.timer);
this.timer = null;
}
/\x2f The mouse has been active recently. Send mouseactive if the state is changing,
/\x2f and schedule the next time it'll become inactive.
markMouseActive()
{
/\x2f When showing the cursor, snap the mouse movement anchor to the last seen position
/\x2f and remove any anchorPos timeout.
this.anchorPos = this.lastMousePos;
this.clearMouseAnchorTimeout();
this._removeTimer();
this.timer = realSetTimeout(this.idle, 500);
if(!this._active)
{
this._active = true;
window.dispatchEvent(new Event("mouseactive"));
}
}
/\x2f The timer has expired (or was forced to expire).
idle = () =>
{
this._removeTimer();
if(this._active)
{
this._active = false;
window.dispatchEvent(new Event("mouseinactive"));
}
}
}
/\x2f Hide the mouse cursor when it hasn't moved briefly, to get it out of the way.
/\x2f This only hides the cursor over element.
export class HideMouseCursorOnIdle
{
static instances = new Set();
static simulateInactivity()
{
TrackMouseMovement.singleton.simulateInactivity();
}
constructor(element)
{
if(ppixiv.mobile)
return;
HideMouseCursorOnIdle.addStyle();
HideMouseCursorOnIdle.instances.add(this);
this.track = new TrackMouseMovement();
this.element = element;
window.addEventListener("mouseactive", () => this._refreshHideCursor());
window.addEventListener("mouseinactive", () => this._refreshHideCursor());
ppixiv.settings.addEventListener("no-hide-cursor", HideMouseCursorOnIdle.updateFromSettings);
HideMouseCursorOnIdle.updateFromSettings();
}
static disabled_by = new Set();
static addStyle()
{
if(HideMouseCursorOnIdle.globalStyle)
return;
/\x2f Create the style to hide the mouse cursor. This hides the mouse cursor on .hide-cursor,
/\x2f and forces everything underneath it to inherit it. This prevents things further down
/\x2f that set their own cursors from unhiding it.
/\x2f
/\x2f This also works around a Chrome bug: if the cursor is hidden, and we show the cursor while
/\x2f simultaneously animating an element to be visible over it, it doesn't recognize
/\x2f hovers over the element until the animation completes or the mouse moves. It
/\x2f seems to be incorrectly optimizing out hover checks when the mouse is hidden.
/\x2f Work around this by hiding the cursor with an empty image instead of cursor: none,
/\x2f so it doesn't know that the cursor isn't visible.
/\x2f
/\x2f This is set as a separate style, so we can disable it selectively. This allows us to
/\x2f globally disable mouse hiding. This used to be done by setting a class on body, but
/\x2f that's slower and can cause animation hitches.
let style = helpers.html.addStyle("hide-cursor", \`
.hide-cursor {
cursor: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkYAAAAAYAAjCB0C8AAAAASUVORK5CYII="), none !important;
}
.hide-cursor * { cursor: inherit !important; }
\`);
HideMouseCursorOnIdle.globalStyle = style;
}
static updateFromSettings()
{
/\x2f If no-hide-cursor is true, disable the style that hides the cursor. We track cursor
/\x2f hiding and set the local hide-cursor style even if cursor hiding is disabled, so
/\x2f other UI can use it, like video seek bars.
HideMouseCursorOnIdle.globalStyle.disabled = !this.isEnabled;
}
/\x2f Temporarily disable hiding all mouse cursors. source is a key for the UI that's doing
/\x2f this, so different UI can disable cursor hiding without conflicting.
static enableAll(source)
{
if(ppixiv.mobile)
return;
this.disabled_by.delete(source);
this.updateFromSettings();
for(let instance of HideMouseCursorOnIdle.instances)
instance._refreshHideCursor();
}
static disableAll(source)
{
if(ppixiv.mobile)
return;
this.disabled_by.add(source);
this.updateFromSettings();
for(let instance of HideMouseCursorOnIdle.instances)
instance._refreshHideCursor();
}
static get mouseStationary()
{
return this._mouseStationary;
}
static set mouseStationary(value)
{
this._mouseStationary = value;
}
static get isEnabled()
{
return !ppixiv.settings.get("no-hide-cursor") && this.disabled_by.size == 0;
}
_refreshHideCursor()
{
/\x2f cursor-stationary means the mouse isn't moving, whether or not we're hiding
/\x2f the cursor when it's stationary. hide-cursor is set to actually hide the cursor
/\x2f and UI elements that are hidden with the cursor.
let stationary = TrackMouseMovement.singleton.stationary;
let hidden = stationary && HideMouseCursorOnIdle.isEnabled;
helpers.html.setClass(this.element, "hide-cursor", hidden);
helpers.html.setClass(this.element, "show-cursor", !hidden);
helpers.html.setClass(this.element, "cursor-stationary", stationary);
helpers.html.setClass(this.element, "cursor-active", !stationary);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/hide-mouse-cursor-on-idle.js
`),
"/vview/misc/image-preloader.js": loadBlob("application/javascript",
`/\x2f Handle preloading images.
/\x2f
/\x2f If we have a reasonably fast connection and the site is keeping up, we can just preload
/\x2f blindly and let the browser figure out priorities. However, if we preload too aggressively
/\x2f for the connection and loads start to back up, it can cause image loading to become delayed.
/\x2f For example, if we preload 100 manga page images, and then back out of the page and want to
/\x2f view something else, the browser won't load anything else until those images that we no
/\x2f longer need finish loading.
/\x2f
/\x2f ImagePreloader is told the media ID that we're currently showing, and the ID that we want
/\x2f to speculatively load. We'll run loads in parallel, giving the current image's resources
/\x2f priority and cancelling loads when they're no longer needed.
import LocalAPI from '/vview/misc/local-api.js';
import { helpers } from '/vview/misc/helpers.js';
/\x2f The image ResourceLoader singleton.
export default class ImagePreloader
{
/\x2f Return the singleton, creating it if needed.
static get singleton()
{
if(ImagePreloader._singleton == null)
ImagePreloader._singleton = new ImagePreloader();
return ImagePreloader._singleton;
};
constructor()
{
/\x2f The _preloader objects that we're currently running.
this.preloads = [];
/\x2f A queue of URLs that we've finished preloading recently. We use this to tell if
/\x2f we don't need to run a preload.
this.recentlyPreloadedUrls = [];
}
/\x2f Set the media ID the user is currently viewing. If mediaId is null, the user isn't
/\x2f viewing an image (eg. currently viewing thumbnails).
async setCurrentImage(mediaId)
{
if(this.currentMediaId == mediaId)
return;
this.currentMediaId = mediaId;
this.currentMediaInfo = null;
await this.guessPreload(mediaId);
if(this.currentMediaId == null)
return;
/\x2f Get the image data. This will often already be available.
let illustInfo = await ppixiv.mediaCache.getMediaInfo(this.currentMediaId);
/\x2f Stop if the illust was changed while we were loading.
if(this.currentMediaId != mediaId)
return;
/\x2f Store the illustInfo for currentMediaId.
this.currentMediaInfo = illustInfo;
this.checkFetchQueue();
}
/\x2f Set the media ID we want to speculatively load, which is the next or previous image in
/\x2f the current search. If mediaId is null, we don't want to speculatively load anything.
async setSpeculativeImage(mediaId)
{
if(this._speculativeMediaId == mediaId)
return;
this._speculativeMediaId = mediaId;
this._speculativeMediaInfo = null;
if(this._speculativeMediaId == null)
return;
/\x2f Get the image data. This will often already be available.
let illustInfo = await ppixiv.mediaCache.getMediaInfo(this._speculativeMediaId);
if(this._speculativeMediaId != mediaId)
return;
/\x2f Stop if the illust was changed while we were loading.
if(this._speculativeMediaId != mediaId)
return;
/\x2f Store the illustInfo for speculativeMediaId.
this._speculativeMediaInfo = illustInfo;
this.checkFetchQueue();
}
/\x2f See if we need to start or stop preloads. We do this when we have new illustration info,
/\x2f and when a fetch finishes.
checkFetchQueue()
{
/\x2f console.log("check queue:", this.currentMediaInfo != null, this._speculativeMediaInfo != null);
/\x2f Make a list of fetches that we want to be running, in priority order.
let wantedPreloads = [];
if(this.currentMediaInfo != null)
wantedPreloads = wantedPreloads.concat(this._createPreloadersForIllust(this.currentMediaInfo, this.currentMediaId));
if(this._speculativeMediaInfo != null)
wantedPreloads = wantedPreloads.concat(this._createPreloadersForIllust(this._speculativeMediaInfo, this._speculativeMediaId));
/\x2f Remove all preloads from wantedPreloads that we've already finished recently.
let filteredPreloads = [];
for(let preload of wantedPreloads)
{
if(this.recentlyPreloadedUrls.indexOf(preload.url) == -1)
filteredPreloads.push(preload);
}
/\x2f If we don't want any preloads, stop. If we have any running preloads, let them continue.
if(filteredPreloads.length == 0)
{
/\x2f console.log("Nothing to do");
return;
}
/\x2f Discard preloads beyond the number we want to be running. If we're loading more than this,
/\x2f we'll start more as these finish.
let concurrentPreloads = 5;
filteredPreloads.splice(concurrentPreloads);
/\x2f console.log("Preloads:", filteredPreloads.length);
/\x2f If any preload in the list is running, stop. We only run one preload at a time, so just
/\x2f let it finish.
for(let preload of filteredPreloads)
{
let activePreload = this._findActivePreloadByUrl(preload.url);
if(activePreload != null)
return;
}
/\x2f No preloads are running, so start the highest-priority preload.
/\x2f
/\x2f updatedPreloadList allows us to run multiple preloads at a time, but we currently
/\x2f run them in serial.
let updatedPreloadList = [];
for(let preload of filteredPreloads)
{
/\x2f Start this preload.
/\x2f console.log("Start preload:", preload.url);
let promise = preload.start();
let aborted = false;
promise.catch((e) => {
if(e.name == "AbortError")
aborted = true;
});
promise.finally(() => {
/\x2f Add the URL to recentlyPreloadedUrls, so we don't try to preload this
/\x2f again for a while. We do this even on error, so we don't try to load
/\x2f failing images repeatedly.
/\x2f
/\x2f Don't do this if the request was aborted, since that just means the user
/\x2f navigated away.
if(!aborted)
{
this.recentlyPreloadedUrls.push(preload.url);
this.recentlyPreloadedUrls.splice(0, this.recentlyPreloadedUrls.length - 1000);
}
/\x2f When the preload finishes (successful or not), remove it from the list.
let idx = this.preloads.indexOf(preload);
if(idx == -1)
{
console.error("Preload finished, but we weren't running it:", preload.url);
return;
}
this.preloads.splice(idx, 1);
/\x2f See if we need to start another preload.
this.checkFetchQueue();
});
updatedPreloadList.push(preload);
break;
}
/\x2f Cancel preloads in this.preloads that aren't in updatedPreloadList. These are
/\x2f preloads that we either don't want anymore, or which have been pushed further down
/\x2f the priority queue and overridden.
for(let preload of this.preloads)
{
if(updatedPreloadList.indexOf(preload) != -1)
continue;
/\x2f console.log("Cancelling preload:", preload.url);
preload.cancel();
/\x2f Preloads stay in the list until the cancellation completes.
updatedPreloadList.push(preload);
}
this.preloads = updatedPreloadList;
}
/\x2f Return the ResourceLoader if we're currently preloading url.
_findActivePreloadByUrl(url)
{
for(let preload of this.preloads)
if(preload.url == url)
return preload;
return null;
}
/\x2f Return an array of preloaders to load resources for the given illustration.
_createPreloadersForIllust(mediaInfo, mediaId)
{
/\x2f Don't precache muted images.
if(ppixiv.muting.anyTagMuted(mediaInfo.tagList))
return [];
if(ppixiv.muting.isUserIdMuted(mediaInfo.userId))
return [];
/\x2f If this is an animation, preload the ZIP.
if(mediaInfo.illustType == 2 && !helpers.mediaId.isLocal(mediaId))
{
let results = [];
/\x2f Don't preload ZIPs in Firefox. It has a bug in Fetch: when in an incognito window,
/\x2f the actual streaming file read in IncrementalReader will stop returning data after a
/\x2f couple seconds if it overlaps with this non-streaming read. (It also has another bug:
/\x2f this non-streaming read will prevent the unrelated streaming read from streaming, so
/\x2f image loading will block until the file finishes loading instead of loading smoothly.)
let firefox = navigator.userAgent.indexOf("Firefox/") != -1;
if(!firefox)
results.push(new FetchResourceLoader(mediaInfo.ugoiraMetadata.originalSrc));
/\x2f Preload the original image too, which ViewerUgoira displays if the ZIP isn't
/\x2f ready yet.
results.push(new ImgResourceLoader(mediaInfo.mangaPages[0].urls.original));
return results;
}
/\x2f If this is a video, preload the poster.
if(mediaInfo.illustType == "video")
return [new ImgResourceLoader(mediaInfo.mangaPages[0].urls.poster) ];
/\x2f Otherwise, preload the images. Preload thumbs first, since they'll load
/\x2f much faster. Don't preload local thumbs, since they're generated on-demand
/\x2f by the local server and are just as expensive to load as the full image.
let results = [];
for(let url of mediaInfo.previewUrls)
{
if(!LocalAPI.shouldPreloadThumbs(mediaId, url))
continue;
results.push(new ImgResourceLoader(url));
}
/\x2f Preload the requested page.
let page = helpers.mediaId.parse(mediaId).page;
if(page < mediaInfo.mangaPages.length)
{
let { url } = mediaInfo.getMainImageUrl(page);
results.push(new ImgResourceLoader(url));
}
if(!ppixiv.mobile)
{
/\x2f Preload the remaining pages.
for(let p = 0; p < mediaInfo.mangaPages.length; ++p)
{
if(p == page)
continue;
/\x2f Stagger loading pages that aren't near the current page.
let staggered = p < page - 2 || p >= page + 2;
let { url } = mediaInfo.getMainImageUrl(p);
results.push(new ImgResourceLoader(url, { staggered }));
}
}
return results;
}
/\x2f Try to start a guessed preload.
/\x2f
/\x2f This uses guessImageUrl to try to figure out the image URL earlier. Normally
/\x2f we have to wait for the image info request to finish before we have the image URL
/\x2f to start loading, but if we can guess the URL correctly then we can start loading
/\x2f it immediately.
/\x2f
/\x2f If mediaId is null, stop any running guessed preload.
async guessPreload(mediaId)
{
if(ppixiv.mobile)
return;
/\x2f See if we can guess the image's URL from previous info, or if we can figure it
/\x2f out from another source.
let guessedUrl = null;
if(mediaId != null)
{
guessedUrl = await ppixiv.guessImageUrl.guessUrl(mediaId);
if(this.guessedPreload && this.guessedPreload.url == guessedUrl)
return;
}
/\x2f Cancel any previous guessed preload.
if(this.guessedPreload)
{
this.guessedPreload.cancel();
this.guessedPreload = null;
}
/\x2f Start the new guessed preload.
if(guessedUrl)
{
this.guessedPreload = new ImgResourceLoader(guessedUrl, {
onerror: () => {
/\x2f The image load failed. Let guessImageUrl know.
/\x2f console.info("Guessed image load failed");
ppixiv.guessImageUrl.guessedUrlIncorrect(mediaId);
},
});
this.guessedPreload.start();
}
}
}
/\x2f The time in milliseconds to delay loading low-priority images.
const StaggerDelay = 1500;
/\x2f A base class for fetching a single resource:
class ResourceLoader
{
static lastLoadFinishTime = null;
constructor({
staggered=false,
}={})
{
this.staggered = staggered;
this.abortController = new AbortController();
}
get aborted()
{
return this.abortController.signal.aborted;
}
async start()
{
await this._waitForStaggerDelay();
this._startedAt = Date.now();
}
/\x2f If this load is staggered, sleep until StaggerDelay after the previous load finished.
async _waitForStaggerDelay()
{
if(ResourceLoader.lastLoadFinishTime == null)
return;
/\x2f Always stagger preload if the page isn't visible.
let staggerLoad = this.staggered;
if(document.visibilityState == "hidden")
staggerLoad = true;
if(!staggerLoad)
return;
let timeSinceLastLoad = Date.now() - ResourceLoader.lastLoadFinishTime;
let ms = StaggerDelay - timeSinceLastLoad;
if(ms > 0)
{
/\x2f console.log("Delaying staggered load by", ms);
await helpers.other.sleep(ms);
}
}
/\x2f This is called by start() once the load finishes.
_loadFinished()
{
if(this.aborted)
return;
/\x2f Update lastLoadFinishTime.
/\x2f
/\x2f We don't want to set lastLoadFinishTime if this load came out of cache. It didn't
/\x2f actually cause a network load, so it shouldn't cause us to delay staggered loads.
/\x2f This way, if preloading restarts we won't go back to the beginning and stagger every
/\x2f page load even though nothing is actually happening.
/\x2f
/\x2f The browser won't tell us this. Just assume it came out of cache if it completed
/\x2f quickly, which is close enough for this. Don't set the threshold too low, since there
/\x2f can be delayed even with memory cache.
let loadTook = Date.now() - this._startedAt;
let wasCached = loadTook < 250;
if(!wasCached)
ResourceLoader.lastLoadFinishTime = Date.now();
}
/\x2f Cancel the fetch.
cancel()
{
this.abortController.abort();
}
}
/\x2f Load a single image with ![]()
:
class ImgResourceLoader extends ResourceLoader
{
constructor(url, {
onerror=null,
...args
}={})
{
super({...args});
this.url = url;
this.onerror = onerror;
console.assert(url);
}
/\x2f Start the fetch. This should only be called once.
async start()
{
if(this.url == null)
return;
await super.start();
if(this.aborted)
return;
let img = document.createElement("img");
img.src = this.url;
let result = await helpers.other.waitForImageLoad(img, this.abortController.signal);
if(result == "failed" && this.onerror)
this.onerror();
this._loadFinished();
}
}
/\x2f Load a resource with fetch.
class FetchResourceLoader extends ResourceLoader
{
constructor(url, args)
{
super(args);
this.url = url;
console.assert(url);
}
async start()
{
if(this.url == null)
return;
await super.start();
if(this.aborted)
return;
let request = helpers.pixivRequest.sendPixivRequest({
url: this.url,
method: "GET",
signal: this.abortController.signal,
});
/\x2f Wait for the body to download before completing. Ignore errors here (they'll
/\x2f usually be cancellations).
try {
request = await request;
await request.text();
} catch(e) { }
this._loadFinished();
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/image-preloader.js
`),
"/vview/misc/image-translation.js": loadBlob("application/javascript",
`/\x2f Image translation
/\x2f
/\x2f This needs GM.xmlHttpRequest to fetch Pixiv images and make API requests. It won't
/\x2f work in Safari, since it doesn't support @connect.
import { helpers } from '/vview/misc/helpers.js';
import { downloadPixivImage, sendRequest } from '/vview/util/gm-download.js';
import Widget from '/vview/widgets/widget.js';
import { MenuOptionOptionsSetting, MenuOptionToggleSetting, MenuOptionToggle, MenuOptionRow, MenuOptionButton } from '/vview/widgets/menu-option.js';
/\x2f The cotrans script seems to have no limit to the number of requests it'll start, but
/\x2f for sanity we set a request limit.
const MaxParallelTranslationRequests = 3;
/\x2f Map from our settings to API fields:
const AllSettings = {
/\x2f If true, translate using a lower resolution Pixiv image. This is usually good enough,
/\x2f and is much faster. Unfortunately there's no way to provide a low-res image for translation
/\x2f and to receive a high-res result, so this causes the text to also be lower resolution.
translation_low_res: "forceLowRes",
/\x2f S: 1024
/\x2f M: 1536
/\x2f L: 2048
/\x2f XL: 2560
translation_size: "size",
/\x2f gpt3.5, youdao, baidu, google, deepl, papago, offline
translation_translator: "translator",
/\x2f auto, h, v
translation_direction: "direction",
/\x2f CHS, CHT, JPN, ENG, KOR, VIN, CSY, NLD, FRA, DEU, HUN, ITA, PLK, PTB, ROM, RUS, UKR, ESP, TRK
translation_language: "target_language",
};
class TranslationError extends Error { };
export default class ImageTranslations extends EventTarget
{
constructor()
{
super();
this._displayedMediaId = null;
this._translateMediaIds = new Set();
/\x2f This contains URLs to inpaint images, null if translation succeeded but was blank, or
/\x2f exceptions for failed translations.
this._translations = new Map();
this._translationRequests = new Map();
this._settingsToId = new Map();
this._mediaIdSettingsOverrides = new Map();
/\x2f Start translations if needed when settings change.
for(let settingsKey of Object.keys(AllSettings))
{
ppixiv.settings.addEventListener(settingsKey, () => {
this._checkTranslationQueue();
this._callTranslationUrlsListeners();
});
}
}
/\x2f Return true if image translation is supported.
get supported()
{
return !ppixiv.native && !ppixiv.ios;
}
/\x2f Fire an event if translation URLs may have changed: we have a new translation, or settings
/\x2f have changed.
_callTranslationUrlsListeners()
{
this.dispatchEvent(new Event("translation-urls-changed"));
}
/\x2f Set the media ID that the viewer is currently displaying. We'll only actively
/\x2f request translations for pages on the post that's currently being viewed, and
/\x2f cancel pending translations if we navigate away from it.
setDisplayedMediaId(mediaId)
{
this._displayedMediaId = mediaId;
this._checkTranslationQueue();
}
/\x2f Enable or disable translations for the given media ID.
setTranslationsEnabled(mediaId, enabled)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
if(enabled)
this._translateMediaIds.add(mediaId);
else
this._translateMediaIds.delete(mediaId);
this._checkTranslationQueue();
/\x2f Fire callbacks if we turn translations on or off.
this._callTranslationUrlsListeners();
}
getTranslationsEnabled(mediaId)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
return this._translateMediaIds.has(mediaId);
}
_checkTranslationQueue()
{
this._refreshTranslationIndicator();
/\x2f Stop if we're running the maximum number of requests.
if(this._translationRequests.size >= MaxParallelTranslationRequests)
return;
/\x2f Stop if we're not displaying an image that we want translations for.
let mediaId = this._displayedMediaId;
let firstPageMediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
if(mediaId == null || !this._translateMediaIds.has(firstPageMediaId))
return;
/\x2f Get media info for the post we're viewing. If it isn't available yet, request it and
/\x2f come back when it's cached. We need full info so we have URLs for manga pages.
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: true });
if(mediaInfo == null)
{
ppixiv.mediaCache.getMediaInfo(mediaId, { full: true }).then(() => {
console.log("Check queue after fetching info");
this._checkTranslationQueue();
});
return;
}
/\x2f Make a list of pages for this image in the order we want to load them. Start on the page
/\x2f the user is currently on and load to the end, then load backwards to page 0. This tries to
/\x2f load images the user is more likely to be viewing soon first.
let [_, currentPage] = helpers.mediaId.toIllustIdAndPage(mediaId);
let pagesToLoad = [];
for(let page = currentPage; page < mediaInfo.pageCount; ++page)
pagesToLoad.push(page);
for(let page = currentPage-1; page >= 0; --page)
pagesToLoad.push(page);
for(let page of pagesToLoad)
{
/\x2f Stop once we've started the maximum number of requests. We'll come back and start
/\x2f more as they finish.
if(this._translationRequests.size >= MaxParallelTranslationRequests)
break;
/\x2f XXX: this is settings-specific
let pageMediaId = helpers.mediaId.getMediaIdForPage(mediaId, page);
/\x2f Skip this page if we already have it, or if a request is already queued.
if(this._translations.has(this._getIdForMediaId(pageMediaId)) || this._translationRequests.has(this._getIdForMediaId(pageMediaId)))
continue;
/\x2f Start this translation.
let promise = this._getMediaIdTranslation(pageMediaId, page);
this._translationRequests.set(this._getIdForMediaId(pageMediaId), promise);
/\x2f Remove the request from the list when the promise finishes.
promise.finally(() => {
this._translationRequests.delete(this._getIdForMediaId(pageMediaId), promise);
});
promise.then(async() => {
/\x2f Delay a little before starting more requests, as an extra safety in case
/\x2f something is wrong
await helpers.other.sleep(250);
/\x2f See if we need to start another request when each promise finishes. Only do
/\x2f this on success, so we don't get stuck in a loop if the promises are throwing.
this._checkTranslationQueue();
return false;
});
}
this._refreshTranslationIndicator();
}
/\x2f Set loadingTranslation if the loading indicator should be visible.
_refreshTranslationIndicator()
{
/\x2f Show the indicator if we want translations for the current image and don't have it yet.
let showLoadingIndicator = this._displayedMediaId != null &&
this.getTranslationsEnabled(this._displayedMediaId) &&
!this._translations.has(this._getIdForMediaId(this._displayedMediaId));
helpers.html.setDataSet(document.documentElement.dataset, "loadingTranslation", showLoadingIndicator);
}
async _getMediaIdTranslation(mediaId, page)
{
console.log(\`Requesting translation for \${mediaId}\`);
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: true });
console.assert(mediaInfo != null);
/\x2f Request the low-res version of the image.
let translationUrl;
try {
translationUrl = await this._translateImage(mediaInfo, page);
} catch(e) {
/\x2f Only log this as an error if it's something other than a TranslationError, so
/\x2f we don't spam stack traces for API errors.
let log = \`Error translating \${mediaInfo.mediaId}: \${e.message}\`;
if(e instanceof TranslationError)
console.log(log);
else
console.error(log);
/\x2f Store the exception as the result.
translationUrl = e;
}
/\x2f If this URL is returned, there's no translation for this image.
let blankImage = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVQI12NgYAAAAAMAASDVlMcAAAAASUVORK5CYII=";
if(translationUrl == blankImage)
translationUrl = null;
/\x2f Preload the translation image. Don't wait for this.
if(translationUrl != null && !(translationUrl instanceof Error))
helpers.other.preloadImages([translationUrl]);
/\x2f Store the translation URL.
this._translations.set(this._getIdForMediaId(mediaId), translationUrl);
/\x2f Trigger a refresh for this image now that we have its translation image.
this._callTranslationUrlsListeners();
}
/\x2f Return the translation overlay URL for the given media ID if we have one and translations
/\x2f for this image are enabled.
getTranslationUrl(mediaId)
{
/\x2f Don't return the translation URL if translations for this image aren't enabled, even
/\x2f if we know it.
let firstPageMediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
if(!this._translateMediaIds.has(firstPageMediaId))
return null;
let url = this._translations.get(this._getIdForMediaId(mediaId));
if(url instanceof Error)
return null;
else
return url;
}
/\x2f If an error occurred translating mediaId, return it as a string. Otherwise, return null.
getTranslationError(mediaId)
{
/\x2f Don't display any errors if translations for this image have been turned back off.
let firstPageMediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
if(!this._translateMediaIds.has(firstPageMediaId))
return null;
let url = this._translations.get(this._getIdForMediaId(mediaId));
if(url instanceof Error)
return url.message;
else
return null;
}
/\x2f If a translation failed with an error, clear the error so it can be retried.
retryTranslation(mediaId)
{
let id = this._getIdForMediaId(mediaId);
let url = this._translations.get(id);
if(url instanceof Error)
this._translations.delete(id);
this._checkTranslationQueue();
this._callTranslationUrlsListeners();
}
/\x2f Return current settings for mediaId.
_settingsForImage(mediaId)
{
let settings = {
/\x2f "ctd" is the only option for this, so we don't have a setting for it.
detector: "default",
};
/\x2f If we have overrides for this image, overlay them on top.
let overrides = this._mediaIdSettingsOverrides.get(mediaId) ?? {};
for(let [settingsKey, apiKey] of Object.entries(AllSettings))
settings[apiKey] = overrides[settingsKey] ?? ppixiv.settings.get(settingsKey);
return settings;
}
/\x2f Return a settings object for a single media ID. This can be used interchangably with
/\x2f ppixiv.settings to edit settings for one media ID.
getSettingHandlerForImage(mediaId)
{
return {
get: (settingName) => {
return this.getSettingForImage(mediaId, settingName);
},
set: (settingName, value) => {
this.setSettingForImage(mediaId, settingName, value);
this._callTranslationUrlsListeners();
},
/\x2f This isn't used.
addEventListener: () => null,
};
}
/\x2f Get and set settings overrides for a single media ID. Setting names are the same as
/\x2f the equivalent regular settings names. Setting an override to the current global setting
/\x2f removes the override. These aren't stored between sessions.
getSettingForImage(mediaId, settingName)
{
let defaultValue = ppixiv.settings.get(settingName);
let overrides = this._mediaIdSettingsOverrides.get(mediaId);
if(overrides == null)
return defaultValue;
return overrides[settingName] ?? defaultValue;
}
setSettingForImage(mediaId, settingName, value)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
let overrides = this._mediaIdSettingsOverrides.get(mediaId);
if(overrides == null)
{
overrides = {};
this._mediaIdSettingsOverrides.set(mediaId, overrides);
}
let defaultValue = ppixiv.settings.get(settingName);
if(value == defaultValue)
delete overrides[settingName];
else
overrides[settingName] = value;
this._checkTranslationQueue();
}
/\x2f Return a string identifying a specific set of settings.
_idForSettings(settings)
{
settings = JSON.stringify(settings);
let settingsId = this._settingsToId.get(settings);
if(settingsId != null)
return settingsId;
settingsId = this._settingsToId.size;
this._settingsToId.set(settings, settingsId);
return settingsId;
}
/\x2f Get the ID to use for storing the given media ID in _translatedUrls and _translationRequests.
/\x2f This ties them to the current set of settings, so we'll request new translation images if settings
/\x2f change, and not need to request them again if the settings change is reverted.
_getIdForMediaId(mediaId)
{
let settings = this._settingsForImage(mediaId);
let settingsId = this._idForSettings(settings);
return \`\${mediaId}|\${settingsId}\`;
}
/\x2f Request an image translation. Return the translation URL, or an Exception object on error.
async _translateImage(mediaInfo, page)
{
let pageMediaId = helpers.mediaId.getMediaIdForPage(mediaInfo.mediaId, page);
let settings = this._settingsForImage(mediaInfo.mediaId);
let { size, translator, direction, detector, target_language, forceLowRes } = settings;
let { url } = mediaInfo.getMainImageUrl(page, { forceLowRes });
url = helpers.pixiv.adjustImageUrlHostname(url);
/\x2f Download the image.
console.log(\`Downloading image for translation: \${url}\`);
let file = await downloadPixivImage(url);
console.log(\`Got image: \${url}\`);
/\x2f Run preprocessing. This isn't needed if we're using the low-res image,.
if(!forceLowRes)
file = await this._preprocessImage(file);
let translationApiUrl = ppixiv.settings.get("translation_api_url") + '/task/upload/v1';
let response;
try {
console.log(\`Sending image for translation: \${url}\`);
response = await sendRequest({
url: translationApiUrl,
method: "POST",
responseType: "text",
formData: {
size, translator, direction, detector, target_language,
retry: "false",
file,
},
});
} catch(e) {
throw new TranslationError(e);
}
response = JSON.parse(response);
/\x2f We expect to either get a request ID, an error, or a translation result.
let { id, error, translation_mask } = response;
if(error != null)
throw new TranslationError(\`Translation error for \${pageMediaId}: \${error}\`);
if(translation_mask != null)
{
console.log(\`Cached translation result for \${pageMediaId}: \${translation_mask}\`);
return translation_mask;
}
if(id == null)
{
/\x2f We didn't get anything, so we don't understand this response.
throw new TranslationError(\`Unexpected translation response for \${pageMediaId}:\`, response);
}
/\x2f Open the queue socket to wait for the result.
let websocket = new WebSocket(\`wss:/\x2fapi.cotrans.touhou.ai/task/\${id}/event/v1\`);
if(!await helpers.other.waitForWebSocketOpened(websocket))
throw new TranslationError("Couldn't connect to translation socket");
/\x2f Handle messages from the socket.
try {
while(1)
{
let data = await helpers.other.waitForWebSocketMessage(websocket);
if(data == null)
throw new TranslationError(\`Translation socket closed without a result: \${pageMediaId}\`);;
switch(data.type)
{
case "status":
/\x2f console.log(\`Translation status: \${data.status}\`);
continue;
case "pending":
/\x2f Our position in the queue changed.
continue;
case "result":
console.log(\`Translation result for \${pageMediaId}: \${data.result.translation_mask}\`);
return data.result.translation_mask;
case "error":
throw new TranslationError(\`Translation error for \${pageMediaId}: \$[data.error}\`);
case "not_found":
/\x2f The ID is unknown. This is either a bug or a server problem.
throw new TranslationError(\`Translation error for \${pageMediaId}: ID not found\`);
default:
/\x2f Ignore messages that we don't understand.
console.log(\`Unknown translation queue message for \${pageMediaId}}:\`, data);
continue;
}
}
} finally {
websocket.close();
}
}
async _preprocessImage(data)
{
/\x2f We don't propagate the MIME type or URL here. Figure out if this image is already a
/\x2f JPEG. We'll reencode other images (PNG and GIF) to JPEG regardless of image size.
let u8 = new Uint8Array(data);
let isJpeg = u8[0] == 0xFF && u8[1] == 0xD8 && u8[2] == 0xFF && u8[3] == 0xE0;
/\x2f Load the image to get its resolution.
let blob = new Blob([data]);
let blobUrl = URL.createObjectURL(blob);
try {
let img = document.createElement("img");
img.src = blobUrl;
let result = await helpers.other.waitForImageLoad(img);
if(result == "failed")
{
console.log(\`Image load failed\`);
return null;
}
/\x2f Reduce the image dimensions to the max size.
let width = img.naturalWidth;
let height = img.naturalHeight;
let maxSize = 2048;
let resizeBy = 1;
resizeBy = Math.min(resizeBy, maxSize / width);
resizeBy = Math.min(resizeBy, maxSize / height);
/\x2f If this image is already a JPEG and doesn't need to be downscaled, just use
/\x2f the original image data.
if(resizeBy == 1 && isJpeg)
return data;
/\x2f Draw the image into a canvas.
let canvas = document.createElement("canvas");
canvas.width = Math.round(width * resizeBy);
canvas.height = Math.round(height * resizeBy);
let context = canvas.getContext("2d");
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);
/\x2f Encode to a JPEG. They encode much more quickly than PNGs and there's no reason to spend
/\x2f time sending a big PNG.
return await helpers.other.canvasToBlob(canvas, { type: "image/jpeg", quality: 0.75 });
} finally {
URL.revokeObjectURL(blobUrl);
}
}
/\x2f Return a canvas with the given image and its translation composited, or null if we weren't
/\x2f able to load a translation.
async getTranslatedImage(mediaId)
{
/\x2f Translations must already be enabled for this post.
if(!this.getTranslationsEnabled(mediaId))
return null;
let [_, page] = helpers.mediaId.toIllustIdAndPage(mediaId);
let mediaInfo = await ppixiv.mediaCache.getMediaInfo(mediaId, { full: true });
/\x2f Even if translations are using the low-res image, download the full image for saving.
let { url } = mediaInfo.getMainImageUrl(page);
/\x2f Wait for the translation to complete if needed.
await this.waitForTranslation(mediaId);
/\x2f The translation URL will be null if there's no translated text on this page or if translation failed.
let translationUrl = this.getTranslationUrl(mediaId);
if(translationUrl == null)
return null;
/\x2f Composite the images together.
let canvas = document.createElement("canvas");
let context = canvas.getContext("2d");
let createdCanvas = false;
for(let imageUrl of [
url, translationUrl,
])
{
/\x2f Download the image. We need to use downloadPixivImage for both of these images, since
/\x2f neither supports CORS.
let arrayBuffer = await downloadPixivImage(imageUrl);
let blob = new Blob([arrayBuffer]);
let imageBlobUrl = URL.createObjectURL(blob);
let img = document.createElement("img");
img.src = imageBlobUrl;
try {
let imageLoadResult = await helpers.other.waitForImageLoad(img);
if(imageLoadResult == "failed")
{
console.log(\`Image load failed: \${imageUrl}\`);
return null;
}
} finally {
URL.revokeObjectURL(imageBlobUrl);
}
/\x2f Set up the canvas when we get the main image.
if(!createdCanvas)
{
createdCanvas = true;
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
}
context.drawImage(img, 0, 0, img.naturalWidth, img.naturalHeight, 0, 0, canvas.width, canvas.height);
}
return canvas;
}
/\x2f If translations are enabled for mediaId, wait for the translation result. If translations
/\x2f are turned off, return immediately.
waitForTranslation(mediaId, { signal }={})
{
return new Promise((resolve) => {
/\x2f Return true if we should resolve.
let isReady = () =>
{
if(!this.getTranslationsEnabled(mediaId))
{
console.error(\`Translations not enabled for \${mediaId}\`);
return true;
}
return this._translations.has(this._getIdForMediaId(mediaId));
}
/\x2f Just resolve now if the result is already ready.
if(isReady())
{
resolve();
return;
}
/\x2f mediamodified will be fired when we get a translation, and also if translations
/\x2f are disabled while we're waiting.
let cleanupAbort = new AbortController();
ppixiv.mediaCache.addEventListener("mediamodified", (e) => {
if(isReady())
{
cleanupAbort.abort();
resolve();
}
}, { signal: cleanupAbort.signal });
});
}
}
/\x2f A MenuOptionToggle to toggle translation for an image.
export class MenuOptionToggleImageTranslation extends MenuOptionToggle
{
constructor({ mediaId, ...options })
{
super({
label: "Translate this image",
onclick: (e) => this.value = !this.value,
...options
});
this.mediaId = mediaId;
}
refresh()
{
super.refresh();
this.checkbox.checked = this.value;
}
get value()
{
return ppixiv.imageTranslations.getTranslationsEnabled(this.mediaId);
}
set value(value)
{
ppixiv.imageTranslations.setTranslationsEnabled(this.mediaId, value);
this.refresh();
}
}
/\x2f Show translation errors and allow retrying.
export class MenuOptionRetryTranslation extends MenuOptionRow
{
constructor({ mediaId, ...options })
{
super({
label: "There was an error translating this image",
onclick: (e) => this.value = !this.value,
...options
});
new MenuOptionButton({
icon: "wallpaper",
label: "Retry",
container: this.root,
onclick: () => {
ppixiv.imageTranslations.retryTranslation(this.mediaId);
},
});
ppixiv.imageTranslations.addEventListener("translation-urls-changed", () => this.refresh(), this._signal);
this.mediaId = mediaId;
}
refresh()
{
super.refresh();
let error = ppixiv.imageTranslations.getTranslationError(this.mediaId);
this.visible = error;
}
}
function createTranslationSettingsWidget({ globalOptions, editOverrides })
{
/\x2f If we're editing overrides, use the settings handler for this image. Otherwise, just edit
/\x2f settings normally. We access the current media ID directly here (noromal settings pages
/\x2f don't need it, so it's not propagated here) and assume the current image won't change
/\x2f while a dialog is open.
let settings = ppixiv.settings;
let displayedMediaId = ppixiv.app.displayedMediaId;
if(editOverrides)
settings = editOverrides? ppixiv.imageTranslations.getSettingHandlerForImage(displayedMediaId):ppixiv.settings;
return {
/\x2f Translation settings
translateThisImage: () => {
/\x2f This is only used if we have a valid media ID.
return new MenuOptionToggleImageTranslation({
...globalOptions,
mediaId: displayedMediaId,
});
},
translationLanguage: () => {
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "translation_language",
settings,
label: "Language",
values: {
ENG: "English",
CHS: "Chinese (Simplified)",
CHT: "Chinese (Traditional)",
CSY: "Czech",
NLD: "Dutch",
FRA: "French",
DEU: "German",
HUN: "Hungarian",
ITA: "Italian",
JPN: "Japanese",
KOR: "Korean",
PLK: "Polish",
PTB: "Portuguese (Brazil)",
ROM: "Romanian",
RUS: "Russian",
ESP: "Spanish",
TRK: "Turkish",
UKR: "Ukrainian",
VIN: "Vietnames",
ARA: "Arabic",
SRP: "Serbian",
HRV: "Croatian",
},
});
},
translationTranslator: () => {
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "translation_translator",
settings,
label: "Translation engine",
values: {
"gpt3.5": "GPT3.5",
googleL: "Google",
youdao: "Youdao",
baidu: "Baidu",
deepl: "Deepl",
papago: "Papago",
offline: "Offline",
none: "None (remove text)",
},
});
},
translationLowRes: () => {
return new MenuOptionToggleSetting({
...globalOptions,
setting: "translation_low_res",
settings,
label: "Use low res image for translations (faster)",
});
},
translationSize: () => {
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "translation_size",
settings,
label: "Translation resolution",
values: {
S: "1024x1024",
M: "1536x1536",
L: "2048x2048",
XL: "2560x2560",
},
});
},
translationDirection: () => {
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "translation_direction",
settings,
label: "Text direction",
values: {
auto: "Automatic",
h: "Horizontal",
v: "Vertical",
},
});
},
retryTranslation: () => {
return new MenuOptionRetryTranslation({
...globalOptions,
mediaId: displayedMediaId,
});
},
}
}
/\x2f Create settings widgets. If editOverrides is true, edit settings overrides for the current image.
export function createTranslationSettingsWidgets({ globalOptions, editOverrides })
{
let settingsWidgets = createTranslationSettingsWidget({ globalOptions, editOverrides });
/\x2f If this is the override settings page, add the explanation header.
if(editOverrides)
{
new Widget({
...globalOptions,
template: \`
\`
});
/\x2f Create the search menu dropdown.
new DropdownMenuOpener({
button: this.root.querySelector(".main-search-menu-button"),
createDropdown: ({...options}) => {
let dropdown = this.bookmarkTagsDropdown = new Widget({
...options,
template: \`\`,
});
CreateSearchMenu(dropdown.root);
return dropdown;
},
});
this.root.querySelector(".refresh-search-from-page-button").addEventListener("click", () => this.parent.refreshSearchFromPage());
this.root.querySelector(".expand-manga-posts").addEventListener("click", (e) => {
this.parent.searchView.toggleExpandingMediaIdsByDefault();
});
this.root.querySelector(".refresh-search-button").addEventListener("click", () => this.parent.refreshSearch());
this.toggleLocalNavigationButton = this.root.querySelector(".toggle-local-navigation-button");
this.toggleLocalNavigationButton.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
this.parent._localNavigationVisible = !this.parent._localNavigationVisible;
this.parent.refreshUi();
});
this.root.querySelector(".preferences-button").addEventListener("click", (e) => new SettingsDialog());
/\x2f Refresh the "Refresh search from page" tooltip if the page in the URL changes. Use statechange
/\x2f rather than popstate for this, so it responds to all URL changes.
window.addEventListener("pp:statechange", (e) => this.refreshRefreshSearchFromPage(), { signal: this.shutdownSignal });
this.avatarWidget = new AvatarWidget({
container: this.querySelector(".avatar-container"),
/\x2f Disable the avatar widget unless the data source enables it.
visible: false,
});
this.imageForSuggestions = this.querySelector(".image-for-suggestions");
}
setDataSource(dataSource)
{
if(this.dataSource == dataSource)
return;
/\x2f Remove any previous data source's UI.
if(this.currentDataSourceUi)
{
this.currentDataSourceUi.shutdown();
this.currentDataSourceUi = null;
}
this.dataSource = dataSource;
this.avatarWidget.setUserId(null);
this.avatarWidget.visible = false;
this.imageForSuggestions.hidden = true;
if(dataSource == null)
return;
/\x2f Create the new data source's UI.
if(this.dataSource.ui)
{
let dataSourceUiContainer = this.root.querySelector(".data-source-ui");
this.currentDataSourceUi = new this.dataSource.ui({
dataSource: this.dataSource,
container: dataSourceUiContainer,
});
}
}
updateFromSettings = () =>
{
this.refreshExpandMangaPostsButton();
}
refreshUi()
{
this.root.querySelector(".refresh-search-from-page-button").hidden = true; /\x2f!this.dataSource?.supportsStartPage;
if(this.dataSource)
{
let { userId, imageUrl, imageLinkUrl } = this.dataSource.uiInfo;
this.imageForSuggestions.hidden = imageUrl == null;
this.imageForSuggestions.href = imageLinkUrl ?? "#";
let img = this.imageForSuggestions.querySelector(".image-for-suggestions > img");
img.src = imageUrl ?? helpers.other.blankImage;
this.avatarWidget.visible = userId != null;
this.avatarWidget.setUserId(userId);
}
let elementTitle = this.root.querySelector(".search-title");
elementTitle.hidden = this.dataSource?.getDisplayingText == null;
if(this.dataSource?.getDisplayingText != null)
{
let text = this.dataSource.getDisplayingText();
elementTitle.replaceChildren(text);
}
if(this.toggleLocalNavigationButton)
{
this.toggleLocalNavigationButton.hidden = this.parent._localNavigationTree == null || !this.parent.canShowLocalNavigation;
this.toggleLocalNavigationButton.querySelector(".font-icon").innerText = this.parent._localNavigationVisible?
"keyboard_double_arrow_left":"keyboard_double_arrow_right";
}
this.refreshSlideshowButton();
this.refreshExpandMangaPostsButton();
this.refreshRefreshSearchFromPage();
}
/\x2f Refresh the slideshow button.
refreshSlideshowButton()
{
let node = this.root.querySelector("A.slideshow");
node.href = ppixiv.app.slideshowURL.url;
}
/\x2f Refresh the highlight for the "expand all posts" button.
refreshExpandMangaPostsButton()
{
let enabled = this.parent.searchView.mediaIdsExpandedByDefault;
let button = this.root.querySelector(".expand-manga-posts");
button.dataset.popup = enabled? "Collapse manga posts":"Expand manga posts";
button.querySelector(".font-icon").innerText = enabled? "close_fullscreen":"open_in_full";
/\x2f Hide the button if the data source can never return manga posts to be expanded, or
/\x2f if it's the manga page itself which always expands.
button.hidden = !this.dataSource?.allowExpandingMangaPages;
}
refreshRefreshSearchFromPage()
{
if(this.dataSource == null)
return;
/\x2f Refresh the "refresh from page #" button popup. This is updated by searchView
/\x2f as the user scrolls.
let startPage = this.dataSource.getStartPage(helpers.args.location);
this.root.querySelector(".refresh-search-from-page-button").dataset.popup = \`Refresh search from page \${startPage}\`;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/screen-search/search-ui-desktop.js
`),
"/vview/screen-search/search-ui-mobile.js": loadBlob("application/javascript",
`import Widget from '/vview/widgets/widget.js';
import { AvatarWidget } from '/vview/widgets/user-widgets.js';
import { helpers } from '/vview/misc/helpers.js';
export default class SearchUIMobile extends Widget
{
constructor({...options}={})
{
super({
...options,
template: \`
\`
});
this.avatarWidget = new AvatarWidget({
container: this.querySelector(".avatar-container"),
/\x2f Disable the avatar widget unless the data source enables it.
visible: false,
});
}
setDataSource(dataSource)
{
if(this._currentDataSourceUi)
{
this._currentDataSourceUi.shutdown();
this._currentDataSourceUi = null;
}
this.dataSource = dataSource;
this.avatarWidget.setUserId(null);
this.avatarWidget.visible = false;
if(dataSource == null)
return;
/\x2f Create the new data source's UI.
if(this.dataSource?.ui)
{
this._currentDataSourceUi = new this.dataSource.ui({
dataSource: this.dataSource,
container: this.querySelector(".data-source-ui"),
});
}
}
refreshUi()
{
if(this.dataSource)
{
let { userId } = this.dataSource.uiInfo;
this.avatarWidget.visible = userId != null;
this.avatarWidget.setUserId(userId);
}
let elementTitle = this.querySelector(".search-title");
elementTitle.hidden = this.dataSource?.getDisplayingText == null;
if(this.dataSource?.getDisplayingText != null)
{
let text = this.dataSource?.getDisplayingText();
elementTitle.replaceChildren(text);
}
}
applyVisibility()
{
helpers.html.setClass(this.root, "shown", this._visible);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/screen-search/search-ui-mobile.js
`),
"/vview/screen-search/search-view.js": loadBlob("application/javascript",
`/\x2f The main thumbnail grid view.
import Widget from '/vview/widgets/widget.js';
import { MenuOptionsThumbnailSizeSlider } from '/vview/widgets/menu-option.js';
import { getUrlForMediaId } from '/vview/misc/media-ids.js'
import PointerListener from '/vview/actors/pointer-listener.js';
import StopAnimationAfter from '/vview/actors/stop-animation-after.js';
import LocalAPI from '/vview/misc/local-api.js';
import { helpers, GuardedRunner } from '/vview/misc/helpers.js';
/\x2f This is the logic for SearchView's grid display.
class ThumbnailGrid
{
constructor({container})
{
this.container = container;
this.rows = [];
this.sizingStyle = null;
}
clear()
{
for(let row of this.rows)
row.remove();
this.rows = [];
}
/\x2f Add a thumbnail to the first or last row, adding a new row if it's full.
addThumbToRow(node, {atEnd})
{
/\x2f Get the row to add to.
let row = this.getRow({atEnd});
row.insertAdjacentElement(atEnd? "beforeend":"afterbegin", node);
/\x2f Re-align the row with the new thumb.
this.alignRow(row);
/\x2f If the thumb fit on the row, stop here. The row can still have more thumbs added
/\x2f to it.
let resultWidth = (row.children.length-1) * this.sizingStyle.padding;
for(let thumb of row.children)
resultWidth += thumb.currentWidth;
resultWidth = Math.round(resultWidth);
if(resultWidth <= this.sizingStyle.containerWidth)
return row;
/\x2f If this is the only thumb in this row, it should always fit. If something goes wrong
/\x2f and it doesn't, leave it alone.
if(row.children.length == 1)
{
console.error("Single thumbnail didn't scale to fit:", row);
return;
}
/\x2f Adding another thumb to it caused it to overflow, so this row is full. Remove the
/\x2f thumb from the overfilled row, re-align the row and put the thumb on a new one.
node.remove();
this.alignRow(row);
let newRow = this.createRow({atEnd});
newRow.insertAdjacentElement(atEnd? "beforeend":"afterbegin", node);
return newRow;
}
/\x2f Return a row at the beginning or end, creating a row if needed.
getRow({atEnd=true}={})
{
/\x2f Get the first or last row.
let row = atEnd? this.rows[this.rows.length-1]:this.rows[0];
if(row)
return row;
else
return this.createRow({atEnd});
}
/\x2f Create a new row at the beginning or end.
createRow({atEnd=true}={})
{
/\x2f Create a new row.
let row = document.realCreateElement("div");
row.className = "row";
if(atEnd)
{
this.container.insertAdjacentElement("beforeend", row);
this.rows.push(row);
}
else
{
this.container.insertAdjacentElement("afterbegin", row);
this.rows.splice(0, 0, row);
}
return row;
}
getAverageHeightOfRow(row)
{
if(row.children.length == 0)
return 0;
/\x2f Get the average height of thumbs on this row. We'll expand thumbs vertically to this height.
let totalHeight = 0;
for(let thumb of row.children)
totalHeight += thumb.origHeight;
return totalHeight / row.children.length;
}
/\x2f Once a row is full and won't have items added to it, finalize it to optimize space usage.
alignRow(row)
{
for(let thumb of row.children)
{
thumb.currentWidth = thumb.origWidth;
thumb.currentHeight = thumb.origHeight;
}
/\x2f Only adjust the size when in aspect mode, not for square thumbs.
if(this.sizingStyle.thumbnailStyle != "aspect")
{
this.applySizes(row);
return;
}
/\x2f Scale each thumb to the average height of the row, so all thumbs on the row have
/\x2f the same height.
let averageHeight = this.getAverageHeightOfRow(row);
for(let thumb of row.children)
{
let ratio = averageHeight / thumb.currentHeight;
thumb.currentHeight *= ratio;
thumb.currentWidth *= ratio;
}
/\x2f Now try to scale the whole row to fit horizontally.
let rowWidth = 0;
for(let thumb of row.children)
rowWidth += thumb.currentWidth;
/\x2f Start with a scale that will exactly fit the view horizontally.
let containerWidth = this.sizingStyle.containerWidth - (row.children.length-1) * this.sizingStyle.padding;
let scaleX = containerWidth / rowWidth;
/\x2f Clamp the amount we'll scale by, so we don't scale incomplete rows up endlessly trying to
/\x2f fill the row.
let maxAllowedHeight = this.sizingStyle.thumbHeight * 2;
scaleX = Math.min(scaleX, maxAllowedHeight / averageHeight);
/\x2f If the row has more than one thumb, never scale down. Overflowing horizontally is what
/\x2f triggers wrapping onto a new row, and scaling down would make us try to fit
if(row.children.length > 1)
scaleX = Math.max(scaleX, 1);
let scaleY = scaleX;
for(let thumb of row.children)
{
thumb.currentWidth *= scaleX;
thumb.currentHeight *= scaleY;
}
this.applySizes(row);
}
applySizes(row)
{
/\x2f Tell the row its height for content-intrinsic-size. All thumbs on a row always have the
/\x2f same height.
let rowHeight = row.children[0]?.currentHeight ?? 128;
row.style.setProperty("--row-height", \`\${rowHeight}px\`);
for(let thumb of row.children)
{
thumb.style.setProperty("--thumb-width", \`\${thumb.currentWidth}px\`);
thumb.style.setProperty("--thumb-height", \`\${thumb.currentHeight}px\`);
}
}
}
export default class SearchView extends Widget
{
constructor({...options})
{
super({...options, template: \`
![]()
\`});
/\x2f The node that scrolls to show thumbs.
this.scrollContainer = this.root.closest(".scroll-container");
this.thumbnailBox = this.root.querySelector(".thumbnails");
this._setDataSourceRunner = new GuardedRunner(this._signal);
this._loadPageRunner = new GuardedRunner(this._signal);
this.grid = new ThumbnailGrid({
container: this.thumbnailBox
});
this.artistHeader = this.querySelector(".artist-header");
/\x2f A dictionary of thumbs in the view, in the same order. This makes iterating
/\x2f existing thumbs faster than iterating the nodes.
this.thumbs = {};
/\x2f A map of media IDs that the user has manually expanded or collapsed.
this.expandedMediaIds = new Map();
/\x2f This caches the results of isMediaIdExpanded.
this._mediaIdExpandedCache = null;
let resizeObserver = new ResizeObserver(() => this.refreshImages({cause: "resize"}));
resizeObserver.observe(this.scrollContainer);
resizeObserver.observe(this.thumbnailBox);
/\x2f The scroll position may not make sense when if scroller changes size (eg. the window was resized
/\x2f or we changed orientations). Override it and restore from the latest scroll position that we
/\x2f committed to history.
new ResizeObserver(() => {
let args = helpers.args.location;
if(args.state.scroll)
this.restoreScrollPosition(args.state.scroll?.scrollPosition);
}).observe(this.scrollContainer);
/\x2f When a bookmark is modified, refresh the heart icon.
ppixiv.mediaCache.addEventListener("mediamodified", (e) => this.refreshThumbnail(e.mediaId), this._signal);
/\x2f Call thumbImageLoadFinished when a thumbnail image finishes loading.
this.root.addEventListener("load", (e) => {
if(e.target.classList.contains("thumb"))
this.thumbImageLoadFinished(e.target.closest(".thumbnail-box"), { cause: "onload" });
}, { capture: true } );
this.scrollContainer.addEventListener("scroll", (e) => this.scheduleStoreScrollPosition(), { passive: true });
this.thumbnailBox.addEventListener("click", (e) => this.thumbnailClick(e));
/\x2f As an optimization, start loading image info on mousedown. We don't navigate until click,
/\x2f but this lets us start loading image info a bit earlier.
this.thumbnailBox.addEventListener("mousedown", async (e) => {
if(e.button != 0)
return;
let a = e.target.closest("a.thumbnail-link");
if(a == null)
return;
if(a.dataset.mediaId == null)
return;
/\x2f Only do this for illustrations.
let {type} = helpers.mediaId.parse(a.dataset.mediaId);
if(type != "illust")
return;
await ppixiv.mediaCache.getMediaInfo(a.dataset.mediaId);
}, { capture: true });
/\x2f Handle quick view.
new PointerListener({
element: this.thumbnailBox,
buttonMask: 0b1,
callback: (e) => {
if(!e.pressed)
return;
let a = e.target.closest("A");
if(a == null)
return;
if(!ppixiv.settings.get("quick_view"))
return;
/\x2f Activating on press would probably break navigation on touchpads, so only do
/\x2f this for mouse events.
if(e.pointerType != "mouse")
return;
let { mediaId } = ppixiv.app.getMediaIdAtElement(e.target);
if(mediaId == null)
return;
/\x2f Don't stopPropagation. We want the illustration view to see the press too.
e.preventDefault();
/\x2f e.stopImmediatePropagation();
ppixiv.app.showMediaId(mediaId, { addToHistory: true });
},
});
/\x2f Create IntersectionObservers for thumbs that are fully onscreen and nearly onscreen.
this.intersectionObservers = [];
this.intersectionObservers.push(new IntersectionObserver((entries) => {
for(let entry of entries)
helpers.html.setDataSet(entry.target.dataset, "nearby", entry.isIntersecting);
this.refreshImages({cause: "nearby-observer"});
/\x2f If the last thumbnail is now nearby, see if we need to load more search results.
this.loadDataSourcePage();
}, {
root: this.scrollContainer,
/\x2f This margin determines how far in advance we load the next page of results.
/\x2f
/\x2f On mobile, allow this to be larger so we're less likely to interrupt scrolling.
rootMargin: ppixiv.mobile? "400%":"150%",
}));
ppixiv.settings.addEventListener("thumbnail-size", () => this.updateFromSettings(), this._signal);
ppixiv.settings.addEventListener("disable_thumbnail_zooming", () => this.updateFromSettings(), this._signal);
ppixiv.settings.addEventListener("disable_thumbnail_panning", () => this.updateFromSettings(), this._signal);
ppixiv.settings.addEventListener("expand_manga_thumbnails", () => this.updateFromSettings(), this._signal);
ppixiv.settings.addEventListener("thumbnail_style", () => this.updateFromSettings(), this._signal);
ppixiv.settings.addEventListener("pixiv_cdn", () => this.updateFromSettings(), this._signal);
ppixiv.muting.addEventListener("mutes-changed", () => this.refreshAfterMuteChange(), this._signal);
this.updateFromSettings();
}
updateFromSettings()
{
this.refreshExpandedThumbAll();
this.loadExpandedMediaIds(); /\x2f in case expand_manga_thumbnails has changed
this.refreshImages({cause: "settings"});
let disableThumbnailZooming = ppixiv.settings.get("disable_thumbnail_zooming") || ppixiv.mobile;
if(ppixiv.settings.get("thumbnail_style") == "aspect")
disableThumbnailZooming = true;
helpers.html.setClass(document.body, "disable-thumbnail-zooming", disableThumbnailZooming);
}
/\x2f Return the thumbnail container for mediaId.
/\x2f
/\x2f If mediaId is a manga page and fallbackOnPage1 is true, return page 1 if the exact page
/\x2f doesn't exist.
getThumbnailForMediaId(mediaId, { fallbackOnPage1=false}={})
{
if(this.thumbs[mediaId] != null)
return this.thumbs[mediaId];
if(fallbackOnPage1)
{
/\x2f See if page 1 is available instead.
let page1MediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
if(page1MediaId != mediaId && this.thumbs[page1MediaId] != null)
return this.thumbs[page1MediaId];
}
return null;
}
/\x2f Return the first thumb that's fully onscreen.
getFirstFullyOnscreenThumb()
{
/\x2f Find the first row near the top-left of the screen. This is used to save and
/\x2f restore scroll, so if there's no row exactly overlapping the top-left, prefer
/\x2f one below it rather than above it. This doesn't use IntersectionObserver because
/\x2f it's async and sometimes doesn't update between resizes, causing the scroll position
/\x2f to be lost.
let screenTop = this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight/4;
let centerRow = null;
let bestDistance = 999999;
for(let row of this.grid.rows)
{
let rowTop = row.offsetTop;
let distance = Math.abs(rowTop - screenTop);
if(distance < Math.abs(bestDistance))
{
bestDistance = distance;
centerRow = row;
}
}
if(centerRow)
return centerRow.firstElementChild;
return null;
}
/\x2f Change the data source. If targetMediaId is specified, it's the media ID we'd like to
/\x2f scroll to if possible.
setDataSource(dataSource, { targetMediaId }={})
{
return this._setDataSourceRunner.call(this._setDataSource.bind(this), { dataSource, targetMediaId });
}
async _setDataSource({ dataSource, targetMediaId, signal }={})
{
/\x2f console.log("Showing search and scrolling to media ID:", targetMediaId);
if(dataSource != this.dataSource)
{
/\x2f Remove listeners from the old data source.
if(this.dataSource != null)
this.dataSource.removeEventListener("updated", this.dataSourceUpdated);
this._clearThumbs();
this._mediaIdExpandedCache = null;
this.dataSource = dataSource;
/\x2f Listen to the data source loading new pages, so we can refresh the list.
this.dataSource.addEventListener("updated", this.dataSourceUpdated);
/\x2f Set the header now if it's already known.
this.refreshHeader();
}
this.loadExpandedMediaIds();
/\x2f Load the initial page if we haven't yet.
await this.loadDataSourcePage({ cause: "initialization" });
signal.throwIfAborted();
/\x2f If we weren't given a media ID to scroll to, see if we have a scroll position to restore.
/\x2f If so, tell refreshImages that we want it to be included.
let args = helpers.args.location;
let scrollMediaId = args.state.scroll?.scrollPosition?.mediaId;
/\x2f Create the initial thumbnails.
this.refreshImages({
cause: "initial",
targetMediaId: targetMediaId ?? scrollMediaId,
});
/\x2f If a media ID to display was given, try to scroll to it. Otherwise try to restore the
/\x2f previous scroll position around scrollMediaId.
if(targetMediaId != null)
this.scrollToMediaId(targetMediaId);
else if(!this.restoreScrollPosition(args.state.scroll?.scrollPosition))
this.scrollContainer.scrollTop = 0;
}
loadDataSourcePage({cause="thumbnails"}={})
{
/\x2f Guard this against multiple concurrent calls.
if(this._loadPageRunner.isRunning)
return this._loadPageRunner.promise;
return this._loadPageRunner.call(this._loadDataSourcePageInner.bind(this), { cause });
}
/\x2f Start loading a data source page if needed.
async _loadDataSourcePageInner({cause="thumbnails", signal}={})
{
/\x2f We'll only load the next or previous page if we have a thumbnail displayed.
let loadPage = this._dataSourcePageToLoad;
if(loadPage == null)
return;
/\x2f Hide "no results" if it's shown while we load data.
let noResults = this.root.querySelector(".no-results");
noResults.hidden = true;
await this.dataSource.loadPage(loadPage, { cause });
/\x2f Refresh the view with any new data. Skip this if we're in the middle of setDataSource,
/\x2f since it wants to make the first refreshImages call.
if(!this._setDataSourceRunner.isRunning)
this.refreshImages({cause: "data-source-updated"});
signal.throwIfAborted();
/\x2f If we have no IDs and nothing is loading, the data source is empty (no results).
if(this.dataSource?.hasNoResults)
noResults.hidden = false;
/\x2f See if there's another page we want to load. This is async, since the current
/\x2f loadDataSourcePage call should complete as soon as we've loaded a single page.
(async() => {
/\x2f Delay briefly as a sanity check.
await helpers.other.sleep(100);
this.loadDataSourcePage();
})();
}
/\x2f Return the next data source page we want to load.
get _dataSourcePageToLoad()
{
/\x2f We load pages when the last thumbs on the previous page are loaded, but the first
/\x2f time through there's no previous page to reach the end of. Always make sure the
/\x2f first page is loaded (usually page 1).
if(this.dataSource && !this.dataSource.isPageLoadedOrLoading(this.dataSource.initialPage))
return this.dataSource.initialPage;
/\x2f After the first page, don't load anything if there are no thumbs. This avoids uncontrolled
/\x2f loading: if we start on page 1000 and there's nothing there, we don't want to try loading
/\x2f 999, 998, 997 endlessly looking for content. The only thing that triggers more loads is
/\x2f a previously loaded thumbnail coming nearby.
let thumbs = this.getLoadedThumbs();
if(thumbs.length == 0)
return null;
/\x2f Load the next page when the last nearby thumbnail (set by the "nearby" IntersectionObserver)
/\x2f is the last thumbnail in the list.
let lastThumb = thumbs[thumbs.length-1];
if(lastThumb.dataset.nearby)
{
let loadPage = parseInt(lastThumb.dataset.searchPage) + 1;
if(this.dataSource.canLoadPage(loadPage) && !this.dataSource.isPageLoadedOrLoading(loadPage))
return loadPage;
}
/\x2f Likewise, load the previous page when the first nearby thumbnail is the first thumbnail
/\x2f in the list.
let firstThumb = thumbs[0];
if(firstThumb.dataset.nearby)
{
let loadPage = parseInt(firstThumb.dataset.searchPage) - 1;
if(!this.dataSource.isPageLoadedOrLoading(loadPage))
return loadPage;
}
return null;
}
/\x2f Activate the view, waiting for the current data source to be displayed if needed.
async activate()
{
this._active = true;
/\x2f If nothing's focused, focus the search so keyboard navigation works. Don't do this if
/\x2f we already have focus, so we don't steal focus from things like the tag search dropdown
/\x2f and cause them to be closed.
let focus = document.querySelector(":focus");
if(focus == null)
this.scrollContainer.focus();
/\x2f Wait until the load started by the most recent call to setDataSource finishes.
await this._setDataSourceRunner.promise;
}
deactivate()
{
if(!this._active)
return;
this._active = false;
this.stopPulsingThumbnail();
}
/\x2f Schedule storing the scroll position, resetting the timer if it's already running.
scheduleStoreScrollPosition()
{
if(this.scrollPositionTimer != -1)
{
realClearTimeout(this.scrollPositionTimer);
this.scrollPositionTimer = -1;
}
this.scrollPositionTimer = realSetTimeout(() => {
this.storeScrollPosition();
}, 100);
}
/\x2f Save the current scroll position so it can be restored from history, and update the search
/\x2f page number.
storeScrollPosition()
{
/\x2f Don't do this if we're in the middle of setDataSource.
if(this._setDataSourceRunner.isRunning)
return;
let args = helpers.args.location;
if(this.dataSource?.supportsStartPage)
{
/\x2f If the data source supports a start page, update the page number in the URL.
let firstThumb = this.getFirstFullyOnscreenThumb();
if(firstThumb?.dataset?.searchPage != null)
this.dataSource.setStartPage(args, firstThumb.dataset.searchPage);
}
args.state.scroll = {
scrollPosition: this.saveScrollPosition(),
};
helpers.navigate(args, { addToHistory: false, cause: "viewing-page", sendPopstate: false });
}
/\x2f This is called when the data source has more results.
dataSourceUpdated = () =>
{
this.refreshHeader();
}
/\x2f Return all media IDs currently loaded in the data source, and the page
/\x2f each one is on.
getDataSourceMediaIds()
{
let allMediaIds = [];
let mediaIdPages = {};
if(this.dataSource == null)
return { allMediaIds, mediaIdPages };
let idList = this.dataSource.idList;
let minPage = idList.getLowestLoadedPage();
let maxPage = idList.getHighestLoadedPage();
for(let page = minPage; page <= maxPage; ++page)
{
let mediaIdsOnPage = idList.mediaIdsByPage.get(page);
console.assert(mediaIdsOnPage != null);
for(let mediaId of mediaIdsOnPage)
{
/\x2f Add expanded manga pages.
let mediaIdsOnPage = this._getExpandedPages(mediaId);
if(mediaIdsOnPage != null)
{
for(let pageMediaId of mediaIdsOnPage)
{
allMediaIds.push(pageMediaId);
mediaIdPages[pageMediaId] = page;
}
continue;
}
allMediaIds.push(mediaId);
mediaIdPages[mediaId] = page;
}
}
/\x2f Sanity check: there should never be any duplicate media IDs from the data source.
/\x2f Refuse to continue if there are duplicates, since it'll break our logic badly and
/\x2f can cause infinite loops. This is always a bug.
if(allMediaIds.length != (new Set(allMediaIds)).size)
throw Error("Duplicate media IDs");
return { allMediaIds, mediaIdPages };
}
/\x2f If mediaId is an expanded multi-page post, return the pages. Otherwise, return null.
_getExpandedPages(mediaId)
{
if(!this.isMediaIdExpanded(mediaId))
return null;
let info = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(info == null || info.pageCount <= 1)
return null;
let results = [];
let { type, id } = helpers.mediaId.parse(mediaId);
for(let mangaPage = 0; mangaPage < info.pageCount; ++mangaPage)
{
let pageMediaId = helpers.mediaId.encodeMediaId({type, id, page: mangaPage});
results.push(pageMediaId);
}
return results;
}
/\x2f Make a list of media IDs that we want loaded. This has a few inputs:
/\x2f
/\x2f - The thumbnails that are already loaded, if any.
/\x2f - A media ID that we want to have loaded. If we're coming back from viewing an image
/\x2f and it's in the search results, we always want that image loaded so we can scroll to
/\x2f it.
/\x2f - The thumbnails that are near the scroll position (nearby thumbs). These should always
/\x2f be loaded.
/\x2f
/\x2f Try to keep thumbnails that are already loaded in the list, since there's no performance
/\x2f benefit to unloading thumbs. Creating thumbs can be expensive if we're creating thousands of
/\x2f them, but once they're created, content-visibility keeps things fast.
/\x2f
/\x2f If targetMediaId is set and it's in the search results, always include it in the results,
/\x2f extending the list to include it. If targetMediaId is set and we also have thumbs already
/\x2f loaded, we'll extend the range to include both. If this would result in too many images
/\x2f being added at once, we'll remove previously loaded thumbs so targetMediaId takes priority.
/\x2f
/\x2f If we have no nearby thumbs and no ID to force load, it's an initial load, so we'll just
/\x2f start at the beginning.
/\x2f
/\x2f The result is always a contiguous subset of media IDs from the data source.
getMediaIdsToDisplay({
allMediaIds,
targetMediaId,
})
{
if(allMediaIds.length == 0)
return { startIdx: 0, endIdx: 0 };
let startIdx = 0, endIdx = 0;
/\x2f If we have a specific media ID to display and it's not already loaded, ignore what we
/\x2f have loaded and start around it instead.
let targetMediaIdIdx = allMediaIds.indexOf(targetMediaId);
if(targetMediaId && this.thumbs[targetMediaId] == null && targetMediaIdIdx != -1)
{
startIdx = targetMediaIdIdx;
endIdx = targetMediaIdIdx;
}
else
{
/\x2f Figure out the range of allMediaIds that we want to have loaded.
startIdx = 999999;
endIdx = 0;
/\x2f Start the range with thumbs that are already loaded, if any.
let [firstLoadedMediaId, lastLoadedMediaId] = this.getLoadedMediaIds();
let firstLoadedMediaIdIdx = allMediaIds.indexOf(firstLoadedMediaId);
let lastLoadedMediaIdIdx = allMediaIds.indexOf(lastLoadedMediaId);
if(firstLoadedMediaIdIdx != -1 && lastLoadedMediaIdIdx != -1)
{
startIdx = firstLoadedMediaIdIdx;
endIdx = lastLoadedMediaIdIdx;
}
else
{
/\x2f Otherwise, start at the beginning.
startIdx = 0;
endIdx = 0;
}
/\x2f If the last loaded image is nearby, we've scrolled near the end of what's loaded, so add
/\x2f another chunk of images to the list.
/\x2f
/\x2f The chunk size is the number of thumbs we'll create at a time.
/\x2f
/\x2f Note that this doesn't determine when we'll load another page of data from the server. The
/\x2f "nearby" IntersectionObserver threshold controls that. It does trigger media info loads
/\x2f if they weren't supplied by the data source (this happens with DataSsource_VView if we're
/\x2f using /api/ids).
let chunkSizeForwards = 25;
let [firstNearbyMediaId, lastNearbyMediaId] = this.getNearbyMediaIds();
let lastNearbyMediaIdIdx = allMediaIds.indexOf(lastNearbyMediaId);
if(lastNearbyMediaIdIdx != -1 && lastNearbyMediaIdIdx == lastLoadedMediaIdIdx)
endIdx += chunkSizeForwards;
/\x2f Similarly, if the first loaded image is nearby, we should load another chunk upwards.
/\x2f
/\x2f Use a larger chunk size when extending backwards on iOS. Adding to the start of the
/\x2f scroller breaks smooth scrolling (is there any way to fix that?), so use a larger chunk
/\x2f size so it at least happens less often.
let chunkSizeBackwards = ppixiv.ios? 100:25;
let firstNearbyMediaIdIdx = allMediaIds.indexOf(firstNearbyMediaId);
if(firstNearbyMediaIdIdx != -1 && firstNearbyMediaIdIdx == firstLoadedMediaIdIdx)
startIdx -= chunkSizeBackwards;
}
/\x2f Clamp the range.
startIdx = Math.max(startIdx, 0);
endIdx = Math.min(endIdx, allMediaIds.length-1);
endIdx = Math.max(startIdx, endIdx); /\x2f make sure startIdx <= endIdx
/\x2f Expand the list outwards so we have enough to fill the screen. This is an approximation:
/\x2f we don't know how big thumbs will be, but we know they shouldn't be much bigger than
/\x2f desiredPixels in area, and we know the area of the screen. If we have thumbs that will
/\x2f take more area than the screen, we know we have enough thumbs to fill it.
/\x2f
/\x2f We'll expand in both directions if possible, so if we have a targetMediaId and it's in
/\x2f the middle, it'll stay in the middle if possible. Expand to twice the screen area, since
/\x2f some of the thumbs we'll create will only be partially onscreen.
let { desiredPixels, containerWidth } = this.sizingStyle;
let viewPixels = containerWidth * this.scrollContainer.offsetHeight;
viewPixels *= 2;
while(1)
{
let totalThumbs = (endIdx - startIdx) + 1;
if(totalThumbs >= allMediaIds.length)
break;
let totalPixels = totalThumbs * desiredPixels;
if(totalPixels >= viewPixels)
break;
if(startIdx > 0)
startIdx--;
if(endIdx + 1 < allMediaIds.length)
endIdx++;
}
return { startIdx, endIdx };
}
/\x2f Return the first and last media IDs that are nearby (or all of them if all is true).
getNearbyMediaIds({all=false}={})
{
let mediaIds = [];
for(let [mediaId, element] of Object.entries(this.thumbs))
{
if(element.dataset.nearby)
mediaIds.push(mediaId);
}
if(all)
return mediaIds;
else
return [mediaIds[0], mediaIds[mediaIds.length-1]];
}
/\x2f Return the first and last media IDs that's currently loaded into thumbs.
getLoadedMediaIds()
{
let mediaIds = Object.keys(this.thumbs);
let firstLoadedMediaId = mediaIds[0];
let lastLoadedMediaId = mediaIds[mediaIds.length-1];
return [firstLoadedMediaId, lastLoadedMediaId];
}
refreshImages({
targetMediaId=null,
/\x2f If true, clear thumbs before refreshing, clearing out any accumulated offscreen thumbs.
purge=false,
/\x2f For diagnostics, this tells us what triggered this refresh.
cause
}={})
{
if(this.dataSource == null)
return;
/\x2f Update the thumbnail size style.
let oldSizingStyle = this.sizingStyle;
this.sizingStyle = this.makeThumbnailSizingStyle();
this.grid.sizingStyle = this.sizingStyle;
/\x2f Save the scroll position relative to the first thumbnail. Do this before making
/\x2f any changes.
let savedScroll = this.saveScrollPosition();
let {padding, containerWidth} = this.sizingStyle;
this.root.style.setProperty('--thumb-padding', \`\${padding}px\`);
this.root.style.setProperty('--container-width', \`\${containerWidth}px\`);
/\x2f These are overridden for each thumb, but the base size is used for the header.
this.root.style.setProperty("--thumb-width", \`\${this.sizingStyle.thumbWidth}px\`);
this.root.style.setProperty("--row-height", \`\${this.sizingStyle.thumbHeight}px\`);
/\x2f If purge is true or the sizing style changed, clear thumbs and start over.
if(oldSizingStyle && JSON.stringify(oldSizingStyle) != JSON.stringify(this.sizingStyle))
purge = true;
if(purge)
{
/\x2f If we don't have a targetMediaId, set it to the scroll media ID so we'll recreate
/\x2f thumbs near where we were.
targetMediaId ??= savedScroll?.mediaId;
/\x2f console.log(\`Resetting view due to sizing change, target: \${targetMediaId}\`);
this._clearThumbs();
}
/\x2f Get all media IDs from the data source.
let { allMediaIds, mediaIdPages } = this.getDataSourceMediaIds();
/\x2f If targetMediaId isn't in the list, this might be a manga page beyond the first that
/\x2f isn't displayed, so try the first page instead.
if(targetMediaId != null && allMediaIds.indexOf(targetMediaId) == -1)
targetMediaId = helpers.mediaId.getMediaIdFirstPage(targetMediaId);
/\x2f Get the range of media IDs to display.
let { startIdx, endIdx } = this.getMediaIdsToDisplay({
allMediaIds,
targetMediaId,
});
let mediaIds = allMediaIds.slice(startIdx, endIdx+1);
/\x2f If the new media ID list doesn't overlap the old list, clear out the list and start
/\x2f over.
let currentMediaIds = Object.keys(this.thumbs);
let firstExistingIdx = mediaIds.indexOf(currentMediaIds[0]);
let lastExistingIdx = mediaIds.indexOf(currentMediaIds[currentMediaIds.length-1]);
let incrementalUpdate = false;
if(firstExistingIdx != -1 && lastExistingIdx != -1)
{
let currentMediaIdsSubset = mediaIds.slice(firstExistingIdx, lastExistingIdx+1);
incrementalUpdate = helpers.other.arrayEqual(currentMediaIdsSubset, currentMediaIds);
}
/\x2f If this isn't an incremental update, clear the list.
if(!incrementalUpdate)
{
/\x2f This isn't an incremental update. It's a new search, or something has happened that
/\x2f added or removed thumbs in the middle of the list, like expanding manga pages.
this._clearThumbs();
/\x2f If we're targetting an image, set firstExistingIdx and lastExistingIdx so we'll add
/\x2f forwards starting at that image, then add the images before it backwards. This way
/\x2f that image will always be at the start of a row, which makes restoring the scroll
/\x2f position much more consistent. If we're not, just add all images forwards.
let restoreIdx = mediaIds.indexOf(targetMediaId);
if(restoreIdx != -1)
{
lastExistingIdx = restoreIdx-1;
firstExistingIdx = restoreIdx;
}
else
{
lastExistingIdx = -1;
firstExistingIdx = 0;
}
}
/\x2f Add thumbs to the end.
for(let idx = lastExistingIdx + 1; idx < mediaIds.length; ++idx)
{
let mediaId = mediaIds[idx];
let searchPage = mediaIdPages[mediaId];
let node = this.createThumb(mediaId, searchPage);
helpers.other.addToEnd(this.thumbs, mediaId, node);
this.grid.addThumbToRow(node, {atEnd: true});
}
/\x2f Add thumbs to the beginning.
for(let idx = firstExistingIdx - 1; idx >= 0; --idx)
{
let mediaId = mediaIds[idx];
let searchPage = mediaIdPages[mediaId];
let node = this.createThumb(mediaId, searchPage);
this.thumbs = helpers.other.addToBeginning(this.thumbs, mediaId, node);
this.grid.addThumbToRow(node, {atEnd: false});
}
this.restoreScrollPosition(savedScroll);
/\x2f this.sanityCheckThumbList();
}
/\x2f Clear the view.
_clearThumbs()
{
for(let node of Object.values(this.thumbs))
{
node.remove();
for(let observer of this.intersectionObservers)
observer.unobserve(node);
}
this.thumbs = {};
this.grid.clear();
}
/\x2f Create a thumbnail.
createThumb(mediaId, searchPage)
{
/\x2f makeSVGUnique is disabled here as a small optimization, since these SVGs don't need it.
let entry = this.createTemplate({ name: "template-thumbnail", makeSVGUnique: false, html: \`
![]()
1234
\`});
entry.dataset.id = mediaId;
if(searchPage != null)
entry.dataset.searchPage = searchPage;
for(let observer of this.intersectionObservers)
observer.observe(entry);
this.setupThumb(entry);
return entry;
}
/\x2f Return { thumbWidth, thumbHeight} for mediaId.
_thumbnailSize(mediaId)
{
/\x2f The sizing style gives us the base thumbnail size.
let { thumbWidth, thumbHeight, desiredPixels } = this.sizingStyle;
/\x2f Anything but illusts use the default width.
let { type } = helpers.mediaId.parse(mediaId);
if(type != "illust" && type != "file" && type != "folder")
return { thumbWidth, thumbHeight };
if(this.sizingStyle.thumbnailStyle == "square")
return { thumbWidth, thumbHeight };
/\x2f The manga view preloads thumbs so we can always get the aspect ratio from extraCache.
let aspectRatio = null;
if(this.dataSource?.name == "manga")
{
aspectRatio = ppixiv.extraCache.getMediaAspectRatioSync(mediaId);
if(aspectRatio == null)
{
console.warn(\`Manga view didn't cache the aspect ratio for \${mediaId}\`);
aspectRatio = 1;
}
}
else
{
/\x2f Get the aspect ratio from media info. If this is a manga page this won't be known,
/\x2f and getImageDimensions will use the first page's dimensions.
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(mediaInfo == null)
throw new Error(\`Missing media info data for \${mediaId}\`);
let { width, height } = ppixiv.mediaCache.getImageDimensions(mediaInfo, mediaId);
if(width == null)
return { thumbWidth, thumbHeight };
aspectRatio = width / height;
}
/\x2f Set the thumbnail size to have an area of desiredPixels with the aspect ratio we've chosen.
/\x2f This gives thumbnails a similar amount of screen space whether they're portrait or landscape,
/\x2f and keeps the overall number of thumbs on screen at once mostly predictable. Put a limit on
/\x2f how narrow are, so extremely wide strip images don't take over the row.
aspectRatio = helpers.math.clamp(aspectRatio, 1/3, 3);
thumbWidth = Math.sqrt(desiredPixels * aspectRatio);
thumbHeight = thumbWidth / aspectRatio;
thumbWidth = Math.round(thumbWidth);
thumbHeight = Math.round(thumbHeight);
return { thumbWidth, thumbHeight };
}
_setThumbnailSize(mediaId, element)
{
let { thumbWidth, thumbHeight } = this._thumbnailSize(mediaId);
/\x2f Store the preferred thumbnail size.
element.origWidth = thumbWidth;
element.origHeight = thumbHeight;
}
/\x2f If element isn't loaded and we have media info for it, set it up.
setupThumb(element)
{
let mediaId = element.dataset.id;
if(mediaId == null)
return;
let { id: thumbId, type: thumbType } = helpers.mediaId.parse(mediaId);
/\x2f On hover, use StopAnimationAfter to stop the animation after a while.
this.addAnimationListener(element);
this._setThumbnailSize(mediaId, element);
if(thumbType == "user" || thumbType == "bookmarks")
{
/\x2f This is a user thumbnail rather than an illustration thumbnail. It just shows a small subset
/\x2f of info.
let userId = thumbId;
let link = element.querySelector("a.thumbnail-link");
if(thumbType == "user")
link.href = \`/users/\${userId}/artworks#ppixiv\`;
else
link.href = \`/users/\${userId}/bookmarks/artworks#ppixiv\`;
link.dataset.userId = userId;
let quickUserData = ppixiv.extraCache.getQuickUserData(userId);
if(quickUserData == null)
{
/\x2f We should always have this data for users if the data source asked us to display this user.
throw new Error(\`Missing quick user data for user ID \${userId}\`);
}
let thumb = element.querySelector(".thumb");
thumb.src = quickUserData.profileImageUrl;
let label = element.querySelector(".thumbnail-label");
label.hidden = false;
label.querySelector(".label").innerText = quickUserData.userName;
return;
}
if(thumbType != "illust" && thumbType != "file" && thumbType != "folder")
throw "Unexpected thumb type: " + thumbType;
/\x2f Get media info. This should always be registered by the data source.
let info = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(info == null)
throw new Error(\`Missing media info data for \${mediaId}\`);
/\x2f Set this thumb.
let { page } = helpers.mediaId.parse(mediaId);
let url = info.previewUrls[page];
let thumb = element.querySelector(".thumb");
let [illustId, illustPage] = helpers.mediaId.toIllustIdAndPage(mediaId);
/\x2f Check if this illustration is muted (blocked).
let mutedTag = ppixiv.muting.anyTagMuted(info.tagList);
let mutedUser = ppixiv.muting.isUserIdMuted(info.userId);
if(mutedTag || mutedUser)
{
/\x2f The image will be obscured, but we still shouldn't load the image the user blocked (which
/\x2f is something Pixiv does wrong). Load the user profile image instead.
thumb.src = ppixiv.mediaCache.getProfilePictureUrl(info.userId);
element.classList.add("muted");
let mutedLabel = element.querySelector(".muted-label");
/\x2f Quick hack to look up translations, since we're not async:
(async() => {
if(mutedTag)
mutedTag = await ppixiv.tagTranslations.getTranslation(mutedTag);
mutedLabel.textContent = mutedTag? mutedTag:info.userName;
})();
/\x2f We can use this if we want a "show anyway' UI.
thumb.dataset.mutedUrl = url;
}
else
{
thumb.src = url;
element.classList.remove("muted");
LocalAPI.thumbnailWasLoaded(url);
/\x2f Let ExtraCache know about this image, so we'll learn the image's aspect ratio.
ppixiv.extraCache.registerLoadingThumbnail(mediaId, thumb);
/\x2f Try to set up the aspect ratio.
this.thumbImageLoadFinished(element, { cause: "setup" });
}
/\x2f Set the link. Setting dataset.mediaId will allow this to be handled with in-page
/\x2f navigation, and the href will allow middle click, etc. to work normally.
let link = element.querySelector("a.thumbnail-link");
if(thumbType == "folder")
{
/\x2f This is a local directory. We only expect to see this while on the local
/\x2f data source. Clear any search when navigating to a subdirectory.
let args = new helpers.args("/");
LocalAPI.getArgsForId(mediaId, args);
link.href = args.url;
}
else
{
link.href = getUrlForMediaId(mediaId).url;
}
link.dataset.mediaId = mediaId;
link.dataset.userId = info.userId;
element.querySelector(".ugoira-icon").hidden = info.illustType != 2 && info.illustType != "video";
helpers.html.setClass(element, "dot", helpers.pixiv.tagsContainDot(info.tagList));
/\x2f Set expanded-thumb if this is an expanded manga post. This is also updated in
/\x2f setMediaIdExpanded. Set the border to a random-ish value to try to make it
/\x2f easier to see the boundaries between manga posts. It's hard to guarantee that it
/\x2f won't be the same color as a neighboring post, but that's rare. Using the illust
/\x2f ID means the color will always be the same. The saturation is a bit low so these
/\x2f colors aren't blinding.
this.refreshExpandedThumb(element);
helpers.html.setClass(link, "first-page", illustPage == 0);
helpers.html.setClass(link, "last-page", illustPage == info.pageCount-1);
link.style.borderBottomColor = \`hsl(\${illustId}deg 50% 50%)\`;
this.refreshBookmarkIcon(element);
/\x2f Set the label. This is only actually shown in following views.
let label = element.querySelector(".thumbnail-label");
if(thumbType == "folder")
{
/\x2f The ID is based on the filename. Use it to show the directory name in the thumbnail.
let parts = mediaId.split("/");
let basename = parts[parts.length-1];
let label = element.querySelector(".thumbnail-label");
label.hidden = false;
label.querySelector(".label").innerText = basename;
} else {
label.hidden = true;
}
}
/\x2f Based on the dimensions of the container and a desired pixel size of thumbnails,
/\x2f figure out how many columns to display to bring us as close as possible to the
/\x2f desired size. Return the corresponding CSS style attributes.
/\x2f
/\x2f container is the containing block (eg. ul.thumbnails).
makeThumbnailSizingStyle()
{
/\x2f The thumbnail mode is included here so changes to it trigger a refresh.
let thumbnailStyle = ppixiv.settings.get("thumbnail_style");
let desiredSize = ppixiv.settings.get("thumbnail-size", 4);
desiredSize = MenuOptionsThumbnailSizeSlider.thumbnailSizeForValue(desiredSize);
/\x2f Pack images more tightly on mobile.
let padding = ppixiv.mobile? 3:15;
/\x2f The container might have a fractional size, and clientWidth will round it, which is
/\x2f wrong for us: if the container is 500.75 wide and we calculate a fit for 501, the result
/\x2f won't actually fit. Get the bounding box instead, which isn't rounded.
/\x2f let containerWidth = container.parentNode.clientWidth;
let containerWidth = Math.floor(this.root.getBoundingClientRect().width);
let containerHeight = Math.floor(this.scrollContainer.getBoundingClientRect().height);
let columns = containerWidth / desiredSize;
columns = Math.floor(columns);
columns = Math.max(columns, 1);
let remainingWidth = containerWidth - padding*(columns-1);
let thumbWidth = Math.floor(remainingWidth / columns);
let thumbHeight = Math.floor(thumbWidth);
containerWidth = Math.floor(thumbWidth * columns + padding*(columns-1));
/\x2f Limit the number of visible thumbs, so we don't load too much data at once. Allow
/\x2f unlimited columns for local images.
let maxThumbs = this.dataSource?.isVView? 500:40;
let rows = window.innerHeight / thumbWidth;
if(columns * rows > maxThumbs)
{
columns = maxThumbs / rows;
containerWidth = Math.floor(thumbWidth*columns + padding*(columns-1));
}
let desiredPixels = thumbWidth * thumbHeight;
return {
thumbnailStyle, padding, thumbWidth, thumbHeight,
containerWidth, containerHeight,
desiredPixels,
/\x2f This list just forces a refresh if any values inside it change.
deps: [
ppixiv.settings.get("pixiv_cdn"),
],
};
}
/\x2f Verify that thumbs we've created are in sync with this.thumbs.
sanityCheckThumbList()
{
let actual = [];
for(let thumb of this.thumbnailBox.children)
actual.push(thumb.dataset.id);
let expected = Object.keys(this.thumbs);
if(JSON.stringify(actual) != JSON.stringify(expected))
{
console.log("actual ", actual);
console.log("expected", expected);
}
}
thumbnailClick(e)
{
/\x2f See if this is a click on the manga page toggle.
let pageCountBox = e.target.closest(".manga-info-box");
if(pageCountBox)
{
e.preventDefault();
e.stopPropagation();
let idNode = pageCountBox.closest("[data-id]");
let mediaId = idNode.dataset.id;
this.setMediaIdExpanded(mediaId, !this.isMediaIdExpanded(mediaId));
}
}
/\x2f Save the current scroll position relative to the first visible thumbnail.
/\x2f The result can be used with restoreScrollPosition.
saveScrollPosition()
{
let firstVisibleThumbNode = this.getFirstFullyOnscreenThumb();
if(firstVisibleThumbNode == null)
return null;
/\x2f Save relative to the row instead of the thumb, since the thumb's offsetParent is the
/\x2f row and its offsetTop is 0.
let row = firstVisibleThumbNode.parentNode;
return {
savedScroll: helpers.html.saveScrollPosition(this.scrollContainer, row),
mediaId: firstVisibleThumbNode.dataset.id,
}
}
/\x2f Restore the scroll position from a position saved by saveScrollPosition.
restoreScrollPosition(scroll)
{
if(scroll == null)
return false;
/\x2f Find the thumbnail for the mediaId the scroll position was saved at.
let restoreScrollPositionNode = this.getThumbnailForMediaId(scroll.mediaId);
if(restoreScrollPositionNode == null)
return false;
let row = restoreScrollPositionNode.parentNode;
helpers.html.restoreScrollPosition(this.scrollContainer, row, scroll.savedScroll);
return true;
}
/\x2f Set whether the given thumb is expanded.
/\x2f
/\x2f We can store a thumb being explicitly expanded or explicitly collapsed, overriding the
/\x2f current default.
setMediaIdExpanded(mediaId, newValue)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
this.expandedMediaIds.set(mediaId, newValue);
/\x2f Clear this ID's isMediaIdExpanded cache, if any.
if(this._mediaIdExpandedCache)
this._mediaIdExpandedCache.delete(mediaId);
this.saveExpandedMediaIds();
/\x2f This will cause thumbnails to be added or removed, so refresh. Allow this to purge the
/\x2f thumbnail list. This will trigger a full refresh since we're changing thumbs in the
/\x2f middle, which can be slow if it recreates a huge accumulated thumbnail list.
this.refreshImages({cause: "manga-expansion-change", purge: true});
if(!newValue)
{
/\x2f After collapsing a manga post, scroll the first page onscreen.
this.scrollToMediaId(helpers.mediaId.getMediaIdFirstPage(mediaId));
}
}
/\x2f Set whether thumbs are expanded or collapsed by default.
toggleExpandingMediaIdsByDefault()
{
/\x2f If the new setting is the same as the expand_manga_thumbnails setting, just
/\x2f remove expand-thumbs. Otherwise, set it to the overridden setting.
let args = helpers.args.location;
let newValue = !this.mediaIdsExpandedByDefault;
if(newValue == ppixiv.settings.get("expand_manga_thumbnails"))
args.hash.delete("expand-thumbs");
else
args.hash.set("expand-thumbs", newValue? "1":"0");
/\x2f Clear manually expanded/unexpanded thumbs, and navigate to the new setting.
delete args.state.expandedMediaIds;
helpers.navigate(args);
}
loadExpandedMediaIds()
{
/\x2f Load expandedMediaIds.
let args = helpers.args.location;
let mediaIds = args.state.expandedMediaIds ?? {};
this.expandedMediaIds = new Map(Object.entries(mediaIds));
/\x2f Load mediaIdsExpandedByDefault.
let expandThumbs = args.hash.get("expand-thumbs");
if(expandThumbs == null)
this.mediaIdsExpandedByDefault = ppixiv.settings.get("expand_manga_thumbnails");
else
this.mediaIdsExpandedByDefault = expandThumbs == "1";
}
/\x2f Store this.expandedMediaIds to history.
saveExpandedMediaIds()
{
let args = helpers.args.location;
args.state.expandedMediaIds = Object.fromEntries(this.expandedMediaIds);
helpers.navigate(args, { addToHistory: false, cause: "viewing-page", sendPopstate: false });
}
/\x2f If mediaId is a manga post, return true if it should be expanded to show its pages.
isMediaIdExpanded(mediaId)
{
/\x2f This is called a lot and becomes a bottleneck on large searches, so cache results.
this._mediaIdExpandedCache ??= new Map();
if(!this._mediaIdExpandedCache.has(mediaId))
this._mediaIdExpandedCache.set(mediaId, this._isMediaIdExpanded(mediaId));
return this._mediaIdExpandedCache.get(mediaId);
}
_isMediaIdExpanded(mediaId)
{
/\x2f Never expand manga posts on data sources that include manga pages themselves.
/\x2f This can result in duplicate media IDs.
if(!this.dataSource?.allowExpandingMangaPages)
return false;
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
/\x2f Only illust IDs can be expanded.
let { type } = helpers.mediaId.parse(mediaId);
if(type != "illust")
return false;
/\x2f Check if the user has manually expanded or collapsed the image.
if(this.expandedMediaIds.has(mediaId))
return this.expandedMediaIds.get(mediaId);
/\x2f The media ID hasn't been manually expanded or unexpanded. If we're not expanding
/\x2f by default, it's unexpanded.
if(!this.mediaIdsExpandedByDefault)
return false;
/\x2f If the image is muted, never expand it by default, even if we're set to expand by default.
/\x2f We'll just show a wall of muted thumbs.
let info = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(info != null)
{
let mutedTag = ppixiv.muting.anyTagMuted(info.tagList);
let mutedUser = ppixiv.muting.isUserIdMuted(info.userId);
if(mutedTag || mutedUser)
return false;
}
/\x2f Otherwise, it's expanded by default if it has more than one page. Note that if we don't
/\x2f have media info yet, mediaInfoLoaded will refresh again once it becomes available.
if(info == null || info.pageCount == 1)
return false;
return true;
}
/\x2f Refresh the expanded-thumb class on thumbnails after expanding or unexpanding a manga post.
refreshExpandedThumb(thumb)
{
if(thumb == null)
return;
/\x2f Don't set expanded-thumb on the manga view, since it's always expanded.
let mediaId = thumb.dataset.id;
let showExpanded = this.dataSource?.allowExpandingMangaPages && this.isMediaIdExpanded(mediaId);
helpers.html.setClass(thumb, "expanded-thumb", showExpanded);
let info = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
let [illustId, illustPage] = helpers.mediaId.toIllustIdAndPage(mediaId);
helpers.html.setClass(thumb, "expanded-manga-post", showExpanded);
helpers.html.setClass(thumb, "first-manga-page", info && info.pageCount > 1 && illustPage == 0);
/\x2f Show the page count if this is a multi-page post (unless we're on the
/\x2f manga view itself).
let showMangaPage = info && info.pageCount > 1 && this.dataSource?.name != "manga";
let pageCountBox = thumb.querySelector(".manga-info-box");
pageCountBox.hidden = !showMangaPage;
if(showMangaPage)
{
let text = showExpanded? \`\${illustPage+1}/\${info.pageCount}\`:info.pageCount;
pageCountBox.querySelector(".page-count").textContent = text;
pageCountBox.querySelector(".page-count").hidden = false;
helpers.html.setClass(pageCountBox, "show-expanded", showExpanded);
}
}
/\x2f Refresh all expanded thumbs. This is only needed if the default changes.
refreshExpandedThumbAll()
{
for(let thumb of this.getLoadedThumbs())
this.refreshExpandedThumb(thumb);
}
/\x2f Set things up based on the image dimensions. We can do this immediately if we know the
/\x2f thumbnail dimensions already, otherwise we'll do it based on the thumbnail once it loads.
thumbImageLoadFinished(element, { cause })
{
if(element.dataset.thumbLoaded)
return;
let mediaId = element.dataset.id;
let [illustId, illustPage] = helpers.mediaId.toIllustIdAndPage(mediaId);
let thumb = element.querySelector(".thumb");
/\x2f Try to use thumbnail info first. Preferring this makes things more consistent,
/\x2f since naturalWidth may or may not be loaded depending on browser cache.
let width, height;
if(illustPage == 0)
{
let info = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(info != null)
{
width = info.width;
height = info.height;
}
}
/\x2f If that wasn't available, try to use the dimensions from the image. This is the size
/\x2f of the thumb rather than the image, but all we care about is the aspect ratio.
if(width == null && thumb.naturalWidth != 0)
{
width = thumb.naturalWidth;
height = thumb.naturalHeight;
}
if(width == null)
return;
/\x2f We can't do this until the node is added to the document and it has a size.
if(element.offsetWidth == 0)
return;
element.dataset.thumbLoaded = "1";
/\x2f Set up the thumbnail panning direction, which is based on the image aspect ratio and the
/\x2f displayed thumbnail aspect ratio.
let aspectRatio = element.offsetWidth / element.offsetHeight;
SearchView.createThumbnailAnimation(thumb, width, height, aspectRatio);
}
/\x2f If the aspect ratio is very narrow, don't use any panning, since it becomes too spastic.
/\x2f If the aspect ratio is portrait, use vertical panning.
/\x2f If the aspect ratio is landscape, use horizontal panning.
/\x2f
/\x2f If it's in between, don't pan at all, since we don't have anywhere to move and it can just
/\x2f make the thumbnail jitter in place.
/\x2f
/\x2f Don't pan muted images.
/\x2f
/\x2f containerAspectRatio is the aspect ratio of the box the thumbnail is in. If the
/\x2f thumb is in a 2:1 landscape box, we'll adjust the min and max aspect ratio accordingly.
static getThumbnailPanningDirection(thumb, width, height, containerAspectRatio)
{
/\x2f Disable panning if we don't have the image size. Local directory thumbnails
/\x2f don't tell us the dimensions in advance.
if(width == null || height == null)
{
helpers.html.setClass(thumb, "vertical-panning", false);
helpers.html.setClass(thumb, "horizontal-panning", false);
return null;
}
let aspectRatio = width / height;
aspectRatio /= containerAspectRatio;
let minAspectForPan = 1.1;
let maxAspectForPan = 4;
if(aspectRatio > (1/maxAspectForPan) && aspectRatio < 1/minAspectForPan)
return "vertical";
else if(aspectRatio > minAspectForPan && aspectRatio < maxAspectForPan)
return "horizontal";
else
return null;
}
static createThumbnailAnimation(thumb, width, height, containerAspectRatio)
{
if(ppixiv.mobile)
return null;
/\x2f Create the animation, or update it in-place if it already exists, probably due to the
/\x2f window being resized. total_time won't be updated when we do this.
let direction = this.getThumbnailPanningDirection(thumb, width, height, containerAspectRatio);
if(thumb.panAnimation != null || direction == null)
return null;
let keyframes = direction == "horizontal"?
[
/\x2f This starts in the middle, pans left, pauses, pans right, pauses, returns to the
/\x2f middle, then pauses again.
{ offset: 0.0, easing: "ease-in-out", objectPosition: "left top" }, /\x2f left
{ offset: 0.4, easing: "ease-in-out", objectPosition: "right top" }, /\x2f pan right
{ offset: 0.5, easing: "ease-in-out", objectPosition: "right top" }, /\x2f pause
{ offset: 0.9, easing: "ease-in-out", objectPosition: "left top" }, /\x2f pan left
{ offset: 1.0, easing: "ease-in-out", objectPosition: "left top" }, /\x2f pause
]:
[
/\x2f This starts at the top, pans down, pauses, pans back up, then pauses again.
{ offset: 0.0, easing: "ease-in-out", objectPosition: "center top" },
{ offset: 0.4, easing: "ease-in-out", objectPosition: "center bottom" },
{ offset: 0.5, easing: "ease-in-out", objectPosition: "center bottom" },
{ offset: 0.9, easing: "ease-in-out", objectPosition: "center top" },
{ offset: 1.0, easing: "ease-in-out", objectPosition: "center top" },
];
let animation = new Animation(new KeyframeEffect(thumb, keyframes, {
duration: 4000,
iterations: Infinity,
/\x2f The full animation is 4 seconds, and we want to start 20% in, at the halfway
/\x2f point of the first left-right pan, where the pan is exactly in the center where
/\x2f we are before any animation. This is different from vertical panning, since it
/\x2f pans from the top, which is already where we start (top center).
delay: direction == "horizontal"? -800:0,
}));
animation.id = direction == "horizontal"? "horizontal-pan":"vertical-pan";
thumb.panAnimation = animation;
return animation;
}
/\x2f element is a thumbnail element. On mouseover, start the pan animation, and create
/\x2f a StopAnimationAfter to prevent the animation from running forever.
/\x2f
/\x2f We create the pan animations programmatically instead of with CSS, since for some
/\x2f reason element.getAnimations is extremely slow and often takes 10ms or more. CSS
/\x2f can't be used to pause programmatic animations, so we have to play/pause it manually
/\x2f too.
addAnimationListener(element)
{
if(ppixiv.mobile)
return;
if(element.addedAnimationListener)
return;
element.addedAnimationListener = true;
element.addEventListener("mouseover", (e) => {
if(ppixiv.settings.get("disable_thumbnail_panning") ||
ppixiv.settings.get("thumbnail_style") == "aspect" ||
ppixiv.mobile)
return;
let thumb = element.querySelector(".thumb");
let anim = thumb.panAnimation;
if(anim == null)
return;
/\x2f Start playing the animation.
anim.play();
/\x2f Stop if StopAnimationAfter is already running for this thumb.
if(this.stopAnimation?.animation == anim)
return;
/\x2f If we were running it on another thumb and we missed the mouseout for
/\x2f some reason, remove it. This only needs to run on the current hover.
if(this.stopAnimation)
{
this.stopAnimation.shutdown();
this.stopAnimation = null;
}
this.stopAnimation = new StopAnimationAfter(anim, 6, 1, anim.id == "vertical-pan");
/\x2f Remove it when the mouse leaves the thumb. We'll actually respond to mouseover/mouseout
/\x2f for elements inside the thumb too, but it doesn't cause problems here.
element.addEventListener("mouseout", (e) => {
this.stopAnimation.shutdown();
this.stopAnimation = null;
anim.pause();
}, { once: true, signal: this.stopAnimation.abort.signal });
});
}
/\x2f Refresh the thumbnail for mediaId.
/\x2f
/\x2f This is used to refresh the bookmark icon when changing a bookmark.
refreshThumbnail(mediaId)
{
/\x2f If this is a manga post, refresh all thumbs for this media ID, since bookmarking
/\x2f a manga post is shown on all pages if it's expanded.
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(mediaInfo == null)
return;
let thumbnailElement = this.getThumbnailForMediaId(mediaId);
if(thumbnailElement != null)
this.refreshBookmarkIcon(thumbnailElement);
/\x2f If we're displaying individual pages for this media ID, check them too.
for(let page = 0; page < mediaInfo.pageCount; ++page)
{
let pageMediaId = helpers.mediaId.getMediaIdForPage(mediaId, page);
thumbnailElement = this.getThumbnailForMediaId(pageMediaId);
if(thumbnailElement != null)
this.refreshBookmarkIcon(thumbnailElement);
}
}
/\x2f If the data source gives us a URL to use as a header image, update it.
refreshHeader()
{
let img = this.artistHeader.querySelector("img");
let headerStripURL = this.dataSource?.uiInfo?.headerStripURL;
if(headerStripURL == null)
{
this.artistHeader.hidden = true;
img.src = helpers.other.blankImage;
return;
}
if(img.src == headerStripURL)
return;
/\x2f Save the scroll position in case we're turning the header on.
let savedScroll = this.saveScrollPosition();
/\x2f If thumbnail panning is turned off, disable this animation too.
helpers.html.setClass(img, "animated", ppixiv.mobile || !ppixiv.settings.get("disable_thumbnail_panning"));
/\x2f Start the animation.
img.classList.remove("loaded");
img.onload = () => img.classList.add("loaded");
/\x2f Set the URL.
img.src = headerStripURL ?? helpers.other.blankImage;
this.artistHeader.hidden = false;
this.restoreScrollPosition(savedScroll);
}
/\x2f Set the bookmarked heart for thumbnailElement. This can change if the user bookmarks
/\x2f or un-bookmarks an image.
refreshBookmarkIcon(thumbnailElement)
{
if(this.dataSource && this.dataSource.name == "manga")
return;
let mediaId = thumbnailElement.dataset.id;
if(mediaId == null)
return;
/\x2f Get thumbnail info.
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(mediaInfo == null)
return;
/\x2f aiType is 0 or 1 for false and 2 for true.
let showAI = mediaInfo.aiType == 2;
let showBookmarkHeart = mediaInfo.bookmarkData != null;
if(this.dataSource != null && !this.dataSource.showBookmarkIcons)
showBookmarkHeart = false;
/\x2f On mobile, don't show ai-image if we're showing a bookmark to reduce clutter.
if(ppixiv.mobile && showAI && showBookmarkHeart)
showAI = false;
thumbnailElement.querySelector(".ai-image").hidden = !showAI;
thumbnailElement.querySelector(".heart.public").hidden = !showBookmarkHeart || mediaInfo.bookmarkData.private;
thumbnailElement.querySelector(".heart.private").hidden = !showBookmarkHeart || !mediaInfo.bookmarkData.private;
}
/\x2f Refresh all thumbs after the mute list changes.
refreshAfterMuteChange()
{
this._mediaIdExpandedCache = null;
this.refreshImages({cause: "mutes-changed", purge: true});
}
getLoadedThumbs()
{
return Object.values(this.thumbs);
}
/\x2f Scroll to mediaId if it's available. This is called when we display the thumbnail view
/\x2f after coming from an illustration.
scrollToMediaId(mediaId)
{
if(mediaId == null)
return false;
/\x2f Make sure this image has a thumbnail created if possible.
this.refreshImages({ targetMediaId: mediaId, cause: "scroll-to-id" });
let thumb = this.getThumbnailForMediaId(mediaId, { fallbackOnPage1: true });
if(thumb == null)
return false;
/\x2f If we were displaying an image, pulse it to make it easier to find your place.
this.pulseThumbnail(mediaId);
/\x2f Get the vertical position and height of the thumb. Use the containing row instead
/\x2f of the thumb itself for this, since the thumb's offsetParent is the row and its
/\x2f offsetTop is 0.
let { offsetTop, offsetHeight } = thumb.parentNode;
/\x2f Stop if the thumb is already fully visible.
if(offsetTop >= this.scrollContainer.scrollTop &&
offsetTop + offsetHeight < this.scrollContainer.scrollTop + this.scrollContainer.offsetHeight)
return true;
let y = offsetTop + offsetHeight/2 - this.scrollContainer.offsetHeight/2;
/\x2f If we set y outside of the scroll range, iOS will incorrectly report scrollTop briefly.
/\x2f Clamp the position to avoid this.
y = helpers.math.clamp(y, 0, this.scrollContainer.scrollHeight - this.scrollContainer.offsetHeight);
this.scrollContainer.scrollTop = y;
return true;
};
/\x2f Return the bounding rectangle for the given mediaId.
getRectForMediaId(mediaId)
{
let thumb = this.getThumbnailForMediaId(mediaId, { fallbackOnPage1: true });
if(thumb == null)
return null;
return thumb.getBoundingClientRect();
}
pulseThumbnail(mediaId)
{
/\x2f If animations are enabled, they indicate the last viewed image, so we don't need this.
if(ppixiv.settings.get("animations_enabled"))
return;
let thumb = this.getThumbnailForMediaId(mediaId);
if(thumb == null)
return;
this.stopPulsingThumbnail();
this.flashingImage = thumb;
thumb.classList.add("flash");
};
/\x2f Work around a bug in CSS animations: even if animation-iteration-count is 1,
/\x2f the animation will play again if the element is hidden and displayed again, which
/\x2f causes previously-flashed thumbnails to flash every time we exit and reenter
/\x2f thumbnails.
stopPulsingThumbnail()
{
if(this.flashingImage == null)
return;
this.flashingImage.classList.remove("flash");
this.flashingImage = null;
};
};
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/screen-search/search-view.js
`),
"/vview/sites/data-source.js": loadBlob("application/javascript",
`
import Widget from '/vview/widgets/widget.js';
import { DropdownMenuOpener } from '/vview/widgets/dropdown.js';
import IllustIdList from '/vview/sites/illust-id-list.js';
import LocalAPI from '/vview/misc/local-api.js';
import { helpers, SafetyBackoffTimer } from '/vview/misc/helpers.js';
export default class DataSource extends EventTarget
{
constructor({url})
{
super();
this.url = new URL(url);
this. _resetLoadedPages();
};
_resetLoadedPages()
{
this.idList = new IllustIdList();
this.loadingPages = {};
this.loadedPages = {};
this.firstEmptyPage = -1;
}
async init()
{
/\x2f If this data source supports a start page, store the page we started on.
let args = new helpers.args(this.url);
this.initialPage = this.getStartPage(args);
/\x2f if(this.initialPage > 1)
/\x2f console.log("Starting at page", this.initialPage);
}
/\x2f If a data source returns a name, we'll display any .data-source-specific elements in
/\x2f the thumbnail view with that name.
get name() { return null; }
toString()
{
return \`\${this.name}\`;
}
/\x2f If true, allow expanding manga pages in results. If this is false, manga pages are never
/\x2f expanded and the button to enable it will be disabled.
/\x2f
/\x2f This should be false for data sources that don't return images, such as user searches, since
/\x2f there will never be images to expand. It must be false for data sources that can return
/\x2f manga pages themselves, since expanding manga pages is incompatible with manga pages being
/\x2f included in results.
get allowExpandingMangaPages() { return true; }
/\x2f Return true if all pages have been loaded.
get loadedAllPages() { return this.firstEmptyPage != -1; }
/\x2f Return this data source's URL as a helpers.args.
get args()
{
return new helpers.args(this.url);
}
/\x2f startup() is called when the data source becomes active, and shutdown is called when
/\x2f it's done. This can be used to add and remove event handlers on the UI.
startup()
{
this.active = true;
}
shutdown()
{
this.active = false;
}
/\x2f Return the URL to use to return to this search. For most data sources, this is the URL
/\x2f it was initialized with.
get searchUrl() { return this.url; }
/\x2f This returns the widget class that can be instantiated for this data source's UI.
get ui() { return null; }
/\x2f Load the given page. Return true if the page was loaded.
loadPage(page, { cause }={})
{
/\x2f Note that we don't remove entries from loadingPages when they finish, so
/\x2f future calls to loadPage will still return a promise for that page that will
/\x2f resolve immediately.
let result = this.loadedPages[page] || this.loadingPages[page];
if(result == null)
{
result = this._loadPageAsync(page, { cause });
this.loadingPages[page] = result;
result.finally(() => {
/\x2f Move the load from loadingPages to loadedPages.
delete this.loadingPages[page];
this.loadedPages[page] = result;
});
}
return result;
}
/\x2f Return true if the given page is either loaded, or currently being loaded by a call to loadPage.
isPageLoadedOrLoading(page)
{
if(this.idList.isPageLoaded(page))
return true;
if(this.loadedPages[page] || this.loadingPages[page])
return true;
return false;
}
/\x2f Return true if any page is currently loading.
get isAnyPageLoading()
{
for(let page in this.loadingPages)
if(this.loadingPages[page])
return true;
return false;
}
/\x2f Return true if the data source can load the given page.
canLoadPage(page)
{
if(page < 1)
return false;
/\x2f Most data sources can load any page if they haven't loaded a page yet. Once
/\x2f a page is loaded, they only load contiguous pages.
if(!this.idList.anyPagesLoaded)
return true;
/\x2f If we know a page is empty, don't try to load pages beyond it.
if(this.firstEmptyPage != -1 && page >= this.firstEmptyPage)
return false;
/\x2f If we've loaded pages 5-6, we can load anything between pages 4 and 7.
let lowestPage = this.idList.getLowestLoadedPage();
let highestPage = this.idList.getHighestLoadedPage();
return page >= lowestPage-1 && page <= highestPage+1;
}
async _loadPageAsync(page, { cause })
{
/\x2f Stop if this page is outside the range this data source can load.
if(!this.canLoadPage(page))
{
/\x2f console.log(\`Data source can't load page \${page}\`);
return;
}
/\x2f If the page is already loaded, stop.
if(this.idList.isPageLoaded(page))
return true;
console.log(\`Load page \${page} for: \${cause}\`);
/\x2f Before starting, await at least once so we get pushed to the event loop. This
/\x2f guarantees that loadPage has a chance to store us in this.loadingPages before
/\x2f we do anything that might have side-effects of starting another load.
await null;
/\x2f Run the actual load.
let { mediaIds, allowEmpty } = await this.loadPageInternal(page) ?? { };
/\x2f Register the page if media IDs were returned.
if(mediaIds)
await this.addPage(page, mediaIds, { allowEmpty });
/\x2f Reduce the start page, which will update the "load more results" button if any.
if(this.supportsStartPage && page < this.initialPage)
this.initialPage = page;
/\x2f If there were no results, then we've loaded the last page. Don't try to load
/\x2f any pages beyond this.
if(!this.idList.mediaIdsByPage.has(page))
{
console.log("No data on page", page);
if(this.firstEmptyPage == -1 || page < this.firstEmptyPage)
this.firstEmptyPage = page;
}
else if(this.idList.mediaIdsByPage.get(page).length == 0)
{
/\x2f A page was added, but it was empty. This is rare and can only happen if the
/\x2f data source explicitly adds an empty page, and means there was an empty search
/\x2f page that wasn't at the end. This breaks the search view's logic (it expects
/\x2f to get something back to trigger another load). Work around this by starting
/\x2f the next page.
/\x2f
/\x2f This is very rare. Use a strong backoff, so if this happens repeatedly for some
/\x2f reason, we don't hammer the API loading pages infinitely and get users API blocked.
this.emptyPageLoadBackoff ??= new SafetyBackoffTimer();
console.log(\`Load was empty, but not at the end. Delaying before loading the next page...\`);
await this.emptyPageLoadBackoff.wait();
console.log(\`Continuing load from \${page+1}\`);
return await this.loadPage(page+1);
}
return true;
}
/\x2f If a URL for this data source contains a media ID to view, return it. Otherwise, return
/\x2f null.
getUrlMediaId(args)
{
/\x2f Most data sources for Pixiv store the media ID in the hash, separated into the
/\x2f illust ID and page.
let illustId = args.hash.get("illust_id");
if(illustId == null)
return null;
let page = this.getUrlMangaPage(args);
return helpers.mediaId.fromIllustId(illustId, page);
}
/\x2f If the URL specifies a manga page, return it, otherwise return 0.
getUrlMangaPage(args)
{
if(!args.hash.has("page"))
return 0;
/\x2f Pages are 1-based in URLs, but 0-based internally.
return parseInt(args.hash.get("page"))-1;
}
/\x2f Set args to include the media ID being viewed. This is usually a media ID that the
/\x2f data source returned.
setUrlMediaId(mediaId, args)
{
let [illustId, page] = helpers.mediaId.toIllustIdAndPage(mediaId);
if(this.supportsStartPage)
{
/\x2f Store the page the illustration is on in the hash, so if the page is reloaded while
/\x2f we're showing an illustration, we'll start on that page. If we don't do this and
/\x2f the user clicks something that came from page 6 while the top of the search results
/\x2f were on page 5, we'll start the search at page 5 if the page is reloaded and not find
/\x2f the image, which is confusing.
let { page: originalPage } = this.idList.getPageForMediaId(illustId);
if(originalPage != null)
this.setStartPage(args, originalPage);
}
/\x2f By default, put the illust ID and page in the hash.
args.hash.set("illust_id", illustId);
if(page == null)
args.hash.delete("page");
else
args.hash.set("page", page + 1);
}
/\x2f Store the current page in the URL.
/\x2f
/\x2f This is only used if supportsStartPage is true.
setStartPage(args, page)
{
/\x2f Remove the page for page 1 to keep the initial URL clean.
if(page == 1)
args.query.delete("p");
else
args.query.set("p", page);
}
getStartPage(args)
{
/\x2f If the data source doesn't support this, the start page is always 1.
if(!this.supportsStartPage)
return 1;
let page = args.query.get("p") || "1";
return parseInt(page) || 1;
}
/\x2f Return the page title to use.
get pageTitle()
{
return "Pixiv";
}
/\x2f Set the page icon.
setPageIcon()
{
helpers.setIcon();
}
/\x2f If true, "No Results" will be displayed.
get hasNoResults()
{
return this.idList.getFirstId() == null && !this.isAnyPageLoading;
}
/\x2f This is implemented by the subclass.
async loadPageInternal(page)
{
throw "Not implemented";
}
/\x2f Return the estimated number of items per page.
get estimatedItemsPerPage()
{
/\x2f Most newer Pixiv pages show a grid of 6x8 images. Try to match it, so page numbers
/\x2f line up.
return 48;
};
/\x2f Return the screen that should be displayed by default, if no "view" field is in the URL.
get defaultScreen()
{
return "search";
}
/\x2f If we're viewing a page specific to a user (an illustration or artist page), return
/\x2f the user ID we're viewing. This can change when refreshing the UI.
get viewingUserId()
{
return null;
};
/\x2f If a data source is transient, it'll be discarded when the user navigates away instead of
/\x2f reused.
get transient() { return false; }
/\x2f Some data sources can restart the search at a page.
get supportsStartPage() { return false; }
/\x2f Most searches will only auto-load forwards and display "Load Previous Results" at the top.
/\x2f If this is true, the search is allowed to automatically load backwards too.
get autoLoadPreviousPages() { return false; }
/\x2f Return the "15 / 100" page text to use. This is only used by DataSource_VView.
getPageTextForMediaId(mediaId) { return null; }
/\x2f Register a page of data.
async addPage(page, mediaIds, {...options}={})
{
/\x2f If an image view is reloaded, it may no longer be on the same page in the underlying
/\x2f search. New posts might have pushed it onto another page, or the search might be
/\x2f random. This is confusing if you're trying to mousewheel navigate to other images.
/\x2f
/\x2f Work around this by making sure the initial image is on the initial page. If we load
/\x2f the first page and the image we were on isn't there anymore, insert it into the results.
/\x2f It's probably still in the results somewhere, but we can't tell where.
/\x2f
/\x2f This allows the user to navigate to neighboring images normally. We'll go to different
/\x2f images, but at least we can still navigate, and we can get back to where we started
/\x2f if the user navigates down and then back up. If the image shows up in real results later,
/\x2f it'll be filtered out.
let initialMediaId = this.getUrlMediaId(this.args);
/\x2f If this data source doesn't return manga pages, always use the first page.
if(this.allowExpandingMangaPages)
initialMediaId = helpers.mediaId.getMediaIdForPage(initialMediaId, 0);
if(page == this.initialPage &&
initialMediaId != null &&
this.idList.getPageForMediaId(initialMediaId).page == null &&
mediaIds.indexOf(initialMediaId) == -1)
{
/\x2f Make sure the media ID has info before adding it to the list.
if(await ppixiv.mediaCache.getMediaInfo(initialMediaId, { full: false }))
{
console.log(\`Adding initial media ID \${initialMediaId} to initial page \${this.initialPage}\`);
mediaIds = [initialMediaId, ...mediaIds];
}
}
/\x2f Verify that all results have media info registered.
for(let mediaId of mediaIds)
{
let { type, id } = helpers.mediaId.parse(mediaId);
if(type == "user" || type == "bookmarks")
{
if(ppixiv.extraCache.getQuickUserData(id) == null)
{
console.error(\`Data source returned \${mediaId} without registering user info\`, this);
throw new Error(\`Data source returned didn't register user info\`);
}
}
else
{
if(ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false }) == null)
{
console.error(\`Data source returned \${mediaId} without registering media info\`, this);
throw new Error(\`Data source returned didn't register media info\`);
}
}
}
this.idList.addPage(page, mediaIds, {...options});
/\x2f Send pageadded asynchronously to let listeners know we added the page.
let e = new Event("pageadded");
e.dataSource = this;
helpers.other.defer(() => this.dispatchEvent(e));
}
/\x2f Send the "updated" event when we want to tell our parent that something has changed.
/\x2f This is used when we've added a new page and the search view might want to refresh,
/\x2f if the page title should be refreshed, etc. Internal updates don't need to call this.
callUpdateListeners()
{
this.dispatchEvent(new Event("updated"));
}
/\x2f Return info useful for the container's UI elements:
/\x2f
/\x2f {
/\x2f mediaId, /\x2f media ID associated with the search, for restoring search scroll position
/\x2f imageUrl, /\x2f URL for an image related to this search
/\x2f imageLinkUrl, /\x2f a URL where imageUrl should link to
/\x2f userId, /\x2f a user ID whose avatar should be displayed
/\x2f mobileTitle, /\x2f an alternate title for the mobile search menu
/\x2f headerStripURL, /\x2f a URL to an image to show at the top of the search
/\x2f }
/\x2f
/\x2f If this changes, the "updated" event will be sent to the data source.
get uiInfo()
{
return { };
}
createAndSetButton(parent, createOptions, setupOptions)
{
let button = helpers.createBoxLink({
asElement: true,
...createOptions
});
parent.appendChild(button);
this.setItem(button, setupOptions);
return button;
}
/\x2f Create a common search dropdown. button is options to createBoxLink, and items
/\x2f is options to setItem.
setupDropdown(button, items)
{
return new DropdownMenuOpener({
button,
createDropdown: ({...options}) => {
let dropdown = new Widget({
...options,
template: \`\`,
});
for(let {createOptions, setupOptions} of items)
this.createAndSetButton(dropdown.root, createOptions, setupOptions);
return dropdown;
},
});
}
/\x2f A helper for setting up UI links. Find the link with the given type,
/\x2f set all {key: value} entries as query parameters, and remove any query parameters
/\x2f where value is null. Set .selected if the resulting URL matches the current one.
/\x2f
/\x2f If defaults is present, it tells us the default key that will be used if
/\x2f a key isn't present. For example, search.php?s_mode=s_tag is the same as omitting
/\x2f s_mode. We prefer to omit it rather than clutter the URL with defaults, but we
/\x2f need to know this to figure out whether an item is selected or not.
/\x2f
/\x2f If a key begins with #, it's placed in the hash rather than the query.
setItem(link, {type=null, ...options}={})
{
/\x2f If no type is specified, link itself is the link.
if(type != null)
{
link = link.querySelector(\`[data-type='\${type}']\`);
if(link == null)
{
console.warn("Couldn't find button with selector", type);
return;
}
}
/\x2f The URL we're adjusting:
let args = new helpers.args(this.url);
/\x2f Adjust the URL for this button.
let { args: newArgs, buttonIsSelected } = this.setItemInUrl(args, options);
helpers.html.setClass(link, "selected", buttonIsSelected);
link.href = newArgs.url.toString();
};
/\x2f Apply a search filter button to a search URL, activating or deactivating a search
/\x2f filter. Return { args, buttonIsSelected }.
setItemInUrl(args, {
/\x2f The fields selected when this button is activated. For example: { sort: "alpha" }
fields=null,
/\x2f An optional set of default fields: the values that will be used if the key isn't
/\x2f present.
defaults=null,
/\x2f If true, pressing this button toggles its keys on and off instead of always setting
/\x2f them.
toggle=false,
/\x2f If provided, this allows modifying URLs that put parameters in URL segments instead
/\x2f of the query where they belong. If urlFormat is "abc/def/ghi", a key of "/abc" will modify
/\x2f the first segment, and so on.
urlFormat=null,
/\x2f This can be used to adjust the link's URL without affecting anything else.
adjustUrl=null
}={})
{
/\x2f Ignore the language prefix on the URL if any, so it doesn't affect urlFormat.
args.path = helpers.pixiv.getPathWithoutLanguage(args.path);
/\x2f If urlParts is provided, create a map from "/segment" to a segment number like "/1" that
/\x2f args.set uses.
let urlParts = {};
if(urlFormat != null)
{
let parts = urlFormat.split("/");
for(let idx = 0; idx < parts.length; ++idx)
urlParts["/" + parts[idx]] = "/" + idx;
}
/\x2f Collect data for each key.
let fieldData = {};
for(let [key, value] of Object.entries(fields))
{
let originalKey = key;
let defaultValue = null;
if(defaults && key in defaults)
defaultValue = defaults[key];
/\x2f Convert path keys in fields from /path to their path index.
if(key.startsWith("/"))
{
if(urlParts[key] == null)
{
console.warn(\`URL key \${key} not specified in URL: \${args}\`);
continue;
}
key = urlParts[key];
}
fieldData[key] = {
value,
originalKey,
defaultValue,
}
}
/\x2f This button is selected if all of the keys it sets are present in the URL.
let buttonIsSelected = true;
for(let [key, {value, defaultValue}] of Object.entries(fieldData))
{
/\x2f The value we're setting in the URL:
let thisValue = value ?? defaultValue;
/\x2f The value currently in the URL:
let selectedValue = args.get(key) ?? defaultValue;
/\x2f If the URL didn't have the key we're setting, then it isn't selected.
if(thisValue != selectedValue)
buttonIsSelected = false;
/\x2f If the value we're setting is the default, delete it instead.
if(defaults != null && thisValue == defaultValue)
value = null;
args.set(key, value);
}
/\x2f If this is a toggle and the button is selected, set the fields to their default,
/\x2f turning this into an "off" button.
if(toggle && buttonIsSelected)
{
for(let [key, { defaultValue }] of Object.entries(fieldData))
args.set(key, defaultValue);
}
/\x2f Don't include the page number in search buttons, so clicking a filter goes
/\x2f back to page 1.
args.set("p", null);
if(adjustUrl)
adjustUrl(args);
return { args, buttonIsSelected };
}
/\x2f Return true of the thumbnail view should show bookmark icons for this source.
get showBookmarkIcons()
{
return true;
}
/\x2f Return the next or previous image to navigate to from mediaId. If we're at the end of
/\x2f the loaded results, load the next or previous page. If mediaId is null, return the first
/\x2f image. This only returns illusts, not users or folders.
/\x2f
/\x2f This currently won't load more than one page. If we load a page and it only has users,
/\x2f we won't try another page.
async getOrLoadNeighboringMediaId(mediaId, next, options={})
{
/\x2f See if it's already loaded.
let newMediaId = this.idList.getNeighboringMediaId(mediaId, next, options);
if(newMediaId != null)
return newMediaId;
/\x2f We didn't have the new illustration, so we may need to load another page of search results.
/\x2f See if we know which page mediaId is on.
let page = mediaId != null? this.idList.getPageForMediaId(mediaId).page:null;
/\x2f Find the page this illustration is on. If we don't know which page to start on,
/\x2f use the initial page.
if(page != null)
{
page += next? +1:-1;
if(page < 1)
return null;
}
else
{
/\x2f If we don't know which page mediaId is on, start from initialPage.
page = this.initialPage;
}
/\x2f Short circuit if we already know this is past the end. This just avoids spamming
/\x2f logs.
if(!this.canLoadPage(page))
return null;
console.log("Loading the next page of results:", page);
/\x2f The page shouldn't already be loaded. Double-check to help prevent bugs that might
/\x2f spam the server requesting the same page over and over.
if(this.idList.isPageLoaded(page))
{
console.error(\`Page \${page} is already loaded\`);
return null;
}
/\x2f Load a page.
let newPageLoaded = await this.loadPage(page, { cause: "illust navigation" });
if(!newPageLoaded)
return null;
/\x2f Now that we've loaded data, try to find the new image again.
console.log("Finishing navigation after data load");
return this.idList.getNeighboringMediaId(mediaId, next, options);
}
/\x2f Get the next or previous image to fromMediaId. If we're at the end, loop back
/\x2f around to the other end. options is the same as getOrLoadNeighboringMediaId.
async getOrLoadNeighboringMediaIdWithLoop(fromMediaId, next, options={})
{
/\x2f See if we can keep moving in this direction.
let mediaId = await this.getOrLoadNeighboringMediaId(fromMediaId, next, options);
if(mediaId)
return mediaId;
/\x2f We're out of results in this direction. If we're moving backwards, only loop
/\x2f if we have all results. Otherwise, we'll go to the last loaded image, but if
/\x2f the user then navigates forwards, he'll just go to the next image instead of
/\x2f where he came from, which is confusing.
if(!next && !this.loadedAllPages)
{
console.log("Not looping backwards since we don't have all pages");
return null;
}
return next? this.idList.getFirstId():this.idList.getLastId();
}
};
/\x2f This is a base class for data sources that work by loading a regular Pixiv page
/\x2f and scraping it.
/\x2f
/\x2f All of these work the same way. We keep the current URL (ignoring the hash) synced up
/\x2f as a valid page URL that we can load. If we change pages or other search options, we
/\x2f modify the URL appropriately.
export class DataSourceFromPage extends DataSource
{
constructor(url)
{
super(url);
this.itemsPerPage = 1;
this.originalUrl = url;
}
get estimatedItemsPerPage() { return this.itemsPerPage; }
async loadPageInternal(page)
{
/\x2f Our page URL looks like eg.
/\x2f
/\x2f https:/\x2fwww.pixiv.net/bookmark.php?p=2
/\x2f
/\x2f possibly with other search options. Request the current URL page data.
let url = new URL(this.url);
/\x2f Update the URL with the current page.
url.searchParams.set("p", page);
console.log("Loading:", url.toString());
let doc = await helpers.pixivRequest.fetchDocument(url);
let mediaIds = this.parseDocument(doc);
if(mediaIds == null)
{
/\x2f The most common case of there being no data in the document is loading
/\x2f a deleted illustration. See if we can find an error message.
console.error("No data on page");
return;
}
/\x2f Assume that if the first request returns 10 items, all future pages will too. This
/\x2f is usually correct unless we happen to load the last page last. Allow this to increase
/\x2f in case that happens. (This is only used by the thumbnail view.)
if(this.itemsPerPage == 1)
this.itemsPerPage = Math.max(mediaIds.length, this.itemsPerPage);
return { mediaIds };
}
/\x2f Parse the loaded document and return the media IDs.
parseDocument(doc)
{
throw "Not implemented";
}
}
/\x2f This extends DataSource with local pagination.
/\x2f
/\x2f A few API calls just return all results as a big list of IDs. We can handle loading
/\x2f them all at once, but it results in a very long scroll box, which makes scrolling
/\x2f awkward. This artificially paginates the results.
export class DataSourceFakePagination extends DataSource
{
async loadPageInternal(page)
{
if(this.pages == null)
{
let mediaIds = await this.loadAllResults();
this.pages = PaginateMediaIds(mediaIds, this.estimatedItemsPerPage);
}
let mediaIds = this.pages[page-1] || [];
return { mediaIds };
}
/\x2f Implemented by the subclass. Load all results, and return the resulting IDs.
async loadAllResults()
{
throw "Not implemented";
}
}
/\x2f Split a list of media IDs into pages.
/\x2f
/\x2f In general it's safe for a data source to return a lot of data, and the search view
/\x2f will handle incremental loading, but this can be used to split large results apart.
export function PaginateMediaIds(mediaIds, itemsPerPage)
{
/\x2f Paginate the big list of results.
let pages = [];
let page = null;
for(let mediaId of mediaIds)
{
if(page == null)
{
page = [];
pages.push(page);
}
page.push(mediaId);
if(page.length == itemsPerPage)
page = null;
}
return pages;
}
/\x2f A helper widget for dropdown lists of tags which refreshes when the data source is updated.
export class TagDropdownWidget extends Widget
{
constructor({dataSource, ...options})
{
super({
...options,
template: \`\`,
});
this.dataSource = dataSource;
this.dataSource.addEventListener("updated", () => this.refreshTags(), this._signal);
this.refreshTags();
}
refreshTags()
{
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/sites/data-source.js
`),
"/vview/sites/illust-id-list.js": loadBlob("application/javascript",
`/\x2f A list of illustration IDs by page.
/\x2f
/\x2f Store the list of illustration IDs returned from a search, eg. bookmark.php?p=3,
/\x2f and allow looking up the next or previous ID for an illustration. If we don't have
/\x2f data for the next or previous illustration, return the page that should be loaded
/\x2f to make it available.
/\x2f
/\x2f We can have gaps in the pages we've loaded, due to history navigation. If you load
/\x2f page 1, then jump to page 3, we'll figure out that to get the illustration before the
/\x2f first one on page 3, we need to load page 2.
/\x2f
/\x2f One edge case is when the underlying search changes while we're viewing it. For example,
/\x2f if we're viewing page 2 with ids [1,2,3,4,5], and when we load page 3 it has ids
/\x2f [5,6,7,8,9], that usually means new entries were added to the start since we started.
/\x2f We don't want the same ID to occur twice, so we'll detect if this happens, and clear
/\x2f all other pages. That way, we'll reload the previous pages with the updated data if
/\x2f we navigate back to them.
import { helpers } from '/vview/misc/helpers.js';
export default class IllustIdList
{
constructor()
{
this.mediaIdsByPage = new Map();
};
getAllMediaIds()
{
/\x2f Make a list of all IDs we already have.
let allIds = [];
for(let [page, ids] of this.mediaIdsByPage)
allIds = allIds.concat(ids);
return allIds;
}
get anyPagesLoaded()
{
return this.mediaIdsByPage.size != 0;
}
getLowestLoadedPage()
{
/\x2f Give a default in case mediaIdsByPage is empty, so we don't return infinity.
return Math.min(999999, ...this.mediaIdsByPage.keys());
}
getHighestLoadedPage()
{
return Math.max(0, ...this.mediaIdsByPage.keys());
}
/\x2f Add a page of results.
/\x2f
/\x2f If the page cache has been invalidated, return false. This happens if we think the
/\x2f results have changed too much for us to reconcile it.
addPage(page, mediaIds, {
/\x2f If mediaIds is empty, that normally means we're past the end of the results, so we
/\x2f don't add the page. That way, canLoadPage() will return false for future pages.
/\x2f If allowEmpty is true, allow adding empty pages. This is used when we have an empty
/\x2f page but we know we're not actually at the end.
allowEmpty=false,
}={})
{
/\x2f Sanity check:
for(let mediaId of mediaIds)
if(mediaId == null)
console.warn("Null illust_id added");
if(this.mediaIdsByPage.has(page))
{
console.warn("Page", page, "was already loaded");
return true;
}
/\x2f Make a list of all IDs we already have.
let allIllusts = this.getAllMediaIds();
/\x2f For fast-moving pages like new_illust.php, we'll very often get a few entries at the
/\x2f start of page 2 that were at the end of page 1 when we requested it, because new posts
/\x2f have been added to page 1 that we haven't seen. Remove any duplicate IDs.
let idsToRemove = [];
for(let newId of mediaIds)
{
if(allIllusts.indexOf(newId) != -1)
idsToRemove.push(newId);
}
if(idsToRemove.length > 0)
console.log("Removing duplicate illustration IDs:", idsToRemove.join(", "));
mediaIds = mediaIds.slice();
for(let newId of idsToRemove)
{
let idx = mediaIds.indexOf(newId);
mediaIds.splice(idx, 1);
}
/\x2f If there's nothing on this page, don't add it, so this doesn't increase
/\x2f getHighestLoadedPage().
if(!allowEmpty && mediaIds.length == 0)
return;
this.mediaIdsByPage.set(page, mediaIds);
};
/\x2f Return the page number mediaId is on and the index within the page.
/\x2f
/\x2f If checkFirstPage is true and mediaId isn't in the list, try the first page
/\x2f of mediaId too, so if we're looking for page 3 of a manga post and the data
/\x2f source only contains the first page, we'll use that.
getPageForMediaId(mediaId, { checkFirstPage=true }={})
{
for(let [page, ids] of this.mediaIdsByPage)
{
let idx = ids.indexOf(mediaId);
if(idx != -1)
return { page, idx, mediaId };
}
if(!checkFirstPage)
return { };
/\x2f Try the first page.
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
for(let [page, ids] of this.mediaIdsByPage)
{
let idx = ids.indexOf(mediaId);
if(ids.indexOf(mediaId) != -1)
return { page, idx, mediaId };
}
return { };
};
/\x2f Return the next or previous illustration. If we don't have that page, return null.
/\x2f
/\x2f This only returns illustrations, skipping over any special entries like user:12345.
/\x2f If illust_id is null, start at the first loaded illustration.
getNeighboringMediaId(mediaId, next, options={})
{
for(let i = 0; i < 100; ++i) /\x2f sanity limit
{
mediaId = this._getNeighboringMediaIdInternal(mediaId, next, options);
if(mediaId == null)
return null;
/\x2f If it's not an illustration, keep looking.
let { type } = helpers.mediaId.parse(mediaId);
if(type == "illust" || type == "file")
return mediaId;
}
return null;
}
/\x2f The actual logic for getNeighboringMediaId, except for skipping entries.
/\x2f
/\x2f manga tells us how to handle manga pages:
/\x2f - "normal": Navigate manga pages normally.
/\x2f - "skip-to-first": Skip past manga pages, and always go to the first page of the
/\x2f next or previous image.
/\x2f - "skip-past": Skip past manga pages. If we're navigating backwards, go to the
/\x2f last page of the previous image, like we would normally.
_getNeighboringMediaIdInternal(mediaId, next, { manga='normal' }={})
{
console.assert(manga == 'normal' || manga == 'skip-to-first' || manga == 'skip-past');
if(mediaId == null)
return this.getFirstId();
/\x2f If we're navigating forwards and we're not skipping manga pages, grab media info to
/\x2f get the page count to see if we're at the end.
let id = helpers.mediaId.parse(mediaId);
if(id.type == "illust" && manga == 'normal')
{
/\x2f If we're navigating backwards and we're past page 1, just go to the previous page.
if(!next && id.page > 0)
{
id.page--;
return helpers.mediaId.encodeMediaId(id);
}
/\x2f If we're navigating forwards, grab illust data to see if we can navigate to the
/\x2f next page.
if(next)
{
let info = ppixiv.mediaCache.getMediaInfoSync(mediaId, { full: false });
if(info == null)
{
/\x2f This can happen if we're viewing a deleted image, which has no illust info.
console.log("Thumbnail info missing for", mediaId);
}
else
{
let [oldIllustId, oldPage] = helpers.mediaId.toIllustIdAndPage(mediaId);
if(oldPage < info.pageCount - 1)
{
/\x2f There are more pages, so just navigate to the next page.
id.page++;
return helpers.mediaId.encodeMediaId(id);
}
}
}
}
let { page, idx } = this.getPageForMediaId(mediaId);
if(page == null)
return null;
/\x2f Find the next or previous page that isn't empty, skipping over empty pages.
let newMediaId = null;
while(newMediaId == null)
{
let ids = this.mediaIdsByPage.get(page);
let newIdx = idx + (next? +1:-1);
if(newIdx >= 0 && newIdx < ids.length)
{
/\x2f Navigate to the next or previous image on the same page.
newMediaId = ids[newIdx];
break;
}
if(next)
{
/\x2f Get the first illustration on the next page, or null if that page isn't loaded.
page++;
ids = this.mediaIdsByPage.get(page);
if(ids == null)
return null;
newMediaId = ids[0];
}
else
{
/\x2f Get the last illustration on the previous page, or null if that page isn't loaded.
page--;
ids = this.mediaIdsByPage.get(page);
if(ids == null)
return null;
newMediaId = ids[ids.length-1];
}
}
/\x2f If we're navigating backwards and we're not in skip-to-first mode, get the last page on newMediaId.
if(!next && manga != 'skip-to-first' && helpers.mediaId.parse(newMediaId).type == "illust")
{
let info = ppixiv.mediaCache.getMediaInfoSync(newMediaId, { full: false });
if(info == null)
{
console.log("Thumbnail info missing for", mediaId);
return null;
}
newMediaId = helpers.mediaId.getMediaIdForPage(newMediaId, info.pageCount - 1);
}
return newMediaId;
};
/\x2f Return the first ID, or null if we don't have any.
getFirstId()
{
if(this.mediaIdsByPage.size == 0)
return null;
let firstPage = this.getLowestLoadedPage();
return this.mediaIdsByPage.get(firstPage)[0];
}
/\x2f Return the last ID, or null if we don't have any.
getLastId()
{
if(this.mediaIdsByPage.size == 0)
return null;
let lastPage = this.getHighestLoadedPage();
let ids = this.mediaIdsByPage.get(lastPage);
return ids[ids.length-1];
}
/\x2f Return true if the given page is loaded.
isPageLoaded(page)
{
return this.mediaIdsByPage.has(page);
}
};
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/sites/illust-id-list.js
`),
"/vview/sites/site.js": loadBlob("application/javascript",
`import { helpers } from '/vview/misc/helpers.js';
/\x2f Each site we support has a singleton Site class. We currently only support
/\x2f using a single site (the site we're on) and only create its singleton.
export class Site
{
constructor()
{
this.dataSourcesByUrl = {};
}
/\x2f Run initial setup. Return false if initialization failed and we should stop.
async init() { return true; }
/\x2f This is called early in initialization. If we're running natively and the URL is
/\x2f empty, navigate to a default directory, so we don't start off on an empty page
/\x2f every time. If we're on Pixiv, make sure we're on a supported page.
async setInitialUrl() { }
/\x2f Return the data source for a URL, or null if the page isn't supported.
getDataSourceForUrl(url) { return null; }
/\x2f Create the data source for a given URL.
/\x2f
/\x2f If we've already created a data source for this URL, the same one will be
/\x2f returned.
createDataSourceForUrl(url, {
/\x2f If force is true, we'll always create a new data source, replacing any
/\x2f previously created one.
force=false,
/\x2f If startAtBeginning is true, the data source page number in url will be
/\x2f ignored, returning to page 1. This only matters for data sources that support
/\x2f a start page.
startAtBeginning=false,
}={})
{
let args = new helpers.args(url);
let dataSourceClass = this.getDataSourceForUrl(url);
if(dataSourceClass == null)
{
console.error("Unexpected path:", url.pathname);
return;
}
/\x2f Canonicalize the URL to see if we already have a data source for this URL. We only
/\x2f keep one data source around for each canonical URL (eg. search filters).
let canonicalUrl = helpers.getCanonicalUrl(url, { startAtBeginning: true }).url.toString();
let oldDataSource = this.dataSourcesByUrl[canonicalUrl];
if(!force && oldDataSource != null)
{
/\x2f console.log("Reusing data source for", url.toString());
/\x2f If the URL has a page number in it, only return it if this data source can load the
/\x2f page the caller wants. If we have a data source that starts at page 10 and the caller
/\x2f wants page 1, the data source probably won't be able to load it since pages are always
/\x2f contiguous.
let page = oldDataSource.getStartPage(args);
if(!oldDataSource.canLoadPage(page))
console.log(\`Not using cached data source because it can't load page \${page}\`);
else
return oldDataSource;
}
/\x2f The search page isn't part of the canonical URL, but keep it in the URL we create
/\x2f the data source with, so it starts at the current page.
let baseUrl = helpers.getCanonicalUrl(url, { startAtBeginning }).url.toString();
let dataSource = new dataSourceClass({ url: baseUrl });
this.dataSourcesByUrl[canonicalUrl] = dataSource;
return dataSource;
}
/\x2f If we have the given data source cached, discard it, so it'll be recreated
/\x2f the next time it's used.
discardDataSource(dataSource)
{
let urlsToRemove = [];
for(let url in this.dataSourcesByUrl)
{
if(this.dataSourcesByUrl[url] === dataSource)
urlsToRemove.push(url);
}
for(let url of urlsToRemove)
delete this.dataSourcesByUrl[url];
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/sites/site.js
`),
"/vview/sites/native/site-native.js": loadBlob("application/javascript",
`import * as Site from '/vview/sites/site.js';
import LocalAPI from '/vview/misc/local-api.js';
import { helpers } from '/vview/misc/helpers.js';
import { VView, VViewSearch } from '/vview/sites/native/data-sources/vview.js';
import VViewSimilar from '/vview/sites/native/data-sources/similar.js';
export default class SiteNative extends Site.Site
{
async init()
{
helpers.html.setClass(document.body, "native", ppixiv.native);
/\x2f If enabled, cache local info which tells us what we have access to.
await LocalAPI.loadLocalInfo();
/\x2f If login is required to do anything, no API calls will succeed. Stop now and
/\x2f just redirect to login. This is only for the local API.
if(LocalAPI.localInfo.enabled && LocalAPI.localInfo.loginRequired)
{
LocalAPI.redirectToLogin();
return false;
}
return true;
}
getDataSourceForUrl(url)
{
url = new URL(url);
let args = new helpers.args(url);
if(args.path == "/similar")
return VViewSimilar;
let { searchOptions } = LocalAPI.getSearchOptionsForArgs(args);
if(searchOptions == null && !LocalAPI.localInfo.bookmark_tag_searches_only)
return VView;
else
return VViewSearch;
}
async setInitialUrl()
{
if(document.location.hash != "")
return;
/\x2f If we're limited to tag searches, we don't view folders. Just set the URL
/\x2f to "/".
if(LocalAPI.localInfo.bookmark_tag_searches_only)
{
let args = helpers.args.location;
args.hashPath = "/";
helpers.navigate(args, { addToHistory: false, cause: "initial" });
return;
}
/\x2f Read the folder list. If we have any mounts, navigate to the first one. Otherwise,
/\x2f show folder:/ as a fallback.
let mediaId = "folder:/";
let result = await ppixiv.mediaCache.localSearch(mediaId);
if(result.results.length)
mediaId = result.results[0].mediaId;
let args = helpers.args.location;
LocalAPI.getArgsForId(mediaId, args);
helpers.navigate(args, { addToHistory: false, cause: "initial" });
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/sites/native/site-native.js
`),
"/vview/sites/native/data-sources/similar.js": loadBlob("application/javascript",
`import DataSource from '/vview/sites/data-source.js';
import LocalAPI from '/vview/misc/local-api.js';
import { getUrlForMediaId } from '/vview/misc/media-ids.js'
import { helpers } from '/vview/misc/helpers.js';
export default class DataSources_VViewSimilar extends DataSource
{
get name() { return "similar"; }
get pageTitle() { return this.getDisplayingText(); }
getDisplayingText() { return \`Similar images\`; }
get isVView() { return true; }
async loadPageInternal(page)
{
if(page != 1)
return;
/\x2f We can be given a local path or a URL to an image to search for.
let args = new helpers.args(this.url);
let path = args.hash.get("search_path");
let url = args.hash.get("search_url");
let result = await LocalAPI.localPostRequest(\`/api/similar/search\`, {
path,
url,
max_results: 10,
});
if(!result.success)
{
ppixiv.message.show("Error reading search: " + result.reason);
return result;
}
/\x2f This is a URL to the original image we're searching for.
this.sourceUrl = result.source_url;
this.callUpdateListeners();
let mediaIds = [];
for(let item of result.results)
{
/\x2f console.log(item.score);
/\x2f Register the results with media_cache.
let entry = item.entry;
await ppixiv.mediaCache.addFullMediaInfo(entry);
mediaIds.push(entry.mediaId);
}
return { mediaIds };
};
/\x2f We only load one page of results.
canLoadPage(page)
{
return page == 1;
}
setPageIcon()
{
helpers.setIcon({vview: true});
}
get uiInfo()
{
let imageUrl = null;
let imageLinkUrl = null;
if(this.sourceUrl)
{
imageUrl = this.sourceUrl;
/\x2f If this is a search for a local path, link to the image.
let args = new helpers.args(this.url);
let path = args.hash.get("search_path");
if(path)
{
let mediaId = helpers.mediaId.encodeMediaId({type: "file", id: path});
let linkArgs = getUrlForMediaId(mediaId);
imageLinkUrl = linkArgs;
}
}
return { imageUrl, imageLinkUrl };
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/sites/native/data-sources/similar.js
`),
"/vview/sites/native/data-sources/vview.js": loadBlob("application/javascript",
`import Widget from '/vview/widgets/widget.js';
import DataSource, { PaginateMediaIds, TagDropdownWidget } from '/vview/sites/data-source.js';
import LocalAPI from '/vview/misc/local-api.js';
import { LocalSearchBoxWidget } from '/vview/widgets/local-widgets.js';
import { DropdownMenuOpener } from '/vview/widgets/dropdown.js';
import { helpers } from '/vview/misc/helpers.js';
class VViewBase extends DataSource
{
get pageTitle() { return this.getDisplayingText(); }
get isVView() { return true; }
get supportsStartPage() { return true; }
get ui() { return UI; }
get autoLoadPreviousPages() { return true; }
constructor(args)
{
super(args);
this.reachedEnd = false;
this.prevPageUuid = null;
this.nextPageUuid = null;
this.nextPageOffset = null;
this.bookmarkTagCounts = null;
}
async init()
{
super.init();
this.fetchBookmarkTagCounts();
}
/\x2f We set our own start page by looking for the starting ID, so don't pollute the URL
/\x2f with a page number that won't be sued.
setStartPage(args, page) { }
get uiInfo()
{
let args = new helpers.args(this.url);
let mediaId = LocalAPI.getLocalIdFromArgs(args, { getFolder: true });
return { mediaId };
}
setPageIcon()
{
helpers.setIcon({vview: true});
}
getDisplayingText()
{
let args = new helpers.args(this.url);
return LocalAPI.getSearchOptionsForArgs(args).title;
}
/\x2f Put the illust ID in the hash instead of the path. Pixiv doesn't care about this,
/\x2f and this avoids sending the user's filenames to their server as 404s.
setUrlMediaId(mediaId, args)
{
LocalAPI.getArgsForId(mediaId, args);
}
getUrlMediaId(args)
{
/\x2f If the URL points to a file, return it. If no image is being viewed this will give
/\x2f the folder we're in, which shouldn't be returned here.
let mediaId = LocalAPI.getLocalIdFromArgs(args);
if(mediaId == null || !mediaId.startsWith("file:"))
return null;
return mediaId;
}
/\x2f We're doing a bookmark search if the bookmark filter is enabled, or if
/\x2f we're restricted to listing tagged bookmarks.
get bookmarkSearchActive()
{
return this.args.hash.has("bookmarks") || LocalAPI.localInfo.bookmark_tag_searches_only;
}
async fetchBookmarkTagCounts()
{
if(this.fetchedBookmarkTagCounts)
return;
this.fetchedBookmarkTagCounts = true;
/\x2f We don't need to do this if we're not showing bookmarks.
if(!this.bookmarkSearchActive)
return;
let result = await LocalAPI.localPostRequest(\`/api/bookmark/tags\`);
if(!result.success)
{
console.log("Error fetching bookmark tag counts");
return;
}
this.bookmarkTagCounts = result.tags;
this.callUpdateListeners();
}
}
/\x2f This data source is used when we have no search and we're viewing a single directory.
/\x2f We'll load the whole directory with /ids, and then load media info as we go.
export class VView extends VViewBase
{
get name() { return "vview"; }
constructor(url)
{
super(url);
this._allIds = null;
}
async init({targetMediaId})
{
await super.init();
if(this._initialized)
return;
this._initialized = true;
let args = new helpers.args(this.url);
let { searchOptions } = LocalAPI.getSearchOptionsForArgs(args);
let folderId = LocalAPI.getLocalIdFromArgs(args, { getFolder: true });
console.log("Loading folder contents:", folderId);
let order = args.hash.get("order");
let resultIds = await LocalAPI.localPostRequest(\`/api/ids/\${folderId}\`, {
...searchOptions,
ids_only: true,
order,
});
if(!resultIds.success)
{
ppixiv.message.show("Error reading directory: " + resultIds.reason);
return;
}
this.pages = PaginateMediaIds(resultIds.ids, this.estimatedItemsPerPage);
this._allIds = resultIds.ids;
/\x2f If a file was present in the URL when we're created, try to start on the page
/\x2f containing it, overriding the starting page.
this._selectInitialPage(targetMediaId);
}
/\x2f Return the index into this.pages containing mediaId, or -1 if not found.
/\x2f
/\x2f Note that the result is an index into this.pages, which is 0-based.
getMediaIdPage(mediaId)
{
if(this.pages == null)
return -1;
for(let page = 0; page < this.pages.length; ++page)
{
let mediaIdsOnPage = this.pages[page];
if(mediaIdsOnPage.indexOf(mediaId) != -1)
return page;
}
return -1;
}
/\x2f Most data sources load a page of results at a time and remember the current page
/\x2f in the URL. VView works differently: if we're viewing a directory we get the entire
/\x2f directory's IDs at once. We don't store the page in the URL, since we might be
/\x2f loaded directly from a file association that wouldn't know which page it'll be.
/\x2f
/\x2f The default getStartPage expects a page number. Override it so if we're viewing
/\x2f an image, we'll return the page it's on. That way if we're viewing an image and
/\x2f navigate to the next image, it'll know which page we're on and won't create a new
/\x2f data source thinking we're trying to navigate to page 1.
getStartPage(args)
{
if(this.pages == null)
return 1;
let mediaId = LocalAPI.getLocalIdFromArgs(args);
if(mediaId == null)
return 1;
let page = this.getMediaIdPage(mediaId);
if(page != -1)
return page + 1; /\x2f 0-based to 1-based
return 1;
}
_selectInitialPage(targetMediaId)
{
if(targetMediaId == null)
return;
let page = this.getMediaIdPage(targetMediaId);
if(page == -1)
return;
/\x2f If the new initial page couldn't normally be loaded, reset our loaded pages and
/\x2f start over.
let newInitialPage = page + 1;
let needsReset = !this.canLoadPage(newInitialPage);
this.initialPage = newInitialPage;
console.log(\`Start on page \${this.initialPage}, reset: \${needsReset}\`);
if(needsReset)
this._resetLoadedPages();
}
/\x2f If we've loaded all pages, we can display the file index as a page number.
getPageTextForMediaId(mediaId)
{
if(this._allIds == null)
return null;
let idx = this._allIds.indexOf(mediaId);
if(idx == -1)
return null;
return \`Page \${idx+1}/\${this._allIds.length}\`;
}
async loadPageInternal(page)
{
let mediaIds = this.pages[page-1] || [];
/\x2f Load info for these images before returning them.
await ppixiv.mediaCache.batchGetMediaInfoPartial(mediaIds);
return { mediaIds };
}
}
export class VViewSearch extends VViewBase
{
get name() { return "vview-search"; }
async loadPageInternal(page)
{
/\x2f If the last result was at the end, stop.
if(this.reachedEnd)
return;
/\x2f We should only be called in one of three ways: a start page (any page, but only if we have
/\x2f nothing loaded), or a page at the start or end of pages we've already loaded. Figure out which
/\x2f one this is. "page" is set to result.next of the last page to load the next page, or result.prev
/\x2f of the first loaded page to load the previous page.
let lowestPage = this.idList.getLowestLoadedPage();
let highestPage = this.idList.getHighestLoadedPage();
let pageUuid = null;
let loadingDirection;
if(page == lowestPage - 1)
{
/\x2f Load the previous page.
pageUuid = this.prevPageUuid;
loadingDirection = "backwards";
}
else if(page == highestPage + 1)
{
/\x2f Load the next page.
pageUuid = this.nextPageUuid;
loadingDirection = "forwards";
}
else if(this.nextPageOffset == null)
{
loadingDirection = "initial";
}
else
{
/\x2f This isn't our start page, and it doesn't match up with our next or previous page.
console.error(\`Loaded unexpected page \${page} (\${lowestPage}...\${highestPage})\`);
return;
}
if(this.nextPageOffset == null)
{
/\x2f We haven't loaded any pages yet, so we can't resume the search in-place. Set next_page_offset
/\x2f to the approximate offset to skip to this page number.
this.nextPageOffset = this.estimatedItemsPerPage * (page-1);
}
let args = new helpers.args(this.url);
let { searchOptions } = LocalAPI.getSearchOptionsForArgs(args);
let folderId = LocalAPI.getLocalIdFromArgs(args, { getFolder: true });
let order = args.hash.get("order");
/\x2f Note that this registers the results with MediaCache automatically.
let result = await ppixiv.mediaCache.localSearch(folderId, {
...searchOptions,
order: order,
/\x2f If we have a next_page_uuid, use it to load the next page.
page: pageUuid,
limit: this.estimatedItemsPerPage,
/\x2f This is used to approximately resume the search if next_page_uuid has expired.
skip: this.nextPageOffset,
});
if(!result.success)
{
ppixiv.message.show("Error reading directory: " + result.reason);
return result;
}
/\x2f Update the next and previous page IDs. If we're loading backwards, always update
/\x2f the previous page. If we're loading forwards, always update the next page. If
/\x2f either of these are null, update both.
if(loadingDirection == "backwards" || loadingDirection == "initial")
this.prevPageUuid = result.pages.prev;
if(loadingDirection == "forwards" || loadingDirection == "initial")
this.nextPageUuid = result.pages.next;
this.nextPageOffset = result.next_offset;
/\x2f If next is null, we've reached the end of the results.
if(result.pages.next == null)
this.reachedEnd = true;
let mediaIds = [];
for(let thumb of result.results)
mediaIds.push(thumb.mediaId);
return { mediaIds };
};
/\x2f Override canLoadPage. If we've already loaded a page, we've cached the next
/\x2f and previous page UUIDs and we don't want to load anything else, even if the first
/\x2f page we loaded had no results.
canLoadPage(page)
{
if(page < 1)
return false;
/\x2f next_page_offset is null if we haven't tried to load anything yet.
if(this.nextPageOffset == null)
return true;
/\x2f If we've loaded pages 5-6, we can load anything between pages 4 and 7.
let lowestPage = this.idList.getLowestLoadedPage();
let highestPage = this.idList.getHighestLoadedPage();
return page >= lowestPage-1 && page <= highestPage+1;
}
}
class UI extends Widget
{
constructor({dataSource, ...options})
{
super({ ...options, dataSource, template: \`
\`});
this.items = this.root.querySelector(".items");
/\x2f Listen to illust changes so we can refresh nodes.
ppixiv.mediaCache.addEventListener("mediamodified", this._mediaModified, { signal: this.shutdownSignal });
/\x2f Create the root item. This is TreeWidgetItem or a subclass.
if(addRoot)
{
let rootItem = new TreeWidgetItem({
parent: this,
label: "root",
rootItem: true,
});
this.setRootItem(rootItem);
}
}
_mediaModified = (e) =>
{
if(this.rootItem == null)
return;
for(let node of Object.values(this.rootItem.nodes))
{
if(node.illustChanged)
node.illustChanged(e.mediaId);
}
}
setRootItem(rootItem)
{
if(this.rootItem == rootItem)
return;
/\x2f If we have another root, remove it from this.items.
if(this.rootItem)
{
this.rootItem.root.remove();
this.rootItem = null;
}
this.rootItem = rootItem;
/\x2f Add the new root to this.items.
if(rootItem.root.parentNode != this.items)
{
console.assert(rootItem.parentNode == null);
this.items.appendChild(rootItem.root);
}
/\x2f Root nodes are always expanded.
rootItem.expanded = "user";
}
setSelectedItem(item)
{
if(this.selectedItem == item)
return;
this.selectedItem = item;
for(let node of this.root.querySelectorAll(".tree-item.selected"))
{
node.classList.remove("selected");
/\x2f Collapse any automatically-expanded nodes that we're navigating out of, as
/\x2f long as they're not an ancestor of the parent of the node we're expanding.
/\x2f We don't need to keep the item itself expanded.
node.widget._collapseAutoExpanded({untilAncestorOf: item?.parent});
}
if(item != null)
{
item.root.classList.add("selected");
/\x2f If the item isn't visible, center it.
/\x2f
/\x2f Bizarrely, while there's a full options dict for scrollIntoView and you
/\x2f can control horizontal and vertical scrolling separately, there's no "none"
/\x2f option so you can scroll vertically and not horizontally.
let scrollContainer = this.root;
let label = item.root.querySelector(".label");
let oldScrollLeft = scrollContainer.scrollLeft;
label.scrollIntoView({ block: "nearest" });
scrollContainer.scrollLeft = oldScrollLeft;
}
}
/\x2f Update the hover popup. This allows seeing the full label without needing
/\x2f a horizontal scroller, and lets us display a quick thumbnail.
setHover(item)
{
let img = this._thumbPopup.querySelector("img");
if(item == null)
{
/\x2f Remove the hover, and clear the image so it doesn't flicker the next time
/\x2f we display it.
img.src = helpers.other.blankImage;
this._labelPopup.remove();
this._thumbPopup.remove();
return;
}
let label = item.root.querySelector(".label");
let {top, left, bottom, height} = label.getBoundingClientRect();
/\x2f Set up thumbPopup.
if(item.path)
{
let {right} = this.root.getBoundingClientRect();
this._thumbPopup.style.left = \`\${right}px\`;
/\x2f If the label is above halfway down the screen, position the preview image
/\x2f below it. Otherwise, position it below. This keeps the image from overlapping
/\x2f the label. We don't know the dimensions of the image here.
let labelCenter = top + height/2;
let belowMiddle = labelCenter > window.innerHeight/2;
if(belowMiddle)
{
/\x2f Align the bottom of the image to the top of the label.
this._thumbPopup.style.top = \`\${top - 20}px\`;
img.style.objectPosition = "left bottom";
this._thumbPopup.style.transform = "translate(0, -100%)";
} else {
/\x2f Align the top of the image to the bottom of the label.
this._thumbPopup.style.top = \`\${bottom+20}px\`;
img.style.objectPosition = "left top";
this._thumbPopup.style.transform = "";
}
/\x2f Don't show a thumb for roots. Searches don't have thumbnails, and it's not useful
/\x2f for most others.
img.hidden = item.isRootItem;
img.crossOriginMode = "use-credentials";
if(!item.isRootItem)
{
/\x2f Use /tree-thumb for these thumbnails. They're the same as the regular thumbs,
/\x2f but it won't give us a folder image if there's no thumb.
let url = LocalAPI.localUrl;
url.pathname = "tree-thumb/" + item.path;
img.src = url;
img.addEventListener("img", (e) => { console.log("error"); img.hidden = true; });
}
document.body.appendChild(this._thumbPopup);
}
/\x2f Set up labelPopup.
{
this._labelPopup.style.left = \`\${left}px\`;
this._labelPopup.style.top = \`\${top}px\`;
/\x2f Match the padding of the label.
this._labelPopup.style.padding = getComputedStyle(label).padding;
this._labelPopup.querySelector(".label").innerText = item.label;
document.body.appendChild(this._labelPopup);
}
}
}
class TreeWidgetItem extends Widget
{
/\x2f If rootItem is true, this is the root item being created by a TreeWidget. Our
/\x2f parent is the TreeWidget and our container is TreeWidget.items.
/\x2f
/\x2f If rootItem is false (all items created by the user) and parent is a TreeWidget, our
/\x2f real parent is the TreeWidget's root item. Otherwise, parent is always another
/\x2f TreeWidgetItem.
constructor({
parent,
label,
rootItem=false,
/\x2f If true, this item might have children. The first time the user expands
/\x2f it, onexpand() will be called to populate it.
pending=false,
expandable=false,
...options
}={})
{
/\x2f If this isn't a root node and parent is a TreeWidget, use the TreeWidget's
/\x2f root node as our parent instead of the tree widget itself.
if(!rootItem && parent instanceof TreeWidget)
parent = parent.rootItem;
super({...options,
/\x2f The container is our parent node's item list.
container: parent.items,
template: \`
These settings will only affect this image, and aren't saved. Settings for
all images can be changed from settings.
\`,
});
settingsWidgets.translateThisImage();
}
settingsWidgets.translationLanguage();
settingsWidgets.translationTranslator();
/\x2f settingsWidgets.translationLowRes();
settingsWidgets.translationSize();
settingsWidgets.translationDirection();
settingsWidgets.retryTranslation();
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/image-translation.js
`),
"/vview/misc/key-storage.js": loadBlob("application/javascript",
`
/\x2f Originally from https:/\x2fgist.github.com/wilsonpage/01d2eb139959c79e0d9a
export default class KeyStorage
{
constructor(storeName, {upgradeDb=null, version=1}={})
{
this._dbName = storeName;
this._upgradeDb = upgradeDb;
this._storeName = storeName;
this._version = version;
this._failed = false;
}
/\x2f Open the database, run func, then close the database.
/\x2f
/\x2f If you open a database with IndexedDB and then leave it open, like you would with
/\x2f any other database, any attempts to add stores (which you can do seamlessly with
/\x2f any other database) will permanently wedge the database. We have to open it and
/\x2f close it around every op.
/\x2f
/\x2f If the database can't be opened, func won't be called and null will be returned.
async dbOp(func)
{
/\x2f Stop early if we've already failed, so we don't log an error for each op.
if(this._failed)
return null;
let db;
try {
db = await this._openDatabase();
} catch(e) {
console.log("Couldn't open database:", e);
this._failed = true;
return null;
}
try {
return await func(db);
} finally {
db.close();
}
}
async getDbVersion()
{
let dbs = await indexedDB.databases();
for(let db of dbs)
{
if(db.name == this._dbName)
return db.version;
}
return 0;
}
_openDatabase()
{
return new Promise((resolve, reject) => {
let request = indexedDB.open(this._dbName, this._version);
/\x2f If this happens, another tab has the database open.
request.onblocked = e => {
console.error("Database blocked:", e);
};
request.onupgradeneeded = e => {
/\x2f If we have a upgradeDb function, let it handle the upgrade. Otherwise, we're
/\x2f just creating the initial database and we're not doing anything special with it.
let db = e.target.result;
if(this._upgradeDb)
this._upgradeDb(e);
else
db.createObjectStore(this._storeName);
};
request.onsuccess = e => {
let db = e.target.result;
resolve(db);
};
request.onerror = e => {
reject(request.error);
};
});
}
getStore(db, mode="readwrite")
{
let transaction = db.transaction(this._storeName, mode);
return transaction.objectStore(this._storeName);
}
static awaitRequest(request)
{
return new Promise((resolve, reject) => {
let abort = new AbortController;
request.addEventListener("success", (e) => {
abort.abort();
resolve(request.result);
}, { signal: abort.signal });
request.addEventListener("error", (e) => {
abort.abort();
reject(request.result);
}, { signal: abort.signal });
});
}
static asyncStoreGet(store, key)
{
return new Promise((resolve, reject) => {
let request = store.get(key);
request.onsuccess = e => resolve(e.target.result);
request.onerror = reject;
});
}
async get(key, store)
{
return await this.dbOp(async (db) => {
return await KeyStorage.asyncStoreGet(this.getStore(db), key);
});
}
/\x2f Retrieve the values for a list of keys. Return a dictionary of {key: value}.
async multiGet(keys)
{
return await this.dbOp(async (db) => {
let store = this.getStore(db, "readonly");
let promises = [];
for(let key of keys)
promises.push(KeyStorage.asyncStoreGet(store, key));
return await Promise.all(promises);
}) ?? {};
}
static asyncStoreSet(store, key, value)
{
return new Promise((resolve, reject) => {
let request = store.put(value, key);
request.onsuccess = resolve;
request.onerror = reject;
});
}
async set(key, value)
{
return await this.dbOp(async (db) => {
return KeyStorage.asyncStoreSet(this.getStore(db), key, value);
});
}
/\x2f Given a dictionary, set all key/value pairs.
async multiSet(data)
{
return await this.dbOp(async (db) => {
let store = this.getStore(db);
let promises = [];
for(let [key, value] of Object.entries(data))
{
let request = store.put(value, key);
promises.push(KeyStorage.awaitRequest(request));
}
await Promise.all(promises);
});
}
async multiSetValues(data)
{
return await this.dbOp(async (db) => {
let store = this.getStore(db);
let promises = [];
for(let item of data)
{
let request = store.put(item);
promises.push(KeyStorage.awaitRequest(request));
}
return Promise.all(promises);
});
}
async delete(key)
{
return await this.dbOp(async (db) => {
let store = this.getStore(db);
return KeyStorage.awaitRequest(store.delete(key));
});
}
/\x2f Delete a list of keys.
async multiDelete(keys)
{
return await this.dbOp(async (db) => {
let store = this.getStore(db);
let promises = [];
for(let key of keys)
{
let request = store.delete(key);
promises.push(KeyStorage.awaitRequest(request));
}
return Promise.all(promises);
});
}
/\x2f Delete all keys.
async clear()
{
return await this.dbOp(async (db) => {
let store = this.getStore(db);
await store.clear();
});
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/key-storage.js
`),
"/vview/misc/local-api.js": loadBlob("application/javascript",
`/\x2f Helpers for the local API.
import Path from '/vview/util/path.js';
import { helpers } from '/vview/misc/helpers.js';
export default class LocalAPI
{
static get localUrl()
{
/\x2f If we're running natively, the API is on the same URL as we are.
if(!ppixiv.native)
return null;
return new URL("/", document.location);
}
/\x2f Return the URL path used by the UI.
static get path()
{
/\x2f When running natively, the path is just /.
if(ppixiv.native)
return "/";
else
return "/local/";
}
static async localPostRequest(pathname, data={}, options={})
{
let url = LocalAPI.localUrl;
if(url == null)
throw Error("Local API isn't enabled");
url.pathname = encodeURI(pathname);
let result = await helpers.pixivRequest.sendPixivRequest({
method: "POST",
url: url.toString(),
responseType: "json",
data: JSON.stringify(data),
signal: options.signal,
});
/\x2f If the result isn't valid JSON, we'll get a null result.
if(result == null)
result = { error: true, reason: "Invalid response" };
return result;
}
/\x2f Return true if the local API is enabled.
static isEnabled()
{
return LocalAPI.localUrl != null;
}
/\x2f Return true if we're running in VVbrowser.
static isVVbrowser()
{
return navigator.userAgent.indexOf("VVbrowser/") != -1;
}
/\x2f Load image info from the local API.
/\x2f
/\x2f If refreshFromDisk and this is a local file, ask the server to ignore cache and
/\x2f refresh from disk, even if it thinks it's not necessary.
static async loadMediaInfo(mediaId, { refreshFromDisk=false }={})
{
let mediaInfo = await LocalAPI.localPostRequest(\`/api/illust/\${mediaId}\`, {
refresh_from_disk: refreshFromDisk,
});
return mediaInfo;
}
static async loadRecentBookmarkTags()
{
let result = await LocalAPI.localPostRequest(\`/api/bookmark/tags\`);
if(!result.success)
{
console.log("Error fetching bookmark tag counts");
return;
}
let tags = [];
for(let tag of Object.keys(result.tags))
{
/\x2f Skip "untagged".
if(tag == "")
continue;
tags.push(tag);
}
tags.sort();
return tags;
}
/\x2f The local data source URL has two parts: the path and the file being viewed (if any).
/\x2f The file be absolute or relative to path.
/\x2f
/\x2f Path is args.hashPath, and file is args.hash.get("file").
/\x2f
/\x2f Changes to path result in a new data source, but changes to the file don't.
/\x2f
/\x2f Examples:
/\x2f
/\x2f #/images/pictures?path=vacation/day1
/\x2f
/\x2f The user searched inside /images/pictures, and is currently viewing the folder
/\x2f /images/pictures/vacation/day1.
/\x2f
/\x2f #/images/pictures?file=vacation/image.jpg
/\x2f
/\x2f The user searched inside /images/pictures, and is currently viewing the image
/\x2f vacation/image.jpg. This case is important: the path hasn't changed, so the data
/\x2f source is still the search, so you can mousewheel within the search.
static getArgsForId(mediaId, args)
{
/\x2f If we're navigating from a special page like /similar, ignore the previous
/\x2f URL and create a new one. Those pages can have their own URL formats.
if(args.path != LocalAPI.path || args.path != "/")
{
args.path = LocalAPI.path;
args.query = new URLSearchParams();
args.hash = new URLSearchParams();
args.hashPath = "/";
}
/\x2f The new path to set:
let { type, id: path } = helpers.mediaId.parse(mediaId);
if(type == "file")
{
/\x2f If file isn't underneath hashPath, set hashPath to the file's parent directory.
if(!args.hashPath || !Path.isRelativeTo(path, args.hashPath))
{
let parentFolderMediaId = LocalAPI.getParentFolder(mediaId);
args.hashPath = helpers.mediaId.parse(parentFolderMediaId).id;;
}
/\x2f Put the relative path from hashPath to file in "file".
let relativePath = Path.getRelativePath(args.hashPath, path);
args.hash.set("file", relativePath);
return args;
}
/\x2f This is a folder. Remove any file in the URL.
args.hash.delete("file");
/\x2f Remove the page when linking to a folder. Don't do this for files, since the
/\x2f page should be left in place when viewing an image.
args.query.delete("p");
args.hashPath = path;
return args;
}
/\x2f Get the local file or folder ID from a URL.
/\x2f
/\x2f Normally, a URL is a file if a "file" hash arg is present, otherwise it's
/\x2f a folder. If getFolder is true, return the folder, ignoring any file argument.
static getLocalIdFromArgs(args, { getFolder=false }={})
{
/\x2f Combine the hash path and the filename to get the local ID.
let root = args.hashPath;
let file = args.hash.get("file");
if(file == null || getFolder)
return "folder:" + root;
/\x2f The file can also be relative or absolute.
if(!file.startsWith("/"))
file = Path.getChild(root, file)
return "file:" + file;
}
/\x2f Return the API search options and title for the given URL.
static getSearchOptionsForArgs(args)
{
let searchOptions = { };
let title = null;
let search_root = helpers.strings.getPathSuffix(args.hashPath, 2);
if(args.hash.has("search"))
{
searchOptions.search = args.hash.get("search");
title = "Search: " + searchOptions.search;
}
if(args.hash.has("bookmark-tag"))
{
searchOptions.bookmarked = true;
searchOptions.bookmark_tags = args.hash.get("bookmark-tag");
if(searchOptions.bookmark_tags != "")
title = \`Bookmarks tagged \${searchOptions.bookmark_tags}\`;
else
title = \`Untagged bookmarks\`;
}
/\x2f We always enable bookmark searching if that's all we're allowed to do.
else if(args.hash.has("bookmarks") || LocalAPI.localInfo.bookmark_tag_searches_only)
{
searchOptions.bookmarked = true;
title = "Bookmarks";
}
if(args.hash.has("type"))
{
searchOptions.media_type = args.hash.get("type");
if(!title)
title = helpers.strings.titleCase(searchOptions.media_type);
}
if(args.hash.has("aspect-ratio"))
{
let range = args.hash.get("aspect-ratio");
searchOptions.aspect_ratio = helpers.strings.parseRange(range);
}
if(args.hash.has("pixels"))
{
let range = args.hash.get("pixels");
searchOptions.total_pixels = helpers.strings.parseRange(range);
}
if(title == null)
title = "Search";
title += \` inside \${search_root}\`;
/\x2f Clear searchOptions if it has no keys, to indicate that we're not in a search.
if(Object.keys(searchOptions).length == 0)
{
searchOptions = null;
/\x2f When there's no search, just show the current path as the title.
let folder_id = LocalAPI.getLocalIdFromArgs(args, { getFolder: true });
let { id } = helpers.mediaId.parse(folder_id);
title = helpers.strings.getPathSuffix(id);
}
return { searchOptions, title: title };
}
/\x2f Given a folder ID, return its parent. If folder_id is the root, return null.
static getParentFolder(mediaId)
{
if(mediaId == null || mediaId == "folder:/")
return null;
/\x2f mediaId can be a file or a folder. We always return a folder.
let { id } = helpers.mediaId.parse(mediaId);
let parts = id.split("/");
if(parts.length == 2)
return "folder:/"; /\x2f return folder:/, not folder:
parts.splice(parts.length-1, 1);
return "folder:" + parts.join("/");
}
/\x2f Load access info. We always reload when this changes, eg. due to logging in
/\x2f or out, so we cache this at startup.
static async loadLocalInfo()
{
if(LocalAPI.localUrl == null)
return;
this._cachedApiInfo = await LocalAPI.localPostRequest(\`/api/info\`);
}
static get localInfo()
{
let info = this._cachedApiInfo;
if(LocalAPI.localUrl == null)
info = { success: false, code: "disabled" };
return {
/\x2f True if the local API is enabled at all.
enabled: LocalAPI.localUrl != null,
/\x2f True if we're running on localhost. If we're local, we're always logged
/\x2f in and we won't show the login/logout buttons.
local: info.success && info.local,
/\x2f True if we're logged in as a non-guest user.
logged_in: info.success && info.username != "guest",
/\x2f True if we're logged out and guest access is disabled, so we need to log
/\x2f in to continue.
loginRequired: !info.success && info.code == 'access-denied',
/\x2f True if we can only do bookmark tag searches.
bookmark_tag_searches_only: info.tags != null,
}
}
/\x2f Return true if we're running on localhost. If we're local, we're always logged
/\x2f in and we won't show the login/logout buttons.
static async isLocal()
{
let info = await LocalAPI.localPostRequest(\`/api/info\`);
return info.local;
}
/\x2f Return true if we should load thumbnails for image viewing.
/\x2f
/\x2f We normally preload thumbnails for images, so we have something to display immediately
/\x2f when we view an image. This is useful on Pixiv, since they have all of their thumbs
/\x2f cached and loading them is free.
/\x2f
/\x2f However, if we're local and running on desktop, the browser is usually running on the
/\x2f same PC as the server, and the server doesn't have thumbnails cached, so requesting it
/\x2f will cause the image to be decoded and resized in the server. That means we'll just end
/\x2f up decoding every image twice if we do this.
/\x2f
/\x2f If we're local but running on mobile, do preload thumbs. It's important to have images
/\x2f viewable at least in preview as quickly as possible to minimize gaps in the mobile UI,
/\x2f and the PC running the server is probably much faster than a tablet, which may take some
/\x2f time to decode larger images.
static shouldPreloadThumbs(mediaId, url)
{
if(ppixiv.mobile)
return true;
if(!helpers.mediaId.isLocal(mediaId))
return true;
/\x2f If we know the image was viewed in search results recently, it should be cached, so
/\x2f there's no harm in using it. We could query whether the URL is cached with fetch's
/\x2f cache: only-if-cached argument, but that causes browsers to obnoxiously spam the console
/\x2f with errors every time it fails. That doesn't make sense (errors are normal with
/\x2f only-if-cached) and the log spam is too annoying to use it here.
if(url != null && LocalAPI._wasThumbnailLoadedRecently(url))
return true;
/\x2f We're on desktop, the image is local, and the thumbnail hasn't been loaded recently.
return false;
}
/\x2f Return true if we're logged out and guest access is disabled, so we need to log
/\x2f in to continue.
static async loginRequired()
{
/\x2f If we're not logged in and guest access is disabled, all API calls will
/\x2f fail with access-denied. Call api/info to check this.
let info = await LocalAPI.localPostRequest(\`/api/info\`);
return !info.success && info.code == 'access-denied';
}
/\x2f Return true if we're logged in as a non-guest user.
static async loggedIn()
{
let info = await LocalAPI.localPostRequest(\`/api/info\`);
console.log(info);
return info.success && info.username != "guest";
}
/\x2f Log out if we're logged in, and redirect to the login page.
static redirectToLogin()
{
let query = new URLSearchParams();
query.set("url", document.location.href);
/\x2f Replace the current history entry. This pushes any history state to the
/\x2f login page. It'll preserve it after logging in and redirecting back here,
/\x2f so we'll try to retain it.
let loginUrl = "/vview/resources/auth.html?" + query.toString();
window.history.replaceState(history.state, "", loginUrl.toString());
document.location.reload();
}
/\x2f Log out and reload the page.
static logout()
{
document.cookie = \`auth_token=; max-age=0; path=/\`;
document.location.reload();
}
/\x2f This stores searches like SavedSearchTags. It's simpler, since this is the
/\x2f only place these searches are added.
static addRecentLocalSearch(tag)
{
let recentTags = ppixiv.settings.get("local_searches") || [];
let idx = recentTags.indexOf(tag);
if(idx != -1)
recentTags.splice(idx, 1);
recentTags.unshift(tag);
ppixiv.settings.set("local_searches", recentTags);
window.dispatchEvent(new Event("recent-local-searches-changed"));
}
/\x2f Navigate to a search, usually entered into the tag search box.
static navigateToTagSearch(tags, { addToHistory=true}={})
{
tags = tags.trim();
if(tags.length == 0)
tags = null;
/\x2f Add this tag to the recent search list.
if(addToHistory && tags)
LocalAPI.addRecentLocalSearch(tags);
/\x2f Run the search. We expect to be on the local data source when this is called.
let args = new helpers.args(ppixiv.plocation);
console.assert(args.path == LocalAPI.path);
if(tags)
args.hash.set("search", tags);
else
args.hash.delete("search");
args.set("p", null);
helpers.navigate(args);
}
static async indexFolderForSimilaritySearch(mediaId)
{
let { type, id } = helpers.mediaId.parse(mediaId);
if(type != "folder")
{
console.log(\`Not a folder: \${mediaId}\`);
return;
}
let result = await LocalAPI.localPostRequest(\`/api/similar/index\`, {
path: id,
});
if(!result.success)
{
ppixiv.message.show(\`Error indexing \${id}: \${result.reason}\`);
return;
}
ppixiv.message.show(\`Begun indexing \${id} for similarity searching\`);
}
/\x2f Remember that we've loaded a thumbnail this session.
static thumbnailWasLoaded(url)
{
this._thumbnailsLoadedRecently ??= new Set();
this._thumbnailsLoadedRecently.add(url);
}
/\x2f Return true if we've loaded a thumbnail this session. This is used to optimize image display.
static _wasThumbnailLoadedRecently(url)
{
return this._thumbnailsLoadedRecently && this._thumbnailsLoadedRecently.has(url);
}
}
/\x2f LocalBroadcastChannel implements the same API as BroadcastChannel, but sends messages
/\x2f over the local WebSockets connection. This allows sending messages across browsers and
/\x2f machines. If the local API isn't enabled, this is just a wrapper around BroadcastChannel.
export class LocalBroadcastChannel extends EventTarget
{
constructor(name)
{
super();
this.name = name;
LocalBroadcastChannelConnection.get.addEventListener(this.name, this.receivedWebSocketsMessage);
/\x2f Create a regular BroadcastChannel. Other tabs in the same browser will receive
/\x2f messages through this, so they don't need to round-trip through WebSockets.
this.broadcastChannel = new BroadcastChannel(this.name);
this.broadcastChannel.addEventListener("message", this.receivedBroadcastChannelMessage);
}
/\x2f Handle a message received over WebSockets.
receivedWebSocketsMessage = (e) =>
{
let event = new MessageEvent("message", { data: e.data });
this.dispatchEvent(event);
}
/\x2f Handle a message received over BroadcastChannel.
receivedBroadcastChannelMessage = (e) =>
{
let event = new MessageEvent("message", { data: e.data });
this.dispatchEvent(event);
}
postMessage(data)
{
LocalBroadcastChannelConnection.get.send(this.name, data);
this.broadcastChannel.postMessage(data);
}
close()
{
LocalBroadcastChannelConnection.get.removeEventListener(this.name, this.receivedWebSocketsMessage);
this.broadcastChannel.removeEventListener("message", this.receivedBroadcastChannelMessage);
}
};
/\x2f This creates a single WebSockets connection to the local server. An event is dispatched
/\x2f with the name of the channel when a WebSockets message is received.
class LocalBroadcastChannelConnection extends EventTarget
{
static get get()
{
if(this.singleton == null)
this.singleton = new LocalBroadcastChannelConnection();
return this.singleton;
}
constructor()
{
super();
/\x2f This is only used if the local API is enabled.
if(!LocalAPI.isEnabled())
return;
/\x2f If messages are sent while we're still connecting, or if the buffer is full,
/\x2f they'll be buffered until we can send it. Buffered messages will be discarded
/\x2f if connecting fails.
this._sendBuffer = [];
this._reconnectionAttempts = 0;
/\x2f If we're disconnected, try to reconnect immediately if the window gains focus.
window.addEventListener("focus", () => {
this._queueReconnect({ reset: true });
});
/\x2f Store a random ID in localStorage to identify this browser. This is sent to the
/\x2f WebSockets server, so it knows not to send broadcasts to clients running in the
/\x2f same browser, which will receive the messages much faster through a regular
/\x2f BroadcastChannel.
this._browserId = ppixiv.settings.get("browser_id");
if(this._browserId == null)
{
this._browserId = helpers.other.createUuid();
ppixiv.settings.set("browser_id", this._browserId);
console.log("Assigned broadcast browser ID:", this._browserId);
}
this.connect();
}
connect()
{
/\x2f Close the connection if it's still open.
this.disconnect();
let url = new URL("/ws", LocalAPI.localUrl);
url.protocol = document.location.protocol == "https:"? "wss":"ws";
this.ws = new WebSocket(url);
this.ws.onopen = this.wsOpened;
this.ws.onclose = this.wsClosed;
this.ws.onerror = this.wsError;
this.ws.onmessage = this.wsMessageReceived;
}
disconnect()
{
if(this.ws == null)
return;
this.ws.close();
this.ws = null;
}
/\x2f Queue a reconnection after a connection error. If reset is true, reset reconnection
/\x2f attempts and attempt to reconnect immediately.
_queueReconnect({reset=false}={})
{
if(this.ws != null)
return;
if(!reset && this.reconnectId != null)
return;
if(reset)
{
/\x2f Cancel any queued reconnection.
if(this.reconnectId != null)
{
realClearTimeout(this.reconnectId);
this.reconnectId = null;
}
}
if(reset)
this._reconnectionAttempts = 0;
else
this._reconnectionAttempts++;
this._reconnectionAttempts = Math.min(this._reconnectionAttempts, 5);
let reconnectDelay = Math.pow(this._reconnectionAttempts, 2);
/\x2f console.log("Reconnecting in", reconnectDelay);
this.reconnectId = realSetTimeout(() => {
this.reconnectId = null;
this.connect();
}, reconnectDelay*1000);
}
wsOpened = async(e) =>
{
console.log("WebSockets connection opened");
/\x2f Cancel any queued reconnection.
if(this.reconnectId != null)
{
realClearTimeout(this.reconnectId);
this.reconnectId = null;
}
this._reconnectionAttempts = 0;
/\x2f Tell the server our browser ID. This is used to prevent sending messages back
/\x2f to the same browser.
this._sendRaw({
'command': 'init',
'browser_id': this._browserId,
});
/\x2f Send any data that was buffered while we were still connecting.
this._sendBufferedData();
}
wsClosed = async(e) =>
{
console.log("WebSockets connection closed", e, e.wasClean, e.reason);
this.disconnect();
this._queueReconnect();
}
/\x2f We'll also get onclose on connection error, so we don't need to _queueReconnect
/\x2f here.
wsError = (e) =>
{
console.log("WebSockets connection error");
}
wsMessageReceived = (e) =>
{
let message = JSON.parse(e.data);
if(message.command != "receive-broadcast")
{
console.error(\`Unknown WebSockets command: \${message.command}\`);
return;
}
let event = new MessageEvent(message.message.channel, { data: message.message.data });
this.dispatchEvent(event);
};
/\x2f Send a WebSockets message on the given channel name.
send(channel, message)
{
if(!LocalAPI.isEnabled())
return;
let data = {
'command': 'send-broadcast',
'browser_id': this._browserId,
'message': {
'channel': channel,
'data': message,
},
};
this._sendBuffer.push(data);
this._sendBufferedData();
}
/\x2f Send a raw message directly, without buffering.
_sendRaw(data)
{
this.ws.send(JSON.stringify(data, null, 4));
}
/\x2f Send data buffered in _sendBuffer.
_sendBufferedData()
{
if(this.ws == null)
return;
while(this._sendBuffer.length > 0)
{
/\x2f This API wasn't thought through. It tells us how much data is buffered, but not
/\x2f what the maximum buffer size is. If the buffer fills, instead of returning an
/\x2f error, it just unceremoniously kills the connection. There's also no event to
/\x2f tell us that buffered data has been sent, so you'd have to poll on a timer. It's
/\x2f a mess.
if(this.ws.bufferedAmount > 1024*1024 || this.ws.readyState != 1)
break;
/\x2f Send the next buffered message.
let data = this._sendBuffer.shift();
this._sendRaw(data);
}
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/local-api.js
`),
"/vview/misc/media-cache-mappings.js": loadBlob("application/javascript",
`import { helpers } from '/vview/misc/helpers.js';
export default class MediaCacheMappings
{
/\x2f Get the mapping from /ajax/user/id/illusts/bookmarks to illust_list.php's keys.
static _thumbnailInfoMapIllustList =
[
["illust_id", "id"],
["url", "url"],
["tags", "tags"],
["illust_user_id", "userId"],
["illust_width", "width"],
["illust_height", "height"],
["illust_type", "illustType"],
["illust_page_count", "pageCount"],
["illust_title", "illustTitle"],
["user_profile_img", "profileImageUrl"],
["user_name", "userName"],
/\x2f illust_list.php doesn't give the creation date, and it doesn't have the aiType field.
[null, "createDate"],
[null, "aiType"],
];
static _thumbnailInfoMapRanking = [
["illust_id", "id"],
["url", "url"],
["tags", "tags"],
["user_id", "userId"],
["width", "width"],
["height", "height"],
["illust_type", "illustType"],
["illust_page_count", "pageCount"],
["title", "illustTitle"],
["profile_img", "profileImageUrl"],
["user_name", "userName"],
["illust_upload_timestamp", "createDate"],
/\x2f Rankings don't return aiType, but we fill it in ourself in the data source.
["aiType", "aiType"],
];
/\x2f Partial media info comes from Pixiv search APIs. They all have different formats
/\x2f for the same data. Remap it to our standardized format, which uses the same fields
/\x2f as full media info.
/\x2f
/\x2f name URL
/\x2f normal /ajax/user/id/illusts/bookmarks
/\x2f illust_list illust_list.php
/\x2f following bookmark_new_illust.php
/\x2f following search.php
/\x2f rankings ranking.php
/\x2f
/\x2f We map each of these to "normal".
static remapPartialMediaInfo(mediaInfo, source)
{
let remappedMediaInfo = null;
if(source == "normal")
{
/\x2f The data is already in the format we want. The only change we make is
/\x2f to rename title to illustTitle, to match it up with illust info.
if(!("title" in mediaInfo))
{
console.warn("Thumbnail info is missing key: title");
}
else
{
mediaInfo.illustTitle = mediaInfo.title;
delete mediaInfo.title;
}
/\x2f Check that all keys we expect exist, and remove any keys we don't know about
/\x2f so we don't use them accidentally.
let thumbnailInfoMap = this._thumbnailInfoMapRanking;
remappedMediaInfo = { };
for(let pair of thumbnailInfoMap)
{
let key = pair[1];
if(!(key in mediaInfo))
{
console.warn("Thumbnail info is missing key:", key);
continue;
}
remappedMediaInfo[key] = mediaInfo[key];
}
if(!('bookmarkData' in mediaInfo))
console.warn("Thumbnail info is missing key: bookmarkData");
else
{
remappedMediaInfo.bookmarkData = mediaInfo.bookmarkData;
/\x2f See above.
if(remappedMediaInfo.bookmarkData != null)
delete remappedMediaInfo.bookmarkData.bookmarkId;
}
}
else if(source == "illust_list" || source == "rankings")
{
/\x2f Get the mapping for this mode.
let thumbnailInfoMap =
source == "illust_list"? this._thumbnailInfoMapIllustList:
this._thumbnailInfoMapRanking;
remappedMediaInfo = { };
for(let pair of thumbnailInfoMap)
{
let fromKey = pair[0];
let toKey = pair[1];
if(fromKey == null)
{
/\x2f This is just for illust_list createDate.
remappedMediaInfo[toKey] = null;
continue;
}
if(!(fromKey in mediaInfo))
{
console.warn("Thumbnail info is missing key:", fromKey);
continue;
}
let value = mediaInfo[fromKey];
remappedMediaInfo[toKey] = value;
}
/\x2f Make sure that the illust IDs and user IDs are strings.
remappedMediaInfo.id = "" + remappedMediaInfo.id;
remappedMediaInfo.userId = "" + remappedMediaInfo.userId;
/\x2f Bookmark data is a special case.
/\x2f
/\x2f The old API has is_bookmarked: true, bookmark_id: "id" and bookmark_illust_restrict: 0 or 1.
/\x2f bookmark_id and bookmark_illust_restrict are omitted if is_bookmarked is false.
/\x2f
/\x2f The new API is a dictionary:
/\x2f
/\x2f bookmarkData = {
/\x2f bookmarkId: id,
/\x2f private: false
/\x2f }
/\x2f
/\x2f or null if not bookmarked.
/\x2f
/\x2f A couple sources of thumbnail data (bookmark_new_illust.php and search.php)
/\x2f don't return the bookmark ID. We don't use this (we only edit bookmarks from
/\x2f the image page, where we have full image data), so we omit bookmarkId from this
/\x2f data.
/\x2f
/\x2f Some pages return buggy results. /ajax/user/id/profile/all includes bookmarkData,
/\x2f but private is always false, so we can't tell if it's a private bookmark. This is
/\x2f a site bug that we can't do anything about (it affects the site too).
remappedMediaInfo.bookmarkData = null;
if(!('is_bookmarked' in mediaInfo))
console.warn("Thumbnail info is missing key: is_bookmarked");
if(mediaInfo.is_bookmarked)
{
remappedMediaInfo.bookmarkData = {
/\x2f See above.
/\x2f bookmarkId: mediaInfo.bookmark_id,
private: mediaInfo.bookmark_illust_restrict == 1,
};
}
/\x2f illustType can be a string in these instead of an int, so convert it.
remappedMediaInfo.illustType = parseInt(remappedMediaInfo.illustType);
if(source == "rankings")
{
/\x2f Rankings thumbnail info gives createDate as a Unix timestamp. Convert
/\x2f it to the same format as everything else.
let date = new Date(remappedMediaInfo.createDate*1000);
remappedMediaInfo.createDate = date.toISOString();
}
else if(source == "illust_list")
{
/\x2f This is the only source of thumbnail data that doesn't give createDate at
/\x2f all. This source is very rarely used now, so just fill in a bogus date.
remappedMediaInfo.createDate = new Date(0).toISOString();
}
}
else if(source == "internal")
{
remappedMediaInfo = mediaInfo;
}
else
throw "Unrecognized source: " + source;
/\x2f "internal" is for thumbnail data which is already processed.
if(source != "internal")
{
/\x2f These fields are strings in some sources. Switch them to ints.
for(let key of ["pageCount", "width", "height"])
{
if(remappedMediaInfo[key] != null)
remappedMediaInfo[key] = parseInt(remappedMediaInfo[key]);
}
/\x2f Different APIs return different thumbnail URLs.
remappedMediaInfo.url = helpers.pixiv.getHighResThumbnailUrl(remappedMediaInfo.url);
/\x2f Create a list of thumbnail URLs.
remappedMediaInfo.previewUrls = [];
for(let page = 0; page < remappedMediaInfo.pageCount; ++page)
{
let url = helpers.pixiv.getHighResThumbnailUrl(remappedMediaInfo.url, page);
remappedMediaInfo.previewUrls.push(url);
}
/\x2f Rename .tags to .tagList, for consistency with the flat tag list in illust info.
remappedMediaInfo.tagList = remappedMediaInfo.tags;
delete remappedMediaInfo.tags;
/\x2f Put id in illustId and set mediaId. This matches what we do in illust_data.
remappedMediaInfo.illustId = remappedMediaInfo.id;
remappedMediaInfo.mediaId = helpers.mediaId.fromIllustId(remappedMediaInfo.illustId);
delete remappedMediaInfo.id;
}
/\x2f This is really annoying: the profile picture is the only field that's present in thumbnail
/\x2f info but not illust info. We want a single basic data set for both, so that can't include
/\x2f the profile picture. But, we do want to display it in places where we can't get user
/\x2f info (muted search results), so store it separately.
let profileImageUrl = null;
if(remappedMediaInfo.profileImageUrl)
{
profileImageUrl = remappedMediaInfo.profileImageUrl;
profileImageUrl = profileImageUrl.replace("_50.", "_170."),
delete remappedMediaInfo.profileImageUrl;
}
return { remappedMediaInfo, profileImageUrl };
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/media-cache-mappings.js
`),
"/vview/misc/media-cache.js": loadBlob("application/javascript",
`/\x2f This stores loaded info about images.
/\x2f
/\x2f Image info can be full or partial. Partial image info comes from Pixiv search APIs,
/\x2f and only includes a subset of info. This is returned by a bunch of APIs that all
/\x2f use different names for the same thing, so we remap them to a format consistent with
/\x2f full image info. We also store image info for the local API here, which is always full
/\x2f info.
/\x2f
/\x2f Full image info also includes manga page info and animation info. These require separate
/\x2f API calls. We always load that data, since we almost always need it.
/\x2f
/\x2f This also includes extra image info, which is used for storing image edits. This is stored
/\x2f in IDB for Pixiv images, and natively by the local API.
/\x2f
/\x2f Bookmark tags aren't handled here. It requires a separate API call to load and we don't
/\x2f always need it, so it doesn't fit here. See ppixiv.extraCache.loadBookmarkDetails.
/\x2f
/\x2f Callers can request full or partial data. If partial data is requested, we can return
/\x2f full data instead if we already have it, since it's a superset. If we have to load info
/\x2f for a single image, we'll always load full info. We can only batch load partial info,
/\x2f since Pixiv doesn't have any API to allow batch loading full info.
/\x2f
/\x2f Our media IDs encode Pixiv manga pages, but this only deals with top-level illustrations, and
/\x2f the page number in illust media IDs is always 1 here.
import LocalAPI from '/vview/misc/local-api.js';
import MediaCacheMappings from '/vview/misc/media-cache-mappings.js';
import MediaInfo, { MediaInfoEvents } from '/vview/misc/media-info.js';
import { helpers } from '/vview/misc/helpers.js';
/\x2f This handles fetching and caching image data.
export default class MediaCache extends EventTarget
{
constructor()
{
super();
/\x2f Cached data:
this._mediaInfo = { };
/\x2f Negative cache to remember illusts that don't exist, so we don't try to
/\x2f load them repeatedly:
this._nonexistantMediaIds = { };
/\x2f Promises for ongoing requests:
this._mediaInfoLoadsFull = {};
this._mediaInfoLoadsPartial = {};
this.userProfileUrls = {};
ppixiv.settings.addEventListener("pixiv_cdn", () => this._updatePixivURLs());
/\x2f XXX: remove
MediaInfoEvents.addEventListener("mediamodified", (e) => {
let event = new Event("mediamodified");
event.mediaId = e.mediaId;
this.dispatchEvent(event);
});
};
/\x2f Load media data asynchronously. If full is true, return full info, otherwise return
/\x2f partial info.
/\x2f
/\x2f If partial info is requested and we have full info, we'll reduce it to partial info if
/\x2f safe is true, otherwise we'll just return full info. This helps avoid requesting
/\x2f partial info and then accidentally using fields from full info.
async getMediaInfo(mediaId, { full=true, safe=true }={})
{
let mediaInfo = await this._getMediaInfoInner(mediaId, { full });
if(mediaInfo != null && !full && safe)
mediaInfo = mediaInfo.partialInfo;
return mediaInfo;
}
_getMediaInfoInner(mediaId, { full=true }={})
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
if(mediaId == null)
return null;
/\x2f Stop if we know this illust doesn't exist.
if(mediaId in this._nonexistantMediaIds)
return null;
/\x2f If we already have the image data, just return it.
if(this._mediaInfo[mediaId] != null && (!full || this._mediaInfo[mediaId].full))
return Promise.resolve(this._mediaInfo[mediaId]);
/\x2f If there's already a load in progress, wait for the running promise. Note that this
/\x2f promise will add to this._mediaInfo if it succeeds, but it won't necessarily return
/\x2f the data directly since it may be a batch load.
if(this._mediaInfoLoadsFull[mediaId] != null)
return this._mediaInfoLoadsFull[mediaId].then(() => this._mediaInfo[mediaId]);
if(!full && this._mediaInfoLoadsPartial[mediaId] != null)
return this._mediaInfoLoadsPartial[mediaId].then(() => this._mediaInfo[mediaId]);
/\x2f Start the load. If something's requesting partial info for a single image
/\x2f then we'll almost always need full info too, so we always just load full info
/\x2f here.
let loadPromise = this._loadMediaInfo(mediaId);
this._startedLoadingMediaInfoFull(mediaId, loadPromise);
return loadPromise;
}
/\x2f Like getMediaInfo, but return the result immediately, or null if it's not
/\x2f already loaded.
getMediaInfoSync(mediaId, { full=true, safe=true }={})
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
let mediaInfo = this._mediaInfo[mediaId];
/\x2f If full info was requested and we only have partial info, don't return it.
if(full && !mediaInfo?.full)
return null;
if(mediaInfo && !full && safe)
mediaInfo = mediaInfo.partialInfo;
return mediaInfo;
}
/\x2f If getMediaInfo returned null, return the error message.
getMediaLoadError(mediaId)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
return this._nonexistantMediaIds[mediaId];
}
/\x2f Refresh media info for the given media ID.
/\x2f
/\x2f If an image only has partial info loaded, this will cause its full info to be loaded.
/\x2f
/\x2f refreshFromDisk: If true, ask the server to reload from disk even if it thinks the file
/\x2f hasn't changed.
async refreshMediaInfo(mediaId, { refreshFromDisk=false }={})
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
await this._loadMediaInfo(mediaId, { refreshFromDisk });
}
/\x2f Add full media info from a Pixiv API response. This will trigger loads for any
/\x2f missing data, like manga info.
addPixivFullMediaInfo(mediaInfo)
{
let mediaId = helpers.mediaId.fromIllustId(mediaInfo.id);
let loadPromise = this._loadMediaInfo(mediaId, { mediaInfo });
this._startedLoadingMediaInfoFull(mediaId, loadPromise);
return loadPromise;
}
_startedLoadingMediaInfoFull(mediaId, loadPromise)
{
/\x2f Remember that we're loading this ID, and unregister it when it completes.
this._mediaInfoLoadsFull[mediaId] = loadPromise;
this._mediaInfoLoadsFull[mediaId].finally(() => {
if(this._mediaInfoLoadsFull[mediaId] === loadPromise)
delete this._mediaInfoLoadsFull[mediaId];
});
}
_startedLoadingMediaInfoPartial(mediaId, loadPromise)
{
/\x2f Remember that we're loading this ID, and unregister it when it completes.
this._mediaInfoLoadsPartial[mediaId] = loadPromise;
this._mediaInfoLoadsPartial[mediaId].finally(() => {
if(this._mediaInfoLoadsPartial[mediaId] === loadPromise)
delete this._mediaInfoLoadsPartial[mediaId];
});
}
/\x2f Load mediaId and all data that it depends on.
/\x2f
/\x2f If we already have the image data (not necessarily the rest, like ugoira_metadata),
/\x2f it can be supplied with mediaInfo.
async _loadMediaInfo(mediaId, { mediaInfo=null, refreshFromDisk=false }={})
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
let [illustId] = helpers.mediaId.toIllustIdAndPage(mediaId);
delete this._nonexistantMediaIds[mediaId];
/\x2f If this is a local image, use our API to retrieve it.
if(helpers.mediaId.isLocal(mediaId))
return await this._loadLocalImageData(mediaId, { refreshFromDisk });
/\x2f console.log("Fetching", mediaId);
let mangaPromise = null;
let ugoiraPromise = null;
/\x2f Given an illustType, start any fetches we can.
let startLoading = (illustType, pageCount) => {
/\x2f If we know the illust type and haven't started loading other data yet, start them.
if(pageCount != null && pageCount > 1 && mangaPromise == null && mediaInfo?.mangaPages == null)
mangaPromise = helpers.pixivRequest.get(\`/ajax/illust/\${illustId}/pages\`, {});
if(illustType == 2 && ugoiraPromise == null && (mediaInfo == null || mediaInfo.ugoiraMetadata == null))
ugoiraPromise = helpers.pixivRequest.get(\`/ajax/illust/\${illustId}/ugoira_meta\`);
};
/\x2f If we already had partial info, we can start loading other metadata immediately instead
/\x2f of waiting for the illust info to load, since we already know the image type.
let partialInfo = this._mediaInfo[mediaId];
if(partialInfo != null)
startLoading(partialInfo.illustType, partialInfo.pageCount);
/\x2f If we don't have illust data, block while it loads.
if(mediaInfo == null)
{
let illustResultPromise = helpers.pixivRequest.get(\`/ajax/illust/\${illustId}\`, {});
let illustResult = await illustResultPromise;
if(illustResult == null || illustResult.error)
{
let message = illustResult?.message || "Error loading illustration";
console.log(\`Error loading illust \${illustId}; \${message}\`);
this._nonexistantMediaIds[mediaId] = message;
return null;
}
mediaInfo = illustResult.body;
}
ppixiv.tagTranslations.addTranslations(mediaInfo.tags.tags);
/\x2f If we have extra data stored for this image, load it.
let extraData = await ppixiv.extraImageData.loadAllPagesForIllust(illustId);
mediaInfo.extraData = extraData;
/\x2f Now that we have illust data, load anything we weren't able to load before.
startLoading(mediaInfo.illustType, mediaInfo.pageCount);
/\x2f Add an array of thumbnail URLs.
mediaInfo.previewUrls = [];
for(let page = 0; page < mediaInfo.pageCount; ++page)
{
let url = helpers.pixiv.getHighResThumbnailUrl(mediaInfo.urls.small, page);
mediaInfo.previewUrls.push(url);
}
/\x2f Add a flattened tag list.
mediaInfo.tagList = [];
for(let tag of mediaInfo.tags.tags)
mediaInfo.tagList.push(tag.tag);
if(mangaPromise != null)
{
let mangaInfo = await mangaPromise;
mediaInfo.mangaPages = mangaInfo.body;
}
if(ugoiraPromise != null)
{
let ugoiraResult = await ugoiraPromise;
mediaInfo.ugoiraMetadata = ugoiraResult.body;
}
else
mediaInfo.ugoiraMetadata = null;
this._updateMediaInfoUrls(mediaInfo);
/\x2f If this is a single-page image, create a dummy single-entry mangaPages array. This lets
/\x2f us treat all images the same.
if(mediaInfo.pageCount == 1)
{
mediaInfo.mangaPages = [{
width: mediaInfo.width,
height: mediaInfo.height,
/\x2f Rather than just referencing mediaInfo.urls, copy just the image keys that
/\x2f exist in the regular mangaPages list (no thumbnails).
urls: {
original: mediaInfo.urls.original,
regular: mediaInfo.urls.regular,
small: mediaInfo.urls.small,
}
}];
}
/\x2f Try to find the user's avatar URL. userIllusts contains a list of the user's illust IDs,
/\x2f and only three have thumbnail data, probably for UI previews. For some reason these don't
/\x2f always contain profileImageUrl, but usually one or two of the three do. Cache it if it's
/\x2f there so it's ready for AvatarWidget if possible.
if(mediaInfo.userIllusts)
{
for(let userIllustData of Object.values(mediaInfo.userIllusts))
{
if(userIllustData?.profileImageUrl == null)
continue;
let { profileImageUrl } = MediaCacheMappings.remapPartialMediaInfo(userIllustData, "normal");
if(profileImageUrl)
this.cacheProfilePictureUrl(mediaInfo.userId, profileImageUrl);
}
}
/\x2f Remember that this is full info.
mediaInfo.full = true;
/\x2f The image data has both "id" and "illustId" containing the image ID. Remove id to
/\x2f make sure we only use illustId, and set mediaId. This makes it clear what type of
/\x2f ID you're getting.
mediaInfo.mediaId = mediaId;
delete mediaInfo.id;
delete mediaInfo.userIllusts;
ppixiv.guessImageUrl.addInfo(mediaInfo);
return this.addFullMediaInfo(mediaInfo);
}
/\x2f Update URLs for all cached images after a change to the pixiv_cdn setting.
_updatePixivURLs()
{
for(let mediaInfo of Object.values(this._mediaInfo))
this._updateMediaInfoUrls(mediaInfo);
for(let mediaId of Object.keys(this._mediaInfo))
MediaInfo.callMediaInfoModifiedCallbacks(mediaId);
}
/\x2f Update URLs in mediaInfo that are affected by adjustImageUrlHostname. This can be called
/\x2f again if the pixiv_cdn setting changes.
_updateMediaInfoUrls(mediaInfo)
{
if(mediaInfo.urls)
{
for(let [key, url] of Object.entries(mediaInfo.urls))
{
url = new URL(url);
mediaInfo.urls[key] = helpers.pixiv.adjustImageUrlHostname(url).toString();
}
}
if(mediaInfo.previewUrls)
{
for(let page = 0; page < mediaInfo.previewUrls.length; ++page)
{
let url = mediaInfo.previewUrls[page];
mediaInfo.previewUrls[page] = helpers.pixiv.adjustImageUrlHostname(url).toString();
}
}
if(mediaInfo.mangaPages)
{
for(let page of mediaInfo.mangaPages)
{
for(let [key, url] of Object.entries(page.urls))
{
url = helpers.pixiv.adjustImageUrlHostname(url);
page.urls[key] = url.toString();
}
}
}
if(mediaInfo.ugoiraMetadata)
{
/\x2f Switch the data URL to i-cf..pximg.net.
let url = new URL(mediaInfo.ugoiraMetadata.originalSrc);
url = helpers.pixiv.adjustImageUrlHostname(url);
mediaInfo.ugoiraMetadata.originalSrc = url.toString();
}
}
/\x2f Load partial info for the given media IDs if they're not already loaded.
/\x2f
/\x2f If userId is set, mediaIds is known to be all posts from the same user. This
/\x2f lets us use a better API.
async batchGetMediaInfoPartial(mediaIds, { force=false, userId=null }={})
{
let promises = [];
let neededMediaIds = [];
let localMediaIds = [];
for(let mediaId of mediaIds)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
/\x2f If we're not forcing a refresh, skip this ID if it's already loaded.
if(!force && this._mediaInfo[mediaId] != null)
continue;
/\x2f Ignore media IDs that have already failed to load.
if(!force && this._nonexistantMediaIds[mediaId])
continue;
/\x2f Skip IDs that are already loading.
let existingLoad = this._mediaInfoLoadsFull[mediaId] ?? this._mediaInfoLoadsPartial[mediaId];
if(existingLoad)
{
promises.push(existingLoad);
continue;
}
/\x2f Only load local IDs and illust IDs.
let { type } = helpers.mediaId.parse(mediaId);
if(helpers.mediaId.isLocal(mediaId))
localMediaIds.push(mediaId);
else if(type == "illust")
neededMediaIds.push(mediaId);
}
/\x2f If any of these are local IDs, load them with LocalAPI.
if(localMediaIds.length)
{
let loadPromise = this._loadLocalMediaIds(localMediaIds);
/\x2f Local API loads always give full info, so register these as full loads.
for(let mediaId of mediaIds)
this._startedLoadingMediaInfoFull(mediaId, loadPromise);
promises.push(loadPromise);
}
if(neededMediaIds.length)
{
let loadPromise = this._doBatchGetMediaInfo(neededMediaIds, { userId });
for(let mediaId of mediaIds)
this._startedLoadingMediaInfoPartial(mediaId, loadPromise);
promises.push(loadPromise);
}
/\x2f Wait for all requests we started to finish, as well as any requests that
/\x2f were already running.
await Promise.all(promises);
}
/\x2f Run the low-level API call to load partial media info, and register the result.
async _doBatchGetMediaInfo(mediaIds, { userId=null }={})
{
if(mediaIds.length == 0)
return;
let illustIds = [];
for(let mediaId of mediaIds)
{
if(helpers.mediaId.parse(mediaId).type != "illust")
continue;
let [illustId] = helpers.mediaId.toIllustIdAndPage(mediaId);
illustIds.push(illustId);
}
/\x2f If all of these IDs are from the same user, we can use this API instead. It's
/\x2f more useful since it includes bookmarking info, which is missing in /rpc/illust_list,
/\x2f and it's in a much more consistent data format. Unfortunately, it doesn't work
/\x2f with illusts from different users, which seems like an arbitrary restriction.
/\x2f
/\x2f (This actually doesn't restrict to the same user anymore. It's not clear if this
/\x2f is a bug and you still have to specify an arbitrary user. There's no particular place
/\x2f to take advantage of this right now, though.)
if(userId != null)
{
let url = \`/ajax/user/\${userId}/profile/illusts\`;
let result = await helpers.pixivRequest.get(url, {
"ids[]": illustIds,
work_category: "illustManga",
is_first_page: "0",
});
let illusts = Object.values(result.body.works);
await this.addMediaInfosPartial(illusts, "normal");
}
else
{
/\x2f This is a fallback if we're displaying search results we never received media
/\x2f info for. It's a very old API and doesn't have all of the information newer ones
/\x2f do: it's missing the AI flag, and only has a boolean value for "bookmarked" and no
/\x2f bookmark data. However, it seems to be the only API available that can batch
/\x2f load info for a list of unrelated illusts.
let result = await helpers.pixivRequest.get("/rpc/illust_list.php", {
illust_ids: illustIds.join(","),
/\x2f Specifying this gives us 240x240 thumbs, which we want, rather than the 150x150
/\x2f ones we'll get if we don't (though changing the URL is easy enough too).
page: "discover",
/\x2f We do our own muting, but for some reason this flag is needed to get bookmark info.
exclude_muted_illusts: 1,
});
await this.addMediaInfosPartial(result, "illust_list");
}
/\x2f Mark any media IDs that we asked for but didn't receive as not existing, so we won't
/\x2f keep trying to load them.
for(let mediaId of mediaIds)
{
if(this._mediaInfo[mediaId] == null && this._nonexistantMediaIds[mediaId] == null)
this._nonexistantMediaIds[mediaId] = "Illustration doesn't exist";
}
}
/\x2f Cache partial media info that was loaded from a Pixiv search. This can come from
/\x2f batchGetMediaInfoPartial() or from being included in a search result.
/\x2f
/\x2f Return the media IDs in the results, which can be returned as the media ID list from
/\x2f data sources.
addMediaInfosPartial = async (searchResult, source) =>
{
if(searchResult.error)
return [];
/\x2f Ignore entries with "isAdContainer".
searchResult = searchResult.filter(item => !item.isAdContainer);
let allThumbInfo = [];
let mediaIds = [];
for(let thumbInfo of searchResult)
{
let { remappedMediaInfo, profileImageUrl } = MediaCacheMappings.remapPartialMediaInfo(thumbInfo, source);
/\x2f Return media IDs for convenience. Return all media IDs, even if we skip updating
/\x2f it below.
mediaIds.push(remappedMediaInfo.mediaId);
/\x2f The profile image URL isn't included in image info since it's not present in full
/\x2f info. Store it separately.
if(profileImageUrl)
this.cacheProfilePictureUrl(remappedMediaInfo.userId, profileImageUrl);
/\x2f If we already have full media info, don't replace it with partial info. This can happen
/\x2f when a data source is refreshed.
if(this.getMediaInfoSync(remappedMediaInfo.mediaId, { full: true }) != null)
continue;
allThumbInfo.push(remappedMediaInfo);
}
/\x2f Load any extra image data stored for these media IDs. These are stored per page, but
/\x2f batch loaded per image.
let illustIds = allThumbInfo.map((info) => info.illustId);
let extraData = await ppixiv.extraImageData.batchLoadAllPagesForIllust(illustIds);
for(let mediaInfo of allThumbInfo)
{
/\x2f Store extra data for each page.
mediaInfo.extraData = extraData[mediaInfo.illustId] || {};
mediaInfo.full = false;
this._updateMediaInfoUrls(mediaInfo);
/\x2f Store the data.
this.addFullMediaInfo(mediaInfo);
}
return mediaIds;
}
/\x2f Load image info from the local API.
async _loadLocalImageData(mediaId, { refreshFromDisk }={})
{
let mediaInfo = await LocalAPI.loadMediaInfo(mediaId, { refreshFromDisk });
if(!mediaInfo.success)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
this._nonexistantMediaIds[mediaId] = mediaInfo.reason;
return null;
}
return this.addFullMediaInfo(mediaInfo.illust);
}
/\x2f Create or update a MediaInfo. mediaInfo is either a MediaInfo object, or a
/\x2f complete media info result.
/\x2f
/\x2f Pixiv's raw API results don't return full info, so this shouldn't be called
/\x2f directly for those. Use addPixivFullMediaInfo instead, which will make any
/\x2f secondary loads we need. This can be called directly for local API results.
addFullMediaInfo(mediaInfo)
{
/\x2f Create a MediaInfo wrapper.
mediaInfo = MediaInfo.createFrom({ mediaInfo });
let { mediaId } = mediaInfo;
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
if(mediaId in this._mediaInfo)
{
/\x2f We already have a MediaInfo for this mediaId. Update the object we already
/\x2f have instead of replacing it.
this._mediaInfo[mediaId].updateInfo(mediaInfo);
}
else
this._mediaInfo[mediaId] = mediaInfo;
MediaInfo.callMediaInfoModifiedCallbacks(mediaId);
return mediaInfo;
}
/\x2f Return true if all thumbs in mediaIds have been loaded, or are currently loading.
/\x2f
/\x2f We won't start fetching IDs that aren't loaded.
areAllMediaIdsLoadedOrLoading(mediaIds)
{
for(let mediaId of mediaIds)
{
if(!this.isMediaIdLoadedOrLoading(mediaId))
return false;
}
return true;
}
isMediaIdLoadedOrLoading(mediaId)
{
mediaId = helpers.mediaId.getMediaIdFirstPage(mediaId);
return this._mediaInfo[mediaId] != null || this._mediaInfoLoadsFull[mediaId] || this._mediaInfoLoadsPartial[mediaId];
}
/\x2f Save data to extra_image_data, and update cached data. Returns the updated extra data.
async saveExtraImageData(mediaId, edits)
{
let [illustId] = helpers.mediaId.toIllustIdAndPage(mediaId);
/\x2f Load the current data from the database, in case our cache is out of date.
let results = await ppixiv.extraImageData.loadMediaId([mediaId]);
let data = results[mediaId] ?? { illust_id: illustId };
/\x2f Update each key, removing any keys which are null.
for(let [key, value] of Object.entries(edits))
data[key] = value;
/\x2f Delete any null keys.
for(let [key, value] of Object.entries(data))
{
if(value == null)
delete data[key];
}
/\x2f Update the edited timestamp.
data.edited_at = Date.now() / 1000;
/\x2f Save the new data. If the only fields left are illustId and edited_at, delete the record.
if(Object.keys(data).length == 2)
await ppixiv.extraImageData.deleteMediaId(mediaId);
else
await ppixiv.extraImageData.updateMediaId(mediaId, data);
this.replaceExtraData(mediaId, data);
return data;
}
/\x2f Refresh extraData in a loaded image. This does nothing if mediaId isn't loaded.
replaceExtraData(mediaId, data)
{
let mediaInfo = this.getMediaInfoSync(mediaId, { full: false });
if(mediaInfo == null)
return;
mediaInfo.extraData[mediaId] = data;
MediaInfo.callMediaInfoModifiedCallbacks(mediaId);
}
/\x2f Get the user's profile picture URL, or a fallback if we haven't seen it.
getProfilePictureUrl(userId)
{
let result = this.userProfileUrls[userId];
if(!result)
result = "https:/\x2fs.pximg.net/common/images/no_profile.png";
return result;
}
/\x2f Cache the URL to a user's avatar and preload it.
cacheProfilePictureUrl(userId, url)
{
if(this.userProfileUrls[userId] == url)
return;
this.userProfileUrls[userId] = url;
helpers.other.preloadImages([url]);
}
/\x2f Return the extra info for an image, given its image info.
getExtraData(mediaInfo, mediaId, page=null)
{
if(mediaInfo == null)
return { };
/\x2f If page is null, mediaId is already this page's ID.
if(page != null)
mediaId = helpers.mediaId.getMediaIdForPage(mediaId, page);
return mediaInfo.extraData[mediaId] ?? {};
}
/\x2f Get the width and height of mediaId from mediaInfo.
/\x2f
/\x2f This handles the inconsistency with page info: if we have partial image info, we only
/\x2f know the dimensions for the first page. For page 1, we can always get the dimensions,
/\x2f even from partial info. For other pages, we have to get the dimensions from mangaPages.
/\x2f If we only have partial info, the other page dimensions aren't known and we'll return
/\x2f null.
getImageDimensions(mediaInfo, mediaId=null, page=null, { }={})
{
if(mediaInfo == null)
return { width: 1, height: 1 };
let pageInfo = mediaInfo;
if(!helpers.mediaId.isLocal(mediaInfo.mediaId))
{
if(page == null)
{
/\x2f For Pixiv images, at least one of mediaId or page must be specified so we
/\x2f know what page we want.
if(mediaId == null)
throw new Error("At least one of mediaId or page must be specified");
page = helpers.mediaId.toIllustIdAndPage(mediaId)[1];
}
if(page > 0)
{
/\x2f If this is partial info, we don't know the dimensions of pages past the first.
/\x2f Use the size of the first page as a fallback.
if(!mediaInfo.full)
return { width: pageInfo.width, height: pageInfo.height };
pageInfo = mediaInfo.mangaPages[page];
}
}
return { width: pageInfo.width, height: pageInfo.height };
}
async _loadLocalMediaIds(mediaIds)
{
if(mediaIds.length == 0)
return;
let result = await LocalAPI.localPostRequest(\`/api/illusts\`, {
ids: mediaIds,
});
if(!result.success)
{
console.error("Error reading IDs:", result.reason);
return;
}
for(let illust of result.results)
await this.addFullMediaInfo(illust);
}
/\x2f Run a search against the local API.
async localSearch(path="", {...options}={})
{
let result = await LocalAPI.localPostRequest(\`/api/list/\${path}\`, {
...options,
});
if(!result.success)
{
console.error("Error reading directory:", result.reason);
return result;
}
for(let illust of result.results)
await this.addFullMediaInfo(illust);
return result;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/media-cache.js
`),
"/vview/misc/media-ids.js": loadBlob("application/javascript",
`import LocalAPI from '/vview/misc/local-api.js';
import { helpers } from '/vview/misc/helpers.js';
/\x2f Return the canonical URL for an illust. For most URLs this is
/\x2f /artworks/12345. If manga is true, return the manga viewer page.
export function getUrlForMediaId(mediaId, { manga=false}={})
{
if(helpers.mediaId.isLocal(mediaId))
{
/\x2f URLs for local files are handled differently.
let args = helpers.args.location;
LocalAPI.getArgsForId(mediaId, args);
args.hash.set("view", "illust");
return args;
}
let [illustId, page] = helpers.mediaId.toIllustIdAndPage(mediaId);
let args = new helpers.args("/", ppixiv.plocation);
args.path = \`/artworks/\${illustId}\`;
if(manga)
args.hash.set("manga", "1");
if(page != null && page > 0)
args.hash.set("page", page+1);
return args;
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/media-ids.js
`),
"/vview/misc/media-info.js": loadBlob("application/javascript",
`/\x2f MediaInfo holds data for a given illustration, thumbnail, folder, etc.
/\x2f
/\x2f This is mostly just a wrapper around the data we get back from the API to make what's
/\x2f available from different sources more explicit. A MediaInfo is constructed with
/\x2f MediaInfo.createFrom.
import { helpers } from '/vview/misc/helpers.js';
export const MediaInfoEvents = new EventTarget();
let pendingMediaIdCallbacks = new Set();
export default class MediaInfo
{
/\x2f Send mediamodified when any data on a MediaInfo is modified.
/\x2f
/\x2f This is calso called when MediaCache has data for a new media ID.
static callMediaInfoModifiedCallbacks(mediaId)
{
let wasEmpty = pendingMediaIdCallbacks.size == 0;
pendingMediaIdCallbacks.add(mediaId);
/\x2f Queue callMediaInfoModifiedCallbacksAsync if this is the first entry.
if(wasEmpty)
realSetTimeout(() => this.flushMediaInfoModifiedCallbacks(), 0);
}
/\x2f Call any waiting mediamodified callbacks.
/\x2f
/\x2f This is normally called automatically, but can be called to synchronously flush
/\x2f the queue.
static flushMediaInfoModifiedCallbacks()
{
let mediaIds = pendingMediaIdCallbacks;
pendingMediaIdCallbacks = new Set();
for(let mediaId of mediaIds)
{
let event = new Event("mediamodified");
event.mediaId = mediaId;
MediaInfoEvents.dispatchEvent(event);
}
}
/\x2f If true, this is full media info, so full media fields can be accessed.
get full() { return this._getInfo("full"); }
/\x2f Getters for all fields. Most of these are given to us by the server, so we only
/\x2f define setters for fields that we have a reason to update locally. We define all
/\x2f getters explicitly, so it's obvious if we're trying to access a field that doesn't
/\x2f exist for the data.
/\x2f
/\x2f Partial media info fields. These are included in all results, including bulk results
/\x2f like searches, and are always available.
get mediaId() { return this._getInfo("mediaId"); }
get mediaType() { return helpers.mediaId.parse(this.mediaId).type; }
/\x2f The regular Pixiv illustration ID. Most of the time we use our media ID
/\x2f representation instead.
get illustId() { return this._getInfo("illustId"); }
/\x2f 0 or 1: illust, 2: animation (ugoira), "video": local video
get illustType() { return this._getInfo("illustType"); }
get illustTitle() { return this._getInfo("illustTitle"); }
/\x2f Manga pages. This is 1 for videos and local images and any other sources that
/\x2f don't have pages.
get pageCount() { return this._getInfo("pageCount"); }
get userId() { return this._getInfo("userId", null); }
get userName() { return this._getInfo("userName"); }
/\x2f mangaPages[0].width and mangaPages[0].height. This doesn't give the resolution for manga
/\x2f pages, but is always available.
get width() { return this._getInfo("width"); }
get height() { return this._getInfo("height"); }
/\x2f previewUrls is an array of thumbnail URLs. This is the same as mangaPages[*].urls.small.
/\x2f Unlike mangaPages, this is always available, but doesn't have image dimensions.
get previewUrls() { return this._getInfo("previewUrls"); }
/\x2f If the post is bookmarked, this is Pixiv bookmark data. Otherwise, this is null.
get bookmarkData() { return this._getInfo("bookmarkData"); } set bookmarkData(value) { this._setInfo("bookmarkData", value); }
get createDate() { return this._getInfo("createDate"); }
get tagList() { return this._getInfo("tagList"); }
get aiType() { return this._getInfo("aiType", 0); }
get likeCount() { return this._getInfo("likeCount"); } set likeCount(value) { this._setInfo("likeCount", value); }
get bookmarkCount() { return this._getInfo("bookmarkCount"); } set bookmarkCount(value) { this._setInfo("bookmarkCount", value); }
/\x2f Editor info.
get extraData() { return this._getInfo("extraData"); } set extraData(value) { this._setInfo("extraData", value); }
/\x2f Full media info fields. These are only available when we load full data.
/\x2f
/\x2f mangaPages is an array of page info:
/\x2f [{
/\x2f width, height, /\x2f the width of the original image
/\x2f urls: {
/\x2f original, /\x2f the URL to the original, unresized image
/\x2f small, /\x2f the high-resolution thumbnail for searches
/\x2f }
/\x2f ]}
get mangaPages() { return this._getInfo("mangaPages"); }
get illustComment() { return this._getInfo("illustComment", ""); }
get ugoiraMetadata() { return this._getInfo("ugoiraMetadata"); }
get seriesNavData() { return this._getInfo("seriesNavData"); }
/\x2f Local images:
get localPath() { return this._getInfo("localPath"); }
/\x2f Get a key by name.
/\x2f
/\x2f If defaultValue is undefined, the key is expected to exist and an exception is thrown
/\x2f if it doesn't. Otherwise, defaultValue is returned if the key isn't set.
_getInfo(name, defaultValue=undefined)
{
if(!(name in this._info))
{
if(defaultValue !== undefined)
return defaultValue;
throw new Error(\`Field \${name} not available in image info for \${this._info.mediaId}\`);
}
return this._info[name];
}
/\x2f Update a value. We only expect to update fields in this way when they already exist.
_setInfo(name, value)
{
if(!(name in this._info))
throw new Error(\`Field \${name} not available in image info for \${this._info.mediaId}\`);
if(this._info[name] === value)
return;
this._info[name] = value;
MediaInfo.callMediaInfoModifiedCallbacks(this.mediaId);
}
/\x2f If this is full media info, return a MediaInfo containing only partial media info. When
/\x2f partial info is being requested we don't want to return full info. This makes it easier
/\x2f to be sure that callers only requesting partial info don't accidentally access full fields
/\x2f and having it seem to work because full info was cached.
/\x2f
/\x2f If this is already partial info, return ourself.
/\x2f
/\x2f For local API media info, return ourself. The local API is always full info.
get partialInfo()
{
/\x2f This is implemented by the subclass if this media source supports it.
return this;
}
/\x2f True if this is Vview media info. This is overridden by VviewMediaInfo.
get isLocal() { return false; }
/\x2f Create a MediaInfo from an API result with the appropriate subclass.
static createFrom({mediaInfo})
{
let classType;
if(mediaInfo.classType)
{
/\x2f This object was created by serialize(). It's already been postprocessed, and
/\x2f classType tells us which subclass to use.
let classes = {
VviewMediaInfo,
PixivMediaInfo,
};
classType = classes[mediaInfo.classType];
mediaInfo = mediaInfo.info;
}
else
{
/\x2f This is API data. Figure out the correct subclass from the media ID.
if(helpers.mediaId.isLocal(mediaInfo.mediaId))
classType = VviewMediaInfo;
else
classType = PixivMediaInfo;
/\x2f Run preprocessing if this subclass needs it.
mediaInfo = classType.preprocessInfo({mediaInfo});
}
return new classType({mediaInfo});
}
/\x2f Get an object that can be serialized, and used to create a MediaInfo later with
/\x2f createFrom.
get serialize() {
let classType;
if(this.__proto__.constructor === VviewMediaInfo)
classType = "VviewMediaInfo";
else
classType = "PixivMediaInfo";
return {
classType,
info: this._info,
};
}
/\x2f The subclass can implement this to adjust mediaInfo when it's coming from the API
/\x2f before it's sent to the constructor. This isn't called from serialized data, where
/\x2f this has already been done.
static preprocessInfo({mediaInfo})
{
return mediaInfo;
}
/\x2f Use createFrom above instead of calling this directly.
constructor({ mediaInfo })
{
this._info = { ...mediaInfo };
}
/\x2f Update this MediaInfo from data in another MediaInfo for the same mediaId.
updateInfo(mediaInfo)
{
console.assert(mediaInfo instanceof MediaInfo, mediaInfo);
for(let [key, value] of Object.entries(mediaInfo._info))
{
/\x2f Allow full to change from false to true, so if we get full info after partial info
/\x2f we'll upgrade. Don't allow it to change from true to false, so we can update full
/\x2f info from partial info.
if(key == "full" && !value)
continue;
/\x2f Make sure we never change mediaId.
if(key == "mediaId")
{
console.assert(value == this._info.mediaId, \`Can't change media ID from \${this._info.mediaId} to \${value}\`);
continue;
}
this._info[key] = value;
}
}
/\x2f Return the main image to use for viewing the given image.
/\x2f
/\x2f If image_size_limit is set and the image is too large, use Pixiv's downscaled image instead.
/\x2f This is an excessively low-res image with a max size of 1200, which seems like a resolution
/\x2f that was picked a decade ago and never adjusted (1920 would make more sense), but it's the
/\x2f only smaller image we have available.
/\x2f
/\x2f This is useful on mobile, where iOS's browser will OOM and silently reload the page if
/\x2f we try to load extremely large images. This can also be enabled on desktop for users with
/\x2f very limited bandwidth. For that use case it would make more sense to limit based on
/\x2f file size, but that's not available.
getMainImageUrl(page=0, { ignoreLimits=false }={})
{
let mangaPage = this.mangaPages[page];
if(mangaPage == null)
return { };
return {
url: mangaPage.urls.original,
width: mangaPage.width,
height: mangaPage.height,
};
}
}
/\x2f We have one MediaInfo for a post containing everything we know about it. Data
/\x2f from Pixiv search results usually only has partial info. In many cases this is
/\x2f all we need, so we only ask for full info when it's needed. However, we want to
/\x2f be sure that if a caller is asking for partial info, it isn't accidentally using
/\x2f info from full info, but appearing to work because full info was cached during
/\x2f testing.
/\x2f
/\x2f PartialPixivMediaInfo wraps a PixivMediaInfo to check this, and throws an exception
/\x2f if non-partial data is accessed.
let partialPixivKeys = new Set([
"full",
"mediaId",
"bookmarkData",
"createDate",
"tagList",
"extraData",
"illustTitle",
"illustType",
"userName",
"previewUrls",
"illustId",
"aiType",
"userId",
"pageCount",
"width", "height",
]);
function createPartialPixivMediaInfo(mediaInfo)
{
console.assert(mediaInfo instanceof PixivMediaInfo);
return new Proxy(mediaInfo, {
get(target, key, receiver) {
/\x2f Awaiting an object tries to read "then". Don't log an error for this.
if(key == "then")
return undefined;
/\x2f Always return false for mediaInfo.full, even if the underlying data is full.
if(key == "full")
return false;
/\x2f Allow symbols and functions, so things like valueOf() work even though they're
/\x2f not part of the data.
/\x2f If this isn't a symbol or a function, onl
if(key.constructor === Symbol || target[key] instanceof Function)
return target[key];
if(!partialPixivKeys.has(key))
throw new Error(\`MediaInfo key \${key} isn't available in partial media info\`);
return target[key];
},
has(target, key) {
if(!partialPixivKeys.has(key))
throw new Error(\`MediaInfo key \${key} isn't available in partial media info\`);
return key in target;
},
set(obj, key, value) {
if(!partialPixivKeys.has(key))
throw new Error(\`MediaInfo key \${key} can't be set in partial media info\`);
obj[key] = value;
return true;
}
});
}
class PixivMediaInfo extends MediaInfo
{
get partialInfo()
{
return createPartialPixivMediaInfo(this);
}
getMainImageUrl(page=0, { ignoreLimits=false, forceLowRes=false }={})
{
let mangaPage = this.mangaPages[page];
if(mangaPage == null)
return { };
/\x2f Use the low-res image if image_size_limit is set and ignoreLimits is false.
let pixels = mangaPage.width * mangaPage.height;
let maxPixels = ppixiv.settings.get("image_size_limit");
if(!ignoreLimits && maxPixels != null && pixels > maxPixels)
forceLowRes = true;
if(forceLowRes)
{
/\x2f Use the downscaled image. This is currently always rescaled to fit a max
/\x2f resolution of 1200.
let ratio = Math.min(1, 1200 / mangaPage.width, 1200 / mangaPage.height);
let width = Math.round(mangaPage.width * ratio);
let height = Math.round(mangaPage.height * ratio);
return { url: mangaPage.urls.regular, width, height };
}
return super.getMainImageUrl(page);
}
}
class VviewMediaInfo extends MediaInfo
{
/\x2f Vview media info is always full.
get full() { return true; }
/\x2f We always have mangaPages, and just implement width and height for compatibility.
/\x2f This is null for folders.
get width() { return this.mangaPages[0]?.width; }
get height() { return this.mangaPages[0]?.height; }
get pageCount() { return this.mediaType == "folder"? 0:1; }
get isLocal() { return true; }
/\x2f These aren't used locally, but don't warn about accesses to them.
get ugoiraMetadata() { return null; }
get seriesNavData() { return null; }
/\x2f Preprocess API data to fit our data model. We don't do this in the constructor
/\x2f since we don't want it to happen a second time when loading from serialized data.
static preprocessInfo({mediaInfo})
{
mediaInfo = { ...mediaInfo };
let { type } = helpers.mediaId.parse(mediaInfo.mediaId);
if(type == "folder")
{
mediaInfo.mangaPages = [];
/\x2f These metadata fields don't exist for folders.
mediaInfo.userName = null;
mediaInfo.illustType = 0;
}
else
{
/\x2f Vview images don't use pages and always have one page.
mediaInfo.mangaPages = [{
width: mediaInfo.width,
height: mediaInfo.height,
urls: mediaInfo.urls,
}];
}
return mediaInfo;
}
/\x2f For local images, we can optionally use a high-quality GPU upscale for static
/\x2f images.
getMainImageUrl(page=0)
{
let result = this._getMainImageUrlWithUpscaling(page);
return result ?? super.getMainImageUrl(page);
}
_getMainImageUrlWithUpscaling(page)
{
/\x2f This is only used for static images.
if(this.illustType != 0)
return null;
let mangaPage = this.mangaPages[page];
if(mangaPage == null)
return null;
/\x2f The upscale setting can be:
/\x2f null: no upscaling
/\x2f 2x, 3x, 4x: upscale by the given factor. These are the upscales supported by the
/\x2f underlying GPU resizer.
/\x2f auto: upscale based on the image size.
let upscaleSetting = ppixiv.settings.get("upscaling");
if(!upscaleSetting)
return null;
/\x2f The upscaler will do 2x, 3x and 4x, but in practice going beyond 2x is nearly
/\x2f indistinguishable from 2x with regular upscaling. It's already done what it can
/\x2f with the image. Just decide whether to use 2x upscaling or none at all, so we
/\x2f don't waste time upscaling images that aren't low-res.
/\x2f
/\x2f For now we just pick an arbitrary max resolution to turn on upscaling.
let { width, height } = mangaPage;
let maxSizeForUpscaling = 2000;
if(width >= maxSizeForUpscaling && height > maxSizeForUpscaling)
return null;
return {
url: mangaPage.urls.upscale2x,
/\x2f We currently don't scale these values to reflect the upscale. The viewer
/\x2f only uses them for the aspect ratio (which won't change) unless it's in
/\x2f "actual size" mode, so scaling these causes the image size to jump, but only
/\x2f when the zoom is at actual size. It's better to just leave it at the
/\x2f natural size, so the zoom stays put.
width: mangaPage.width,
height: mangaPage.height,
};
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/media-info.js
`),
"/vview/misc/muting.js": loadBlob("application/javascript",
`/\x2f This handles querying whether a tag or a user is muted.
/\x2f
/\x2f The "mutes-changed" event is fired here when any mute list is modified.
import { helpers } from '/vview/misc/helpers.js';
export default class Muting extends EventTarget
{
constructor()
{
super();
this._mutedTags = [];
this._mutedUserIds = [];
/\x2f This is used to tell other tabs when mutes change, so adding mutes takes effect without
/\x2f needing to reload all other tabs.
this._syncMutesChannel = new BroadcastChannel("ppixiv:mutes-changed");
this._syncMutesChannel.addEventListener("message", this._receivedMessage);
}
get pixivMutedTags() { return this._mutedTags; }
get pixivMutedUserIds() { return this._mutedUserIds; }
/\x2f Set the list of tags and users muted via Pixiv's settings.
setMutes({pixivMutedTags, pixivMutedUserIds}={})
{
if(pixivMutedTags == null && pixivMutedUserIds == null)
return;
if(pixivMutedTags != null)
this._mutedTags = pixivMutedTags;
if(pixivMutedUserIds != null)
this._mutedUserIds = pixivMutedUserIds;
this._storeMutes();
this._fireMutesChanged();
}
/\x2f Extra mutes have a similar format to the /ajax/mute/items API:
/\x2f
/\x2f [{
/\x2f "type": "tag", /\x2f or user
/\x2f "value": "tag or user ID",
/\x2f "label": "tag or username"
/\x2f ]}
get extraMutes()
{
return ppixiv.settings.get("extraMutes");
}
set extraMutes(mutedUsers)
{
ppixiv.settings.set("extraMutes", mutedUsers);
this._fireMutesChanged();
}
/\x2f Shortcut to get just extra muted tags:
get _extraMutedTags()
{
let tags = [];
for(let mute of this.extraMutes)
if(mute.type == "tag")
tags.push(mute.value);
return tags;
}
/\x2f Fire mutes-changed to let UI know that a mute list has changed.
_fireMutesChanged()
{
/\x2f If either of these are null, we're still being initialized. Don't fire events yet.
if(this.pixivMutedTags == null || this.pixivMutedUserIds == null)
return;
this.dispatchEvent(new Event("mutes-changed"));
/\x2f Tell other tabs that mutes have changed.
this._broadcastMutes();
}
_broadcastMutes()
{
/\x2f Don't do this if we're inside _broadcastMutes because another tab sent this to us.
if(this._handlingBroadcastMutes)
return;
this._syncMutesChannel.postMessage({
pixivMutedTags: this.pixivMutedTags,
pixivMutedUserIds: this.pixivMutedUserIds,
});
}
_receivedMessage = (e) =>
{
let data = e.data;
if(this._handlingBroadcastMutes)
{
console.error("recursive");
return;
}
/\x2f Don't fire the event if nothing is actually changing. This happens a lot when new tabs
/\x2f are opened and they broadcast current mutes.
if(JSON.stringify(this.pixivMutedTags) == JSON.stringify(data.pixivMutedTags) &&
JSON.stringify(this.pixivMutedUserIds) == JSON.stringify(data.pixivMutedUserIds))
return;
this._handlingBroadcastMutes = true;
try {
this.setMutes({pixivMutedTags: data.pixivMutedTags, pixivMutedUserIds: data.pixivMutedUserIds});
} finally {
this._handlingBroadcastMutes = false;
}
};
isUserIdMuted(userId)
{
if(this._mutedUserIds.indexOf(userId) != -1)
return true;
for(let {value: mutedUserId} of this.extraMutes)
{
if(userId == mutedUserId)
return true;
}
return false;
};
/\x2f Unmute userId.
/\x2f
/\x2f This checks both Pixiv's unmute list and our own, so it can always be used if
/\x2f isUserIdMuted is true.
async unmuteUserId(userId)
{
this.removeExtraMute(userId, {type: "user"});
if(this._mutedUserIds.indexOf(userId) != -1)
await this.removePixivMute(userId, {type: "user"});
}
/\x2f Return true if any tag in tagList is muted.
anyTagMuted(tagList)
{
let _extraMutedTags = this._extraMutedTags;
for(let tag of tagList)
{
if(tag.tag)
tag = tag.tag;
if(this._mutedTags.indexOf(tag) != -1 || _extraMutedTags.indexOf(tag) != -1)
return tag;
}
return null;
}
/\x2f Return true if the user is able to add to the Pixiv mute list.
get _canAddPixivMutes()
{
/\x2f Non-premium users can only have one mute, and that's shared across both tags and users.
let total_mutes = this.pixivMutedTags.length + this.pixivMutedUserIds.length;
return ppixiv.pixivInfo.premium || total_mutes == 0;
}
/\x2f Pixiv doesn't include mutes in the initialization data for pages on mobile. We load
/\x2f it with an API call, but we don't want to wait for that to return and delay every page
/\x2f load. However, we also don't want to not have mute info and possibly show muted images
/\x2f briefly on startup. Work around this by caching mutes to storage, and using the cached
/\x2f mutes while we're waiting to receive them.
_storeMutes()
{
/\x2f This is only needed for mobile.
if(!ppixiv.mobile)
return;
ppixiv.settings.set("cached_mutes", {
tags: this._mutedTags,
userIds: this._mutedUserIds,
});
}
/\x2f Load mutes cached by _storeMutes. This is only used until we load the mute list, and
/\x2f is only used on mobile.
loadCachedMutes()
{
/\x2f This is only needed for mobile.
if(!ppixiv.mobile)
return;
let cachedMutes = ppixiv.settings.get("cached_mutes");
if(cachedMutes == null)
{
console.log("No cached mutes to load");
return;
}
let { tags, userIds } = cachedMutes;
this._mutedTags = tags;
this._mutedUserIds = userIds;
}
/\x2f Request the user's mute list. This is only used on mobile.
async fetchMutes()
{
/\x2f Load the real mute list.
let data = await helpers.pixivRequest.get(\`/touch/ajax/user/self/status?lang=en\`);
if(data.error)
{
console.log("Error loading user info:", data.message);
return;
}
let mutes = data.body.user_status.mutes;
let pixivMutedTags = [];
for(let [tag, info] of Object.entries(mutes.tags))
{
/\x2f "enabled" seems to always be true.
if(info.enabled)
pixivMutedTags.push(tag);
}
let pixivMutedUserIds = [];
for(let [userId, info] of Object.entries(mutes.users))
{
if(info.enabled)
pixivMutedUserIds.push(userId);
}
this.setMutes({pixivMutedTags, pixivMutedUserIds});
}
/\x2f If the user has premium, add to Pixiv mutes. Otherwise, add to extra mutes.
async addMute(value, label, {type})
{
if(ppixiv.pixivInfo.premium)
{
await this.addPixivMute(value, {type: type});
}
else
{
if(type == "user" && label == null)
{
/\x2f We need to know the user's username to add to our local mute list.
let user_data = await ppixiv.userCache.getUserInfo(value);
label = user_data.name;
}
await this.addExtraMute(value, label, {type: type});
}
}
/\x2f Mute a user or tag using the Pixiv mute list. type must be "tag" or "user".
async addPixivMute(value, {type})
{
console.log(\`Adding \${value} to the Pixiv \${type} mute list\`);
if(!this._canAddPixivMutes)
{
ppixiv.message.show("The Pixiv mute list is full.");
return;
}
/\x2f Stop if the value is already in the list.
let muteList = type == "tag"? "pixivMutedTags":"pixivMutedUserIds";
let mutes = this[muteList];
if(mutes.indexOf(value) != -1)
return;
/\x2f Get the label. If this is a tag, the label is the same as the tag, otherwise
/\x2f get the user's username. We only need this for the message we'll display at the
/\x2f end.
let label = value;
if(type == "user")
label = (await ppixiv.userCache.getUserInfo(value)).name;
/\x2f Note that this doesn't return an error if the mute list is full. It returns success
/\x2f and silently does nothing.
let result = await helpers.pixivRequest.rpcPost("/ajax/mute/items/add", {
context: "illust",
type: type,
value: value,
});
if(result.error)
{
ppixiv.message.show(result.message);
return;
}
/\x2f The API call doesn't return the updated list, so we have to update it manually.
mutes.push(value);
/\x2f Pixiv sorts the muted tag list, so mute it here to match.
if(type == "tag")
mutes.sort();
let update = { };
update[muteList] = mutes;
this.setMutes(update);
ppixiv.message.show(\`Muted the \${type} \${label}\`);
}
/\x2f Remove item from the Pixiv mute list. type must be "tag" or "user".
async removePixivMute(value, {type})
{
console.log(\`Removing \${value} from the Pixiv muted \${type} list\`);
/\x2f Get the label. If this is a tag, the label is the same as the tag, otherwise
/\x2f get the user's username. We only need this for the message we'll display at the
/\x2f end.
let label = value;
if(type == "user")
label = (await ppixiv.userCache.getUserInfo(value)).name;
let result = await helpers.pixivRequest.rpcPost("/ajax/mute/items/delete", {
context: "illust",
type: type,
value: value,
});
if(result.error)
{
ppixiv.message.show(result.message);
return;
}
/\x2f The API call doesn't return the updated list, so we have to update it manually.
let muteList = type == "tag"? "pixivMutedTags":"pixivMutedUserIds";
let mutes = this[muteList];
let idx = mutes.indexOf(value);
if(idx != -1)
mutes.splice(idx, 1);
let update = { };
update[muteList] = mutes;
this.setMutes(update);
ppixiv.message.show(\`Unmuted the \${type} \${label}\`);
}
/\x2f value is a tag name or user ID. label is the tag or username. type must be
/\x2f "tag" or "user".
async addExtraMute(value, label, {type})
{
console.log(\`Adding \${value} (\${label}) to the extra muted \${type} list\`);
/\x2f Stop if the item is already in the list.
let mutes = this.extraMutes;
for(let {value: mutedValue, type: mutedType} of mutes)
if(value == mutedValue && type == mutedType)
{
console.log("Item is already muted");
return;
}
mutes.push({
type: type,
value: value,
label: label,
});
mutes.sort((lhs, rhs) => { return lhs.label.localeCompare(rhs.label); });
this.extraMutes = mutes;
ppixiv.message.show(\`Muted the \${type} \${label}\`);
}
async removeExtraMute(value, {type})
{
console.log(\`Removing \${value} from the extra muted \${type} list\`);
let mutes = this.extraMutes;
for(let idx = 0; idx < mutes.length; ++idx)
{
let mute = mutes[idx];
if(mute.type == type && mute.value == value)
{
ppixiv.message.show(\`Unmuted the \${mute.type} \${mute.label}\`);
mutes.splice(idx, 1);
break;
}
}
this.extraMutes = mutes;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/muting.js
`),
"/vview/misc/pixiv-ugoira-downloader.js": loadBlob("application/javascript",
`/\x2f Encode a Pixiv video to MJPEG, using an MKV container.
/\x2f
/\x2f Other than having to wrangle the MKV format, this is easy: the source files appear to always
/\x2f be JPEGs, so we don't need to do any conversions and the encoding is completely lossless (other
/\x2f than the loss Pixiv forces by reencoding everything to JPEG). The result is standard and plays
/\x2f in eg. VLC, but it's not a WebM file and browsers don't support it. These can also be played
/\x2f when reading from the local API, since it'll decode these videos and turn them back into a ZIP.
import EncodeMKV from '/vview/misc/encode-mkv.js';
import ZipImageDownloader from '/vview/misc/zip-image-downloader.js';
import { helpers } from '/vview/misc/helpers.js';
export default class PixivUgoiraDownloader
{
constructor(illustData, progress)
{
this.illustData = illustData;
this.onprogress = progress;
this.metadata = illustData.ugoiraMetadata;
this.mimeType = illustData.ugoiraMetadata.mimeType;
this.frames = [];
this.loadAllFrames();
}
async loadAllFrames()
{
ppixiv.message.show(\`Downloading video...\`);
let downloader = new ZipImageDownloader(this.metadata.originalSrc, {
onprogress: (progress) => {
if(!this.onprogress)
return;
try {
this.onprogress.set(progress);
} catch(e) {
console.error(e);
}
},
});
while(1)
{
let file = await downloader.getNextFrame();
if(file == null)
break;
this.frames.push(file);
}
ppixiv.message.hide();
/\x2f Some posts have the wrong dimensions in illustData (63162632). If we use it, the resulting
/\x2f file won't play. Decode the first image to find the real resolution.
let img = document.createElement("img");
let blob = new Blob([this.frames[0]], {type: this.mimeType || "image/png"});
let firstFrameURL = URL.createObjectURL(blob);
img.src = firstFrameURL;
await helpers.other.waitForImageLoad(img);
URL.revokeObjectURL(firstFrameURL);
let width = img.naturalWidth;
let height = img.naturalHeight;
try {
let encoder = new EncodeMKV(width, height);
/\x2f Add each frame to the encoder.
let frameCount = this.illustData.ugoiraMetadata.frames.length;
for(let frame = 0; frame < frameCount; ++frame)
{
let frameData = this.frames[frame];
let duration = this.metadata.frames[frame].delay;
encoder.add(frameData, duration);
};
/\x2f There's no way to encode the duration of the final frame of an MKV, which means the last frame
/\x2f will be effectively lost when looping. In theory the duration field on the file should tell the
/\x2f player this, but at least VLC doesn't do that.
/\x2f
/\x2f Work around this by repeating the last frame with a zero duration.
/\x2f
/\x2f In theory we could set the "invisible" bit on this frame ("decoded but not displayed"), but that
/\x2f doesn't seem to be used, at least not by VLC.
let frameData = this.frames[frameCount-1];
encoder.add(frameData, 0);
/\x2f Build the file.
let mkv = encoder.build();
let filename = this.illustData.userName + " - " + this.illustData.illustId + " - " + this.illustData.illustTitle + ".mkv";
helpers.saveBlob(mkv, filename);
} catch(e) {
console.error(e);
};
/\x2f Completed:
if(this.onprogress)
this.onprogress.set(null);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/pixiv-ugoira-downloader.js
`),
"/vview/misc/polyfills.js": loadBlob("application/javascript",
`export default function installPolyfills()
{
/\x2f Make IDBRequest an async generator.
/\x2f
/\x2f Note that this will clobber onsuccess and onerror on the IDBRequest.
if(!IDBRequest.prototype[Symbol.asyncIterator])
{
/\x2f This is awful (is there no syntax sugar to make this more readable?), but it
/\x2f makes IDBRequests much more sane to use.
IDBRequest.prototype[Symbol.asyncIterator] = function() {
return {
next: () => {
return new Promise((accept, reject) => {
this.onsuccess = (e) => {
let entry = e.target.result;
if(entry == null)
{
accept({ done: true });
return;
}
accept({ value: entry, done: false });
entry.continue();
}
this.onerror = (e) => {
reject(e);
};
});
}
};
};
}
/\x2f Add commitStylesIfPossible to Animation.
/\x2f
/\x2f Animation.commitStyles throws an exception in some cases. This is almost never useful and
/\x2f it's a pain to have to wrap every call in an exception handler, so this converts it to a
/\x2f return value.
Animation.prototype.commitStylesIfPossible = function()
{
try {
this.commitStyles();
return true;
} catch(e) {
console.error(e);
return false;
}
}
/\x2f Firefox still doesn't support inert. We simulate it with a pointer-events: none style, so
/\x2f implement the attribute.
if(!("inert" in document.documentElement))
{
Object.defineProperty(HTMLElement.prototype, "inert", {
get: function() { return this.hasAttribute("inert"); },
set: function(value) {
if(value)
this.setAttribute("inert", "inert");
else
this.removeAttribute("inert", "inert");
},
});
}
/\x2f Work around a strange iOS Safari bug: we don't always get dblclick events unless
/\x2f at least one dblclick listener exists on the document.
if(ppixiv.ios)
document.addEventListener("dblclick", (e) => { });
/\x2f Old Firefox:
if(!("throwIfAborted" in AbortSignal.prototype))
{
AbortSignal.prototype.throwIfAborted = function()
{
if(this.aborted)
throw new DOMException(this.reason ?? "Signal was aborted");
}
}
};
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/polyfills.js
`),
"/vview/misc/recent-bookmark-tags.js": loadBlob("application/javascript",
`/\x2f Keep track of bookmark tags the user has used recently.
export default class RecentBookmarkTags
{
static setRecentBookmarkTags(tags)
{
ppixiv.settings.set("recent-bookmark-tags", JSON.stringify(tags));
}
static getRecentBookmarkTags()
{
let recentBookmarkTags = ppixiv.settings.get("recent-bookmark-tags");
if(recentBookmarkTags == null)
return [];
return JSON.parse(recentBookmarkTags);
}
/\x2f Move tagList to the beginning of the recent tag list, and prune tags at the end.
static updateRecentBookmarkTags(tagList)
{
/\x2f Move the tags we're using to the top of the recent bookmark tag list.
let recentBookmarkTags = this.getRecentBookmarkTags();
for(let i = 0; i < tagList.length; ++i)
{
let idx = recentBookmarkTags.indexOf(tagList[i]);
if(idx != -1)
recentBookmarkTags.splice(idx, 1);
}
for(let i = 0; i < tagList.length; ++i)
recentBookmarkTags.unshift(tagList[i]);
/\x2f Remove tags that haven't been used in a long time.
recentBookmarkTags.splice(100);
this.setRecentBookmarkTags(recentBookmarkTags);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/recent-bookmark-tags.js
`),
"/vview/misc/saved-search-tags.js": loadBlob("application/javascript",
`/\x2f This handles the list of saved and recent search tags. For backwards-compatibility
/\x2f this is stored in the "recent-tag-searches" setting. This has the format:
/\x2f
/\x2f [
/\x2f "tag1",
/\x2f "tag2",
/\x2f { "type": "section", "name: "Saved Tags" },
/\x2f "tag3",
/\x2f { "type": "section", "name: "Saved Tags 2" },
/\x2f "tag3",
/\x2f ]
/\x2f
/\x2f Tags are simple strings. All tags before the first section are recent tags, and all
/\x2f saved tags are always in a section. The order of tags and groups can be edited by the
/\x2f user.
/\x2f
/\x2f Putting recent tags first allows the older simple tag list format to have the same
/\x2f meaning, so no migrations are needed.
export default class SavedSearchTags
{
static data()
{
return ppixiv.settings.get("recent-tag-searches") || [];;
}
/\x2f Return a map of all recent and saved tags, mapping from group names to lists
/\x2f of searches. Recent searches are returned with a tag of "null". The map is
/\x2f ordered.
static getAllGroups({data=null}={})
{
let result = new Map();
result.set(null, []); /\x2f recents
data ??= this.data();
let inGroup = null;
for(let recentTag of data)
{
if((recentTag instanceof Object) && recentTag.type == "section")
{
inGroup = recentTag.name;
result.set(inGroup, []);
continue;
}
result.get(inGroup).push(recentTag);
}
return result;
}
/\x2f Set recent-tag-searches from a group map returned by getAllGroups.
static setAllGroups(groups)
{
let data = [];
for(let [name, tagsInGroup] of groups.entries())
{
if(name != null)
{
data.push({
type: "section",
name,
});
}
for(let tag of tagsInGroup)
data.push(tag);
}
ppixiv.settings.set("recent-tag-searches", data);
window.dispatchEvent(new Event("recent-tag-searches-changed"));
}
/\x2f Return all individual tags that the user has in recents and saved searches.
static getAllUsedTags()
{
let allTags = new Set();
for(let groupTags of this.getAllGroups().values())
{
for(let tags of groupTags)
for(let tag of tags.split(" "))
allTags.add(tag);
}
return allTags;
}
/\x2f Add tag to the recent search list, or move it to the front. If group is set, add
/\x2f a saved search in the given group. If group is null, add to the recent list.
/\x2f
/\x2f If tag is null, just create group if it doesn't exist.
static add(tag, { group=null, addToEnd=true }={})
{
if(this._disableAddingSearchTags || tag == "")
return;
let recentTags = ppixiv.settings.get("recent-tag-searches") || [];
/\x2f If tag is already in the list as a recent tag, remove it.
if(tag != null)
{
/\x2f If tag is a saved tag, don't change it.
if(this.groupNameForTag(tag) != null)
return;
let idx = recentTags.indexOf(tag);
if(idx != -1)
recentTags.splice(idx, 1);
}
/\x2f If we're adding it as a recent, add it to the beginning. If we're adding it as
/\x2f a saved tag, create the null separating recents and saved tags if needed, and add
/\x2f the tag at the end.
if(group == null)
recentTags.unshift(tag);
else
{
/\x2f Find or create the group header for this group.
let [startIdx, endIdx] = this._findGroupRange(group);
if(startIdx == -1)
{
console.log(\`Created tag group: \${group}\`);
recentTags.push({
type: "section",
name: group,
});
startIdx = endIdx = recentTags.length;
}
/\x2f If tag is null, we're just creating the group and not adding anything to it.
if(tag != null)
{
if(addToEnd)
recentTags.splice(endIdx, 0, tag);
else
recentTags.splice(startIdx+1, 0, tag);
}
}
ppixiv.settings.set("recent-tag-searches", recentTags);
window.dispatchEvent(new Event("recent-tag-searches-changed"));
}
/\x2f Replace a saved tag.
static modifyTag(oldTags, newTags)
{
if(oldTags == newTags)
return;
let data = this.data();
if(this.findIndex({tag: newTags, data}) != -1)
{
ppixiv.message.show(\`Saved tag already exists\`);
return;
}
/\x2f Find the tag.
let idx = this.findIndex({tag: oldTags, data});
if(idx == -1)
return;
data[idx] = newTags;
ppixiv.settings.set("recent-tag-searches", data);
window.dispatchEvent(new Event("recent-tag-searches-changed"));
ppixiv.message.show(\`Saved tag updated\`);
}
/\x2f Return [start,end) in the tag list for the given section, where start is the
/\x2f index of the section header and end is one past last entry in the group. If
/\x2f the section doesn't exist, return [-1,-1].
static _findGroupRange(sectionName, { data }={})
{
let recentTags = data ?? this.data();
/\x2f Find the start of the group. recent searches always start at the beginning.
let startIdx = -1;
if(sectionName == null)
startIdx = 0;
else
{
for(let idx = 0; idx < recentTags.length; ++idx)
{
let group = recentTags[idx];
if(!(group instanceof Object) || group.type != "section")
continue;
if(group.name != sectionName)
continue;
startIdx = idx;
break;
}
}
/\x2f Return -1 if the group doesn't exist.
if(startIdx == -1)
return [-1, -1];
/\x2f Find the end of the group.
for(let idx = startIdx+1; idx < recentTags.length; ++idx)
{
let group = recentTags[idx];
if(!(group instanceof Object) || group.type != "section")
continue;
return [startIdx, idx];
}
return [startIdx,recentTags.length];
}
/\x2f Delete the given group and all tags inside it.
static deleteGroup(group)
{
let [startIdx, endIdx] = this._findGroupRange(group);
if(startIdx == -1)
return;
let count = endIdx - startIdx;
let recentTags = ppixiv.settings.get("recent-tag-searches") || [];
recentTags.splice(startIdx, count);
ppixiv.settings.set("recent-tag-searches", recentTags);
window.dispatchEvent(new Event("recent-tag-searches-changed"));
ppixiv.message.show(\`Group "\${group}" deleted\`);
}
/\x2f Rename a group. The new name must not already exist.
static renameGroup(from, to)
{
let fromIdx = this.findIndex({group: from});
if(fromIdx == -1)
return;
if(this.findIndex({group: to}) != -1)
{
ppixiv.message.show(\`Group "\${to}" already exists\`);
return;
}
let recentTags = ppixiv.settings.get("recent-tag-searches") || [];
recentTags[fromIdx].name = to;
ppixiv.settings.set("recent-tag-searches", recentTags);
/\x2f If this group was collapsed, rename it in collapsed-tag-groups.
let collapsedGroups = this.getCollapsedTagGroups();
if(collapsedGroups.has(from))
{
collapsedGroups.delete(from);
collapsedGroups.add(to);
ppixiv.settings.set("collapsed-tag-groups", [...collapsedGroups]);
}
window.dispatchEvent(new Event("recent-tag-searches-changed"));
}
static moveGroup(group, { down })
{
let data = ppixiv.settings.get("recent-tag-searches") || [];
let groups = this.getAllGroups(data);
let tagGroups = Array.from(groups.keys());
let idx = tagGroups.indexOf(group);
if(idx == -1)
return;
/\x2f Reorder tagGroups.
let swapWith = idx + (down? +1:-1);
if(swapWith < 0 || swapWith >= tagGroups.length)
return;
/\x2f Refuse to move recents, which must always be the first group.
if(tagGroups[idx] == null || tagGroups[swapWith] == null)
return;
[tagGroups[idx], tagGroups[swapWith]] = [tagGroups[swapWith], tagGroups[idx]];
let newGroups = new Map();
for(let group of tagGroups)
{
newGroups.set(group, groups.get(group));
}
this.setAllGroups(newGroups);
}
static getCollapsedTagGroups()
{
return new Set(ppixiv.settings.get("collapsed-tag-groups") || []);
}
/\x2f groupName can be null to collapse recents. If collapse is "toggle", toggle the current value.
static setTagGroupCollapsed(groupName, collapse)
{
let collapsedGroups = this.getCollapsedTagGroups();
if(collapse == "toggle")
collapse = !collapsedGroups.has(groupName);
if(collapsedGroups.has(groupName) == collapse)
return;
if(collapse)
collapsedGroups.add(groupName);
else
collapsedGroups.delete(groupName);
ppixiv.settings.set("collapsed-tag-groups", [...collapsedGroups]);
window.dispatchEvent(new Event("recent-tag-searches-changed"));
}
/\x2f This is a hack used by TagSearchBoxWidget to temporarily disable adding to history.
static disableAddingSearchTags(value)
{
this._disableAddingSearchTags = value;
}
/\x2f recent-tag-searches contains both recent tags and saved tags. Recent tags are listed
/\x2f first for compatibility, followed by a group labels, followed by saved tags. A group
/\x2f label looks like: { "type": "section", "name": "section name" }. Section names are
/\x2f always unique.
/\x2f
/\x2f Return the group name if tag is a saved tag, otherwise null.
static groupNameForTag(tag)
{
let recentTags = ppixiv.settings.get("recent-tag-searches") || [];
let inGroup = null;
for(let recentTag of recentTags)
{
if((recentTag instanceof Object) && recentTag.type == "section")
{
inGroup = recentTag.name;
continue;
}
if(recentTag == tag)
return inGroup;
}
return null;
}
static remove(tag)
{
/\x2f Remove tag from the list. There should normally only be one.
let recentTags = ppixiv.settings.get("recent-tag-searches") || [];
let idx = recentTags.indexOf(tag);
if(idx == -1)
return;
recentTags.splice(idx, 1);
ppixiv.settings.set("recent-tag-searches", recentTags);
window.dispatchEvent(new Event("recent-tag-searches-changed"));
}
/\x2f Move tag in the list so its index is to_idx.
static move(tag, to_idx)
{
/\x2f Remove tag from the list. There should normally only be one.
let recentTags = ppixiv.settings.get("recent-tag-searches") || [];
let idx = recentTags.indexOf(tag);
if(idx == -1)
return;
if(idx == to_idx)
return;
/\x2f If the target index is after its current position, subtract one to adjust for
/\x2f the offset changing as we remove the old one.
if(to_idx > idx)
to_idx--;
recentTags.splice(idx, 1);
recentTags.splice(to_idx, 0, tag);
ppixiv.settings.set("recent-tag-searches", recentTags);
window.dispatchEvent(new Event("recent-tag-searches-changed"));
}
/\x2f Return the index in recent-tag-searches of the given tag or group, or -1 if it
/\x2f doesn't exist.
static findIndex({tag, group, data=null})
{
data ??= ppixiv.settings.get("recent-tag-searches") || [];
for(let idx = 0; idx < data.length; ++idx)
{
let recentTag = data[idx];
if((recentTag instanceof Object) && recentTag.type == "section")
{
if(group != null && recentTag.name == group)
return idx;
}
else
{
if(tag != null && recentTag == tag)
return idx;
}
}
return -1;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/saved-search-tags.js
`),
"/vview/misc/send-image.js": loadBlob("application/javascript",
`/\x2f This handles sending images from one tab to another.
import Widget from '/vview/widgets/widget.js';
import DialogWidget from '/vview/widgets/dialog.js';
import MediaInfo from '/vview/misc/media-info.js';
import { LocalBroadcastChannel } from '/vview/misc/local-api.js';
import { Timer } from '/vview/misc/helpers.js';
import { helpers } from '/vview/misc/helpers.js';
export default class SendImage
{
constructor()
{
/\x2f This is a singleton, so we never close this channel.
this._sendImageChannel = new LocalBroadcastChannel("ppixiv:send-image");
/\x2f A UUID we use to identify ourself to other tabs:
this.tabId = this._createTabId();
this._tabIdTiebreaker = Date.now()
this._pendingMovement = [0, 0];
window.addEventListener("unload", this._windowUnload);
/\x2f If we gain focus while quick view is active, finalize the image. Virtual
/\x2f history isn't meant to be left enabled, since it doesn't interact with browser
/\x2f history. On mobile, do this on any touch.
window.addEventListener(ppixiv.mobile? "pointerdown":"focus", (e) => {
this._finalizeQuickViewImage();
}, { capture: true });
ppixiv.mediaCache.addEventListener("mediamodified", ({mediaId}) => { this._broadcastMediaChanges(mediaId); });
this._sendImageChannel.addEventListener("message", this.receivedMessage);
this._broadcastTabInfo();
/\x2f Ask other tabs to broadcast themselves, so we can see if we have a conflicting
/\x2f tab ID.
this.sendMessage({ message: "list-tabs" });
}
/\x2f Return true if this feature should be displayed.
/\x2f
/\x2f On desktop this can be used across tabs, and when native this can be used
/\x2f across clients. It isn't useful when on mobile and on Pixiv, since there's
/\x2f nowhere for it to go.
get enabled()
{
return ppixiv.native || !ppixiv.mobile;
}
_createTabId(recreate=false)
{
/\x2f If we have a saved tab ID, use it.
/\x2f
/\x2f sessionStorage on Android Chrome is broken. Home screen apps should retain session storage
/\x2f for that particular home screen item, but they don't. (This isn't a problem on iOS.) Use
/\x2f localStorage instead, which means things like linked tabs will link to the device instead of
/\x2f the instance. That's usually good enough if you're linking to a phone or tablet.
let storage = ppixiv.android? localStorage:sessionStorage;
if(!recreate && storage.ppixivTabId)
return storage.ppixivTabId;
/\x2f Make a new ID, and save it to the session. This helps us keep the same ID
/\x2f when we're reloaded.
storage.ppixivTabId = helpers.other.createUuid();
return storage.ppixivTabId;
}
_finalizeQuickViewImage = () =>
{
let args = helpers.args.location;
if(args.hash.has("temp-view"))
{
console.log("Finalizing quick view image because we gained focus");
args.hash.delete("virtual");
args.hash.delete("temp-view");
helpers.navigate(args, { addToHistory: false });
}
}
messages = new EventTarget();
/\x2f If we're sending an image and the page is unloaded, try to cancel it. This is
/\x2f only registered when we're sending an image.
_windowUnload = (e) =>
{
/\x2f If we were sending an image to another tab, cancel it if this tab is closed.
this.sendMessage({
message: "send-image",
action: "cancel",
to: ppixiv.settings.get("linked_tabs", []),
});
}
/\x2f Send an image to another tab. action is either "temp-view", to show the image temporarily,
/\x2f or "display", to navigate to it.
async send_image(mediaId, tabIds, action)
{
if(tabIds.length == 0)
return;
/\x2f Send everything we know about the image, so the receiver doesn't have to
/\x2f do a lookup.
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(mediaId);
let userId = mediaInfo?.userId;
let userInfo = userId? ppixiv.userCache.getUserInfoSync(userId):null;
this.sendMessage({
message: "send-image",
from: this.tabId,
to: tabIds,
mediaId,
action, /\x2f "temp-view" or "display"
mediaInfo: mediaInfo?.serialize,
userInfo,
origin: window.origin,
}, false);
}
_broadcastMediaChanges(mediaId)
{
/\x2f Don't do this if this is coming from another tab, so we don't re-broadcast data
/\x2f we just received.
if(this._handlingBroadcastedMediaInfo)
return;
/\x2f Broadcast the new info to other tabs.
this._broadcastImageInfo(mediaId);
}
/\x2f Send image info to other tabs. We do this when we know about modifications to
/\x2f an image that other tabs might be displaying, such as the like count and crop
/\x2f info. This isn't done when we simply load image data from the server, so we're
/\x2f not constantly sending all search results to all tabs. We don't currently update
/\x2f thumbnail data from image data, so if a tab edits image data while it doesn't have
/\x2f thumbnail data loaded, other tabs with only thumbnail data loaded won't see it.
_broadcastImageInfo(mediaId)
{
/\x2f Send everything we know about the image, so the receiver doesn't have to
/\x2f do a lookup.
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(mediaId);
let userId = mediaInfo?.userId;
let userInfo = userId? ppixiv.userCache.getUserInfoSync(userId):null;
this.sendMessage({
message: "image-info",
from: this.tabId,
mediaId,
mediaInfo: mediaInfo?.serialize,
bookmarkTags: ppixiv.extraCache.getBookmarkDetailsSync(mediaId),
userInfo,
origin: window.origin,
}, false);
}
receivedMessage = async(e) =>
{
let data = e.data;
/\x2f If this message has a target and it's not us, ignore it.
if(data.to && data.to.indexOf(this.tabId) == -1)
return;
let event = new Event(data.message);
event.message = data;
this.messages.dispatchEvent(event);
if(data.message == "tab-info")
{
if(data.from == this.tabId)
{
/\x2f The other tab has the same ID we do. The only way this normally happens
/\x2f is if a tab is duplicated, which will duplicate its sessionStorage with it.
/\x2f If this happens, use tab_id_tiebreaker to decide who wins. The tab with
/\x2f the higher value will recreate its tab ID. This is set to the time when
/\x2f we're loaded, so this will usually cause new tabs to be the one to create
/\x2f a new ID.
if(this._tabIdTiebreaker >= data.tab_id_tiebreaker)
{
console.log("Creating a new tab ID due to ID conflict");
this.tabId = this._createTabId(true /* recreate */ );
}
else
console.log("Tab ID conflict (other tab will create a new ID)");
/\x2f Broadcast info. If we recreated our ID then we want to broadcast it on the
/\x2f new ID. If we didn't, we still want to broadcast it to replace the info
/\x2f the other tab just sent on our ID.
this._broadcastTabInfo();
}
}
else if(data.message == "list-tabs")
{
/\x2f A new tab opened, and is asking for other tabs to broadcast themselves to check for
/\x2f tab ID conflicts.
this._broadcastTabInfo();
}
else if(data.message == "send-image")
{
/\x2f If this message has illust info or thumbnail info and it's on the same origin,
/\x2f register it.
if(data.origin == window.origin)
{
console.log("Registering cached image info");
let { mediaInfo, userInfo } = data;
if(userInfo != null)
ppixiv.userCache.addUserData(userInfo);
if(mediaInfo != null)
ppixiv.mediaCache.addFullMediaInfo(mediaInfo);
}
/\x2f To finalize, just remove preview and quick-view from the URL to turn the current
/\x2f preview into a real navigation. This is slightly different from sending "display"
/\x2f with the illust ID, since it handles navigation during quick view.
if(data.action == "finalize")
{
let args = helpers.args.location;
args.hash.delete("virtual");
args.hash.delete("temp-view");
helpers.navigate(args, { addToHistory: false });
return;
}
if(data.action == "cancel")
{
this.hidePreviewImage();
return;
}
/\x2f Otherwise, we're displaying an image. quick-view displays in quick-view+virtual
/\x2f mode, display just navigates to the image normally.
console.assert(data.action == "temp-view" || data.action == "display", data.actionj);
/\x2f Show the image.
ppixiv.app.showMediaId(data.mediaId, {
tempView: data.action == "temp-view",
source: "temp-view",
/\x2f When we first show a preview, add it to history. If we show another image
/\x2f or finalize the previewed image while we're showing a preview, replace the
/\x2f preview history entry.
addToHistory: !ppixiv.phistory.virtual,
});
}
else if(data.message == "image-info")
{
if(data.origin != window.origin)
return;
/\x2f We need to make sure that we don't recurse: adding media info will trigger mediamodified,
/\x2f which can cause us to come back here and send it again. First flush any waiting mediamodified
/\x2f events, since these happen async and we only want to ignore the ones we cause.
MediaInfo.flushMediaInfoModifiedCallbacks();
/\x2f addFullMediaInfo will trigger mediamodified below. Make sure we don't rebroadcast
/\x2f info that we're receiving here.
this._handlingBroadcastedMediaInfo = true;
try {
/\x2f Another tab is broadcasting updated image info. If we have this image loaded,
/\x2f update it.
let { mediaInfo, bookmarkTags, userInfo } = data;
if(mediaInfo != null)
ppixiv.mediaCache.addFullMediaInfo(mediaInfo);
if(bookmarkTags != null)
ppixiv.extraCache.updateCachedBookmarkTags(data.mediaId, bookmarkTags);
if(userInfo != null)
ppixiv.userCache.addUserData(userInfo);
/\x2f Flush the mediamodified events we just caused before unsetting _handlingBroadcastedMediaInfo.
MediaInfo.flushMediaInfoModifiedCallbacks();
} finally {
this._handlingBroadcastedMediaInfo = false;
}
}
else if(data.message == "preview-mouse-movement")
{
/\x2f Ignore this message if we're not displaying a quick view image.
if(!ppixiv.phistory.virtual)
return;
/\x2f The mouse moved in the tab that's sending quick view. Broadcast an event
/\x2f like pointermove. We have to work around a stupid pair of bugs: Safari
/\x2f doesn't handle setting movementX/movementY in the constructor, and Firefox
/\x2f *only* handles it that way, throwing an error if you try to set it manually.
let event = new PointerEvent("quickviewpointermove", {
movementX: data.x,
movementY: data.y,
});
if(event.movementX == null)
{
event.movementX = data.x;
event.movementY = data.y;
}
window.dispatchEvent(event);
}
}
_broadcastTabInfo = () =>
{
let ourTabInfo = {
message: "tab-info",
tab_id_tiebreaker: this._tabIdTiebreaker,
};
this.sendMessage(ourTabInfo);
}
sendMessage(data, send_to_self)
{
/\x2f Include the tab ID in all messages.
data.from = this.tabId;
this._sendImageChannel.postMessage(data);
if(send_to_self)
{
/\x2f Make a copy of data, so we don't modify the caller's copy.
data = JSON.parse(JSON.stringify(data));
/\x2f Set self to true to let us know that this is our own message.
data.self = true;
this._sendImageChannel.dispatchEvent(new MessageEvent("message", { data: data }));
}
}
/\x2f If we're currently showing a preview image sent from another tab, back out to
/\x2f where we were before.
hidePreviewImage()
{
let wasInPreview = ppixiv.phistory.virtual;
if(!wasInPreview)
return;
ppixiv.phistory.back();
}
sendMouseMovementToLinkedTabs(x, y)
{
if(!ppixiv.settings.get("linked_tabs_enabled"))
return;
let tabIds = ppixiv.settings.get("linked_tabs", []);
if(tabIds.length == 0)
return;
this._pendingMovement[0] += x;
this._pendingMovement[1] += y;
/\x2f Limit the rate we send these, since mice with high report rates can send updates
/\x2f fast enough to saturate BroadcastChannel and cause messages to back up. Add up
/\x2f movement if we're sending too quickly and batch it into the next message.
if(this.lastMovementMessageTime != null && Date.now() - this.lastMovementMessageTime < 10)
return;
this.lastMovementMessageTime = Date.now();
this.sendMessage({
message: "preview-mouse-movement",
x: this._pendingMovement[0],
y: this._pendingMovement[1],
to: tabIds,
}, false);
this._pendingMovement = [0, 0];
}
};
export class LinkTabsPopup extends Widget
{
constructor({...options})
{
super({...options,
classes: "link-tab-popup",
template: \`
Open a
tab on another monitor and click "Link this tab" to send images to it
tab on another monitor and click "Link this tab" to send images to it
Click a
tab to send the image there
\`});
/\x2f Close if the container is clicked, but not if something inside the container is clicked.
this.root.addEventListener("click", (e) => {
if(e.target != this.root)
return;
this.visible = false;
});
/\x2f Periodically send show-send-image to tell other tabs to show SendHerePopup.
/\x2f If they're clicked, they'll send take-image.
helpers.other.interval(() => {
/\x2f We should always be visible when this is called.
console.assert(this.visible);
ppixiv.sendImage.sendMessage({ message: "show-send-image" });
}, 1000, this.shutdownSignal);
ppixiv.sendImage.messages.addEventListener("take-image", ({message}) => {
let tabId = message.from;
ppixiv.sendImage.send_image(mediaId, [tabId], "display");
this.visible = false;
}, this._signal);
}
shutdown()
{
super.shutdown();
ppixiv.sendImage.sendMessage({ message: "hide-send-image" });
}
}
export class SendHerePopup extends DialogWidget
{
static setup()
{
/\x2f Show ourself when we see a show-link-tab message and hide if we see a
/\x2f hide-link-tab-message.
let hideTimer = new Timer(() => {
this.visible = false;
});
let dialog = null;
ppixiv.sendImage.messages.addEventListener("show-send-image", ({message}) => {
SendHerePopup.other_tab_id = message.from;
hideTimer.set(2000);
if(dialog == null)
{
dialog = new SendHerePopup();
dialog.shutdownSignal.addEventListener("abort", () => {
hideTimer.clear();
dialog = null;
});
}
}, this._signal);
ppixiv.sendImage.messages.addEventListener("hide-send-image", ({message}) => {
/\x2f Close the dialog if it's running.
if(dialog)
dialog.visible = false;
}, this._signal);
}
constructor({...options}={})
{
super({...options,
dialogClass: "simple-button-dialog",
small: true,
/\x2f This dialog is closed when the sending tab closes the send image interface.
allowClose: false,
template: \`
\${ helpers.createBoxLink({ label: "Click to send image here", classes: ["link-this-tab"]}) }
\`});
window.addEventListener("click", this.takeImage, { signal: this.shutdownSignal });
}
takeImage = (e) =>
{
/\x2f Send take-image. The sending tab will respond with a send-image message.
ppixiv.sendImage.sendMessage({ message: "take-image", to: [SendHerePopup.other_tab_id] });
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/send-image.js
`),
"/vview/misc/settings.js": loadBlob("application/javascript",
`/\x2f Get and set values in localStorage.
/\x2f
/\x2f When a setting changes, an event with the name of the setting is dispatched.
import { helpers } from '/vview/misc/helpers.js';
export default class Settings extends EventTarget
{
constructor()
{
super();
this.stickySettings = { };
this.sessionSettings = { };
this.defaults = { };
/\x2f We often read settings repeatedly in inner loops, which can become a bottleneck
/\x2f if we decode the JSON-encoded settings from localStorage every time. However, we
/\x2f don't want to cache them aggressively, since changes to settings in one tab should
/\x2f take effect in others immediately. This caches the decoded value of settings, but
/\x2f is cleared as soon as we return to the event loop, so we only cache settings briefly.
this.cache = { };
/\x2f If a setting has no saved value, it'll be cached as no_value. This is different from
/\x2f null, since null is a valid saved value.
this.noValue = new Object();
/\x2f Register settings.
this.configure("zoom-mode", { sticky: true });
this.configure("zoom-level", { sticky: true });
this.configure("linked_tabs", { session: true });
this.configure("linked_tabs_enabled", { session: true, defaultValue: true });
this.configure("volume", { defaultValue: 1 });
this.configure("view_mode", { defaultValue: "illust" });
this.configure("image_editing", { session: true });
this.configure("image_editing_mode", { session: true });
this.configure("inpaint_create_lines", { session: true });
this.configure("slideshow_duration", { defaultValue: 15 });
this.configure("auto_pan", { defaultValue: ppixiv.mobile });
this.configure("auto_pan_duration", { defaultValue: 3 });
this.configure("slideshow_default", { defaultValue: "pan" });
this.configure("upscaling", { defaultValue: false });
this.configure("extraMutes", { defaultValue: [] });
this.configure("slideshow_skips_manga", { defaultValue: false });
this.configure("pixiv_cdn", { defaultValue: "pixiv" }); /\x2f see helpers.pixiv.pixivImageHosts
/\x2f Default to aspect ratio thumbs unless we're on a phone.
this.configure("thumbnail_style", { defaultValue: helpers.other.isPhone()? "square":"aspect" });
this.configure("expand_manga_thumbnails", { defaultValue: false });
this.configure("slideshow_framerate", { defaultValue: 60 });
this.configure("animations_enabled", { defaultValue: ppixiv.mobile });
/\x2f If not null, this limits the size of loaded images.
this.configure("image_size_limit", { defaultValue: ppixiv.mobile? 4000*4000:null });
/\x2f Translation settings:
this.configure("translation_api_url", { defaultValue: "https:/\x2fapi.cotrans.touhou.ai" });
this.configure("translation_low_res", { defaultValue: false });
this.configure("translation_size", { defaultValue: "M" });
this.configure("translation_translator", { defaultValue: "gpt3.5" });
this.configure("translation_direction", { defaultValue: "auto" });
this.configure("translation_language", { defaultValue: "ENG" });
/\x2f Run any one-time settings migrations.
this.migrate();
}
/\x2f Configure settings. This is used for properties of settings that we need to
/\x2f know at startup, so we know where to find them.
/\x2f
/\x2f Sticky settings are saved and loaded like other settings, but once a setting is loaded,
/\x2f changes made by other tabs won't affect this instance. This is used for things like zoom
/\x2f settings, where we want to store the setting, but we don't want each tab to clobber every
/\x2f other tab every time it's changed.
/\x2f
/\x2f Session settings are stored in sessionStorage instead of localStorage. These are
/\x2f local to the tab. They'll be copied into new tabs if a tab is duplicated, but they're
/\x2f otherwise isolated, and lost when the tab is closed.
configure(key, {sticky=false, session=false, defaultValue=null})
{
if(sticky)
{
/\x2f Create the key if it doesn't exist.
if(this.stickySettings[key] === undefined)
this.stickySettings[key] = null;
}
if(session)
this.sessionSettings[key] = true;
if(defaultValue != null)
this.defaults[key] = defaultValue;
}
_getStorageForKey(key)
{
if(this.sessionSettings[key])
return sessionStorage;
else
return localStorage;
}
/\x2f Wait until we return to the event loop, then clear any cached settings.
async _queueClearCache()
{
if(this._clearCacheQueued || Object.keys(this.cache).length == 0)
return;
this._clearCacheQueued = true;
try {
await helpers.other.sleep(0);
this.cache = {};
} finally {
this._clearCacheQueued = false;
}
}
_cacheValue(key, value)
{
this.cache[key] = value;
this._queueClearCache();
}
_getFromStorage(key, defaultValue)
{
/\x2f See if we have a cached value.
if(key in this.cache)
{
let value = this.cache[key];
if(value === this.noValue)
return defaultValue;
else
return value;
}
let storage = this._getStorageForKey(key);
let settingKey = "_ppixiv_" + key;
if(!(settingKey in storage))
{
this._cacheValue(key, this.noValue);
return defaultValue;
}
let result = storage[settingKey];
try {
let value = JSON.parse(result);
this._cacheValue(key, value);
return value;
} catch(e) {
/\x2f Recover from invalid values in storage.
console.warn(e);
console.log("Removing invalid setting:", result);
delete storage.storage_key;
return defaultValue;
}
}
get(key, defaultValue)
{
if(key in this.defaults)
defaultValue = this.defaults[key];
/\x2f If this is a sticky setting and we've already read it, use our loaded value.
if(this.stickySettings[key])
return this.stickySettings[key];
let result = this._getFromStorage(key, defaultValue);
/\x2f If this is a sticky setting, remember it for reuse. This will store the default value
/\x2f if there's no stored setting.
if(this.stickySettings[key] !== undefined)
this.stickySettings[key] = result;
return result;
}
/\x2f Handle migrating settings that have changed.
migrate()
{
}
set(key, value)
{
let storage = this._getStorageForKey(key);
/\x2f JSON.stringify incorrectly serializes undefined as "undefined", which isn't
/\x2f valid JSON. We shouldn't be doing this anyway.
if(value === undefined)
throw "Key can't be set to undefined: " + key;
/\x2f If this is a sticky setting, replace its value.
if(this.stickySettings[key] !== undefined)
this.stickySettings[key] = value;
let settingKey = "_ppixiv_" + key;
storage[settingKey] = JSON.stringify(value);
/\x2f Update the cached value.
this._cacheValue(key, value);
/\x2f Dispatch the setting name for listeners who want to know when a setting changes.
this.dispatchEvent(new Event(key));
/\x2f Dispatch "all" for listeners who want to know when any setting changes.
this.dispatchEvent(new Event("all"));
}
/\x2f Adjust a zoom setting up or down.
adjustZoom(setting, down)
{
let value = this.get(setting);
if(typeof(value) != "number" || isNaN(value))
value = 4;
value += down?-1:+1;
value = helpers.math.clamp(value, 0, 7);
this.sliderValue = value;
this.value = this.sliderValue;
this.set(setting, value);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/settings.js
`),
"/vview/misc/slideshow.js": loadBlob("application/javascript",
`/\x2f This handles the nitty slideshow logic for ViewerImages.
/\x2f
/\x2f Slideshows can be represented as pans, which is the data editing_pan edits
/\x2f and that we save to images. This data is resolution and aspect-ratio independant,
/\x2f so it can be applied to different images and used generically.
/\x2f
/\x2f Slideshows are built into animations using getAnimation, which converts it
/\x2f to an animation based on the image's aspect ratio, the screen's aspect ratio,
/\x2f the desired speed, etc.
import { helpers } from '/vview/misc/helpers.js';
export default class Slideshow
{
constructor({
/\x2f The size of the image being displayed:
width, height,
/\x2f The size of the window:
containerWidth, containerHeight,
/\x2f The minimum zoom level to allow:
minimumZoom,
/\x2f One of "slideshow", "loop" or "auto-pan".
mode,
/\x2f The slideshow is normally clamped to the window. This can be disabled by the
/\x2f editor.
clampToWindow=true,
})
{
this.width = width;
this.height = height;
this.containerWidth = containerWidth;
this.containerHeight = containerHeight;
this.minimumZoom = minimumZoom;
this.mode = mode;
this.clampToWindow = clampToWindow;
}
/\x2f Create the default animation.
getDefaultAnimation()
{
if(this.mode == "slideshow")
{
let slideshowDefault = ppixiv.settings.get("slideshow_default");
if(slideshowDefault == "contain")
return this.getAnimation(Slideshow.pans.stationary);
else
return this.getAnimation(Slideshow.pans.defaultSlideshow);
}
/\x2f Choose whether to use the horizontal or vertical depending on how the image fits the screen.
/\x2f panRatio is < 1 if the image can pan vertically and > 1 if it can pan horizontally.
let imageAspectRatio = this.width / this.height;
let containerAspectRatio = this.containerWidth / this.containerHeight;
let panRatio = imageAspectRatio / containerAspectRatio;
/\x2f If the image can move horizontally in the display, use the horizontal pan. Don't use it
/\x2f if panRatio is too close to 1 (the image fits the screen), since it doesn't zoom and will
/\x2f be stationary.
let horizontal = panRatio > 1.1;
if(containerAspectRatio < 1)
{
/\x2f If the monitor and image are both portrait, the portrait animation usually looks better,
/\x2f even if the image is less portrait than the monitor and panRatio is > 1. Use a higher
/\x2f threshold for portrait monitors so we prefer the portrait animation, even if it cuts off
/\x2f some of the image.
horizontal = panRatio > 1.5;
}
let template = horizontal?
Slideshow.pans.defaultSlideshowHoldLandscape:
Slideshow.pans.defaultSlideshowHoldPortrait;
return this.getAnimation(template);
}
static pans =
{
/\x2f Zoom from the bottom-left to the top-right, with a slight zoom-in at the beginning.
/\x2f For most images, either the horizontal or vertical part of the pan is usually dominant
/\x2f and the other goes away, depending on the aspect ratio. The zoom keeps the animation
/\x2f from being completely linear. We don't move all the way to the top, since for many
/\x2f portrait images that's too far and causes us to pan past the face, fading away while
/\x2f looking at the background.
/\x2f
/\x2f This gives a visually interesting slideshow that works well for most images, and isn't
/\x2f very sensitive to aspect ratio and usually does something reasonable whether the image
/\x2f or monitor are in landscape or portrait.
defaultSlideshow: Object.freeze({
start_zoom: 1.25,
end_zoom: 1,
x1: 0, y1: 1,
x2: 1, y2: 0.1,
}),
/\x2f The default animations for slideshow-hold mode. If the image can move vertically,
/\x2f use a vertical pan with a slight zoom. Otherwise, use a horizontal pan with no zoom.
defaultSlideshowHoldPortrait: Object.freeze({
start_zoom: 1.10,
end_zoom: 1.00,
x1: 0.5, y1: 0.1,
x2: 0.5, y2: 1.0,
}),
defaultSlideshowHoldLandscape: Object.freeze({
x1: 0, y1: 0.5,
x2: 1, y2: 0.5,
}),
/\x2f Display the image statically without panning.
stationary: Object.freeze({
start_zoom: 0,
end_zoom: 0,
x1: 0.5, y1: 0,
x2: 0.5, y2: 0,
}),
}
/\x2f Load a saved animation from a description, which is either created with PanEditor or
/\x2f programmatically here. If pan is null, return the default animation for the current
/\x2f mode.
getAnimation(pan)
{
if(pan == null)
return this.getDefaultAnimation();
/\x2f The target duration of the animation:
let duration =
(this.mode == "slideshow" || this.mode == "loop")? ppixiv.settings.get("slideshow_duration"):
ppixiv.settings.get("auto_pan_duration");
/\x2f If we're viewing a very wide or tall image, such as a 1:20 manga strip, it's useful
/\x2f to clamp the speed of the animation. If this is a 3-second pan, the image would
/\x2f fly past too quickly to see. To adjust for this, we set a maximum speed based on
/\x2f the duration.
/\x2f
/\x2f Scale the max speed based on the duration. With a 5-second duration or less, allow the
/\x2f image to move half a screen per second. At 15 seconds or more, slow it down to no more
/\x2f than a quarter screen per second.
/\x2f
/\x2f This usually only has an effect for exceptionally wide images. Most of the time the
/\x2f maximum speed ends up being much lower than the actual speed, and we use the duration
/\x2f as-is.
let maxSpeed = helpers.math.scaleClamp(duration, 5, 15, 0.5, 0.25);
let animationData = {
duration, maxSpeed,
pan: [{
x: pan.x1, y: pan.y1, zoom: pan.start_zoom ?? 1,
anchor_x: pan.anchor?.left ?? 0.5,
anchor_y: pan.anchor?.top ?? 0.5,
}, {
x: pan.x2, y: pan.y2, zoom: pan.end_zoom ?? 1,
anchor_x: pan.anchor?.right ?? 0.5,
anchor_y: pan.anchor?.bottom ?? 0.5,
}],
};
let animation = this._prepareAnimation(animationData);
/\x2f Decide how to ease this animation.
if(this.mode == "slideshow")
{
/\x2f In slideshow mode, we always fade through black, so we don't need any easing on the
/\x2f transition.
animation.ease = "linear";
}
else if(this.mode == "auto-pan")
{
/\x2f There's no fading in auto-pan mode. Use an ease-out transition, so we start
/\x2f quickly and decelerate at the end. We're jumping from another image anyway
/\x2f so an ease-in doesn't seem needed.
/\x2f
/\x2f A standard ease-out is (0, 0, 0.58, 1). We can change the strength of the effect
/\x2f by changing the third value, becoming completely linear when it reaches 1. Reduce
/\x2f the ease-out effect as the duration gets longer, since longer animations don't need
/\x2f the ease-out as much (they're already slow), so we have more even motion.
let factor = helpers.math.scaleClamp(animation.duration, 5, 15, 0.58, 1);
animation.ease = \`cubic-bezier(0.0, 0.0, \${factor}, 1.0)\`;
}
else if(this.mode == "loop")
{
/\x2f Similar to auto-pan, but using an ease-in-out transition instead, and we always keep
/\x2f some easing around even for very long animations.
let factor = helpers.math.scaleClamp(animation.duration, 5, 15, 0.58, 0.90);
animation.ease = \`cubic-bezier(\${1-factor}, 0.0, \${factor}, 1.0)\`;
}
/\x2f Choose a fade duration. This needs to be quicker if the slideshow is very brief.
animation.fadeIn = this.mode == "loop" || this.mode == "slideshow"? Math.min(duration * 0.1, 2.5):0;
animation.fadeOut = this.mode == "slideshow"? Math.min(duration * 0.1, 2.5):0;
/\x2f If the animation is shorter than the total fade, remove the fade.
if(animation.fadeIn + animation.fadeOut > animation.duration)
animation.fadeIn = animation.fadeOut = 0;
/\x2f For convenience, create KeyframeEffect data.
let points = [];
for(let point of animation.pan)
points.push(\`translateX(\${point.tx}px) translateY(\${point.ty}px) scale(\${point.scale})\`);
animation.keyframes = [
{
transform: points[0],
easing: animation.ease ?? "ease-out",
}, {
transform: points[1],
}
];
return animation;
}
/\x2f Prepare an animation. This figures out the actual translate and scale for each
/\x2f keyframe, and the total duration. The results depend on the image and window
/\x2f size.
_prepareAnimation(animation)
{
/\x2f Calculate the scale and translate for each point.
let pan = [];
for(let point of animation.pan)
{
/\x2f Don't let the zoom level go below this.minimumZoom. This is usually the zoom
/\x2f level where the image covers the screen, and going lower would leave part of
/\x2f the screen blank.
let scale = Math.max(point.zoom, this.minimumZoom);
/\x2f The screen size the image will have:
let zoomedWidth = this.width * scale;
let zoomedHeight = this.height * scale;
/\x2f Initially, the image will be aligned to the top-left of the screen. Shift right and
/\x2f down to align the anchor the origin. This is usually the center of the image.
let { anchor_x=0.5, anchor_y=0.5 } = point;
let tx = this.containerWidth * anchor_x;
let ty = this.containerHeight * anchor_y;
/\x2f Then shift up and left to center the point:
tx -= point.x*zoomedWidth;
ty -= point.y*zoomedHeight;
if(this.clampToWindow)
{
/\x2f Clamp the translation to keep the image in the window. This is inverted, since
/\x2f tx and ty are transitions and not the image position.
let maxX = zoomedWidth - this.containerWidth,
maxY = zoomedHeight - this.containerHeight;
tx = helpers.math.clamp(tx, 0, -maxX);
ty = helpers.math.clamp(ty, 0, -maxY);
/\x2f If the image isn't filling the screen on either axis, center it. This only applies at
/\x2f keyframes (we won't always be centered while animating).
if(zoomedWidth < this.containerWidth)
tx = (this.containerWidth - zoomedWidth) / 2;
if(zoomedHeight < this.containerHeight)
ty = (this.containerHeight - zoomedHeight) / 2;
}
pan.push({ tx, ty, zoomedWidth, zoomedHeight, scale });
}
/\x2f speed is relative to the screen size, so it's not tied too tightly to the resolution
/\x2f of the window. A speed of 1 means we want one diagonal screen size per second.
/\x2f
/\x2f The animation might be translating, or it might be anchored to one corner and just zooming. Treat
/\x2f movement speed as the maximum distance any corner is moving. For example, if we're anchored
/\x2f in the top-left corner and zooming, the top-left corner is stationary, but the bottom-right
/\x2f corner is moving. Use the maximum amount any individual corner is moving as the speed.
let corners = [];
for(let idx = 0; idx < 2; ++idx)
{
/\x2f The bounds of the image at each corner:
corners.push([
{ x: -pan[idx].tx, y: -pan[idx].ty },
{ x: -pan[idx].tx, y: -pan[idx].ty + pan[idx].zoomedHeight },
{ x: -pan[idx].tx + pan[idx].zoomedWidth, y: -pan[idx].ty },
{ x: -pan[idx].tx + pan[idx].zoomedWidth, y: -pan[idx].ty + pan[idx].zoomedHeight },
]);
}
let distanceInPixels = 0;
for(let corner = 0; corner < 4; ++corner)
{
let distance = helpers.math.distance(corners[0][corner], corners[1][corner]);
distanceInPixels = Math.max(distanceInPixels, distance);
}
/\x2f The diagonal size of the screen is what our speed is relative to.
let screenSize = helpers.math.distance({x: 0, y: 0}, { x: this.containerHeight, y: this.containerWidth });
/\x2f Calculate the duration for keyframes that specify a speed.
let duration = animation.duration;
if(animation.maxSpeed != null)
{
/\x2f pixelsPerSecond is the speed we'll move at the given speed. Note that this ignores
/\x2f easing, and we'll actually move faster or slower than this during the transition.
let speed = Math.max(animation.maxSpeed, 0.01);
let pixelsPerSecond = speed * screenSize;
let adjustedDuration = distanceInPixels / pixelsPerSecond;
/\x2f If both speed and a duration were specified, use whichever is slower.
duration = Math.max(animation.duration, adjustedDuration);
/\x2f If we set the speed to 0, then we're not moving at all. Set a small duration
/\x2f to avoid division by zero.
if(duration == 0)
duration = 0.1;
}
return {
pan,
duration,
};
}
static makeFadeIn(target, options)
{
return new Animation(new KeyframeEffect(
target, [
{ opacity: 0, offset: 0 },
{ opacity: 1, offset: 1 },
], {
fill: 'forwards',
...options
}
));
}
static makeFadeOut(target, options)
{
return new Animation(new KeyframeEffect(
target, [
{ opacity: 1, offset: 0 },
{ opacity: 0, offset: 1 },
], {
fill: 'forwards',
...options
}
));
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/slideshow.js
`),
"/vview/misc/tag-translations.js": loadBlob("application/javascript",
`import KeyStorage from '/vview/misc/key-storage.js';
import { helpers } from '/vview/misc/helpers.js';
export default class TagTranslations
{
constructor()
{
this._db = new KeyStorage("ppixiv-tag-translations");
/\x2f Firefox's private mode is broken: instead of making storage local to the session and
/\x2f not saved to disk, it just disables IndexedDB entirely, which is lazy and breaks pages.
/\x2f Keep a copy of tags we've seen in this session to work around this This isn't a problem
/\x2f in other browsers.
this._cache = new Map();
}
/\x2f Return true if translations are enabled by the user.
get enabled()
{
return !ppixiv.settings.get("disable-translations");
}
/\x2f Store a list of tag translations.
/\x2f
/\x2f tags is a dictionary:
/\x2f {
/\x2f original_tag: {
/\x2f en: "english tag",
/\x2f }
/\x2f }
async addTranslationsDict(tags)
{
let translations = [];
for(let tag of Object.keys(tags))
{
let tagInfo = tags[tag];
let tagTranslation = {};
for(let lang of Object.keys(tagInfo))
{
if(tagInfo[lang] == "")
continue;
tagTranslation[lang] = tagInfo[lang];
}
if(Object.keys(tagTranslation).length > 0)
{
translations.push({
tag: tag,
translation: tagTranslation,
});
}
}
this.addTranslations(translations);
}
/\x2f Store a list of tag translations.
/\x2f
/\x2f tagList is a list of
/\x2f {
/\x2f tag: "original tag",
/\x2f translation: {
/\x2f en: "english tag",
/\x2f },
/\x2f }
/\x2f
/\x2f This is the same format that Pixiv uses in newer APIs. Note that we currently only store
/\x2f English translations.
async addTranslations(tagList)
{
let data = {};
for(let tag of tagList)
{
/\x2f If a tag has no keys and no romanization, skip it so we don't fill our database
/\x2f with useless entries.
if((tag.translation == null || Object.keys(tag.translation).length == 0) && tag.romaji == null)
continue;
/\x2f Remove empty translation values.
let translation = {};
for(let lang of Object.keys(tag.translation || {}))
{
let value = tag.translation[lang];
if(value != "")
translation[lang] = value;
}
/\x2f Store the tag data that we care about. We don't need to store post-specific info
/\x2f like "deletable".
let tagInfo = {
tag: tag.tag,
translation: translation,
};
if(tag.romaji)
tagInfo.romaji = tag.romaji;
data[tag.tag] = tagInfo;
if(translation.en)
this._cache.set(tag.tag, translation.en);
}
/\x2f Batch write:
await this._db.multiSet(data);
}
async getTagInfo(tags)
{
/\x2f If the user has disabled translations, don't return any.
if(!this.enabled)
return {};
let result = {};
let translations = await this._db.multiGet(tags);
for(let i = 0; i < tags.length; ++i)
{
if(translations[i] == null)
continue;
result[tags[i]] = translations[i];
}
return result;
}
async getTranslations(tags, language="en")
{
if(!this.enabled)
return {};
let info = await this.getTagInfo(tags);
let result = {};
for(let tag of tags)
{
if(info[tag] == null || info[tag].translation == null)
continue;
/\x2f Skip this tag if we don't have a translation for this language.
let translation = info[tag].translation[language];
if(translation == null)
continue;
result[tag] = translation;
}
/\x2f See if we have cached translations for tags not in the database.
for(let tag of tags)
{
if(result[tag])
continue;
result[tag] = this._cache.get(tag);
}
return result;
}
/\x2f Given a tag search, return a translated search.
async translateTagList(tags, language)
{
/\x2f Pull out individual tags, removing -prefixes.
let splitTags = helpers.pixiv.splitSearchTags(tags);
let tagList = [];
for(let tag of splitTags)
{
let [prefix, unprefixedTag] = helpers.pixiv.splitTagPrefixes(tag);
tagList.push(unprefixedTag);
}
/\x2f Get translations.
let translatedTags = await this.getTranslations(tagList, language);
/\x2f Put the search back together.
let result = [];
for(let oneTag of splitTags)
{
let prefixAndTag = helpers.pixiv.splitTagPrefixes(oneTag);
let prefix = prefixAndTag[0];
let tag = prefixAndTag[1];
if(translatedTags[tag])
tag = translatedTags[tag];
result.push(prefix + tag);
}
return result;
}
/\x2f A shortcut to retrieve one translation. If no translation is available, returns the
/\x2f original tag.
async getTranslation(tag, language="en")
{
let result = this._cache.get(tag);
if(result != null)
return result;
let translatedTags = await this.getTranslations([tag], "en");
if(translatedTags[tag])
return translatedTags[tag];
else
return tag;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/tag-translations.js
`),
"/vview/misc/user-cache.js": loadBlob("application/javascript",
`/\x2f Lookup and caching for user data.
import { helpers } from '/vview/misc/helpers.js';
export default class UserCache extends EventTarget
{
constructor()
{
super();
this._userData = { };
this._allUserFollowTags = null;
this._userFollowInfo = { };
this._userInfoLoads = {};
this._followInfoLoads = {};
this._userFollowTagsLoad = null;
this._userProfile = { }
this._userProfileLoads = { }
this._nonexistantUserIds = { };
this._userBoothUrls = { };
}
async getUserIdForMediaId(mediaId)
{
if(mediaId == null)
return null;
/\x2f If the media ID is a user ID, use it.
let { type, id } = helpers.mediaId.parse(mediaId);
if(type == "user")
return id;
/\x2f Fetch media info. We don't need to coalesce these requests if this is called
/\x2f multiple times, since MediaCache will do that for us.
let mediaInfo = await ppixiv.mediaCache.getMediaInfo(mediaId, { full: false });
return mediaInfo?.userId;
}
/\x2f Fire usermodified to let listeners know that a user's info changed.
callUserModifiedCallbacks(userId)
{
console.log(\`User modified: \${userId}\`);
let event = new Event("usermodified");
event.userId = userId;
this.dispatchEvent(event);
}
getUserLoadError(userId)
{
return this._nonexistantUserIds[userId];
}
/\x2f The user request can either return a small subset of data (just the username,
/\x2f profile image URL, etc.), or full data with a webpage URL, Twitter, etc. User
/\x2f preloads often only have the smaller set, and we want to use the preload data
/\x2f whenever possible.
async getUserInfo(userId, {full=false}={})
{
return await this._getUserInfo(userId, full);
}
/\x2f Return user info for userId if it's already cached, otherwise return null.
getUserInfoSync(userId, {full=false}={})
{
let userInfo = this._userData[userId];
if(userInfo == null)
return null;
/\x2f If full info was requested and we only have partial info, don't return it.
/\x2f (Note that Pixiv's "partial" flag is backwards.)
if(full && !userInfo.partial)
return null;
return userInfo;
}
/\x2f Load userId if needed.
/\x2f
/\x2f If loadFullData is false, it means the caller only needs partial data, and we
/\x2f won't send a request if we already have that, but if we do end up loading the
/\x2f user we'll always load full data.
/\x2f
/\x2f Some sources only give us partial data, which only has a subset of keys. See
/\x2f _checkUserData for the keys available with partial and full data.
_getUserInfo(userId, loadFullData)
{
if(userId == null)
return null;
/\x2f Stop if we know this user doesn't exist.
let baseMediaId = \`user:\${userId}\`;
if(baseMediaId in this._nonexistantUserIds)
return null;
/\x2f If we already have the user info for this illustration (and it's full data, if
/\x2f requested), we're done.
if(this._userData[userId] != null)
{
/\x2f userInfo.partial is 1 if it's the full data (this is backwards). If we need
/\x2f full data and we only have partial data, we still need to request data.
if(!loadFullData || this._userData[userId].partial)
{
return new Promise(resolve => {
resolve(this._userData[userId]);
});
}
}
/\x2f If there's already a load in progress, just return it.
if(this._userInfoLoads[userId] != null)
return this._userInfoLoads[userId];
this._userInfoLoads[userId] = this._loadUserInfo(userId);
this._userInfoLoads[userId].then(() => {
delete this._userInfoLoads[userId];
});
return this._userInfoLoads[userId];
};
async _loadUserInfo(userId)
{
/\x2f -1 is for illustrations with no user, which is used for local images.
if(userId == -1)
return null;
/\x2f console.log("Fetch user", userId);
let result = await helpers.pixivRequest.get(\`/ajax/user/\${userId}\`, {full:1});
if(result == null || result.error)
{
let message = result?.message || "Error loading user";
console.log(\`Error loading user \${userId}: \${message}\`);
this._nonexistantUserIds[\`user:\${userId}\`] = message;
return null;
}
return this._loadedUserInfo(result);
}
/\x2f Add user data that we received from other sources.
addUserData(userData)
{
this._loadedUserInfo({
body: userData,
});
}
_loadedUserInfo = (userResult) =>
{
if(userResult.error)
return;
let userData = userResult.body;
userData = this._checkUserData(userData);
let userId = userData.userId;
/\x2f console.log("Got user", userId);
/\x2f Store the user data.
if(this._userData[userId] == null)
this._userData[userId] = userData;
else
{
/\x2f If we already have an object for this user, we're probably replacing partial user data
/\x2f with full user data. Don't replace the userData object itself, since widgets will have
/\x2f a reference to the old one which will become stale. Just replace the data inside the
/\x2f object.
let oldUserData = this._userData[userId];
for(let key of Object.keys(oldUserData))
delete oldUserData[key];
for(let key of Object.keys(userData))
oldUserData[key] = userData[key];
}
return userData;
}
_checkUserData(userData)
{
/\x2f Make sure that the data contains all of the keys we expect, so we catch any unexpected
/\x2f missing data early. Discard keys that we don't use, to make sure we update this if we
/\x2f make use of new keys. This makes sure that the user data keys are always consistent.
let fullKeys = [
'userId',
'background',
/\x2f 'image',
'imageBig',
/\x2f 'isBlocking',
'isFollowed',
'isMypixiv',
'name',
'partial',
'social',
'commentHtml',
'acceptRequest',
/\x2f 'premium',
/\x2f 'sketchLiveId',
/\x2f 'sketchLives',
];
let partialKeys = [
'userId',
'isFollowed',
'name',
'imageBig',
'partial',
];
/\x2f partial is 0 if this is partial user data and 1 if it's full data (this is backwards).
let expectedKeys = userData.partial? fullKeys:partialKeys;
let remappedUserData = { };
for(let key of expectedKeys)
{
if(!(key in userData))
{
console.warn("User info is missing key:", key);
continue;
}
remappedUserData[key] = userData[key];
}
return remappedUserData;
}
/\x2f User profiles are separate from user info.
getUserProfile(userId)
{
if(userId == null)
return null;
if(this._userProfile[userId])
return this._userProfile[userId];
/\x2f Stop if we know this user doesn't exist.
let baseMediaId = \`user:\${userId}\`;
if(baseMediaId in this._nonexistantUserIds)
return null;
/\x2f If there's already a load in progress, just return it.
if(this._userProfileLoads[userId] != null)
return this._userProfileLoads[userId];
this._userProfileLoads[userId] = this._loadUserProfile(userId);
this._userProfileLoads[userId].then(() => {
delete this._userProfileLoads[userId];
});
return this._userProfileLoads[userId];
}
getUserProfileSync(userId)
{
return this._userProfile[userId];
}
async _loadUserProfile(userId)
{
/\x2f -1 is for illustrations with no user, which is used for local images.
if(userId == -1)
return null;
/\x2f console.log("Fetch user", userId);
let result = helpers.pixivRequest.get(\`/ajax/user/\${userId}/profile/all\`);
if(result == null || result.error)
{
let message = result?.message || "Error loading user";
console.log(\`Error loading user \${userId}: \${message}\`);
this._nonexistantUserIds[\`user:\${userId}\`] = message;
return null;
}
this._userProfile[userId] = result;
return result;
}
/\x2f Return the URL to a user's Booth page, if any. The results are cached.
getUserBoothUrl(userId)
{
/\x2f Stop if this has already been loaded. Note that _userBoothUrls[userId]
/\x2f may be null.
if(userId in this._userBoothUrls)
return this._userBoothUrls[userId];
let promise = this._loadUserBoothUrl(userId);
promise.then((url) => this._userBoothUrls[userId] = url);
return promise;
}
async _loadUserBoothUrl(userId)
{
/\x2f Check if the user's profile says he has a Booth account first.
let userProfile = await ppixiv.userCache.getUserProfile(userId);
if(!userProfile.body?.externalSiteWorksStatus?.booth)
return null;
let boothInfo = await helpers.pixivRequest.get("https:/\x2fapi.booth.pm/pixiv/shops/show.json", {
pixiv_user_id: userId,
adult: "exclude",
/\x2f We don't need item results, but 1 is the minimum.
limit: 1,
});
if(boothInfo.error)
return null;
return boothInfo.body.url;
}
/\x2f Load the follow info for a followed user, which includes follow tags and whether the
/\x2f follow is public or private. If the user isn't followed, return null.
/\x2f
/\x2f This can also fetch the results of loadAllUserFollowTags and will cache it if
/\x2f available, so if you're calling both getUserFollowInfo and loadAllUserFollowTags,
/\x2f call this first.
async getUserFollowInfo(userId, { refresh=false }={})
{
/\x2f If we request following info for a user we're not following, we'll get a 400. This
/\x2f isn't great, since it means we have to make an extra API call first to see if we're
/\x2f following to avoid spamming request errors.
let userData = await this.getUserInfo(userId);
if(!userData.isFollowed)
{
delete this._userFollowInfo[userId];
return null;
}
/\x2f Stop if this user's follow info is already loaded.
if(!refresh && this._userFollowInfo[userId])
return this._userFollowInfo[userId];
/\x2f If another request is already running for this user, wait for it to finish and use
/\x2f its result.
if(this._followInfoLoads[userId])
{
await this._followInfoLoads[userId];
return this._userFollowInfo[userId];
}
this._followInfoLoads[userId] = helpers.pixivRequest.get("/ajax/following/user/details", {
user_id: userId,
lang: "en",
});
let data = await this._followInfoLoads[userId];
this._followInfoLoads[userId] = null;
if(data.error)
{
console.log(\`Couldn't request follow info for \${userId}\`);
return null;
}
/\x2f This returns both selected tags and all follow tags, so we can also update
/\x2f _userFollowInfo.
let allTags = [];
let tags = new Set();
for(let tagInfo of data.body.tags)
{
allTags.push(tagInfo.name);
if(tagInfo.selected)
tags.add(tagInfo.name);
}
this._setCachedAllUserFollowTags(allTags);
this._userFollowInfo[userId] = {
tags,
followingPrivately: data.body.restrict == "1",
}
return this._userFollowInfo[userId];
}
getUserFollowInfoSync(userId)
{
return this._userFollowInfo[userId];
}
/\x2f Load all of the user's follow tags. This is cached unless refresh is true.
async loadAllUserFollowTags({ refresh=false }={})
{
/\x2f Follow tags require premium.
if(!ppixiv.pixivInfo.premium)
return [];
if(!refresh && this._allUserFollowTags != null)
return this._allUserFollowTags;
/\x2f If another call is already running, wait for it to finish and use its result.
if(this._userFollowTagsLoad)
{
await this._userFollowTagsLoad;
return this._allUserFollowTags;
}
/\x2f The only ways to get this list seem to be from looking at an already-followed
/\x2f user, or looking at the follow list.
this._userFollowTagsLoad = helpers.pixivRequest.get(\`/ajax/user/\${ppixiv.pixivInfo.userId}/following\`, {
offset: 0,
limit: 1,
rest: "show",
});
let result = await this._userFollowTagsLoad;
this._userFollowTagsLoad = null;
if(result.error)
console.log("Error retrieving follow tags");
else
this._setCachedAllUserFollowTags(result.body.followUserTags);
return this._allUserFollowTags;
}
/\x2f Update the list of tags we've followed a user with.
_setCachedAllUserFollowTags(tags)
{
tags.sort();
/\x2f Work around a Pixiv bug. If you ever use the follow user API with a tag
/\x2f of null (instead of ""), it returns an internal error and you end up with
/\x2f a "null" tag in your tag list that never goes away. It seems like it stores
/\x2f the actual null value, which then gets coerced to the string "null" in the
/\x2f API. Remove it, since it's annoying (sorry if you really wanted to tag
/\x2f people as "null").
let idx = tags.indexOf("null");
if(idx != -1)
tags.splice(idx, 1);
this._allUserFollowTags = tags;
}
/\x2f Add a new tag to _allUserFollowTags when the user creates a new one.
addCachedUserFollowTags(tag)
{
if(this._allUserFollowTags == null || this._allUserFollowTags.indexOf(tag) != -1)
return;
this._allUserFollowTags.push(tag);
this._allUserFollowTags.sort();
}
/\x2f Return the list of the user's follow tags if it's been loaded, otherwise return null.
getAllUserFollowTagsSync()
{
return this._allUserFollowTags;
}
/\x2f Update the follow info for a user. This is used after updating a follow.
updateCachedFollowInfo(userId, followed, followInfo)
{
/\x2f If user info isn't loaded, follow info isn't either.
let userInfo = this.getUserInfoSync(userId);
if(userInfo == null)
return;
userInfo.isFollowed = followed;
if(!followed)
{
delete this._userFollowInfo[userId];
}
else
{
this._userFollowInfo[userId] = followInfo;
}
this.callUserModifiedCallbacks(userId);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/user-cache.js
`),
"/vview/misc/zip-image-downloader.js": loadBlob("application/javascript",
`/\x2f Download a ZIP, returning files as they download in the order they're stored
/\x2f in the ZIP.
/\x2f A wrapper for the clunky ReadableStream API that lets us do at basic
/\x2f thing that API forgot about: read a given number of bytes at a time.
import { helpers } from '/vview/misc/helpers.js';
class IncrementalReader
{
constructor(reader, options={})
{
this.reader = reader;
this.position = 0;
/\x2f Check if this is an ArrayBuffer. "reader instanceof ArrayBuffer" is
/\x2f broken in Firefox (but what isn't?).
if("byteLength" in reader)
{
this.inputBuffer = new Int8Array(reader);
this.inputBufferFinished = true;
}
else
{
this.inputBuffer = new Int8Array(0);
this.inputBufferFinished = false;
}
/\x2f If set, this is called with the current read position as we read data.
this.onprogress = options.onprogress;
}
async read(bytes)
{
let buffer = new ArrayBuffer(bytes);
let result = new Int8Array(buffer);
let outputPos = 0;
while(outputPos < bytes)
{
/\x2f See if we have leftover data in this.inputBuffer.
if(this.inputBuffer.byteLength > 0)
{
/\x2f Create a view of the bytes we want to copy, then use set() to copy them to the
/\x2f output. This is just memcpy(), why can't you just set(buf, srcPos, srcLen, dstPos)?
let copyBytes = Math.min(bytes-outputPos, this.inputBuffer.byteLength);
let buf = new Int8Array(this.inputBuffer.buffer, this.inputBuffer.byteOffset, copyBytes);
result.set(buf, outputPos);
outputPos += copyBytes;
/\x2f Remove the data we read from the buffer. This is just making the view smaller.
this.inputBuffer = new Int8Array(this.inputBuffer.buffer, this.inputBuffer.byteOffset + copyBytes);
continue;
}
/\x2f If we need more data and there isn't any, we've passed EOF.
if(this.inputBufferFinished)
throw new Error("Incomplete file");
let { value, done } = await this.reader.read();
if(value == null)
value = new Int8Array(0);
this.inputBufferFinished = done;
this.inputBuffer = value;
if(value)
this.position += value.length;
if(this.onprogress)
this.onprogress(this.position);
};
return buffer;
}
}
export default class ZipImageDownloader
{
constructor(url, options={})
{
this.url = url;
/\x2f An optional AbortSignal.
this.signal = options.signal;
this.onprogress = options.onprogress;
this.startPromise = this.start();
}
async start()
{
let response = await helpers.pixivRequest.sendPixivRequest({
method: "GET",
url: this.url,
responseType: "arraybuffer",
signal: this.signal,
});
/\x2f If this fails, the error was already logged. The most common cause is being cancelled.
if(response == null)
return null;
/\x2f We could also figure out progress from frame numbers, but doing it with the actual
/\x2f amount downloaded is more accurate, and the server always gives us content-length.
this.totalLength = response.headers.get("Content-Length");
if(this.totalLength != null)
this.totalLength = parseInt(this.totalLength);
/\x2f Firefox is in the dark ages and can't stream data from fetch. Fall back
/\x2f on loading the whole body if we don't have getReader.
let fetchReader;
if(response.body.getReader)
fetchReader = response.body.getReader();
else
fetchReader = await response.arrayBuffer();
this.reader = new IncrementalReader(fetchReader, {
onprogress: (position) => {
if(this.onprogress && this.totalLength > 0)
{
let progress = position / this.totalLength;
this.onprogress(progress);
}
}
});
}
async getNextFrame()
{
/\x2f Wait for startPromise to complete, if it hasn't yet.
await this.startPromise;
if(this.reader == null)
return null;
/\x2f Read the local file header up to the filename.
let header = await this.reader.read(30);
let view = new DataView(header);
/\x2f Check the header.
let magic = view.getUint32(0, true);
if(magic == 0x02014b50)
{
/\x2f Once we see the central directory, we're at the end.
return null;
}
if(magic != 0x04034b50)
throw Error("Unrecognized file");
let compression = view.getUint16(8, true);
if(compression != 0)
throw Error("Unsupported compression method");
/\x2f Get the variable field lengths, and skip over the rest of the local file headers.
let fileSize = view.getUint32(22, true);
let filenameSize = view.getUint16(26, true);
let extraSize = view.getUint16(28, true);
await this.reader.read(filenameSize);
await this.reader.read(extraSize);
/\x2f Read the file.
let result = await this.reader.read(fileSize);
/\x2f Read past the data descriptor if this file has one.
let flags = view.getUint16(6, true);
if(flags & 8)
{
let descriptor = await this.reader.read(16);
let descriptorView = new DataView(descriptor);
if(descriptorView.getUint32(0, true) != 0x08074b50)
throw Error("Unrecognized file");
}
return result;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/misc/zip-image-downloader.js
`),
"/vview/screen-illust/desktop-image-info.js": loadBlob("application/javascript",
`/\x2f This handles the desktop overlay UI on the illustration page.
import Widget from '/vview/widgets/widget.js';
import { BookmarkButtonWidget, LikeButtonWidget } from '/vview/widgets/illust-widgets.js';
import { BookmarkTagDropdownOpener } from '/vview/widgets/bookmark-tag-list.js';
import { AvatarWidget } from '/vview/widgets/user-widgets.js';
import { SettingsDialog } from '/vview/widgets/settings-widgets.js';
import Actions from '/vview/misc/actions.js';
import TagListWidget from '/vview/widgets/tag-list-widget.js';
import LocalAPI from '/vview/misc/local-api.js';
import { getUrlForMediaId } from '/vview/misc/media-ids.js'
import { helpers, ClassFlags } from '/vview/misc/helpers.js';
export default class DesktopImageInfo extends Widget
{
constructor({...options})
{
super({
...options,
visible: false,
template: \`
tab to send the image there
\${ helpers.createIcon("mat:translate") }
1234
\${ helpers.createIcon("mat:block", { classes: ["muted-icon"] }) }
\${ helpers.createBoxLink({label: "All", popup: "Show all works", dataType: "content-all" }) }
\${ helpers.createBoxLink({label: "Illustrations", popup: "Show illustrations only", dataType: "content-illust" }) }
\${ helpers.createBoxLink({label: "Animations", popup: "Show animations only", dataType: "content-ugoira" }) }
\${ helpers.createBoxLink({label: "Manga", popup: "Show manga only", dataType: "content-manga" }) }
\`,
});
/\x2f Set up the content links.
/\x2f grr: this doesn't work with the dropdown text
for(let content of ["all", "illust", "ugoira", "manga"])
{
dataSource.setItem(dropdown, {
type: "content-" + content, /\x2f content-all, content-illust, etc
fields: {content},
defaults: {content: "all"},
adjustUrl: (args) => {
if(content == currentContent)
return;
/\x2f If the current mode and ages combination doesn't exist in the content type
/\x2f this link will switch to, also reset the mode to daily, since it exists for
/\x2f all "all-ages" modes.
let currentRankingType = rankingTypes[currentMode];
console.assert(currentRankingType, currentMode);
let switching_to_content_key = contentKeyFor(content, currentAges);
if(currentRankingType.content.indexOf(switching_to_content_key) == -1)
args.query.set("mode", "daily");
},
});
}
return dropdown;
},
});
/\x2f Create the mode dropdown.
new DropdownMenuOpener({
button: this.querySelector(".mode-button"),
createDropdown: ({...options}) => {
let dropdown = new Widget({
...options,
template: \`
\${ helpers.createBoxLink({label: "All", dataType: "time-all", dataset: { default: true } }) }
\${ helpers.createBoxLink({label: "This week", dataType: "time-week", dataset: { shortLabel: "Weekly" } }) }
\${ helpers.createBoxLink({label: "This month", dataType: "time-month" }) }
\${ helpers.createBoxLink({label: "This year", dataType: "time-year" }) }
\`,
});
/\x2f The time filter is a range, but I'm not sure what time zone it filters in
/\x2f (presumably either JST or UTC). There's also only a date and not a time,
/\x2f which means you can't actually filter "today", since there's no way to specify
/\x2f which "today" you mean. So, we offer filtering starting at "this week",
/\x2f and you can just use the default date sort if you want to see new posts.
/\x2f For "this week", we set the end date a day in the future to make sure we
/\x2f don't filter out posts today.
dataSource.setItem(dropdown, { type: "time-all", fields: {scd: null, ecd: null} });
let formatDate = (date) =>
{
return (date.getYear() + 1900).toFixed().padStart(2, "0") + "-" +
(date.getMonth() + 1).toFixed().padStart(2, "0") + "-" +
date.getDate().toFixed().padStart(2, "0");
};
let setDateFilter = (name, start, end) =>
{
let startDate = formatDate(start);
let endDate = formatDate(end);
dataSource.setItem(dropdown, { type: name, fields: {scd: startDate, ecd: endDate} });
};
let tomorrow = new Date(); tomorrow.setDate(tomorrow.getDate() + 1);
let lastWeek = new Date(); lastWeek.setDate(lastWeek.getDate() - 7);
let lastMonth = new Date(); lastMonth.setMonth(lastMonth.getMonth() - 1);
let lastYear = new Date(); lastYear.setFullYear(lastYear.getFullYear() - 1);
setDateFilter("time-week", lastWeek, tomorrow);
setDateFilter("time-month", lastMonth, tomorrow);
setDateFilter("time-year", lastYear, tomorrow);
for(let yearsAgo = 1; yearsAgo <= 7; ++yearsAgo)
{
let startYear = new Date(); startYear.setFullYear(startYear.getFullYear() - yearsAgo - 1);
let endYear = new Date(); endYear.setFullYear(endYear.getFullYear() - yearsAgo);
setDateFilter("time-years-ago-" + yearsAgo, startYear, endYear);
}
/\x2f The "reset search" button removes everything in the query except search terms, and resets
/\x2f the search type.
let box = this.querySelector(".reset-search");
let url = new URL(this.dataSource.url);
let tag = helpers.pixiv.getSearchTagsFromUrl(url);
url.search = "";
if(tag == null)
url.pathname = "/tags";
else
url.pathname = "/tags/" + encodeURIComponent(tag) + "/artworks";
box.href = url;
return dropdown;
},
});
/\x2f Create the tag dropdown for the search page input.
this.tagSearchBox = new TagSearchBoxWidget({ container: this.querySelector(".tag-search-box-container") });
/\x2f Fill the search box with the current tag.
/\x2f
/\x2f Add a space to the end, so another tag can be typed immediately after focusing an existing search.
let search = this.dataSource._searchTags;
if(search)
search += " ";
this.querySelector(".tag-search-box .input-field-container > input").value = search;
}
refresh()
{
super.refresh();
helpers.html.setClass(this.querySelector(".related-tags-button"), "disabled", this.dataSource.relatedTags == null);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/sites/pixiv/data-sources/search-illusts.js
`),
"/vview/sites/pixiv/data-sources/search-users.js": loadBlob("application/javascript",
`import DataSource from '/vview/sites/data-source.js';
import Widget from '/vview/widgets/widget.js';
import { helpers } from '/vview/misc/helpers.js';
export default class DataSource_SearchUsers extends DataSource
{
get name() { return "search-users"; }
get allowExpandingMangaPages() { return false; }
async loadPageInternal(page)
{
if(!this.username)
return;
/\x2f This API only returns 10 results per page This search only seems useful for looking
/\x2f for somebody specific, so just load the first page to prevent spamming the API.
if(page > 1)
return;
/\x2f Use the mobile API for this. THe desktop site has no API and has to be scraped, and if
/\x2f we're on mobile we can't access the desktop page, but the mobile site's API works either
/\x2f way.
let result = await helpers.pixivRequest.get("/touch/ajax/search/users", {
nick: this.username,
s_mode: "s_usr",
p: page,
lang: "en",
});
if(result.error)
{
ppixiv.message.show("Error reading search: " + result.message);
return;
}
/\x2f This returns images for each user, but that doesn't seem useful (this is a user search,
/\x2f not discovery), and the format is different from everything else, so it's a bit of a pain
/\x2f to use. Just return users.
let mediaIds = [];
for(let user of result.body.users)
{
ppixiv.extraCache.addQuickUserData({
userId: user.user_id,
userName: user.user_name,
profileImageUrl: user.profile_img.main,
});
mediaIds.push(\`user:\${user.user_id}\`);
}
return { mediaIds };
}
get username()
{
return this.url.searchParams.get("nick") ?? "";
}
get ui()
{
return UI;
}
get hasNoResults()
{
/\x2f Don't display "No Results" while we're still waiting for the user to enter a search.
if(!this.username)
return false;
return super.hasNoResults;
}
get pageTitle()
{
let search = this.username;
if(search)
return "Search users: " + search;
else
return "Search users";
}
getDisplayingText()
{
return this.pageTitle;
}
}
class UI extends Widget
{
constructor({ dataSource, ...options })
{
super({ ...options, template: \`
\${ helpers.createBoxLink({label: "1", dataType: "time-years-ago-1", dataset: { shortLabel: "1 year" } }) }
\${ helpers.createBoxLink({label: "2", dataType: "time-years-ago-2", dataset: { shortLabel: "2 years" } }) }
\${ helpers.createBoxLink({label: "3", dataType: "time-years-ago-3", dataset: { shortLabel: "3 years" } }) }
\${ helpers.createBoxLink({label: "4", dataType: "time-years-ago-4", dataset: { shortLabel: "4 years" } }) }
\${ helpers.createBoxLink({label: "5", dataType: "time-years-ago-5", dataset: { shortLabel: "5 years" } }) }
\${ helpers.createBoxLink({label: "6", dataType: "time-years-ago-6", dataset: { shortLabel: "6 years" } }) }
\${ helpers.createBoxLink({label: "7", dataType: "time-years-ago-7", dataset: { shortLabel: "7 years" } }) }
years ago
\${ helpers.createBoxLink({label: "Note", icon: "warning", classes: ["mute-warning-button", "clickable"] }) }
You can mute any number of tags and users.
However, since you don't have Premium, mutes will only be saved in your browser
and can't be saved to your Pixiv account. They will be lost if you change
browsers or clear site data.
\${ helpers.createBoxLink({label: "Mute", classes: ["toggle-mute"] }) }
\`});
helpers.html.setClass(entry, "muted", isMuted);
entry.querySelector(".toggle-mute .label").innerText = isMuted? "Muted":"Mute";
entry.querySelector(".tag-name").innerText = label;
mutedList.appendChild(entry);
return entry;
};
let mutedList = this.root.querySelector(".post-mute-list");
helpers.html.removeElements(mutedList);
/\x2f Add an entry for the user.
{
let isMuted = ppixiv.muting.isUserIdMuted(userId);
let entry = createEntry(\`User: \${username}\`, isMuted);
entry.querySelector(".toggle-mute").addEventListener("click", async (e) => {
if(isMuted)
{
ppixiv.muting.removeExtraMute(userId, {type: "user"});
await ppixiv.muting.removePixivMute(userId, {type: "user"});
} else {
await ppixiv.muting.addMute(userId, username, {type: "user"});
}
this.refresh();
});
}
/\x2f Add each tag on the image.
for(let tag of tags)
{
let isMuted = ppixiv.muting.anyTagMuted([tag]);
let label = tag;
let tagTranslation = translatedTags[tag];
if(tagTranslation)
label = \`\${tagTranslation} (\${tag})\`;
let entry = createEntry(label, isMuted);
entry.querySelector(".toggle-mute").addEventListener("click", async (e) => {
if(isMuted)
{
ppixiv.muting.removeExtraMute(tag, {type: "tag"});
await ppixiv.muting.removePixivMute(tag, {type: "tag"});
} else {
await ppixiv.muting.addMute(tag, tag, {type: "tag"});
}
this.refresh();
});
}
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/widgets/mutes.js
`),
"/vview/widgets/prompts.js": loadBlob("application/javascript",
`/\x2f A popup for inputting text.
import DialogWidget from '/vview/widgets/dialog.js';
import { helpers } from '/vview/misc/helpers.js';
export class TextPrompt extends DialogWidget
{
static async prompt(options)
{
let prompt = new this(options);
return await prompt.result;
}
constructor({
title,
value="",
...options
}={})
{
super({...options, dialogClass: "text-entry-popup", small: true, header: title, template: \`
\${helpers.createBoxLink({
label: "Yes",
icon: "image",
classes: ["yes"],
})}
\${helpers.createBoxLink({
label: "No",
icon: "image",
classes: ["no"],
})}
\`});
if(text)
{
let textNode = this.root.querySelector(".text");
textNode.innerText = text;
textNode.hidden = false;
}
this.result = new Promise((completed, cancelled) => {
this._completed = completed;
});
this.root.querySelector(".yes").addEventListener("click", () => this.submit(true), { signal: this.shutdownSignal });
this.root.querySelector(".no").addEventListener("click", () => this.submit(false), { signal: this.shutdownSignal });
}
onkeydown = (e) =>
{
if(e.key == "Escape")
{
e.preventDefault();
e.stopPropagation();
this.submit(false);
}
if(e.key == "Enter")
{
e.preventDefault();
e.stopPropagation();
this.submit(true);
}
}
visibilityChanged()
{
super.visibilityChanged();
if(this.visible)
{
window.addEventListener("keydown", this.onkeydown, { signal: this.visibilityAbort.signal });
}
else
{
/\x2f If we didn't complete by now, cancel.
this._completed(null);
}
}
/\x2f Close the popup and call the completion callback with the result.
submit = (result) =>
{
this._completed(result);
this.visible = false;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/widgets/prompts.js
`),
"/vview/widgets/settings-widgets.js": loadBlob("application/javascript",
`import Widget from '/vview/widgets/widget.js';
import { MenuOptionButton, MenuOptionRow, MenuOptionOptionsSetting, MenuOptionsThumbnailSizeSlider } from '/vview/widgets/menu-option.js';
import { MenuOptionSliderSetting, MenuOptionToggleSetting } from '/vview/widgets/menu-option.js';
import { createTranslationSettingsWidgets } from '/vview/misc/image-translation.js';
import { EditMutedTagsWidget } from '/vview/widgets/mutes.js';
import { LinkTabsPopup } from '/vview/misc/send-image.js';
import DialogWidget from '/vview/widgets/dialog.js';
import PointerListener from '/vview/actors/pointer-listener.js';
import { helpers } from '/vview/misc/helpers.js';
import WhatsNew from '/vview/widgets/whats-new.js';
import { ConfirmPrompt } from '/vview/widgets/prompts.js';
import LocalAPI from '/vview/misc/local-api.js';
function createSettingsWidget({ globalOptions })
{
/\x2f Each settings widget. Doing it this way lets us move widgets around in the
/\x2f menu without moving big blocks of code around.
return {
thumbnailSize: () => {
let button = new MenuOptionButton({
...globalOptions,
label: "Thumbnail size",
});
new MenuOptionsThumbnailSizeSlider({
container: button.querySelector(".widget-box"),
setting: "thumbnail-size",
classes: ["size-slider"],
min: 0,
max: 7,
});
},
disabledByDefault: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Disabled by default",
setting: "disabled-by-default",
explanationEnabled: "Go to Pixiv by default.",
explanationDisabled: "Go here by default.",
});
},
noHideCursor: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Hide cursor",
setting: "no-hide-cursor",
invertDisplay: true,
explanationEnabled: "Hide the cursor while the mouse isn't moving.",
explanationDisabled: "Don't hide the cursor while the mouse isn't moving.",
});
},
invertPopupHotkey: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Shift-right-click to show the popup menu",
setting: "invert-popup-hotkey",
explanationEnabled: "Shift-right-click to open the popup menu",
explanationDisabled: "Right click opens the popup menu",
});
},
ctrlOpensPopup: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Hold ctrl to show the popup menu",
setting: "ctrl_opens_popup",
explanationEnabled: "Pressing Ctrl shows the popup menu (for laptops)",
});
},
uiOnHover: () => {
new MenuOptionToggleSetting({
...globalOptions,
label: "Hover to show search box",
setting: "ui-on-hover",
explanationEnabled: "Only show the search box when hovering over it",
explanationDisabled: "Always show the search box",
});
},
invertScrolling: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Invert image panning",
setting: "invert-scrolling",
explanationEnabled: "Dragging down moves the image down",
explanationDisabled: "Dragging down moves the image up",
});
},
disableTranslations: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Show tag translations",
setting: "disable-translations",
invertDisplay: true,
});
},
thumbnailStyle: () => {
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "thumbnail_style",
label: "Thumbnail style",
values: {
aspect: "Aspect",
square: "Square",
},
});
},
disableThumbnailPanning: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Pan thumbnails while hovering over them",
setting: "disable_thumbnail_panning",
invertDisplay: true,
shouldBeVisible: () => ppixiv.settings.get("thumbnail_style") != "aspect",
});
},
disableThumbnailZooming: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Zoom out thumbnails while hovering over them",
setting: "disable_thumbnail_zooming",
invertDisplay: true,
shouldBeVisible: () => ppixiv.settings.get("thumbnail_style") != "aspect",
});
},
enableTransitions: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Use transitions",
setting: "animations_enabled",
});
},
bookmarkPrivatelyByDefault: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Bookmark and follow privately",
setting: "bookmark_privately_by_default",
explanationDisabled: ppixiv.mobile? null: "Pressing Ctrl-B will bookmark publically",
explanationEnabled: ppixiv.mobile? null: "Pressing Ctrl-B will bookmark privately",
});
},
limitSlideshowFramerate: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Limit slideshows to 60 FPS",
setting: "slideshow_framerate",
onValue: 60,
offValue: null,
});
},
importExtraData: () => {
let widget = new MenuOptionRow({
...globalOptions,
label: "Image edits",
});
new MenuOptionButton({
icon: "file_upload",
label: "Import",
container: widget.root,
onclick: () => ppixiv.extraImageData.import(),
});
new MenuOptionButton({
icon: "file_download",
label: "Export",
container: widget.root,
onclick: () => ppixiv.extraImageData.export(),
});
return widget;
},
stageSlideshow: () => {
let widget = new MenuOptionRow({
...globalOptions,
label: "Bookmark slideshow",
});
new MenuOptionButton({
icon: "wallpaper",
label: "Go",
container: widget.root,
onclick: () => {
/\x2f Close the settings dialog.
globalOptions.closeSettings();
SlideshowStagingDialog.show();
},
});
return widget;
},
quickView: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Quick view",
setting: "quick_view",
explanationEnabled: "Navigate to images immediately when the mouse button is pressed",
check: () => {
/\x2f Only enable changing this option when using a mouse. It has no effect
/\x2f on touchpads.
if(PointerListener.pointerType == "mouse")
return true;
ppixiv.message.show("Quick View is only supported when using a mouse.");
return false;
},
});
},
autoPan: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Pan images",
setting: "auto_pan",
explanationEnabled: "Pan images while viewing them (drag the image to stop)",
});
},
autoPanSpeed: () => {
let button = new MenuOptionButton({
...globalOptions,
label: "Time per image",
getLabel: () => "Pan duration",
explanationEnabled: (value) => {
let seconds = ppixiv.settings.get("auto_pan_duration");;
return \`\${seconds} \${seconds != 1? "seconds":"second"}\`;
},
});
new MenuOptionSliderSetting({
container: button.querySelector(".widget-box"),
setting: "auto_pan_duration",
list: [1, 2, 3, 5, 10, 15, 20, 30, 45, 60],
classes: ["size-slider"],
/\x2f Refresh the label when the value changes.
refresh: () => button.refresh(),
});
return button;
},
slideshowSpeed: () => {
let button = new MenuOptionButton({
...globalOptions,
label: "Time per image",
getLabel: () => "Slideshow duration",
explanationEnabled: (value) => {
let seconds = ppixiv.settings.get("slideshow_duration");;
return \`\${seconds} \${seconds != 1? "seconds":"second"}\`;
},
});
new MenuOptionSliderSetting({
container: button.querySelector(".widget-box"),
setting: "slideshow_duration",
list: [1, 2, 3, 5, 10, 15, 20, 30, 45, 60, 90, 120, 180],
classes: ["size-slider"],
/\x2f Refresh the label when the value changes.
refresh: () => { button.refresh(); },
});
},
slideshowDefaultAnimation: () => {
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "slideshow_default",
label: "Slideshow mode",
values: {
pan: "Pan",
contain: "Fade",
},
explanation: (value) => {
switch(value)
{
case "pan": return "Pan the image left-to-right or top-to-bottom";
case "contain": return "Fade in and out without panning";
}
},
});
},
slideshowSkipsManga: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Slideshow skips manga pages",
setting: "slideshow_skips_manga",
explanationEnabled: "Slideshow mode will only show the first page.",
explanationDisabled: "Slideshow mode will show all pages.",
});
},
displayMode: () => {
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "display_mode",
label: "Display mode",
values: {
auto: "Automatic",
normal: "Fill the screen",
notch: "Rounded display",
safe: "Avoid the status bar",
},
});
},
expandMangaPosts: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Expand manga posts",
setting: "expand_manga_thumbnails",
});
},
viewMode: () => {
new MenuOptionToggleSetting({
...globalOptions,
label: "Return to the top when changing images",
setting: "view_mode",
onValue: "manga",
offValue: "illust",
});
},
pixivCdn: () => {
let values = { };
for(let [setting, {name}] of Object.entries(helpers.pixiv.pixivImageHosts))
values[setting] = name;
return new MenuOptionOptionsSetting({
...globalOptions,
setting: "pixiv_cdn",
label: "Pixiv image host",
values,
});
},
openPixiv: () => {
return new MenuOptionButton({
...globalOptions,
label: "Open Pixiv",
onclick: () => {
/\x2f On mobile, open Pixiv in a new window. In Safari this will give a new
/\x2f tab where browser back will close the tab and return here. This keeps
/\x2f it from becoming a browser navigation, so we don't enable back/forward
/\x2f gestures for the tab if possible.
let url = new URL("#no-ppixiv", window.location);
window.open(url);
},
});
},
linkTabs: () => {
let widget = new LinkTabsPopup({
...globalOptions,
});
/\x2f Tell the widget when it's no longer visible.
globalOptions.pageRemovedSignal.addEventListener("abort", () => { widget.visible = false; });
return widget;
},
enableLinkedTabs: () => {
return new MenuOptionToggleSetting({
...globalOptions,
label: "Enabled",
setting: "linkedTabs_enabled",
});
},
unlinkAllTabs: () => {
return new MenuOptionButton({
...globalOptions,
label: "Unlink all tabs",
onclick: () => {
ppixiv.settings.set("linked_tabs", []);
},
});
},
mutedTags: () => {
let widget = new EditMutedTagsWidget({
muteType: "tag",
...globalOptions,
});
/\x2f Tell the widget when it's no longer visible.
globalOptions.pageRemovedSignal.addEventListener("abort", () => { widget.visible = false; });
return widget;
},
mutedUsers: () => {
let widget = new EditMutedTagsWidget({
muteType: "user",
...globalOptions,
});
/\x2f Tell the widget when it's no longer visible.
globalOptions.pageRemovedSignal.addEventListener("abort", () => { widget.visible = false; });
return widget;
},
whatsNew: async() => {
let widget = new WhatsNew({
...globalOptions,
});
globalOptions.pageRemovedSignal.addEventListener("abort", () => { widget.visible = false; });
return widget;
},
nativeLogin: () => {
return new MenuOptionButton({
...globalOptions,
label: LocalAPI.localInfo.logged_in? "Log out":"Login",
onclick: async() => {
let { logged_in } = LocalAPI.localInfo;
if(!logged_in)
{
LocalAPI.redirectToLogin();
return;
}
let prompt = new ConfirmPrompt({ header: "Log out?" });
let result = await prompt.result;
console.log(result);
if(result)
LocalAPI.logout();
},
});
},
};
}
let pageTitles = {
thumbnail: "Thumbnail options",
image:"Image viewing",
tagMuting: "Muted tags",
userMuting: "Muted users",
linkedTabs: "Linked tabs",
translation: "Translation",
translationOverride: "Translation",
other: "Other",
whatsNew: "What's New",
};
export class SettingsDialog extends DialogWidget
{
constructor({showPage="thumbnail", ...options}={})
{
super({
...options,
dialogClass: "settings-dialog",
classes: ["settings-window"],
header: "Settings",
template: \`
\`
});
this.phone = helpers.other.isPhone();
helpers.html.setClass(this.root, "phone", this.phone);
this._pageButtons = {};
/\x2f If we're using a phone UI, we're showing items by opening a separate dialog. The
/\x2f page contents block will be empty, so hide it to let the options center.
this.root.querySelector(".items").hidden = this.phone;
this.addPages();
/\x2f If we're not on the phone UI, show the default page.
showPage ??= "thumbnail";
if(!this.phone)
this.showPage(showPage);
}
addPages()
{
this._createPageButton("thumbnail");
this._createPageButton("image");
if(!ppixiv.native)
{
this._createPageButton("tagMuting");
this._createPageButton("userMuting");
}
if(ppixiv.imageTranslations.supported)
this._createPageButton("translation");
if(ppixiv.sendImage.enabled)
this._createPageButton("linkedTabs");
this._createPageButton("other");
this._createPageButton("whatsNew");
}
_createPageButton(name)
{
let pageButton = this.createTemplate({
html: helpers.createBoxLink({
label: pageTitles[name],
classes: ["settings-page-button"],
}),
});
pageButton.dataset.page = name;
pageButton.addEventListener("click", (e) => {
this.showPage(name);
});
this.root.querySelector(".sections").appendChild(pageButton);
this._pageButtons[name] = pageButton;
/\x2f Mark all buttons as selected on the phone UI so they're always highlighted.
if(this.phone)
helpers.html.setClass(pageButton, "selected", true);
return pageButton;
}
showPage(settingsPage)
{
/\x2f If we're on a phone, create a dialog to show the page.
if(this.phone)
{
this._hideAndShowPageDialog(settingsPage);
return;
}
/\x2f Create the page in our items container.
if(this._visiblePageName == settingsPage)
return;
/\x2f Remove the widget page or dialog if it still exists.
if(this._pageWidget != null)
this._pageWidget.shutdown();
console.assert(this._pageWidget == null);
this._visiblePageName = settingsPage;
if(settingsPage == null)
return;
this._pageWidget = this._createPage(settingsPage);
helpers.html.setClass(this._pageButtons[settingsPage], "selected", true);
if(!this.phone)
this.header = pageTitles[settingsPage];
this._pageWidget.shutdownSignal.addEventListener("abort", () => {
this._pageWidget = null;
helpers.html.setClass(this._pageButtons[settingsPage], "selected", false);
});
}
/\x2f Hide ourself and show a settings page in a dialog. When the page closes, open
/\x2f ourselves again.
async _hideAndShowPageDialog(settingsPage)
{
this.visible = false;
/\x2f If this triggered a transition, wait for it to finish. Overlapping the opening
/\x2f and closing would be fine, but it's hard to overlap them the other way when the
/\x2f page is closing, and it looks better to have the transition look the same both
/\x2f ways.
await this.visibilityChangePromise();
let dialog = new SettingsPageDialog({ settingsPage });
dialog.shutdownSignal.addEventListener("abort", () => {
new SettingsDialog();
});
}
_createPage(settingsPage)
{
let pageWidget = new Widget({
container: this.root.querySelector(".items"),
template: \`
\`
});
SettingsDialog._fillPage({
settingsPage,
pageWidget,
pageContainer: pageWidget.root,
});
return pageWidget;
}
static _fillPage({ settingsPage, pageWidget, pageContainer })
{
/\x2f Set settings-list if this page is a list of options, like the thumbnail options page.
/\x2f This class enables styling for these lists. If it's another type of settings page
/\x2f with its own styling, this is disabled.
let isSettingsList = settingsPage != "tagMuting" && settingsPage != "userMuting";
if(isSettingsList)
pageContainer.classList.add("settings-list");
/\x2f Options that we pass to all menu options:
let globalOptions = {
classes: ["settings-row"],
container: pageContainer,
pageRemovedSignal: pageWidget.shutdownSignal,
/\x2f Settings widgets can call this to close the window.
closeSettings: () => {
this.visible = false;
},
};
/\x2f This gives us a dictionary of functions we can use to create each settings widget.
let settingsWidgets = createSettingsWidget({ globalOptions });
let pages = {
thumbnail: () =>
{
settingsWidgets.thumbnailSize();
settingsWidgets.thumbnailStyle();
if(!ppixiv.mobile)
{
settingsWidgets.disableThumbnailPanning();
settingsWidgets.disableThumbnailZooming();
settingsWidgets.quickView();
settingsWidgets.uiOnHover();
}
if(!ppixiv.native)
settingsWidgets.expandMangaPosts();
},
image: () => {
settingsWidgets.autoPan();
settingsWidgets.autoPanSpeed();
settingsWidgets.slideshowSpeed();
settingsWidgets.slideshowDefaultAnimation();
if(!ppixiv.native) /\x2f native mode doesn't support manga pages
settingsWidgets.slideshowSkipsManga();
if(ppixiv.mobile)
settingsWidgets.displayMode();
settingsWidgets.viewMode();
if(!ppixiv.mobile)
{
settingsWidgets.invertScrolling();
settingsWidgets.noHideCursor();
}
},
tagMuting: () => {
settingsWidgets.mutedTags();
},
userMuting: () => {
settingsWidgets.mutedUsers();
},
linkedTabs: () => {
settingsWidgets.linkTabs();
settingsWidgets.unlinkAllTabs();
},
/\x2f ImageTranslations handles these settings. translationOverride is the settings override version
/\x2f when we're viewing an image.
translation: () => createTranslationSettingsWidgets({ globalOptions, editOverrides: false }),
translationOverride: () => createTranslationSettingsWidgets({ globalOptions, editOverrides: true }),
other: () => {
if(ppixiv.native && !LocalAPI.localInfo.local)
settingsWidgets.nativeLogin();
settingsWidgets.disableTranslations();
if(!ppixiv.native && !ppixiv.mobile)
settingsWidgets.disabledByDefault();
if(!ppixiv.mobile)
{
/\x2f Firefox's contextmenu behavior is broken, so hide this option.
if(navigator.userAgent.indexOf("Firefox/") == -1)
settingsWidgets.invertPopupHotkey();
settingsWidgets.ctrlOpensPopup();
settingsWidgets.enableTransitions();
}
settingsWidgets.bookmarkPrivatelyByDefault();
if(!ppixiv.mobile)
settingsWidgets.limitSlideshowFramerate();
if(!ppixiv.native)
settingsWidgets.pixivCdn();
if(!ppixiv.native && ppixiv.mobile)
settingsWidgets.openPixiv();
/\x2f Chrome supports showOpenFilePicker, but Firefox doesn't. That API has been around in
/\x2f Chrome for a year and a half, so I haven't implemented an alternative for Firefox.
if(!ppixiv.native && window.showOpenFilePicker != null)
settingsWidgets.importExtraData();
/\x2f Slideshow staging isn't useful on mobile with Pixiv since we can't run ourself as
/\x2f a PWA.
if(ppixiv.native || !ppixiv.mobile)
settingsWidgets.stageSlideshow();
},
whatsNew: () => {
settingsWidgets.whatsNew();
},
};
let createPage = pages[settingsPage];
if(createPage == null)
{
console.error(\`Invalid settings page: \${settingsPage}\`);
return;
}
createPage();
/\x2f Add allow-wrap to all top-level box links that we just created, so the
/\x2f settings menu scales better. Don't recurse into nested buttons.
for(let boxLink of pageContainer.querySelectorAll(".settings-page > .box-link"))
boxLink.classList.add("allow-wrap");
}
};
/\x2f This is used when we're on the phone UI to show a single settings page.
export class SettingsPageDialog extends DialogWidget
{
constructor({
settingsPage,
...options}={})
{
super({
header: pageTitles[settingsPage],
...options,
dialogClass: "settings-dialog-page",
/\x2f This is a nested dialog and closing it goes back to settings, so show
/\x2f a back button instead of a close button.
backIcon: true,
template: \`\`
});
this._settingsContainer = this.querySelector(".scroll");
this._settingsContainer.classList.add("settings-page");
SettingsDialog._fillPage({
settingsPage,
pageWidget: this,
pageContainer: this._settingsContainer,
});
}
};
/\x2f Open a tab that can be used to bookmark a slideshow or save to home screen.
/\x2f
/\x2f This is made tricky by iOS limitations: it tries to save the URL the page was originally
/\x2f loaded with, not the current URL. To work around this, we have to open the URL in a new
/\x2f tab with the URL we want.
/\x2f
/\x2f On mobile this is meant to run the page in PWA mode. This won't work with Pixiv, since
/\x2f user scripts don't work in that mode. Pixiv also has a manifest that'll force the URL
/\x2f to the root, which also makes this not work. So, this is only really useful with vview,
/\x2f but it can technically be used on desktop too.
export class SlideshowStagingDialog extends DialogWidget
{
static show()
{
let slideshowArgs = ppixiv.app.slideshowURL;
if(slideshowArgs == null)
return;
let url = slideshowArgs.toString();
/\x2f Open a tab for the dialog. Storing the dialog as window.slideshowStagingDialog
/\x2f tells the dialog that it's a staging dialog without having to put anything in the
/\x2f URL.
window.slideshowStagingDialog = window.open(url);
}
constructor({...options}={})
{
/\x2f Nobody can agree on terminology for this, and this text should be short and clear,
/\x2f so tweak it based on the platform.
let text = ppixiv.mobile? \`
Add this page to your home screen for a slideshow of the current search.
\`: \`
Install this page as an app for a slideshow bookmark for the current search.
\`;
super({...options, showCloseButton: false, header: "Slideshow", template: \`
\${text}
\`});
this.url = helpers.args.location;
document.title = window.opener.document.title;
/\x2f If we see an appinstalled event when in Chrome, it stole the tab and turned it into
/\x2f a standalone window. Clear slideshowStagingDialog and reload the page to turn into
/\x2f the bookmarked window. Only do this on desktop, since this doesn't happen on mobile
/\x2f so this reload is confusing.
window.addEventListener("appinstalled", (e) => {
if(ppixiv.mobile)
return;
window.opener.slideshowStagingDialog = null;
window.location.reload();
});
/\x2f Close the tab if the dialog is closed. There's nothing left on the screen.
/\x2f We're usually able to do this, since we opened the tab ourself.
this.shutdownSignal.addEventListener("abort", () => window.close());
}
visibilityChanged()
{
super.visibilityChanged();
if(!this.visible)
{
/\x2f If the URL is still pointing at the slideshow, back out to restore the original
/\x2f URL. This is needed if we're exiting from the user clicking out of the dialog,
/\x2f but don't do it if we're exiting from browser back.
if(helpers.args.location.toString() == this.url.toString())
ppixiv.phistory.back();
}
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/widgets/settings-widgets.js
`),
"/vview/widgets/simple.js": loadBlob("application/javascript",
`import Widget from '/vview/widgets/widget.js';
import DragHandler from '/vview/misc/drag-handler.js';
import { helpers } from '/vview/misc/helpers.js';
export class CheckboxWidget extends Widget
{
constructor({
value=false,
...options})
{
super({...options, template: \`
\${ helpers.createIcon("", { classes: ["checkbox"] }) }
\`});
this._checked = true;
};
set checked(value)
{
if(this._checked == value)
return;
this._checked = value;
this.refresh();
}
get checked() { return this._checked; }
async refresh()
{
this.root.innerText = this.checked? "check_box":"check_box_outline_blank";
}
}
/\x2f A minimal replacement for . HTML sliders are broken on iOS (they're
/\x2f very hard to drag), and for some reason Edge's sliders are grey and always look disabled.
export class SliderWidget extends Widget
{
constructor({
value=0,
min=0,
max=10,
onchange=({value}) => { },
...options
})
{
super({...options,
template: \`
\`,
});
this._value = value;
this._min = min;
this._max = max;
this._onchange = onchange;
this.dragger = new DragHandler({
parent: this,
name: "slider",
deferredStart: () => false,
element: this.parent.root,
ondragstart: (args) => this._ondrag(args),
ondrag: (args) => this._ondrag(args),
});
}
get value() { return this._value; }
get min() { return this._min; }
get max() { return this._max; }
set value(value)
{
if(this._value == value)
return;
this._value = value;
this.refresh();
}
set min(value)
{
if(this._min == value)
return;
this._min = value;
this.refresh();
}
set max(value)
{
if(this._max == value)
return;
this._max = value;
this.refresh();
}
_ondrag({event})
{
let { left, right } = this.root.getBoundingClientRect();
let newValue = helpers.math.scaleClamp(event.clientX, left, right, this._min, this._max);
newValue = Math.round(newValue);
if(this._value == newValue)
return true;
this._value = newValue;
this.refresh();
this._onchange({ value: this._value });
return true;
}
refresh()
{
let percent = helpers.math.scaleClamp(this._value, this._min, this._max, 0, 100);
this.root.style.setProperty("--fill", \`\${percent}%\`);
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/widgets/simple.js
`),
"/vview/widgets/tag-list-widget.js": loadBlob("application/javascript",
`/\x2f A list of tags, with translations in popups where available.
import Widget from '/vview/widgets/widget.js';
import { helpers } from '/vview/misc/helpers.js';
export default class TagListWidget extends Widget
{
constructor({...options})
{
super({
...options,
template: \`
\`
});
};
formatTagLink(tag)
{
return helpers.getArgsForTagSearch(tag, ppixiv.plocation);
};
async set(mediaInfo)
{
this.mediaInfo = mediaInfo;
this.refresh();
}
async refresh()
{
if(this.mediaInfo == null)
return;
let tags = [];
let showR18 = this.mediaInfo == 1;
let showR18G = this.mediaInfo == 1;
for(let tag of this.mediaInfo.tagList)
{
/\x2f If R-18 is in the list, remove it so we can add them in the position we want.
/\x2f This should always match xRestrict, but we check both just to be safe.
if(tag == "R-18")
showR18 = true;
else if(tag == "R-18G")
showR18G = true;
else
tags.push({tag});
}
/\x2f Add "AI" to the list.
let showAI = this.mediaInfo.aiType == 2;
if(showAI)
tags.splice(0, 0, {ai: true});
if(showR18G)
tags.splice(0, 0, {tag: "R-18G"});
else if(showR18)
tags.splice(0, 0, {tag: "R-18"});
/\x2f Short circuit if the tag list isn't changing, since IndexedDB is really slow.
if(this._currentTags != null && JSON.stringify(this._currentTags) == JSON.stringify(tags))
return;
/\x2f Look up tag translations.
let tagList = tags;
let translatedTags = await ppixiv.tagTranslations.getTranslations(this.mediaInfo.tagList, "en");
/\x2f Stop if the tag list changed while we were reading tag translations.
if(tagList != tags)
return;
this._currentTags = tags;
/\x2f Remove any old tag list and create a new one.
helpers.html.removeElements(this.root);
for(let {tag, ai} of tagList)
{
if(ai)
tag = "AI-generated";
let translatedTag = tag;
if(translatedTags[tag])
translatedTag = translatedTags[tag];
let link = this.formatTagLink(tag);
if(ai)
link = null;
let a = helpers.createBoxLink({
label: translatedTag,
classes: ["tag-entry"],
link,
asElement: true,
});
this.root.appendChild(a);
a.dataset.tag = tag;
}
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/widgets/tag-list-widget.js
`),
"/vview/widgets/tag-search-dropdown.js": loadBlob("application/javascript",
`import widget from '/vview/widgets/widget.js';
import SavedSearchTags from '/vview/misc/saved-search-tags.js';
import DragHandler from '/vview/misc/drag-handler.js';
import { DropdownBoxOpener } from '/vview/widgets/dropdown.js';
import { ConfirmPrompt, TextPrompt } from '/vview/widgets/prompts.js';
import { helpers } from '/vview/misc/helpers.js';
/\x2f Handle showing the search history and tag edit dropdowns.
export class TagSearchBoxWidget extends widget
{
constructor({...options})
{
super({...options, template: \`
\${ helpers.createIcon(icon, { classes: ['section-icon']}) }
\`});
section.querySelector(".label").textContent = label;
helpers.html.setClass(section, "user-section", isUserSection);
helpers.html.setClass(section, "collapsed", collapsed);
if(groupName != null)
section.dataset.group = groupName;
else
section.classList.add("recents");
section.groupName = groupName;
if(groupName == null)
section.querySelector(".rename-group-button").hidden = true;
for(let name of classes)
section.classList.add(name);
return section;
}
/\x2f Select the next or previous entry in the dropdown.
move(down)
{
/\x2f Temporarily set this.navigating to true. This lets _runAutocomplete know that
/\x2f it shouldn't run an autocomplete request for this value change.
this.navigating = true;
try {
let allEntries = this._allResults.querySelectorAll(".entry");
/\x2f Stop if there's nothing in the list.
let totalEntries = allEntries.length;
if(totalEntries == 0)
return;
/\x2f Find the index of the previous selection, if any.
let selectedIdx = null;
for(let idx = 0; idx < allEntries.length; ++idx)
{
if(allEntries[idx].classList.contains("selected"))
{
selectedIdx = idx;
break;
}
}
if(selectedIdx == null)
selectedIdx = down? 0:(totalEntries-1);
else
selectedIdx += down? +1:-1;
selectedIdx = (selectedIdx + totalEntries) % totalEntries;
/\x2f If there's an autocomplete request in the air, cancel it.
if(this._abortAutocomplete != null)
this._abortAutocomplete.abort();
/\x2f Set the new selection.
let newEntry = allEntries[selectedIdx];
this.setSelection(newEntry.dataset.tag);
/\x2f selectionchange is fired async. This doesn't make sense, since it makes it
/\x2f impossible to tell what triggered it: this.navigating will be false by the time
/\x2f we see it. Work around this with a timer to disable autocomplete briefly.
this._disableAutocompleteUntil = Date.now() + 50;
this._inputElement.value = newEntry.dataset.tag;
} finally {
this.navigating = false;
}
}
getSelection()
{
let entry = this._allResults.querySelector(".entry.selected");
return entry?.dataset?.tag;
}
setSelection(tags)
{
/\x2f Temporarily set this.navigating to true. This lets _runAutocomplete know that
/\x2f it shouldn't run an autocomplete request for this value change.
this.navigating = true;
try {
/\x2f Clear the old selection.
let oldSelection = this._allResults.querySelector(".entry.selected");
if(oldSelection)
oldSelection.classList.remove("selected");
/\x2f Find the entry for the given search.
if(tags != null)
{
let entry = this.getEntryForTag(tags, { includeAutocomplete: true });
if(entry)
{
entry.classList.add("selected");
this._scrollEntryIntoView(entry);
}
}
} finally {
this.navigating = false;
}
}
/\x2f If the current search is in the list, select it.
_selectCurrentSearch = () =>
{
let currentSearchTags = this._inputElement.value.trim();
if(!currentSearchTags)
return;
this.setSelection(currentSearchTags);
/\x2f If that selected something, scroll it into view.
let selectedEntry = this.root.querySelector(".entry.selected");
if(selectedEntry)
this._scrollEntryIntoView(selectedEntry);
}
_populateDropdown = async(options) =>
{
/\x2f If this is called again before the first call completes, the original call will be
/\x2f aborted. Keep waiting until one completes without being aborted (or we're hidden), so
/\x2f we don't return until our contents are actually filled in.
let promise = this._populateDropdownPromise = this._populateDropdownInner(options);
this._populateDropdownPromise.finally(() => {
if(promise === this._populateDropdownPromise)
this._populateDropdownPromise = null;
});
while(this.visible && this._populateDropdownPromise != null)
{
if(await this._populateDropdownPromise)
return true;
}
return false;
}
/\x2f Populate the tag dropdown.
/\x2f
/\x2f This is async, since IndexedDB is async. (It shouldn't be. It's an overcorrection.
/\x2f Network APIs should be async, but local I/O should not be forced async.) If another
/\x2f call to _populateDropdown() is made before this completes or _cancelPopulateDropdown
/\x2f cancels it, return false. If it completes, return true.
_populateDropdownInner = async() =>
{
/\x2f If another _populateDropdown is already running, cancel it and restart.
this._cancelPopulateDropdown();
/\x2f Set populate_dropdown_abort to an AbortController for this call.
let abortController = this._populateDropdownAbort = new AbortController();
let abortSignal = abortController.signal;
let autocompletedTags = this._currentAutocompleteResults || [];
let tagsByGroup = SavedSearchTags.getAllGroups();
let allSavedTags = [];
for(let savedTag of tagsByGroup.values())
allSavedTags = [...allSavedTags, ...savedTag];
for(let tag of autocompletedTags)
allSavedTags.push(tag.tag);
/\x2f Separate tags in each search, so we can look up translations.
let allTags = {};
for(let tagSearch of allSavedTags)
{
for(let tag of helpers.pixiv.splitSearchTags(tagSearch))
{
tag = helpers.pixiv.splitTagPrefixes(tag)[1];
allTags[tag] = true;
}
}
allTags = Object.keys(allTags);
/\x2f Get tag translations.
/\x2f
/\x2f Don't do this if we're updating the list during a drag. The translations will never change
/\x2f since we're just reordering the list, and we need to avoid going async to make sure we update
/\x2f the list immediately since the drag will get confused if it isn't.
let translatedTags;
if(this.draggingTag == null)
{
translatedTags = await ppixiv.tagTranslations.getTranslations(allTags, "en");
/\x2f Check if we were aborted while we were loading tags.
if(abortSignal.aborted)
return false;
this.translatedTags = translatedTags;
}
/\x2f Save the selection so we can restore it.
let savedSelection = this.getSelection();
/\x2f If we were given a saved scroll position, use it the first time we open. Otherwise,
/\x2f save the current position. This preserves the scroll position when we're destroyed
/\x2f and recreated, and when we refresh due tothings like autocomplete changing.
let savedPosition = this.savedPosition ?? this._saveSearchPosition();
this.savedPosition = null;
savedPosition ??= {};
helpers.html.removeElements(this._inputDropdownContents);
/\x2f Add autocompletes at the top.
if(autocompletedTags.length)
this._inputDropdownContents.appendChild(this.createSeparator(\`Suggestions for \${this._mostRecentAutocomplete}\`, { icon: "mat:assistant", classes: ["autocomplete"] }));
for(let tag of autocompletedTags)
{
/\x2f Autocomplete entries link to the fully completed search, but only display the
/\x2f tag that was searched for.
let entry = this.createEntry(tag.tag, { classes: ["autocomplete"], targetTags: tag.search });
this._inputDropdownContents.appendChild(entry);
}
/\x2f Show saved tags above recent tags.
for(let [groupName, tagsInGroup] of tagsByGroup.entries())
{
/\x2f Skip recents.
if(groupName == null)
continue;
let collapsed = SavedSearchTags.getCollapsedTagGroups().has(groupName);
this._inputDropdownContents.appendChild(this.createSeparator(groupName, {
icon: collapsed? "mat:folder":"mat:folder_open",
isUserSection: true,
groupName: groupName,
collapsed,
}));
/\x2f Add contents if this section isn't collapsed.
if(!collapsed)
{
for(let tag of tagsInGroup)
this._inputDropdownContents.appendChild(this.createEntry(tag, { classes: ["history", "saved"] }));
}
}
/\x2f Show recent searches. This group always exists, but hide it if it's empty.
let recentsCollapsed = SavedSearchTags.getCollapsedTagGroups().has(null);
let recentTags = tagsByGroup.get(null);
if(recentTags.length)
this._inputDropdownContents.appendChild(this.createSeparator("Recent tags", {
icon: "mat:history",
collapsed: recentsCollapsed,
}));
if(!recentsCollapsed)
{
for(let tag of recentTags)
this._inputDropdownContents.appendChild(this.createEntry(tag, { classes: ["history", "recent"] }));
}
/\x2f Restore the previous selection.
if(savedSelection)
this.setSelection(savedSelection);
this._restoreSearchPosition(savedPosition);
/\x2f We're populated now, so if we were hidden for initial loading, we can actually show
/\x2f our contents if we have any.
let empty = Array.from(this._allResults.querySelectorAll(".entry, .tag-section")).length == 0;
helpers.html.setClass(this.root, "loading", empty);
return true;
}
_cancelPopulateDropdown()
{
if(this._populateDropdownAbort == null)
return;
this._populateDropdownAbort.abort();
}
/\x2f Save the current search position, to be restored with _restoreSearchPosition.
/\x2f This can be used as the savedPosition argument to the constructor.
_saveSearchPosition()
{
/\x2f If we're dragging, never save the search position relative to the tag that's
/\x2f being dragged, or the tag on either side. This keeps the scroll position stable
/\x2f when the drag moves and swaps a tag with its neighbor.
let ignoredNodes = new Set();
if(this.draggingTag)
{
let entry = this._findTagEntry(this.draggingTag);
ignoredNodes.add(entry);
let nextEntry = entry.nextElementSibling;
if(nextEntry)
ignoredNodes.add(nextEntry);
let previousEntry = entry.previousElementSibling;
if(previousEntry)
ignoredNodes.add(previousEntry);
}
for(let node of this._inputDropdown.querySelectorAll(".entry[data-tag]"))
{
if(node.offsetTop < this.root.scrollTop)
continue;
if(ignoredNodes.has(node))
continue;
let savedPosition = helpers.html.saveScrollPosition(this.root, node);
let tag = node.dataset.tag;
return { savedPosition, tag };
}
return { };
}
_restoreSearchPosition({ savedPosition, tag })
{
if(savedPosition == null)
return;
let restoreEntry = this.getEntryForTag(tag);
if(restoreEntry)
helpers.html.restoreScrollPosition(this.root, restoreEntry, savedPosition);
}
/\x2f Scroll a row into view. entry can be an entry or a section header.
_scrollEntryIntoView(entry)
{
entry.scrollIntoView({ block: "nearest" });
if(!entry.classList.contains("entry"))
return;
/\x2f Work around a bug in most browsers: scrollIntoView will scroll an element underneath
/\x2f sticky headers, where it isn't in view at all. This is a pain, because there's no direct
/\x2f way to find which element is actually the top sticky header. We have to scan through the
/\x2f list and find it. All nodes that are stickied will have the same offsetTop, so we need
/\x2f to find the last sticky node with the same offsetTop as the first one.
let stickyTop = null;
for(let node of this._inputDropdownContents.children)
{
if(!node.classList.contains("tag-section"))
continue;
if(stickyTop != null && node.offsetTop != stickyTop.offsetTop)
break;
stickyTop = node;
}
/\x2f If entry is underneath the header, scroll down to make it visible. The extra offsetTop
/\x2f adjustment is to adjust for the autocomplete box above the scroller.
let stickyPadding = stickyTop.offsetHeight;
let offsetFromTop = entry.offsetTop - this._inputDropdown.offsetTop - this.root.scrollTop;
if(offsetFromTop < stickyPadding)
this.root.scrollTop -= stickyPadding - offsetFromTop;
}
}
/\x2f# sourceURL=https:/\x2fraw.githubusercontent.com/ppixiv/ppixiv/r231/web/vview/widgets/tag-search-dropdown.js
`),
"/vview/widgets/user-widgets.js": loadBlob("application/javascript",
`import Widget from '/vview/widgets/widget.js';
import Actions from '/vview/misc/actions.js';
import AsyncLookup from '/vview/actors/async-lookup.js';
import { DropdownBoxOpener } from '/vview/widgets/dropdown.js';
import { ConfirmPrompt, TextPrompt } from '/vview/widgets/prompts.js';
import { helpers } from '/vview/misc/helpers.js';
/\x2f AsyncLookup to look up user info from a user ID.
export class GetUserInfo extends AsyncLookup
{
constructor({
/\x2f The data this widget needs. This can be:
/\x2f - userId - Just the ID itself
/\x2f - partial - Partial user info.
/\x2f - full - Full user info. This is less likely to be available from cache.
/\x2f
/\x2f This can be mediaId (nothing but the ID), full or partial.
/\x2f
/\x2f This can change dynamically. Some widgets need media info only when viewing a manga
/\x2f page.
neededData="full",
...options
})
{
super({...options});
this._neededData = neededData;
if(!(this._neededData instanceof Function))
this._neededData = () => neededData;
/\x2f Refresh when the user data changes. We don't watch for changes to media IDs since
/\x2f we don't expect the user for an image to change.
ppixiv.userCache.addEventListener("usermodified", (e) => {
if(e.userId == this._id)
this.refresh();
}, this._signal);
}
async _refreshInner()
{
if(this.hasShutdown)
return;
let userId = this._id;
let info = { userId: this._id };
/\x2f If we have a user ID and we want user info (not just the user ID itself), load it.
let neededData = this._neededData();
if(this._id != null && neededData != "userId")
{
let full = neededData == "full";
/\x2f See if we have the data the widget wants already.
info.userInfo = ppixiv.userCache.getUserInfoSync(this._id, { full });
/\x2f If we need to load data, clear the widget while we load, so we don't show the old
/\x2f data while we wait for data. Skip this if we don't need to load, so we don't clear
/\x2f and reset the widget. This can give the widget an illust ID without data, which is
/\x2f OK.
if(info.userInfo == null)
{
await this._onrefresh(info);
/\x2f Don't make API requests for data if we're not visible to the user.
if(!this._loadWhileNotVisible && !this.actuallyVisibleRecursively)
return;
info.userInfo = await ppixiv.userCache.getUserInfo(this._id, { full });
}
}
/\x2f Stop if the media ID changed while we were async.
if(this._id != userId)
return;
await this._onrefresh(info);
}
}
/\x2f Async lookups to get user IDs from media IDs.
/\x2f
/\x2f If a media ID is a user ("user:1234"), return it. If it's an illust, look up the illust
/\x2f and return its author's user ID.
export class GetUserIdFromMediaId extends AsyncLookup
{
constructor({
...options
})
{
super({...options});
this._id = null;
}
async _refreshInner()
{
let mediaId = this._id;
this._info = { };
if(this._id != null)
{
/\x2f If the media ID is a user ID, use it.
let { type, id } = helpers.mediaId.parse(mediaId);
if(type == "user")
this._info.userId = id;
else
{
/\x2f See if we can get media ID synchronously.
let mediaInfo = ppixiv.mediaCache.getMediaInfoSync(this._id, { full: false });
this._info.userId = mediaInfo?.userId;
if(this._info.userId == null)
{
await this._onrefresh(this._info);
/\x2f Don't make API requests for data if we're not visible to the user.
if(!this._loadWhileNotVisible && !this.actuallyVisibleRecursively)
return;
mediaInfo = await ppixiv.mediaCache.getMediaInfo(this._id, { full: false });
this._info.userId = mediaInfo?.userId;
}
}
}
/\x2f Stop if the media ID changed while we were async.
if(this._id != mediaId)
return;
await this._onrefresh(this._info);
}
}
export class AvatarWidget extends Widget
{
constructor({
/\x2f This is called when the follow dropdown visibility changes.
dropdownvisibilitychanged=() => { },
clickAction="dropdown",
...options
}={})
{
super({...options, template: \`
\`});
this.options = options;
if(clickAction != "dropdown" && clickAction != "author")
throw new Error(\`Invalid avatar widget mode: \${clickAction}\`);
this.getUserInfo = new GetUserInfo({
parent: this,
onrefresh: (args) => this.onrefresh(args),
});
let avatarElement = this.root.querySelector(".avatar");
let avatarLink = this.root;
this.followDropdownOpener = new DropdownBoxOpener({
button: avatarLink,
onvisibilitychanged: dropdownvisibilitychanged,
asDialog: ppixiv.mobile,
createDropdown: ({...options}) => {
return new FollowWidget({
...options,
userId: this.userId,
close: () => this.followDropdownOpener.visible = false,
});
},
});
avatarLink.addEventListener("click", (e) => {
e.preventDefault();
e.stopPropagation();
if(clickAction == "dropdown")
this.followDropdownOpener.visible = !this.followDropdownOpener.visible;
else if(clickAction == "author")
{
let args = new helpers.args(\`/users/\${this.userId}#ppixiv\`);
helpers.navigate(args, { scrollToTop: true });
}
});
/\x2f Clicking the avatar used to go to the user page, but now it opens the follow dropdown.
/\x2f Allow doubleclicking it instead, to keep it quick to go to the user.
avatarLink.addEventListener("dblclick", (e) => {
e.preventDefault();
e.stopPropagation();
let args = new helpers.args(\`/users/\${this.userId}/artworks#ppixiv\`);
helpers.navigate(args, { scrollToTop: true });
});
/\x2f A canvas filter for the avatar. This has no actual filters. This is just to kill off any
/\x2f annoying GIF animations in people's avatars.
this.img = document.createElement("img");
this._baseFilter = new ImageCanvasFilter(this.img, avatarElement);
this.root.dataset.mode = this.options.mode;
new CreepyEyeWidget({
container: this.root.querySelector(".follow-icon"),
pointerTarget: this.root,
});
}
visibilityChanged()
{
super.visibilityChanged();
this.refresh();
}
/\x2f Return the dropdown if it's open.
get userDropdownWidget()
{
return this.followDropdownOpener.dropdown;
}
get userId()
{
return this.getUserInfo.id;
}
async setUserId(userId)
{
/\x2f Close the dropdown if the user is changing.
if(this.getUserInfo.id != userId && this.followDropdownOpener)
this.followDropdownOpener.visible = false;
this.getUserInfo.id = userId;
this.refresh();
}
onrefresh({userId, userInfo})
{
if(userId == null || userId == -1)
{
/\x2f Set the avatar image to a blank image, so it doesn't flash the previous image
/\x2f the next time we display it. It should never do this, since we set a new image
/\x2f before displaying it, but Chrome doesn't do this correctly at least with canvas.
this.img.src = helpers.other.blankImage;
return;
}
/\x2f If we've seen this user's profile image URL from thumbnail data, we can use it to
/\x2f start loading the avatar without waiting for user info to finish loading.
let cachedProfileUrl = ppixiv.mediaCache.userProfileUrls[userId];
this.img.src = cachedProfileUrl ?? userInfo?.imageBig ?? helpers.other.blankImage;
/\x2f Set up stuff that we don't need user info for.
this.root.href = \`/users/\${userId}/artworks#ppixiv\`;
/\x2f Hide the popup in dropdown mode, since it covers the dropdown.
if(this.options.mode == "dropdown")
this.root.querySelector(".avatar").classList.remove("popup");
/\x2f Clear stuff we need user info for, so we don't show old data while loading.
helpers.html.setClass(this.root, "followed", false);
this.root.querySelector(".avatar").dataset.popup = "";
this.root.querySelector(".follow-icon").hidden = !(userInfo?.isFollowed ?? false);
this.root.querySelector(".avatar").dataset.popup = userInfo?.name ?? "";
}
};
/\x2f Filter an image to a canvas.
/\x2f
/\x2f When an image loads, draw it to a canvas of the same size, optionally applying filter
/\x2f effects.
/\x2f
/\x2f If baseFilter is supplied, it's a filter to apply to the top copy of the image.
/\x2f If overlay(ctx, img) is supplied, it's a function to draw to the canvas. This can
/\x2f be used to mask the top copy.
class ImageCanvasFilter
{
constructor(img, canvas, baseFilter, overlay)
{
this.img = img;
this.canvas = canvas;
this._baseFilter = baseFilter || "";
this.overlay = overlay;
this.ctx = this.canvas.getContext("2d");
this.img.addEventListener("load", this._updateCanvas);
/\x2f For some reason, browsers can't be bothered to implement onloadstart, a seemingly
/\x2f fundamental progress event. So, we have to use a mutation observer to tell when
/\x2f the image is changed, to make sure we clear it as soon as the main image changes.
this.observer = new MutationObserver((mutations) => {
for(let mutation of mutations) {
if(mutation.type == "attributes")
{
if(mutation.attributeName == "src")
{
this._updateCanvas();
}
}
}
});
this.observer.observe(this.img, { attributes: true });
this._updateCanvas();
}
clear()
{
this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
this._currentUrl = helpers.other.blankImage;
}
_updateCanvas = () =>
{
/\x2f The URL for the image we're rendering. If the image isn't complete, use the blank image
/\x2f URL instead, since we're just going to clear.
let currentUrl = this.img.src;
if(!this.img.complete)
currentUrl = helpers.other.blankImage;
if(currentUrl == this._currentUrl)
return;
helpers.html.setClass(this.canvas, "loaded", false);
this.canvas.width = this.img.naturalWidth;
this.canvas.height = this.img.naturalHeight;
this.clear();
this._currentUrl = currentUrl;
/\x2f If we're rendering the blank image (or an incomplete image), stop.
if(currentUrl == helpers.other.blankImage)
return;
/\x2f Draw the image onto the canvas.
this.ctx.save();
this.ctx.filter = this._baseFilter;
this.ctx.drawImage(this.img, 0, 0);
this.ctx.restore();
/\x2f Composite on top of the base image.
this.ctx.save();
if(this.overlay)
this.overlay(this.ctx, this.img);
this.ctx.restore();
/\x2f Use destination-over to draw the image underneath the overlay we just drew.
this.ctx.globalCompositeOperation = "destination-over";
this.ctx.drawImage(this.img, 0, 0);
helpers.html.setClass(this.canvas, "loaded", true);
}
}
/\x2f A pointless creepy eye. Looks away from the mouse cursor when hovering over
/\x2f the unfollow button.
class CreepyEyeWidget extends Widget
{
constructor({
pointerTarget,
...options
}={})
{
super({...options, template: \`
Added support for viewing Pixiv image series. \`, }, { version: 218, text: \` Added support for the "Hide AI works" filter on searches. \`, }, { version: 210, text: \` Aspect ratio thumbnails are now used by default. Square thumbs can be selected in settings. \`, }, { version: 198, text: \` Artist links have been moved to the avatar dropdown, and can be accessed directly from the popup menu.
"AI-generated" is now displayed as a tag. \`, }, { version: 172, text: \` Added support for AI rankings. \`, }, { version: 168, text: \` Images tagged as "AI" are now marked in search results. There are too many of these flooding the site, but this gives an alternative to muting them.
Slideshows are now limited to 60 FPS by default. This can be disabled in settings.
Chrome has problems with high refresh rate monitors, and can cause other windows to
stutter when animations are running on another monitor. Slideshows are usually
gradual pans anyway, so limiting the framerate avoids this problem without affecting
the result very much.
\`,
},
{
version: 164,
boring: true,
text: \`
Search autocomplete now works for searches with multiple tags.
\`,
},
{
version: 162,
text: \`
Search tags can now be saved in the search dropdown separately from recents and grouped
together.
Added "Loop" in the more options dropdown to loop the current image. \`, }, { version: 153, boring: true, text: \` Pressing Ctrl-S now saves the current image or video, and Ctrl-Alt-S saves a ZIP of the current manga post.
Fixed hotkeys in search results, so hotkeys like Ctrl-B work when hovering over thumbnails. \`, }, { version: 152, boring: true, text: \` Tags that have been searched for recently now appear at the top of the artist tag list. \`, }, { version: 151, boring: true, text: \` Navigating through images with the mousewheel now skips past manga pages if the image is muted. \`, }, { version: 145, text: \` Added support for viewing followed users who are accepting requests, and a link from the user to the request page. This feature is still being rolled out by Pixiv and may not be available for all users immediately. \`, }, { version: 142, boring: true, text: \` The slideshow can now be set to fade through images without panning.
Thumbnail panning now stops after a while if there's no mouse movement, so it doesn't keep going forever. \`, }, { version: 139, text: \` Added a panning/slideshow editor, to edit how an image will pan and zoom during slideshows. Right-click and enable \${ helpers.createIcon("settings") } \${ helpers.createIcon("brush") } Image Editing, then \${ helpers.createIcon("wallpaper") } Edit Panning while viewing an image.
Added a button to \${ helpers.createIcon("restart_alt") } Refresh the search from the current page. The \${ helpers.createIcon("refresh") } Refresh button now always restarts from the beginning. \`, }, { version: 133, text: \` Pressing Ctrl-P now toggles image panning.
Added image cropping for trimming borders from images. Enable \${ helpers.createIcon("settings") } Image Editing in the context menu to display the editor.
The page number is now shown over expanded manga posts while hovering over the image, so you can collapse long posts without having to scroll back up. \`, }, { version: 132, text: \` Improved following users, allowing changing a follow to public or private and adding support for follow tags. \`, }, { version: 129, text: \` Added a new way of viewing manga posts.
You can now view manga posts in search results. Click the page count in the corner of thumbnails to show all manga pages. You can also click \${ helpers.createIcon("open_in_full") } in the top menu to expand everything, or turn it on everywhere in settings. \`, }, { version: 126, text: \` Muted tags and users can now be edited from the preferences menu.
Any number of tags can be muted. If you don't have Premium, mutes will be saved to the browser instead of to your Pixiv account. \`, }, { version: 123, text: \` Added support for viewing completed requests.
Disabled light mode for now. It's a pain to maintain two color schemes and everyone is probably using dark mode anyway. If you really want it, let me know on GitHub. \`, }, { version: 121, text: \` Added a slideshow mode. Click \${ helpers.createIcon("wallpaper") } at the top.
Added an option to pan images as they're viewed.
Double-clicking images now toggles fullscreen.
The background is now fully black when viewing an image, for better contrast. Other screens are still dark grey.
Added an option to bookmark privately by default, such as when bookmarking by selecting a bookmark tag.
Reworked the animation UI. \`, }, { version: 117, text: \` Added Linked Tabs. Enable linked tabs in preferences to show images on more than one monitor as they're being viewed (try it with a portrait monitor).
Showing the popup menu when Ctrl is pressed is now optional. \`, }, { version: 112, text: \` Added Send to Tab to the context menu, which allows quickly sending an image to another tab.
Added a More Options dropdown to the popup menu. This includes some things that were previously only available from the hover UI. Send to Tab is also in here.
Disabled the "Similar Illustrations" lightbulb button on thumbnails. It can now be accessed from the popup menu, along with a bunch of other ways to get image recommendations. \` }, { version: 110, text: \` Added Quick View. This views images immediately when the mouse is pressed, and images can be panned with the same press.
This can be enabled in preferences, and may become the default in a future release. \` }, { version: 109, boring: true, text: \`Added a visual marker on thumbnails to show the last image you viewed.\` }, { version: 104, text: \` Bookmarks can now be shuffled, to view them in random order.
Bookmarking an image now always likes it, like Pixiv's mobile app. (Having an option for this didn't seem useful.)
Added a Recent History search, to show recent search results. This can be turned off in settings. \` }, { version: 102, boring: true, text: "Animations now start playing much faster." }, { version: 100, text: \` Enabled auto-liking images on bookmark by default, to match the Pixiv mobile apps. If you've previously changed this in preferences, your setting should stay the same.
Added a download button for the current page when viewing manga posts. \` }, { version: 97, text: \` Holding Ctrl now displays the popup menu, to make it easier to use for people on touchpads.
Keyboard hotkeys reworked, and can now be used while hovering over search results.
Ctrl-V - like image
Ctrl-B - bookmark
Ctrl-Alt-B - bookmark privately
Ctrl-Shift-B - remove bookmark
Ctrl-Alt-Shift-M - add bookmark tag
Ctrl-F - follow
Ctrl-Alt-F - follow privately
Ctrl-Shift-F - unfollow
\`
},
{
version: 89,
text: \`
Reworked zooming to make it more consistent and easier to use.
You can now zoom images to 100% to view them at actual size. \` }, { version: 82, text: "Press Ctrl-Alt-Shift-B to bookmark an image with a new tag." }, { version: 79, text: "Added support for viewing new R-18 works by followed users." }, { version: 77, text: \` Added user searching.
Commercial/subscription links in user profiles (Fanbox, etc.) now use a different icon. \` }, { version: 74, text: \` Viewing your followed users by tag is now supported.
You can now view other people who bookmarked an image, to see what else they've bookmarked. This is available from the top-left hover menu. \` }, { version: 72, text: \` The followed users page now remembers which page you were on if you reload the page, to make it easier to browse your follows if you have a lot of them.
Returning to followed users now flashes who you were viewing like illustrations do, to make it easier to pick up where you left off.
Added a browser back button to the context menu, to make navigation easier in fullscreen when the browser back button isn't available. \` }, { version: 68, text: \` You can now go to either the first manga page or the page list from search results. Click the image to go to the first page, or the page count to go to the page list.
Our button is now in the bottom-left when we're disabled, since Pixiv now puts a menu button in the top-left and we were covering it up. \` }, { version: 65, text: \` Bookmark viewing now remembers which page you were on if the page is reloaded.
Zooming is now in smaller increments, to make it easier to zoom to the level you want. \` }, { version: 57, text: \` Search for similar artists. Click the recommendations item at the top of the artist page, or in the top-left when viewing an image.
You can also now view suggested artists. \` }, { version: 56, text: \` Tag translations are now supported. This can be turned off in preferences.
Added quick tag search editing. After searching for a tag, click the edit button to quickly add and remove tags. \` }, { version: 55, text: \` The \\"original\\" view is now available in Rankings.
Hiding the mouse cursor can now be disabled in preferences. \` }, { version: 49, text: \` Add \\"Hover to show UI\\" preference, which is useful for low-res monitors. \` }, { version: 47, text: \` You can now view the users you're following with \\"Followed Users\\". This shows each user's most recent post. \` }, ]; export default class WhatsNew extends widget { /\x2f Return the newest revision that exists in history. This is always the first /\x2f history entry. static latestHistoryRevision() { return updateHistory[0].version; } /\x2f Return the latest interesting history entry. /\x2f /\x2f We won't highlight the "what's new" icon for boring history entries. static latestInterestingHistoryRevision() { for(let history of updateHistory) { if(history.boring) continue; return history.version; } /\x2f We shouldn't get here. throw Error("Couldn't find anything interesting"); } /\x2f Set html[data-whats-new-updated] for highlights when there are What's New updates. /\x2f This updates automatically if whats-new-last-viewed-version is updated. static handleLastViewedVersion() { let refresh = () => { let lastViewedVersion = ppixiv.settings.get("whats-new-last-viewed-version", 0); /\x2f This was stored as a string before, since it came from GM_info.script.version. Make /\x2f sure it's an integer. lastViewedVersion = parseInt(lastViewedVersion); let newUpdates = lastViewedVersion < WhatsNew.latestInterestingHistoryRevision(); helpers.html.setDataSet(document.documentElement.dataset, "whatsNewUpdated", newUpdates); }; refresh(); ppixiv.settings.addEventListener("whats-new-last-viewed-version", refresh); } constructor({...options}={}) { super({...options, dialogClass: "whats-new-dialog", header: "Updates", template: \`