@luna-editor/engine 0.5.0 → 0.5.2

package/dist/Player.js

@@ -24,6 +24,7 @@ import { PluginComponentProvider } from "./components/PluginComponentProvider";
 import { TimeWaitIndicator } from "./components/TimeWaitIndicator";
 import { AudioProvider } from "./contexts/AudioContext";
 import { DataProvider } from "./contexts/DataContext";
+import { PlaybackTextProvider } from "./contexts/PlaybackTextContext";
 import { useBacklog } from "./hooks/useBacklog";
 import { useConversationBranch } from "./hooks/useConversationBranch";
 import { useFontLoader } from "./hooks/useFontLoader";
@@ -38,10 +39,17 @@ import { ComponentType } from "./sdk";
 import { convertBranchBlockToScenarioBlock } from "./utils/branchBlockConverter";
 import { BranchNavigator } from "./utils/branchNavigator";
 import { VariableManager } from "./utils/variableManager";
-export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, onScenarioEnd, onScenarioStart, onScenarioCancelled, onSettingsChange, className, autoplay = false, preventDefaultScroll = true, screenSize: screenSizeProp, disableKeyboardNavigation = false, }) => {
+const EMPTY_PLUGINS = [];
+const EMPTY_SOUNDS = [];
+export const Player = ({ scenario: scenarioProp, settings, plugins = EMPTY_PLUGINS, sounds = EMPTY_SOUNDS, onEnd, onScenarioEnd, onScenarioStart, onScenarioCancelled, onSettingsChange, className, autoplay = false, preventDefaultScroll = true, screenSize: screenSizeProp, disableKeyboardNavigation = false, }) => {
     var _a, _b, _c, _d;
+    // scenario.blocks が存在しない場合は空の配列を使用
+    const scenario = useMemo(() => {
+        var _a;
+        return (Object.assign(Object.assign({}, scenarioProp), { blocks: (_a = scenarioProp.blocks) !== null && _a !== void 0 ? _a : [] }));
+    }, [scenarioProp]);
     // デフォルト値とマージ
-    const mergedSettings = Object.assign({ textSpeed: 80, autoPlaySpeed: 3, bgmVolume: 0.5, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0, defaultBackgroundFadeDuration: 0 }, settings);
+    const mergedSettings = Object.assign({ textSpeed: 80, autoPlaySpeed: 3, bgmVolume: 0.5, seVolume: 1.0, voiceVolume: 1.0, effectVolume: 1.0, textSoundVolume: 1.0, defaultBackgroundFadeDuration: 0, inactiveCharacterBrightness: 0.8, characterSpacing: 0.2 }, settings);
     // プラグインからの設定更新ハンドラ
     const handleSettingsUpdate = useCallback((updatedSettings) => {
         var _a, _b;
@@ -84,6 +92,7 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
     }, [pluginManager, mergedSettings.muteAudio]);
     // 画面サイズの初期化
     const [, setScreenSize] = useScreenSizeAtom();
+    const aspectRatioContainerRef = useRef(null);
     useEffect(() => {
         // screenSizeが明示的に指定されている場合はそれを使用（プレビュー用）
         if (screenSizeProp) {
@@ -93,16 +102,40 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
         // クライアントサイドでのみ実行
         if (typeof window === "undefined")
             return;
+        // 初期値として一時的にウィンドウサイズを設定
         setScreenSize({ width: window.innerWidth, height: window.innerHeight });
-        // リサイズ監視
-        const handleResize = () => {
+        const container = aspectRatioContainerRef.current;
+        if (!container)
+            return;
+        // アスペクト比コンテナのサイズを監視
+        const updateScreenSize = () => {
+            const rect = container.getBoundingClientRect();
+            // サイズが0の場合はスキップ（まだレンダリングされていない）
+            if (rect.width === 0 || rect.height === 0)
+                return;
+            console.log("[Player] screenSize更新:", {
+                width: rect.width,
+                height: rect.height,
+                windowWidth: window.innerWidth,
+                windowHeight: window.innerHeight,
+            });
             setScreenSize({
-                width: window.innerWidth,
-                height: window.innerHeight,
+                width: rect.width,
+                height: rect.height,
             });
         };
-        window.addEventListener("resize", handleResize);
-        return () => window.removeEventListener("resize", handleResize);
+        // 初期サイズを設定（次のフレームで実行してレンダリング完了を待つ）
+        requestAnimationFrame(() => {
+            updateScreenSize();
+        });
+        // ResizeObserverでコンテナのサイズ変更を監視
+        const resizeObserver = new ResizeObserver(() => {
+            updateScreenSize();
+        });
+        resizeObserver.observe(container);
+        return () => {
+            resizeObserver.disconnect();
+        };
     }, [setScreenSize, screenSizeProp]);
     // 表示可能なブロックのインデックスを事前計算
     const displayableBlockIndices = useMemo(() => {
@@ -113,7 +146,6 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
             "fullscreen_text",
             "click_wait",
             "time_wait",
-            "action_node",
         ];
         const indices = scenario.blocks
             .map((block, index) => ({ block, index }))
@@ -269,8 +301,28 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
     }, [scenario.id, autoplay, hasStarted, pluginManager]);
     // 画像を事前読み込み
     const imagesLoaded = usePreloadImages(scenario);
-    // フォントを読み込み
-    const { isLoaded: fontsLoaded } = useFontLoader(scenario.fonts);
+    // シナリオ内の全テキストを抽出（フォントのプリロード用）
+    // サブセットフォントの分割ファイルを事前に読み込むことで、
+    // 文字送り中のフォント切り替わりを防止
+    const allScenarioText = useMemo(() => {
+        var _a;
+        const texts = [];
+        for (const block of scenario.blocks) {
+            // dialogue, narration, fullscreen_textのcontent
+            if (block.content) {
+                texts.push(block.content);
+            }
+            // speaker name
+            if ((_a = block.speaker) === null || _a === void 0 ? void 0 : _a.name) {
+                texts.push(block.speaker.name);
+            }
+        }
+        // 重複を除去してユニークな文字のみを残す
+        const uniqueChars = [...new Set(texts.join(""))].join("");
+        return uniqueChars;
+    }, [scenario.blocks]);
+    // フォントを読み込み（シナリオ内の全テキストでプリロード）
+    const { isLoaded: fontsLoaded } = useFontLoader(scenario.fonts, allScenarioText);
     // プラグインの読み込み状態
     const [pluginsLoaded, setPluginsLoaded] = useState(false);
     // 読み込み済みプラグインのパッケージ名を追跡
@@ -292,7 +344,7 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
                 for (const plugin of newPlugins) {
                     if (isCancelled)
                         return;
-                    yield pluginManager.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config);
+                    yield pluginManager.loadPlugin(plugin.packageName, plugin.bundleUrl, plugin.config, plugin.assets, plugin.plugin);
                     loadedPluginNamesRef.current.add(plugin.packageName);
                 }
                 if (isCancelled)
@@ -309,6 +361,9 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
         loadPlugins();
         return () => {
             isCancelled = true;
+            // Strict Mode再マウント時にプラグインが再ロード・再登録できるようにする
+            loadedPluginNamesRef.current.clear();
+            pluginManager.resetForRemount();
         };
     }, [plugins, sounds]);
     // 初回レンダリング完了フラグ
