视频播放器仓库

Captions.js 1.2KB

123456789101112131415161718192021222324252627282930313233343536
  1. import React from 'react';
  2. import styles from './Captions.css';
  3. import ClosedCaptionIcon from './../Icon/caption_new.svg';
  4. export default ({ textTracks, onClick, onItemClick, className, ariaLabel }) => {
  5. console.log('caption')
  6. return (
  7. <div className={[
  8. styles.component,
  9. className
  10. ].join(' ')}>
  11. <button
  12. type="button"
  13. onClick={onClick}
  14. aria-label={ariaLabel}
  15. className={styles.button}>
  16. <ClosedCaptionIcon
  17. className={styles.icon}
  18. fill="#fff" />
  19. </button>
  20. <ul className={styles.trackList}>
  21. { textTracks && [...textTracks].map((track) => (
  22. <li
  23. key={track.language}
  24. className={track.mode === track.SHOWING || track.mode == 'showing'
  25. ? styles.activeTrackItem
  26. : styles.trackItem}
  27. onClick={onItemClick.bind(this, track)}>
  28. { track.label }
  29. </li>
  30. ))}
  31. </ul>
  32. </div>
  33. );
  34. };