@thewhateverapp/tile-sdk 0.12.7 → 0.12.9
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.
|
@@ -35,9 +35,12 @@ export interface KeyboardState {
|
|
|
35
35
|
}
|
|
36
36
|
/**
|
|
37
37
|
* Visibility state from parent (for TikTok-style feeds where tiles are preloaded)
|
|
38
|
+
* Includes muted state for atomic updates to prevent race conditions
|
|
38
39
|
*/
|
|
39
40
|
export interface VisibilityState {
|
|
40
41
|
visible: boolean;
|
|
42
|
+
/** Whether audio should be muted (sent atomically with visibility to prevent race conditions) */
|
|
43
|
+
muted?: boolean;
|
|
41
44
|
}
|
|
42
45
|
type NextRouter = {
|
|
43
46
|
push: (href: string) => void;
|
|
@@ -103,6 +106,7 @@ export declare class TileBridge {
|
|
|
103
106
|
/**
|
|
104
107
|
* Handle visibility state message from parent (mobile app)
|
|
105
108
|
* Used for TikTok-style feeds where tiles are preloaded but not visible
|
|
109
|
+
* Now includes muted state for atomic updates to prevent race conditions
|
|
106
110
|
*/
|
|
107
111
|
private handleVisibility;
|
|
108
112
|
private sendToParent;
|
|
@@ -304,6 +308,12 @@ export declare class TileBridge {
|
|
|
304
308
|
* Returns true by default (for standalone tiles not in a feed)
|
|
305
309
|
*/
|
|
306
310
|
isVisible(): boolean;
|
|
311
|
+
/**
|
|
312
|
+
* Check if audio should be muted (based on visibility state from parent)
|
|
313
|
+
* Returns false by default (unmuted) for standalone tiles
|
|
314
|
+
* In TikTok-style feeds, this is set atomically with visibility to prevent race conditions
|
|
315
|
+
*/
|
|
316
|
+
isMuted(): boolean;
|
|
307
317
|
/**
|
|
308
318
|
* Subscribe to visibility state changes
|
|
309
319
|
* Called when parent sends visibility show/hide events (e.g., TikTok-style feed)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"AAAA;;;GAGG;AAEH,MAAM,WAAW,WAAW;IAC1B,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,CAAC,EAAE,GAAG,CAAC;IACd,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,MAAM,WAAW,UAAU;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,QAAQ,EAAE;QAAE,GAAG,EAAE,MAAM,CAAC;QAAC,GAAG,EAAE,MAAM,CAAA;KAAE,CAAC;IACvC,OAAO,EAAE,MAAM,CAAC;IAChB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IACzB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,EAAE,MAAM,CAAC;CACnB;AAED;;GAEG;AACH,MAAM,WAAW,aAAa;IAC5B,OAAO,EAAE,OAAO,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;CAChB;AAED
|
|
1
|
+
{"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"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"}
|
|
@@ -16,7 +16,8 @@ export class TileBridge {
|
|
|
16
16
|
// Keyboard state from parent (mobile app)
|
|
17
17
|
this.keyboardState = { visible: false, height: 0 };
|
|
18
18
|
// Visibility state from parent (for TikTok-style feeds)
|
|
19
|
-
|
|
19
|
+
// Includes muted state for atomic updates to prevent race conditions
|
|
20
|
+
this.visibilityState = { visible: true, muted: false };
|
|
20
21
|
// VisualViewport tracking for keyboard detection (Plan A)
|
|
21
22
|
this.baselineViewportHeight = 0;
|
|
22
23
|
this.keyboardDetectionEnabled = false;
|
|
@@ -389,6 +390,7 @@ export class TileBridge {
|
|
|
389
390
|
/**
|
|
390
391
|
* Handle visibility state message from parent (mobile app)
|
|
391
392
|
* Used for TikTok-style feeds where tiles are preloaded but not visible
|
|
393
|
+
* Now includes muted state for atomic updates to prevent race conditions
|
|
392
394
|
*/
|
|
393
395
|
handleVisibility(payload) {
|
|
394
396
|
if (payload?.visible === undefined) {
|
|
@@ -396,14 +398,17 @@ export class TileBridge {
|
|
|
396
398
|
return;
|
|
397
399
|
}
|
|
398
400
|
const wasVisible = this.visibilityState.visible;
|
|
401
|
+
const wasMuted = this.visibilityState.muted;
|
|
402
|
+
// Update visibility and muted state atomically
|
|
399
403
|
this.visibilityState = {
|
|
400
404
|
visible: !!payload.visible,
|
|
405
|
+
muted: payload.muted ?? !payload.visible, // Default: muted when not visible
|
|
401
406
|
};
|
|
402
407
|
if (this.isDevelopment() || this.isPreview()) {
|
|
403
408
|
console.log('[TileBridge] 👁️ Received visibility state', this.visibilityState);
|
|
404
409
|
}
|
|
405
|
-
//
|
|
406
|
-
if (wasVisible !== this.visibilityState.visible) {
|
|
410
|
+
// Emit if visibility OR muted state changed
|
|
411
|
+
if (wasVisible !== this.visibilityState.visible || wasMuted !== this.visibilityState.muted) {
|
|
407
412
|
this.emitEvent('visibility:update', this.visibilityState);
|
|
408
413
|
}
|
|
409
414
|
}
|
|
@@ -1102,6 +1107,14 @@ export class TileBridge {
|
|
|
1102
1107
|
isVisible() {
|
|
1103
1108
|
return this.visibilityState.visible;
|
|
1104
1109
|
}
|
|
1110
|
+
/**
|
|
1111
|
+
* Check if audio should be muted (based on visibility state from parent)
|
|
1112
|
+
* Returns false by default (unmuted) for standalone tiles
|
|
1113
|
+
* In TikTok-style feeds, this is set atomically with visibility to prevent race conditions
|
|
1114
|
+
*/
|
|
1115
|
+
isMuted() {
|
|
1116
|
+
return this.visibilityState.muted ?? false;
|
|
1117
|
+
}
|
|
1105
1118
|
/**
|
|
1106
1119
|
* Subscribe to visibility state changes
|
|
1107
1120
|
* Called when parent sends visibility show/hide events (e.g., TikTok-style feed)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/VideoPlayer.tsx"],"names":[],"mappings":"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
|
|
1
|
+
{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/VideoPlayer.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAOZ,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AA2Ff,UAAU,WAAW;IACnB,UAAU,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,WAAW,EAAE,CAAC,KAAK,EAAE,gBAAgB,KAAK,IAAI,CAAC;IAC/C,EAAE,EAAE,CAAC,KAAK,EAAE,MAAM,EAAE,QAAQ,EAAE,CAAC,GAAG,IAAI,EAAE,OAAO,EAAE,KAAK,IAAI,KAAK,IAAI,CAAC;IACpE,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,iBAAiB,EAAE,MAAM,IAAI,CAAC;IAC9B,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,UAAU,SAAS;IACjB,WAAW,EAAE,MAAM,OAAO,CAAC;IAC3B,MAAM,EAAE;QACN,eAAe,EAAE,MAAM,CAAC;QACxB,KAAK,EAAE,MAAM,CAAC;KACf,CAAC;IACF,UAAU,EAAE;QACV,aAAa,EAAE,MAAM,CAAC;QACtB,WAAW,EAAE,MAAM,CAAC;KACrB,CAAC;IACF,KAAK,MAAM,CAAC,EAAE;QAAE,YAAY,CAAC,EAAE,OAAO,CAAC;QAAC,cAAc,CAAC,EAAE,OAAO,CAAA;KAAE,GAAG,WAAW,CAAC;CAClF;AAGD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,MAAM;QACd,GAAG,EAAE,SAAS,CAAC;KAChB;CACF;AAED,MAAM,WAAW,UAAU;IACzB,SAAS,EAAE,OAAO,CAAC;IACnB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,OAAO,CAAC;IACf,SAAS,EAAE,OAAO,CAAC;IACnB,KAAK,EAAE,MAAM,GAAG,IAAI,CAAC;CACtB;AAED,MAAM,WAAW,aAAa;IAC5B,IAAI,EAAE,MAAM,IAAI,CAAC;IACjB,KAAK,EAAE,MAAM,IAAI,CAAC;IAClB,MAAM,EAAE,MAAM,IAAI,CAAC;IACnB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,SAAS,EAAE,CAAC,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACpC,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;CACpC;AAED,MAAM,WAAW,iBAAiB;IAChC,KAAK,EAAE,UAAU,CAAC;IAClB,QAAQ,EAAE,aAAa,CAAC;IACxB,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAC,gBAAgB,CAAC,CAAC;CAC7C;AAID,MAAM,WAAW,QAAQ;IACvB,kDAAkD;IAClD,IAAI,EAAE,MAAM,CAAC;IACb,0CAA0C;IAC1C,EAAE,EAAE,MAAM,CAAC;IACX,4CAA4C;IAC5C,IAAI,CAAC,EAAE,OAAO,CAAC;CAChB;AAED,MAAM,WAAW,gBAAgB;IAC/B,mCAAmC;IACnC,QAAQ,CAAC,EAAE,SAAS,CAAC;IACrB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,gCAAgC;IAChC,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,4CAA4C;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,yCAAyC;IACzC,SAAS,CAAC,EAAE,QAAQ,EAAE,CAAC;IACvB,2CAA2C;IAC3C,UAAU,CAAC,EAAE,CAAC,QAAQ,EAAE,QAAQ,KAAK,IAAI,CAAC;IAC1C,0DAA0D;IAC1D,YAAY,CAAC,EAAE,CAAC,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,KAAK,IAAI,CAAC;CAChE;AAED;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAgB,EAChB,QAAQ,EACR,SAAc,EACd,cAAmB,EACnB,SAAc,EACd,UAAU,EACV,YAAY,GACb,EAAE,gBAAgB,qBAualB;AAED;;GAEG;AACH,wBAAgB,aAAa,IAAI,iBAAiB,CAMjD;AAED;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CACzB,WAAW,EAAE,MAAM,EACnB,OAAO,GAAE;IACP,qDAAqD;IACrD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uEAAuE;IACvE,IAAI,CAAC,EAAE,MAAM,GAAG,YAAY,CAAC;CACzB,GACL,OAAO,CAyBT;AAED;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,wBAAgB,YAAY,CAC1B,SAAS,EAAE,KAAK,CAAC;IACf,sCAAsC;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,SAAS,EAAE,MAAM,IAAI,CAAC;IACtB,6CAA6C;IAC7C,EAAE,CAAC,EAAE,MAAM,CAAC;CACb,CAAC,EACF,OAAO,GAAE;IACP,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;CAClB,GACL,IAAI,CAgCN;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,gBAAgB,IAAI,MAAM,CAMzC"}
|
|
@@ -155,12 +155,57 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
155
155
|
videoRef.current.muted = muted;
|
|
156
156
|
}
|
|
157
157
|
}, []);
|
|
158
|
-
//
|
|
158
|
+
// Helper to start playback with visibility-aware muting
|
|
159
|
+
const startPlayback = useCallback((video) => {
|
|
160
|
+
try {
|
|
161
|
+
const bridge = getTileBridge();
|
|
162
|
+
if (bridge.isVisible()) {
|
|
163
|
+
// Visible tile - try unmuted first for mobile WebViews
|
|
164
|
+
video.muted = false;
|
|
165
|
+
video.play().catch(() => {
|
|
166
|
+
// Unmuted failed (browser policy) - fall back to muted
|
|
167
|
+
video.muted = true;
|
|
168
|
+
video.play().catch(() => { });
|
|
169
|
+
});
|
|
170
|
+
}
|
|
171
|
+
else {
|
|
172
|
+
// Not visible - play muted
|
|
173
|
+
video.muted = true;
|
|
174
|
+
video.play().catch(() => { });
|
|
175
|
+
}
|
|
176
|
+
}
|
|
177
|
+
catch {
|
|
178
|
+
// Bridge not available - just play muted (safe default)
|
|
179
|
+
video.play().catch(() => { });
|
|
180
|
+
}
|
|
181
|
+
}, []);
|
|
182
|
+
// Load video source - handles both HLS streams and regular video files
|
|
159
183
|
useEffect(() => {
|
|
160
184
|
const video = videoRef.current;
|
|
161
185
|
if (!video || !src)
|
|
162
186
|
return;
|
|
163
|
-
//
|
|
187
|
+
// Check if this is an HLS stream (.m3u8) or a regular video file
|
|
188
|
+
const isHlsUrl = src.includes('.m3u8');
|
|
189
|
+
if (!isHlsUrl) {
|
|
190
|
+
// Regular video file (MP4, WebM, etc.) - just set src directly
|
|
191
|
+
const handleLoadedMetadata = () => {
|
|
192
|
+
setState(s => ({ ...s, isLoading: false }));
|
|
193
|
+
if (autoplay) {
|
|
194
|
+
startPlayback(video);
|
|
195
|
+
}
|
|
196
|
+
};
|
|
197
|
+
const handleError = () => {
|
|
198
|
+
setState(s => ({ ...s, error: 'Failed to load video', isLoading: false }));
|
|
199
|
+
};
|
|
200
|
+
video.src = src;
|
|
201
|
+
video.addEventListener('loadedmetadata', handleLoadedMetadata);
|
|
202
|
+
video.addEventListener('error', handleError);
|
|
203
|
+
return () => {
|
|
204
|
+
video.removeEventListener('loadedmetadata', handleLoadedMetadata);
|
|
205
|
+
video.removeEventListener('error', handleError);
|
|
206
|
+
};
|
|
207
|
+
}
|
|
208
|
+
// HLS stream - load HLS.js
|
|
164
209
|
const loadHls = async () => {
|
|
165
210
|
if (!window.Hls) {
|
|
166
211
|
await new Promise((resolve, reject) => {
|
|
@@ -183,28 +228,7 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
183
228
|
hls.on(Hls.Events.MANIFEST_PARSED, () => {
|
|
184
229
|
setState(s => ({ ...s, isLoading: false }));
|
|
185
230
|
if (autoplay) {
|
|
186
|
-
|
|
187
|
-
try {
|
|
188
|
-
const bridge = getTileBridge();
|
|
189
|
-
if (bridge.isVisible()) {
|
|
190
|
-
// Visible tile - try unmuted first for mobile WebViews
|
|
191
|
-
video.muted = false;
|
|
192
|
-
video.play().catch(() => {
|
|
193
|
-
// Unmuted failed (browser policy) - fall back to muted
|
|
194
|
-
video.muted = true;
|
|
195
|
-
video.play().catch(() => { });
|
|
196
|
-
});
|
|
197
|
-
}
|
|
198
|
-
else {
|
|
199
|
-
// Not visible - play muted
|
|
200
|
-
video.muted = true;
|
|
201
|
-
video.play().catch(() => { });
|
|
202
|
-
}
|
|
203
|
-
}
|
|
204
|
-
catch {
|
|
205
|
-
// Bridge not available - just play muted (safe default)
|
|
206
|
-
video.play().catch(() => { });
|
|
207
|
-
}
|
|
231
|
+
startPlayback(video);
|
|
208
232
|
}
|
|
209
233
|
});
|
|
210
234
|
hls.on(Hls.Events.ERROR, (_event, data) => {
|
|
@@ -231,24 +255,7 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
231
255
|
video.addEventListener('loadedmetadata', () => {
|
|
232
256
|
setState(s => ({ ...s, isLoading: false }));
|
|
233
257
|
if (autoplay) {
|
|
234
|
-
|
|
235
|
-
try {
|
|
236
|
-
const bridge = getTileBridge();
|
|
237
|
-
if (bridge.isVisible()) {
|
|
238
|
-
video.muted = false;
|
|
239
|
-
video.play().catch(() => {
|
|
240
|
-
video.muted = true;
|
|
241
|
-
video.play().catch(() => { });
|
|
242
|
-
});
|
|
243
|
-
}
|
|
244
|
-
else {
|
|
245
|
-
video.muted = true;
|
|
246
|
-
video.play().catch(() => { });
|
|
247
|
-
}
|
|
248
|
-
}
|
|
249
|
-
catch {
|
|
250
|
-
video.play().catch(() => { });
|
|
251
|
-
}
|
|
258
|
+
startPlayback(video);
|
|
252
259
|
}
|
|
253
260
|
});
|
|
254
261
|
}
|
|
@@ -263,7 +270,7 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
263
270
|
hlsRef.current?.destroy();
|
|
264
271
|
hlsRef.current = null;
|
|
265
272
|
};
|
|
266
|
-
}, [src, autoplay]);
|
|
273
|
+
}, [src, autoplay, startPlayback]);
|
|
267
274
|
// Video event listeners
|
|
268
275
|
useEffect(() => {
|
|
269
276
|
const video = videoRef.current;
|
|
@@ -338,6 +345,8 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
338
345
|
// Visibility handling - play/pause AND mute/unmute based on tile visibility.
|
|
339
346
|
// Enables TikTok-style preloaded video tiles that only play when visible.
|
|
340
347
|
// Audio is controlled here to ensure only the visible tile has sound.
|
|
348
|
+
// IMPORTANT: muted state is now sent atomically with visibility from the parent
|
|
349
|
+
// to prevent race conditions between visibility and mute messages.
|
|
341
350
|
useEffect(() => {
|
|
342
351
|
const video = videoRef.current;
|
|
343
352
|
if (!video || !autoplay)
|
|
@@ -345,9 +354,13 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
345
354
|
try {
|
|
346
355
|
const bridge = getTileBridge();
|
|
347
356
|
// Handle visibility changes from parent (mobile app)
|
|
357
|
+
// Now includes muted state for atomic updates (no race conditions)
|
|
348
358
|
const unsubscribe = bridge.onVisibilityChange((visibilityState) => {
|
|
349
|
-
|
|
350
|
-
|
|
359
|
+
// Use the muted field from the visibility state (sent atomically by parent)
|
|
360
|
+
// This prevents race conditions where visibility arrives before mute state
|
|
361
|
+
const shouldMute = visibilityState.muted ?? !visibilityState.visible;
|
|
362
|
+
if (visibilityState.visible && !shouldMute) {
|
|
363
|
+
// Tile became visible and should be unmuted - unmute and play
|
|
351
364
|
// Unmute first so audio starts with the video
|
|
352
365
|
video.muted = false;
|
|
353
366
|
video.play().catch(() => {
|
|
@@ -356,6 +369,11 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
356
369
|
video.play().catch(() => { });
|
|
357
370
|
});
|
|
358
371
|
}
|
|
372
|
+
else if (visibilityState.visible && shouldMute) {
|
|
373
|
+
// Tile is visible but should be muted (e.g., transitioning)
|
|
374
|
+
video.muted = true;
|
|
375
|
+
video.play().catch(() => { });
|
|
376
|
+
}
|
|
359
377
|
else {
|
|
360
378
|
// Tile became hidden - mute first (immediate audio stop), then pause
|
|
361
379
|
video.muted = true;
|
|
@@ -363,8 +381,10 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
363
381
|
}
|
|
364
382
|
});
|
|
365
383
|
// Check initial visibility state and set audio accordingly
|
|
366
|
-
|
|
367
|
-
|
|
384
|
+
const initialState = bridge.getVisibilityState();
|
|
385
|
+
const initialMuted = initialState.muted ?? !initialState.visible;
|
|
386
|
+
if (initialState.visible && !initialMuted) {
|
|
387
|
+
// If visible and unmuted on mount, unmute so sound plays
|
|
368
388
|
// This handles the race condition where the first tile loads visible
|
|
369
389
|
video.muted = false;
|
|
370
390
|
// If unmuted autoplay fails, fall back to muted
|
|
@@ -374,9 +394,11 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
374
394
|
});
|
|
375
395
|
}
|
|
376
396
|
else {
|
|
377
|
-
// If not visible on mount, ensure muted and paused
|
|
397
|
+
// If not visible or muted on mount, ensure muted and paused
|
|
378
398
|
video.muted = true;
|
|
379
|
-
|
|
399
|
+
if (!initialState.visible) {
|
|
400
|
+
video.pause();
|
|
401
|
+
}
|
|
380
402
|
}
|
|
381
403
|
return () => {
|
|
382
404
|
unsubscribe();
|