@thewhateverapp/tile-sdk 0.12.7 → 0.12.8
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.
|
@@ -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":"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"}
|
|
@@ -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;
|