Fix-pixiv-thumbnails.user.js

/* eslint-disable max-len */
// ==UserScript==
// @name           Improve pixiv thumbnails
// @name:ja        pixivサムネイルを改善する
// @namespace      https://www.kepstin.ca/userscript/
// @license        MIT; https://spdx.org/licenses/MIT.html
// @version        20240918.2
// @description    Stop pixiv from cropping thumbnails to a square. Use higher resolution thumbnails on Retina displays.
// @description:ja 正方形にトリミングされて表示されるのを防止します。Retinaディスプレイで高解像度のサムネイルを使用します。
// @author         Calvin Walton
// @match          https://www.pixiv.net/*
// @match          https://dic.pixiv.net/*
// @match          https://en-dic.pixiv.net/*
// @exclude        https://www.pixiv.net/fanbox*
// @noframes
// @run-at document-start
// @grant GM_setValue
// @grant GM_getValue
// @grant GM_addValueChangeListener
// ==/UserScript==
/* eslint-enable max-len */
/* global GM_addValueChangeListener */

// Copyright © 2020 Calvin Walton <calvin.walton@kepstin.ca>
//
// Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation
// files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy,
// modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the
// Software is furnished to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice (including the next paragraph) shall be included in all copies or
// substantial portions of the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
// WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
// COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE,
// ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

