Reddit expand media and comments

Shows pictures and some videos right after the link, loads and expands comment threads.
当前为 2019-02-12 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name           Reddit expand media and comments
// @description    Shows pictures and some videos right after the link, loads and expands comment threads.
// @version        0.1.6
// @author         wOxxOm
// @namespace      wOxxOm.scripts
// @license        MIT License
// @match          *://*.reddit.com/*
// @grant          GM_addStyle
// @grant          GM_xmlhttpRequest
// @connect        imgur.com
// @connect        gfycat.com
// @connect        streamable.com
// @connect        instagram.com
// @connect        ibb.co
// @connect        prntscr.com
// @connect        prnt.sc
// ==/UserScript==

const CLASS = 'reddit-inline-media';
const CLASS_ALBUM = CLASS + '-album';
const MORE_SELECTOR = '[id^="moreComments-"] p, .morecomments a';
const RULES = [
  {r:/^https?:\/\/(i\.)?imgur\.com\/(?:a|gallery)\/(\w+)$/i,
   s:'https://imgur.com/ajaxalbums/getimages/$2/hit.json?all=true',
   q:(json, text) =>
     Array.from(((json || {}).data || {}).images || [])
          .map(img => img && `https://i.imgur.com/${img.hash}${img.ext}`),
  },
  {r:/^https?:\/\/(i\.)?imgur\.com\/\w+$/i, q:'link[rel="image_src"], meta[name="twitter:player:stream"]'},
  {r:/^https?:\/\/streamable\.com\/.+/i, q:'video'},
  {r:/^https?:\/\/gfycat\.com\/.+/i, q:'source[src*=".webm"]'},
  {r:/^https?:\/\/(www\.)?instagram\.com\/p\/[^/]+\/?$/i, q:'meta[property="og:image"]'},
  {r:/^https?:\/\/ibb\.co\/\w+$/i, q:'meta[property="og:image"]'},
  {r:/^https?:\/\/prntscr\.com\/(\w+)$/i, s:'https://prnt.sc/$1', q:'meta[property="og:image"]', xhr:true},
  {r:/^https?:\/\/prnt\.sc\/(\w+)$/i, q:'meta[property="og:image"]', xhr:true},
  {r:/\.gifv(\?.*)?$/i, s:'.mp4'},
  {r:/\.(jpe?g|png|gif|webm|mp4)(\?.*)?$/i},
];

GM_addStyle(`
  .${CLASS} {
    max-width: 100%;
    display: block;
  }
  .${CLASS}[data-src] {
    padding-top: 300px;
  }
  .${CLASS}:hover {
    outline: 2px solid #3bbb62;
  }
  .${CLASS_ALBUM} {
    overflow-y: auto;
    max-height: calc(100vh - 100px);
    margin: .5em 0;
    -webkit-mask-image: linear-gradient(white, transparent);
    mask-image: linear-gradient(white, transparent);
  }
  .${CLASS_ALBUM}:hover {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .${CLASS_ALBUM} > :nth-child(n + 2) {
    margin-top: 1em;
  }
`);

const isChrome = navigator.userAgent.includes('Chrom');

const REQUEST_THROTTLE_MS = location.hostname.startsWith('old.') ? 500 : 250;
const ME = Symbol(GM_info.script.name);
const more = [];

new MutationObserver(onMutation)
  .observe(document.body, {subtree: true, childList: true});

onMutation([{
  addedNodes: [document.body]
}]);

const scrollObserver = new IntersectionObserver(onScroll, {
  rootMargin: '200% 0px',
});

function onMutation(mutations) {
  const items = [];
  let someElementsAdded = false;
  for (var i = 0, m; (m = mutations[i++]);) {
    for (var j = 0, added = m.addedNodes, node; (node = added[j++]);) {
      if (node.nodeType !== 1) continue; // Node.ELEMENT_NODE
      someElementsAdded = true;
      if (node.localName === 'a') {
        const data = preprocess(node);
        if (data) items.push(data);
        continue;
      }
      if (!node.children[0]) continue;
      var aa = node.getElementsByTagName('a');
      for (var k = 0, a; (a = aa[k++]);) {
        const data = preprocess(a);
        if (data) items.push(data);
      }
    }
  }
  if (someElementsAdded) debounce(observeShowMore);
  if (items.length) setTimeout(process, 0, items);
}

function onScroll(entries) {
  for (const e of entries) {
    if (!e.isIntersecting)
      continue;
    let el = e.target;
    if (el.localName === 'img' || el.localName === 'video') {
      scrollObserver.unobserve(el);
      el.src = el.dataset.src;
      delete el.dataset.src;
      continue;
    }
    if (el.localName === 'a') {
      // switch to an unfocusable element to prevent the link
      // from stealing focus and scrolling the view
      const el2 = document.createElement('span');
      el2.setAttribute('onclick', el.getAttribute('onclick'));
      el2.setAttribute('id', el.id);
      el.parentNode.replaceChild(el2, el);
      el = el2;
    }
    expandNextComment(el);
  }
}

