@twick/live-player 0.14.2 → 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 (7) hide show
  1. package/README.md +92 -72
  2. package/dist/index.d.ts +3 -0
  3. package/dist/index.js +4 -0
  4. package/dist/index.js.map +1 -1
  5. package/dist/index.mjs +4 -0
  6. package/dist/index.mjs.map +1 -1
  7. package/package.json +6 -6
package/README.md CHANGED
@@ -1,15 +1,21 @@
1
1
  # @twick/live-player
2
2
 
3
- A React component for video playback and control
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.
4
8
 
5
9
  ## Features
6
10
 
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
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
13
19
 
14
20
  ## Requirements
15
21
 
@@ -20,9 +26,11 @@ A React component for video playback and control
20
26
 
21
27
  ```bash
22
28
  npm install @twick/live-player
29
+ # or
30
+ pnpm add @twick/live-player
23
31
  ```
24
32
 
25
- ## Usage
33
+ ## Quick Start
26
34
 
27
35
  ```tsx
28
36
  import React, { useState } from "react";
@@ -48,76 +56,76 @@ function VideoPlayerComp() {
48
56
  }
49
57
 
50
58
  export default VideoPlayerComp;
51
-
52
59
  ```
53
60
 
61
+ ## Project Data Structure
54
62
 
55
-
56
- ## Sample Project data
57
- ```
63
+ ```json
58
64
  {
59
- "input": {
60
- "properties": {
61
- "width": 720,
62
- "height": 1280
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"
63
88
  },
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
- }
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"
79
102
  }
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
- }
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
111
116
  }
112
- ],
113
- "name": "element"
114
- }
115
- ]
116
- },
117
- "version": 1
118
- }
117
+ }
118
+ ],
119
+ "name": "element"
120
+ }
121
+ ]
122
+ },
123
+ "version": 1
124
+ }
119
125
  ```
120
126
 
127
+ ## API Reference
128
+
121
129
  ### Required Props
122
130
 
123
131
  - `projectData`: Object containing video project configuration
@@ -135,8 +143,6 @@ export default VideoPlayerComp;
135
143
  - `onDurationChange`: Callback function when video duration changes
136
144
  - `onTimeUpdate`: Callback function for time updates during playback
137
145
 
138
- ## Exports
139
-
140
146
  ### Components
141
147
 
142
148
  - `LivePlayer`: Main video player component
@@ -147,12 +153,26 @@ export default VideoPlayerComp;
147
153
  - `VideoSize`: Interface for video dimensions
148
154
  - `ProjectData`: Interface for video project configuration
149
155
 
156
+ For complete API documentation, refer to the generated documentation.
157
+
150
158
  ## Browser Support
151
159
 
152
160
  This library requires a browser environment with support for:
153
161
  - HTML5 Video
154
162
  - Modern JavaScript features (ES2020+)
155
163
 
164
+ ## Documentation
165
+
166
+ For complete documentation, refer to the project documentation site.
167
+
156
168
  ## License
157
169
 
158
- Apache-2.0
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 }
package/dist/index.js CHANGED
@@ -3,8 +3,11 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const jsxRuntime = require("react/jsx-runtime");
4
4
  const react = require("react");
5
5
  const PLAYER_STATE = {
6
+ /** Player is refreshing/reloading content */
6
7
  REFRESH: "Refresh",
8
+ /** Player is actively playing content */
7
9
  PLAYING: "Playing",
10
+ /** Player is paused */
8
11
  PAUSED: "Paused"
9
12
  };
10
13
  const getBaseProject = (videoSize, playerId) => {
@@ -22646,6 +22649,7 @@ const useLivePlayerContext = () => {
22646
22649
  exports.LivePlayer = LivePlayer;
22647
22650
  exports.LivePlayerProvider = LivePlayerProvider;
22648
22651
  exports.PLAYER_STATE = PLAYER_STATE;
22652
+ exports.generateId = generateId;
22649
22653
  exports.getBaseProject = getBaseProject;
22650
22654
  exports.useLivePlayerContext = useLivePlayerContext;
22651
22655
  //# sourceMappingURL=index.js.map