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