// ==UserScript==
// @name         niconico click to play
// @namespace    http://tampermonkey.net/
// @version      0.1.2
// @description  ニコニコの画面をクリック、タップで再生停止
// @author       y_kahou
// @match        https://www.nicovideo.jp/watch/*
// @grant        none
// @noframes
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// @require      https://greasyfork.org/scripts/419065-jquerytouchactionex/code/jQueryTouchActionEx.js?version=888835
// @require      https://greasyfork.org/scripts/419955-y-method/code/y_method.js?version=889418
// @downloadURL none
// ==/UserScript==

var $ = window.jQuery;

const OVER_LAYER = `
<div id="over-layer">
    <div id="play" class="controll-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 13.229 13.229">
            <path d="M13.23 6.615a6.615 6.615 0 0 1-6.615 6.614A6.615 6.615 0 0 1 0 6.615 6.615 6.615 0 0 1 6.615 0a6.615 6.615 0 0 1 6.614 6.615z"/>
            <path d="M10.054 6.615l-5.16 2.978V3.636z" fill="#fff"/>
        </svg>
    </div>
    <div id="pause" class="controll-button">
        <svg xmlns="http://www.w3.org/2000/svg" width="50" height="50" viewBox="0 0 13.229 13.229">
            <g transform="translate(0 -283.77)">
                <circle cx="6.615" cy="290.385" r="6.615"/>
                <path fill="#fff" d="M3.969 287.21h1.852v6.35H3.969zM7.408 287.21H9.26v6.35H7.408z"/>
            </g>
        </svg>
    </div>
</div>`

function __css__() {/*
.PreVideoStartPremiumLinkContainer,
.PreVideoStartPremiumLinkOnEconomyTimeContainer,
.SeekBarHoverItem:not(.SeekBarTimeTip)
{
    display: none;
}
#over-layer {
    pointer-events: none;
    z-index: 51;
    position: absolute;
    width: 100%;
    height: 100%;
}
.controll-button {
    visibility: hidden;
    opacity: 0.8;
    width: 10%;
    height: 10%;
    position: absolute;
    margin: auto;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}
.controll-button.click {
    opacity: 0;
    transform: scale(2);
    transition: linear 500ms;
}
*/}
function addStyle() {
    // cssを埋め込む先人の知恵
    var css = (__css__).toString()
        .match(/[^]*\/\*([^]*)\*\/\}$/)[1]
        .replace(/\{\*/g, '/*')
        .replace(/\*\}/g, '*/');
    $('head').append(`<style id="mystyle" type="text/css">${css}</style>`)
}
function getVideo() {
    var cnt = 0
    return new Promise((resolve, reject) => {
        var iv = setInterval(function() {
            if (++cnt > 60) {
                clearInterval(iv)
                reject('video取得失敗')
            }
            var video = document.querySelector('video')
            if (video && video.getAttribute('src')) {
                clearInterval(iv)
                resolve(video)
            }
        }, 500)
    })
}
(function() {
    'use strict';
    addStyle();
    
    getVideo().then(video => {
        $('.PlayerContainer').focus_()
        
        $('.InView.VideoContainer').doubletap()
        .on('tap click', function(e) {
            $('.PlayerPlayButton, .PlayerPauseButton').click_()
        })
        .on('doubletap', function(e) {
            var lr = ($(this).width() / 2 < e.touches[0].pageX - $(this).offset().left)
            $(lr ? '.PlayerSeekForwardButton' : '.PlayerSeekBackwardButton').click_()
        })
        .on('hold subfocus', function(e) {
            if ($('.is-fullscreen').length && !$('.is-fixedFullscreenController').length) {
                var container = $(this).parent()
                container.addClass('is-mouseMoving')
                clearTimeout($(this).data('focus_to'))
                var to = setTimeout(() => {
                    container.removeClass('is-mouseMoving')
                }, 2000)
                $(this).data('focus_to', to)
            }
        })
        
        // 初回再生でアイコン追加
        $(video).on('play', function() {
            $('.InView.VideoContainer').append(OVER_LAYER)
            $(video).off('play')
        })
        // アイコン処理
        var pause_play = function() {
            if (video.paused) {
                $('#pause').css('visibility', 'hidden' ).removeClass('click')
                $('#play' ).css('visibility', 'visible').addClass('click')
            } else {
                $('#pause').css('visibility', 'visible').addClass('click')
                $('#play' ).css('visibility', 'hidden' ).removeClass('click')
            }
        }
        $('.ControllerContainer-inner').on('click', '.PlayerPlayButton, .PlayerPauseButton', pause_play)
        $('.PlayerContainer').on('keydown', e => { if (e.keyCode == 32) pause_play() })
    })
    .catch(err => {
        console.error(err);
    })
    
})();