25 Channel Video Demultiplexer

ランキングにあるチャンネル動画を右に分離するやつ
Wrap lines
// ==UserScript==
// @name        25 Channel Video Demultiplexer
// @namespace   https://github.com/segabito/
// @description ランキングにあるチャンネル動画を右に分離するやつ
// @include     *://www.nicovideo.jp/ranking/*
// @version     1.1.3
// @grant       none
// @run-at      document-start
// @noframes
// @license     public domain
// ==/UserScript==

(() => {
  const monkey = () => {

    const addStyle = function(styles, id) {
      const elm = document.createElement('style');
      elm.type = 'text/css';
      if (id) { elm.id = id; }

      elm.append(document.createTextNode(styles.toString()));
      (document.head || document.documentElement).append(elm)
      return elm;
    };

    const css = `
      .BaseRankingContentContainer-channel {
        font-size: 13px;
        position: relative;
      }
      .BaseRankingContentContainer-channel .MediaObject.RankingMainVideo {
        box-shadow: none !important;
        border-radius: none !important;
        margin-bottom: 16px;
        pointer-events: none;
      }

      .BaseRankingContentContainer-channel .RankingRowRank {
        right: 0;
        pointer-events: none;
        user-select: none;
        left: auto;
        transform: none;
        opacity: 0.8;
      }
      .BaseRankingContentContainer-channel .MediaObject-image {
        pointer-events: auto;
      }
      .BaseRankingContentContainer-channel .MediaObject.RankingMainVideo .Thumbnail {
        width: 96px;
        border-radius: 4px;
      }
      .BaseRankingContentContainer-channel [data-nicoad-grade] .Thumbnail.VideoThumbnail .Thumbnail-image {
        margin: 2px;
        background-size: calc(100% + 4px);
      }

      .BaseRankingContentContainer-channel [data-nicoad-grade] .Thumbnail.VideoThumbnail:after {
        background-size: 48px 48px;
        width: 24px;
        height: 24px;
        border-radius: none;
      }
      .BaseRankingContentContainer-channel .VideoThumbnailComment {
        display: none;
      }
      .BaseRankingContentContainer-channel .Thumbnail.VideoThumbnail .VideoLength {
        position: absolute;
        bottom: 0px;
        right: 2px;
        padding: 0;
      }

      .BaseRankingContentContainer-channel .MediaObject.RankingMainVideo .MediaObject-body {
        top: 0;
        left: 96px;
        bottom: 0;
      }
      .BaseRankingContentContainer-channel .MediaObject.RankingMainVideo .RankingMainVideo-title {
        font-size: 13px;
        pointer-events: none;
      }
      .BaseRankingContentContainer-channel .MediaObject.RankingMainVideo .RankingMainVideo-meta .RankingMainVideo-metaItem:first-child {
        display: none;
      }
      .BaseRankingContentContainer-channel .MediaObject.RankingMainVideo .RankingMainVideo-meta .RankingMainVideo-metaItem {
        width: 100%;
        text-align: right;
        font-size: 12px;
      }
      .BaseRankingContentContainer-channel .MediaObject.RankingMainVideo .RankingMainVideo-description {
        display: none;
      }

      .BaseRankingContentContainer.BaseRankingContentContainer-channel.is-sticky {
        position: sticky;
        top: 36px;
        z-index: 1000;
        box-shadow: 2px 2px #888;
        border: 1px solid #ccc;
      }
      body.nofix .BaseRankingContentContainer.BaseRankingContentContainer-channel.is-sticky {
        top: 0;
      }
      .BaseRankingContentContainer-channel.is-sticky .BaseRankingContentContainer-main {
        background: #fafafa;
        max-height: 60vh;
        overflow-y: scroll;
        overflow-x: hidden;
        overscroll-behavior: contain;
      }

      .BaseRankingContentContainer [data-title]:not([disabled]):hover:after {
        display: none;
      }
      .BaseRankingContentContainer-channel .BaseRankingContentContainer-main::-webkit-scrollbar {
        background: #e5e5e5;
      }

      .BaseRankingContentContainer-channel .BaseRankingContentContainer-main::-webkit-scrollbar-thumb {
        border-radius: 0;
        background: #999;
      }

      .BaseRankingContentContainer-channel .BaseRankingContentContainer-main::-webkit-scrollbar-button {
        background: #999;
        display: none;
      }

      .BaseRankingContentContainer-channel .toggle-sticky-button {
        position: absolute;
        background: transparent;
        right: 0;
        top: 0;
        border: none;
        outline: none;
        cursor: pointer;
        font-size: 22px;
        filter: grayscale(50%);
      }
      .is-sticky .toggle-sticky-button {
        filter: none;
      }
    `;
    const container = `
      <section class="BaseRankingContentContainer BaseRankingContentContainer-channel is-sticky demultiplexer">
        <header>
        <button type="button" class="toggle-sticky-button" data-command="toggle-sticky">
          &#128204;
        </button>
        <h1>チャンネル動画</h1>
        </header>
        <div class="BaseRankingContentContainer-main">
        </div>
      </section>
    `;

    const initElement = () => {
      let element = document.querySelector('.BaseRankingContentContainer.BaseRankingContentContainer-channel.demultiplexer');
      if (element) {
        return element;
      }
      console.log('run %c"25 Channel Video Demultiplexer"', `
        font-size: 150%;
        font-family: "Apple SD Gothic Neo";
        color: black;
        text-shadow: 2px 2px 0 #ccc;
      `);

      addStyle(css);
      document.querySelector('.SpecifiedRanking-sub').insertAdjacentHTML('afterbegin', container);
      element = document.querySelector('.BaseRankingContentContainer.BaseRankingContentContainer-channel');
      element.addEventListener('click', e => {
        const target = e.target.closest('[data-command]');
        if (!target) {
          return;
        }
        e.preventDefault();
        e.stopPropagation();
        const {command, param} = target.dataset;
        switch (command) {
          case 'toggle-sticky':
            localStorage['sticky-channel'] =
              element.classList.contains('is-sticky') ? '0' : '1';
            element.classList.toggle('is-sticky', localStorage['sticky-channel'] === '1');
          break;
          default:
            return;
        }
      });
      element.classList.toggle('is-sticky', localStorage['sticky-channel'] !== '0');
      return element;
    };

    const update = (e) => {
      const items = document.querySelectorAll('.SpecifiedRanking-main .MediaObject.RankingMainVideo[data-video-id^="so"]');
      if (!items.length) {
        return false;
      }

      initElement().querySelector('.BaseRankingContentContainer-main').append(...items);
      return true;
    };

    window.ChannelVideoDemultiplexer = { update };
    update();
    window.addEventListener('MatrixResorted', update, {once: true});
  };

  window.addEventListener('DOMContentLoaded', monkey);
})();
欢迎访问Greasy Fork镜像
