☰

Vadapav Utils

Utility to enhance Vadapav experience

// ==UserScript==
// @name         Vadapav Utils
// @namespace    ff-utils@vadapav
// @version      1.0
// @description  Utility to enhance Vadapav experience
// @author       im.nbn
// @match        *://*.vadapav.mov/*
// @license      GPL-3.0-or-later
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const defaultSettings = {
      openInIcon: '↗',
      copyIcon: '🔗',
      downloadIcon: '↓',
      checkIcon: '✔︎',
      urlOpenerPrefix: 'iina://open?url=',
      horizontalIcon: '↔',
      verticalIcon: '↕',
      autoOpenIn: false,
      linkSeparator: '\n',
      containerOrientation: 'vertical',
    };

    let openInIcon = localStorage.getItem('openInIcon') || defaultSettings.openInIcon;
    let copyIcon = localStorage.getItem('copyIcon') || defaultSettings.copyIcon;
    let downloadIcon = localStorage.getItem('downloadIcon') || defaultSettings.downloadIcon;
    let urlOpenerPrefix = localStorage.getItem('urlOpenerPrefix') || defaultSettings.urlOpenerPrefix;
    let autoOpenIn = localStorage.getItem('autoOpenIn') === 'true';
    let linkSeparator = localStorage.getItem('linkSeparator') || defaultSettings.linkSeparator;
    let containerOrientation = localStorage.getItem('containerOrientation') || defaultSettings.containerOrientation;

    let isOpenInMode = false;

    function toggleOpenerLinks(forceEnable) {
        isOpenInMode = forceEnable !== undefined ? forceEnable : !isOpenInMode;

        document.querySelectorAll('a.file-entry.wrap').forEach(anchor => {
            if (isOpenInMode) {
                if (!anchor.href.startsWith(urlOpenerPrefix)) {
                    anchor.href = `${urlOpenerPrefix}${anchor.href}`;
                }
            } else {
                if (anchor.href.startsWith(urlOpenerPrefix)) {
                    anchor.href = anchor.href.replace(urlOpenerPrefix, '');
                }
            }
        });

        openinButton.style.backgroundColor = isOpenInMode ? '#28a745' : '#666';
    }

    function copyLinksToClipboard() {
        const links = Array.from(document.querySelectorAll('a.file-entry.wrap'))
            .map(anchor => anchor.href.replace(urlOpenerPrefix, ''))
            .join(linkSeparator);

        const textarea = document.createElement('textarea');
        textarea.value = links;
        document.body.appendChild(textarea);
        textarea.select();
        document.execCommand('copy');
        document.body.removeChild(textarea);
        animateButton(copyButton, defaultSettings.checkIcon); 
    }

    function downloadAllFiles() {
        document.querySelectorAll('a.file-entry.wrap').forEach(anchor => {
            const link = document.createElement('a');
            link.href = anchor.href.replace(urlOpenerPrefix, '');
            link.download = '';
            document.body.appendChild(link);
            link.click();
            document.body.removeChild(link);
        });
        animateButton(downloadAllButton, defaultSettings.checkIcon);
    }

    function animateButton(button, symbol) {
        const originalContent = button.innerHTML;
        button.classList.add('rotate-icon');
        setTimeout(() => {
            button.innerHTML = symbol;
            button.style.backgroundColor = '#28a745';
            button.classList.remove('rotate-icon');
            setTimeout(() => {
                button.innerHTML = originalContent;
                button.style.backgroundColor = '#666';
            }, 1000);
        }, 500);
    }

    const style = document.createElement('style');
    style.innerHTML = `
        .button-bounce {
            transition: transform 0.2s ease-in-out;
        }

        .button-bounce:hover {
            transform: scale(1.1);
        }

        .rotate-icon {
            animation: rotate 0.5s linear;
        }

        @keyframes rotate {
            from {
                transform: rotate(0deg);
            }
            to {
                transform: rotate(360deg);
            }
        }

        .draggable {
            cursor: move;
        }

        .overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            cursor: move;
            z-index: 1;
            display: none;
        }

        label {
            user-select: none;
        }
    `;
    document.head.appendChild(style);

    const container = createContainer('containerTop', 'containerLeft', '10000');
    const buttonStyle = `
        background-color: #666;
        color: white;
        border: none;
        padding: 10px;
        cursor: pointer;
        font-size: 16px;
        border-radius: 50%;
        width: 40px;
        height: 40px;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.3s;
    `;

    const openinButton = createButton(openInIcon, buttonStyle, 'Toggle Opener', () => toggleOpenerLinks());
    const copyButton = createButton(copyIcon, buttonStyle, 'Copy links to clipboard', copyLinksToClipboard);
    const downloadAllButton = createButton(downloadIcon, buttonStyle, 'Download all files', downloadAllFiles);
    const editButton = createButton('✎', buttonStyle, 'Edit settings', toggleSettings);

    container.append(openinButton, copyButton, downloadAllButton, editButton);
    document.body.appendChild(container);

    let settingsContainer;

    function toggleSettings() {
        if (settingsContainer) {
            document.body.removeChild(settingsContainer);
            settingsContainer = null;
            editButton.innerHTML = '✎'; 
        } else {
            settingsContainer = createSettingsContainer();
            document.body.appendChild(settingsContainer);
            editButton.innerHTML = '✖';
            makeDraggable(settingsContainer, 'settingsContainerTop', 'settingsContainerLeft');
            initializeSettingsContainerPosition(settingsContainer);
        }
    }

    function createButton(innerHTML, style, title, onClick) {
        const button = document.createElement('button');
        button.innerHTML = innerHTML;
        button.style = style;
        button.classList.add('button-bounce');
        button.title = title;
        button.onclick = onClick;
        return button;
    }

    function createContainer(topKey, leftKey, zIndex) {
        const container = document.createElement('div');
        container.style.position = 'fixed';
        container.style.top = localStorage.getItem(topKey) || '50px';
        container.style.left = localStorage.getItem(leftKey) || 'calc(100% - 60px)';
        container.style.zIndex = zIndex;
        container.style.backgroundColor = '#444';
        container.style.border = '1px solid #555';
        container.style.padding = '10px 15px';
        container.style.boxShadow = '0px 2px 5px rgba(0, 0, 0, 0.5)';
        container.style.borderRadius = '10px';
        container.style.display = 'flex';
        container.style.flexDirection = containerOrientation === 'vertical' ? 'column' : 'row';
        container.style.gap = '10px';
        container.classList.add('draggable');
        makeDraggable(container, topKey, leftKey);
        return container;
    }

    function createSettingsContainer() {
        const settingsContainer = document.createElement('div');
        settingsContainer.style.position = 'fixed';
        settingsContainer.style.top = localStorage.getItem('settingsContainerTop') || '100px';
        settingsContainer.style.left = localStorage.getItem('settingsContainerLeft') || 'calc(100% - 280px)';
        settingsContainer.style.zIndex = '10001';
        settingsContainer.style.backgroundColor = '#444';
        settingsContainer.style.border = '1px solid #555';
        settingsContainer.style.padding = '20px';
        settingsContainer.style.boxShadow = '0px 2px 5px rgba(0, 0, 0, 0.5)';
        settingsContainer.style.borderRadius = '10px';
        settingsContainer.style.display = 'flex';
        settingsContainer.style.flexDirection = 'column';
        settingsContainer.style.gap = '10px';

        const overlay = document.createElement('div');
        overlay.className = 'overlay';
        settingsContainer.appendChild(overlay);

        const inputStyle = `
            background-color: white;
            border: 1px solid #ccc;
            padding: 8px;
            font-size: 14px;
            border-radius: 5px;
            width: 100%;
            box-sizing: border-box;
        `;

        settingsContainer.append(
            createInput('text', openInIcon, 'OpenIn Icon', inputStyle, val => openInIcon = val),
            createInput('text', copyIcon, 'Copy Icon', inputStyle, val => copyIcon = val),
            createInput('text', downloadIcon, 'Download Icon', inputStyle, val => downloadIcon = val),
            createInput('text', urlOpenerPrefix, 'iina://open?url=', inputStyle, val => urlOpenerPrefix = val),
            createAutoOpenInLabel(),
            createSeparatorLabel(inputStyle),
            createOrientationButton(buttonStyle),
            createSaveButton(buttonStyle)
        );

        return settingsContainer;
    }

    function createInput(type, value, placeholder, style, onChange) {
        const input = document.createElement('input');
        input.type = type;
        input.value = value;
        input.placeholder = placeholder;
        input.style = style;
        input.oninput = () => onChange(input.value);
        return input;
    }

    function createAutoOpenInLabel() {
        const autoOpenInLabel = document.createElement('label');
        const autoOpenInCheckbox = document.createElement('input');
        autoOpenInCheckbox.type = 'checkbox';
        autoOpenInCheckbox.checked = autoOpenIn;
        autoOpenInLabel.style = `
            display: flex;
            align-items: center;
            gap: 10px;
        `;
        autoOpenInLabel.appendChild(autoOpenInCheckbox);
        autoOpenInLabel.appendChild(document.createTextNode('Auto apply opener prefix'));

        autoOpenInCheckbox.onchange = () => {
            autoOpenIn = autoOpenInCheckbox.checked;
            localStorage.setItem('autoOpenIn', autoOpenIn);
            toggleOpenerLinks(autoOpenIn);
        };

        return autoOpenInLabel;
    }

