@thewhateverapp/tile-sdk 0.12.4 → 0.12.5
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.
|
@@ -79,12 +79,19 @@ export interface VideoPlayerProps {
|
|
|
79
79
|
* Provides video state and controls to child overlays via context.
|
|
80
80
|
*
|
|
81
81
|
* Features:
|
|
82
|
-
* -
|
|
82
|
+
* - Video URL is injected at build time via NEXT_PUBLIC env vars (no API call!)
|
|
83
83
|
* - HLS streaming with automatic quality adaptation
|
|
84
|
+
* - Falls back to original video URL if transcoding not complete
|
|
84
85
|
* - Time-based cue points for triggering overlays
|
|
85
86
|
* - Visibility-aware playback (plays when visible, pauses when hidden)
|
|
86
87
|
* - Auto-loops by default (can be disabled via tile metadata)
|
|
87
88
|
*
|
|
89
|
+
* Environment Variables (set at build time by tile-deploy):
|
|
90
|
+
* - NEXT_PUBLIC_VIDEO_HLS_URL - HLS streaming URL
|
|
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
|
|
94
|
+
*
|
|
88
95
|
* Usage:
|
|
89
96
|
* ```tsx
|
|
90
97
|
* <VideoPlayer className="w-full h-full">
|
|
@@ -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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"}
|
|
@@ -1,41 +1,57 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import React, { createContext, useContext, useEffect, useRef, useState, useCallback, } from 'react';
|
|
3
3
|
import { getTileBridge } from '../../bridge/TileBridge';
|
|
4
|
-
// Cache for video metadata to avoid repeated fetches
|
|
5
|
-
const videoMetadataCache = new Map();
|
|
6
4
|
/**
|
|
7
|
-
* Get
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
*
|
|
5
|
+
* Get video metadata from NEXT_PUBLIC environment variables.
|
|
6
|
+
* These are injected at build time by tile-deploy for video tiles.
|
|
7
|
+
*
|
|
8
|
+
* Environment variables used:
|
|
9
|
+
* - NEXT_PUBLIC_TILE_ID - Tile identifier
|
|
10
|
+
* - NEXT_PUBLIC_VIDEO_HLS_URL - HLS streaming URL (preferred)
|
|
11
|
+
* - NEXT_PUBLIC_VIDEO_ORIGINAL_URL - Original video URL (fallback)
|
|
12
|
+
* - NEXT_PUBLIC_VIDEO_THUMBNAIL - Thumbnail image URL
|
|
13
|
+
* - NEXT_PUBLIC_VIDEO_DURATION - Video duration in seconds
|
|
14
|
+
* - NEXT_PUBLIC_VIDEO_TITLE - Video title
|
|
15
|
+
* - NEXT_PUBLIC_VIDEO_AUTOPLAY - Auto-play setting (default: true)
|
|
16
|
+
* - NEXT_PUBLIC_VIDEO_LOOP - Loop setting (default: true)
|
|
17
|
+
* - NEXT_PUBLIC_VIDEO_MUTED - Muted setting (default: true)
|
|
18
|
+
* - NEXT_PUBLIC_VIDEO_TRANSCODING_COMPLETE - Transcoding status
|
|
17
19
|
*/
|
|
18
|
-
|
|
19
|
-
// Check
|
|
20
|
-
if (
|
|
21
|
-
return
|
|
20
|
+
function getVideoMetadataFromEnv() {
|
|
21
|
+
// Check if we're in a Next.js environment with process.env
|
|
22
|
+
if (typeof process === 'undefined' || !process.env) {
|
|
23
|
+
return null;
|
|
22
24
|
}
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
const response = await fetch(`${apiBase}/platform/tiles/${tileId}/video-metadata`);
|
|
27
|
-
if (!response.ok) {
|
|
28
|
-
console.error(`[VideoPlayer] Failed to fetch video metadata: ${response.status}`);
|
|
29
|
-
return null;
|
|
30
|
-
}
|
|
31
|
-
const metadata = await response.json();
|
|
32
|
-
videoMetadataCache.set(tileId, metadata);
|
|
33
|
-
return metadata;
|
|
25
|
+
const tileId = process.env.NEXT_PUBLIC_TILE_ID;
|
|
26
|
+
if (!tileId) {
|
|
27
|
+
return null;
|
|
34
28
|
}
|
|
35
|
-
|
|
36
|
-
|
|
29
|
+
const hlsUrl = process.env.NEXT_PUBLIC_VIDEO_HLS_URL || null;
|
|
30
|
+
const originalUrl = process.env.NEXT_PUBLIC_VIDEO_ORIGINAL_URL || null;
|
|
31
|
+
// If neither URL is available, this isn't a video tile
|
|
32
|
+
if (!hlsUrl && !originalUrl) {
|
|
37
33
|
return null;
|
|
38
34
|
}
|
|
35
|
+
// Prefer HLS URL if available and transcoding is complete, otherwise use original
|
|
36
|
+
const transcodingComplete = process.env.NEXT_PUBLIC_VIDEO_TRANSCODING_COMPLETE === 'true';
|
|
37
|
+
const videoUrl = (hlsUrl && transcodingComplete) ? hlsUrl : (originalUrl || hlsUrl);
|
|
38
|
+
return {
|
|
39
|
+
tileId,
|
|
40
|
+
hlsUrl,
|
|
41
|
+
originalUrl,
|
|
42
|
+
videoUrl,
|
|
43
|
+
transcodingComplete,
|
|
44
|
+
thumbnail: process.env.NEXT_PUBLIC_VIDEO_THUMBNAIL || null,
|
|
45
|
+
duration: process.env.NEXT_PUBLIC_VIDEO_DURATION
|
|
46
|
+
? parseFloat(process.env.NEXT_PUBLIC_VIDEO_DURATION)
|
|
47
|
+
: null,
|
|
48
|
+
title: process.env.NEXT_PUBLIC_VIDEO_TITLE || null,
|
|
49
|
+
// Default to true for autoplay and muted (better for mobile autoplay policies)
|
|
50
|
+
autoplay: process.env.NEXT_PUBLIC_VIDEO_AUTOPLAY !== 'false',
|
|
51
|
+
// Default to true for loop (most video tiles loop)
|
|
52
|
+
loop: process.env.NEXT_PUBLIC_VIDEO_LOOP !== 'false',
|
|
53
|
+
muted: process.env.NEXT_PUBLIC_VIDEO_MUTED !== 'false',
|
|
54
|
+
};
|
|
39
55
|
}
|
|
40
56
|
const VideoContext = createContext(null);
|
|
41
57
|
/**
|
|
@@ -43,12 +59,19 @@ const VideoContext = createContext(null);
|
|
|
43
59
|
* Provides video state and controls to child overlays via context.
|
|
44
60
|
*
|
|
45
61
|
* Features:
|
|
46
|
-
* -
|
|
62
|
+
* - Video URL is injected at build time via NEXT_PUBLIC env vars (no API call!)
|
|
47
63
|
* - HLS streaming with automatic quality adaptation
|
|
64
|
+
* - Falls back to original video URL if transcoding not complete
|
|
48
65
|
* - Time-based cue points for triggering overlays
|
|
49
66
|
* - Visibility-aware playback (plays when visible, pauses when hidden)
|
|
50
67
|
* - Auto-loops by default (can be disabled via tile metadata)
|
|
51
68
|
*
|
|
69
|
+
* Environment Variables (set at build time by tile-deploy):
|
|
70
|
+
* - NEXT_PUBLIC_VIDEO_HLS_URL - HLS streaming URL
|
|
71
|
+
* - NEXT_PUBLIC_VIDEO_ORIGINAL_URL - Original video URL (fallback)
|
|
72
|
+
* - NEXT_PUBLIC_VIDEO_THUMBNAIL - Poster image
|
|
73
|
+
* - NEXT_PUBLIC_VIDEO_AUTOPLAY/LOOP/MUTED - Playback settings
|
|
74
|
+
*
|
|
52
75
|
* Usage:
|
|
53
76
|
* ```tsx
|
|
54
77
|
* <VideoPlayer className="w-full h-full">
|
|
@@ -61,29 +84,28 @@ export function VideoPlayer({ controls = false, children, className = '', videoC
|
|
|
61
84
|
const hlsRef = useRef(null);
|
|
62
85
|
const triggeredCuePointsRef = useRef(new Set());
|
|
63
86
|
const lastTimeRef = useRef(0);
|
|
64
|
-
// State for
|
|
87
|
+
// State for video metadata (from env vars, set at build time)
|
|
65
88
|
const [metadata, setMetadata] = useState(null);
|
|
66
89
|
const [metadataError, setMetadataError] = useState(null);
|
|
67
|
-
//
|
|
90
|
+
// Get video metadata from environment variables (set at build time by tile-deploy)
|
|
91
|
+
// This is synchronous - no API call needed!
|
|
68
92
|
useEffect(() => {
|
|
69
|
-
const
|
|
70
|
-
if (!
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
fetchVideoMetadata(tileId).then((data) => {
|
|
75
|
-
if (data) {
|
|
76
|
-
if (data.videoUrl) {
|
|
77
|
-
setMetadata(data);
|
|
78
|
-
}
|
|
79
|
-
else {
|
|
80
|
-
setMetadataError('No video URL found in tile metadata');
|
|
81
|
-
}
|
|
93
|
+
const envMetadata = getVideoMetadataFromEnv();
|
|
94
|
+
if (!envMetadata) {
|
|
95
|
+
// Check if TILE_ID is set - if not, likely a dev environment issue
|
|
96
|
+
if (typeof process !== 'undefined' && !process.env?.NEXT_PUBLIC_TILE_ID) {
|
|
97
|
+
setMetadataError('NEXT_PUBLIC_TILE_ID not set');
|
|
82
98
|
}
|
|
83
99
|
else {
|
|
84
|
-
setMetadataError('
|
|
100
|
+
setMetadataError('No video metadata found in environment variables');
|
|
85
101
|
}
|
|
86
|
-
|
|
102
|
+
return;
|
|
103
|
+
}
|
|
104
|
+
if (!envMetadata.videoUrl) {
|
|
105
|
+
setMetadataError('No video URL found in environment variables');
|
|
106
|
+
return;
|
|
107
|
+
}
|
|
108
|
+
setMetadata(envMetadata);
|
|
87
109
|
}, []);
|
|
88
110
|
// Get values from metadata
|
|
89
111
|
const src = metadata?.videoUrl || null;
|