TweetDeckの画像ビューのNSFW報告リンクを原寸リンクに差し替えて画像のインデックスを表示するスクリプト(alpha ver.)

0_usage.md

なぜかサイドメニューが消えていくバグがあるので使わないでください

使い方

Chromeで動作確認しています。多分Firefoxでも動きます。EdgeとIEは知りません。
デベロッパーツールのコンソールで実行したりブックマークレットにしてください。

注意点

あんまりデバッグをしていないので、画像ビュー周りで妙な挙動を引き起こす可能性があります。
画像ビュー周りしかいじってないので、勝手にRTやツイートなどの変な操作はしないと思います（9割9分しないけど断言はできない分かってくれ）。

BetterTweetDeckについて

Chrome/Firefox拡張のBTDが導入されていても動作します。ただしBTDの機能である他サービスの画像表示機能は未対応です。エラーが出るかは分かりません。それ以外にも独自の機能に引っかかるかもしれない。

tweetdeck-imgview-modify.js

(function() {
  function $(q) { return document.querySelector(q); }
  // ツイートIDからツイートオブジェクトを取得します。
  function getTweet(id) {
    const article = document.querySelector('article[data-tweet-id="' + id + '"]');
    if (article) {
      const dataKey = article.getAttribute('data-key');
      const columnId = article.parentElement.getAttribute('data-column');
      const column = TD.controller.columnManager.get(columnId);
      const data = column.updateIndex[dataKey];
      if (data instanceof TD.services.TwitterStatus) {
        return data;
      }
      if (data instanceof TD.services.TwitterActionFavorite ||
          data instanceof TD.services.TwitterActionRetweet ||
          data instanceof TD.services.TwitterActionMention ||
          data instanceof TD.services.TwitterActionFavoritedInteraction ||
          data instanceof TD.services.TwitterActionRetweetedInteraction) {
        return data.targetTweet;
      }
    } else {
      return null;
    }
  }
  // 画像ビュー画面を改変します。
  function modify() {
    const mediaembed = $('.js-mediaembed');
    if (!mediaembed) { return; }
    // nsfw報告を削除
    mediaembed.removeChild($('.js-media-flag-nsfw'));
    // 原寸リンクを追加
    const link = $('a');
    link.className = 'js-media-flag-nsfw med-flaglink';
    link.innerText = 'Orig size';
    link.href = $('.media-img').src.replace(/(?::\w+)?$/, ':orig');
    mediaembed.appendChild(link);
    // 左のアレ（忘れた）のテキストを変更
    $('.med-origlink').innerText = 'View tweet';
    // インデックス表示を追加
    const tweetId = document.querySelector('.js-tweet-box .js-timestamp a').href.match(/\d+\/?$/);
    const tweet = getTweet(tweetId);
    if (tweet) {
      const imgurl = document.querySelector('.media-img').src;
      let mediaIndex = -1;
      tweet.entities.media.some((m, i) => {
        const cond = imgurl.startsWith(m.media_url_https);
        if (cond) {
          mediaIndex = i;
        }
        return cond;
      });
      if (mediaIndex !== -1) {
        const indexel = document.createElement('span');
        indexel.className = 'media-index';
        indexel.innerText = '(' + (mediaIndex + 1) + '/' + tweet.entities.media.length + ' medias)';
        indexel.style.position = 'absolute';
        indexel.style.left = 'calc(50% - 40px)';
        mediaembed.appendChild(indexel);
      }
    }
  }
  // 画像ビュー監視
  new MutationObserver(mutations => {
    const mediaembed = $('.js-mediaembed');
    if (!mediaembed) { return; }
    mutations.forEach(mutation => {
      if (mutation.addedNodes.length > 0 && !($('.js-media-native-video'))) {
        modify();
        new MutationObserver(mutations => {
          mutations.some(mutation => {
            const added = mutation.addedNodes;
            if (added.length > 0 && added[0].classList.contains('js-media-preview-container')) {
              modify();
              return true;
            }
          });
        }).observe(document.querySelector('.js-mediaembed'), { childList: true });
      }
    });
  }).observe(document.getElementById('open-modal'), { childList: true });
})();