Adding aprils fools theme.

META.json

@@ -0,0 +1,7 @@
+{
+    "version" : "0.0.1",
+    "name"  : "Peertube-DL",
+    "author" : "sergiotarxz",
+    "abstract" : "A module for downloading videos from various webpages",
+    "license" : "AGPLv3"
+}

themes/new_look_aprils_fools/public/dist/css/index.css

@@ -0,0 +1,327 @@
+body {
+  height: 98vh;
+
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+
+  background-color: #FF69B4;
+}
+
+.application-container {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 0.3rem;
+
+  background-color: #C71585;
+
+  padding: 1.5rem 3rem 1.5rem 3rem;
+}
+
+.application-container form {
+  display: flex;
+  flex-flow: column;
+  justify-content: center;
+
+  width: 100%;
+  padding: 1rem;
+}
+
+.application-container h2 {
+  color: #ffffff;
+  font-weight: 400;
+  font-size: 1.6rem;
+}
+
+.application-container input {
+  padding: 1rem;
+
+  color: #C71585;
+  background-color: #FFB6C1;
+
+  border-radius: 0.2rem;
+  border: 1px solid transparent;
+}
+
+.application-container button {
+  margin-top: 1rem;
+
+  color: #ffffff;
+  font-weight: bold;
+
+  background-color: #059669;
+
+  border-radius: 0.2rem;
+  border: 1px solid transparent;
+
+  padding: 0.5rem 1rem 0.5rem 1rem;
+}
+
+.application-container button:hover,.application-container button:focus {
+    background-color: #059;
+}
+
+.application-container button,
+.application-container input {
+    font-size: 0.9rem;
+}
+
+.application-container.active {
+    display: flex;
+}
+
+#poping-notice-content a {
+    text-decoration: none;
+    color: lime;
+}
+
+#poping-notice-content a:hover,#poping-notice-content a:focus {
+    color: aqua;
+}
+
+#poping-notice-container-bar {
+  display: flex;
+  justify-content: center;
+}
+
+#close-poping-notice {
+  background-color: #059669;
+  padding: 0.5rem 5rem 0.5rem 5rem;
+  border-radius: 0.3rem;
+  text-decoration: none;
+  font-weight: bolder;
+  color: white;
+}
+
+#close-poping-notice:hover,#close-poping-notice:focus {
+    background-color: #059;
+}
+
+.modal {
+    position: fixed;
+    display: none;
+    color: white;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+}
+
+#poping-notice {
+    padding: 3rem;
+    border-radius: 0.3rem;
+    background-color: #C71585;
+    color: white;
+	overflow-y: scroll;
+    width: 94%;
+    max-height: 70%;
+    flex-direction: column;
+    scrollbar-width: none;
+}
+
+#modal-video-container,#modal-format-selector {
+    height: 100%;
+    width: 100%;
+    flex-flow: column;
+    align-items: center;
+    background-color: #FF69B4;
+}
+
+#modal-format-selector h2 {
+    width: 100%;
+}
+
+#modal-format-selector p {
+    width: 100%;
+}
+
+.video-container-bar {
+  width: 99%;
+  height: 2rem;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  display: flex;
+  justify-content: end;
+  margin-bottom: 1rem;
+}
+
+.video-container-bar a {
+  padding: 1rem;
+  margin-right: 1rem;
+  border-radius: 0.3rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  background-color: #dc2626;
+}
+
+.video-container-bar a:hover,.video-container-bar a:focus {
+    color: white;
+    background-color: grey;
+}
+
+
+#modal-video-container > #block {
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+}
+
+#download-video-container {
+  padding: 2rem;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.button-download {
+  display: none;
+  border-radius: 0.3rem;
+  background-color: #059669;
+  text-decoration: none;
+  color: white;
+  user-select: none;
+  cursor: pointer;
+  height: 30px;
+  padding: 0 2rem; 
+}
+
+.button-download:hover,.button-download:focus {
+    background-color: #059;
+}
+
+.button-download embed {
+    height: 100%;
+}
+
+#download-video-loading.active {
+  height: 2rem;
+}
+
+#download-video-container .button-download.active {
+    display: flex;
+    align-items: center;
+}
+
+#modal-loading {
+    display: none;
+}
+
+.modal {
+  --tw-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
+    0 4px 6px -2px rgba(0, 0, 0, 0.05);
+  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000),
+    var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  overflow-y: scroll;
+}
+
+#poping-notice.active {
+  display: flex;
+}
+
+.modal.active {
+    display: flex;
+    scrollbar-width: none;
+}
+
+.modal.active.active::-webkit-scrollbar { 
+    display: none;
+}
+
+#modal-loading {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    height: 100%;
+    width: 100%;
+    transform: translate(-50%, -50%);
+    border: black 1px solid;
+    justify-content: right;
+    align-items: center;
+}
+
+#modal-loading.active {
+    display: flex;
+}
+
+#modal-loading embed {
+    width: 10%;
+}
+
+#video {
+    width: 100%;
+    max-width: 636px;
+}
+
+#video-container {
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+}
+
+.format-list > div {
+    display: grid;
+    grid-column-gap: 10px;
+    grid-row-gap: 10px;
+    grid-template-areas: "a";
+    grid-auto-columns: 99%;
+    margin: 1rem;
+}
+
+.format-list > div > a {
+    border: 1px solid black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: 1.5rem;
+    padding-right: 5%;
+    padding-left: 5%;
+    text-decoration: none;
+    border-radius: 0.5rem;
+    background-color: #059669;
+    overflow-wrap: anywhere;
+}
+
+.format-list > div > a:focus,.format-list > div > a:hover {
+    background-color: #059;
+}
+
+.format-list > div > a:after {
+    padding-bottom: 100%;
+    display: block;
+    content: "";
+}
+
+.scale {
+    height: 1em;
+    width; 1em;
+}
+
+@media (min-width: 600px) {
+    .format-list > div {
+        grid-template-areas: "a a";
+        grid-auto-columns: 49.75%;
+    }
+}
+
+@media (min-width: 805px) {
+    .format-list > div {
+        grid-template-areas: "a a a";
+        grid-auto-columns: 33%;
+    }
+}
+
+@media (min-width: 812px) {
+  #poping-notice {
+      width: 40%;
+  }
+}

