taleem-player 0.7.1-rc → 0.7.3-rc

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 (2) hide show
  1. package/README.md +55 -154
  2. package/package.json +8 -1
package/README.md CHANGED
@@ -1,40 +1,30 @@
1
1
 
2
2
  # Taleem Player
3
3
 
4
+ <img src="./docs/images/taleem.webp"
5
+ alt="Taleem Player — JSON to Web Presentations"
6
+ width="100%" />
4
7
 
5
- <img src="./docs/images/taleem.webp" alt="Taleem Player JSON to Web Presentations" />
8
+ **Taleem Player** converts **JSON slide data** into **web-based presentations**.
6
9
 
7
- **Taleem Player** is a JavaScript library that converts **JSON slide data** into **web-based presentations**.
10
+ It renders the *same JSON* in multiple ways using different display modes.
8
11
 
9
- It provides multiple **modes** to display the same JSON presentation in different ways on the web.
12
+ > ⚠️ Work in progress expect minor bugs, **no API breakages**.
10
13
 
11
- ###### Work in progress. Expect minor bugs, but no API breakages.
12
14
  ---
13
15
 
14
- Demo and Documentation - See Taleem Player in action:
16
+ ## Demo & Documentation
15
17
 
16
18
  👉 https://bilza2023.github.io/taleem/
17
19
 
18
- This live demo lets you explore:
20
+ The live demo shows:
21
+ - Browser Mode (index-based rendering)
22
+ - Player Mode (time-based rendering)
23
+ - Real production Taleem JSON
24
+ - Shared CSS across all modes
19
25
 
20
- - Browser Mode instant, index-based slide rendering
21
-
22
- - Player Mode — time-driven, progressive presentations
23
-
24
- - Real Taleem slide JSON used in production
25
-
26
- - Shared CSS system powering all display modes
27
-
28
- **No screenshots. No mock data.What you see is the real engine running in the browser.**
29
- ---
30
-
31
- ## What it does
32
-
33
- * Takes **Taleem slide JSON**
34
- * Renders it as a **web presentation**
35
- * Supports **multiple display modes**
36
- * Ships **ready-to-use CSS**
37
- * Includes **utilities** for real-world usage
26
+ **No screenshots. No mock data.
27
+ What you see is the real engine running in the browser.**
38
28
 
39
29
  ---
40
30
 
@@ -42,24 +32,15 @@ This live demo lets you explore:
42
32
 
43
33
  ```bash
44
34
  npm install taleem-player
45
- ```
35
+ ````
46
36
 
47
37
  ---
48
38
 
49
39
  ## Display Modes
50
40
 
51
- ### 1. Browser Mode
41
+ ### Browser Mode (Index-based)
52
42
 
53
- **Index-based slide viewer**.
54
-
55
- Use this when you want:
56
-
57
- * manual navigation
58
- * previews
59
- * galleries
60
- * syllabus / editor views
61
-
62
- #### API
43
+ Use when you want **direct access to slides**.
63
44
 
64
45
  ```js
65
46
  import { createTaleemBrowser } from "taleem-player";
@@ -69,158 +50,78 @@ const browser = createTaleemBrowser({
69
50
  deck
70
51
  });
71
52
 
72
- browser.render(0); // render slide by index
73
- browser.getTotal(); // total number of slides
53
+ browser.render(0);
54
+ browser.getTotal();
74
55
  ```
75
56
 
76
- Characteristics:
57
+ **Ideal for**
77
58
 
78
- * slide index driven
79
- * no timing
80
- * deterministic rendering
81
- * same slide JSON as other modes
59
+ * previews
60
+ * galleries
61
+ * editors
62
+ * syllabus pages
82
63
 
83
64
  ---
84
65
 
85
- ### 2. Player Mode
66
+ ### Player Mode (Time-based)
86
67
 
87
- **Time-based slide player**.
88
-
89
- Use this when you want:
90
-
91
- * narrated lessons
92
- * video / audio sync
93
- * timed presentations
94
-
95
- #### API
68
+ Use when slides must change **progressively over time**.
96
69
 
97
70
  ```js
98
71
  import { createTaleemPlayer } from "taleem-player";
99
72
 
100
- const player = createTaleemPlayer({
101
- mount: "#app",
102
- });
103
-
104
- player.renderAt(12.5); // render slide at time (seconds)
105
- player.destroy();
73
+ const player = createTaleemPlayer({ mount: "#app" });
74
+ player.renderAt(12.5);
106
75
  ```
107
76
 
108
- Characteristics:
109
-
110
- * time driven
111
- * external clock control
112
- * no play / pause logic
113
- * one active slide at a time
114
-
115
- ---
116
- ## Browser Mode vs Player Mode
117
-
118
- Both modes render the same JSON presentation, but they serve very different purposes.
119
-
120
- | Feature | Browser Mode | Player Mode |
121
- |-------|-------------|-------------|
122
- | Rendering model | Index-based | Time-based |
123
- | Navigation | Manual (by slide index) | Progressive (by time) |
124
- | Timing required | No | Yes (required) |
125
- | Rendering behavior | One slide at a time | Slides change over time |
126
- | Control source | Application-driven | External clock / media |
127
- | Best suited for | Previews, galleries, editors | Narration, video, audio sync |
128
-
129
- ---
130
-
131
- ### Browser Mode
132
-
133
- Use Browser Mode when you want direct access to slides.
134
-
135
- **Characteristics**
136
- - Index-based rendering
137
- - No timing data required
138
- - Deterministic output
139
-
140
77
  **Ideal for**
