@twick/live-player 0.14.0 → 0.14.2
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 +157 -157
- package/dist/index.js +1622 -1589
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1622 -1589
- package/dist/index.mjs.map +1 -1
- package/package.json +12 -12
- package/LICENSE +0 -197
package/README.md
CHANGED
|
@@ -1,158 +1,158 @@
|
|
|
1
|
-
# @twick/live-player
|
|
2
|
-
|
|
3
|
-
A React component for video playback and control
|
|
4
|
-
|
|
5
|
-
## Features
|
|
6
|
-
|
|
7
|
-
- 🎥 Video playback with custom controls
|
|
8
|
-
- ⏱️ Time tracking and duration management
|
|
9
|
-
- 📊 Project data support for complex video configurations
|
|
10
|
-
- 🎯 Customizable video dimensions
|
|
11
|
-
- 🔄 Play/pause state management
|
|
12
|
-
- ⚡ High-performance video rendering
|
|
13
|
-
|
|
14
|
-
## Requirements
|
|
15
|
-
|
|
16
|
-
- React 18 or higher
|
|
17
|
-
- Browser environment with HTML5 Video support
|
|
18
|
-
|
|
19
|
-
## Installation
|
|
20
|
-
|
|
21
|
-
```bash
|
|
22
|
-
npm install @twick/live-player
|
|
23
|
-
```
|
|
24
|
-
|
|
25
|
-
## Usage
|
|
26
|
-
|
|
27
|
-
```tsx
|
|
28
|
-
import React, { useState } from "react";
|
|
29
|
-
import projectData from "./sample";
|
|
30
|
-
import { LivePlayer } from "@twick/live-player";
|
|
31
|
-
|
|
32
|
-
function VideoPlayerComp() {
|
|
33
|
-
const [playing, setPlaying] = useState(false);
|
|
34
|
-
|
|
35
|
-
return (
|
|
36
|
-
<div>
|
|
37
|
-
<button onClick={() => setPlaying((prev) => !prev)}>Toggle playback</button>
|
|
38
|
-
<LivePlayer
|
|
39
|
-
projectData={projectData} // Your video project configuration
|
|
40
|
-
videoSize={{
|
|
41
|
-
width: 720,
|
|
42
|
-
height: 1280,
|
|
43
|
-
}}
|
|
44
|
-
playing={playing}
|
|
45
|
-
/>
|
|
46
|
-
</div>
|
|
47
|
-
);
|
|
48
|
-
}
|
|
49
|
-
|
|
50
|
-
export default VideoPlayerComp;
|
|
51
|
-
|
|
52
|
-
```
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
## Sample Project data
|
|
57
|
-
```
|
|
58
|
-
{
|
|
59
|
-
"input": {
|
|
60
|
-
"properties": {
|
|
61
|
-
"width": 720,
|
|
62
|
-
"height": 1280
|
|
63
|
-
},
|
|
64
|
-
"timeline": [
|
|
65
|
-
{
|
|
66
|
-
"id": "t-element",
|
|
67
|
-
"type": "element",
|
|
68
|
-
"elements": [
|
|
69
|
-
{
|
|
70
|
-
"id": "e-244f8d5a3baa",
|
|
71
|
-
"type": "rect",
|
|
72
|
-
"s": 0,
|
|
73
|
-
"e": 5,
|
|
74
|
-
"props": {
|
|
75
|
-
"width": 720,
|
|
76
|
-
"height": 1280,
|
|
77
|
-
"fill": "#FFF000"
|
|
78
|
-
}
|
|
79
|
-
}
|
|
80
|
-
],
|
|
81
|
-
"name": "element"
|
|
82
|
-
},
|
|
83
|
-
{
|
|
84
|
-
"id": "t-element",
|
|
85
|
-
"type": "element",
|
|
86
|
-
"elements": [
|
|
87
|
-
{
|
|
88
|
-
"id": "e-244f8d5a3bba",
|
|
89
|
-
"type": "text",
|
|
90
|
-
"s": 0,
|
|
91
|
-
"e": 1,
|
|
92
|
-
"props": {
|
|
93
|
-
"text": "Hello Guys!",
|
|
94
|
-
"fontSize": 100,
|
|
95
|
-
"fill": "#FF0000"
|
|
96
|
-
}
|
|
97
|
-
},
|
|
98
|
-
{
|
|
99
|
-
"id": "e-244f8d5a3bbb",
|
|
100
|
-
"type": "text",
|
|
101
|
-
"s": 1,
|
|
102
|
-
"e": 4,
|
|
103
|
-
"props": {
|
|
104
|
-
"text": "Welcome to the world of Twick!",
|
|
105
|
-
"fontSize": 100,
|
|
106
|
-
"fill": "#FF0000",
|
|
107
|
-
"maxWidth": 500,
|
|
108
|
-
"textAlign": "center",
|
|
109
|
-
"textWrap": true
|
|
110
|
-
}
|
|
111
|
-
}
|
|
112
|
-
],
|
|
113
|
-
"name": "element"
|
|
114
|
-
}
|
|
115
|
-
]
|
|
116
|
-
},
|
|
117
|
-
"version": 1
|
|
118
|
-
}
|
|
119
|
-
```
|
|
120
|
-
|
|
121
|
-
### Required Props
|
|
122
|
-
|
|
123
|
-
- `projectData`: Object containing video project configuration
|
|
124
|
-
- `videoSize`: Object specifying video dimensions
|
|
125
|
-
```typescript
|
|
126
|
-
{
|
|
127
|
-
width: number;
|
|
128
|
-
height: number;
|
|
129
|
-
}
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
### Optional Props
|
|
133
|
-
|
|
134
|
-
- `playing`: Boolean to control play/pause state
|
|
135
|
-
- `onDurationChange`: Callback function when video duration changes
|
|
136
|
-
- `onTimeUpdate`: Callback function for time updates during playback
|
|
137
|
-
|
|
138
|
-
## Exports
|
|
139
|
-
|
|
140
|
-
### Components
|
|
141
|
-
|
|
142
|
-
- `LivePlayer`: Main video player component
|
|
143
|
-
|
|
144
|
-
### Types
|
|
145
|
-
|
|
146
|
-
- `LivePlayerProps`: Props interface for LivePlayer component
|
|
147
|
-
- `VideoSize`: Interface for video dimensions
|
|
148
|
-
- `ProjectData`: Interface for video project configuration
|
|
149
|
-
|
|
150
|
-
## Browser Support
|
|
151
|
-
|
|
152
|
-
This library requires a browser environment with support for:
|
|
153
|
-
- HTML5 Video
|
|
154
|
-
- Modern JavaScript features (ES2020+)
|
|
155
|
-
|
|
156
|
-
## License
|
|
157
|
-
|
|
1
|
+
# @twick/live-player
|
|
2
|
+
|
|
3
|
+
A React component for video playback and control
|
|
4
|
+
|
|
5
|
+
## Features
|
|
6
|
+
|
|
7
|
+
- 🎥 Video playback with custom controls
|
|
8
|
+
- ⏱️ Time tracking and duration management
|
|
9
|
+
- 📊 Project data support for complex video configurations
|
|
10
|
+
- 🎯 Customizable video dimensions
|
|
11
|
+
- 🔄 Play/pause state management
|
|
12
|
+
- ⚡ High-performance video rendering
|
|
13
|
+
|
|
14
|
+
## Requirements
|
|
15
|
+
|
|
16
|
+
- React 18 or higher
|
|
17
|
+
- Browser environment with HTML5 Video support
|
|
18
|
+
|
|
19
|
+
## Installation
|
|
20
|
+
|
|
21
|
+
```bash
|
|
22
|
+
npm install @twick/live-player
|
|
23
|
+
```
|
|
24
|
+
|
|
25
|
+
## Usage
|
|
26
|
+
|
|
27
|
+
```tsx
|
|
28
|
+
import React, { useState } from "react";
|
|
29
|
+
import projectData from "./sample";
|
|
30
|
+
import { LivePlayer } from "@twick/live-player";
|
|
31
|
+
|
|
32
|
+
function VideoPlayerComp() {
|
|
33
|
+
const [playing, setPlaying] = useState(false);
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<div>
|
|
37
|
+
<button onClick={() => setPlaying((prev) => !prev)}>Toggle playback</button>
|
|
38
|
+
<LivePlayer
|
|
39
|
+
projectData={projectData} // Your video project configuration
|
|
40
|
+
videoSize={{
|
|
41
|
+
width: 720,
|
|
42
|
+
height: 1280,
|
|
43
|
+
}}
|
|
44
|
+
playing={playing}
|
|
45
|
+
/>
|
|
46
|
+
</div>
|
|
47
|
+
);
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
export default VideoPlayerComp;
|
|
51
|
+
|
|
52
|
+
```
|
|
53
|
+
|
|
54
|
+
|
|
55
|
+
|
|
56
|
+
## Sample Project data
|
|
57
|
+
```
|
|
58
|
+
{
|
|
59
|
+
"input": {
|
|
60
|
+
"properties": {
|
|
61
|
+
"width": 720,
|
|
62
|
+
"height": 1280
|
|
63
|
+
},
|
|
64
|
+
"timeline": [
|
|
65
|
+
{
|
|
66
|
+
"id": "t-element",
|
|
67
|
+
"type": "element",
|
|
68
|
+
"elements": [
|
|
69
|
+
{
|
|
70
|
+
"id": "e-244f8d5a3baa",
|
|
71
|
+
"type": "rect",
|
|
72
|
+
"s": 0,
|
|
73
|
+
"e": 5,
|
|
74
|
+
"props": {
|
|
75
|
+
"width": 720,
|
|
76
|
+
"height": 1280,
|
|
77
|
+
"fill": "#FFF000"
|
|
78
|
+
}
|
|
79
|
+
}
|
|
80
|
+
],
|
|
81
|
+
"name": "element"
|
|
82
|
+
},
|
|
83
|
+
{
|
|
84
|
+
"id": "t-element",
|
|
85
|
+
"type": "element",
|
|
86
|
+
"elements": [
|
|
87
|
+
{
|
|
88
|
+
"id": "e-244f8d5a3bba",
|
|
89
|
+
"type": "text",
|
|
90
|
+
"s": 0,
|
|
91
|
+
"e": 1,
|
|
92
|
+
"props": {
|
|
93
|
+
"text": "Hello Guys!",
|
|
94
|
+
"fontSize": 100,
|
|
95
|
+
"fill": "#FF0000"
|
|
96
|
+
}
|
|
97
|
+
},
|
|
98
|
+
{
|
|
99
|
+
"id": "e-244f8d5a3bbb",
|
|
100
|
+
"type": "text",
|
|
101
|
+
"s": 1,
|
|
102
|
+
"e": 4,
|
|
103
|
+
"props": {
|
|
104
|
+
"text": "Welcome to the world of Twick!",
|
|
105
|
+
"fontSize": 100,
|
|
106
|
+
"fill": "#FF0000",
|
|
107
|
+
"maxWidth": 500,
|
|
108
|
+
"textAlign": "center",
|
|
109
|
+
"textWrap": true
|
|
110
|
+
}
|
|
111
|
+
}
|
|
112
|
+
],
|
|
113
|
+
"name": "element"
|
|
114
|
+
}
|
|
115
|
+
]
|
|
116
|
+
},
|
|
117
|
+
"version": 1
|
|
118
|
+
}
|
|
119
|
+
```
|
|
120
|
+
|
|
121
|
+
### Required Props
|
|
122
|
+
|
|
123
|
+
- `projectData`: Object containing video project configuration
|
|
124
|
+
- `videoSize`: Object specifying video dimensions
|
|
125
|
+
```typescript
|
|
126
|
+
{
|
|
127
|
+
width: number;
|
|
128
|
+
height: number;
|
|
129
|
+
}
|
|
130
|
+
```
|
|
131
|
+
|
|
132
|
+
### Optional Props
|
|
133
|
+
|
|
134
|
+
- `playing`: Boolean to control play/pause state
|
|
135
|
+
- `onDurationChange`: Callback function when video duration changes
|
|
136
|
+
- `onTimeUpdate`: Callback function for time updates during playback
|
|
137
|
+
|
|
138
|
+
## Exports
|
|
139
|
+
|
|
140
|
+
### Components
|
|
141
|
+
|
|
142
|
+
- `LivePlayer`: Main video player component
|
|
143
|
+
|
|
144
|
+
### Types
|
|
145
|
+
|
|
146
|
+
- `LivePlayerProps`: Props interface for LivePlayer component
|
|
147
|
+
- `VideoSize`: Interface for video dimensions
|
|
148
|
+
- `ProjectData`: Interface for video project configuration
|
|
149
|
+
|
|
150
|
+
## Browser Support
|
|
151
|
+
|
|
152
|
+
This library requires a browser environment with support for:
|
|
153
|
+
- HTML5 Video
|
|
154
|
+
- Modern JavaScript features (ES2020+)
|
|
155
|
+
|
|
156
|
+
## License
|
|
157
|
+
|
|
158
158
|
Apache-2.0
|