@industry-theme/file-city-panel 0.3.12 → 0.3.14

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.
@@ -32,6 +32,8 @@ export interface TourPlayerProps {
32
32
  autoAdvanceOnAudioEnd?: boolean;
33
33
  /** Delay in ms before auto-advancing after audio ends (default: 1000) */
34
34
  autoAdvanceDelay?: number;
35
+ /** Start in auto-play mode immediately (default: false) */
36
+ startInAutoPlayMode?: boolean;
35
37
  }
36
38
  /**
37
39
  * TourPlayer - Interactive guided tour player for introduction tours
@@ -1 +1 @@
1
- {"version":3,"file":"TourPlayer.d.ts","sourceRoot":"","sources":["../../src/components/TourPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAgBxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,IAAI,EAAE,gBAAgB,CAAC;IAEvB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEvE,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1E,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qIAAqI;IACrI,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAE3D,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,iEAAiE;IACjE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC3B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAijChD,CAAC"}
1
+ {"version":3,"file":"TourPlayer.d.ts","sourceRoot":"","sources":["../../src/components/TourPlayer.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAmD,MAAM,OAAO,CAAC;AAgBxE,OAAO,KAAK,EAAE,gBAAgB,EAAE,oBAAoB,EAAE,MAAM,iCAAiC,CAAC;AAC9F,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,uBAAuB,CAAC;AAC9D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,UAAU,CAAC;AAG7C,MAAM,WAAW,eAAe;IAC9B,oCAAoC;IACpC,IAAI,EAAE,gBAAgB,CAAC;IAEvB,2CAA2C;IAC3C,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,oBAAoB,KAAK,IAAI,CAAC;IAEvE,+BAA+B;IAC/B,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAEpB,uDAAuD;IACvD,mBAAmB,CAAC,EAAE,CAAC,MAAM,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAA;KAAE,KAAK,IAAI,CAAC;IAE1E,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB,qIAAqI;IACrI,QAAQ,CAAC,EAAE,KAAK,GAAG,QAAQ,GAAG,SAAS,GAAG,MAAM,GAAG,OAAO,CAAC;IAE3D,wDAAwD;IACxD,WAAW,CAAC,EAAE,OAAO,CAAC;IAGtB,wGAAwG;IACxG,gBAAgB,CAAC,EAAE,gBAAgB,CAAC;IAEpC,6FAA6F;IAC7F,OAAO,CAAC,EAAE,YAAY,CAAC;IAEvB,yDAAyD;IACzD,aAAa,CAAC,EAAE,OAAO,CAAC;IAExB,iEAAiE;IACjE,qBAAqB,CAAC,EAAE,OAAO,CAAC;IAEhC,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAE1B,2DAA2D;IAC3D,mBAAmB,CAAC,EAAE,OAAO,CAAC;CAC/B;AAED;;;;;GAKG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAkhChD,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"CodeCityPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CodeCityPanel.tsx"],"names":[],"mappings":"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"}
1
+ {"version":3,"file":"CodeCityPanel.d.ts","sourceRoot":"","sources":["../../src/panels/CodeCityPanel.tsx"],"names":[],"mappings":"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"}
@@ -51269,7 +51269,8 @@ const TourPlayer = ({
51269
51269
  actions,
51270
51270
  autoPlayAudio = false,
51271
51271
  autoAdvanceOnAudioEnd = false,
51272
- autoAdvanceDelay = 1e3
51272
+ autoAdvanceDelay = 1e3,
51273
+ startInAutoPlayMode = false
51273
51274
  }) => {
51274
51275
  const { theme: theme2 } = useTheme();
51275
51276
  const [internalStepIndex, setInternalStepIndex] = useState(0);
@@ -51281,7 +51282,7 @@ const TourPlayer = ({
51281
51282
  const [isAudioPaused, setIsAudioPaused] = useState(false);
51282
51283
  const [audioDuration, setAudioDuration] = useState(0);
51283
51284
  const [audioCurrentTime, setAudioCurrentTime] = useState(0);
51284
- const [isAutoPlaying, setIsAutoPlaying] = useState(false);
51285
+ const [isAutoPlaying, setIsAutoPlaying] = useState(startInAutoPlayMode);
51285
51286
  const audioElementRef = useRef(null);
51286
51287
  const currentStepIndex = controlledStepIndex !== void 0 ? controlledStepIndex : internalStepIndex;
51287
51288
  const currentStep = tour.steps[currentStepIndex];
@@ -51316,6 +51317,7 @@ const TourPlayer = ({
51316
51317
  }, [onExit]);
51317
51318
  const handleStart = useCallback(() => {
51318
51319
  setIsPlaying(true);
51320
+ setIsAutoPlaying(true);
51319
51321
  goToStep(0);
51320
51322
  }, [goToStep]);
51321
51323
  useEffect(() => {
@@ -51447,7 +51449,7 @@ const TourPlayer = ({
51447
51449
  });
51448
51450
  }
51449
51451
  }, [isAudioPaused]);
51450
- const handleReadAloud = useCallback(() => {
51452
+ useCallback(() => {
51451
51453
  if (!audioUrls) return;
51452
51454
  const audioUrl = audioUrls.get(currentStep.id);
51453
51455
  if (!audioUrl) return;
@@ -51867,38 +51869,70 @@ const TourPlayer = ({
51867
51869
  ]
51868
51870
  }
51869
51871
  ),
51870
- /* @__PURE__ */ jsxs(
51871
- "button",
51872
- {
51873
- onClick: handleExit,
51874
- style: {
51875
- display: "flex",
51876
- alignItems: "center",
51877
- gap: "4px",
51878
- padding: "6px 12px",
51879
- backgroundColor: "transparent",
51880
- color: theme2.colors.textSecondary,
51881
- border: `1px solid ${theme2.colors.border}`,
51882
- borderRadius: "6px",
51883
- fontSize: theme2.fontSizes[1],
51884
- fontFamily: theme2.fonts.body,
51885
- cursor: "pointer",
51886
- transition: "all 0.2s"
51887
- },
51888
- onMouseEnter: (e) => {
51889
- e.currentTarget.style.backgroundColor = theme2.colors.backgroundLight;
51890
- e.currentTarget.style.borderColor = theme2.colors.text;
51891
- },
51892
- onMouseLeave: (e) => {
51893
- e.currentTarget.style.backgroundColor = "transparent";
51894
- e.currentTarget.style.borderColor = theme2.colors.border;
51895
- },
51896
- children: [
51897
- /* @__PURE__ */ jsx(X, { size: 14 }),
51898
- "Exit Tour"
51899
- ]
51900
- }
51901
- )
51872
+ /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: "8px", alignItems: "center" }, children: [
51873
+ canAutoPlay && currentStepHasAudio && /* @__PURE__ */ jsxs(
51874
+ "button",
51875
+ {
51876
+ onClick: toggleAutoPlay,
51877
+ style: {
51878
+ display: "flex",
51879
+ alignItems: "center",
51880
+ gap: "4px",
51881
+ padding: "6px 12px",
51882
+ backgroundColor: isAutoPlaying ? theme2.colors.primary : "transparent",
51883
+ color: isAutoPlaying ? "#ffffff" : theme2.colors.text,
51884
+ border: `1px solid ${isAutoPlaying ? theme2.colors.primary : theme2.colors.border}`,
51885
+ borderRadius: "6px",
51886
+ fontSize: theme2.fontSizes[1],
51887
+ fontFamily: theme2.fonts.body,
51888
+ cursor: "pointer",
51889
+ transition: "all 0.2s"
51890
+ },
51891
+ onMouseEnter: (e) => {
51892
+ e.currentTarget.style.opacity = "0.8";
51893
+ },
51894
+ onMouseLeave: (e) => {
51895
+ e.currentTarget.style.opacity = "1";
51896
+ },
51897
+ children: [
51898
+ isAutoPlaying ? /* @__PURE__ */ jsx(Pause, { size: 14 }) : /* @__PURE__ */ jsx(Play, { size: 14 }),
51899
+ isAutoPlaying ? "Pause" : "Play"
51900
+ ]
51901
+ }
51902
+ ),
51903
+ /* @__PURE__ */ jsxs(
51904
+ "button",
51905
+ {
51906
+ onClick: handleExit,
51907
+ style: {
51908
+ display: "flex",
51909
+ alignItems: "center",
51910
+ gap: "4px",
51911
+ padding: "6px 12px",
51912
+ backgroundColor: "transparent",
51913
+ color: theme2.colors.textSecondary,
51914
+ border: `1px solid ${theme2.colors.border}`,
51915
+ borderRadius: "6px",
51916
+ fontSize: theme2.fontSizes[1],
51917
+ fontFamily: theme2.fonts.body,
51918
+ cursor: "pointer",
51919
+ transition: "all 0.2s"
51920
+ },
51921
+ onMouseEnter: (e) => {
51922
+ e.currentTarget.style.backgroundColor = theme2.colors.backgroundLight;
51923
+ e.currentTarget.style.borderColor = theme2.colors.text;
51924
+ },
51925
+ onMouseLeave: (e) => {
51926
+ e.currentTarget.style.backgroundColor = "transparent";
51927
+ e.currentTarget.style.borderColor = theme2.colors.border;
51928
+ },
51929
+ children: [
51930
+ /* @__PURE__ */ jsx(X, { size: 14 }),
51931
+ "Exit Tour"
51932
+ ]
51933
+ }
51934
+ )
51935
+ ] })
51902
51936
  ]
