@twick/live-player 0.14.0 → 0.14.3

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.
Files changed (8) hide show
  1. package/README.md +178 -158
  2. package/dist/index.d.ts +3 -0
  3. package/dist/index.js +1626 -1589
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +1626 -1589
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +13 -13
  8. package/LICENSE +0 -197
package/README.md CHANGED
@@ -1,158 +1,178 @@
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
- Apache-2.0
1
+ # @twick/live-player
2
+
3
+ A React component for video playback and control with advanced timeline support.
4
+
5
+ ## Overview
6
+
7
+ This package provides a powerful video player component that supports complex timeline-based video playback, custom controls, and real-time rendering of video projects with multiple tracks and elements.
8
+
9
+ ## Features
10
+
11
+ - Video playback with custom controls
12
+ - Time tracking and duration management
13
+ - Project data support for complex video configurations
14
+ - Customizable video dimensions
15
+ - Play/pause state management
16
+ - High-performance video rendering
17
+ - Timeline-based element rendering
18
+ - Real-time project updates
19
+
20
+ ## Requirements
21
+
22
+ - React 18 or higher
23
+ - Browser environment with HTML5 Video support
24
+
25
+ ## Installation
26
+
27
+ ```bash
28
+ npm install @twick/live-player
29
+ # or
30
+ pnpm add @twick/live-player
31
+ ```
32
+
33
+ ## Quick Start
34
+
35
+ ```tsx
36
+ import React, { useState } from "react";
37
+ import projectData from "./sample";
38
+ import { LivePlayer } from "@twick/live-player";
39
+
40
+ function VideoPlayerComp() {
41
+ const [playing, setPlaying] = useState(false);
42
+
43
+ return (
44
+ <div>
45
+ <button onClick={() => setPlaying((prev) => !prev)}>Toggle playback</button>
46
+ <LivePlayer
47
+ projectData={projectData} // Your video project configuration
48
+ videoSize={{
49
+ width: 720,
50
+ height: 1280,
51
+ }}
52
+ playing={playing}
53
+ />
54
+ </div>
55
+ );
56
+ }
57
+
58
+ export default VideoPlayerComp;
59
+ ```
60
+
61
+ ## Project Data Structure
62
+
63
+ ```json
64
+ {
65
+ "input": {
66
+ "properties": {
67
+ "width": 720,
68
+ "height": 1280
69
+ },
70
+ "timeline": [
71
+ {
72
+ "id": "t-element",
73
+ "type": "element",
74
+ "elements": [
75
+ {
76
+ "id": "e-244f8d5a3baa",
77
+ "type": "rect",
78
+ "s": 0,
79
+ "e": 5,
80
+ "props": {
81
+ "width": 720,
82
+ "height": 1280,
83
+ "fill": "#FFF000"
84
+ }
85
+ }
86
+ ],
87
+ "name": "element"
88
+ },
89
+ {
90
+ "id": "t-element",
91
+ "type": "element",
92
+ "elements": [
93
+ {
94
+ "id": "e-244f8d5a3bba",
95
+ "type": "text",
96
+ "s": 0,
97
+ "e": 1,
98
+ "props": {
99
+ "text": "Hello Guys!",
100
+ "fontSize": 100,
101
+ "fill": "#FF0000"
102
+ }
103
+ },
104
+ {
105
+ "id": "e-244f8d5a3bbb",
106
+ "type": "text",
107
+ "s": 1,
108
+ "e": 4,
109
+ "props": {
110
+ "text": "Welcome to the world of Twick!",
111
+ "fontSize": 100,
112
+ "fill": "#FF0000",
113
+ "maxWidth": 500,
114
+ "textAlign": "center",
115
+ "textWrap": true
116
+ }
117
+ }
118
+ ],
119
+ "name": "element"
120
+ }
121
+ ]
122
+ },
123
+ "version": 1
124
+ }
125
+ ```
126
+
127
+ ## API Reference
128
+
129
+ ### Required Props
130
+
131
+ - `projectData`: Object containing video project configuration
132
+ - `videoSize`: Object specifying video dimensions
133
+ ```typescript
134
+ {
135
+ width: number;
136
+ height: number;
137
+ }
138
+ ```
139
+
140
+ ### Optional Props
141
+
142
+ - `playing`: Boolean to control play/pause state
143
+ - `onDurationChange`: Callback function when video duration changes
144
+ - `onTimeUpdate`: Callback function for time updates during playback
145
+
146
+ ### Components
147
+
148
+ - `LivePlayer`: Main video player component
149
+
150
+ ### Types
151
+
152
+ - `LivePlayerProps`: Props interface for LivePlayer component
153
+ - `VideoSize`: Interface for video dimensions
154
+ - `ProjectData`: Interface for video project configuration
155
+
156
+ For complete API documentation, refer to the generated documentation.
157
+
158
+ ## Browser Support
159
+
160
+ This library requires a browser environment with support for:
161
+ - HTML5 Video
162
+ - Modern JavaScript features (ES2020+)
163
+
164
+ ## Documentation
165
+
166
+ For complete documentation, refer to the project documentation site.
167
+
168
+ ## License
169
+
170
+ This package is licensed under the **Sustainable Use License (SUL) Version 1.0**.
171
+
172
+ - Free for use in commercial and non-commercial apps
173
+ - Can be modified and self-hosted
174
+ - Cannot be sold, rebranded, or distributed as a standalone SDK
175
+
176
+ For commercial licensing inquiries, contact: contact@kifferai.com
177
+
178
+ For full license terms, see the main LICENSE.md file in the project root.
package/dist/index.d.ts CHANGED
@@ -1,9 +1,12 @@
1
+ import { generateId } from './helpers/player.utils';
1
2
  import { getBaseProject } from './helpers/player.utils';
2
3
  import { LivePlayer } from './components/live-player';
3
4
  import { LivePlayerProvider } from './context/live-player-context';
4
5
  import { PLAYER_STATE } from './helpers/constants';
5
6
  import { useLivePlayerContext } from './context/live-player-context';
6
7
 
8
+ export { generateId }
9
+
7
10
  export { getBaseProject }
8
11
 
9
12
  export { LivePlayer }