// ==UserScript==
// @name         Tweetdeck media zoom
// @namespace    http://tampermonkey.net/
// @version      0.2.0
// @description  タブレット専用にモーダルの画像を広げて表示
// @author       y_kahou
// @match        https://tweetdeck.twitter.com
// @grant        none
// @noframes
// @require      http://code.jquery.com/jquery-3.5.1.min.js
// @require      https://cdnjs.cloudflare.com/ajax/libs/hammer.js/2.0.8/hammer.min.js
// @downloadURL none
// ==/UserScript==

var $ = window.jQuery;

function __css__() {/*
.med-origlink { display: none; }
.med-flaglink { display: none; }
.med-embeditem {
    top: 0;
    bottom: 0;
}
.med-tweet {
    background: rgb(0, 0, 0, 0.8);
    right: 0px;
    left: 0px;
    transition: 0.5s;
}
.hide {
    opacity: 0;
}

.js-med-tweet .item-box {
    padding-left: 100px;
    padding-right: 100px;
}
.js-med-tweet .account-link {
    flex: none;
}
.js-med-tweet .account-link > .nbfc{
    display: inline-block;
}
.js-med-tweet time {
    position: absolute;
    right: 100px;
}
*/}
function addStyle() {
    var css = (__css__).toString()
        .match(/[^]*\/\*([^]*)\*\/\}$/)[1]
        .replace(/\{\*/g, '/*')
        .replace(/\*\}/g, '*/');
        
    var font = $('html').css('font-family')
    css += `pre { white-space: pre-wrap; font-family: ${font}; }`
    
    $('head').append(`<style id="mystyle" type="text/css">${css}</style>`)
}
(function() {
    'use strict';
    addStyle();
    
    var controll = function(modal) {
        
        // モーダルのツイート文も改行されたものにする
        var tweet = $('p', modal)[0]
        $(tweet).replaceWith(`<pre>${$(tweet).html()}</pre>`);
        
        // 画像タップは動作無しに、ダブルタップでオリジナル表示
        if ($('.media-img', modal).length) {
            var img = $('.med-link', modal)
            img.on('touchstart', function(e){
                e.preventDefault();
            })
            var h_img = new Hammer(img[0]);
            h_img.on("doubletap", function(e) {
                img[0].click();
            });
        }
        
        // 動画は画面タップで再生停止
        var video = $('video', modal) 
        if (video.length) {
            var h_video = new Hammer(video[0]);
            h_video.on('tap', function(e) {
                if (video[0].paused) video[0].play();
                else video[0].pause();
            })
        }
        
        // 余白シングルタップでツイート文表示切替
        var edge = $('.l-table', modal)
        var h_edge = new Hammer(edge[0]);
        h_edge.on("tap", function(e) {
            $('.med-tweet').toggleClass('hide')
        });
        h_edge.get('swipe').set({direction: Hammer.DIRECTION_ALL});
        h_edge.on("swipeup swipedown swipeleft swiperight", function(e) {
            switch(e.type) {
            case 'swipeup': case 'swipedown':
                $(modal).empty().hide();
                break;
            case 'swipeleft':
                $('.mdl-media-next', modal)[0].click();
                break;
            case 'swiperight':
                $('.mdl-media-prev', modal)[0].click();
                break;
            }
        });
        
        // 完全表示されるまでpointer-eventsをnoneのままにする
        var tweet = $('.med-tweet', modal)
        tweet.on('transitionend', function(e) {
            var pe = $(e.target).hasClass('hide') ? 'none' : 'auto'
            tweet.css({'pointer-events': pe})
        })
        
        // ツイート文の左右端余白タップでツイート文非表示(一応クリックでも可)
        $('.med-tweet', modal).on('touchstart click', function(e) {
            var tgl = false
            var x = (e.type == 'click') ? e.pageX : e.touches[0].pageX
            var y = (e.type == 'click') ? e.pageY : e.touches[0].pageY
        
            // 左余白座標
            var of = $(this).offset()
            var rect = {
                top    : of.top,
                left   : of.left,
                right  : of.left + 100,
                hit: (x, y) => (rect.top <= y && y <= rect.bottom && rect.left <= x && x <= rect.right)
            }
            rect.bottom = of.top + $(this).height()
            tgl |= rect.hit(x, y)
        
            // 右余白座標
            rect.right = rect.left + $(this).width()
            rect.left = rect.right - 100;
            tgl |= rect.hit(x, y)
        
            if (tgl) {
                $('.med-tweet').toggleClass('hide')
                e.preventDefault();
            }
        })
    }
    var iv = setInterval(function() {
        var modal = $('#open-modal')[0];
        if (modal) {
            clearInterval(iv);
            
            $(modal).on('DOMSubtreeModified propertychange', function(e) {
                
                // modalの変更検知で最後の方に追加される.media-img OR videoが生成されたら1回だけ動かす
                if ($('.media-img, video', modal)[0] && !$(modal).children('div').data('done')) {
                    $(modal).children('div').data('done', true)
                    controll(modal);
                }
            })
        }
    }, 500)
})();