@industry-theme/file-city-panel 0.2.80 → 0.3.1

package/dist/panels.bundle.js

@@ -50650,13 +50650,22 @@ const TourPlayer = ({
   onInteractiveAction,
   visible = true,
   position,
-  skipWelcome = false
+  skipWelcome = false,
+  ttsAdapter,
+  tourAudioContext,
+  autoPlayAudio = false,
+  autoAdvanceOnAudioEnd = false,
+  autoAdvanceDelay = 1e3
 }) => {
   const { theme: theme2 } = useTheme();
   const [internalStepIndex, setInternalStepIndex] = useState(0);
   const [completedSteps, setCompletedSteps] = useState(/* @__PURE__ */ new Set());
   const [isPlaying, setIsPlaying] = useState(skipWelcome);
   const [autoAdvanceTimeRemaining, setAutoAdvanceTimeRemaining] = useState(null);
+  const [ttsState, setTtsState] = useState((ttsAdapter == null ? void 0 : ttsAdapter.state) || null);
+  const [audioReady, setAudioReady] = useState(false);
+  const [isAutoPlaying, setIsAutoPlaying] = useState(false);
+  const ttsStateUpdateInterval = useRef(null);
   const currentStepIndex = controlledStepIndex !== void 0 ? controlledStepIndex : internalStepIndex;
   const currentStep = tour.steps[currentStepIndex];
   const isFirstStep = currentStepIndex === 0;
@@ -50722,6 +50731,100 @@ const TourPlayer = ({
     },
     [onInteractiveAction]
   );
+  useEffect(() => {
+    if (!ttsAdapter || !tourAudioContext) return;
+    async function loadAudio() {
+      try {
+        const stepIds = tour.steps.map((step) => step.id);
+        await ttsAdapter.fetchTourAudio(tour.id, stepIds, tourAudioContext);
+        setAudioReady(true);
+      } catch (error) {
+        console.error("[TourPlayer] Failed to load tour audio:", error);
+      }
+    }
+    loadAudio();
+  }, [ttsAdapter, tourAudioContext, tour]);
+  useEffect(() => {
+    if (!ttsAdapter) return;
+    ttsStateUpdateInterval.current = setInterval(() => {
+      setTtsState({ ...ttsAdapter.state });
+    }, 100);
+    return () => {
+      if (ttsStateUpdateInterval.current) {
+        clearInterval(ttsStateUpdateInterval.current);
+        ttsStateUpdateInterval.current = null;
+      }
+    };
+  }, [ttsAdapter]);
+  useEffect(() => {
+    if (!ttsAdapter || !autoAdvanceOnAudioEnd || !isAutoPlaying) return;
+    const handleAudioEnded = () => {
+      console.log("[TourPlayer] Audio ended, auto-advancing...");
+      setTimeout(() => {
+        if (!isLastStep) {
+          nextStep();
+        } else {
+          console.log("[TourPlayer] Tour complete");
+          setIsAutoPlaying(false);
+          handleExit();
+        }
+      }, autoAdvanceDelay);
+    };
+    ttsAdapter.addEventListener("ended", handleAudioEnded);
+    return () => ttsAdapter.removeEventListener("ended", handleAudioEnded);
+  }, [ttsAdapter, autoAdvanceOnAudioEnd, isAutoPlaying, isLastStep, autoAdvanceDelay, nextStep, handleExit]);
+  useEffect(() => {
+    if (!ttsAdapter || !autoPlayAudio || !isPlaying || !audioReady || !isAutoPlaying) return;
+    const playCurrentStep = async () => {
+      try {
+        await ttsAdapter.speak(currentStep.id);
+      } catch (error) {
+        console.error("[TourPlayer] Auto-play failed:", error);
+        setIsAutoPlaying(false);
+      }
+    };
+    playCurrentStep();
+  }, [ttsAdapter, autoPlayAudio, currentStep == null ? void 0 : currentStep.id, isPlaying, audioReady, isAutoPlaying]);
+  useEffect(() => {
+    return () => {
+      if (ttsAdapter) {
+        ttsAdapter.stop();
+      }
+    };
+  }, [ttsAdapter]);
+  const handleReadAloud = useCallback(async () => {
+    if (!ttsAdapter || !audioReady) return;
+    if (ttsState == null ? void 0 : ttsState.isPlaying) {
+      ttsAdapter.stop();
+      return;
+    }
+    if (ttsState == null ? void 0 : ttsState.isPaused) {
+      ttsAdapter.resume();
+      return;
+    }
+    try {
+      await ttsAdapter.speak(currentStep.id);
+    } catch (error) {
+      console.error("[TourPlayer] TTS failed:", error);
+    }
+  }, [ttsAdapter, ttsState, audioReady, currentStep == null ? void 0 : currentStep.id]);
+  const toggleAutoPlay = useCallback(() => {
+    if (!ttsAdapter || !audioReady) return;
+    if (isAutoPlaying) {
+      setIsAutoPlaying(false);
+      ttsAdapter.stop();
+    } else {
+      setIsAutoPlaying(true);
+      ttsAdapter.speak(currentStep.id);
+    }
+  }, [isAutoPlaying, ttsAdapter, audioReady, currentStep == null ? void 0 : currentStep.id]);
+  const formatTime = (seconds) => {
+    const mins = Math.floor(seconds / 60);
+    const secs = Math.floor(seconds % 60);
+    return `${mins}:${secs.toString().padStart(2, "0")}`;
+  };
+  const showTTSControls = !!ttsAdapter && audioReady;
+  const canAutoPlay = autoPlayAudio && autoAdvanceOnAudioEnd;
   if (!visible) return null;
   const useAbsolutePositioning = position === "top" || position === "overlay";
   const absoluteContainerStyle = {
@@ -50980,6 +51083,40 @@ const TourPlayer = ({
                     "Start Tour"
                   ]
                 }
+              ),
+              showTTSControls && canAutoPlay && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: () => {
+                    handleStart();
+                    setIsAutoPlaying(true);
+                  },
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    padding: "8px 16px",
+                    backgroundColor: theme2.colors.accent,
+                    color: "#ffffff",
+                    border: "none",
+                    borderRadius: "6px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    fontWeight: 600,
+                    cursor: "pointer",
+                    transition: "all 0.2s"
+                  },
+                  onMouseEnter: (e) => {
+                    e.currentTarget.style.backgroundColor = theme2.colors.accent + "dd";
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = theme2.colors.accent;
+                  },
+                  children: [
+                    /* @__PURE__ */ jsx(Volume2, { size: 16 }),
+                    "Start with Auto-Play"
+                  ]
+                }
               )
             ]
           }
