@thewhateverapp/tile-sdk 0.12.22 → 0.13.1
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/index.d.ts +4 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +5 -4
- package/dist/react/overlay/Slideshow.d.ts +62 -2
- package/dist/react/overlay/Slideshow.d.ts.map +1 -1
- package/dist/react/overlay/Slideshow.js +218 -68
- package/dist/react/overlay/VideoPlayer.d.ts +61 -80
- package/dist/react/overlay/VideoPlayer.d.ts.map +1 -1
- package/dist/react/overlay/VideoPlayer.js +353 -430
- package/dist/react/overlay/index.d.ts +3 -2
- package/dist/react/overlay/index.d.ts.map +1 -1
- package/dist/react/overlay/index.js +6 -4
- package/package.json +1 -1
|
@@ -1,4 +1,11 @@
|
|
|
1
1
|
import React, { type ReactNode } from 'react';
|
|
2
|
+
declare global {
|
|
3
|
+
interface Window {
|
|
4
|
+
__videoElement?: HTMLVideoElement;
|
|
5
|
+
__videoHls?: HlsInstance;
|
|
6
|
+
__videoSingleton?: VideoSingletonClass;
|
|
7
|
+
}
|
|
8
|
+
}
|
|
2
9
|
interface HlsInstance {
|
|
3
10
|
loadSource: (url: string) => void;
|
|
4
11
|
attachMedia: (video: HTMLVideoElement) => void;
|
|
@@ -37,6 +44,55 @@ export interface VideoState {
|
|
|
37
44
|
isLoading: boolean;
|
|
38
45
|
error: string | null;
|
|
39
46
|
}
|
|
47
|
+
type StateCallback = (state: VideoState) => void;
|
|
48
|
+
/**
|
|
49
|
+
* VideoSingleton - Manages a persistent video element across route changes.
|
|
50
|
+
*
|
|
51
|
+
* The video element is stored on `window.__videoElement` and survives
|
|
52
|
+
* Next.js soft navigations. When navigating from /tile to /page,
|
|
53
|
+
* the video keeps playing seamlessly.
|
|
54
|
+
*/
|
|
55
|
+
declare class VideoSingletonClass {
|
|
56
|
+
private stateCallbacks;
|
|
57
|
+
private currentState;
|
|
58
|
+
private currentSrc;
|
|
59
|
+
private hlsScriptLoaded;
|
|
60
|
+
private visibilitySetup;
|
|
61
|
+
/**
|
|
62
|
+
* Get or create the persistent video element
|
|
63
|
+
*/
|
|
64
|
+
getVideo(): HTMLVideoElement;
|
|
65
|
+
/**
|
|
66
|
+
* Load a video source (supports HLS and regular video)
|
|
67
|
+
*/
|
|
68
|
+
loadSource(src: string, poster?: string): Promise<void>;
|
|
69
|
+
/**
|
|
70
|
+
* Load HLS stream using hls.js
|
|
71
|
+
*/
|
|
72
|
+
private loadHls;
|
|
73
|
+
/**
|
|
74
|
+
* Set up visibility handling via TileBridge
|
|
75
|
+
*/
|
|
76
|
+
setupVisibilityHandling(): void;
|
|
77
|
+
/**
|
|
78
|
+
* Attach video element to a container (moves existing element)
|
|
79
|
+
*/
|
|
80
|
+
attachTo(container: HTMLElement): void;
|
|
81
|
+
/**
|
|
82
|
+
* Get video element reference (for external use)
|
|
83
|
+
*/
|
|
84
|
+
getVideoRef(): HTMLVideoElement;
|
|
85
|
+
play(): void;
|
|
86
|
+
pause(): void;
|
|
87
|
+
toggle(): void;
|
|
88
|
+
seek(time: number): void;
|
|
89
|
+
setMuted(muted: boolean): void;
|
|
90
|
+
setVolume(volume: number): void;
|
|
91
|
+
setLoop(loop: boolean): void;
|
|
92
|
+
getState(): VideoState;
|
|
93
|
+
onStateChange(callback: StateCallback): () => void;
|
|
94
|
+
private updateState;
|
|
95
|
+
}
|
|
40
96
|
export interface VideoControls {
|
|
41
97
|
play: () => void;
|
|
42
98
|
pause: () => void;
|
|
@@ -51,46 +107,24 @@ export interface VideoContextValue {
|
|
|
51
107
|
videoRef: React.RefObject<HTMLVideoElement>;
|
|
52
108
|
}
|
|
53
109
|
export interface CuePoint {
|
|
54
|
-
/** Time in seconds when the cue should trigger */
|
|
55
110
|
time: number;
|
|
56
|
-
/** Unique identifier for the cue point */
|
|
57
111
|
id: string;
|
|
58
|
-
/** Optional data to pass to the callback */
|
|
59
112
|
data?: unknown;
|
|
60
113
|
}
|
|
61
114
|
export interface VideoPlayerProps {
|
|
62
|
-
/** Children rendered as overlay */
|
|
63
115
|
children?: ReactNode;
|
|
64
|
-
/** Additional class names */
|
|
65
116
|
className?: string;
|
|
66
|
-
/** Video wrapper class names */
|
|
67
117
|
videoClassName?: string;
|
|
68
|
-
/** Show native controls (default: false) */
|
|
69
118
|
controls?: boolean;
|
|
70
|
-
/** Cue points for time-based triggers */
|
|
71
119
|
cuePoints?: CuePoint[];
|
|
72
|
-
/** Callback when a cue point is reached */
|
|
73
120
|
onCuePoint?: (cuePoint: CuePoint) => void;
|
|
74
|
-
/** Callback on time update (fires ~4 times per second) */
|
|
75
121
|
onTimeUpdate?: (currentTime: number, duration: number) => void;
|
|
76
122
|
}
|
|
77
123
|
/**
|
|
78
|
-
* VideoPlayer component with HLS streaming support.
|
|
79
|
-
* Provides video state and controls to child overlays via context.
|
|
80
|
-
*
|
|
81
|
-
* Features:
|
|
82
|
-
* - Video URL is injected at build time via NEXT_PUBLIC env vars (no API call!)
|
|
83
|
-
* - HLS streaming with automatic quality adaptation
|
|
84
|
-
* - Falls back to original video URL if transcoding not complete
|
|
85
|
-
* - Time-based cue points for triggering overlays
|
|
86
|
-
* - Visibility-aware playback (plays when visible, pauses when hidden)
|
|
87
|
-
* - Auto-loops by default (can be disabled via tile metadata)
|
|
124
|
+
* VideoPlayer component with HLS streaming support and route persistence.
|
|
88
125
|
*
|
|
89
|
-
*
|
|
90
|
-
*
|
|
91
|
-
* - NEXT_PUBLIC_VIDEO_ORIGINAL_URL - Original video URL (fallback)
|
|
92
|
-
* - NEXT_PUBLIC_VIDEO_THUMBNAIL - Poster image
|
|
93
|
-
* - NEXT_PUBLIC_VIDEO_AUTOPLAY/LOOP/MUTED - Playback settings
|
|
126
|
+
* The video element persists across Next.js route changes (tile ↔ page).
|
|
127
|
+
* Video URL is read from NEXT_PUBLIC env vars (set at build time).
|
|
94
128
|
*
|
|
95
129
|
* Usage:
|
|
96
130
|
* ```tsx
|
|
@@ -102,82 +136,29 @@ export interface VideoPlayerProps {
|
|
|
102
136
|
export declare function VideoPlayer({ controls, children, className, videoClassName, cuePoints, onCuePoint, onTimeUpdate, }: VideoPlayerProps): React.JSX.Element;
|
|
103
137
|
/**
|
|
104
138
|
* Hook to access video state and controls from within VideoPlayer children.
|
|
139
|
+
* Also aliased as useVideo for compatibility.
|
|
105
140
|
*/
|
|
106
141
|
export declare function useVideoState(): VideoContextValue;
|
|
142
|
+
export declare const useVideo: typeof useVideoState;
|
|
107
143
|
/**
|
|
108
144
|
* Hook to trigger an action when a specific time is reached.
|
|
109
|
-
* Returns true when the video has reached or passed the specified time.
|
|
110
|
-
*
|
|
111
|
-
* @param triggerTime - Time in seconds when to trigger
|
|
112
|
-
* @param options - Configuration options
|
|
113
|
-
* @returns boolean indicating if the trigger time has been reached
|
|
114
|
-
*
|
|
115
|
-
* @example
|
|
116
|
-
* ```tsx
|
|
117
|
-
* function PollOverlay() {
|
|
118
|
-
* const showPoll = useCuePoint(5); // Show after 5 seconds
|
|
119
|
-
* return showPoll ? <Poll /> : null;
|
|
120
|
-
* }
|
|
121
|
-
* ```
|
|
122
145
|
*/
|
|
123
146
|
export declare function useCuePoint(triggerTime: number, options?: {
|
|
124
|
-
/** Reset trigger when video loops (default: true) */
|
|
125
147
|
resetOnLoop?: boolean;
|
|
126
|
-
/** Trigger once or every time the time is crossed (default: 'once') */
|
|
127
148
|
mode?: 'once' | 'every-loop';
|
|
128
149
|
}): boolean;
|
|
129
150
|
/**
|
|
130
151
|
* Hook to manage multiple cue points with callbacks.
|
|
131
|
-
* More flexible than useCuePoint for complex time-based interactions.
|
|
132
|
-
*
|
|
133
|
-
* @param cuePoints - Array of cue points with times and callbacks
|
|
134
|
-
* @param options - Configuration options
|
|
135
|
-
*
|
|
136
|
-
* @example
|
|
137
|
-
* ```tsx
|
|
138
|
-
* function InteractiveOverlay() {
|
|
139
|
-
* const [showPoll, setShowPoll] = useState(false);
|
|
140
|
-
* const [showCTA, setShowCTA] = useState(false);
|
|
141
|
-
*
|
|
142
|
-
* useCuePoints([
|
|
143
|
-
* { time: 5, onTrigger: () => setShowPoll(true) },
|
|
144
|
-
* { time: 10, onTrigger: () => setShowCTA(true) },
|
|
145
|
-
* { time: 15, onTrigger: () => { setShowPoll(false); setShowCTA(false); } },
|
|
146
|
-
* ]);
|
|
147
|
-
*
|
|
148
|
-
* return (
|
|
149
|
-
* <>
|
|
150
|
-
* {showPoll && <Poll />}
|
|
151
|
-
* {showCTA && <CTAButton />}
|
|
152
|
-
* </>
|
|
153
|
-
* );
|
|
154
|
-
* }
|
|
155
|
-
* ```
|
|
156
152
|
*/
|
|
157
153
|
export declare function useCuePoints(cuePoints: Array<{
|
|
158
|
-
/** Time in seconds when to trigger */
|
|
159
154
|
time: number;
|
|
160
|
-
/** Callback to execute when time is reached */
|
|
161
155
|
onTrigger: () => void;
|
|
162
|
-
/** Optional unique ID (defaults to index) */
|
|
163
156
|
id?: string;
|
|
164
157
|
}>, options?: {
|
|
165
|
-
/** Reset triggers when video loops (default: true) */
|
|
166
158
|
resetOnLoop?: boolean;
|
|
167
159
|
}): void;
|
|
168
160
|
/**
|
|
169
161
|
* Hook to get the current video progress as a percentage (0-100).
|
|
170
|
-
* Useful for progress bars or time-based animations.
|
|
171
|
-
*
|
|
172
|
-
* @returns Progress percentage (0-100)
|
|
173
|
-
*
|
|
174
|
-
* @example
|
|
175
|
-
* ```tsx
|
|
176
|
-
* function ProgressBar() {
|
|
177
|
-
* const progress = useVideoProgress();
|
|
178
|
-
* return <div style={{ width: `${progress}%` }} className="h-1 bg-white" />;
|
|
179
|
-
* }
|
|
180
|
-
* ```
|
|
181
162
|
*/
|
|
182
163
|
export declare function useVideoProgress(): number;
|
|
183
164
|
export {};
|
|
@@ -1 +1 @@
|
|
|
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;
|
|
1
|
+
{"version":3,"file":"VideoPlayer.d.ts","sourceRoot":"","sources":["../../../src/react/overlay/VideoPlayer.tsx"],"names":[],"mappings":"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"}
|