Two-Click Loading for Spotify, SoundCloud and Other Embeds

// Host fragment => service name shown to the visitor.
$wpide_two_click_hosts = array(
    'open.spotify.com'    => 'Spotify',
    'w.soundcloud.com'    => 'SoundCloud',
    'dailymotion.com'     => 'Dailymotion',
    'player.twitch.tv'    => 'Twitch',
    'calendar.google.com' => 'Google Calendar',
    'docs.google.com'     => 'Google Docs',
    'typeform.com'        => 'Typeform',
    'bandcamp.com'        => 'Bandcamp',
);

add_filter( 'the_content', function ( $content ) use ( $wpide_two_click_hosts ) {
    if ( false === stripos( $content, '<iframe' ) ) {
        return $content;
    }

    return preg_replace_callback( '#<iframe\b[^>]*\bsrc=["\']([^"\']+)["\'][^>]*>\s*</iframe>#is', function ( $m ) use ( $wpide_two_click_hosts ) {
        foreach ( $wpide_two_click_hosts as $host => $name ) {
            if ( false === stripos( $m[1], $host ) ) {
                continue;
            }

            $key = sanitize_key( $name );

            return sprintf(
                '<div class="wpide-2click" data-service="%1$s"><template>%2$s</template><div class="wpide-2click-note" style="padding:16px;border:1px solid #c3c4c7;background:#f6f7f7;"><p style="margin:0 0 8px">%3$s</p><button type="button" class="wpide-2click-load">%4$s</button> <label style="margin-left:8px"><input type="checkbox" class="wpide-2click-always"> %5$s</label></div></div>',
                esc_attr( $key ),
                $m[0],
                esc_html( sprintf( 'This content is hosted by %s. Loading it sends data such as your IP address to %s.', $name, $name ) ),
                esc_html( 'Load ' . $name ),
                esc_html( 'Always allow ' . $name )
            );
        }

        return $m[0];
    }, $content );
}, 20 );

add_action( 'wp_footer', function () {
    ?>
<script>
(function () {
    var key = 'wpideAllowed';
    function allowed() { try { return JSON.parse(localStorage.getItem(key) || '[]'); } catch (e) { return []; } }
    function show(box) { var t = box.querySelector('template'); if (t) { box.replaceChildren(t.content.cloneNode(true)); } }
    var list = allowed();
    document.querySelectorAll('.wpide-2click').forEach(function (box) {
        if (list.indexOf(box.getAttribute('data-service')) !== -1) { show(box); }
    });
    document.addEventListener('click', function (e) {
        var btn = e.target.closest ? e.target.closest('.wpide-2click-load') : null;
        if (!btn) { return; }
        var box = btn.closest('.wpide-2click');
        var service = box.getAttribute('data-service');
        if (box.querySelector('.wpide-2click-always').checked) {
            var l = allowed();
            if (l.indexOf(service) === -1) { l.push(service); }
            try { localStorage.setItem(key, JSON.stringify(l)); } catch (err) {}
            document.querySelectorAll('.wpide-2click[data-service="' + service + '"]').forEach(show);
        } else {
            show(box);
        }
    });
})();
</script>
    <?php
} );