<commit_before>import classNames from 'classnames'
import { useTranslation } from 'next-i18next'
import { useOmniAural } from 'omniaural'
import { Slider } from '~/components/Slider/Slider'
import { convertSecToHHMMSS } from '~/lib/utility/time'
import { playerResetLiveItemAndResumePlayback, playerSeekTo } from '~/services/player/player'
import { OmniAuralState } from '~/state/omniauralState'

type Props = {
  chapterFlagPositions?: number[]
  clipFlagPositions: number[]
  highlightedPositions: number[]
  labelsBelow?: boolean
}

export const ProgressBar = ({
  chapterFlagPositions = [],
  clipFlagPositions = [],
  highlightedPositions = [],
  labelsBelow
}: Props) => {
  const { t } = useTranslation()
  const [player] = useOmniAural('player') as [OmniAuralState['player']]
  const { currentNowPlayingItem, duration, isAtCurrentLiveStreamTime, playbackPosition } = player
  const isLiveItem = !!currentNowPlayingItem?.liveItem

  const currentTimeLabel = convertSecToHHMMSS(playbackPosition)
  const endTimeTextLabel = convertSecToHHMMSS(duration, isLiveItem, t)
  const endTimeLabel = isAtCurrentLiveStreamTime ? `${endTimeTextLabel} ●` : endTimeTextLabel

  const barContainer = classNames('player-bar-container', labelsBelow ? 'has-labels-below' : '')
  const bar = classNames('player-bar')
  const currentTimeBarLabel = classNames('player-bar-label current-time')
  const endTimeBarLabel = classNames(
    'player-bar-label end-time',
    isLiveItem ? 'is-live-item' : '',
    isAtCurrentLiveStreamTime ? 'is-at-current-live-position' : ''
  )

  const flagPositions = clipFlagPositions.length > 0 ? clipFlagPositions : chapterFlagPositions

  const currentTimeElement = (
    <div aria-description={t('Current time')} className={currentTimeBarLabel} tabIndex={0}>
      {currentTimeLabel}
    </div>
  )
  const endTimeAriaDescription = isLiveItem ? t('Go to current live time') : t('Duration')
  const endTimeAriaRole = isLiveItem ? 'button' : 'none'
  const endTimeOnClick = isLiveItem ? playerResetLiveItemAndResumePlayback : null
  const endTimeElement = isLiveItem ? (
    <button
      aria-description={endTimeAriaDescription}
      aria-role={endTimeAriaRole}
      className={endTimeBarLabel}
      onClick={endTimeOnClick}
      tabIndex={0}
    >
      {endTimeLabel}
    </button>
  ) : (
    <div aria-description={endTimeAriaDescription} aria-role={endTimeAriaRole} className={endTimeBarLabel} tabIndex={0}>
      {endTimeLabel}
    </div>
  )

  return (
    <div className={barContainer}>
      {!labelsBelow && currentTimeElement}
      <Slider
        ariaHidden
        ariaLabel={t('Player progress bar')}
        className={bar}
        currentValue={isLiveItem ? 0 : playbackPosition}
        endVal={duration}
        flagPositions={flagPositions}
        highlightedPositions={highlightedPositions}
        onValueChange={isLiveItem ? null : playerSeekTo}
        showFlags={(!clipFlagPositions || clipFlagPositions.length === 0) && chapterFlagPositions?.length > 1}
        startVal={0}
      />
      {!labelsBelow && endTimeElement}
      {labelsBelow && (
        <div className='player-bar-labels-below'>
          {currentTimeElement}
          {endTimeElement}
        </div>
      )}
    </div>
  )
}<commit_msg>Update ProgressBar.tsx<commit_after>import classNames from 'classnames'
import { useTranslation } from 'next-i18next'
import { useOmniAural } from 'omniaural'
import { Slider } from '~/components/Slider/Slider'
import { convertSecToHHMMSS } from '~/lib/utility/time'
import { playerResetLiveItemAndResumePlayback, playerSeekTo } from '~/services/player/player'
import { OmniAuralState } from '~/state/omniauralState'

type Props = {
  chapterFlagPositions?: number[]
  clipFlagPositions: number[]
  highlightedPositions: number[]
  labelsBelow?: boolean
}

export const ProgressBar = ({
  chapterFlagPositions = [],
  clipFlagPositions = [],
  highlightedPositions = [],
  labelsBelow
}: Props) => {
  const { t } = useTranslation()
  const [player] = useOmniAural('player') as [OmniAuralState['player']]
  const { currentNowPlayingItem, duration, isAtCurrentLiveStreamTime, playbackPosition } = player
  const isLiveItem = !!currentNowPlayingItem?.liveItem

  const currentTimeLabel = convertSecToHHMMSS(playbackPosition)
  const endTimeTextLabel = convertSecToHHMMSS(duration, isLiveItem, t)
  const endTimeLabel = isAtCurrentLiveStreamTime ? `${endTimeTextLabel} ●` : endTimeTextLabel

  const barContainer = classNames('player-bar-container', labelsBelow ? 'has-labels-below' : '')
  const bar = classNames('player-bar')
  const currentTimeBarLabel = classNames('player-bar-label current-time')
  const endTimeBarLabel = classNames(
    'player-bar-label end-time',
    isLiveItem ? 'is-live-item' : '',
    isAtCurrentLiveStreamTime ? 'is-at-current-live-position' : ''
  )

  const flagPositions = clipFlagPositions.length > 0 ? clipFlagPositions : chapterFlagPositions

  const currentTimeElement = (
    <div aria-description={t('Current time')} className={currentTimeBarLabel} tabIndex={0}>
      {currentTimeLabel}
    </div>
  )
  const endTimeAriaDescription = isLiveItem ? t('Go to current live time') : t('Duration')
  const endTimeAriaRole = isLiveItem ? 'button' : 'none'
  const endTimeOnClick = isLiveItem ? playerResetLiveItemAndResumePlayback : null
  const endTimeElement = isLiveItem ? (
    <button
      aria-description={endTimeAriaDescription}
      // aria-role={endTimeAriaRole}
      className={endTimeBarLabel}
      onClick={endTimeOnClick}
      tabIndex={0}
    >
      {endTimeLabel}
    </button>
  ) : (
    <div
      aria-description={endTimeAriaDescription}
      // aria-role={endTimeAriaRole}
      className={endTimeBarLabel}
      tabIndex={0}>
      {endTimeLabel}
    </div>
  )

  return (
    <div className={barContainer}>
      {!labelsBelow && currentTimeElement}
      <Slider
        ariaHidden
        ariaLabel={t('Player progress bar')}
        className={bar}
        currentValue={isLiveItem ? 0 : playbackPosition}
        endVal={duration}
        flagPositions={flagPositions}
        highlightedPositions={highlightedPositions}
        onValueChange={isLiveItem ? null : playerSeekTo}
        showFlags={(!clipFlagPositions || clipFlagPositions.length === 0) && chapterFlagPositions?.length > 1}
        startVal={0}
      />
      {!labelsBelow && endTimeElement}
      {labelsBelow && (
        <div className='player-bar-labels-below'>
          {currentTimeElement}
          {endTimeElement}
        </div>
      )}
    </div>
  )
}
{'fraction_non_alphanumeric': 0.1172792435565045, 'fraction_numerical': 0.0030501753850846426, 'mean_word_length': 3.971948445792267, 'pattern_counts': {'":': 0, '<': 25, '<?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': '3392581', 'n_tokens_mistral': 2004, 'n_tokens_neox': 1968, 'n_words': 373}