@@ -549,7 +604,16 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
                 scenarioName: scenario.name || "scenario",
             });
         }
-    }, [isFirstRenderComplete, hasStarted, currentBlock, pluginsLoaded, onScenarioStart, pluginManager, scenario.id, scenario.name]);
+    }, [
+        isFirstRenderComplete,
+        hasStarted,
+        currentBlock,
+        pluginsLoaded,
+        onScenarioStart,
+        pluginManager,
+        scenario.id,
+        scenario.name,
+    ]);
     // restartをusePlayerLogicの前に定義（分岐状態もリセット + キャンセルコールバック）
     const restart = useCallback(() => {
         // リスタート時はシナリオがキャンセルされたとみなす
@@ -712,7 +776,10 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
         displayableBlockIndices.length,
         handleNextInternal,
         onEnd,
-        onScenarioEnd,
+        onScenarioEnd, // プラグインのonScenarioEndフックを呼び出し
+        pluginManager,
+        scenario.id,
+        scenario.name,
     ]);
     // eslint-disable-next-line @typescript-eslint/no-unused-vars
     const _handlePrevious = useCallback(() => {
@@ -722,7 +789,16 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
     }, [state.currentBlockIndex, handlePreviousInternal]);
     // 現在の背景を計算
     const currentBackground = useMemo(() => calculateCurrentBackground(actualBlockIndex), [calculateCurrentBackground, actualBlockIndex]);
