// ==UserScript==
// @name         Redacted YouTube Searcher
// @license      MIT
// @namespace    https://redacted.ch/
// @version      1.3
// @description  Add YouTube search links that open in a new tab.
// @author       x__a
// @match        https://*.redacted.ch/*
// @grant        GM_xmlhttpRequest
// @downloadURL none
// ==/UserScript==

(function () {
    'use strict';

    if (document.getElementById('redacted-youtube')) {
        return;
    }

    main();

    let activeTrack = null;

    function slugify(string) {
        return string
            .toLowerCase()
            .trim()
            .replace(/[^\w\s-]/g, '')
            .replace(/[\s_-]+/g, '-')
            .replace(/^-+|-+$/g, '');
    }

    function onLoading(target) {
        const svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
        svg.id = 'redacted-youtube-spinner';
        svg.setAttribute('viewBox', '0 0 100 100');

        const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
        circle.id = 'redacted-youtube-spinner-circle';
        circle.setAttribute('cx', '50');
        circle.setAttribute('cy', '50');
        circle.setAttribute('r', '45');

        svg.appendChild(circle);
        target.appendChild(svg);
    }

    function setYoutubePlayerVisibility(state) {
        localStorage.setItem('redacted-youtube-player-visibility', state);
        const trackList = document.getElementById('redacted-youtube-track-list');
        trackList.style.display = state === 'hidden' ? 'none' : '';
    }

    function onToggleTrackListVisibility(event) {
        event.preventDefault();

        const currentState = localStorage.getItem('redacted-youtube-player-visibility');
        const newState = currentState === 'hidden' ? 'visible' : 'hidden';
        setYoutubePlayerVisibility(newState);
    }

    function playFirstYouTubeResult(event) {
        event.preventDefault();

        let parent = event.target.parentElement;
        let query = parent.getAttribute('data-query');
        let existingPlayer = document.getElementById('redacted-youtube-player');

        if (existingPlayer && activeTrack === parent.id) {
            activeTrack = null;
            existingPlayer.remove();

            return
        }

        onLoading(parent);

        GM_xmlhttpRequest({
            method: 'GET',
            url: `https://www.youtube.com/results?search_query=${encodeURIComponent(query)}`,
            onload: function (response) {
                if (response.readyState === 4 && response.status === 200) {
                    if (existingPlayer) {
                        existingPlayer.remove();
                    }

                    let videoIds = response.responseText.match('"videoId"\s*:\s*"([^"]+)');

                    if (videoIds.length > 0) {
                        let player = document.createElement('iframe');
                        player.id = 'redacted-youtube-player';
                        player.src = `https://www.youtube-nocookie.com/embed/${videoIds[1]}?autoplay=1`

                        parent.appendChild(player);

                        document.getElementById('redacted-youtube-spinner').remove();

                        activeTrack = parent.id;
                    }
                }
            }
        });
    }

    function main() {
        const head = document.head || document.getElementsByTagName('head')[0];
        const style = document.createElement('style');
        style.id = 'redacted-youtube';
        style.innerHTML = `
            .redacted-youtube-link {
              transition: all 0.15s ease !important;
              line-height: 0 !important;
              color: #c4302b !important;
            }

            .redacted-youtube-link:hover {
              color: #ed5651 !important;
            }

            .redacted-youtube-link>svg {
              width: 12px !important;
              height: 12px !important;
            }

            .redacted-youtube-svg {
              width: 12px !important;
              height: 12px !important;
            }

            #redacted-youtube-player {
              display: block;
              border: none;
              border-radius: 0.5rem;
              margin-top: 0.5rem;
              aspect-ratio: 16/9;
              width: 100%;
            }

            #redacted-youtube-spinner {
              animation: 2s linear infinite svg-animation;
              max-width: 10px;
              margin-left: 5px;
            }

            @keyframes svg-animation {
              0% {
                transform: rotateZ(0deg);
              }
              100% {
                transform: rotateZ(360deg);
              }
            }

            #redacted-youtube-spinner-circle {
              animation: 1.4s ease-in-out infinite both circle-animation;
              display: block;
              fill: transparent;
              stroke: #ed5651;
              stroke-linecap: round;
              stroke-dasharray: 283;
              stroke-dashoffset: 280;
              stroke-width: 10px;
              transform-origin: 50% 50%;
            }

            @keyframes circle-animation {
              0%, 25% {
                stroke-dashoffset: 280;
                transform: rotate(0);
              }
              50%, 75% {
                stroke-dashoffset: 75;
                transform: rotate(45deg);
              }
              100% {
                stroke-dashoffset: 280;
                transform: rotate(360deg);
              }
            }
        `;

        head.appendChild(style);

        const urlParams = new URLSearchParams(window.location.search);

        document.querySelectorAll('table.torrent_table > tbody > tr').forEach((torrent) => {
            const artistLink = torrent.querySelector('a[href*="artist.php?id"]');
            const releaseLink = torrent.querySelector('a[href*="torrents.php?id"]');

            if (!artistLink && !releaseLink) {
                return;
            }

            let artist = artistLink ? artistLink.textContent : null;

            if (/\/artist.php/.test(window.location.pathname) && urlParams.has('id')) {
                artist = document.querySelector('.header > h2').textContent;
            }

            const release = releaseLink.textContent;
            const query = encodeURIComponent(artist ? `${artist} - ${release}` : release);
            const actionButtons = torrent.querySelector('span.torrent_action_buttons');
            const addBookmarkButton = torrent.querySelector('span.add_bookmark');

            if (actionButtons) {
                actionButtons.insertAdjacentHTML('beforeend', `
                    | <a href="https://www.youtube.com/results?search_query=${query}" class="tooltip redacted-youtube-link" rel="noopener" target="_blank" title="Search YouTube">
                        <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                            <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
                        </svg>
                    </a>
                `);

                return;
            }

            if (addBookmarkButton) {
                addBookmarkButton.insertAdjacentHTML('beforebegin', `
                    <span title="Search YouTube" class="tooltip" style="margin-left: 4px">
                        <a href="https://www.youtube.com/results?search_query=${query}" class="redacted-youtube-link" rel="noopener" target="_blank">
                            <svg role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
                                <path d="M23.495 6.205a3.007 3.007 0 0 0-2.088-2.088c-1.87-.501-9.396-.501-9.396-.501s-7.507-.01-9.396.501A3.007 3.007 0 0 0 .527 6.205a31.247 31.247 0 0 0-.522 5.805 31.247 31.247 0 0 0 .522 5.783 3.007 3.007 0 0 0 2.088 2.088c1.868.502 9.396.502 9.396.502s7.506 0 9.396-.502a3.007 3.007 0 0 0 2.088-2.088 31.247 31.247 0 0 0 .5-5.783 31.247 31.247 0 0 0-.5-5.805zM9.609 15.601V8.408l6.264 3.602z"/>
                            </svg>
                        </a>
                    </span>
                `);
            }
        });

        if (/\/torrents.php/.test(window.location.pathname) && urlParams.has('id')) {
            const trackLinks = [];
            const artist = Array.from(document.querySelectorAll('h2 a[href*="artist.php"'))
                .map((link) => link.textContent)
                .join(' & ');

            let fileRows = document.querySelectorAll('table.filelist_table > tbody > tr:not(.colhead_dark) > td:not(.number_column)');

            fileRows.forEach((item, index) => {
                let file = item.textContent;
                let regex = /^\d+\W* (.*)\.(flac|mp3)$/g;
                let matches = [...file.matchAll(regex)];
                let track = matches[0] ? matches[0][1] : null;

                if (!track) {
                    return;
                }

                let artistAndTrack = track.includes(artist) ? track : `${artist} - ${track}`;
                let trackId = slugify(track);

                let trackLinkElement = document.createElement('tr');
                let trackLinkTableData = document.createElement('td');
                trackLinkTableData.id = trackId;
                trackLinkTableData.setAttribute('data-query', artistAndTrack);

                let trackLinkAnchor = document.createElement('a');
                trackLinkAnchor.href = '#'
                trackLinkAnchor.innerHTML = track;
                trackLinkAnchor.addEventListener('click', () => playFirstYouTubeResult(window.event));

                let trackSearchAnchor = document.createElement('a');
                trackSearchAnchor.innerHTML = `
                <a href="https://www.youtube.com/results?search_query=${encodeURIComponent(artistAndTrack)}" title="Search on YouTube" rel="noopener" target="_blank">
                    <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" class="w-5 h-5">
                        <path fill-rule="evenodd" d="M4.25 5.5a.75.75 0 00-.75.75v8.5c0 .414.336.75.75.75h8.5a.75.75 0 00.75-.75v-4a.75.75 0 011.5 0v4A2.25 2.25 0 0112.75 17h-8.5A2.25 2.25 0 012 14.75v-8.5A2.25 2.25 0 014.25 4h5a.75.75 0 010 1.5h-5z" clip-rule="evenodd" />
                        <path fill-rule="evenodd" d="M6.194 12.753a.75.75 0 001.06.053L16.5 4.44v2.81a.75.75 0 001.5 0v-4.5a.75.75 0 00-.75-.75h-4.5a.75.75 0 000 1.5h2.553l-9.056 8.194a.75.75 0 00-.053 1.06z" clip-rule="evenodd" />
                    </svg>
                </a>`;

                trackLinkElement.appendChild(trackLinkTableData);
                trackLinkTableData.appendChild(trackLinkAnchor);
                trackLinkTableData.appendChild(trackSearchAnchor);

                if (trackLinks.findIndex(trackLink => trackLink.id === trackId) === -1) {
                    trackLinks.push({
                        id: trackId,
                        element: trackLinkElement
                    });
                }
            });

            if (trackLinks.length > 0) {
                const table = document.createElement('table');
                table.id = 'redacted-youtube-tracks-table';
                table.className = 'collage_table';

                const thead = document.createElement('thead');

                const headerRow = document.createElement('tr');
                headerRow.className = 'colhead';

                const headerCell = document.createElement('td');

                const upLink = document.createElement('a');
                upLink.href = '#';
                upLink.textContent = '↑';

                const trackSearchText = document.createTextNode(' YouTube Track Search ');

                const showLink = document.createElement('a');
                showLink.href = '#';
                showLink.textContent = '(Show)';
                showLink.onclick = onToggleTrackListVisibility;

                headerCell.appendChild(upLink);
                headerCell.appendChild(trackSearchText);
                headerCell.appendChild(showLink);

                headerRow.appendChild(headerCell);

                thead.appendChild(headerRow);

                const tbody = document.createElement('tbody');
                tbody.id = 'redacted-youtube-track-list';
                tbody.style = localStorage.getItem('redacted-youtube-player-visibility') === 'hidden' ? 'display: none' : '';

                table.appendChild(thead);
                table.appendChild(tbody);

                document.querySelector('div.box.torrent_description').insertAdjacentElement('beforebegin', table);

                trackLinks.forEach(track => {
                    document.querySelector('table#redacted-youtube-tracks-table > tbody').appendChild(track.element);
                });
            }
        }
    };
})();