xRock / JVChat x Vocaroo

// ==UserScript==
// @name         JVChat x Vocaroo
// @namespace    JVChat x Vocaroo
// @version      3.1.2
// @description  Affiche l'aperçu du Vocaroo directement sur JVChat, pour ne pas avoir besoin de cliquer sur le lien
// @author       xRock
// @match        https://*.jeuxvideo.com/forums/42-*
// @match        https://*.jeuxvideo.com/forums/1-*
// @require      http://code.jquery.com/jquery-3.4.1.min.js
// @license      MIT
// ==/UserScript==

/* globals $:false */

const storageKey = "jvchat-x-vocaroo"

let configuration = {
    hauteur: 45,
    largeur: 400,
    autoplay: false
}

// Sauvegarde de la configuration
const saveConfig = () => {
    const config = JSON.stringify(configuration)
    localStorage.setItem(storageKey, config)
}

// Chargement de la configuration
const loadConfig = () => {
    let config = JSON.parse(localStorage.getItem(storageKey) || "{}")
    for (const key in config) {
        if (config.hasOwnProperty(key) && configuration.hasOwnProperty(key)) {
            configuration[key] = config[key]
        }
    }

    document.getElementById("jvchat-vocaroo-autoplay-checkbox").checked = configuration.autoplay
}

const notInQuote = (elem) => {
    if (elem.parentNode.classList.contains("blockquote-jv")) {
      return false
    } else if (elem.parentNode.parentNode.classList.contains("blockquote-jv")) {
      return false
    } else if (elem.parentNode.parentNode.parentNode.classList.contains("blockquote-jv")) {
      return false
    } else {
      return true
    }
}

addEventListener("jvchat:newmessage", function (event) {
    // Déclaration de variables utiles
    const message = document.querySelector(`.jvchat-message[jvchat-id="${event.detail.id}"]`)
    const text = message.querySelector(".txt-msg").textContent.toLowerCase().trim()
    // Si le message contient un lien qui commence par "https://voca" ou "https://old.voca", le script s'exécute
    if (text.includes("https://voca") || text.includes("https://old.voca")) {
        // On récupère tous les liens du message
        const aElements = message.querySelector(".txt-msg").getElementsByTagName("a")
        // On vérifie tous les liens pour voir s'ils sont des liens vocaroo :
        for (const elem of aElements) {
            const link = elem.getAttribute("href")
            if (link.startsWith("https://voca") || link.includes("https%3A%2F%2Fvocaroo.com%2F")) { // gère les liens digidip de jvc
                const regex = link.includes("https%3A%2F%2Fvocaroo.com%2F") ? link.match("vocaroo\.com%2F(.*)&ppref")[1] : link.match("\/([^/]*)$")[1] // récup l'ID du vocaroo
                $('<div class="vocaroo-embed"></div>').insertAfter(elem)
                const div = document.querySelectorAll(".vocaroo-embed")[document.querySelectorAll(".vocaroo-embed").length - 1]
                $(div).html(`<audio controls ${configuration.autoplay && notInQuote(elem) ? "autoplay" : ""} style="width: ${configuration.largeur}px; height: ${configuration.hauteur}px; display: inline-block;" src="https://media.vocaroo.com/mp3/${regex}">Your browser does not support the <code>audio</code> element.</audio>`) // ajoute un audio player pour le vocaroo
            }
            // On ramène la page en bas du défilement pour ne pas à avoir à scroll à la main
            const element = document.getElementById("jvchat-main")
            element.scrollTop = 10000
        }
    }
})

addEventListener("jvchat:activation", function (event) {
    const css = `<style type="text/css" id="jvchat-vocaroo-css">.text-enrichi-forum iframe{margin-bottom:0!important;}</style>`
    document.head.insertAdjacentHTML("beforeend", css)
    const HTML = `<div class="jvchat-config-option" id="jvchat-vocaroo-autoplay"><label><input id="jvchat-vocaroo-autoplay-checkbox" type="checkbox"><span id="jvchat-vocaroo-autoplay-span"> Lancement auto des Vocaroo</span></label><p>Lance automatiquement les vocaroos lorsqu'ils sont chargés.</p></div>`
    document.getElementById("jvchat-max-width").insertAdjacentHTML("afterend", HTML)

    loadConfig()
    
    document.getElementById("jvchat-vocaroo-autoplay-checkbox").addEventListener("change", () => {
        configuration.autoplay = document.getElementById("jvchat-vocaroo-autoplay-checkbox").checked
        if (!configuration.autoplay) {
            for (const audio of document.querySelectorAll("audio")) {
                audio.pause()
            }
        }
        saveConfig()
    })
})