@bilingo/video-player/src/components/Speed/Speed.js

A video player for ReactJs

import React from 'react';
import styles from './Speed.css';
import SpeedIcon from '../Icon/speed.svg';

export default ({
  playbackrates,
  onClick,
  onItemClick,
  className,
  ariaLabel,
}) => {
  // console.log('speed')
  return (
    <div className={[styles.component, className].join(' ')}>
      <button
        type="button"
        onClick={onClick}
        aria-label={ariaLabel}
        className={styles.button}
      >
        <SpeedIcon className={styles.icon} fill="#fff" />
      </button>
      <ul className={styles.speedList}>
        {playbackrates &&
          playbackrates.map(rate => (
            <li
              key={rate.id}
              className={
                rate.mode === 'showing'
                  ? styles.activeSpeedItem
                  : styles.speedItem
              }
              onClick={onItemClick.bind(this, rate)}
            >
              {rate.name}
            </li>
          ))}
      </ul>
    </div>
  );
};