@@ -51276,6 +51413,121 @@ const TourPlayer = ({
           ] })
         }
       ),
+      showTTSControls && /* @__PURE__ */ jsxs(
+        "div",
+        {
+          style: {
+            padding: "12px 16px",
+            borderTop: `1px solid ${theme2.colors.border}`,
+            flexShrink: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: "8px"
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: handleReadAloud,
+                  disabled: (ttsState == null ? void 0 : ttsState.isLoading) || !audioReady,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    padding: "8px 12px",
+                    backgroundColor: "transparent",
+                    color: theme2.colors.text,
+                    border: `1px solid ${theme2.colors.border}`,
+                    borderRadius: "8px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    cursor: (ttsState == null ? void 0 : ttsState.isLoading) || !audioReady ? "not-allowed" : "pointer",
+                    opacity: (ttsState == null ? void 0 : ttsState.isLoading) || !audioReady ? 0.5 : 1,
+                    transition: "all 0.2s"
+                  },
+                  onMouseEnter: (e) => {
+                    if (!(ttsState == null ? void 0 : ttsState.isLoading) && audioReady) {
+                      e.currentTarget.style.backgroundColor = theme2.colors.backgroundLight;
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.backgroundColor = "transparent";
+                  },
+                  children: [
+                    (ttsState == null ? void 0 : ttsState.isLoading) && /* @__PURE__ */ jsx(LoaderCircle, { size: 16, className: "animate-spin", style: { animation: "spin 1s linear infinite" } }),
+                    (ttsState == null ? void 0 : ttsState.isPlaying) && /* @__PURE__ */ jsx(Volume2, { size: 16 }),
+                    (ttsState == null ? void 0 : ttsState.isPaused) && /* @__PURE__ */ jsx(VolumeX, { size: 16 }),
+                    !(ttsState == null ? void 0 : ttsState.isPlaying) && !(ttsState == null ? void 0 : ttsState.isPaused) && !(ttsState == null ? void 0 : ttsState.isLoading) && /* @__PURE__ */ jsx(Volume2, { size: 16 }),
+                    /* @__PURE__ */ jsx("span", { children: (ttsState == null ? void 0 : ttsState.isLoading) ? "Loading..." : (ttsState == null ? void 0 : ttsState.isPlaying) ? "Stop" : (ttsState == null ? void 0 : ttsState.isPaused) ? "Resume" : "Read Aloud" })
+                  ]
+                }
+              ),
+              canAutoPlay && /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  onClick: toggleAutoPlay,
+                  disabled: !audioReady,
+                  style: {
+                    display: "flex",
+                    alignItems: "center",
+                    gap: "6px",
+                    padding: "8px 12px",
+                    backgroundColor: isAutoPlaying ? theme2.colors.primary : "transparent",
+                    color: isAutoPlaying ? "#ffffff" : theme2.colors.text,
+                    border: `1px solid ${isAutoPlaying ? theme2.colors.primary : theme2.colors.border}`,
+                    borderRadius: "8px",
+                    fontSize: theme2.fontSizes[1],
+                    fontFamily: theme2.fonts.body,
+                    cursor: !audioReady ? "not-allowed" : "pointer",
+                    opacity: !audioReady ? 0.5 : 1,
+                    transition: "all 0.2s"
+                  },
+                  onMouseEnter: (e) => {
+                    if (audioReady) {
+                      e.currentTarget.style.opacity = "0.8";
+                    }
+                  },
+                  onMouseLeave: (e) => {
+                    e.currentTarget.style.opacity = "1";
+                  },
+                  children: [
+                    isAutoPlaying ? /* @__PURE__ */ jsx(Pause, { size: 16 }) : /* @__PURE__ */ jsx(Play, { size: 16 }),
+                    /* @__PURE__ */ jsx("span", { children: isAutoPlaying ? "Stop Auto-Play" : "Start Auto-Play" })
+                  ]
+                }
+              )
+            ] }),
+            (ttsState == null ? void 0 : ttsState.isPlaying) && ttsState.duration && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
+              /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary, minWidth: "35px" }, children: formatTime(ttsState.currentTime || 0) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  style: {
+                    flex: 1,
+                    height: "4px",
+                    backgroundColor: theme2.colors.backgroundLight,
+                    borderRadius: "2px",
+                    overflow: "hidden"
+                  },
+                  children: /* @__PURE__ */ jsx(
+                    "div",
+                    {
+                      style: {
+                        height: "100%",
+                        width: `${ttsState.progress || 0}%`,
+                        backgroundColor: theme2.colors.primary,
+                        transition: "width 0.1s linear"
+                      }
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[0], color: theme2.colors.textSecondary, minWidth: "35px" }, children: formatTime(ttsState.duration) })
+            ] })
+          ]
+        }
+      ),
       /* @__PURE__ */ jsxs(
         "div",
         {
@@ -56068,6 +56320,212 @@ const ProjectInfoHeader = ({
     }
   );
 };
+class MockTTSAdapter {
+  constructor(config = {}) {
+    this.audioCache = /* @__PURE__ */ new Map();
+    this.eventTarget = new EventTarget();
+    this.playbackTimer = null;
+    this.progressTimer = null;
+    this._state = {
+      isLoading: false,
+      isPlaying: false,
+      isPaused: false,
+      error: null
+    };
+    this.config = {
+      audioDuration: config.audioDuration ?? 5,
+      playbackDelay: config.playbackDelay ?? 100,
+      fetchDelay: config.fetchDelay ?? 500,
+      verbose: config.verbose ?? true,
+      simulateError: config.simulateError ?? false
+    };
+  }
+  get state() {
+    return { ...this._state };
+  }
+  setState(updates) {
+    this._state = { ...this._state, ...updates };
+  }
+  log(...args) {
+    if (this.config.verbose) {
+      console.log("[Mock TTS]", ...args);
+    }
+  }
+  /**
+   * Fetch audio URLs for all steps in a tour
+   */
+  async fetchTourAudio(tourId, stepIds, context, options) {
+    this.log("Fetching tour audio:", { tourId, stepCount: stepIds.length, context, options });
+    this.setState({ isLoading: true, error: null });
+    this.emit("loading");
+    await new Promise((resolve) => setTimeout(resolve, this.config.fetchDelay));
+    if (this.config.simulateError) {
+      const error = new Error("Mock TTS: Simulated fetch error");
+      this.setState({ isLoading: false, error });
+      this.emit("error");
+      throw error;
+    }
+    this.audioCache.clear();
+    for (const stepId of stepIds) {
+      const mockUrl = `mock://audio/${tourId}/${stepId}.mp3`;
+      this.audioCache.set(stepId, mockUrl);
+    }
+    this.setState({ isLoading: false });
+    this.log(`Loaded ${this.audioCache.size} audio files`);
+    return new Map(this.audioCache);
+  }
+  /**
+   * Play audio for a specific step
+   */
+  async speak(stepId) {
+    const audioUrl = this.audioCache.get(stepId);
+    if (!audioUrl) {
+      const error = new Error(`Mock TTS: No audio URL for step: ${stepId}`);
+      this.setState({ error });
+      this.emit("error");
+      throw error;
+    }
+    this.log("Speaking step:", stepId);
+    this.stop();
+    if (this.config.simulateError) {
+      const error = new Error("Mock TTS: Simulated playback error");
+      this.setState({ error });
+      this.emit("error");
+      throw error;
+    }
+    await new Promise((resolve) => setTimeout(resolve, this.config.playbackDelay));
+    this.setState({
+      isPlaying: true,
+      isPaused: false,
+      error: null,
+      duration: this.config.audioDuration,
+      currentTime: 0,
+      progress: 0
+    });
+    this.emit("playing");
+    const startTime = Date.now();
+    this.progressTimer = setInterval(() => {
+      const elapsed = (Date.now() - startTime) / 1e3;
+      const progress = Math.min(elapsed / this.config.audioDuration * 100, 100);
+      this.setState({
+        currentTime: elapsed,
+        progress
+      });
+    }, 100);
+    this.playbackTimer = setTimeout(() => {
+      this.log("Playback ended for step:", stepId);
+      this.cleanupPlayback();
+      this.setState({
+        isPlaying: false,
+        isPaused: false,
+        currentTime: 0,
+        progress: 0
+      });
+      this.emit("ended");
+    }, this.config.audioDuration * 1e3);
+  }
+  /**
+   * Stop current audio playback
+   */
+  stop() {
+    this.log("Stopping playback");
+    this.cleanupPlayback();
+    this.setState({
+      isPlaying: false,
+      isPaused: false,
+      currentTime: 0,
+      progress: 0
+    });
+  }
+  /**
+   * Pause current audio playback
+   */
+  pause() {
+    if (this._state.isPlaying) {
+      this.log("Pausing playback");
+      this.cleanupPlayback();
+      this.setState({ isPlaying: false, isPaused: true });
+      this.emit("paused");
+    }
+  }
+  /**
+   * Resume paused audio playback
+   */
+  resume() {
+    if (this._state.isPaused && this._state.duration) {
+      this.log("Resuming playback");
+      const remainingTime = this._state.duration - (this._state.currentTime || 0);
+      const startTime = Date.now() - (this._state.currentTime || 0) * 1e3;
+      this.setState({ isPlaying: true, isPaused: false });
+      this.emit("playing");
+      this.progressTimer = setInterval(() => {
+        const elapsed = (Date.now() - startTime) / 1e3;
+        const progress = Math.min(elapsed / this._state.duration * 100, 100);
+        this.setState({
+          currentTime: elapsed,
+          progress
+        });
+      }, 100);
+      this.playbackTimer = setTimeout(() => {
+        this.log("Playback ended (resumed)");
+        this.cleanupPlayback();
+        this.setState({
+          isPlaying: false,
+          isPaused: false,
+          currentTime: 0,
+          progress: 0
+        });
+        this.emit("ended");
+      }, remainingTime * 1e3);
+    }
+  }
+  /**
+   * Subscribe to TTS events
+   */
+  addEventListener(event, handler) {
+    this.eventTarget.addEventListener(event, handler);
+  }
+  /**
+   * Unsubscribe from TTS events
+   */
+  removeEventListener(event, handler) {
+    this.eventTarget.removeEventListener(event, handler);
+  }
+  /**
+   * Emit an event
+   */
+  emit(event) {
+    this.eventTarget.dispatchEvent(new Event(event));
+  }
+  /**
+   * Clean up timers
+   */
+  cleanupPlayback() {
+    if (this.playbackTimer) {
+      clearTimeout(this.playbackTimer);
+      this.playbackTimer = null;
+    }
+    if (this.progressTimer) {
+      clearInterval(this.progressTimer);
+      this.progressTimer = null;
+    }
+  }
+  /**
+   * Clear all cached audio URLs
+   */
+  clearCache() {
+    this.audioCache.clear();
+  }
+  /**
+   * Get cache statistics (for debugging)
+   */
+  getCacheStats() {
+    return {
+      size: this.audioCache.size,
+      entries: Array.from(this.audioCache.keys())
+    };
+  }
+}
 const panels = [
   {
     metadata: {
@@ -56145,10 +56603,12 @@ export {
   FeedProjectHeaderSkeleton,
   FileCardList,
   GitChangesCardList,
+  MockTTSAdapter,
   PrChangesCardList,
   ProjectInfoHeader,
   QUALITY_COLOR_MODES,
   StoryboardFilesCardList,
+  TourPlayer,
   codeCityPanelTools,
   codeCityPanelToolsMetadata,
   focusBuildingTool,