Greasy Fork

Separate_Offiical_Video

ランキングにあるチャンネル動画を右に分離するやつ

当前为 2019-06-26 提交的版本,查看 最新版本

// ==UserScript==
// @name        Separate_Offiical_Video
// @namespace   https://github.com/segabito/
// @description ランキングにあるチャンネル動画を右に分離するやつ
// @include     *://www.nicovideo.jp/ranking/*
// @version     1.0.0
// @grant       none
// @noframes
// ==/UserScript==

(function() {
  var monkey = function() {

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

      var text = styles.toString();
      text = document.createTextNode(text);
      elm.appendChild(text);
      var head = document.getElementsByTagName('head');
      head = head[0];
      head.appendChild(elm);
      return elm;
    };

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

      .BaseRankingContentContainer-channel .RankingRowRank {
        right: -16px;
        pointer-events: none;
        user-select: none;
        left: auto;
        transform: none;
      }

      .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;
      }
      .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;
      }
    `;
    const container = `
      <section class="BaseRankingContentContainer BaseRankingContentContainer-channel">
        <header>
        <h1>チャンネル動画</h1>
        </header>
        <div class="BaseRankingContentContainer-main">
        </div>
      </section>
    `;

    const init = () => {
      const items = document.querySelectorAll('.MediaObject.RankingMainVideo[data-video-id^="so"]');
      if (!items.length) {
        return;
      }
      addStyle(css);
      document.querySelector('.BaseRankingContentContainer-topics').insertAdjacentHTML('beforebegin', container);
      document.querySelector('.BaseRankingContentContainer-channel .BaseRankingContentContainer-main').append(...Array.from(items));
    };

    init();
  };

  window.setTimeout(function() {
    try {
      monkey();
    } catch (e) {
      console.error('Exeption!', e);
    }
  }, 100);
})();