function createSeparatorLabel(inputStyle) {
    const separatorLabel = document.createElement('label');
    const separatorSelect = document.createElement('select');
    const separatorOptions = [
        { value: '\n', label: 'New Line (\\n)' },
        { value: ',', label: 'Comma (,)' },
        { value: ';', label: 'Semi-Colon (;)' },
        { value: 'custom', label: 'Custom' }
    ];

    separatorOptions.forEach(option => {
        const opt = document.createElement('option');
        opt.value = option.value;
        opt.textContent = option.label;
        if (linkSeparator === option.value) {
            opt.selected = true;
        }
        separatorSelect.appendChild(opt);
    });

    const customSeparatorInput = document.createElement('input');
    customSeparatorInput.type = 'text';
    customSeparatorInput.placeholder = 'Custom Separator';
    customSeparatorInput.style = inputStyle;
    customSeparatorInput.value = linkSeparator;

    separatorSelect.onchange = () => {
        if (separatorSelect.value === 'custom') {
            customSeparatorInput.style.display = 'block';
            linkSeparator = customSeparatorInput.value;
        } else {
            customSeparatorInput.style.display = 'none';
            linkSeparator = separatorSelect.value;
        }
        localStorage.setItem('linkSeparator', linkSeparator);
    };

    customSeparatorInput.oninput = () => {
        linkSeparator = customSeparatorInput.value;
        localStorage.setItem('linkSeparator', linkSeparator);
    };

    if (linkSeparator !== '\n' && linkSeparator !== ',' && linkSeparator !== ';') {
        separatorSelect.value = 'custom';
        customSeparatorInput.style.display = 'block';
    } else {
        customSeparatorInput.style.display = 'none';
    }

    separatorLabel.style = `
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    `;
    separatorLabel.appendChild(document.createTextNode('Link Separator for download'));
    separatorLabel.appendChild(separatorSelect);
    separatorLabel.appendChild(customSeparatorInput);

    return separatorLabel;
}

    function createOrientationButton(buttonStyle) {
        const toggleOrientationButton = createButton(
            containerOrientation === 'vertical' ? defaultSettings.verticalIcon : defaultSettings.horizontalIcon,
            buttonStyle,
            'Toggle Orientation',
            () => {
                toggleOrientation();
                toggleOrientationButton.innerHTML = containerOrientation === 'vertical' ? defaultSettings.verticalIcon : defaultSettings.horizontalIcon;
            }
        );
        return toggleOrientationButton;
    }

    function createSaveButton(buttonStyle) {
        const saveButton = document.createElement('button');
        saveButton.innerHTML = 'Save';
        saveButton.style = `
            background-color: #28a745;
            color: white;
            border: none;
            padding: 10px;
            cursor: pointer;
            font-size: 16px;
            border-radius: 5px;
        `;
        saveButton.onclick = () => {
            localStorage.setItem('openInIcon', openInIcon);
            localStorage.setItem('copyIcon', copyIcon);
            localStorage.setItem('downloadIcon', downloadIcon);
            localStorage.setItem('urlOpenerPrefix', urlOpenerPrefix);

            openinButton.innerHTML = openInIcon;
            copyButton.innerHTML = copyIcon;
            downloadAllButton.innerHTML = downloadIcon;

            document.body.removeChild(settingsContainer);
            settingsContainer = null; 
            editButton.innerHTML = '✎'; 
        };

        return saveButton;
    }

    function toggleOrientation() {
        containerOrientation = containerOrientation === 'vertical' ? 'horizontal' : 'vertical';
        container.style.flexDirection = containerOrientation === 'vertical' ? 'column' : 'row';

        const containerRect = container.getBoundingClientRect();
        if (containerRect.right > window.innerWidth) {
            container.style.left = (window.innerWidth - containerRect.width) + 'px';
        }
        if (containerRect.bottom > window.innerHeight) {
            container.style.top = (window.innerHeight - containerRect.height) + 'px';
        }

        localStorage.setItem('containerOrientation', containerOrientation);
        localStorage.setItem('containerTop', container.style.top);
        localStorage.setItem('containerLeft', container.style.left);
    }

    function makeDraggable(element, topKey, leftKey) {
        let offsetX = 0, offsetY = 0, initialMouseX = 0, initialMouseY = 0;

        element.onmousedown = function (e) {
            if (['INPUT', 'BUTTON', 'SELECT', 'TEXTAREA'].includes(e.target.tagName)) {
                return;
            }
            e.preventDefault();

            initialMouseX = e.clientX;
            initialMouseY = e.clientY;
            offsetX = initialMouseX - element.getBoundingClientRect().left;
            offsetY = initialMouseY - element.getBoundingClientRect().top;

            document.onmousemove = function (e) {
                e.preventDefault();
                const newMouseX = e.clientX;
                const newMouseY = e.clientY;

                let newTop = newMouseY - offsetY;
                let newLeft = newMouseX - offsetX;

                if (newTop < 0) newTop = 0;
                if (newLeft < 0) newLeft = 0;
                if (newTop + element.clientHeight > window.innerHeight) {
                    newTop = window.innerHeight - element.clientHeight;
                }
                if (newLeft + element.clientWidth > window.innerWidth) {
                    newLeft = window.innerWidth - element.clientWidth;
                }

                element.style.top = newTop + 'px';
                element.style.left = newLeft + 'px';

                localStorage.setItem(topKey, element.style.top);
                localStorage.setItem(leftKey, element.style.left);
            };

            document.onmouseup = function () {
                document.onmouseup = null;
                document.onmousemove = null;
            };
        };
    }

    function initializeSettingsContainerPosition(settingsContainer) {
        const settingsLeftPercent = localStorage.getItem('settingsContainerLeftPercent') || 'calc(100% - 280px)';
        const settingsTopPercent = localStorage.getItem('settingsContainerTopPercent') || '100px';
        settingsContainer.style.left = `${settingsLeftPercent}%`;
        settingsContainer.style.top = `${settingsTopPercent}%`;
    }

    if (autoOpenIn) {
        toggleOpenerLinks(true);
    }

    window.addEventListener('resize', () => {
        const containerLeftPercent = localStorage.getItem('containerLeftPercent');
        const containerTopPercent = localStorage.getItem('containerTopPercent');

        if (containerLeftPercent !== null && containerTopPercent !== null) {
            container.style.left = `${containerLeftPercent}%`;
            container.style.top = `${containerTopPercent}%`;
        }

        const settingsLeftPercent = localStorage.getItem('settingsContainerLeftPercent');
        const settingsTopPercent = localStorage.getItem('settingsContainerTopPercent');

        if (settingsContainer && settingsLeftPercent !== null && settingsTopPercent !== null) {
            settingsContainer.style.left = `${settingsLeftPercent}%`;
            settingsContainer.style.top = `${settingsTopPercent}%`;
        }

        keepWithinBounds(container);
        if (settingsContainer) {
            keepWithinBounds(settingsContainer);
        }
    });

    function keepWithinBounds(element) {
        const rect = element.getBoundingClientRect();
        if (rect.right > window.innerWidth) {
            element.style.left = (window.innerWidth - rect.width) + 'px';
        }
        if (rect.bottom > window.innerHeight) {
            element.style.top = (window.innerHeight - rect.height) + 'px';
        }
    }

    container.addEventListener('mouseup', saveContainerPosition);
    if (settingsContainer) {
        settingsContainer.addEventListener('mouseup', saveSettingsContainerPosition);
    }

    function saveContainerPosition() {
        const containerRect = container.getBoundingClientRect();
        const containerLeftPercent = (containerRect.left / window.innerWidth) * 100;
        const containerTopPercent = (containerRect.top / window.innerHeight) * 100;

        localStorage.setItem('containerLeftPercent', containerLeftPercent);
        localStorage.setItem('containerTopPercent', containerTopPercent);
    }

    function saveSettingsContainerPosition() {
        if (settingsContainer) {
            const settingsRect = settingsContainer.getBoundingClientRect();
            const settingsLeftPercent = (settingsRect.left / window.innerWidth) * 100;
            const settingsTopPercent = (settingsRect.top / window.innerHeight) * 100;

            localStorage.setItem('settingsContainerLeftPercent', settingsLeftPercent);
            localStorage.setItem('settingsContainerTopPercent', settingsTopPercent);
        }
    }

    if (autoOpenIn) {
        toggleOpenerLinks(true);
    }

    makeDraggable(container, 'containerTop', 'containerLeft');
    container.addEventListener('mouseup', saveContainerPosition);
    if (settingsContainer) {
        makeDraggable(settingsContainer, 'settingsContainerTop', 'settingsContainerLeft');
        settingsContainer.addEventListener('mouseup', saveSettingsContainerPosition);
    }

    window.addEventListener('resize', () => {
        const containerLeftPercent = localStorage.getItem('containerLeftPercent');
        const containerTopPercent = localStorage.getItem('containerTopPercent');

        if (containerLeftPercent !== null && containerTopPercent !== null) {
            container.style.left = `${containerLeftPercent}%`;
            container.style.top = `${containerTopPercent}%`;
        }

        const settingsLeftPercent = localStorage.getItem('settingsContainerLeftPercent');
        const settingsTopPercent = localStorage.getItem('settingsContainerTopPercent');

        if (settingsContainer && settingsLeftPercent !== null && settingsTopPercent !== null) {
            settingsContainer.style.left = `${settingsLeftPercent}%`;
            settingsContainer.style.top = `${settingsTopPercent}%`;
        }

        keepWithinBounds(container);
        if (settingsContainer) {
            keepWithinBounds(settingsContainer);
        }
    });

    function keepWithinBounds(element) {
        const rect = element.getBoundingClientRect();
        if (rect.right > window.innerWidth) {
            element.style.left = (window.innerWidth - rect.width) + 'px';
        }
        if (rect.bottom > window.innerHeight) {
            element.style.top = (window.innerHeight - rect.height) + 'px';
        }
    }

    if (settingsContainer) {
        initializeSettingsContainerPosition(settingsContainer);
    }
})();