<commit_before>import React from 'react'
import uuid from 'uuid'

import { 
    Line, 
    Icon,
    ToggleOnClick, 
    Image,
    Video
} from '~/components'

import { setHTML } from '~/utils'


export function renderControls(controls) {
    // TODO: Add functionality to thread icons
    // const { download, openReferences, ...} = controls 
    return (
        <ul className="controls">
            <li onClick={()=> console.log('Clicked on download icon')}>
                <span className='mdi mdi-download'></span>
            </li>
            <li>
                <span className='mdi mdi-reply'></span>
            </li>
            <li>
                <span className='mdi mdi-comment-text'></span>
            </li>
        </ul>
    )
}

export function renderRefs(refs) {
    return refs && refs.length ? <div className='references'>
        <Line/>
        <span className="reference-header">
            <span className="reply-count">({refs.length}) </span>
            <Icon name="account-multiple"/> 
        </span>
        {refs.map( ref => 
            <span key={uuid.v4()} className="quote">
                <a className="quotelink" href={`#p${ref}`}>
                    {`>>${ref}`}
                </a>
            </span>
        )}
    </div> : ''
}

export function renderTitle(title) {
    if (title) return <span className='title'> 
        <strong {...setHTML(title)}/>
        <span className='pipe'/>
    </span>
}

export function renderMediaInfo(media) {
    if (!media) return

    const { filename, filetype } = media

    let iconName;
    if (filetype.includes("webm"))
        iconName = 'video'
    else
        iconName = 'image-area'

    let fName = filename
    if (fName.length > 25)
        fName = fName.slice(0, 25) + '(...)'
    fName += filetype

    return (
        <div className="media-info">
            <Icon name={iconName}/>
            <span className="filename" {...setHTML(fName)}/>
        </div>
    )

}

export function renderMedia(media) {
    if (!media) 
        return

    const { thumbnail, srcLarge, filetype, height, width } = media

    // TODO: Lazy load thread thumbnails
    return (
        <ToggleOnClick 
            className="thread-media"
            from={<Image src={thumbnail}/>}
            to={createExpandedMedia(filetype, srcLarge)}
        />
    )
}

function createExpandedMedia(ext, src) {
    return ext === ".webm" ? (
        <Video controls autoplay loop 
            src={src} 
            type="video/mp4"
            className="expanded"
            key="expanded"
        />
    ) : <Image className="expanded" key="expanded" src={src}/>
}<commit_msg>(ThreadPost): Fix react not triggering a re-render on element toggle<commit_after>import React from 'react'
import uuid from 'uuid'

import { 
    Line, 
    Icon,
    ToggleOnClick, 
    Image,
    Video
} from '~/components'

import { setHTML } from '~/utils'


export function renderControls(controls) {
    // TODO: Add functionality to thread icons
    // const { download, openReferences, ...} = controls 
    return (
        <ul className="controls">
            <li onClick={()=> console.log('Clicked on download icon')}>
                <span className='mdi mdi-download'></span>
            </li>
            <li>
                <span className='mdi mdi-reply'></span>
            </li>
            <li>
                <span className='mdi mdi-comment-text'></span>
            </li>
        </ul>
    )
}

export function renderRefs(refs) {
    return refs && refs.length ? <div className='references'>
        <Line/>
        <span className="reference-header">
            <span className="reply-count">({refs.length}) </span>
            <Icon name="account-multiple"/> 
        </span>
        {refs.map( ref => 
            <span key={uuid.v4()} className="quote">
                <a className="quotelink" href={`#p${ref}`}>
                    {`>>${ref}`}
                </a>
            </span>
        )}
    </div> : ''
}

export function renderTitle(title) {
    if (title) return <span className='title'> 
        <strong {...setHTML(title)}/>
        <span className='pipe'/>
    </span>
}

export function renderMediaInfo(media) {
    if (!media) return

    const { filename, filetype } = media

    let iconName;
    if (filetype.includes("webm"))
        iconName = 'video'
    else
        iconName = 'image-area'

    let fName = filename
    if (fName.length > 25)
        fName = fName.slice(0, 25) + '(...)'
    fName += filetype

    return (
        <div className="media-info">
            <Icon name={iconName}/>
            <span className="filename" {...setHTML(fName)}/>
        </div>
    )

}

export function renderMedia(media) {
    if (!media) 
        return

    const { thumbnail, srcLarge, filetype, height, width } = media

    // TODO: Lazy load thread thumbnails
    return (
        <ToggleOnClick 
            className="thread-media"
            from={<Image src={thumbnail}/>}
            to={createExpandedMedia(filetype, srcLarge)}
        />
    )
}

function createExpandedMedia(ext, src) {
    return ext === ".webm" ? (
        <div><Video loop autoPlay  
            src={src}
            type="video/mp4"
            className="expanded"
            controls={['PlayPause', 'Seek', 'Time', 'Volume', 'Fullscreen']}
        /></div>
    ) : <Image className="expanded" key="expanded" src={src}/>
}
{'fraction_non_alphanumeric': 0.14997232982844494, 'fraction_numerical': 0.002582549345139273, 'mean_word_length': 1.9041242635243707, 'pattern_counts': {'":': 0, '<': 81, '<?xml version=': 0, '>': 91, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 6, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '242366', 'n_tokens_mistral': 1652, 'n_tokens_neox': 1589, 'n_words': 375}