-    // DataContext の構築 - displayedCharactersが必要なため usePlayerLogic の後に配置
+    // displayText を JSX に変換（PlaybackTextProvider 用）
+    const displayTextElement = useMemo(() => {
+        if (displayText.includes("\n")) {
+            return displayText.split("\n").map((line, index, array) => (_jsxs(React.Fragment, { children: [line, index < array.length - 1 && _jsx("br", {})] }, index)));
+        }
+        return displayText;
+    }, [displayText]);
+    // DataContext の構築
+    // DataRefContext で安定した参照を提供することで、
+    // useDataAPI() を使うコンポーネントの再レンダリングを防ぐ
     const dataContext = useMemo(() => {
         var _a, _b, _c;
         return ({
@@ -732,9 +808,7 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
                 scenarioId: scenario.id,
                 scenarioName: scenario.name,
                 currentBlock: currentBlock || null,
-                displayText: displayText.includes("\n")
-                    ? displayText.split("\n").map((line, index, array) => (_jsxs(React.Fragment, { children: [line, index < array.length - 1 && _jsx("br", {})] }, index)))
-                    : displayText,
+                displayText: displayTextElement,
                 isTyping,
                 displayedCharacters,
             },
@@ -753,6 +827,8 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
                 seVolume: mergedSettings.seVolume,
                 voiceVolume: mergedSettings.voiceVolume,
                 skipMode: "unread",
+                selectedFontFamily: mergedSettings.selectedFontFamily,
+                selectedUIFontFamily: mergedSettings.selectedUIFontFamily,
             },
             pluginAssets: {
                 getAssetUrl: (pluginName, filename) => {
@@ -766,6 +842,7 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
             fonts: {
                 fonts: (_c = scenario.fonts) !== null && _c !== void 0 ? _c : [],
                 selectedFontFamily: mergedSettings.selectedFontFamily,
+                selectedUIFontFamily: mergedSettings.selectedUIFontFamily,
                 isLoaded: fontsLoaded,
             },
             emotionEffect: emotionEffectState,
@@ -775,7 +852,7 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
         actualBlockIndex,
         scenario,
         currentBlock,
-        displayText,
+        displayTextElement,
         isTyping,
         displayedCharacters,
         backlog,
@@ -789,6 +866,7 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
         mergedSettings.textSpeed,
         mergedSettings.voiceVolume,
         mergedSettings.selectedFontFamily,
+        mergedSettings.selectedUIFontFamily,
         currentBackground,
         fontsLoaded,
     ]);
@@ -828,6 +906,12 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
         const [width, height] = settings.aspectRatio.split(":").map(Number);
         return `${width}/${height}`;
     };
+    const getAspectRatioValue = () => {
+        if (!(settings === null || settings === void 0 ? void 0 : settings.aspectRatio))
+            return 16 / 9;
+        const [width, height] = settings.aspectRatio.split(":").map(Number);
+        return width / height;
+    };
     // 条件付きレンダリングを JSX で処理（フックの後、early return なし）
     return (_jsxs(_Fragment, { children: [!currentBlock && !state.isEnded && (_jsx("div", { className: clsx("flex items-center justify-center p-8", className), children: _jsx("p", { className: "text-gray-500", children: "\u30B7\u30CA\u30EA\u30AA\u304C\u898B\u3064\u304B\u308A\u307E\u305B\u3093" }) })), state.isEnded && (_jsx(EndScreen, { scenarioName: scenario.name, onRestart: restart, className: className })), currentBlock && !state.isEnded && (_jsxs(_Fragment, { children: [(!imagesLoaded ||
                         !fontsLoaded ||
@@ -844,16 +928,27 @@ export const Player = ({ scenario, settings, plugins = [], sounds = [], onEnd, o
                             touchAction: "none",
                             userSelect: "none",
                             WebkitUserSelect: "none",
-                        }, children: _jsx("div", { className: "relative bg-white flex flex-col w-full overflow-hidden h-full", style: { aspectRatio: getAspectRatio() }, children: _jsx(DataProvider, { data: dataContext, onSettingsUpdate: handleSettingsUpdate, onEmotionEffectUpdate: handleEmotionEffectUpdate, onCancelScenario: cancelScenario, children: _jsxs(AudioProvider, { settings: {
+                        }, children: _jsx("div", { ref: aspectRatioContainerRef, className: "relative bg-white flex flex-col overflow-hidden", style: screenSizeProp
+                                ? {
+                                    // プレビューモード: 親コンテナ（固定論理サイズ）を100%で埋める
+                                    width: "100%",
+                                    height: "100%",
+                                }
+                                : {
+                                    // 通常再生: ビューポートに合わせてアスペクト比を維持
+                                    aspectRatio: getAspectRatio(),
+                                    width: `min(100vw, calc(100vh * ${getAspectRatioValue()}))`,
+                                    height: `min(100vh, calc(100vw / ${getAspectRatioValue()}))`,
+                                }, children: _jsx(DataProvider, { data: dataContext, onSettingsUpdate: handleSettingsUpdate, onEmotionEffectUpdate: handleEmotionEffectUpdate, onCancelScenario: cancelScenario, children: _jsx(AudioProvider, { settings: {
                                         bgmVolume: mergedSettings.bgmVolume,
                                         seVolume: mergedSettings.seVolume,
                                         voiceVolume: mergedSettings.voiceVolume,
                                         effectVolume: mergedSettings.effectVolume,
                                         textSoundVolume: mergedSettings.textSoundVolume,
                                         muteAudio: (_b = mergedSettings.muteAudio) !== null && _b !== void 0 ? _b : false,
-                                    }, children: [_jsxs("div", { className: "h-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.Background, pluginManager: pluginManager, fallback: BackgroundLayer }, "background"), _jsx(GameScreen, { scenario: scenario, currentBlock: currentBlock, previousBlock: previousBlock, displayedCharacters: displayedCharacters }, "game-screen")] }), _jsx(OverlayUI, { children: _jsxs("div", { className: "h-full w-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.DialogueBox, pluginManager: pluginManager, fallback: DialogueBox }, "dialogue-box"), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "conversation_branch" && (_jsx(PluginComponentProvider, { type: ComponentType.ConversationBranch, pluginManager: pluginManager, fallback: ConversationBranchBox }, "conversation-branch")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "fullscreen_text" && (_jsx(FullscreenTextBox, { onComplete: () => handleNext("click") }, "fullscreen-text")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "click_wait" && (_jsx(ClickWaitIndicator, {}, "click-wait")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "time_wait" && (_jsx(TimeWaitIndicator, { duration: (_d = (_c = currentBlock.options) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 1, onComplete: () => handleNext("time_wait") }, "time-wait")), pluginManager
-                                                        .getRegisteredComponents()
-                                                        .filter((type) => type !== ComponentType.DialogueBox &&
-                                                        type !== ComponentType.ConversationBranch)
-                                                        .map((componentType) => (_jsx(PluginComponentProvider, { type: componentType, pluginManager: pluginManager }, componentType)))] }) })] }) }) }) })] }))] }));
+                                    }, children: _jsxs(PlaybackTextProvider, { displayText: displayTextElement, isTyping: isTyping, children: [_jsxs("div", { className: "h-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.Background, pluginManager: pluginManager, fallback: BackgroundLayer }, "background"), _jsx(GameScreen, { scenario: scenario, currentBlock: currentBlock, previousBlock: previousBlock, displayedCharacters: displayedCharacters, inactiveCharacterBrightness: mergedSettings.inactiveCharacterBrightness, characterSpacing: mergedSettings.characterSpacing }, "game-screen")] }), _jsx(OverlayUI, { children: _jsxs("div", { className: "h-full w-full relative", children: [_jsx(PluginComponentProvider, { type: ComponentType.DialogueBox, pluginManager: pluginManager, fallback: DialogueBox }, "dialogue-box"), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "conversation_branch" && (_jsx(PluginComponentProvider, { type: ComponentType.ConversationBranch, pluginManager: pluginManager, fallback: ConversationBranchBox }, "conversation-branch")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "fullscreen_text" && (_jsx(FullscreenTextBox, { onComplete: () => handleNext("click") }, "fullscreen-text")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "click_wait" && (_jsx(ClickWaitIndicator, {}, "click-wait")), (currentBlock === null || currentBlock === void 0 ? void 0 : currentBlock.blockType) === "time_wait" && (_jsx(TimeWaitIndicator, { duration: (_d = (_c = currentBlock.options) === null || _c === void 0 ? void 0 : _c.duration) !== null && _d !== void 0 ? _d : 1, onComplete: () => handleNext("time_wait") }, "time-wait")), pluginManager
+                                                            .getRegisteredComponents()
+                                                            .filter((type) => type !== ComponentType.DialogueBox &&
+                                                            type !== ComponentType.ConversationBranch)
+                                                            .map((componentType) => (_jsx(PluginComponentProvider, { type: componentType, pluginManager: pluginManager }, componentType)))] }) })] }) }) }) }) })] }))] }));
 };