themes/new_look_aprils_fools/public/dist/index.html

@@ -0,0 +1,76 @@
+<html>
+<head>
+    <script src="js/peertube-dl-web.js?v=1"></script>
+    <link rel="stylesheet" href="css/index.css?v=4"></script>
+    <link rel="icon" type="image/png" href="img/peertube-dl-logo.png"/>
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Peertube-dl Web</title>
+    <meta name="description" content="Webpage intended to download videos from various webpages for fair use."/>
+    <meta property="og:type" content="website" />
+    <meta property="og:title" content="Peertube-dl Web"/>
+    <meta property="og:site_name" content="Peertube-dl"/>
+    <meta property="og:description" content="Webpage intended to download videos from various webpages for fair use."/>
+    <meta property="og:image" content="./img/peertube-dl-logo-fullsize.png"/> 
+</head>
+<body>
+    <div class="application-container">
+        <h2>Peertube-dl Web Application</h2>
+        <form id="download-form">
+            <input class="block" type="text" id="download-form-url" placeholder="Introduce the url you want to download."/>
+            <button class="block" id="download-form-button" >Fetch from api</button>
+        </form>
+    </div>
+    <div id="modal-format-selector" class="modal">
+        <div class="video-container-bar">
+            <a id="close-modal-format-selector">x</a>
+        </div>
+        <h2>Example video</h2>
+        <p>Example description</p>
+        <div class="format-list">
+            <h3>Video Formats.</h3>
+            <div class="video-formats">
+            </div>
+            <h3>Audio Formats.</h3>
+            <div class="audio-formats">
+            </div>
+        </div>
+    </div>
+    <div id="modal-loading">
+        <embed src="img/spinner.svg"/>
+    </div>
+    <div id="modal-video-container" class="modal">
+        <div class="video-container-bar">
+            <a id="close-and-reset-video-container">x</a>
+        </div>
+        <div id="video-container">
+            <div class="block">
+            <video id="video" controls="controls"></video>
+            </div>
+            <div id="download-video-container" class="block">
+                <a id="download-video-prepare" class="button-download active">Prepare download</a>
+                <a id="download-video-loading" class="button-download"><embed src="img/spinner.svg"/></a>
+                <a id="download-video" class="button-download">Download</a>
+            </div>
+        </div>
+    </div>
+    <div id="poping-notice" class="modal">
+        <div id="poping-notice-content">
+            <p>This webpage is free as in freedom software, it is offered to you with the hope it will be useful, but without any warranty,
+            you can find the source code at <a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl">my gitea</a> with docs to setup your own 
+            webpage like this, this software is licensed under the AGPLv3 license which means you MUST convey the source code in a human readable form
+            if you distribute this software or use it as an service to users of service or distributees.<p>
+
+                <p>I hope that if you find a non supported url which should be supported, a bug, or a feature you would like this webpage to have you file an issue in 
+                <a href="https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues">https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues</a>
+                to help this software improve since I find tracking users a pretty bad way to discover bugs and potential good features.</p>
+
+                <p>This webpage may load third party resources depending on the url you give to it which may put cookies in your browser, you are 
+                encouraged to frecuently delete your browser cookies to avoid those third parties tracking you on internet, Firefox offers you an
+                option to delete cookies as soon as you close the browser which may be a good idea to enable in the orwellian internet of today.</p> 
+        </div>
+        <div id="poping-notice-container-bar">
+            <a id="close-poping-notice" href="#">X</a>
+        </div>
+    </div>
+</body>
+</html>

