[Bookmarklet] video要素にフィルターを適用

javascript: void((() => {
    /* Video Filter Bookmarklet 2021-04-18 by むふー@4chouyou */
    const SLIDER_STEP = 0.05;
    const PROPERTIES = [
        {
            name: 'brightness',
            min: 0,
            max: 2,
            value: 1,
            step: SLIDER_STEP,
            unit: ''
        },
        {
            name: 'contrast',
            min: 0,
            max: 2,
            value: 1,
            step: SLIDER_STEP,
            unit: ''
        },
        {
            name: 'saturate',
            min: 0,
            max: 2,
            value: 1,
            step: SLIDER_STEP,
            unit: ''
        },
        {
            name: 'hue-rotate',
            min: -180,
            max: 180,
            value: 0,
            step: SLIDER_STEP * 100,
            unit: 'deg'
        },
        {
            name: 'invert',
            min: 0,
            max: 1,
            value: 0,
            step: SLIDER_STEP,
            unit: ''
        },
        {
            name: 'grayscale',
            min: 0,
            max: 1,
            value: 0,
            step: SLIDER_STEP,
            unit: ''
        },
        {
            name: 'sepia',
            min: 0,
            max: 1,
            value: 0,
            step: SLIDER_STEP,
            unit: ''
        }
    ];

    let defaultValue = {};
    PROPERTIES.forEach(property => {
        defaultValue[property.name] = property.value;
    });
    let panel = document.querySelector('#bml-videofilter-panel');
    if(panel) panel.remove();
    panel = document.createElement('div');
    panel.id = 'bml-videofilter-panel';
    panel.style.right = '10px';
    panel.style.top = '10px';
    panel.innerHTML = `
<div class="panel-buttons flex">
    <div id="bml-videofilter-drag-handle" class="drag-handle flex-item"></div>
    <button class="panel-button" command="close" title="Close">[ x ]</button>
</div>
<div class="panel-content">
    <div class="slider-container"></div>
</div>
`;
    document.body.appendChild(panel);
    let sliderContainer = document.querySelector('#bml-videofilter-panel .slider-container');
    PROPERTIES.forEach(property => {
        let div = document.createElement('div');
        div.innerHTML = `<label for="${property.name}">${property.name}</label><input class="slider" type="range" id="${property.name}" name="${property.name}" min="${property.min}" max="${property.max}" value="${property.value}" step="${property.step}">`;
        sliderContainer.appendChild(div);
    });
    let style = document.querySelector('#bml-videofilter-style');
    if(!style) {
        style = document.createElement('style');
        style.id = 'bml-videofilter-style';
        style.type = 'text/css';
        document.head.appendChild(style);

        var isDrag = false;
        var targetPanel, startX, startY, panelRight, panelTop, panelWidth, panelHeight, parentWidth, parentHeight;
        document.addEventListener('mousedown', e => {
            if(e.target.classList.contains('drag-handle')) {
                e.preventDefault();
                let panel = document.querySelector('#bml-videofilter-panel');
                targetPanel = e.target.id;
                isDrag = true;
                startX = e.clientX;
                startY = e.clientY;
                panelRight = parseInt(panel.style.right);
                panelTop = parseInt(panel.style.top);
                panelWidth = panel.clientWidth;
                panelHeight = panel.clientHeight;
                if(panel.getAttribute('embedded') == 'true') {
                    parentWidth = panel.parentNode.clientWidth;
                    parentHeight = panel.parentNode.clientHeight;
                }else {
                    parentWidth = document.documentElement.clientWidth;
                    parentHeight = document.documentElement.clientHeight;
                }
            };
        });
        document.addEventListener('mouseup', e => {
            isDrag = false;
        });
        document.addEventListener('mousemove', e => {
            if(isDrag && targetPanel == 'bml-videofilter-drag-handle') {
                e.preventDefault();
                let panel = document.querySelector('#bml-videofilter-panel');
                panel.style.right = Math.min(parentWidth - panelWidth, Math.max(0, panelRight - (e.clientX - startX))) + 'px';
                panel.style.top = Math.min(parentHeight - panelHeight, Math.max(0, panelTop + (e.clientY - startY))) + 'px';
            }
        });
    }
    style.innerHTML = `
@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@400&display=swap');
#bml-videofilter-panel * {
    appearance: auto;
    width: initial;
    height: initial;
    line-height: initial;
    margin: 0;
    padding: 0;
}
#bml-videofilter-panel {
    position: fixed;
    z-index: 2147483647;
    background-color: rgba(28, 28, 28, 0.5);
    border-radius: 4px;
    backdrop-filter: blur(3px);
}
#bml-videofilter-panel .flex {
    display: flex;
}
#bml-videofilter-panel .flex-item {
    flex-grow: 1;
}
#bml-videofilter-panel .panel-buttons {
    box-sizing: border-box;
    width: 100%;
    padding: 4px;
    float: right;
}
#bml-videofilter-panel .drag-handle {
    border-radius: 4px;
    background-color: rgba(255, 255, 255, .1);
    cursor: move;
}
#bml-videofilter-panel .panel-button {
    margin-left: 5px;
    padding: 0;
    border: none;
    background-color: transparent;
    color: white;
    font-family: Roboto;
    font-size: 11px;
    font-weight: 400;
    cursor: pointer;
}
#bml-videofilter-panel .panel-content {
    padding: 5px;
}
#bml-videofilter-panel .slider-container > div {
    padding: 4px 0;
}
#bml-videofilter-panel .slider-container label {
    display: inline-block;
    width: 100px;
    color: white;
    font-family: Roboto;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
}
#bml-videofilter-panel .slider-container .slider {
    width: 200px;
}`;
    let buttons = document.querySelectorAll('#bml-videofilter-panel button');
    buttons.forEach(button => {
        button.addEventListener('click', e => {
            let command = button.getAttribute('command');
            switch(command) {
                case 'close': {
                    panel.remove();
                    break;
                }
                default: {
                    break;
                }
            }
        });
    });
    let labels = document.querySelectorAll('#bml-videofilter-panel label');
    labels.forEach(label => {
        label.addEventListener('click', e => {
            e.target.nextElementSibling.value = defaultValue[e.target.textContent];
            setFilterStyle();
        });
    });
    let sliders = document.querySelectorAll('#bml-videofilter-panel .slider');
    sliders.forEach(slider => {
        slider.addEventListener('input', setFilterStyle);
    });

    function setFilterStyle() {
        let filterValue = '';
        PROPERTIES.forEach(property => {
            let slider = document.querySelector(`#bml-videofilter-panel .slider[name="${property.name}"]`);
            let value = slider.value;
            if(value != property.value) {
                filterValue += ` ${property.name}(${value}${property.unit})`;
            }
        });
        let style = document.querySelector('#bml-videofilter-style-filter');
        if(!style) {
            style = document.createElement('style');
            style.id = 'bml-videofilter-style-filter';
            style.type = 'text/css';
            document.head.appendChild(style);
        }
        style.innerHTML = `video {filter: ${filterValue} !important;}`;
    }
})());