package/dist/components/BackgroundLayer.js

@@ -1,5 +1,5 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { useEffect, useMemo, useRef, useState } from "react";
+import { memo, useEffect, useMemo, useRef, useState } from "react";
 import { useDataAPI } from "../contexts/DataContext";
 /**
  * iOS/macOSかどうかを判定
@@ -56,8 +56,10 @@ function getMediaType(url) {
 }
 /**
  * 背景メディアコンポーネント
+ * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
+ * これにより displayText の更新による不要な再描画を防止
  */
-const BackgroundMedia = ({ background, opacity, zIndex, useAppleFormat }) => {
+const BackgroundMedia = memo(function BackgroundMedia({ background, opacity, zIndex, useAppleFormat }) {
     var _a, _b;
     // OS判定に基づいて使用するURLを決定
     // iOS/macOS: mp4 (imageUrl)
@@ -84,7 +86,7 @@ const BackgroundMedia = ({ background, opacity, zIndex, useAppleFormat }) => {
             transition: "none", // requestAnimationFrameでアニメーション
             pointerEvents: isHighLayer ? "none" : undefined,
         }, "data-background-object-id": background.objectId, "data-background-state-id": background.stateId, "data-background-layer": layer, children: mediaType === "video" ? (_jsx("video", { src: videoUrl, className: `w-full h-full ${objectFitClass}`, autoPlay: true, muted: true, playsInline: true, loop: background.loop }, videoUrl)) : (_jsx("img", { src: background.imageUrl, alt: background.stateName, className: `w-full h-full ${objectFitClass}` }, background.imageUrl)) }));
