视频播放器仓库

Speed.js 1002B

123456789101112131415161718192021222324252627282930313233343536373839404142
  1. import React from "react";
  2. import styles from "./Speed.module.css";
  3. import { ReactComponent as SpeedIcon } from "../Icon/speed.svg";
  4. export default ({
  5. playbackrates,
  6. onClick,
  7. onItemClick,
  8. className,
  9. ariaLabel
  10. }) => {
  11. // console.log('speed')
  12. return (
  13. <div className={[styles.component, className].join(" ")}>
  14. <button
  15. type="button"
  16. onClick={onClick}
  17. aria-label={ariaLabel}
  18. className={styles.button}
  19. >
  20. <SpeedIcon className={styles.icon} fill="#fff" />
  21. </button>
  22. <ul className={styles.speedList}>
  23. {playbackrates &&
  24. playbackrates.map(rate => (
  25. <li
  26. key={rate.id}
  27. className={
  28. rate.mode === "showing"
  29. ? styles.activeSpeedItem
  30. : styles.speedItem
  31. }
  32. onClick={onItemClick.bind(this, rate)}
  33. >
  34. {rate.name}
  35. </li>
  36. ))}
  37. </ul>
  38. </div>
  39. );
  40. };