<commit_before>import React from "react";

export function createMediaIfExists(ID, SRC, ext) {
    if (!ext) return;

    return (
        <div id={ID} className='img-container' onClick={ () => toggleMedia(ID, SRC.lg, ext)}>
            <div className="thumbnail">
                <img src={SRC.sm} />
            </div>
            <div className="img-large-container hidden">
                <span className="fullscreen fa-stack fa-sm">
                    <i className="fa fa-circle fa-stack-2x" />
                    <i className="fa fa-expand fa-stack-1x" />
                </span>
            </div>
        </div>
    )
}

function toggleMedia(id, src, ext) {
    const imgWrap = $('#'+id);
    const thumbnail = imgWrap.find('.thumbnail');
    const expanded = imgWrap.find('.img-large-container');

    if (expanded.hasClass('hidden')) {
        // Current 

        if (ext === ".webm") {
            // Create video
            var file = $('<video />', {
                src: src,
                type: 'video/mp4',
                controls: true,
                autoplay: true,
                loop: true,
                class: "expanded"
            });

        } else {
            // Create image
            var file = $('<img />', {
                src: src,   
                class: "expanded"
            })
        }

        // Hide the thumbnail and show the new element
        imgWrap.addClass('img-container-opened')<commit_msg>Update thread media to use new server parser<commit_after>import React from "react";

export function createMediaIfExists(id, media) {
    if (!media) return;

    const {srcSmall, srcLarge, filetype} = media

    return (
        <div id={id} className='img-container' onClick={ () => toggleMedia(id, srcLarge, filetype)}>
            <div className="thumbnail">
                <img src={srcSmall} />
            </div>
            <div className="img-large-container hidden">
                <span className="fullscreen fa-stack fa-sm">
                    <i className="fa fa-circle fa-stack-2x" />
                    <i className="fa fa-expand fa-stack-1x" />
                </span>
            </div>
        </div>
    )
}

function toggleMedia(id, src, filetype) {
    const imgWrap = $('#'+id);
    const thumbnail = imgWrap.find('.thumbnail');
    const expanded = imgWrap.find('.img-large-container');

    if (expanded.hasClass('hidden')) {
        // Current 

        if (filetype === ".webm") {
            // Create video
            var file = $('<video />', {
                src: src,
                type: 'video/mp4',
                controls: true,
                autoplay: true,
                loop: true,
                class: "expanded"
            });

        } else {
            // Create image
            var file = $('<img />', {
                src: src,   
                class: "expanded"
            })
        }

        // Hide the thumbnail and show the new element
        imgWrap.addClass('img-container-opened')
{'fraction_non_alphanumeric': 0.1384564425306393, 'fraction_numerical': 0.001987413050679033, 'mean_word_length': 1.4473257698541329, 'pattern_counts': {'":': 0, '<': 29, '<?xml version=': 0, '>': 31, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1777440', 'n_tokens_mistral': 851, 'n_tokens_neox': 807, 'n_words': 206}