themes/new_look_aprils_fools/public/src/application.js

@@ -0,0 +1,106 @@
+"use strict";
+
+import { PopingNotice } from './view/poping_notice.js';
+import { DownloadForm } from './view/download_form.js';
+import { LoadingModal } from './view/loading_modal.js';
+import { VideoContainer } from './view/video_container.js';
+import { FormatSelector } from './view/format_selector.js';
+
+class Application {
+    constructor() {
+        this.poping_notice = new PopingNotice();
+        this.download_form = new DownloadForm(this.onDownloadFormGot.bind(this));
+        this.loading_modal = new LoadingModal();
+        this.video_container = new VideoContainer();
+        this.format_selector = new FormatSelector();
+    }
+
+    init() {
+        this.popingNotice.setVisible(true);
+    }
+
+    onDownloadFormGot(url) {
+        this.dispatchURL(url);
+    }
+
+    dispatchURL(url, format) {
+        this.loadingModal.setVisible(true);
+        let error_str;
+        let success = this.queryAPI(url, format).then( (response) => {
+            if ( response.options !== undefined && response.options.list_formats !== undefined && response.options.list_formats ) {
+                if ( response.formats === undefined 
+                  || response.formats.audio_formats === undefined 
+                  || response.formats.video_formats === undefined ) {
+                    throw 'Format object is not valid.';
+                }
+                this.formatSelector.prepareFormatSelector(
+                  response.title, response.description, 
+                  response.formats.audio_formats, response.formats.video_formats,
+                  ( id ) => {
+                    this.loadingModal.setVisible(true);     
+                    this.dispatchURL(url, id);
+                });
+                this.formatSelector.setVisible(true);
+                this.loadingModal.setVisible(false);
+            } else {
+                this.videoContainer.onCanPlay(this.onCanPlayVideoContainer.bind(this));
+                this.videoContainer.setURLVideo(response.url);
+                this.videoContainer.setFilename(response.filename);
+            }
+        }).catch( (error) => {
+            error_str = error.toString(); 
+            this.loadingModal.setVisible(false);
+            let input_url = document.createElement('a');
+            input_url.href = url;
+            input_url.innerText = url;
+            let issues_url = document.createElement('a');
+            issues_url.href = 'https://gitea.sergiotarxz.freemyip.com/sergiotarxz/Peertube-dl/issues';
+            issues_url.innerText = 'here';
+            this.popingNotice.setMessage( [ 'The url ', input_url, ' is not supported, the error was: ', error_str , ' if you think this is an error, report it ', issues_url, '.' ]);
+            this.popingNotice.setVisible(true);
+});
+    }
+
+    onCanPlayVideoContainer() {
+        this.videoContainer.setVisible(true);
+        this.loadingModal.setVisible(false);
+    }
+
+    async queryAPI(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();
+    }
+
+    get formatSelector() {
+        return this.format_selector;
+    }
+
+    get videoContainer() {
+        return this.video_container;
+    }
+
+    get downloadForm() {
+        return this.download_form;
+    }
+
+    get popingNotice() {
+        return this.poping_notice;
+    }
+
+    get loadingModal() {
+        return this.loading_modal;
+    }
+}
+
+export { Application };

