// ==UserScript==
// @name         Panopto-Video-DL
// @namespace    www.pizidavi.altervista.org
// @description  Download video from Panopto
// @icon         https://www.panopto.com/wp-content/themes/panopto/library/images/favicons/favicon-96x96.png
// @author       pizidavi & Stini
// @version      2.2
// @copyright    2021, PIZIDAVI & Stini
// @license      MIT
// @homepageURL  https://github.com/enricobragastini/Panopto-Video-DL
// @match        https://*.panopto.com/Panopto/Pages/Viewer.aspx?*id=*
// @match        https://*.panopto.com/Panopto/Pages/Embed.aspx?*id=*
// @match        https://*.panopto.eu/Panopto/Pages/Viewer.aspx?*id=*
// @match        https://*.panopto.eu/Panopto/Pages/Embed.aspx?*id=*
// @grant        GM_setClipboard
// @downloadURL none
// ==/UserScript==

(function(Panopto) {
    'use strict';

    if (location.pathname.includes('Viewer.aspx')) {
        const element = document.createElement('a');
        element.id = 'downloadTabHeader';
        element.classList = 'event-tab-header';
        element.href = location.pathname.replace('Viewer.aspx', 'Embed.aspx') + '?id=' + new URLSearchParams(location.search).get('id');
        element.target = '_blank';
        element.style = 'position:absolute;bottom:40px;padding:5px 10px;text-decoration:none;cursor:pointer;';
        element.innerHTML = '<b>Download</b> <span class="material-icons" style="font-size:15px;vertical-align:middle;">file_download</span>';
        element.addEventListener('click', e => {
            if (localStorage.getItem('popup-viewed') == 'true') { return; }
            const div = document.createElement('div');
            div.id = 'Panopto-Video-DL';
            div.innerHTML = '<style>#Panopto-Video-DL{position:fixed;top:10%;left:50%;width:80%;padding:3em 3em 1em;background-color:#2d3436;transform:translateX(-50%);z-index:999999}#Panopto-Video-DL *:not(small){margin-bottom:10px;color:#fff!important;font-size:18px}#Panopto-Video-DL li,#Panopto-Video-DL ol{margin:0 .5em;padding:0 .5em;list-style:decimal}#Panopto-Video-DL button{margin-top:1em;margin-right:10px;color:#000!important}</style> <h1 style="text-align:center;font-size:24px;">READ ME!</h1> <h4 style="text-align:center;">Panopto has blocked the previous download method!</h4> <p>To download the video follow these steps:</p> <ol><li>Click on <b>Download</b> button in the bottom-left corner</li> <li>Wait until the page opened is automatically closed</li> <small>If you see this box you already done these two steps.</small> <hr> <li>Download this program from GitHub: <a href="https://github.com/enricobragastini/Panopto-Video-DL/releases" target="_blank">Download</a> (No installation needed) and open it</li> <li>Paste the automatically copied link</li> <li>Wait until the download finishes</li> <li>The video will be found in the same folder of the program</li> </ol> <p style="text-align:center;"> <button onclick="this.parentElement.parentElement.remove();">Close</button> <button onclick="localStorage.setItem(\'popup-viewed\', true);this.parentElement.parentElement.remove();">Close and don\'t show again</button> </p>';
            document.querySelector('body').appendChild(div);
        });
        document.querySelector('#eventTabControl').appendChild(element);
    }
    else if (location.pathname.includes('Embed.aspx')) {
        const master = Panopto.Embed.instance.videoUrl;

        if (typeof GM_setClipboard !== 'undefined') {
            GM_setClipboard(master, 'text');
            window.close();
        } else {
            navigator.clipboard.writeText(master).then(() => {
                window.close();
            }, e => {
                const div = document.createElement('div');
                div.id = 'Panopto-Video-DL';
                div.innerHTML = '<style>#Panopto-Video-DL{position:fixed;top:3em;left:50%;width:60%;padding:1.5em 3em;color:#fff;text-align:center;background-color:#2d3436;transform:translateX(-50%);z-index:999999}#Panopto-Video-DL p{font-size:16px}#Panopto-Video-DL button,#Panopto-Video-DL input{margin:0 0 0 .5em}</style> <h3>There was an error when automatically copying the link</h3> <p> Copy it manually: <input type="text" value=""> <button>Copy</button> </p>';
                div.querySelector('input').value = master;
                div.querySelector('button').onclick = () => {
                    navigator.clipboard.writeText(master).then(() => {
                        window.close();
                    }, _e => {
                        div.querySelector('button').remove();
                        alert('Other error O_o. Please copy the link directly from the text field, and then close this window.');
                    });
                };
                document.querySelector('body').appendChild(div);
            });
        }
    }

})(Panopto);