(function kepstinFixPixivThumbnails () {
  'use strict'

  // Use an alternate domain (CDN) to load images
  // Configure this by setting `domainOverride` in userscript values
  let domainOverride = ''

  // Use custom (uploader-provided) thumbnail crops
  // If you enable this setting, then if the uploader has set a custom square crop on the image, it will
  // be used. Automatically cropped images will continue to be converted to uncropped images
  // Configure this by setting `allowCustom` in userscript values
  let allowCustom = false

  // Browser feature detection for CSS 4 image-set()
  let imageSetSupported = false
  let imageSetPrefix = ''
  if (CSS.supports('background-image', 'image-set(url("image1") 1x, url("image2") 2x)')) {
    imageSetSupported = true
  } else if (CSS.supports('background-image', '-webkit-image-set(url("image1") 1x, url("image2") 2x)')) {
    imageSetSupported = true
    imageSetPrefix = '-webkit-'
  }

  // A regular expression that matches pixiv thumbnail urls
  // Has 5 captures:
  // $1: domain name
  // $2: thumbnail width (optional)
  // $3: thumbnail height (optional)
  // $4: everything in the URL after the thumbnail size up to the image suffix
  // $5: thumbnail crop type: square (auto crop), custom (manual crop), master (no crop)
  // eslint-disable-next-line max-len
  const srcRegexp = /https?:\/\/(i[^.]*\.pximg\.net)(?:\/c\/(\d+)x(\d+)(?:_[^/]*)?)?\/(?:custom-thumb|img-master)\/(.*?)_(custom|master|square)1200.jpg/

  // Look for a URL pattern for a thumbnail image in a string and return its properties
  // Returns null if no image found, otherwise a structure containing the domain, width, height, path.
  function matchThumbnail (str) {
    const m = str.match(srcRegexp)
    if (!m) { return null }

    let [_, domain, width, height, path, crop] = m
    // The 1200 size does not include size in the URL, so fill in the values here when missing
    width = width || 1200
    height = height || 1200
    if (domainOverride) { domain = domainOverride }
    return { domain, width, height, path, crop }
  }

  // List of image sizes and paths possible for original aspect thumbnail images
  // This must be in order from small to large for the image set generation to work
  const imageSizes = [
    { size: 150, path: '/c/150x150' },
    { size: 240, path: '/c/240x240' },
    { size: 360, path: '/c/360x360_70' },
    { size: 600, path: '/c/600x600' },
    { size: 1200, path: '' }
  ]

  // Generate a list of original thumbnail images in various sizes for an image,
  // and determine a default image based on the display size and screen resolution
  function genImageSet (size, m) {
    if (allowCustom && m.crop === 'custom') {
      return imageSizes.map((imageSize) => ({
        src: `https://${m.domain}${imageSize.path}/custom-thumb/${m.path}_custom1200.jpg`,
        scale: imageSize.size / size
      }))
    }
    return imageSizes.map((imageSize) => ({
      src: `https://${m.domain}${imageSize.path}/img-master/${m.path}_master1200.jpg`,
      scale: imageSize.size / size
    }))
  }

  // Create a srcset= attribute on the img, with appropriate dpi scaling values
  // Also update the src= attribute
  function imgSrcset (img, size, m) {
    const imageSet = genImageSet(size, m)
    img.srcset = imageSet.map((image) => `${image.src} ${image.scale}x`).join(', ')
    // IMG tag src attribute is assumed to be 1x scale
    const defaultSrc = imageSet.find((image) => image.scale >= 1) || imageSet[imageSet.length - 1]
    img.src = defaultSrc.src
    img.style.objectFit = 'contain'
    if (!img.attributes.width && !img.style.width) { img.setAttribute('width', size) }
    if (!img.attributes.height && !img.style.height) { img.setAttribute('height', size) }
  }

  // Set up a css background-image with image-set() where supported, falling back
  // to a single image
  function cssImageSet (node, size, m) {
    const imageSet = genImageSet(size, m)
    node.style.backgroundSize = 'contain'
    node.style.backgroundPosition = 'center'
    node.style.backgroundRepeat = 'no-repeat'
    if (imageSetSupported) {
      const cssImageList = imageSet.map((image) => `url("${image.src}") ${image.scale}x`).join(', ')
      node.style.backgroundImage = `${imageSetPrefix}image-set(${cssImageList})`
    } else {
      const optimalSrc = imageSet.find((image) => image.scale >= window.devicePixelRatio) || imageSet[imageSet.length - 1]
      node.style.backgroundImage = `url("${optimalSrc.src}")`
    }
  }

  // Parse a CSS length value to a number of pixels. Returns NaN for other units.
  function cssPx (value) {
    if (!value.endsWith('px')) { return NaN }
    return +value.replace(/[^\d.-]/g, '')
  }

  function findParentSize (node) {
    let e = node
    while (e.parentElement) {
      let size = Math.max(e.getAttribute('width'), e.getAttribute('height'))
      if (size > 0) { return size }

      size = Math.max(cssPx(e.style.width), cssPx(e.style.height))
      if (size > 0) { return size }

      e = e.parentElement
    }
    e = node
    while (e.parentElement) {
      const cstyle = window.getComputedStyle(e)
      const size = Math.max(cssPx(cstyle.width), cssPx(cstyle.height))
      if (size > 0) { return size }

      e = e.parentElement
    }
    return 0
  }

  function handleImg (node) {
    if (node.dataset.kepstinThumbnail === 'bad') { return }
    // Check for lazy-loaded images, which have a temporary URL
    // They'll be updated later when the src is set
    if (node.src === '' || node.src.startsWith('data:') || node.src.endsWith('transparent.gif')) { return }

    // Terrible hack: A few pages on pixiv create temporary IMG tags to... preload? the images, then switch
    // to setting a background on a DIV afterwards. This would be fine, except the temporary images have
    // the height/width set to 0, breaking the hidpi image selection
    if (
      node.getAttribute('width') === '0' && node.getAttribute('height') === '0' &&
      /^\/(?:discovery|(?:bookmark|mypixiv)_new_illust(?:_r18)?\.php)/.test(window.location.pathname)
    ) {
      // Set the width/height to the expected values
      node.setAttribute('width', 198)
      node.setAttribute('height', 198)
    }

    const m = matchThumbnail(node.src || node.srcset)
    if (!m) { node.dataset.kepstinThumbnail = 'bad'; return }
    if (node.dataset.kepstinThumbnail === m.path) { return }

    // Cancel image load if it's not already loaded
    if (!node.complete) {
      node.src = ''
      node.srcset = ''
    }

    // layout-thumbnail type don't have externally set size, but instead element size is determined
    // from image size. For other types we have to calculate size.
    let size = Math.max(m.width, m.height)
    if (node.matches('div._layout-thumbnail img')) {
      node.setAttribute('width', m.width)
      node.setAttribute('height', m.height)
    } else {
      const newSize = findParentSize(node)
      if (newSize > 16) { size = newSize }
    }

    imgSrcset(node, size, m)

    node.dataset.kepstinThumbnail = m.path
  }

  function handleCSSBackground (node) {
    if (node.dataset.kepstinThumbnail === 'bad') { return }
    // Check for lazy-loaded images
    // They'll be updated later when the background image (in style attribute) is set
    if (
      node.classList.contains('js-lazyload') ||
      node.classList.contains('lazyloaded') ||
      node.classList.contains('lazyloading')
    ) { return }

    const m = matchThumbnail(node.style.backgroundImage)
    if (!m) { node.dataset.kepstinThumbnail = 'bad'; return }
    if (node.dataset.kepstinThumbnail === m.path) { return }

    node.style.backgroundImage = ''

    let size = Math.max(cssPx(node.style.width), cssPx(node.style.height))
    if (!(size > 0)) {
      const cstyle = window.getComputedStyle(node)
      size = Math.max(cssPx(cstyle.width), cssPx(cstyle.height))
    }
    if (!(size > 0)) { size = Math.max(m.width, m.height) }

    cssImageSet(node, size, m)

    node.dataset.kepstinThumbnail = m.path
  }

  function onetimeThumbnails (parentNode) {
    parentNode.querySelectorAll('IMG').forEach((node) => {
      handleImg(node)
    })
    parentNode.querySelectorAll('DIV[style*=background-image]').forEach((node) => {
      handleCSSBackground(node)
    })
    parentNode.querySelectorAll('A[style*=background-image]').forEach((node) => {
      handleCSSBackground(node)
    })
  }

  function mutationObserverCallback (mutationList, _observer) {
    mutationList.forEach((mutation) => {
      const target = mutation.target
      switch (mutation.type) {
        case 'childList':
          mutation.addedNodes.forEach((node) => {
            if (node.nodeType !== Node.ELEMENT_NODE) return

            if (node.nodeName === 'IMG') {
              handleImg(node)
            } else if ((node.nodeName === 'DIV' || node.nodeName === 'A') && node.style.backgroundImage) {
              handleCSSBackground(node)
            } else {
              onetimeThumbnails(node)
            }
          })
          break
        case 'attributes':
          if (target.nodeType !== Node.ELEMENT_NODE) break

          if ((target.nodeName === 'DIV' || target.nodeName === 'A') && target.style.backgroundImage) {
            handleCSSBackground(target)
          } else if (target.nodeName === 'IMG') {
            handleImg(target)
          }
          break
        // no default
      }
    })
  }

  function addStylesheet() {
    if (!(window.location.host == "www.pixiv.net")) { return; }
    if (document.head === null) {
      document.addEventListener("DOMContentLoaded", addStylesheet, { once: true });
      return;
    }
    let s = document.createElement("style");
    s.textContent = `
      div:has(>div[width][height]), div:has(>label div[width][height]), div[type="illust"] {
        border-radius: 0;
      }
      div[width][height]:hover img[data-kepstin-thumbnail], div[type="illust"] a:hover img {
        opacity: 1 !important;
        background-color: var(--charcoal-background1-hover);
      }
      div[radius] img[data-kepstin-thumbnail], div[type="illust"] img {
        border-radius: 0;
        background-color: var(--charcoal-background1);
        transition: background-color 0.2s;
      }
      div[radius]::before, div[type="illust"] a > div::before {
        border-radius: 0;
        background: transparent;
        box-shadow: inset 0 0 0 1px var(--charcoal-border);
      }
    `;
    document.head.appendChild(s);
  }

  function loadSettings () {
    const gmDomainOverride = GM_getValue('domainOverride')
    if (typeof gmDomainOverride === 'undefined') {
      // migrate settings
      domainOverride = localStorage.getItem('kepstinDomainOverride') || ''
      localStorage.removeItem('kepstinDomainOverride')
    } else {
      domainOverride = gmDomainOverride || ''
    }
    if (domainOverride !== gmDomainOverride) {
      GM_setValue('domainOverride', domainOverride)
    }

    const gmAllowCustom = GM_getValue('allowCustom')
    if (typeof gmAllowCustom === 'undefined') {
      // migrate settings
      allowCustom = !!localStorage.getItem('kepstinAllowCustom')
      localStorage.removeItem('kepstinAllowCustom')
    } else {
      allowCustom = !!gmAllowCustom
    }
    if (allowCustom !== gmAllowCustom) {
      GM_setValue('allowCustom', allowCustom)
    }
  }

  if (typeof GM_getValue !== 'undefined' && typeof GM_setValue !== 'undefined') {
    loadSettings()
  }
  if (typeof GM_addValueChangeListener !== 'undefined') {
    GM_addValueChangeListener('domainOverride', (_name, _oldValue, newValue, remote) => {
      if (!remote) { return }
      domainOverride = newValue || ''
      if (domainOverride !== newValue) {
        GM_setValue('domainOverride', domainOverride)
      }
    })
    GM_addValueChangeListener('allowCustom', (_name, _oldValue, newValue, remote) => {
      if (!remote) { return }
      allowCustom = !!newValue
      if (allowCustom !== newValue) {
        GM_setValue('allowCustom', allowCustom)
      }
    })
  }

  addStylesheet()
  onetimeThumbnails(document.firstElementChild)
  const thumbnailObserver = new MutationObserver(mutationObserverCallback)
  thumbnailObserver.observe(document.firstElementChild, {
    childList: true,
    subtree: true,
    attributes: true,
    attributeFilter: ['class', 'src', 'style']
  })
}())