themes/new_look_aprils_fools/public/src/index.js

@@ -0,0 +1,10 @@
+"use strict";
+
+import { Application } from './application.js';
+
+window.addEventListener('load', (event) => {
+    let application = new Application();
+    application.init(); 
+});
+
+

themes/new_look_aprils_fools/public/src/view/download_form.js

@@ -0,0 +1,35 @@
+"use strict";
+
+class DownloadForm {
+    constructor(callback) {
+        this.query_selector = '#download-form'; 
+        this.callback = (event) => { 
+            event.preventDefault();
+            callback(this.downloadFormUrl.value); 
+        };
+        this.addEventListeners();
+    }
+
+    addEventListeners() {
+        this.downloadFormButton.addEventListener('click', this.callback);
+        this.element.addEventListener('submit', this.callback);
+    }
+
+    get downloadFormButton() {
+        return this.element.querySelector('#download-form-button');
+    }
+
+    get downloadFormUrl() {
+        return this.element.querySelector('#download-form-url');
+    }
+
+    get querySelector() {
+        return this.query_selector;
+    }
+
+    get element() {
+        return document.querySelector(this.querySelector);
+    }
+}
+
+export { DownloadForm };

themes/new_look_aprils_fools/public/src/view/format_selector.js

@@ -0,0 +1,120 @@
+"use strict";
+
+class FormatSelector {
+    constructor() {
+        this.query_selector = '#modal-format-selector';
+        this.addEventListeners();
+    }
+
+    appendFormat(container, object, is_video, callback) {
+        let a = document.createElement('a');
+        let br = function() { return document.createElement('br') };
+        let inner_text = [];
+        let muted_video = false;
+        if ( is_video ) {
+            if ( object.audioSampleRate === undefined ) {
+                muted_video = true;
+            }
+            inner_text.push('Id: ' + object.id);
+            inner_text.push(br());
+            inner_text.push('Format: ' + object.mimeType);
+            inner_text.push(br());
+            inner_text.push('QualityLabel: ' + object.qualityLabel + "p");
+            inner_text.push(br());
+            inner_text.push('Bitrate: ' + object.bitrate); 
+            inner_text.push(br());
+            inner_text.push( ( muted_video) ?  
+                "No audio. " :
+                'AudioSampleRate: ' + object.audioSampleRate 
+            );
+        } else {
+            inner_text.push('Id: ' + object.id + "\n");
+            inner_text.push(br());
+            inner_text.push('Format: ' + object.mimeType);
+            inner_text.push(br());
+            inner_text.push('AudioSampleRate: ' + object.audioSampleRate);
+            inner_text.push(br());
+            inner_text.push('Bitrate: ' + object.bitrate);
+        }
+
+        a.addEventListener( 'click', (event) => {
+            callback(object.id);
+        });
+        if (muted_video) {
+            let img_muted_video = document.createElement('img');
+            img_muted_video.classList.add('mute_img');
+            img_muted_video.classList.add('scale');
+            img_muted_video.src = 'img/audio_muted.svg';
+            inner_text.push(img_muted_video);
+        }
+
+        for (let text of inner_text) {
+            if (typeof text === "string" 
+              || text instanceof String) {
+                text = document.createTextNode(text);
+                a.appendChild(text);
+            } else if ( text instanceof Node) {
+                a.appendChild(text);
+            } else {
+                throw ('Text is not a instance of Node nor a String');
+            }
+        }
+ 
+        container.appendChild(a);
+    }
+
+    prepareFormatSelector(title, description, audio_formats, video_formats, callback) {
+        this.titleFormatSelector.innerText = title;
+        this.descriptionFormatSelector.innerText = description;
+        this.videoFormats.innerHTML = '';
+        this.audioFormats.innerHTML = '';
+        for ( let x of audio_formats) {
+            this.appendFormat(this.audioFormats, x, false, callback);
+        }
+        for ( let x of video_formats ) {
+            this.appendFormat(this.videoFormats, x, true, callback);
+        }
+    }
+
+    setVisible(option) {
+        if (option) {
+            this.element.classList.add('active');
+        } else {
+            this.element.classList.remove('active');
+        }
+    }
+
+    addEventListeners() {
+        this.closeFormatSelector.addEventListener('click', (event) => { this.setVisible(false); });
+    }
+
+    get videoFormats() {
+        return this.element.querySelector('.video-formats');
+    }
+    
+    get audioFormats() {
+        return this.element.querySelector('.audio-formats');
+    }
+
+    get titleFormatSelector() {
+        return this.element.querySelector('h2');
+    }
+
+    get descriptionFormatSelector() {
+        return this.element.querySelector('p');
+    }
+
+    get closeFormatSelector() {
+        return this.element.querySelector('#close-modal-format-selector');
+    }
+
+    get element() {
+        return document.querySelector(this.querySelector);
+    }
+
+    get querySelector() {
+        return this.query_selector;
+    }
+}
+
+export { FormatSelector };