51903
51937
  }
51904
51938
  ),
@@ -52047,113 +52081,47 @@ const TourPlayer = ({
52047
52081
  ] })
52048
52082
  }
52049
52083
  ),
52050
- currentStepHasAudio && /* @__PURE__ */ jsxs(
52084
+ isAudioPlaying && audioDuration > 0 && /* @__PURE__ */ jsxs(
52051
52085
  "div",
52052
52086
  {
52053
52087
  style: {
52054
- padding: "12px 16px",
52088
+ padding: "8px 16px",
52055
52089
  borderTop: `1px solid ${theme2.colors.border}`,
52056
52090
  flexShrink: 0,
52057
52091
  display: "flex",
52058
- flexDirection: "column",
52092
+ alignItems: "center",
52059
52093
  gap: "8px"
52060
52094
  },
52061
52095
  children: [
52062
- /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
52063
- /* @__PURE__ */ jsxs(
52064
- "button",
52065
- {
52066
- onClick: handleReadAloud,
52067
- style: {
52068
- display: "flex",
52069
- alignItems: "center",
52070
- gap: "6px",
52071
- padding: "8px 12px",
52072
- backgroundColor: "transparent",
52073
- color: theme2.colors.text,
52074
- border: `1px solid ${theme2.colors.border}`,
52075
- borderRadius: "8px",
52076
- fontSize: theme2.fontSizes[2],
52077
- fontFamily: theme2.fonts.body,
52078
- cursor: "pointer",
52079
- transition: "all 0.2s"
52080
- },
52081
- onMouseEnter: (e) => {
52082
- e.currentTarget.style.backgroundColor = theme2.colors.backgroundLight;
52083
- },
52084
- onMouseLeave: (e) => {
52085
- e.currentTarget.style.backgroundColor = "transparent";
52086
- },
52087
- children: [
52088
- isAudioPlaying && /* @__PURE__ */ jsx(Volume2, { size: 16 }),
52089
- isAudioPaused && /* @__PURE__ */ jsx(VolumeX, { size: 16 }),
52090
- !isAudioPlaying && !isAudioPaused && /* @__PURE__ */ jsx(Volume2, { size: 16 }),
52091
- /* @__PURE__ */ jsx("span", { children: isAudioPlaying ? "Stop" : isAudioPaused ? "Resume" : "Read Aloud" })
52092
- ]
52093
- }
52094
- ),
52095
- canAutoPlay && /* @__PURE__ */ jsxs(
52096
- "button",
52097
- {
52098
- onClick: toggleAutoPlay,
52099
- style: {
52100
- display: "flex",
52101
- alignItems: "center",
52102
- gap: "6px",
52103
- padding: "8px 12px",
52104
- backgroundColor: isAutoPlaying ? theme2.colors.primary : "transparent",
52105
- color: isAutoPlaying ? "#ffffff" : theme2.colors.text,
52106
- border: `1px solid ${isAutoPlaying ? theme2.colors.primary : theme2.colors.border}`,
52107
- borderRadius: "8px",
52108
- fontSize: theme2.fontSizes[2],
52109
- fontFamily: theme2.fonts.body,
52110
- cursor: "pointer",
52111
- transition: "all 0.2s"
52112
- },
52113
- onMouseEnter: (e) => {
52114
- e.currentTarget.style.opacity = "0.8";
52115
- },
52116
- onMouseLeave: (e) => {
52117
- e.currentTarget.style.opacity = "1";
52118
- },
52119
- children: [
52120
- isAutoPlaying ? /* @__PURE__ */ jsx(Pause, { size: 16 }) : /* @__PURE__ */ jsx(Play, { size: 16 }),
52121
- /* @__PURE__ */ jsx("span", { children: isAutoPlaying ? "Stop Auto-Play" : "Start Auto-Play" })
52122
- ]
52123
- }
52124
- )
52125
- ] }),
52126
- isAudioPlaying && audioDuration > 0 && /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: "8px" }, children: [
52127
- /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary, minWidth: "35px" }, children: formatTime(audioCurrentTime) }),
52128
- /* @__PURE__ */ jsx(
52129
- "div",
52130
- {
52131
- style: {
52132
- flex: 1,
52133
- height: "4px",
52134
- backgroundColor: theme2.colors.backgroundLight,
52135
- borderRadius: "2px",
52136
- overflow: "hidden"
52137
- },
52138
- children: /* @__PURE__ */ jsx(
52139
- "div",
52140
- {
52141
- style: {
52142
- height: "100%",
52143
- width: `${audioCurrentTime / audioDuration * 100}%`,
52144
- backgroundColor: theme2.colors.primary,
52145
- transition: "width 0.1s linear"
52146
- }
52096
+ /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary, minWidth: "35px" }, children: formatTime(audioCurrentTime) }),
52097
+ /* @__PURE__ */ jsx(
52098
+ "div",
52099
+ {
52100
+ style: {
52101
+ flex: 1,
52102
+ height: "4px",
52103
+ backgroundColor: theme2.colors.backgroundLight,
52104
+ borderRadius: "2px",
52105
+ overflow: "hidden"
52106
+ },
52107
+ children: /* @__PURE__ */ jsx(
52108
+ "div",
52109
+ {
52110
+ style: {
52111
+ height: "100%",
52112
+ width: `${audioCurrentTime / audioDuration * 100}%`,
52113
+ backgroundColor: theme2.colors.primary,
52114
+ transition: "width 0.1s linear"
52147
52115
  }
52148
- )
52149
- }
52150
- ),
52151
- /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary, minWidth: "35px" }, children: formatTime(audioDuration) })
52152
- ] })
52116
+ }
52117
+ )
52118
+ }
52119
+ ),
52120
+ /* @__PURE__ */ jsx("span", { style: { fontSize: theme2.fontSizes[1], color: theme2.colors.textSecondary, minWidth: "35px" }, children: formatTime(audioDuration) })
52153
52121
  ]
52154
52122
  }
52155
52123
  ),
52156
- /* @__PURE__ */ jsxs(
52124
+ !(isAudioPlaying && position === "top") && /* @__PURE__ */ jsxs(
52157
52125
  "div",
52158
52126
  {
52159
52127
  style: {
@@ -55604,6 +55572,9 @@ const CodeCityPanelContent = ({
55604
55572
  tour: tourData,
55605
55573
  tourAudioContext,
55606
55574
  actions: _actions,
55575
+ autoPlayAudio: true,
55576
+ autoAdvanceOnAudioEnd: true,
55577
+ autoAdvanceDelay: 1e3,
55607
55578
  currentStepIndex: currentTourStepIndex,
55608
55579
  onStepChange: (stepIndex, step) => {
55609
55580
  setCurrentTourStepIndex(stepIndex);