Shift Space Toggle Youtube CE Element

これは、ビデオの終わり近くにある迷惑な Youtube CE 要素を切り替えるためのものです。

スクリプトをインストールするには、Tampermonkey, GreasemonkeyViolentmonkey のような拡張機能のインストールが必要です。

You will need to install an extension such as Tampermonkey to install this script.

スクリプトをインストールするには、TampermonkeyViolentmonkey のような拡張機能のインストールが必要です。

スクリプトをインストールするには、TampermonkeyUserscripts のような拡張機能のインストールが必要です。

このスクリプトをインストールするには、Tampermonkeyなどの拡張機能をインストールする必要があります。

このスクリプトをインストールするには、ユーザースクリプト管理ツールの拡張機能をインストールする必要があります。

(ユーザースクリプト管理ツールは設定済みなのでインストール!)

このスタイルをインストールするには、Stylusなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus などの拡張機能をインストールする必要があります。

このスタイルをインストールするには、Stylus tなどの拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

このスタイルをインストールするには、ユーザースタイル管理用の拡張機能をインストールする必要があります。

(ユーザースタイル管理ツールは設定済みなのでインストール!)

このスクリプトの質問や評価の投稿はこちら通報はこちらへお寄せください
// ==UserScript==
// @name         Shift Space Toggle Youtube CE Element
// @name:en         Shift Space Toggle Youtube CE Element
// @name:ja         Shift Space Toggle Youtube CE Element
// @name:zh-TW         Shift Space Toggle Youtube CE Element
// @name:zh-CN         Shift Space Toggle Youtube CE Element
// @name         Shift Space Toggle Youtube CE Element
// @namespace    http://tampermonkey.net/
// @version      0.5.1
// @description  This is to toggle annoying Youtube CE Element near the end of the video
// @description:en  This is to toggle annoying Youtube CE Element near the end of the video
// @description:ja  これは、ビデオの終わり近くにある迷惑な Youtube CE 要素を切り替えるためのものです。
// @description:zh-TW  這是為了切換在影片結尾附近煩人的 Youtube CE 元素
// @description:zh-CN  這是為了切換在影片結尾附近煩人的 Youtube CE 元素
// @author       CY Fung
// @match        https://www.youtube.com/*
// @icon         https://www.google.com/s2/favicons?sz=64&domain=youtube.com
// @grant        none
// @license      MIT
// ==/UserScript==

/* jshint esversion:6 */
(function() {
  'use strict';

  let videoElm = null;
  const ceElems = [];
  let isPassiveAvailable = null

  let earliestShown = -1;
  let endTime = -1;

  const WeakRef = window?.WeakRef;

  let videoReady = false

  let lastPress = -1
  const allowList = [
        'DIV', 'SPAN', 'BODY', 'HTML', 'VIDEO', 'A',
        'YTD-PLAYER', 'YTD-WATCH-FLEXY', 'YTD-PAGE-MANAGER', 'YTD-MINIPLAYER'
    ];

  function cacheCEElems() {

    const m = document.querySelectorAll('ytd-player#ytd-player .ytp-ce-element');
    if (m.length === 0) return false;

    ceElems.length = 0;
    for (const elm of m) {
      ceElems.push(new WeakRef(elm))
    }

    return true;

  }

  function videoTimeUpdate(evt) {

    //passive = true
    //capture = false

    if (!videoReady) {
      if (evt?.target?.matches('ytd-player#ytd-player video')) {
        videoReady = true
        if (cacheCEElems() === false) setTimeout(cacheCEElems, 180);
      }
    }

    if (ceElems.length === 0) return;

    const video = evt.target;
    const anyShown = ceElems.some((elmRef) => elmRef.deref()?.classList?.contains('ytp-ce-element-show') === true)
    //console.log(135, anyShown, video.currentTime)
    if (anyShown) {
      if (earliestShown > 0 && -earliestShown < -video.currentTime) {
        earliestShown = video.currentTime
        endTime = video.duration
      } else if (earliestShown < 0) {
        videoElm = new WeakRef(video);
        earliestShown = video.currentTime
        endTime = video.duration
      }
    }


  }

  function initialForVideoDetection(evt) {

    //passive = true
    //capture = true

    const video = evt?.target;
    if (video?.nodeName === 'VIDEO' && typeof video.src == 'string') {} else return;

    videoReady = false;
    ceElems.length = 0;

    videoElm = null;
    earliestShown = -1;
    endTime = -1;


    new Promise(function() {


      if (video.hasAttribute('usr-video-cem')) return;
      video.setAttribute('usr-video-cem', '');

      if (isPassiveAvailable === null) isPassiveAvailable = checkPassive();
      video.addEventListener('timeupdate', videoTimeUpdate, optCapture(true, false));

    })

  }

  function pageKeyDownfunction(evt) {
    //passive = false
    //capture = true

    if (evt.code === 'Space' && evt.shiftKey) {

      if (!allowList.includes(evt.target.nodeName)) return;

      if (endTime > earliestShown && earliestShown > 0) {

        let video = videoElm?.deref();

        if (!video) return;

        let p = (video.currentTime - earliestShown) / (endTime - earliestShown);
        if (p >= 0 && p <= 1) {
          evt.preventDefault();
          evt.stopPropagation();
          evt.stopImmediatePropagation();

          for (const ceElem of ceElems) {
            ceElem?.deref()?.classList.toggle('ytp-ce-element-show');
          }
        }

      }

    }
  }

  function checkPassive() {

    let passiveSupported = false;

    try {
      const options = {
        get passive() {
          passiveSupported = true;
          return false;
        }
      };

      window.addEventListener("test", null, options);
      window.removeEventListener("test", null, options);
    } catch (err) {
      passiveSupported = false;
    }

    return passiveSupported

  }

  const optCapture = (passive, capture) => isPassiveAvailable ? { passive, capture } : capture;

  new Promise(function() {

    if (isPassiveAvailable === null) isPassiveAvailable = checkPassive();
    document.addEventListener('canplay', initialForVideoDetection, optCapture(true, true));

  })

  document.addEventListener('keydown', pageKeyDownfunction, true)

  //ytp-ce-video ytp-ce-top-left-quad ytp-ce-size-853 ytp-ce-element-show

  // Your code here...
})();