themes/new_look_aprils_fools/public/src/view/loading_modal.js

@@ -0,0 +1,25 @@
+"use strict";
+
+class LoadingModal {
+    constructor() {
+        this.query_selector = '#modal-loading';
+    }
+
+    setVisible(option) {
+        if (option) {
+            this.element.classList.add('active');
+        } else {
+            this.element.classList.remove('active');
+        }
+    }
+
+    get element() {
+        return document.querySelector(this.querySelector);
+    }
+
+    get querySelector() {
+        return this.query_selector;
+    }
+}
+
+export { LoadingModal };

themes/new_look_aprils_fools/public/src/view/poping_notice.js

@@ -0,0 +1,56 @@
+"use strict";
+
+class PopingNotice {
+    constructor() {
+        this.query_selector = '#poping-notice';
+        this.closePopingNotice.addEventListener('click', (event) => {
+            this.setVisible(false);
+        });
+    }
+
+    setVisible(option) {
+        if (option) {
+            this.element.classList.add('active');
+        } else {
+            this.element.classList.remove('active');
+        }
+    }
+
+    setMessage(message) {
+        if (!message instanceof Array) 
+            throw 'Message is not instance of Array.';
+        let p = document.createElement('p');
+        for (let node of message) {
+            if (typeof node === "string" 
+              || node instanceof String) {
+                node = document.createTextNode(node);
+                p.appendChild(node);
+            } else if ( node instanceof Node) {
+                p.appendChild(node);
+            } else {
+                throw ('Node is not a instance of Node nor a String');
+            }
+        }
+        this.popingNoticeContent.innerHTML = '';
+        this.popingNoticeContent.appendChild(p);
+                
+    }
+
+    get querySelector() {
+        return this.query_selector;
+    }
+
+    get element() {
+        return document.querySelector(this.querySelector);
+    }
+    
+    get popingNoticeContent() {
+        return this.element.querySelector('#poping-notice-content');
+    }
+
+    get closePopingNotice() {
+        return this.element.querySelector('#close-poping-notice');
+    }
+}
+
+export { PopingNotice };

