<commit_before>import React from 'react'
import { Link } from 'react-router'
import { withNamespaces } from 'react-i18next'

import { Icon, TimeSince } from '../Utils'
import iterateWithSeparators from '../../lib/iterate_with_separators'
import CardLayout from '../Utils/CardLayout'
import RawIcon from '../Utils/RawIcon'
import { videoURL } from '../../lib/cf_routes'
import { MAX_VIDEO_CARD_SPEAKERS } from '../../constants'

@withNamespaces('videoDebate')
export class VideoCard extends React.PureComponent {
  render() {
    const { t, video } = this.props
    const { hash_id, title } = video
    const linkTarget = videoURL(hash_id)

    return (
      <div className="column is-one-quarter">
        <CardLayout
          className="video-card"
          image={
            <Link to={linkTarget}>
              <div className="play-overlay">
                <RawIcon name="play-circle" />
              </div>
              <figure className="image is-16by9">
                <img alt="" src={VideoCard.videoThumb(video)} />
              </figure>
            </Link>
          }
          content={
            <Link to={linkTarget}>
              <h4 className="title is-5">{title}</h4>
            </Link>
          }
          footer={this.renderVideoMetadata(video, t)}
        />
      </div>
    )
  }

  renderVideoMetadata({ speakers, insertedAt, isPartner }, t) {
    return (
      <div className="video-metadata">
        <div>
          {this.renderAddedByLabel(isPartner, t)}
          &nbsp;
          <TimeSince time={insertedAt} />
        </div>
        {speakers.length > 0 && this.renderSpeakersList(speakers, t)}
      </div>
    )
  }

  renderAddedByLabel(isPartner, t) {
    return isPartner ? (
      <span className="added-by">
        <Icon name="star" />
        <strong>{t('video.addedBy', { userType: '$t(video.partner)' })}</strong>
      </span>
    ) : (
      <span className="added-by">
        <Icon name="user" />
        <span>{t('video.addedBy', { userType: '$t(video.user)' })}</span>
      </span>
    )
  }

  renderSpeakersList(speakers, t) {
    const nbOthers = speakers.length - MAX_VIDEO_CARD_SPEAKERS
    const speakerComponentsList = []
    const speakerIterator = iterateWithSeparators(
      speakers,
      MAX_VIDEO_CARD_SPEAKERS,
      t,
      false
    )
    for (const [speaker, separator] of speakerIterator) {
      speakerComponentsList.push(
        <span key={speaker.id}>
          <strong>{this.renderSpeakerName(speaker)}</strong>
          {separator}
        </span>
      )
    }
    if (nbOthers > 0) {
      const title = speakers.slice(MAX_VIDEO_CARD_SPEAKERS).map(s => s.full_name).join(', ')
      speakerComponentsList.push(
        <span key="others">
          &nbsp;
          {t('main:misc.and')}
          &nbsp;
          <span title={title}><commit_msg>Fix trailing comma when the size is lower than the maximum<commit_after>import React from 'react'
import { Link } from 'react-router'
import { withNamespaces } from 'react-i18next'

import { Icon, TimeSince } from '../Utils'
import iterateWithSeparators from '../../lib/iterate_with_separators'
import CardLayout from '../Utils/CardLayout'
import RawIcon from '../Utils/RawIcon'
import { videoURL } from '../../lib/cf_routes'
import { MAX_VIDEO_CARD_SPEAKERS } from '../../constants'

@withNamespaces('videoDebate')
export class VideoCard extends React.PureComponent {
  render() {
    const { t, video } = this.props
    const { hash_id, title } = video
    const linkTarget = videoURL(hash_id)

    return (
      <div className="column is-one-quarter">
        <CardLayout
          className="video-card"
          image={
            <Link to={linkTarget}>
              <div className="play-overlay">
                <RawIcon name="play-circle" />
              </div>
              <figure className="image is-16by9">
                <img alt="" src={VideoCard.videoThumb(video)} />
              </figure>
            </Link>
          }
          content={
            <Link to={linkTarget}>
              <h4 className="title is-5">{title}</h4>
            </Link>
          }
          footer={this.renderVideoMetadata(video, t)}
        />
      </div>
    )
  }

  renderVideoMetadata({ speakers, insertedAt, isPartner }, t) {
    return (
      <div className="video-metadata">
        <div>
          {this.renderAddedByLabel(isPartner, t)}
          &nbsp;
          <TimeSince time={insertedAt} />
        </div>
        {speakers.length > 0 && this.renderSpeakersList(speakers, t)}
      </div>
    )
  }

  renderAddedByLabel(isPartner, t) {
    return isPartner ? (
      <span className="added-by">
        <Icon name="star" />
        <strong>{t('video.addedBy', { userType: '$t(video.partner)' })}</strong>
      </span>
    ) : (
      <span className="added-by">
        <Icon name="user" />
        <span>{t('video.addedBy', { userType: '$t(video.user)' })}</span>
      </span>
    )
  }

  renderSpeakersList(speakers, t) {
    const nbOthers = speakers.length - MAX_VIDEO_CARD_SPEAKERS
    const speakerComponentsList = []
    const speakerIterator = iterateWithSeparators(
      speakers,
      Math.min(speakers.length, MAX_VIDEO_CARD_SPEAKERS),
      t,
      nbOthers < 1
    )
    for (const [speaker, separator] of speakerIterator) {
      speakerComponentsList.push(
        <span key={speaker.id}>
          <strong>{this.renderSpeakerName(speaker)}</strong>
          {separator}
        </span>
      )
    }
    if (nbOthers > 0) {
      const title = speakers.slice(MAX_VIDEO_CARD_SPEAKERS).map(s => s.full_name).join(', ')
      speakerComponentsList.push(
        <span key="others">
          &nbsp;
          {t('main:misc.and')}
          &nbsp;
          <span title={title}>
{'fraction_non_alphanumeric': 0.14293148308759757, 'fraction_numerical': 0.003642671292281006, 'mean_word_length': 2.1856353591160222, 'pattern_counts': {'":': 0, '<': 76, '<?xml version=': 0, '>': 81, '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': '2745455', 'n_tokens_mistral': 1783, 'n_tokens_neox': 1756, 'n_words': 353}