Peertube-dl/lib/Peertube/DL/public/js/peertube-dl-web.js

"use strict";

let downloadFormButton;
let modalVideoContainer;
let closeAndResetVideoContainer;
let downloadFormUrl;
let downloadVideo;
let downloadVideoPrepare;
let downloadVideoLoading;
let downloadForm;
let video;
let modalLoading;
let filename;
let url;
let popingNotice;
let popingNoticeContent;
let closePopingNotice;
let titleModalFormatSelector;
let descriptionModalFormatSelector;
let modalFormatSelector;
let videoFormats;
let audioFormats;
let closeModalFormatSelector;

function downloadFormButtonHandler(event) {
    event.preventDefault();
    modalLoading.classList.add('active');
    askForURL(downloadFormUrl.value);
}
function askForURL(url, format) {
    getRealURL(url, format).then( (response) => {
        if ( response.options !== undefined && response.options.list_formats !== undefined && response.options.list_formats ) {
            titleModalFormatSelector.innerText = response.title;
            descriptionModalFormatSelector.innerText = response.description;
            videoFormats.innerHTML = '';
            audioFormats.innerHTML = '';
            for ( let x of response.formats.audio_formats) {
                let a = document.createElement('a');
                a.innerText = 'Id: ' + x.id + "\n"
                    + 'Format: ' + x.mimeType + "\n"
                    + 'AudioSampleRate: ' + x.audioSampleRate + "\n"
                    + 'Bitrate: ' + x.bitrate + ".\n";
                a.addEventListener( 'click', (event) => {
                    modalLoading.classList.add('active');
                    askForURL(url, x.id ); 
                });
                audioFormats.appendChild(a);
                modalLoading.classList.remove('active');
                modalFormatSelector.classList.add('active');
            }
            for ( let x of response.formats.video_formats ) {
                let a = document.createElement('a');
                a.innerText = 'Id: ' + x.id + "\n"
                + 'Format: ' + x.mimeType + "\n"
                + 'QualityLabel: ' + x.qualityLabel + "p\n"
                + 'Bitrate: ' + x.bitrate + "\n"
                + (
                    ( x.audioSampleRate !== undefined ) ?
                        'AudioSampleRate: ' + x.audioSampleRate + ".\n" :
                        "No audio."
                );
                a.addEventListener( 'click', (event) => {
                    modalLoading.classList.add('active');
                    askForURL(url, x.id );
                });
                videoFormats.appendChild(a);
                modalLoading.classList.remove('active');
                modalFormatSelector.classList.add('active');
            }
        } else {
            video.src = response.url;
            filename = response.filename;
            url = response.url;
            video.addEventListener('canplay', (event) => {
                modalLoading.classList.remove('active');
                modalVideoContainer.style.display = 'block';
            });
        }
        return true;
    }).catch ( (error) => {
        console.log(error);
        modalLoading.classList.remove('active');
        popingNoticeContent.innerHTML = '';
        let p = document.createElement('p'); 
        p.appendChild(document.createTextNode('The url '));
        let input_url = document.createElement('a');
        input_url.href = url;
        input_url.innerText = url;
        p.appendChild(input_url)
        p.appendChild(document.createTextNode(' is not supported, if you think this is an error, report it '));
        let issues_url = 'https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues';
        let issues_url_element = document.createElement('a');
        issues_url_element.href = issues_url;
        issues_url_element.innerText = 'here';
        p.appendChild(issues_url_element);
        p.appendChild(document.createTextNode('.'));
        popingNoticeContent.appendChild(p);
        popingNotice.classList.add('active');
        return false;
    });
}

function downloadVideoPrepareHandler(event) {
    downloadVideoPrepare.classList.remove('active');
    downloadVideoLoading.classList.add('active');
    generateBlobVideo(url).then( blob => {
        downloadVideo.href = URL.createObjectURL(blob);
        downloadVideo.download = filename; 
        downloadVideoLoading.classList.remove('active');
        downloadVideo.classList.add('active');
    });
}

function downloadFormHandler(event) {
    downloadFormButtonHandler(event);
}

async function generateBlobVideo(url) {
    const blob = await fetch(url, {
        mode: 'cors',
      })
      .then(res => res.blob())
      .catch( err => generateBlobVideoByProxy(url) );
    return blob;
}

async function generateBlobVideoByProxy(url) {
        const blob = await fetch( '/proxy_to_get', {
                method: 'POST',
                mode: 'cors',
                cache: 'no-cache',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({url: url}),
            }
        ).then(res => res.blob());
        return blob;
 }

async function getRealURL(url, format) {
    let request = { url: url };
    if (format !== undefined)
        request.format = format;
    const response = await fetch('/api', {
        method: 'POST',
        mode: 'cors',
        cache: 'no-cache',
        headers: {
            'Content-Type': 'application/json'
        },
        body: JSON.stringify(request),
    });
    return response.json();
}

function closeAndResetVideoContainerHandler(event) {
    event.preventDefault();
    modalVideoContainer.style.display = 'none';
    downloadVideo.classList.remove('active');
    downloadVideoLoading.classList.remove('active');
    downloadVideoPrepare.classList.add('active');
}

window.addEventListener('load', (event) => {
    downloadFormButton = document.querySelector('#download-form-button');
    downloadForm = document.querySelector('#download-form');
    modalVideoContainer = document.querySelector('#modal-video-container');
    video = document.querySelector('#video');
    downloadFormUrl = document.querySelector('#download-form-url');
    downloadVideo = document.querySelector('#download-video');
    downloadVideoLoading = document.querySelector('#download-video-loading');
    downloadVideoPrepare = document.querySelector('#download-video-prepare');
    closeAndResetVideoContainer = document.querySelector('#close-and-reset-video-container');
    modalLoading = document.querySelector('#modal-loading');
    popingNotice = document.querySelector('#poping-notice');
    popingNoticeContent = document.querySelector('#poping-notice-content');
	closePopingNotice = document.querySelector('#close-poping-notice');
    titleModalFormatSelector = document.querySelector('#modal-format-selector h2');
    descriptionModalFormatSelector = document.querySelector('#modal-format-selector p');
    modalFormatSelector = document.querySelector('#modal-format-selector');
    videoFormats = document.querySelector('#modal-format-selector .video-formats');
    audioFormats = document.querySelector('#modal-format-selector .audio-formats');
    closeModalFormatSelector = document.querySelector('#close-modal-format-selector');

    downloadFormButton.addEventListener('click', downloadFormButtonHandler);
    downloadVideoPrepare.addEventListener('click', downloadVideoPrepareHandler);
    downloadForm.addEventListener('submit', downloadFormHandler);
    closeAndResetVideoContainer.addEventListener('click', closeAndResetVideoContainerHandler);
    closeModalFormatSelector.addEventListener('click', (event) => {
        modalFormatSelector.classList.remove('active');
    });
	closePopingNotice.addEventListener('click', (event) => {
		popingNotice.classList.remove('active');
	});

    popingNotice.classList.add('active');
});