themes/new_look_aprils_fools/public/src/view/video_container.js

@@ -0,0 +1,113 @@
+"use strict";
+
+class VideoContainer {
+    constructor() {
+        this.query_selector = '#modal-video-container';
+        this.addEventListeners();
+    }
+
+    setVisible(option) {
+        if (option) {
+            this.element.classList.add('active');
+        } else {
+            this.video.pause();
+            this.element.classList.remove('active');
+            this.downloadVideoPrepare.classList.add('active');
+            this.downloadVideoLoading.classList.remove('active');
+            this.downloadVideo.classList.remove('active');
+        }
+    }
+    
+    addEventListeners() {
+        this.downloadVideoPrepare.addEventListener('click', this.downloadPrepareHandler.bind(this));
+        this.closeAndResetVideoContainer.addEventListener('click', (event) => {
+            this.setVisible(false); 
+        });
+    }
+
+    downloadPrepareHandler(event) {
+        this.downloadVideoPrepare.classList.remove('active');
+        this.downloadVideoLoading.classList.add('active');
+        this.generateBlobVideo(this.URLVideo).then( blob => {
+            this.downloadVideo.href = URL.createObjectURL(blob);
+            this.downloadVideo.download = this.filename; 
+            this.downloadVideoLoading.classList.remove('active');
+            this.downloadVideo.classList.add('active');
+        });
+   
+    }
+
+    async generateBlobVideo(url) {
+        const blob = await fetch(url, { mode: 'cors', })
+          .then(res => res.blob())
+          .catch( err => this.generateBlobVideoByProxy(url) );
+        return blob;
+    }
+
+    async 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;
+     }
+
+    onCanPlay(callback) {
+        video.addEventListener('canplay', (event) => {
+            callback();
+        });
+    }
+    
+    setURLVideo(url) {
+        this.url_video = url;
+        video.src = url;
+    }
+
+    setFilename(filename) {
+        this.filename = filename;
+    }
+
+    get closeAndResetVideoContainer() {
+        return this.element.querySelector('#close-and-reset-video-container');
+    }
+
+    get downloadVideo() { 
+        return this.element.querySelector('#download-video');
+    }
+
+    get URLVideo() {
+        return this.url_video;
+    }
+
+    get closeAndResetVideoContainer() {
+        return this.element.querySelector('#close-and-reset-video-container');
+    }
+
+    get downloadVideoLoading() {
+        return this.element.querySelector('#download-video-loading');
+    }
+
+    get downloadVideoPrepare() {
+        return this.element.querySelector('#download-video-prepare');
+    }
+
+    get video() {
+        return this.element.querySelector('#video');
+    }
+
+    get element() {
+        return document.querySelector(this.querySelector);
+    }
+
+    get querySelector() {
+        return this.query_selector;
+    }
+}
+
+export { VideoContainer };

themes/new_look_aprils_fools/public/webpack.config.js

@@ -0,0 +1,10 @@
+const path = require('path');
+
+module.exports = {
+    entry: './src/index.js',
+    devtool: 'source-map',
+    output: {
+        filename: 'peertube-dl-web.js',
+        path: path.resolve(__dirname, 'dist/js'),
+    },
+};