function preprocess(a) {
  let url = a.href;
  for (const {r, s, q} of RULES) {
    if (typeof r === 'string') {
      if (!url.includes(r)) continue;
    } else {
      if (!r.test(url)) continue;
      if (s) url = url.replace(r, s);
    }
    return {a, url, q};
  }
}

function process(items) {
  for (const item of items) {
    const {a, url, q} = item;
    const {href} = a;
    const text = a.textContent.trim();
    if (
      text &&
      !a.getElementsByTagName('img')[0] &&
      !/^https?:\/\/\S+?\.{3}$/.test(text) &&
      !a.closest('.scrollerItem,' +
                 '[contenteditable="true"],' +
                 '[data-test-id="post-content"],' +
                 `a[href="${href}"] + * a[href="${href}"],` +
                 `img[src="${href}"] + * a[href="${href}"]`)
    ) {
      (q ? expandRemote : expand)(item);
    }
  }
}

function expandRemote({a, url, q, xhr}) {
  GM_xmlhttpRequest({
    url,
    method: 'GET',
    onload: r => {
      const isJSON = /^content-type:.*?json\s*$/mi.test(r.responseHeaders);
      const doc = isJSON ?
        tryJSONparse(r.response) :
        new DOMParser().parseFromString(r.response, 'text/html');
      if (typeof q === 'string') {
        if (isJSON) return;
        const el = doc && doc.querySelector(q);
        const imageUrl = el && (el.href || el.src || el.content);
        if (imageUrl) {
          if (xhr) {
            GM_xmlhttpRequest({
              imageUrl,
              method: 'GET',
              headers: {Referer: url},
              responseType: 'arraybuffer',
              onload: r => {
                expand({a, url: arrayBufferToBase64(r.response, getMimeType(imageUrl))});
              },
            });
          } else {
            expand({a, url: imageUrl});
          }
        }
        return;
      }
      let urls;
      if (typeof q === 'function') {
        try {
          urls = q(doc, r.response);
        } catch (e) {}
      }
      if (!urls || !urls.length) return;
      urls = Array.isArray(urls) ? urls : [urls];
      if (urls.length > 1) {
        a = a.insertAdjacentElement('afterEnd', document.createElement('div'));
        a.className = CLASS_ALBUM;
      }
      for (const url of urls) {
        if (url)
          a = expand({a, url});
      }
    },
  });
}

function expand({a, url = a.href}) {
  const isVideo = /(webm|gifv|mp4)(\?.*)?$/i.test(url);
  const el = document.createElement(isVideo ? 'video' : 'img');
  el.dataset.src = url;
  el.className = CLASS;
  a.insertAdjacentElement(a.classList.contains(CLASS_ALBUM) ? 'beforeEnd' : 'afterEnd', el);
  if (isVideo) {
    el.controls = true;
    el.preload = 'metadata';
    if (isChrome) el.addEventListener('click', playOnClick);
  }
  scrollObserver.observe(el);
  return el;
}

function observeShowMore() {
  const more = document.querySelector(MORE_SELECTOR);
  if (!more) return;
  for (const el of document.querySelectorAll(MORE_SELECTOR)) {
    scrollObserver.observe(el);
  }
}

function expandNextComment(el) {
  if (el)
    more.push(el);
  else
    more.shift();
  if (more.length === 1 || !el && more.length) {
    more[0].dispatchEvent(new MouseEvent('click', {bubbles: true}));
    setTimeout(expandNextComment, REQUEST_THROTTLE_MS);
  }
}

function playOnClick(event, el, wasPaused) {
  if (!el) {
    setTimeout(playOnClick, 0, event, this, this.paused);
  } else if (el.paused === wasPaused) {
    wasPaused ? el.play() : el.pause();
  }
}

function debounce(fn, timeout = 0, ...args) {
  clearTimeout(fn.__timeout);
  fn.__timeout = setTimeout(fn, timeout, ...args);
}

function tryJSONparse(str) {
  try {
    return JSON.parse(str);
  } catch (e) {
    return undefined;
  }
}

function arrayBufferToBase64(buffer, type) {
  return new Promise(resolve => {
    Object.assign(new FileReader(), {
      onload: e => resolve(e.target.result)
    }).readAsDataURL(new Blob([buffer], {type}));
  });
}

function getMimeType(url) {
  const ext = (url.match(/\.(\w+)(\?.*)?$|$/)[1] || '').toLowerCase();
  return 'image/' + (ext === 'jpg' ? 'jpeg' : ext);
}