-};
+});
 /**
  * 背景の配列が同じかどうかを比較
  */
@@ -107,7 +109,7 @@ function areBackgroundsEqual(a, b) {
  * プラグインによって置き換え可能
  * フェードイン・フェードアウト対応
  */
-export const BackgroundLayer = ({ className, }) => {
+export const BackgroundLayer = memo(({ className }) => {
     const dataAPI = useDataAPI();
     // Apple環境かどうかを判定（iOS/macOSではmp4を使用）
     const useAppleFormat = useMemo(() => isApplePlatform(), []);
@@ -214,5 +216,5 @@ export const BackgroundLayer = ({ className, }) => {
                 const zIndex = getLayerZIndex(layer, index);
                 return (_jsx(BackgroundMedia, { background: bg, opacity: fadeState.isFading ? fadeState.fadeProgress : 1, zIndex: zIndex, useAppleFormat: useAppleFormat }, `curr-${bg.objectId}-${bg.stateId}-${index}`));
             })] }));
-};
+});
 export { getMediaType };

package/dist/components/GameScreen.d.ts

@@ -1,10 +1,16 @@
-import type React from "react";
 import type { DisplayedCharacter, PublishedScenario, ScenarioBlock } from "../types";
 interface GameScreenProps {
     scenario: PublishedScenario;
     currentBlock: ScenarioBlock;
     previousBlock?: ScenarioBlock | null;
     displayedCharacters: DisplayedCharacter[];
+    inactiveCharacterBrightness?: number;
+    characterSpacing?: number;
 }
-export declare const GameScreen: React.FC<GameScreenProps>;
+/**
+ * ゲームスクリーンコンポーネント
+ * React.memo でラップして、props が変わらない限り再レンダリングを防ぐ
+ * これにより displayText の更新による不要な再描画を防止
+ */
+export declare const GameScreen: import("react").NamedExoticComponent<GameScreenProps>;
 export {};