PeerTube - Menu Enhancer

anonymous@undisclosed.example.com (Anonymous) — Fri, 29 Jul 2022 10:18:24 +0000

PeerTube - Menu Enhancer

/** === LINKS ===
 * Simple add your links into the MENU_LINKS array following the example format
 * It will be added to the menu in the same order as you defined it
 */

/** === SEPARATOR ===
 * Like our example, use {name: "separator"} to add a separator to the menu
 */

/** === ICONS ===
 * You can use https://css.gg, icons are automatically imported if start with gg-*** (Ex: gg-game).
 * Else, you can use https://fontawesome.com/icons/ or any other custom icon library.
 * Just import the CSS manually.
 **/

// EDIT HERE
var MENU_LINKS = [
    {
        name: "Gaming",
        url: "/videos/recently-added?languageOneOf=fr&categoryOneOf=7&c=true&s=2",
        icon: "gg-games",
    },
    {
        name: "Kid's",
        url: "/videos/recently-added?languageOneOf=fr&categoryOneOf=17&c=true&s=2",
        icon: "gg-girl",
    },
    { name: "separator" },
    {
        name: "Pewtix - Dicutez de l\'actualité",
        url: "https://pewtix.com/",
        target: "_blank",
        icon: "gg-twitter"
    },
    {
        name: "Pixel - Partagez vos photos",
        url: "https://pixel.orion-hub.fr/",
        target: "_blank",
        icon: "gg-instagram"
    },
    { name: "separator" },
    {
        name: "Liberapay - Faire un Don",
        url: "https://liberapay.com/bthommy/",
        target: "_blank",
        icon: "gg-coffee"
    }
]

// END EDIT -- DO NOT TOUCH AFTER

/**
 * Wait for the DOM to be loaded
 * Then, init the custom menu
 */
window.addEventListener("DOMContentLoaded", (event) => {
    const wait__menuCustomInterval = setInterval(() => {
        let firstLink = document.querySelectorAll(
            '.menu-block a[href="/videos/overview"]'
        );
        if (firstLink.length > 0) {
            clearInterval(wait__menuCustomInterval);
            initCustomMenu(firstLink[0]);
        }
    }, 500);
});

/**
 * Init the custom menu
 * @param {HTMLElement} firstLink The first link of the menu
 * @returns {void}
 */
function initCustomMenu(linkTemplate) {
    //Parent node which contains 'Videos' title and the 3 links ('Découvrir', 'Tendances', 'Récemment ajoutées')
    const menuContainer = linkTemplate.parentNode;
    // Define head element
    const head = document.head;

    // Define and ADD custom CSS
    const customCSS = `
        hr {
          background-color: #ccc !important;
        }
        
        a.menu-link i {
          margin-right: 16px;
        }
    `;
    const style = document.createElement("style");
    style.type = "text/css";
    style.appendChild(document.createTextNode(customCSS));
    head.appendChild(style);

    // Define separator
    const separator = document.createElement("hr");
    separator.setAttribute("width", "80%");
    separator.setAttribute("color", "white");
    separator.setAttribute("background-color", "white");
    separator.setAttribute("height", "1px");
    separator.setAttribute("visible", "true");

    //Adding links
    MENU_LINKS.forEach((link) => {
        if (link.name === "separator") {
            // Adding separator
            menuContainer.appendChild(separator.cloneNode());
        } else {
            // Adding link

            // Manage icon (automatically import if start with gg-*** from https://css.gg)
            let icon = "";
            if (link.icon.startsWith("gg-")) {
                icon = `<i class="${link.icon}"></i>`;
                const ggName = link.icon.replace("gg-", "");

                // Inject css in the head
                const cssLink = document.createElement("link");
                cssLink.type = "text/css";
                cssLink.rel = "stylesheet";
                cssLink.href = `https://css.gg/${ggName}.css`;
                head.appendChild(cssLink);
            } else {
                icon = `<i class="${link.icon}"></i>`;
            }

            // Create link
            const linkNode = linkTemplate.cloneNode();
            linkNode.setAttribute("href", link.url);
            linkNode.setAttribute("routerLink", link.url);
            linkNode.setAttribute("target", (link.target || "_self"));
            linkNode.innerHTML = icon + " " + link.name;

            // Add link to the menu
            menuContainer.appendChild(linkNode);
        }
    });
}

PeerTube

anonymous@undisclosed.example.com (Anonymous) — Wed, 29 Sep 2021 11:21:46 +0000

PeerTube

PeerTube ist eine freie, dezentralisierte Open Source Software für Video Plattformen, betrieben mit ActivityPub und WebTorrent, die Peer-to-Peer Technologie einsetzt um die Last auf einen einzelnen Server zu reduzieren. Die üblichen Videoportale verdienen Geld mit Deinen Daten, indem sie Dein Verhalten analysieren und Dich mit gezielter Werbung überfluten. Peertube ist keinem Unternehmensmonopol unterstellt, finanziert sich nicht durch Werbung und spioniert dir nicht hinterher. Am wichtigsten ist aber: Du bist ein Mensch für PeerTube, nicht ein Objekt, das analysiert werden muss um es im Videokonsum zu fesseln. Beispielsweise benutzt PeerTube keine fiesen Algorithmen um Dich stundenlang online zu halten.

move IT Home Base

PeerTube - Menu Enhancer

PeerTube - Menu Enhancer

PeerTube

PeerTube

Links