Package Exports

@netless/react-seek-slider

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@netless/react-seek-slider) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

@netless/seek-slider

a seek slider

1. 说明

本项目技术选型为：React Typescript 打包工具为： rollup

2. 安装

npm install --save @netless/seek-slider

或者

yarn add @netless/seek-slider

3. 接口说明

参数	说明	类型	默认值
fullTime	总时长	number
currentTime	目前时间	number
onChange	变化回调	(time: number, offsetTime: number) => void
offset	起始时间	number	0
bufferProgress?	buffer 进度	number
hideHoverTime?	是否开启 hover 显示时间功能	boolen	false
secondsPrefix?	秒的显示	string	"00:"
minutesPrefix?	分的显示	string	"00:"
limitTimeTooltipBySides?	三方按钮插入的位置	boolean
sliderColor?	进度条颜色	string
sliderHoverColor?	hover 显示的进度条颜色	string
thumbColor?	thumb 颜色	string
bufferColor?	buffer 的颜色	string

4. 使用概览

import * as React from "react";
import ToolBox from "@netless/react-tool-box";

export default class ToolBoxExample extends React.Component<{}, {}> 
  render () {
    return (
      <SeekSlider
          // 全部时间
         fullTime={player.timeDuration}
          // 目前时间
         currentTime={this.getCurrentTime(this.state.currentTime)}
          // 时间变化的回调
         onChange={(time: number, offsetTime: number) => {
             if (this.state.player) {
                 this.setState({currentTime: time});
                this.state.player.seekToScheduleTime(time);
             }
         }}
         // hover 显示时间
         hideHoverTime={true}
         limitTimeTooltipBySides={true}
        />
    )
  }
}

5. 启动项目

获取源码

git clone git@github.com:netless-io/netless-react-seek-slider.git

进入项目并安装库文件依赖
```
cd netless-react-seek-slider
yarn
```
启动库文件项目
```
    yarn start
```
进入项目并安装 example 文件依赖
```
    cd example
    yarn
```
启动 example 项目
```
    yarn start
```

6. 项目截图

slider

@netless/react-seek-slider