react-av-timeline 1.2.0 → 1.2.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +70 -1
- package/dist/Vertical.d.ts +3 -0
- package/dist/utils.d.ts +9 -0
- package/image/vertical.png +0 -0
- package/package.json +1 -1
package/README.md
CHANGED
|
@@ -36,8 +36,35 @@ import 'react-av-timeline/dist/index.css';
|
|
|
36
36
|
````
|
|
37
37
|
|
|
38
38
|
效果如图
|
|
39
|
+
|
|
39
40
|
|
|
40
41
|
|
|
42
|
+
## 垂直时间线
|
|
43
|
+
适合类似导播台自动化等序列化的场景，将时间线垂直展示
|
|
44
|
+
|
|
45
|
+
|
|
46
|
+
|
|
47
|
+
````jsx
|
|
48
|
+
// 注意，引入方式不一样，非default导出
|
|
49
|
+
import { Vertical } from 'react-av-timeline';
|
|
50
|
+
import 'react-av-timeline/dist/index.css'
|
|
51
|
+
````
|
|
52
|
+
|
|
53
|
+
基本参数与普通时间线一致，请参考[API](#API)
|
|
54
|
+
|
|
55
|
+
````jsx
|
|
56
|
+
<Vertical height={190} left={20} items={[{
|
|
57
|
+
time:1,
|
|
58
|
+
content:'这是第一秒展示的内容',
|
|
59
|
+
style:{
|
|
60
|
+
background: "#EAEAAD"
|
|
61
|
+
}
|
|
62
|
+
},{
|
|
63
|
+
time:69,
|
|
64
|
+
content:'这是第69秒展示的内容'
|
|
65
|
+
}]} currentTime={currentTime} scale={10} totalTime={100} />
|
|
66
|
+
````
|
|
67
|
+
|
|
41
68
|
# 应用
|
|
42
69
|
|
|
43
70
|
可以结合audio或video，通过监听timeupdate事件，实时更新currentTime，实现同步播放
|
|
@@ -46,4 +73,46 @@ import 'react-av-timeline/dist/index.css';
|
|
|
46
73
|
|
|
47
74
|
# API
|
|
48
75
|
|
|
49
|
-
|
|
76
|
+
## 通用
|
|
77
|
+
|
|
78
|
+
### 基本参数
|
|
79
|
+
````typescript
|
|
80
|
+
interface PropsType {
|
|
81
|
+
/**时间轴 */
|
|
82
|
+
items: itemsType[],
|
|
83
|
+
/**时间轴样式 */
|
|
84
|
+
itemStyle?: CSSProperties,
|
|
85
|
+
/**当前时间点 */
|
|
86
|
+
currentTime: number,
|
|
87
|
+
/**总时长 */
|
|
88
|
+
totalTime: number,
|
|
89
|
+
/**缩放比例 */
|
|
90
|
+
scale?: number,
|
|
91
|
+
/**时间轴指示器属性 */
|
|
92
|
+
indicator?: HTMLAttributes<HTMLDivElement>
|
|
93
|
+
}
|
|
94
|
+
````
|
|
95
|
+
|
|
96
|
+
### itemsType
|
|
97
|
+
````typescript
|
|
98
|
+
interface itemsType {
|
|
99
|
+
/**时间点 */
|
|
100
|
+
time: number,
|
|
101
|
+
/**该点对应的样式 */
|
|
102
|
+
style?: CSSProperties,
|
|
103
|
+
/**该点对应的文字 */
|
|
104
|
+
content?: ReactNode
|
|
105
|
+
}
|
|
106
|
+
````
|
|
107
|
+
|
|
108
|
+
## 垂直时间线
|
|
109
|
+
````typescript
|
|
110
|
+
PropsType & {
|
|
111
|
+
/**保留前几个项目 */
|
|
112
|
+
prev?: number
|
|
113
|
+
/**距离左边距 */
|
|
114
|
+
left?: number,
|
|
115
|
+
/**总高度 */
|
|
116
|
+
height?: CSSProperties['height']
|
|
117
|
+
}
|
|
118
|
+
````
|
package/dist/Vertical.d.ts
CHANGED
|
@@ -1,7 +1,10 @@
|
|
|
1
1
|
import { CSSProperties } from 'react';
|
|
2
2
|
import { PropsType } from './utils';
|
|
3
3
|
export default function Component({ items, currentTime, totalTime, scale, indicator, itemStyle, prev, height, left }: PropsType & {
|
|
4
|
+
/**保留前几个项目 */
|
|
4
5
|
prev?: number;
|
|
6
|
+
/**距离左边距 */
|
|
5
7
|
left?: number;
|
|
8
|
+
/**总高度 */
|
|
6
9
|
height?: CSSProperties['height'];
|
|
7
10
|
}): import("react/jsx-runtime").JSX.Element;
|
package/dist/utils.d.ts
CHANGED
|
@@ -4,15 +4,24 @@ export declare function getDuration(timeline: number[], i: number): number;
|
|
|
4
4
|
export declare function getPrevElement<T>(item: T[], i: number, number?: number): T;
|
|
5
5
|
export declare function getNextElement<T>(item: T[], i: number, number?: number): T;
|
|
6
6
|
export interface PropsType {
|
|
7
|
+
/**时间轴 */
|
|
7
8
|
items: itemsType[];
|
|
9
|
+
/**时间轴样式 */
|
|
8
10
|
itemStyle?: CSSProperties;
|
|
11
|
+
/**当前时间点 */
|
|
9
12
|
currentTime: number;
|
|
13
|
+
/**总时长 */
|
|
10
14
|
totalTime: number;
|
|
15
|
+
/**缩放比例 */
|
|
11
16
|
scale?: number;
|
|
17
|
+
/**时间轴指示器属性 */
|
|
12
18
|
indicator?: HTMLAttributes<HTMLDivElement>;
|
|
13
19
|
}
|
|
14
20
|
export interface itemsType {
|
|
21
|
+
/**时间点 */
|
|
15
22
|
time: number;
|
|
23
|
+
/**该点对应的样式 */
|
|
16
24
|
style?: CSSProperties;
|
|
25
|
+
/**该点对应的文字 */
|
|
17
26
|
content?: ReactNode;
|
|
18
27
|
}
|
|
Binary file
|