taleem-player 0.7.1-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.
- package/README.md +55 -154
- 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
|
-
|
|
8
|
+
**Taleem Player** converts **JSON slide data** into **web-based presentations**.
|
|
6
9
|
|
|
7
|
-
|
|
10
|
+
It renders the *same JSON* in multiple ways using different display modes.
|
|
8
11
|
|
|
9
|
-
|
|
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
|
|
16
|
+
## Demo & Documentation
|
|
15
17
|
|
|
16
18
|
👉 https://bilza2023.github.io/taleem/
|
|
17
19
|
|
|
18
|
-
|
|
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
|
-
|
|
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
|
-
###
|
|
41
|
+
### Browser Mode (Index-based)
|
|
52
42
|
|
|
53
|
-
**
|
|
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);
|
|
73
|
-
browser.getTotal();
|
|
53
|
+
browser.render(0);
|
|
54
|
+
browser.getTotal();
|
|
74
55
|
```
|
|
75
56
|
|
|
76
|
-
|
|
57
|
+
**Ideal for**
|
|
77
58
|
|
|
78
|
-
*
|
|
79
|
-
*
|
|
80
|
-
*
|
|
81
|
-
*
|
|
59
|
+
* previews
|
|
60
|
+
* galleries
|
|
61
|
+
* editors
|
|
62
|
+
* syllabus pages
|
|
82
63
|
|
|
83
64
|
---
|
|
84
65
|
|
|
85
|
-
###
|
|
66
|
+
### Player Mode (Time-based)
|
|
86
67
|
|
|
87
|
-
**
|
|
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
|
-
|
|
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
|
-
|
|
148
|
-
|
|
149
|
-
|
|
79
|
+
* narrated lessons
|
|
80
|
+
* video / audio sync
|
|
81
|
+
* recorded presentations
|
|
150
82
|
|
|
151
83
|
---
|
|
152
84
|
|
|
153
|
-
##
|
|
154
|
-
|
|
155
|
-
Taleem Player includes small helper utilities for preparing decks.
|
|
156
|
-
|
|
157
|
-
### assignMockTimings
|
|
85
|
+
## Browser vs Player (Quick Comparison)
|
|
158
86
|
|
|
159
|
-
|
|
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
|
-
|
|
162
|
-
|
|
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
|
-
|
|
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
|
-
|
|
182
|
-
|
|
183
|
-
Normalize and resolve background configuration.
|
|
106
|
+
* `assignMockTimings(deck, seconds)`
|
|
107
|
+
* `resolveAssetPaths(deck, basePath)`
|
|
108
|
+
* `resolveBackground(deck, basePath)`
|
|
184
109
|
|
|
185
|
-
|
|
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
|
|
212
|
-
|
|
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
|
-
*
|
|
232
|
-
*
|
|
233
|
-
*
|
|
234
|
-
* provide UI controls
|
|
132
|
+
* manage playback or time
|
|
133
|
+
* handle audio / narration
|
|
134
|
+
* validate automatically
|
|
235
135
|
|
|
236
|
-
Those belong to the **application
|
|
136
|
+
Those belong to the **application layer**.
|
|
237
137
|
|
|
238
138
|
---
|
|
239
139
|
|
|
240
140
|
## Status
|
|
241
141
|
|
|
242
|
-
**Release Candidate
|
|
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.
|
|
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",
|