反应媒体播放器细分

Question

我需要升级React Media Player https://github.com/souporserious/react-media-player 目前，我在视频进度条上有一些要点，但是我需要将这些要点与色彩鲜艳的片段连接起来。这是点和线段的对象

const pointsObj = [
  {
    color: "red",
    position: "10000",
    lineColor: "yellow"
  },

  {
    color: "green",
    position: "30000",
    lineColor: "blue"
  },

  {
    color: "blue",
    position: "60000",
    lineColor: "red"
  },
  {
    color: "cyan",
    position: "110000",
    lineColor: "green"
  },
];

这是将这些点放在进度条上特定位置的方法

getPointsElements = () => {

  let data = [];
    const duration = this.props.media.duration;
    // console.log(duration);
    // get scale ratio
    const ratio = duration / 100;
    // console.log(ratio);

    // process of converting seconds to %
    for (let i = 0; i < JsonParsedObj.length; i++) { //points.length;
      //console.log(JsonParsedObj[i]);
      data[i] = JsonParsedObj[i];
      //console.log(data);
    }
    //console.log('data',data);

    return data.map((item, i) => {
      // console.log('item: ',item);
      let display = 'block';

      let left = null;
      let position = (item.position / 1000) * ratio;
      //console.log(position);
      // check if low duration or position of point is bigger than duration of media
      if (duration >= 1) {
        if (position <= 100) {
          left = position  + '%';
        } else {
          // if outside if bar then hide element
          display = 'none';
        }
      } else {
        display = 'none';
      }

      //console.log(left);
      //create style for point
      let stylePoint = {
        height: '9px',
        width: '9px',
        backgroundColor: item.color,
        display: display,
        position: 'absolute',
        cursor: 'pointer',
        borderRadius: '25px',
        marginTop: '-2px',
        marginLeft: '-2px',
        //zIndex: '15',
        left: left,
      };

      return (
        <span key={i} style={stylePoint} onClick={this.handleClick}></span>
      )


    })
  };

我需要添加什么才能使进度条上的点之间形成彩色的片段。它们必须从pointsObj中命名为lineColor