@sansavision/create-vidra-app 0.1.21-alpha.0 → 0.1.22-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@sansavision/create-vidra-app",
-    "version": "0.1.21-alpha.0",
+    "version": "0.1.22-alpha.0",
     "description": "Scaffold a new Vidra video project — SDK, Player, Web Capture ready to go",
     "bin": {
         "create-vidra-app": "./index.js"

package/template/src/components/WebSceneMode.tsx

@@ -1,9 +1,44 @@
-import { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { useState, useEffect, useRef, useCallback } from 'react';
 import { Play, Pause, RotateCcw, Eye, Zap, ArrowRight, Camera } from 'lucide-react';
 
 const ANIMATION_DURATION = 3.0; // seconds — total animation length
 const CAPTURE_FPS = 30;
 
+// Color palette for randomized bars
+const BAR_COLORS = [
+    '#3b82f6', '#22c55e', '#a855f7', '#f97316', '#ec4899',
+    '#06b6d4', '#eab308', '#ef4444', '#8b5cf6', '#14b8a6',
+];
+const BAR_LABELS = [
+    ['Q1', 'Q2', 'Q3', 'Q4', 'Q5'],
+    ['Jan', 'Feb', 'Mar', 'Apr', 'May'],
+    ['Mon', 'Tue', 'Wed', 'Thu', 'Fri'],
+    ['US', 'EU', 'UK', 'JP', 'AU'],
+    ['Web', 'iOS', 'Droid', 'Mac', 'Win'],
+    ['Alpha', 'Beta', 'Gamma', 'Delta', 'Zeta'],
+];
+const CHART_TITLES = [
+    'Revenue by Quarter', 'Monthly Sales', 'Weekly Traffic',
+    'Regional Revenue', 'Platform Users', 'Release Metrics',
+];
+
+/** Generate random bar chart data */
+function generateRandomData(): { title: string; bars: BarData[] } {
+    const labelSetIdx = Math.floor(Math.random() * BAR_LABELS.length);
+    const labels = BAR_LABELS[labelSetIdx];
+    const title = CHART_TITLES[labelSetIdx];
+    // Shuffle colors
+    const shuffled = [...BAR_COLORS].sort(() => Math.random() - 0.5);
+    return {
+        title,
+        bars: labels.map((label, i) => ({
+            label,
+            value: 20 + Math.floor(Math.random() * 80), // 20–99
+            color: shuffled[i % shuffled.length],
+        })),
+    };
+}
+
 interface BarData {
     label: string;
     value: number;
@@ -14,12 +49,12 @@ interface BarData {
  * Animated bar chart React component — the "source" web scene.
  * Used in both live and captured views — content is pixel-identical.
  */
-function AnimatedBarChart({ time, data, label }: { time: number; data: BarData[]; label?: string }) {
+function AnimatedBarChart({ time, data, title, label }: { time: number; data: BarData[]; title: string; label?: string }) {
     const maxVal = Math.max(...data.map((d: BarData) => d.value));
 
     return (
         <div className="w-full bg-gradient-to-br from-[#0f172a] to-[#1e293b] rounded-2xl p-6 border border-white/10 shadow-xl shadow-black/30">
-            <h3 className="text-lg font-bold text-white mb-1 text-center">Revenue by Quarter</h3>
+            <h3 className="text-lg font-bold text-white mb-1 text-center">{title}</h3>
             {label && (
                 <p className="text-[11px] text-blue-300/50 text-center mb-6">
                     {label}
@@ -76,13 +111,8 @@ export default function WebSceneMode() {
     const currentFrame = Math.floor(time * CAPTURE_FPS);
     const totalFrames = ANIMATION_DURATION * CAPTURE_FPS;
 
-    const data = useMemo<BarData[]>(() => [
-        { label: 'Q1', value: 45, color: '#3b82f6' },
-        { label: 'Q2', value: 72, color: '#22c55e' },
-        { label: 'Q3', value: 58, color: '#a855f7' },
-        { label: 'Q4', value: 91, color: '#f97316' },
-        { label: 'Q5', value: 68, color: '#ec4899' },
-    ], []);
+    // Randomized data — new values every playback to prove it's live
+    const [chartData, setChartData] = useState(() => generateRandomData());
 
     // Animation loop
     const animate = useCallback(() => {
@@ -110,6 +140,7 @@ export default function WebSceneMode() {
 
     const restart = useCallback(() => {
         cancelAnimationFrame(rafRef.current);
+        setChartData(generateRandomData()); // new random data each playback!
         setTime(0);
         startRef.current = performance.now();
         setIsPlaying(true);
@@ -155,7 +186,8 @@ export default function WebSceneMode() {
                     <div className="w-full max-w-2xl">
                         <AnimatedBarChart
                             time={time}
-                            data={data}
+                            data={chartData.bars}
+                            title={chartData.title}
                             label="React component + requestAnimationFrame"
                         />
                     </div>
@@ -174,7 +206,8 @@ export default function WebSceneMode() {
                             </div>
                             <AnimatedBarChart
                                 time={time}
-                                data={data}
+                                data={chartData.bars}
+                                title={chartData.title}
                                 label="Live — continuous requestAnimationFrame"
                             />
                         </div>
@@ -204,7 +237,8 @@ export default function WebSceneMode() {
                             <div className="relative">
                                 <AnimatedBarChart
                                     time={capturedTime}
-                                    data={data}
+                                    data={chartData.bars}
+                                    title={chartData.title}
                                     label={`Frame ${currentFrame} — t = ${capturedTime.toFixed(3)}s`}
                                 />
                                 {/* Subtle scan-line overlay to visually distinguish captured output */}