☰

DominoChinese Flashcard Audio Autoplay

When the flashcard answer is revealed, the audio will play automatically. Also spaces the flashcard so top and bottom don't shift on reveal.

Versión del día 16/10/2020. Echa un vistazo a la versión más reciente.

// ==UserScript==
// @name        DominoChinese Flashcard Audio Autoplay
// @namespace   https://eriknewhard.com/
// @description When the flashcard answer is revealed, the audio will play automatically. Also spaces the flashcard so top and bottom don't shift on reveal.
// @author      everruler12
// @version     2.0
// @match       https://www.dominochinese.com/*
// @grant       none
// @require     https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js
// ==/UserScript==

var settings = {
    flashcard_spacer: true,
    autoplay_audio: true
}



var observer = new MutationObserver(mutations => {
    if (isFlashcards()) {
        mutations.forEach(check_mutation)
    }
})

var target = document.getElementById('root')

var config = {
    childList: true,
    subtree: true
}

observer.observe(target, config)

console.log('DominoChinese Flashcard Audio Autoplay started')



function check_mutation(mutation) {
    // console.log(mutation)
    const added = mutation.addedNodes[0]

    autoplay_audio(added)
    flashcard_spacer(added)
}

function isFlashcards() {
    return window.location.href.match('https://www.dominochinese.com/flashcards')
}


function autoplay_audio(added) {
    if (!settings.autoplay_audio) return

    // back side of flashcard revealed
    if (added && added.classList && added.classList.contains('audio-player')) {
        added.click()
    }
}


function flashcard_spacer(added) {
    if (!settings.flashcard_spacer) return

    console.log(added)

    const spacer_id = 'flashcard_spacer'

    let spacer = $(`#${spacer_id}`)

    if (spacer.length)
        toggleSpacer()
    else
        appendSpacer()

    function appendSpacer() {
        let spacer_html = /*html*/ `<div id=${spacer_id} style='visibility: hidden; height: 113px'></div>`
        let flashcard_container = $('.mb-6.mt-12.text-center.flex.flex-col.items-center.justify-center')
        if (flashcard_container.length) flashcard_container.append($(spacer_html))
    }

    function toggleSpacer() {
        const reveal_button_selector = 'span.text-xs:contains(Reveal)'

        if (added && $(added).find(reveal_button_selector).length) {
            showSpacer()
            $(reveal_button_selector).parent().click(hideSpacer)
        }


        function showSpacer() {
            $(spacer).show()
        }

        function hideSpacer() {
            $(spacer).hide()
        }
    }
}