141
- - previews
142
- - galleries
143
- - editors
144
- - syllabus pages
145
-
146
78
 
147
- ⚠️ Important:
148
- In Player Mode, the user must provide valid and ordered timings (start, end).
149
- The library does not auto-fix or guess timings.
79
+ * narrated lessons
80
+ * video / audio sync
81
+ * recorded presentations
150
82
 
151
83
  ---
152
84
 
153
- ## Utilities
154
-
155
- Taleem Player includes small helper utilities for preparing decks.
156
-
157
- ### assignMockTimings
85
+ ## Browser vs Player (Quick Comparison)
158
86
 
159
- Convert a non-timed deck into a player-ready deck.
87
+ | Feature | Browser | Player |
88
+ | --------------- | -------------- | -------------- |
89
+ | Rendering | Index-based | Time-based |
90
+ | Timing required | No | Yes |
91
+ | Navigation | Manual | Progressive |
92
+ | Control | App-driven | External clock |
93
+ | Use case | Preview / Edit | Playback |
160
94
 
161
- ```js
162
- import { assignMockTimings } from "taleem-player";
163
-
164
- const timedDeck = assignMockTimings(deck, 5);
165
- ```
95
+ > ⚠️ Player Mode requires **valid, ordered timings**.
96
+ > The library does not auto-correct or guess timings.
166
97
 
167
98
  ---
168
99
 
169
- ### resolveAssetPaths
170
-
171
- Resolve image paths for deployment.
100
+ ## Utilities (Runtime-safe)
172
101
 
173
102
  ```js
174
- import { resolveAssetPaths } from "taleem-player";
175
-
176
- resolveAssetPaths(deck, "/images/");
103
+ import { assignMockTimings, resolveAssetPaths } from "taleem-player";
177
104
  ```
178
105
 
179
- ---
180
-
181
- ### resolveBackground
182
-
183
- Normalize and resolve background configuration.
106
+ * `assignMockTimings(deck, seconds)`
107
+ * `resolveAssetPaths(deck, basePath)`
108
+ * `resolveBackground(deck, basePath)`
184
109
 
185
- ```js
186
- import { resolveBackground } from "taleem-player";
187
-
188
- resolveBackground(deck, "/images/");
189
- ```
110
+ These helpers prepare decks for real usage.
190
111
 
191
112
  ---
192
113
 
193
114
  ## CSS
194
115
 
195
- Taleem Player ships with built-in styles.
196
-
197
- ### Base styles
198
-
199
116
  ```js
200
117
  import "taleem-player/css";
201
- ```
202
-
203
- ### Themes
204
-
205
- ```js
206
118
  import "taleem-player/css/dark";
207
119
  import "taleem-player/css/light";
208
120
  import "taleem-player/css/paper";
209
121
  ```
210
122
 
211
- CSS controls layout, visibility, and visual behavior.
212
- Modes share the same CSS.
213
-
214
- ---
215
-
216
- ## Input format
217
-
218
- Taleem Player does **not** define slide structure.
219
-
220
- It renders JSON produced for **taleem-slides**.
221
-
222
- * Player Mode requires slides with `start` / `end`
223
- * Browser Mode only needs ordered slides
123
+ CSS controls layout and visual behavior.
124
+ All modes share the same styling system.
224
125
 
225
126
  ---
226
127
 
@@ -228,21 +129,21 @@ It renders JSON produced for **taleem-slides**.
228
129
 
229
130
  * create slides
230
131
  * edit JSON
231
- * validate schemas
232
- * manage time or playback
233
- * handle audio or narration
234
- * provide UI controls
132
+ * manage playback or time
133
+ * handle audio / narration
134
+ * validate automatically
235
135
 
236
- Those belong to the **application**, not the library.
136
+ Those belong to the **application layer**.
237
137
 
238
138
  ---
239
139
 
240
140
  ## Status
241
141
 
242
- **Release Candidate (API stable)**
142
+ **Release Candidate API stable**
243
143
 
244
144
  ---
245
145
 
246
146
  ## License
247
147
 
248
148
  MIT
149
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "taleem-player",
3
- "version": "0.7.1-rc",
3
+ "version": "0.7.3-rc",
4
4
  "type": "module",
5
5
  "main": "./dist/taleem-player.umd.js",
6
6
  "module": "./dist/taleem-player.esm.js",
@@ -9,6 +9,13 @@
9
9
  "import": "./dist/taleem-player.esm.js",
10
10
  "require": "./dist/taleem-player.umd.js"
11
11
  },
12
+ "./validate": {
13
+ "import": "./dist/validation/validateDeckV1.js"
14
+ },
15
+
16
+ "./schema": {
17
+ "import": "./dist/validation/zodDeckV1.js"
18
+ },
12
19
  "./css": "./dist/css/taleem.css",
13
20
  "./css/dark": "./dist/css/themes/dark.css",
14
21
  "./css/light": "./dist/css/themes/light.css",