@thewhateverapp/tile-sdk 0.12.9 → 0.12.11
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
CHANGED
|
@@ -59,6 +59,8 @@ export declare class TileBridge {
|
|
|
59
59
|
private tokenExpiresAt;
|
|
60
60
|
private keyboardState;
|
|
61
61
|
private visibilityState;
|
|
62
|
+
private autoMuteEnabled;
|
|
63
|
+
private mediaOriginalMutedState;
|
|
62
64
|
private baselineViewportHeight;
|
|
63
65
|
private keyboardDetectionEnabled;
|
|
64
66
|
private lastReportedKeyboardState;
|
|
@@ -109,6 +111,15 @@ export declare class TileBridge {
|
|
|
109
111
|
* Now includes muted state for atomic updates to prevent race conditions
|
|
110
112
|
*/
|
|
111
113
|
private handleVisibility;
|
|
114
|
+
/**
|
|
115
|
+
* Automatically mute all video and audio elements in the document
|
|
116
|
+
* Stores original muted state so we can restore it when unmuting
|
|
117
|
+
*/
|
|
118
|
+
private muteAllMedia;
|
|
119
|
+
/**
|
|
120
|
+
* Unmute all video and audio elements, restoring their original muted state
|
|
121
|
+
*/
|
|
122
|
+
private unmuteAllMedia;
|
|
112
123
|
private sendToParent;
|
|
113
124
|
/**
|
|
114
125
|
* Request to navigate to full page view
|
|
@@ -155,7 +166,7 @@ export declare class TileBridge {
|
|
|
155
166
|
*/
|
|
156
167
|
getStorage(key: string): Promise<any>;
|
|
157
168
|
/**
|
|
158
|
-
* Request resize
|
|
169
|
+
* Request resize - parent controls actual dimensions
|
|
159
170
|
*/
|
|
160
171
|
requestResize(width: number, height: number): void;
|
|
161
172
|
/**
|
|
@@ -321,6 +332,31 @@ export declare class TileBridge {
|
|
|
321
332
|
* @returns Unsubscribe function
|
|
322
333
|
*/
|
|
323
334
|
onVisibilityChange(handler: (state: VisibilityState) => void): () => void;
|
|
335
|
+
/**
|
|
336
|
+
* Enable or disable automatic audio muting when visibility changes
|
|
337
|
+
* By default, auto-mute is ENABLED - all <video> and <audio> elements are
|
|
338
|
+
* automatically muted when the tile becomes hidden/offscreen.
|
|
339
|
+
*
|
|
340
|
+
* Tiles with custom audio handling (e.g., using AudioContext, Emscripten/WASM)
|
|
341
|
+
* should disable this and handle audio manually via onVisibilityChange.
|
|
342
|
+
*
|
|
343
|
+
* @param enabled - true to enable auto-mute (default), false to disable
|
|
344
|
+
*/
|
|
345
|
+
setAutoMute(enabled: boolean): void;
|
|
346
|
+
/**
|
|
347
|
+
* Check if automatic audio muting is enabled
|
|
348
|
+
*/
|
|
349
|
+
isAutoMuteEnabled(): boolean;
|
|
350
|
+
/**
|
|
351
|
+
* Manually mute all audio/video elements
|
|
352
|
+
* Useful for tiles that need to mute on demand
|
|
353
|
+
*/
|
|
354
|
+
muteAll(): void;
|
|
355
|
+
/**
|
|
356
|
+
* Manually unmute all audio/video elements
|
|
357
|
+
* Restores original muted state (elements that were muted before stay muted)
|
|
358
|
+
*/
|
|
359
|
+
unmuteAll(): void;
|
|
324
360
|
/**
|
|
325
361
|
* Wait for ready state
|
|
326
362
|
*
|
|
@@ -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;;;GAGG;AACH,MAAM,WAAW,eAAe;IAC9B,OAAO,EAAE,OAAO,CAAC;IACjB,iGAAiG;IACjG,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB;AAGD,KAAK,UAAU,GAAG;IAChB,IAAI,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC7B,OAAO,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAChC,IAAI,EAAE,MAAM,IAAI,CAAC;CAClB,CAAC;AAEF,qBAAa,UAAU;IACrB,OAAO,CAAC,MAAM,CAA2B;IACzC,OAAO,CAAC,YAAY,CAAqB;IACzC,OAAO,CAAC,gBAAgB,CAAmD;IAC3E,OAAO,CAAC,aAAa,CAAoD;IACzE,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAS;IAC7B,OAAO,CAAC,MAAM,CAA2B;IAGzC,OAAO,CAAC,YAAY,CAAuB;IAC3C,OAAO,CAAC,cAAc,CAAqB;IAG3C,OAAO,CAAC,aAAa,CAAgD;IAIrE,OAAO,CAAC,eAAe,CAAoD;IAG3E,OAAO,CAAC,sBAAsB,CAAa;IAC3C,OAAO,CAAC,wBAAwB,CAAkB;IAClD,OAAO,CAAC,yBAAyB,CAAuE;IACxG,OAAO,CAAC,qBAAqB,CAA8C;IAC3E,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAO;IAC1C,OAAO,CAAC,QAAQ,CAAC,WAAW,CAAO;IAGnC,OAAO,CAAC,YAAY,CAAkB;IACtC,OAAO,CAAC,cAAc,CAAwB;gBAElC,cAAc,GAAE,MAAkC,EAAE,MAAM,CAAC,EAAE,UAAU;IA6BnF,OAAO,CAAC,UAAU;IAoClB;;;OAGG;IACH,OAAO,CAAC,2BAA2B;IAwDnC;;OAEG;IACH,OAAO,CAAC,qBAAqB;IA0C7B;;OAEG;IACH,OAAO,CAAC,aAAa;IA+BrB;;OAEG;IACH,OAAO,CAAC,cAAc;IAgCtB;;OAEG;IACH,OAAO,CAAC,cAAc;IAuBtB,OAAO,CAAC,aAAa;IA6DrB,OAAO,CAAC,YAAY;IAgBpB,OAAO,CAAC,cAAc;IAUtB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,oBAAoB;IAoB5B;;OAEG;IACH,OAAO,CAAC,WAAW;IAuBnB;;OAEG;IACH,OAAO,CAAC,cAAc;IAmBtB;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;
|
|
1
|
+
{"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"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"}
|
|
@@ -18,6 +18,10 @@ export class TileBridge {
|
|
|
18
18
|
// Visibility state from parent (for TikTok-style feeds)
|
|
19
19
|
// Includes muted state for atomic updates to prevent race conditions
|
|
20
20
|
this.visibilityState = { visible: true, muted: false };
|
|
21
|
+
// Automatic audio enforcement - enabled by default
|
|
22
|
+
this.autoMuteEnabled = true;
|
|
23
|
+
// Store original muted state of media elements to restore when unmuting
|
|
24
|
+
this.mediaOriginalMutedState = new WeakMap();
|
|
21
25
|
// VisualViewport tracking for keyboard detection (Plan A)
|
|
22
26
|
this.baselineViewportHeight = 0;
|
|
23
27
|
this.keyboardDetectionEnabled = false;
|
|
@@ -407,11 +411,70 @@ export class TileBridge {
|
|
|
407
411
|
if (this.isDevelopment() || this.isPreview()) {
|
|
408
412
|
console.log('[TileBridge] 👁️ Received visibility state', this.visibilityState);
|
|
409
413
|
}
|
|
414
|
+
// Auto-enforce audio muting if enabled
|
|
415
|
+
if (this.autoMuteEnabled) {
|
|
416
|
+
if (this.visibilityState.muted) {
|
|
417
|
+
this.muteAllMedia();
|
|
418
|
+
}
|
|
419
|
+
else if (wasMuted && !this.visibilityState.muted) {
|
|
420
|
+
this.unmuteAllMedia();
|
|
421
|
+
}
|
|
422
|
+
}
|
|
410
423
|
// Emit if visibility OR muted state changed
|
|
411
424
|
if (wasVisible !== this.visibilityState.visible || wasMuted !== this.visibilityState.muted) {
|
|
412
425
|
this.emitEvent('visibility:update', this.visibilityState);
|
|
413
426
|
}
|
|
414
427
|
}
|
|
428
|
+
/**
|
|
429
|
+
* Automatically mute all video and audio elements in the document
|
|
430
|
+
* Stores original muted state so we can restore it when unmuting
|
|
431
|
+
*/
|
|
432
|
+
muteAllMedia() {
|
|
433
|
+
if (typeof document === 'undefined')
|
|
434
|
+
return;
|
|
435
|
+
const mediaElements = document.querySelectorAll('video, audio');
|
|
436
|
+
let mutedCount = 0;
|
|
437
|
+
mediaElements.forEach((element) => {
|
|
438
|
+
const media = element;
|
|
439
|
+
// Store original muted state if not already stored
|
|
440
|
+
if (!this.mediaOriginalMutedState.has(media)) {
|
|
441
|
+
this.mediaOriginalMutedState.set(media, media.muted);
|
|
442
|
+
}
|
|
443
|
+
if (!media.muted) {
|
|
444
|
+
media.muted = true;
|
|
445
|
+
mutedCount++;
|
|
446
|
+
}
|
|
447
|
+
});
|
|
448
|
+
if (mutedCount > 0) {
|
|
449
|
+
console.log(`[TileBridge] 🔇 Auto-muted ${mutedCount} media element(s)`);
|
|
450
|
+
}
|
|
451
|
+
}
|
|
452
|
+
/**
|
|
453
|
+
* Unmute all video and audio elements, restoring their original muted state
|
|
454
|
+
*/
|
|
455
|
+
unmuteAllMedia() {
|
|
456
|
+
if (typeof document === 'undefined')
|
|
457
|
+
return;
|
|
458
|
+
const mediaElements = document.querySelectorAll('video, audio');
|
|
459
|
+
let unmutedCount = 0;
|
|
460
|
+
mediaElements.forEach((element) => {
|
|
461
|
+
const media = element;
|
|
462
|
+
// Restore original muted state (or unmute if we don't have stored state)
|
|
463
|
+
const originalMuted = this.mediaOriginalMutedState.get(media);
|
|
464
|
+
if (originalMuted === false || originalMuted === undefined) {
|
|
465
|
+
// Only unmute if it wasn't originally muted
|
|
466
|
+
if (media.muted) {
|
|
467
|
+
media.muted = false;
|
|
468
|
+
unmutedCount++;
|
|
469
|
+
}
|
|
470
|
+
}
|
|
471
|
+
// Clear stored state
|
|
472
|
+
this.mediaOriginalMutedState.delete(media);
|
|
473
|
+
});
|
|
474
|
+
if (unmutedCount > 0) {
|
|
475
|
+
console.log(`[TileBridge] 🔊 Auto-unmuted ${unmutedCount} media element(s)`);
|
|
476
|
+
}
|
|
477
|
+
}
|
|
415
478
|
sendToParent(message) {
|
|
416
479
|
if (typeof window === 'undefined' || !window.parent)
|
|
417
480
|
return;
|
|
@@ -666,15 +729,12 @@ export class TileBridge {
|
|
|
666
729
|
});
|
|
667
730
|
}
|
|
668
731
|
/**
|
|
669
|
-
* Request resize
|
|
732
|
+
* Request resize - parent controls actual dimensions
|
|
670
733
|
*/
|
|
671
734
|
requestResize(width, height) {
|
|
672
|
-
// Limit to max 512x512 for tiles
|
|
673
|
-
const constrainedWidth = Math.min(width, 512);
|
|
674
|
-
const constrainedHeight = Math.min(height, 512);
|
|
675
735
|
this.sendToParent({
|
|
676
736
|
type: 'tile:resize',
|
|
677
|
-
payload: { width
|
|
737
|
+
payload: { width, height },
|
|
678
738
|
});
|
|
679
739
|
}
|
|
680
740
|
/**
|
|
@@ -1124,6 +1184,41 @@ export class TileBridge {
|
|
|
1124
1184
|
onVisibilityChange(handler) {
|
|
1125
1185
|
return this.on('visibility:update', handler);
|
|
1126
1186
|
}
|
|
1187
|
+
// ============= AUTO-MUTE API =============
|
|
1188
|
+
/**
|
|
1189
|
+
* Enable or disable automatic audio muting when visibility changes
|
|
1190
|
+
* By default, auto-mute is ENABLED - all <video> and <audio> elements are
|
|
1191
|
+
* automatically muted when the tile becomes hidden/offscreen.
|
|
1192
|
+
*
|
|
1193
|
+
* Tiles with custom audio handling (e.g., using AudioContext, Emscripten/WASM)
|
|
1194
|
+
* should disable this and handle audio manually via onVisibilityChange.
|
|
1195
|
+
*
|
|
1196
|
+
* @param enabled - true to enable auto-mute (default), false to disable
|
|
1197
|
+
*/
|
|
1198
|
+
setAutoMute(enabled) {
|
|
1199
|
+
this.autoMuteEnabled = enabled;
|
|
1200
|
+
console.log(`[TileBridge] 🔈 Auto-mute ${enabled ? 'enabled' : 'disabled'}`);
|
|
1201
|
+
}
|
|
1202
|
+
/**
|
|
1203
|
+
* Check if automatic audio muting is enabled
|
|
1204
|
+
*/
|
|
1205
|
+
isAutoMuteEnabled() {
|
|
1206
|
+
return this.autoMuteEnabled;
|
|
1207
|
+
}
|
|
1208
|
+
/**
|
|
1209
|
+
* Manually mute all audio/video elements
|
|
1210
|
+
* Useful for tiles that need to mute on demand
|
|
1211
|
+
*/
|
|
1212
|
+
muteAll() {
|
|
1213
|
+
this.muteAllMedia();
|
|
1214
|
+
}
|
|
1215
|
+
/**
|
|
1216
|
+
* Manually unmute all audio/video elements
|
|
1217
|
+
* Restores original muted state (elements that were muted before stay muted)
|
|
1218
|
+
*/
|
|
1219
|
+
unmuteAll() {
|
|
1220
|
+
this.unmuteAllMedia();
|
|
1221
|
+
}
|
|
1127
1222
|
/**
|
|
1128
1223
|
* Wait for ready state
|
|
1129
1224
|
*
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"OverlaySlot.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/OverlaySlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;
|
|
1
|
+
{"version":3,"file":"OverlaySlot.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/OverlaySlot.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAE9C,MAAM,MAAM,YAAY,GACpB,UAAU,GACV,YAAY,GACZ,WAAW,GACX,aAAa,GACb,QAAQ,GACR,cAAc,GACd,aAAa,GACb,eAAe,GACf,cAAc,CAAC;AAEnB,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,QAAQ,EAAE,YAAY,CAAC;IACvB,qCAAqC;IACrC,QAAQ,EAAE,SAAS,CAAC;IACpB,6BAA6B;IAC7B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yCAAyC;IACzC,OAAO,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC1B,sDAAsD;IACtD,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAgCD;;;;;;;;;;;;;;;GAeG;AACH,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,QAAQ,EACR,SAAc,EACd,OAAY,EACZ,WAAkB,EAClB,MAAW,GACZ,EAAE,gBAAgB,qBA2ClB;AAED;;;GAGG;AACH,MAAM,WAAW,gBAAgB;IAC/B,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,yCAAyC;IACzC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,+CAA+C;IAC/C,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;CACtB;AAED,wBAAgB,WAAW,CAAC,EAC1B,QAAQ,EACR,SAAc,EACd,UAA0B,EAC1B,MAAW,EACX,OAAO,GACR,EAAE,gBAAgB,qBAkBlB;AAED;;;GAGG;AACH,MAAM,WAAW,oBAAoB;IACnC,gDAAgD;IAChD,SAAS,CAAC,EAAE,QAAQ,GAAG,WAAW,GAAG,SAAS,GAAG,UAAU,CAAC;IAC5D,iDAAiD;IACjD,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,gDAAgD;IAChD,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,wCAAwC;IACxC,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED,wBAAgB,eAAe,CAAC,EAC9B,SAAoB,EACpB,OAAY,EACZ,IAAY,EACZ,MAAU,EACV,SAAc,GACf,EAAE,oBAAoB,qBAuDtB"}
|
|
@@ -1,30 +1,32 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React from 'react';
|
|
3
3
|
/**
|
|
4
|
-
* Get
|
|
4
|
+
* Get inline styles for slot position
|
|
5
|
+
* Using inline styles instead of Tailwind classes to avoid CSS purging issues
|
|
6
|
+
* when the component is used from tile-sdk (Tailwind doesn't scan node_modules)
|
|
5
7
|
*/
|
|
6
|
-
function
|
|
8
|
+
function getPositionStyles(position) {
|
|
7
9
|
switch (position) {
|
|
8
10
|
case 'top-left':
|
|
9
|
-
return
|
|
11
|
+
return { top: 0, left: 0 };
|
|
10
12
|
case 'top-center':
|
|
11
|
-
return
|
|
13
|
+
return { top: 0, left: '50%', transform: 'translateX(-50%)' };
|
|
12
14
|
case 'top-right':
|
|
13
|
-
return
|
|
15
|
+
return { top: 0, right: 0 };
|
|
14
16
|
case 'center-left':
|
|
15
|
-
return
|
|
17
|
+
return { top: '50%', left: 0, transform: 'translateY(-50%)' };
|
|
16
18
|
case 'center':
|
|
17
|
-
return
|
|
19
|
+
return { top: '50%', left: '50%', transform: 'translate(-50%, -50%)' };
|
|
18
20
|
case 'center-right':
|
|
19
|
-
return
|
|
21
|
+
return { top: '50%', right: 0, transform: 'translateY(-50%)' };
|
|
20
22
|
case 'bottom-left':
|
|
21
|
-
return
|
|
23
|
+
return { bottom: 0, left: 0 };
|
|
22
24
|
case 'bottom-center':
|
|
23
|
-
return
|
|
25
|
+
return { bottom: 0, left: '50%', transform: 'translateX(-50%)' };
|
|
24
26
|
case 'bottom-right':
|
|
25
|
-
return
|
|
27
|
+
return { bottom: 0, right: 0 };
|
|
26
28
|
default:
|
|
27
|
-
return
|
|
29
|
+
return {};
|
|
28
30
|
}
|
|
29
31
|
}
|
|
30
32
|
/**
|
|
@@ -44,7 +46,7 @@ function getPositionClasses(position) {
|
|
|
44
46
|
* ```
|
|
45
47
|
*/
|
|
46
48
|
export function OverlaySlot({ position, children, className = '', padding = 12, useSafeArea = true, zIndex = 10, }) {
|
|
47
|
-
const
|
|
49
|
+
const positionStyles = getPositionStyles(position);
|
|
48
50
|
const paddingValue = typeof padding === 'number' ? `${padding}px` : padding;
|
|
49
51
|
// Calculate safe area padding based on position
|
|
50
52
|
const getSafeAreaStyle = () => {
|
|
@@ -65,27 +67,70 @@ export function OverlaySlot({ position, children, className = '', padding = 12,
|
|
|
65
67
|
}
|
|
66
68
|
return style;
|
|
67
69
|
};
|
|
68
|
-
return (React.createElement("div", { className:
|
|
70
|
+
return (React.createElement("div", { className: `${className}`, style: {
|
|
71
|
+
position: 'absolute',
|
|
72
|
+
pointerEvents: 'none',
|
|
69
73
|
padding: paddingValue,
|
|
70
74
|
zIndex,
|
|
75
|
+
...positionStyles,
|
|
71
76
|
...getSafeAreaStyle(),
|
|
72
77
|
} },
|
|
73
|
-
React.createElement("div", {
|
|
78
|
+
React.createElement("div", { style: { pointerEvents: 'auto' } }, children)));
|
|
74
79
|
}
|
|
75
80
|
export function FullOverlay({ children, className = '', background = 'transparent', zIndex = 20, onClick, }) {
|
|
76
|
-
return (React.createElement("div", { className:
|
|
81
|
+
return (React.createElement("div", { className: className, style: {
|
|
82
|
+
position: 'absolute',
|
|
83
|
+
top: 0,
|
|
84
|
+
right: 0,
|
|
85
|
+
bottom: 0,
|
|
86
|
+
left: 0,
|
|
87
|
+
background,
|
|
88
|
+
zIndex,
|
|
89
|
+
}, onClick: onClick }, children));
|
|
77
90
|
}
|
|
78
91
|
export function GradientOverlay({ direction = 'to-top', opacity = 60, size = '50%', zIndex = 5, className = '', }) {
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
92
|
+
// Get positioning styles based on direction
|
|
93
|
+
const getDirectionStyles = () => {
|
|
94
|
+
switch (direction) {
|
|
95
|
+
case 'to-top':
|
|
96
|
+
return {
|
|
97
|
+
bottom: 0,
|
|
98
|
+
left: 0,
|
|
99
|
+
right: 0,
|
|
100
|
+
background: 'linear-gradient(to top, black, transparent)',
|
|
101
|
+
};
|
|
102
|
+
case 'to-bottom':
|
|
103
|
+
return {
|
|
104
|
+
top: 0,
|
|
105
|
+
left: 0,
|
|
106
|
+
right: 0,
|
|
107
|
+
background: 'linear-gradient(to bottom, black, transparent)',
|
|
108
|
+
};
|
|
109
|
+
case 'to-left':
|
|
110
|
+
return {
|
|
111
|
+
top: 0,
|
|
112
|
+
right: 0,
|
|
113
|
+
bottom: 0,
|
|
114
|
+
background: 'linear-gradient(to left, black, transparent)',
|
|
115
|
+
};
|
|
116
|
+
case 'to-right':
|
|
117
|
+
return {
|
|
118
|
+
top: 0,
|
|
119
|
+
left: 0,
|
|
120
|
+
bottom: 0,
|
|
121
|
+
background: 'linear-gradient(to right, black, transparent)',
|
|
122
|
+
};
|
|
123
|
+
default:
|
|
124
|
+
return {};
|
|
125
|
+
}
|
|
84
126
|
};
|
|
85
127
|
const sizeStyle = direction === 'to-top' || direction === 'to-bottom'
|
|
86
128
|
? { height: size, width: '100%' }
|
|
87
129
|
: { width: size, height: '100%' };
|
|
88
|
-
return (React.createElement("div", { className:
|
|
130
|
+
return (React.createElement("div", { className: className, style: {
|
|
131
|
+
position: 'absolute',
|
|
132
|
+
pointerEvents: 'none',
|
|
133
|
+
...getDirectionStyles(),
|
|
89
134
|
...sizeStyle,
|
|
90
135
|
opacity: opacity / 100,
|
|
91
136
|
zIndex,
|