ニコ動で動画クリックして再生一時停止

Readme.md

Readme - 読んでください。本当に。

ニコニコ動画側のアップデートで使えなくなる場合が予想されます。

その場合はこのページで再度インストールを行うなどしてUserScriptをアップデートしても改善しなければ、すぐにこのUserScriptを無効化してください。 誤動作の恐れがあり危険です。

アップデートはTempermonkeyのダッシュボードもしくはアイコンから可能です。
アップデート後は再度Tempermonkeyの設定から使用中のインスタンスのURLを指定する必要がある場合があります。

ニコ動で動画クリックして再生一時停止 for ニコニコ動画 eR

※割とやばい処理の書き方です(既存のDOMに勝手にリスナを設定するなどをしています)。注意を読んでください。※
ニコニコ動画でYouTubeのように動画画面クリックで再生一時停止できるようにします。

危険性 - とても大切です

このReadme及び同時に提供されるnicovideo_clicktoplay_irihi_GPL.user.jsなどはライセンスはGPLv3です、無保証で提供されます！！！！

• つまり、このUserScriptを書いたIrihiは、このUserScriptを使用したことで利用者に生じたいかなる損害に対しても一切責任を取ることができません。
• 冒頭に書いたとおりかなりやばい書き方なのでソースコードを一度読んで処理内容を把握することをおすすめします。
• 勝手にボタンを押す機能、勝手に要素を追加する機能があります、この先変更される可能性があるタグ名やクラス名を使用してDOMを取得している部分があります。
• これらの特性により、ニコニコ動画のアップデートによって勝手に意味不明の投稿/コメントなどをしてしまったり、その他**様々な誤動作(ワンクリックで課金機能できてしまう機能があったら、誤動作で課金ボタンを押してしまう恐れさえあります)**をしてしまう恐れがあります。
• また、今後のアップデートにより簡単に動かなくなってしまう可能性が大きいです。
• ニコニコ動画そのものを使えなくしてしまう可能性もあります。
• 大きなパフォーマンスの低下があるかもしれません。

動作環境

検証はFirefoxでしか行っていません。 Tempermonkeyのみの対応です。
他では動作検証しておらず危険ですので使わないことを強くおすすめします。

インストール、有効化

インストールは、下のnicovideo_clicktoplay_irihi_GPL.user.jsの横のRawボタンをクリックしてインストールしてください
インストール

Changelog

変更履歴です。

• 0.1 - 公開

nicovideo_clicktoplay_irihi_GPL.user.js

// ==UserScript==
// @name         ニコ動で動画クリックして再生一時停止
// @namespace    irhdesign
// @version      0.1
// @description  ニコニコで無理やりクリックして再生一時停止を実装します。無保証GPLv3ライセンスです。自己責任でお使いください。
// @author       Irihi
// @match        https://www.nicovideo.jp/watch/*
// @grant        none
// @updateURL    https://gist.githubusercontent.com/irhdevel/1b6aff338147c8a74495762d0bbb6f71/raw/nicovideo_clicktoplay_irihi_GPL.user.js
// @downloadURL  https://gist.githubusercontent.com/irhdevel/1b6aff338147c8a74495762d0bbb6f71/raw/nicovideo_clicktoplay_irihi_GPL.user.js
// @supportURL   https://gist.github.com/irhdevel/1b6aff338147c8a74495762d0bbb6f71
// ==/UserScript==

(function() {
    'use strict';
    let container = document.querySelector(".VideoContainer")
    let target = document.querySelector(".PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPauseButton, .PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPlayButton")
    document.querySelector(".VideoContainer").addEventListener("mouseup", (e)=>{
        console.log("da")
        const animation = {
            transform: ["translate(-50%, -50%) scale(0.3)", "translate(-50%, -50%) scale(1)"],
            opacity:["1", "0"]
        }
        // Icons Powered by: https://icons.theforgesmith.com
        let svgpause = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" stroke-width="2.5" stroke="#CACBD2" fill="none" style="width: 48px; height: 48px; --darkreader-inline-stroke: #c9c4bd;" class="duration-300 transform transition-all" data-darkreader-inline-stroke="">' +
            '<path d="M19.2 10.99h7.03v41.96H19.2zM35.06 10.99h7.03v41.96h-7.03z"></path></svg>'
        let svgplay = '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" stroke-width="2.5" stroke="#CACBD2" fill="none" style="width: 48px; height: 48px; --darkreader-inline-stroke: #c9c4bd;" class="duration-300 transform transition-all" data-darkreader-inline-stroke="">' +
            '<path d="M14 53.64V10.36a1 1 0 011.54-.84l34.02 21.64a1 1 0 010 1.68L15.51 54.48a1 1 0 01-1.51-.84z"></path></svg>'
        //end of Icons data.

        let elemIndicate = document.createElement("div")
        let indication = document.querySelector("body").appendChild(elemIndicate)
        if (document.querySelector(".PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPauseButton, .PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPlayButton").classList.contains("PlayerPlayButton")) {
            indication.innerHTML = svgplay
        } else if (document.querySelector(".PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPauseButton, .PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPlayButton").classList.contains("PlayerPauseButton")) {
            indication.innerHTML = svgpause
        } else {
            alert("問題が発生しました。\n\n複数回試しても解決しない場合,\nニコニコ側のアップデートでこのUserScriptが使用不能になっている可能性があります。\nいますぐこのUserScriptを削除してください。")
        }
        indication.setAttribute("id", "indicator_play_nicostyled")
        indication.style.width = "100px"
        indication.style.height = "100px"
        indication.style.background = "#000000"
        indication.style.position = "absolute"
        indication.style.borderRadius = "9999px"
        indication.style.zIndex = 1000
        indication.style.top = (container.clientHeight / 2) + container.getBoundingClientRect().top + "px"
        indication.style.left = (container.clientWidth / 2) + container.getBoundingClientRect().left + "px"
        indication.style.display = "flex"
        indication.style.justifyContent = "center"
        indication.style.alignItems = "center"
        indication.animate(
            animation,
            {
                fill: "forwards",
                duration: 500,
                easing: 'cubic-bezier(0.33, 1, 0.68, 1)'
            }
                          ).finished.then(()=>{
            indication.remove()
        })
        // 動画停止
        document.querySelector(".PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPauseButton, .PlayerContainer .ControllerBoxContainer .ControllerContainer-area .ActionButton.ControllerButton.PlayerPlayButton").click()
    })
})();