@thewhateverapp/tile-sdk 0.16.4 → 0.16.7
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/dist/bridge/TileBridge.d.ts.map +1 -1
- package/dist/bridge/TileBridge.js +22 -2
- package/dist/templates/slideshow/layout.tsx.template.d.ts +17 -7
- package/dist/templates/slideshow/layout.tsx.template.d.ts.map +1 -1
- package/dist/templates/slideshow/layout.tsx.template.js +403 -185
- package/dist/templates/video/layout.tsx.template.d.ts +17 -7
- package/dist/templates/video/layout.tsx.template.d.ts.map +1 -1
- package/dist/templates/video/layout.tsx.template.js +575 -122
- package/package.json +4 -1
|
@@ -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;IAMrE,OAAO,CAAC,eAAe,CAAmD;IAG1E,OAAO,CAAC,yBAAyB,CAAkB;IAGnD,OAAO,CAAC,uBAAuB,CAAqD;IAEpF,OAAO,CAAC,oBAAoB,CAAgC;IAC5D,OAAO,CAAC,mBAAmB,CAAkB;IAG7C,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;IAiCnF,OAAO,CAAC,UAAU;IA4ClB;;;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;IAqErB,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;IAkBtB;;;OAGG;IACH,OAAO,CAAC,wBAAwB;IAmBhC;;;;OAIG;IACH,OAAO,CAAC,gBAAgB;IAwCxB;;;OAGG;IACH,OAAO,CAAC,iBAAiB;IA4CzB;;;;OAIG;IACH,OAAO,CAAC,kBAAkB;IAuE1B;;;;;;;OAOG;IACH,OAAO,CAAC,2BAA2B;
|
|
1
|
+
{"version":3,"file":"TileBridge.d.ts","sourceRoot":"","sources":["../../src/bridge/TileBridge.ts"],"names":[],"mappings":"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"}
|
|
@@ -615,8 +615,28 @@ export class TileBridge {
|
|
|
615
615
|
// For web iframes, use a 3-second fallback in case parent doesn't implement protocol
|
|
616
616
|
const isReactNativeWebView = !!window.ReactNativeWebView;
|
|
617
617
|
if (isReactNativeWebView) {
|
|
618
|
-
console.log('[TileBridge] 📱 React Native WebView detected -
|
|
619
|
-
//
|
|
618
|
+
console.log('[TileBridge] 📱 React Native WebView detected - checking for stored visibility state');
|
|
619
|
+
// Check for visibility state stored by webViewBridge before we initialized
|
|
620
|
+
// This handles the race condition where visibility message arrived early
|
|
621
|
+
const storedState = window.__parentVisibilityState;
|
|
622
|
+
if (storedState && typeof storedState.visible === 'boolean') {
|
|
623
|
+
console.log('[TileBridge] 📱 Found stored visibility state:', JSON.stringify(storedState));
|
|
624
|
+
this.receivedVisibilityMessage = true;
|
|
625
|
+
this.visibilityState.visible = storedState.visible;
|
|
626
|
+
this.visibilityState.muted = storedState.muted ?? !storedState.visible;
|
|
627
|
+
// Apply the stored state
|
|
628
|
+
if (this.visibilityState.muted) {
|
|
629
|
+
console.log('[TileBridge] 📱 Applying stored state: MUTING');
|
|
630
|
+
this.muteAllMedia();
|
|
631
|
+
}
|
|
632
|
+
else {
|
|
633
|
+
console.log('[TileBridge] 📱 Applying stored state: UNMUTING');
|
|
634
|
+
this.unmuteAllMedia();
|
|
635
|
+
}
|
|
636
|
+
}
|
|
637
|
+
else {
|
|
638
|
+
console.log('[TileBridge] 📱 No stored visibility state - waiting for parent visibility');
|
|
639
|
+
}
|
|
620
640
|
}
|
|
621
641
|
else {
|
|
622
642
|
// Web iframe fallback - parent might not implement visibility protocol
|
|
@@ -1,22 +1,32 @@
|
|
|
1
1
|
/**
|
|
2
|
-
* Slideshow
|
|
2
|
+
* Slideshow Templates - Auto-generated from base-image-worker
|
|
3
|
+
*
|
|
4
|
+
* DO NOT EDIT THIS FILE DIRECTLY!
|
|
5
|
+
* Edit the source files in platform/workers/base-image-worker/ and run:
|
|
6
|
+
* pnpm sync-templates
|
|
7
|
+
*
|
|
8
|
+
* Source files:
|
|
9
|
+
* - Tile page: workers/base-image-worker/src/app/tile/page.tsx
|
|
10
|
+
* - Full page: workers/base-image-worker/src/app/page/page.tsx
|
|
11
|
+
*/
|
|
12
|
+
/**
|
|
13
|
+
* Slideshow Layout Template
|
|
3
14
|
*
|
|
4
15
|
* This layout wraps both /tile and /page routes using a route group.
|
|
5
16
|
* The Slideshow is rendered ONCE here and persists across route navigation.
|
|
6
17
|
*
|
|
7
18
|
* File path: src/app/(slideshow)/layout.tsx
|
|
8
|
-
* Routes: src/app/(slideshow)/tile/page.tsx, src/app/(slideshow)/page/page.tsx
|
|
9
19
|
*/
|
|
10
20
|
export declare const slideshowLayoutTemplate = "'use client';\n\nimport { Slideshow } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nexport default function SlideshowLayout({ children }: { children: React.ReactNode }) {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={false}\n showArrows={false}\n className=\"w-full h-full\"\n >\n {/* Children are the route-specific overlays */}\n {children}\n </Slideshow>\n );\n}\n";
|
|
11
21
|
/**
|
|
12
22
|
* Slideshow Tile Overlay Template
|
|
13
23
|
*
|
|
14
|
-
* Overlay-only component for tile view (
|
|
24
|
+
* Overlay-only component for tile view (256x554px).
|
|
15
25
|
* Slideshow is already mounted in the parent layout.
|
|
16
26
|
*
|
|
17
27
|
* File path: src/app/(slideshow)/tile/page.tsx
|
|
18
28
|
*/
|
|
19
|
-
export declare const slideshowTileOverlayTemplate = "'use client';\n\nimport {
|
|
29
|
+
export declare const slideshowTileOverlayTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';\n\nexport default function SlideshowTilePage() {\n \n if (!state.images || state.images.length === 0) {\n return (\n <div className=\"w-full h-full bg-black flex items-center justify-center\">\n <p className=\"text-white/60 text-sm\">No images configured</p>\n </div>\n );\n }\n\n return (\n <Slideshow\n images={state.images}\n autoAdvance={false} // No auto-cycling in tile mode - user swipes manually\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={false}\n showArrows={false}\n swipeable={true}\n className=\"w-full h-full\"\n >\n <TileOverlay />\n </Slideshow>\n );\n}\n\nfunction TileOverlay() {\n const tile = useTile();\n const { state, controls } = useSlideshowState();\n \n return (\n <>\n {/* Expand button - top right */}\n <div className=\"absolute top-3 right-3 z-20 pointer-events-auto\">\n <button\n onClick={() => tile.navigateToPage()}\n className=\"bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Expand to full view\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\" />\n </svg>\n </button>\n </div>\n\n {/* Slide counter - top left */}\n {state.totalSlides > 1 && (\n <div className=\"absolute top-3 left-3 z-10 pointer-events-none\">\n <div className=\"bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white font-medium\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </div>\n )}\n\n {/* Navigation dots at bottom */}\n {state.totalSlides > 1 && (\n <div className=\"absolute bottom-3 left-1/2 -translate-x-1/2 z-20 pointer-events-auto\">\n <div className=\"flex gap-1.5\">\n {state.images.map((_, index) => (\n <button\n key={index}\n onClick={() => controls.goTo(index)}\n disabled={state.isTransitioning}\n className={`w-2 h-2 rounded-full transition-colors ${\n index === state.currentIndex\n ? 'bg-white'\n : 'bg-white/40 hover:bg-white/60'\n }`}\n aria-label={`Go to slide ${index + 1}`}\n />\n ))}\n </div>\n </div>\n )}\n\n {/* Caption overlay */}\n {state.images[state.currentIndex]?.caption && (\n <div className=\"absolute bottom-10 left-3 right-3 z-10 pointer-events-none\">\n <div className=\"bg-black/50 backdrop-blur-sm px-3 py-2 rounded text-white text-sm\">\n {state.images[state.currentIndex].caption}\n </div>\n </div>\n )}\n </>\n );\n}\n";
|
|
20
30
|
/**
|
|
21
31
|
* Slideshow Page Overlay Template
|
|
22
32
|
*
|
|
@@ -25,7 +35,7 @@ export declare const slideshowTileOverlayTemplate = "'use client';\n\nimport { u
|
|
|
25
35
|
*
|
|
26
36
|
* File path: src/app/(slideshow)/page/page.tsx
|
|
27
37
|
*/
|
|
28
|
-
export declare const slideshowPageOverlayTemplate = "'use client';\n\nimport {
|
|
38
|
+
export declare const slideshowPageOverlayTemplate = "'use client';\n\nimport { useState, useEffect, useCallback } from 'react';\nimport { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';\n\nexport default function SlideshowPageView() {\n \n if (!state.images || state.images.length === 0) {\n return (\n <div className=\"w-full h-full bg-black flex items-center justify-center\">\n <p className=\"text-white/60 text-sm\">No images configured</p>\n </div>\n );\n }\n\n return (\n <Slideshow\n images={state.images}\n autoAdvance={true} // Always auto-cycle in page/fullscreen mode\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={true}\n showArrows={true}\n swipeable={true}\n className=\"w-full h-full object-cover\"\n >\n <PageOverlay />\n </Slideshow>\n );\n}\n\nfunction PageOverlay() {\n const tile = useTile();\n const { state, controls } = useSlideshowState();\n const [showControls, setShowControls] = useState(true);\n const [hideTimeout, setHideTimeout] = useState<NodeJS.Timeout | null>(null);\n\n // Auto-hide controls after 3 seconds when slideshow is playing\n const resetHideTimer = useCallback(() => {\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n }\n setShowControls(true);\n\n if (!state.isPaused) {\n const timeout = setTimeout(() => {\n setShowControls(false);\n }, 3000);\n setHideTimeout(timeout);\n }\n }, [state.isPaused, hideTimeout]);\n\n // Show controls when slideshow is paused\n useEffect(() => {\n if (state.isPaused) {\n setShowControls(true);\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n setHideTimeout(null);\n }\n } else {\n resetHideTimer();\n }\n }, [state.isPaused]);\n\n // Cleanup timeout on unmount\n useEffect(() => {\n return () => {\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n }\n };\n }, [hideTimeout]);\n\n // Toggle controls on tap/click\n const handleToggleControls = useCallback((e: React.MouseEvent | React.TouchEvent) => {\n const target = e.target as HTMLElement;\n if (target.closest('button, .controls-area')) {\n return;\n }\n e.preventDefault();\n\n if (showControls) {\n setShowControls(false);\n } else {\n resetHideTimer();\n }\n }, [showControls, resetHideTimer]);\n\n // Handle mouse movement to show controls\n const handleMouseMove = useCallback(() => {\n if (!state.isPaused) {\n resetHideTimer();\n }\n }, [state.isPaused, resetHideTimer]);\n\n return (\n <div\n className=\"absolute inset-0 z-20 pointer-events-auto\"\n onClick={handleToggleControls}\n onTouchEnd={handleToggleControls}\n onMouseMove={handleMouseMove}\n >\n {/* Controls - toggleable */}\n <div\n className={`controls-area transition-opacity duration-300 ${\n showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'\n }`}\n >\n {/* Top bar with slide counter and controls */}\n <div className=\"absolute top-0 left-0 right-0 h-20 bg-gradient-to-b from-black/60 to-transparent pointer-events-none\" />\n\n {/* Slide counter - top right */}\n {state.totalSlides > 1 && (\n <div className=\"absolute top-4 right-4 z-10 pointer-events-auto\">\n <div className=\"bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded text-sm text-white font-medium\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </div>\n )}\n\n {/* Play/Pause button - top left */}\n {state.totalSlides > 1 && (\n <div className=\"absolute top-4 left-4 z-20 pointer-events-auto\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n controls.toggle();\n }}\n className=\"bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label={state.isPaused ? 'Resume slideshow' : 'Pause slideshow'}\n >\n {state.isPaused ? (\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n ) : (\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\" />\n </svg>\n )}\n </button>\n </div>\n )}\n\n {/* Bottom bar with caption and minimize */}\n <div className=\"absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black/60 to-transparent pointer-events-none\" />\n\n {/* Caption overlay at bottom */}\n {state.images[state.currentIndex]?.caption && (\n <div className=\"absolute bottom-16 left-4 right-16 z-10 pointer-events-none\">\n <div className=\"text-white\">\n <p className=\"text-base drop-shadow-lg\">{state.images[state.currentIndex].caption}</p>\n {state.images[state.currentIndex]?.alt && (\n <p className=\"text-sm text-white/70 mt-1 drop-shadow-lg\">{state.images[state.currentIndex].alt}</p>\n )}\n </div>\n </div>\n )}\n\n {/* Minimize button - bottom right */}\n <div className=\"absolute bottom-4 right-4 z-20 pointer-events-auto\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n tile.navigateToTile();\n }}\n className=\"bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Minimize to tile\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20 12H4\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n );\n}\n";
|
|
29
39
|
/**
|
|
30
40
|
* Slideshow Preview Entry - Tile
|
|
31
41
|
*
|
|
@@ -34,7 +44,7 @@ export declare const slideshowPageOverlayTemplate = "'use client';\n\nimport { u
|
|
|
34
44
|
*
|
|
35
45
|
* File path: src/app/_preview/tile.tsx
|
|
36
46
|
*/
|
|
37
|
-
export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState,
|
|
47
|
+
export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction TileOverlay() {\n const tile = useTile();\n const { state, controls } = useSlideshowState();\n\n return (\n <>\n <div className=\"absolute top-3 right-3 z-20 pointer-events-auto\">\n <button\n onClick={() => tile.navigateToPage()}\n className=\"bg-black/40 backdrop-blur-sm p-2 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Expand to full view\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M4 8V4m0 0h4M4 4l5 5m11-1V4m0 0h-4m4 0l-5 5M4 16v4m0 0h4m-4 0l5-5m11 5l-5-5m5 5v-4m0 4h-4\" />\n </svg>\n </button>\n </div>\n\n {state.totalSlides > 1 && (\n <div className=\"absolute top-3 left-3 z-10 pointer-events-none\">\n <div className=\"bg-black/50 backdrop-blur-sm px-2 py-1 rounded text-xs text-white font-medium\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </div>\n )}\n\n {state.totalSlides > 1 && (\n <div className=\"absolute bottom-3 left-1/2 -translate-x-1/2 z-20 pointer-events-auto\">\n <div className=\"flex gap-1.5\">\n {state.images.map((_, index) => (\n <button\n key={index}\n onClick={() => controls.goTo(index)}\n disabled={state.isTransitioning}\n className={`w-2 h-2 rounded-full transition-colors ${\n index === state.currentIndex\n ? 'bg-white'\n : 'bg-white/40 hover:bg-white/60'\n }`}\n aria-label={`Go to slide ${index + 1}`}\n />\n ))}\n </div>\n </div>\n )}\n\n {state.images[state.currentIndex]?.caption && (\n <div className=\"absolute bottom-10 left-3 right-3 z-10 pointer-events-none\">\n <div className=\"bg-black/50 backdrop-blur-sm px-3 py-2 rounded text-white text-sm\">\n {state.images[state.currentIndex].caption}\n </div>\n </div>\n )}\n </>\n );\n}\n\nexport default function PreviewTile() {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={false}\n showArrows={false}\n className=\"w-full h-full\"\n >\n <TileOverlay />\n </Slideshow>\n );\n}\n";
|
|
38
48
|
/**
|
|
39
49
|
* Slideshow Preview Entry - Page
|
|
40
50
|
*
|
|
@@ -43,5 +53,5 @@ export declare const slideshowPreviewTileTemplate = "'use client';\n\nimport { S
|
|
|
43
53
|
*
|
|
44
54
|
* File path: src/app/_preview/page.tsx
|
|
45
55
|
*/
|
|
46
|
-
export declare const slideshowPreviewPageTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState,
|
|
56
|
+
export declare const slideshowPreviewPageTemplate = "'use client';\n\nimport { Slideshow, useSlideshowState, useTile } from '@thewhateverapp/tile-sdk';\nimport { useState, useEffect, useCallback } from 'react';\n\n// Slideshow configuration injected at generation time\nconst SLIDESHOW_CONFIG = __SLIDESHOW_CONFIG__;\n\nfunction PageOverlay() {\n const tile = useTile();\n const { state, controls } = useSlideshowState();\n const [showControls, setShowControls] = useState(true);\n const [hideTimeout, setHideTimeout] = useState<NodeJS.Timeout | null>(null);\n\n const resetHideTimer = useCallback(() => {\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n }\n setShowControls(true);\n\n if (!state.isPaused) {\n const timeout = setTimeout(() => {\n setShowControls(false);\n }, 3000);\n setHideTimeout(timeout);\n }\n }, [state.isPaused, hideTimeout]);\n\n useEffect(() => {\n if (state.isPaused) {\n setShowControls(true);\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n setHideTimeout(null);\n }\n } else {\n resetHideTimer();\n }\n }, [state.isPaused]);\n\n useEffect(() => {\n return () => {\n if (hideTimeout) {\n clearTimeout(hideTimeout);\n }\n };\n }, [hideTimeout]);\n\n const handleToggleControls = useCallback((e: React.MouseEvent | React.TouchEvent) => {\n const target = e.target as HTMLElement;\n if (target.closest('button, .controls-area')) {\n return;\n }\n e.preventDefault();\n\n if (showControls) {\n setShowControls(false);\n } else {\n resetHideTimer();\n }\n }, [showControls, resetHideTimer]);\n\n const handleMouseMove = useCallback(() => {\n if (!state.isPaused) {\n resetHideTimer();\n }\n }, [state.isPaused, resetHideTimer]);\n\n return (\n <div\n className=\"absolute inset-0 z-20 pointer-events-auto\"\n onClick={handleToggleControls}\n onTouchEnd={handleToggleControls}\n onMouseMove={handleMouseMove}\n >\n <div\n className={`controls-area transition-opacity duration-300 ${\n showControls ? 'opacity-100' : 'opacity-0 pointer-events-none'\n }`}\n >\n <div className=\"absolute top-0 left-0 right-0 h-20 bg-gradient-to-b from-black/60 to-transparent pointer-events-none\" />\n\n {state.totalSlides > 1 && (\n <div className=\"absolute top-4 right-4 z-10 pointer-events-auto\">\n <div className=\"bg-black/50 backdrop-blur-sm px-3 py-1.5 rounded text-sm text-white font-medium\">\n {state.currentIndex + 1} / {state.totalSlides}\n </div>\n </div>\n )}\n\n {state.totalSlides > 1 && (\n <div className=\"absolute top-4 left-4 z-20 pointer-events-auto\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n controls.toggle();\n }}\n className=\"bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label={state.isPaused ? 'Resume slideshow' : 'Pause slideshow'}\n >\n {state.isPaused ? (\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M8 5v14l11-7z\" />\n </svg>\n ) : (\n <svg className=\"w-5 h-5\" fill=\"currentColor\" viewBox=\"0 0 24 24\">\n <path d=\"M6 4h4v16H6V4zm8 0h4v16h-4V4z\" />\n </svg>\n )}\n </button>\n </div>\n )}\n\n <div className=\"absolute bottom-0 left-0 right-0 h-32 bg-gradient-to-t from-black/60 to-transparent pointer-events-none\" />\n\n {state.images[state.currentIndex]?.caption && (\n <div className=\"absolute bottom-16 left-4 right-16 z-10 pointer-events-none\">\n <div className=\"text-white\">\n <p className=\"text-base drop-shadow-lg\">{state.images[state.currentIndex].caption}</p>\n {state.images[state.currentIndex]?.alt && (\n <p className=\"text-sm text-white/70 mt-1 drop-shadow-lg\">{state.images[state.currentIndex].alt}</p>\n )}\n </div>\n </div>\n )}\n\n <div className=\"absolute bottom-4 right-4 z-20 pointer-events-auto\">\n <button\n onClick={(e) => {\n e.stopPropagation();\n tile.navigateToTile();\n }}\n className=\"bg-black/40 backdrop-blur-sm p-2.5 rounded-full text-white hover:bg-black/60 transition-colors\"\n aria-label=\"Minimize to tile\"\n >\n <svg className=\"w-5 h-5\" fill=\"none\" stroke=\"currentColor\" viewBox=\"0 0 24 24\">\n <path strokeLinecap=\"round\" strokeLinejoin=\"round\" strokeWidth={2} d=\"M20 12H4\" />\n </svg>\n </button>\n </div>\n </div>\n </div>\n );\n}\n\nexport default function PreviewPage() {\n return (\n <Slideshow\n images={SLIDESHOW_CONFIG.images}\n autoAdvance={SLIDESHOW_CONFIG.autoAdvance}\n intervalMs={SLIDESHOW_CONFIG.intervalMs}\n transition={SLIDESHOW_CONFIG.transition}\n showDots={true}\n showArrows={true}\n swipeable={true}\n className=\"w-full h-full object-cover\"\n >\n <PageOverlay />\n </Slideshow>\n );\n}\n";
|
|
47
57
|
//# sourceMappingURL=layout.tsx.template.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/layout.tsx.template.ts"],"names":[],"mappings":"AAAA
|
|
1
|
+
{"version":3,"file":"layout.tsx.template.d.ts","sourceRoot":"","sources":["../../../src/templates/slideshow/layout.tsx.template.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;GAUG;AAEH;;;;;;;GAOG;AACH,eAAO,MAAM,uBAAuB,wqBAuBnC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,0mGA0FxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,m/LAmLxC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,qwFA+ExC,CAAC;AAEF;;;;;;;GAOG;AACH,eAAO,MAAM,4BAA4B,myKAiKxC,CAAC"}
|