@vnejs/plugins.views.scenario.interface 0.1.12 → 0.1.14

package/{modules/interface.js → src/modules/interface.ts}

@@ -1,8 +1,18 @@
 import { Module } from "@vnejs/module";
-
 import { tokenizeExecLine } from "@vnejs/helpers";
 
-export class Interface extends Module {
+import type { InterfacePluginConstants, InterfacePluginEvents, InterfacePluginParams, InterfacePluginSettings } from "../types.js";
+import type {
+  InterfaceForcePayload,
+  InterfaceLineExecPayload,
+  InterfaceModuleState,
+  InterfaceSpeakerChangedPayload,
+  InterfaceStateSetPayload,
+  InterfaceTextChangedPayload,
+  InterfaceViewPayload,
+} from "../utils/interface.js";
+
+export class Interface extends Module<InterfacePluginEvents, InterfacePluginConstants, InterfacePluginSettings, InterfacePluginParams, InterfaceModuleState> {
   name = "interface";
 
   subscribe = () => {
@@ -20,9 +30,10 @@ export class Interface extends Module {
     this.on(this.EVENTS.STATE.SET, this.onStateSet);
     this.on(this.EVENTS.STATE.CLEAR, this.onStateClear);
   };
+
   init = () => this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onLineExec });
 
-  onLineExec = async ({ line = "" } = {}) => {
+  onLineExec = async ({ line = "" }: InterfaceLineExecPayload = {}) => {
     const isForce = Boolean(this.shared.viewForceAnimationSources.length);
 
     const [action = "", execArg = ""] = tokenizeExecLine(line);
@@ -35,35 +46,35 @@ export class Interface extends Module {
   };
 
   onInteract = () => this.emit(this.state.isVisible ? this.EVENTS.INTERACT.EMIT : this.EVENTS.INTERFACE.VISIBLE);
-  onShow = ({ isForce = false } = {}) => !this.state.isShow && this.setShow(true, isForce);
-  onHide = ({ isForce = false } = {}) => this.state.isShow && this.setShow(false, isForce);
-  onVisible = ({ isForce = false } = {}) => this.setVisible(!this.state.isVisible, isForce);
-  onTextChanged = ({ tokens, wall, uid, tokensVisible } = {}) => this.setText(tokens, wall, uid, tokensVisible);
-  onTextSpeakerChanged = ({ speaker, meet } = {}) => this.setSpeaker(speaker, meet);
+  onShow = ({ isForce = false }: InterfaceForcePayload = {}) => !this.state.isShow && this.setShow(true, isForce);
+  onHide = ({ isForce = false }: InterfaceForcePayload = {}) => this.state.isShow && this.setShow(false, isForce);
+  onVisible = ({ isForce = false }: InterfaceForcePayload = {}) => this.setVisible(!this.state.isVisible, isForce);
+  onTextChanged = ({ tokens, wall, uid, tokensVisible }: InterfaceTextChangedPayload = {}) => this.setText(tokens, wall, uid, tokensVisible);
+  onTextSpeakerChanged = ({ speaker, meet }: InterfaceSpeakerChangedPayload = {}) => this.setSpeaker(speaker, meet);
   onTextEmitBefore = () => this.emit(this.EVENTS.INTERFACE.SHOW);
   onTextHide = () => this.setText([], [], "", 0);
-  onView = ({ view, isForce = false } = {}) => this.setView(view, isForce);
-  onStateSet = ({ [this.name]: state } = {}) => this.setNewState(state.view, state.isVisible, state.isShow);
+  onView = ({ view, isForce = false }: InterfaceViewPayload = {}) => this.setView(view, isForce);
+  onStateSet = ({ [this.name]: state }: InterfaceStateSetPayload = {}) => this.setNewState(state?.view, state?.isVisible, state?.isShow);
   onStateClear = () => this.setNewState(this.PARAMS.INTERFACE.DEFAULT_VIEW, false, false);
 
-  setView = (view, isForce = false) => {
-    this.state.view = view;
+  setView = (view?: string, isForce = false) => {
+    this.state.view = view ?? "";
 
     return this.emit(this.EVENTS.INTERFACE.VIEW_CHANGED, { isForce });
   };
-  setShow = async (isShow, isForce = false) => {
+  setShow = async (isShow: boolean, isForce = false) => {
     this.state.isShow = isShow;
 
     if (isShow && !this.state.isVisible) await this.setVisible(true, isForce);
 
     return this.emit(this.EVENTS.INTERFACE.SHOW_CHANGED, { isForce });
   };
-  setVisible = (isVisible, isForce = false) => {
+  setVisible = (isVisible: boolean, isForce = false) => {
     this.state.isVisible = isVisible;
 
     return this.emit(this.EVENTS.INTERFACE.VISIBLE_CHANGED, { isForce });
   };
-  setText = (tokens = [], wall = [], uid = "", tokensVisible) => {
+  setText = (tokens: InterfaceModuleState["tokens"] = [], wall: InterfaceModuleState["wall"] = [], uid = "", tokensVisible?: number) => {
     Object.assign(this.state, { tokens, wall, uid, tokensVisible });
 
     return this.emit(this.EVENTS.INTERFACE.TEXT_CHANGED);
@@ -73,15 +84,15 @@ export class Interface extends Module {
 
     return this.emit(this.EVENTS.INTERFACE.SPEAKER_CHANGED);
   };
-  setNewState = (view, isVisible, isShow) => {
+  setNewState = (view?: string, isVisible?: boolean, isShow?: boolean) => {
     Object.assign(this.state, { isShow, view, isVisible });
 
     return this.emit(this.EVENTS.INTERFACE.STATE_CHANGED);
   };
 
-  getDefaultState = () => {
+  getDefaultState = (): InterfaceModuleState => {
     const result = { tokens: [], view: this.PARAMS.INTERFACE.DEFAULT_VIEW, uid: "", speaker: "" };
 
-    return { ...result, meet: 0, tokensVisible: 0, isShow: false, isVisible: false };
+    return { ...result, meet: 0, tokensVisible: 0, isShow: false, isVisible: false, wall: [] };
   };
 }

package/src/modules/view.ts

@@ -0,0 +1,22 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { InterfacePluginConstants, InterfacePluginEvents, InterfacePluginParams, InterfacePluginSettings } from "../types.js";
+import type { InterfacePluginState } from "../utils/interface.js";
+
+export class InterfaceView extends ModuleView<
+  InterfacePluginEvents,
+  InterfacePluginConstants,
+  InterfacePluginSettings,
+  InterfacePluginParams,
+  InterfacePluginState
+> {
+  name = "interface.view";
+
+  locLabel = this.PARAMS.INTERFACE.LOC_LABEL;
+  animationTime = this.PARAMS.INTERFACE.TRANSITION;
+  updateEvent = this.EVENTS.INTERFACE.VIEW_UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,35 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName } from "@vnejs/plugins.controls.contract";
+import type { PluginName as InteractPluginName, SubscribeEvents as InteractSubscribeEvents } from "@vnejs/plugins.core.interact.contract";
+import type { PluginName as ScenarioPluginName, SubscribeEvents as ScenarioSubscribeEvents } from "@vnejs/plugins.core.scenario.contract";
+import type { PluginName as StatePluginName, SubscribeEvents as StateSubscribeEvents } from "@vnejs/plugins.core.state.contract";
+import type { PluginName as TextPluginName, Params as TextParams, SubscribeEvents as TextSubscribeEvents } from "@vnejs/plugins.text.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.scenario.interface.contract";
+
+import type { InterfacePluginState } from "./utils/interface.js";
+
+export type InterfacePluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<ScenarioPluginName, ScenarioSubscribeEvents> &
+  Record<StatePluginName, StateSubscribeEvents> &
+  Record<TextPluginName, TextSubscribeEvents> &
+  Record<InteractPluginName, InteractSubscribeEvents>;
+
+export type InterfacePluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type InterfacePluginSettings = ModuleComponentsSettings;
+
+export type InterfacePluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<TextPluginName, TextParams>;
+
+export type InterfacePluginViewState = InterfacePluginState & {
+  isViewActive?: boolean;
+};
+
+export type InterfaceViewProps = ReactComponentProps<
+  InterfacePluginEvents,
+  InterfacePluginConstants,
+  InterfacePluginSettings,
+  InterfacePluginParams,
+  InterfacePluginViewState
+>;

package/src/utils/interface.ts

@@ -0,0 +1,52 @@
+import type { ModuleControllerState } from "@vnejs/module.components";
+import type { TokenizedChar, WallElement } from "@vnejs/plugins.text.contract";
+import type { InterfaceModuleState } from "@vnejs/plugins.views.scenario.interface.contract";
+
+export type { InterfaceModuleState };
+
+export type InterfaceSpeakerInfo = {
+  color?: string;
+  opacity?: number;
+  speakerColor?: string;
+  names?: Record<string, string[] | undefined> & { default?: string[] };
+};
+
+export type InterfacePluginState = ModuleControllerState &
+  InterfaceModuleState & {
+    isFast?: boolean;
+    locs?: Record<string, string>;
+    prefix?: string;
+    postfix?: string;
+    transition?: number;
+    speakerText?: string;
+    speakerName?: string;
+    speakerColor?: string;
+    color?: string;
+    opacity?: number;
+  };
+
+export type InterfaceLineExecPayload = {
+  line?: string;
+};
+
+export type InterfaceForcePayload = {
+  isForce?: boolean;
+};
+
+export type InterfaceViewPayload = InterfaceForcePayload & {
+  view?: string;
+};
+
+export type InterfaceTextChangedPayload = {
+  tokens?: TokenizedChar[];
+  wall?: WallElement[];
+  uid?: string;
+  tokensVisible?: number;
+};
+
+export type InterfaceSpeakerChangedPayload = {
+  speaker?: string;
+  meet?: number;
+};
+
+export type InterfaceStateSetPayload = Record<string, Pick<InterfaceModuleState, "view" | "isVisible" | "isShow"> | undefined>;

package/src/view/components/InterfaceBackdrop.tsx

@@ -0,0 +1,24 @@
+import { Backdrop, PositionBox, useMemo } from "@vnejs/uis.react";
+
+import type { InterfaceViewProps } from "../../types.js";
+
+export const InterfaceBackdrop = ({ view = "", transition = 0, PARAMS }: InterfaceViewProps) => {
+  const propsByView = useMemo(() => PARAMS.INTERFACE.VIEW_PROPS[view as keyof typeof PARAMS.INTERFACE.VIEW_PROPS]?.backdrop || {}, [view, PARAMS.INTERFACE.VIEW_PROPS]);
+
+  const propsBackdrop = useMemo(() => ({ ...propsByView.props, transition }), [propsByView, transition]);
+  const propsPosition = useMemo(() => ({ ...propsByView.flatPosition, transition }), [propsByView, transition]);
+
+  const styleFlatBackdrop = useMemo(
+    () => ({ ...propsByView.flatStyle, width: "100%", height: "100%", transition: `${transition}ms` }),
+    [propsByView, transition],
+  );
+
+  return (
+    <>
+      <Backdrop {...propsBackdrop} />
+      <PositionBox {...propsPosition}>
+        <div style={styleFlatBackdrop} />
+      </PositionBox>
+    </>
+  );
+};

package/{view/components/InterfaceViewDialog.jsx → src/view/components/InterfaceViewDialog.tsx}

@@ -1,15 +1,15 @@
-import { useMemo } from "react";
-
-import { Flex, PositionBox, SmoothText, Text } from "@vnejs/uis.react";
+import { Flex, PositionBox, SmoothText, Text, useMemo } from "@vnejs/uis.react";
 import { getVneLength } from "@vnejs/uis.utils";
-import { useTokensHook } from "./tokens.hook";
 
-export const InterfaceViewDialog = (props = {}) => {
-  const { isShow = false, transition, tokensVisible = 0, tokens, speakerText, speakerName, speakerColor, opacity, color, uid = "" } = props;
+import type { InterfaceViewProps } from "../../types.js";
+import { useTokensHook } from "./tokens.hook.js";
+
+export const InterfaceViewDialog = (props: InterfaceViewProps) => {
+  const { isViewActive = false, transition, tokensVisible = 0, tokens = [], speakerText, speakerName, speakerColor, opacity, color, uid = "", PARAMS } = props;
 
-  const propsByView = props.PARAMS.INTERFACE.VIEW_PROPS.adv;
+  const propsByView = PARAMS.INTERFACE.VIEW_PROPS.adv;
 
-  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isShow ? 1 : 0, transition }), [isShow, transition, propsByView.position]);
+  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
 
   const speakerOpacity = speakerName ? 1 : 0;
   const speakerTransition = speakerName ? transition : 0;
@@ -19,15 +19,15 @@ export const InterfaceViewDialog = (props = {}) => {
   const styleSepColor = useMemo(() => ({ opacity: speakerOpacity, transition: `${speakerTransition}ms` || "none" }), [speakerOpacity, speakerTransition]);
   const styleSep = useMemo(() => ({ ...styleSepBg, ...styleSepColor }), [styleSepBg, styleSepColor]);
 
-  const { realTokens, realTokensVisible } = useTokensHook(isShow, tokens, tokensVisible, uid);
+  const { realTokens, realTokensVisible } = useTokensHook(isViewActive, tokens, tokensVisible, uid);
 
   const propsSpeaker = useMemo(
     () => ({ ...propsByView.speaker, text: speakerText, color: speakerColor, opacity: speakerOpacity, transition: speakerTransition }),
-    [speakerText, speakerColor, speakerOpacity, speakerTransition],
+    [speakerText, speakerColor, speakerOpacity, speakerTransition, propsByView.speaker],
   );
   const propsText = useMemo(
     () => ({ ...propsByView.text, opacity, color, tokens: realTokens, tokensVisibleForce: realTokensVisible, transition }),
-    [opacity, color, realTokens, realTokensVisible, transition],
+    [opacity, color, realTokens, realTokensVisible, transition, propsByView.text],
   );
 
   return (

package/src/view/components/InterfaceViewLine.tsx

@@ -0,0 +1,27 @@
+import { Flex, PositionBox, SmoothText, useMemo } from "@vnejs/uis.react";
+
+import type { InterfaceViewProps } from "../../types.js";
+import { useTokensHook } from "./tokens.hook.js";
+
+export const InterfaceViewLine = (props: InterfaceViewProps) => {
+  const { isViewActive = false, transition = 0, tokensVisible = 0, tokens = [], opacity, color, uid = "", PARAMS } = props;
+
+  const propsByView = PARAMS.INTERFACE.VIEW_PROPS.line;
+
+  const { realTokens, realTokensVisible } = useTokensHook(isViewActive, tokens, tokensVisible, uid);
+
+  const propsTextTokens = useMemo(() => ({ tokens: realTokens, tokensVisibleForce: realTokensVisible }), [realTokens, realTokensVisible]);
+  const propsText = useMemo(
+    () => ({ ...propsByView.text, opacity, color, transition, ...propsTextTokens }),
+    [opacity, color, transition, propsTextTokens, propsByView.text],
+  );
+  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
+
+  return (
+    <PositionBox {...propsPosition}>
+      <Flex {...propsByView.flex}>
+        <SmoothText {...propsText} />
+      </Flex>
+    </PositionBox>
+  );
+};

package/src/view/components/InterfaceViewWall.tsx

@@ -0,0 +1,93 @@
+import type { TokenizedChar, WallElement } from "@vnejs/plugins.text.contract";
+import { Flex, PositionBox, Scrollbar, SmoothText, Text, useMemo } from "@vnejs/uis.react";
+
+import type { Params as InterfaceContractParams } from "@vnejs/plugins.views.scenario.interface.contract";
+
+import type { InterfaceViewProps } from "../../types.js";
+import type { InterfaceSpeakerInfo } from "../../utils/interface.js";
+import { useTokensHook } from "./tokens.hook.js";
+
+type WallTextElement = {
+  speakerName?: string;
+  speakerColor?: string;
+  uid: string;
+  color?: string;
+  opacity?: number;
+  tokens: TokenizedChar[];
+  tokensVisible: number;
+  transition?: number;
+  propsByView: InterfaceContractParams["VIEW_PROPS"]["wall"];
+};
+
+const renderOneText = (wallElement: WallTextElement) => (
+  <div key={wallElement.uid}>
+    {wallElement.speakerName && (
+      <Text
+        {...wallElement.propsByView.text}
+        isInlineBlock={true}
+        color={wallElement.speakerColor}
+        text={`${wallElement.speakerName}:`}
+        marginRight={12}
+      />
+    )}
+    <SmoothText
+      {...wallElement.propsByView.text}
+      isNoScrollBar={true}
+      color={wallElement.color}
+      opacity={wallElement.opacity}
+      transition={wallElement.transition}
+      tokens={wallElement.tokens}
+      tokensVisibleForce={wallElement.tokensVisible}
+    />
+  </div>
+);
+
+const mapWall = ({ uid = "", tokens = [], speaker = "", meet = 0, transition = 0, props }: WallElement & { transition?: number; props: InterfaceViewProps }) => {
+  const propsByView = props.PARAMS.INTERFACE.VIEW_PROPS.wall;
+  const speakersInfo = props.PARAMS.TEXT.SPEAKERS_INFO as Record<string, InterfaceSpeakerInfo>;
+  const speakerInfo = speakersInfo[speaker] || speakersInfo.default || {};
+  const { color, opacity = 1, names = {}, speakerColor = "white" } = speakerInfo;
+
+  const langNames = names[(props.shared as { lang?: string }).lang ?? ""] || names.default || [];
+  const speakerName = langNames[meet] || langNames[langNames.length - 1];
+
+  return { speakerName, speakerColor, uid, color, opacity, tokens, tokensVisible: tokens.length, transition, propsByView };
+};
+
+export const InterfaceViewWall = (props: InterfaceViewProps) => {
+  const {
+    isViewActive = false,
+    transition = 0,
+    tokensVisible = 0,
+    tokens = [],
+    wall = [],
+    uid = "",
+    speakerName,
+    speakerColor,
+    color,
+    opacity,
+    PARAMS,
+  } = props;
+
+  const propsByView = PARAMS.INTERFACE.VIEW_PROPS.wall;
+
+  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isViewActive ? 1 : 0, transition }), [isViewActive, transition, propsByView.position]);
+  const wallWithProps = useMemo(() => wall.map((item) => ({ ...item, transition, props })), [wall, transition, props]);
+
+  const { realTokens, realTokensVisible } = useTokensHook(isViewActive, tokens, tokensVisible, uid);
+
+  const wallTexts = useMemo(() => wallWithProps.map(mapWall), [wallWithProps]);
+  const curText = useMemo(
+    () => ({ speakerName, speakerColor, uid, color, opacity, tokens: realTokens, tokensVisible: realTokensVisible, transition, propsByView }),
+    [speakerName, speakerColor, uid, color, opacity, realTokens, realTokensVisible, transition, propsByView],
+  );
+  const texts = useMemo(() => [...wallTexts, curText], [wallTexts, curText]);
+
+  return (
+    <PositionBox {...propsPosition}>
+      <Scrollbar {...propsByView.scrollBar}>
+        <Flex {...propsByView.flex}>{texts.map(renderOneText)}</Flex>
+      </Scrollbar>
+    </PositionBox>
+  );
+};

package/src/view/components/index.ts

@@ -0,0 +1,4 @@
+export * from "./InterfaceBackdrop.js";
+export * from "./InterfaceViewDialog.js";
+export * from "./InterfaceViewLine.js";
+export * from "./InterfaceViewWall.js";

package/{view/components/tokens.hook.jsx → src/view/components/tokens.hook.ts}

@@ -1,18 +1,16 @@
-import { useEffect, useMemo, useState } from "react";
-import { flushSync } from "react-dom";
+import type { TokenizedChar } from "@vnejs/plugins.text.contract";
+import { flushSync, useEffect, useMemo, useState } from "@vnejs/uis.react";
 
-const EMPTY_ARR = [];
-
-export const useTokensHook = (isShow, tokens, tokensVisible, uid) => {
+export const useTokensHook = (isShow: boolean, tokens: TokenizedChar[], tokensVisible: number, uid: string) => {
   const [savedUid, setSavedUid] = useState("");
-  const [tokensSync, setTokensSync] = useState(EMPTY_ARR);
-  const [tokensWrong, setTokensWrong] = useState(EMPTY_ARR);
+  const [tokensSync, setTokensSync] = useState([] as TokenizedChar[]);
+  const [tokensWrong, setTokensWrong] = useState([] as TokenizedChar[]);
 
   useEffect(() => {
     if (isShow) setTokensWrong(tokens);
-  }, [isShow]);
+  }, [isShow, tokens]);
   useEffect(() => {
-    setImmediate(() => {
+    setTimeout(() => {
       if (savedUid === uid) {
         if (!isShow) setTokensWrong(tokens);
         setTokensSync(tokens);
@@ -23,12 +21,12 @@ export const useTokensHook = (isShow, tokens, tokensVisible, uid) => {
         if (!isShow) setTokensWrong(tokens);
         setTokensSync(tokens);
       });
-    });
-  }, [tokens]);
+    }, 0);
+  }, [tokens, savedUid, uid, isShow]);
 
   const isShowTokens = useMemo(() => tokensSync !== tokensWrong, [tokensSync, tokensWrong]);
   const realTokensVisible = useMemo(() => (isShowTokens ? tokensVisible : 0), [isShowTokens, tokensVisible]);
-  const realTokens = useMemo(() => (isShowTokens ? tokensSync : EMPTY_ARR), [isShowTokens, tokensSync]);
+  const realTokens = useMemo(() => (isShowTokens ? tokensSync : []), [isShowTokens, tokensSync]);
 
   return { isShowTokens, realTokensVisible, realTokens };
 };

package/src/view/index.tsx

@@ -0,0 +1,69 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Screen, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { InterfacePluginConstants, InterfacePluginEvents, InterfacePluginParams, InterfacePluginSettings } from "../types.js";
+import type { InterfacePluginState, InterfaceSpeakerInfo } from "../utils/interface.js";
+import { InterfaceBackdrop, InterfaceViewDialog, InterfaceViewLine, InterfaceViewWall } from "./components/index.js";
+
+type InterfaceComponentProps = ReactComponentProps<
+  InterfacePluginEvents,
+  InterfacePluginConstants,
+  InterfacePluginSettings,
+  InterfacePluginParams,
+  InterfacePluginState
+>;
+
+const Interface = (props: InterfaceComponentProps) => {
+  const { store, onMount, emit, EVENTS, PARAMS } = props;
+  const state = useStoreState<InterfacePluginState>(store, onMount);
+
+  const { isShow = false, isVisible = false, isForce = false, tokensVisible = 0, view = "", locs = {} } = state;
+  const { speaker = "", meet = 0, tokens = [], wall = [], postfix = "", prefix = "", uid = "" } = state;
+
+  const onClick = useCallback(() => emit(EVENTS.INTERFACE.INTERACT), [emit, EVENTS.INTERFACE.INTERACT]);
+
+  const isRealForce = useIsForceHook(isForce);
+
+  const speakerName = locs[`speaker.${speaker}.${meet ?? 0}`];
+  const speakerText = speakerName ? `${`${locs[`prefix.${prefix}`] ?? ""} `}${speakerName}${` ${locs[`postfix.${postfix}`] ?? ""}`}` : ".";
+  const transition = isRealForce ? 0 : PARAMS.INTERFACE.TRANSITION;
+  const speakersInfo = PARAMS.TEXT.SPEAKERS_INFO as Record<string, InterfaceSpeakerInfo>;
+  const speakerInfo = speakersInfo[speaker] || speakersInfo[PARAMS.TEXT.DEFAULT_SPEAKER_NAME] || {};
+
+  const { color, opacity = 1, speakerColor = "white" } = speakerInfo;
+
+  const propsCommon = useMemo(
+    () => ({ isForce: isRealForce, transition, tokensVisible, tokens, wall, uid }),
+    [isRealForce, transition, tokensVisible, tokens, wall, uid],
+  );
+  const propsSpeaker = useMemo(() => ({ speakerText, speakerName, speakerColor }), [speakerText, speakerName, speakerColor]);
+  const propsText = useMemo(() => ({ opacity, color }), [opacity, color]);
+  const propsView = useMemo(() => ({ ...propsCommon, ...propsSpeaker, ...propsText }), [propsCommon, propsSpeaker, propsText]);
+
+  const propsBackdrop = useMemo(() => ({ view, transition, ...props }), [view, transition, props]);
+  const propsDialog = useMemo(() => ({ isViewActive: view === "adv", ...propsView, ...props }), [view, propsView, props]);
+  const propsLine = useMemo(() => ({ isViewActive: view === "line", ...propsView, ...props }), [view, propsView, props]);
+  const propsWall = useMemo(() => ({ isViewActive: view === "wall", ...propsView, ...props }), [view, propsView, props]);
+
+  return (
+    <Screen
+      isShow={isShow}
+      isForce={isRealForce}
+      isHidden={!isVisible}
+      isDisableAutoread={false}
+      isAllowAutoread={Boolean(isShow && isVisible)}
+      isIgnoreOnScreenshot={false}
+      transition={transition}
+      zIndex={PARAMS.INTERFACE.ZINDEX}
+      onClick={onClick}
+    >
+      <InterfaceBackdrop {...propsBackdrop} />
+      <InterfaceViewDialog {...propsDialog} />
+      <InterfaceViewLine {...propsLine} />
+      <InterfaceViewWall {...propsWall} />
+    </Screen>
+  );
+};
+
+export const render: ViewRenderFunc<InterfacePluginState> = createRenderFunc(Interface);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/events.js

@@ -1,31 +0,0 @@
-export const SUBSCRIBE_EVENTS = {
-  SHOW: "vne:interface:show",
-  HIDE: "vne:interface:hide",
-
-  SHOW_CHANGED: "vne:interface:show_changed",
-
-  VIEW_SHOW: "vne:interface:view_show",
-  VIEW_HIDE: "vne:interface:view_hide",
-  VIEW_UPDATE: "vne:interface:view_update",
-
-  TEXT: "vne:interface:text",
-  TEXT_HIDE: "vne:interface:text_hide",
-  TEXT_CHANGED: "vne:interface:text_changed",
-
-  SPEAKER_CHANGED: "vne:interface:speaker_changed",
-
-  VISIBLE: "vne:interface:visible",
-  VISIBLE_CHANGED: "vne:interface:visible_changed",
-
-  VIEW: "vne:interface:view",
-  VIEW_CHANGED: "vne:interface:view_changed",
-
-  HISTORY: "vne:interface:history",
-  HISTORY_BACK: "vne:interface:history_back",
-
-  GAMEMENU: "vne:interface:gamemenu",
-
-  INTERACT: "vne:interface:interact",
-
-  STATE_CHANGED: "vne:interface:state_changed",
-};

package/const/params.js

@@ -1,37 +0,0 @@
-import { getVneLength } from "@vnejs/uis.utils";
-
-export const DEFAULT_VIEW = "line";
-
-export const LOC_LABEL = "interface";
-
-export const TRANSITION = 500;
-export const ZINDEX = 1000;
-
-const createBackdropProps = (opacity) => ({ type: "bottom", size: 600, transition: TRANSITION, opacity });
-const createFlatBackdropPosition = (margin, opacity) => ({ top: margin, left: margin, right: margin, bottom: margin, transition: TRANSITION, opacity });
-const createFlatBackdropStyle = (borderRadius) => ({ background: "rgba(0, 0, 0, 0.6)", borderRadius, transition: `${TRANSITION}ms` });
-
-export const VIEW_PROPS = {
-  adv: {
-    backdrop: { props: createBackdropProps(1), flatPosition: createFlatBackdropPosition(0, 0), flatStyle: createFlatBackdropStyle(0) },
-    position: { bottom: 144, left: 600, right: 600 },
-    flex: { direction: "column", gap: 24 },
-    speaker: { size: 72, weight: "bold" },
-    text: { size: 60, height: 300 },
-  },
-  wall: {
-    backdrop: { props: createBackdropProps(0), flatPosition: createFlatBackdropPosition(120, 1), flatStyle: createFlatBackdropStyle(getVneLength(48)) },
-    position: { top: 180, left: 180, right: 180, bottom: 264 },
-    flex: { direction: "column", gap: 24 },
-    scrollBar: { height: 1680, scrollToEnd: true, hideScrolbars: true, disableScroll: true },
-    speaker: { size: 72, weight: "bold" },
-    text: { size: 60 },
-  },
-  line: {
-    backdrop: { props: createBackdropProps(0), flatPosition: createFlatBackdropPosition(0, 1), flatStyle: createFlatBackdropStyle(0) },
-    position: { isCentered: true },
-    flex: { direction: "column", gap: 60 },
-    speaker: { size: 72, weight: "bold" },
-    text: { isCentered: true, size: 60, width: 3120 },
-  },
-};

package/index.js

@@ -1,10 +0,0 @@
-import { regPlugin } from "@vnejs/shared";
-
-import { SUBSCRIBE_EVENTS } from "./const/events";
-import * as params from "./const/params";
-
-import { InterfaceController } from "./modules/controller";
-import { Interface } from "./modules/interface";
-import { InterfaceView } from "./modules/view";
-
-regPlugin("INTERFACE", { events: SUBSCRIBE_EVENTS, params }, [InterfaceController, Interface, InterfaceView]);

package/modules/view.js

@@ -1,14 +0,0 @@
-import { ModuleView } from "@vnejs/module.components";
-
-import { render } from "../view";
-
-export class InterfaceView extends ModuleView {
-  name = "interface.view";
-
-  locLabel = this.PARAMS.INTERFACE.LOC_LABEL;
-  animationTime = this.PARAMS.INTERFACE.TRANSITION;
-  updateEvent = this.EVENTS.INTERFACE.VIEW_UPDATE;
-
-  renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
-}

package/view/components/InterfaceBackdrop.jsx

@@ -1,22 +0,0 @@
-import { useMemo } from "react";
-
-import { Backdrop, PositionBox } from "@vnejs/uis.react";
-
-export const InterfaceBackdrop = ({ view = "", transition = 0, ...props }) => {
-  const propsByView = useMemo(() => props.PARAMS.INTERFACE.VIEW_PROPS[view]?.backdrop || {}, [view]);
-
-  const propsBackdrop = useMemo(() => ({ ...propsByView.props, transition }), [propsByView, transition]);
-  const propsPosition = useMemo(() => ({ ...propsByView.flatPosition, transition }), [propsByView, transition]);
-
-  const styleFlatBackdrop = useMemo(() => ({ ...propsByView.flatStyle, width: "100%", height: "100%", transition: `${transition}ms` }), [propsByView]);
-
-  return (
-    <>
-      <Backdrop {...propsBackdrop} />
-
-      <PositionBox {...propsPosition}>
-        <div style={styleFlatBackdrop} />
-      </PositionBox>
-    </>
-  );
-};