@vnejs/plugins.views.scenario.interface 0.1.12

package/const/events.js

@@ -0,0 +1,31 @@
+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

@@ -0,0 +1,37 @@
+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

@@ -0,0 +1,10 @@
+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/controller.js

@@ -0,0 +1,74 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class InterfaceController extends ModuleController {
+  name = "interface.controller";
+
+  emitInteract = () => this.emit(this.EVENTS.INTERFACE.INTERACT);
+
+  updateEvent = this.EVENTS.INTERFACE.VIEW_UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.INTERACT]: this.emitInteract,
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: this.emitInteract,
+  };
+  controlsUnvisible = {};
+  controlsIndex = this.PARAMS.INTERFACE.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTERFACE.VIEW_SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE.VIEW_HIDE, this.onHide);
+
+    this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
+    this.on(this.EVENTS.INTERFACE.VIEW_CHANGED, this.onViewChanged);
+    this.on(this.EVENTS.INTERFACE.TEXT_CHANGED, this.onTextChanged);
+    this.on(this.EVENTS.INTERFACE.SPEAKER_CHANGED, this.onSpeakerChanged);
+    this.on(this.EVENTS.INTERFACE.STATE_CHANGED, this.onStateChanged);
+    this.on(this.EVENTS.INTERFACE.VISIBLE_CHANGED, this.onVisibleChanged);
+  };
+
+  init = () => this.emit(this.EVENTS.INTERFACE.VIEW, { view: this.PARAMS.INTERFACE.DEFAULT_VIEW, isForce: true });
+
+  onShowChanged = ({ isForce = false } = {}) => {
+    const { isShow = false } = this.globalState.interface;
+    const event = isShow ? this.EVENTS.INTERFACE.VIEW_SHOW : this.EVENTS.INTERFACE.VIEW_HIDE;
+
+    if (this.state.isShow !== isShow) return this.emit(event, { isForce });
+  };
+  onViewChanged = ({ isForce = false } = {}) => {
+    const { view = "" } = this.globalState.interface;
+
+    if (this.state.view !== view) return this.updateStateAndView({ view }, isForce, !isForce);
+  };
+  onTextChanged = async () => {
+    const { tokens = [], wall = [], uid = "", tokensVisible = 0 } = this.globalState.interface;
+
+    while (this.isStateChangeInProcess) await this.waitRerender();
+
+    return this.updateStateAndViewFast({ tokens, wall, uid, tokensVisible });
+  };
+  onSpeakerChanged = async () => {
+    const { speaker = "", meet = 0 } = this.globalState.interface;
+
+    while (this.isStateChangeInProcess) await this.waitRerender();
+
+    return this.updateStateAndViewFast({ speaker, meet });
+  };
+  onVisibleChanged = async ({ isForce = false } = {}) => {
+    const { isVisible = false } = this.globalState.interface;
+
+    if (this.state.isVisible === isVisible) return;
+
+    const args = { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 };
+    await this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
+    await this.updateStateAndView({ isVisible }, isForce, !isForce);
+  };
+
+  onStateChanged = async () => {
+    const { view = "", isShow = false, isVisible = false } = this.globalState.interface;
+
+    this.isStateChangeInProcess = true;
+    await this.updateStateAndViewForce({ view, isShow, isVisible });
+    this.isStateChangeInProcess = false;
+  };
+
+  getDefaultState = () => ({ tokens: [], wall: [], uid: "", tokensVisible: 0, speaker: "", meet: 0, isShow: false, isVisible: false });
+}

package/modules/interface.js

@@ -0,0 +1,87 @@
+import { Module } from "@vnejs/module";
+
+import { tokenizeExecLine } from "@vnejs/helpers";
+
+export class Interface extends Module {
+  name = "interface";
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTERFACE.INTERACT, this.onInteract);
+    this.on(this.EVENTS.INTERFACE.SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE.HIDE, this.onHide);
+    this.on(this.EVENTS.INTERFACE.VISIBLE, this.onVisible);
+    this.on(this.EVENTS.INTERFACE.TEXT_HIDE, this.onTextHide);
+    this.on(this.EVENTS.INTERFACE.VIEW, this.onView);
+
+    this.on(this.EVENTS.TEXT.CHANGED, this.onTextChanged);
+    this.on(this.EVENTS.TEXT.SPEAKER_CHANGED, this.onTextSpeakerChanged);
+    this.on(this.EVENTS.TEXT.EMIT_BEFORE, this.onTextEmitBefore);
+
+    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 = "" } = {}) => {
+    const isForce = Boolean(this.shared.viewForceAnimationSources.length);
+
+    const [action = "", execArg = ""] = tokenizeExecLine(line);
+
+    if (action === "show") await this.emit(this.EVENTS.INTERFACE.SHOW, { isForce });
+    if (action === "hide") await this.emit(this.EVENTS.INTERFACE.HIDE, { isForce });
+    if (action === "view") await this.emit(this.EVENTS.INTERFACE.VIEW, { view: execArg, isForce });
+
+    this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
+  };
+
+  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);
+  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);
+  onStateClear = () => this.setNewState(this.PARAMS.INTERFACE.DEFAULT_VIEW, false, false);
+
+  setView = (view, isForce = false) => {
+    this.state.view = view;
+
+    return this.emit(this.EVENTS.INTERFACE.VIEW_CHANGED, { isForce });
+  };
+  setShow = async (isShow, 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) => {
+    this.state.isVisible = isVisible;
+
+    return this.emit(this.EVENTS.INTERFACE.VISIBLE_CHANGED, { isForce });
+  };
+  setText = (tokens = [], wall = [], uid = "", tokensVisible) => {
+    Object.assign(this.state, { tokens, wall, uid, tokensVisible });
+
+    return this.emit(this.EVENTS.INTERFACE.TEXT_CHANGED);
+  };
+  setSpeaker = (speaker = "", meet = 0) => {
+    Object.assign(this.state, { speaker, meet });
+
+    return this.emit(this.EVENTS.INTERFACE.SPEAKER_CHANGED);
+  };
+  setNewState = (view, isVisible, isShow) => {
+    Object.assign(this.state, { isShow, view, isVisible });
+
+    return this.emit(this.EVENTS.INTERFACE.STATE_CHANGED);
+  };
+
+  getDefaultState = () => {
+    const result = { tokens: [], view: this.PARAMS.INTERFACE.DEFAULT_VIEW, uid: "", speaker: "" };
+
+    return { ...result, meet: 0, tokensVisible: 0, isShow: false, isVisible: false };
+  };
+}

package/modules/view.js

@@ -0,0 +1,14 @@
+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/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.scenario.interface",
+  "version": "0.1.12",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "publish:major:plugin": "npm run publish:major",
+    "publish:minor:plugin": "npm run publish:minor",
+    "publish:patch:plugin": "npm run publish:patch",
+    "publish:major": "npm version major && npm publish --access public",
+    "publish:minor": "npm version minor && npm publish --access public",
+    "publish:patch": "npm version patch && npm publish --access public"
+  },
+  "author": "",
+  "license": "ISC",
+  "description": ""
+}

package/view/components/InterfaceBackdrop.jsx

@@ -0,0 +1,22 @@
+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>
+    </>
+  );
+};

package/view/components/InterfaceViewDialog.jsx

@@ -0,0 +1,42 @@
+import { useMemo } from "react";
+
+import { Flex, PositionBox, SmoothText, Text } 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;
+
+  const propsByView = props.PARAMS.INTERFACE.VIEW_PROPS.adv;
+
+  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isShow ? 1 : 0, transition }), [isShow, transition, propsByView.position]);
+
+  const speakerOpacity = speakerName ? 1 : 0;
+  const speakerTransition = speakerName ? transition : 0;
+
+  const backgroundSep = useMemo(() => `linear-gradient(to right, ${speakerColor} 0%, transparent 100%)`, [speakerColor]);
+  const styleSepBg = useMemo(() => ({ height: getVneLength(6), width: "calc(200% / 3)", background: backgroundSep }), [backgroundSep]);
+  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 propsSpeaker = useMemo(
+    () => ({ ...propsByView.speaker, text: speakerText, color: speakerColor, opacity: speakerOpacity, transition: speakerTransition }),
+    [speakerText, speakerColor, speakerOpacity, speakerTransition],
+  );
+  const propsText = useMemo(
+    () => ({ ...propsByView.text, opacity, color, tokens: realTokens, tokensVisibleForce: realTokensVisible, transition }),
+    [opacity, color, realTokens, realTokensVisible, transition],
+  );
+
+  return (
+    <PositionBox {...propsPosition}>
+      <Flex {...propsByView.flex}>
+        <Text {...propsSpeaker} />
+        <div style={styleSep} />
+        <SmoothText {...propsText} />
+      </Flex>
+    </PositionBox>
+  );
+};

package/view/components/InterfaceViewLine.jsx

@@ -0,0 +1,25 @@
+import { useMemo } from "react";
+
+import { Flex, PositionBox, SmoothText } from "@vnejs/uis.react";
+
+import { useTokensHook } from "./tokens.hook";
+
+export const InterfaceViewLine = (props = {}) => {
+  const { isShow = false, transition = 0, tokensVisible = 0, tokens = [], opacity, color, uid = "" } = props;
+
+  const propsByView = props.PARAMS.INTERFACE.VIEW_PROPS.line;
+
+  const { realTokens, realTokensVisible } = useTokensHook(isShow, 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]);
+  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isShow ? 1 : 0, transition }), [isShow, transition]);
+
+  return (
+    <PositionBox {...propsPosition}>
+      <Flex {...propsByView.flex}>
+        <SmoothText {...propsText} />
+      </Flex>
+    </PositionBox>
+  );
+};

package/view/components/InterfaceViewWall.jsx

@@ -0,0 +1,65 @@
+import { useMemo } from "react";
+
+import { Flex, PositionBox, Scrollbar, ScrollContent, SmoothText, Text } from "@vnejs/uis.react";
+
+import { useTokensHook } from "./tokens.hook";
+
+const renderOneText = (wallElement) => (
+  <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 } = {}) => {
+  const propsByView = props.PARAMS.INTERFACE.VIEW_PROPS.wall;
+  const speakerInfo = props.PARAMS.TEXT.SPEAKERS_INFO[speaker] || props.PARAMS.TEXT.SPEAKERS_INFO.default || {};
+  const { color, opacity = 1, names = {}, speakerColor = "white" } = speakerInfo;
+
+  const langNames = names[props.shared.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 = {}) => {
+  const { isShow = false, transition = 0, tokensVisible = 0, tokens = [], wall = [], uid = "", speakerName, speakerColor, color, opacity } = props;
+
+  const propsByView = props.PARAMS.INTERFACE.VIEW_PROPS.wall;
+
+  const propsPosition = useMemo(() => ({ ...propsByView.position, opacity: isShow ? 1 : 0, transition }), [isShow, transition]);
+  const wallWithProps = useMemo(() => wall.map((item) => ({ ...item, transition, props })), [wall, transition]);
+
+  const { realTokens, realTokensVisible } = useTokensHook(isShow, tokens, tokensVisible, uid);
+
+  const wallTexts = useMemo(() => wallWithProps.map(mapWall), [wallWithProps]);
+  const curText = useMemo(
+    () => ({ speakerName, speakerColor, uid, color, opacity, tokens: realTokens, tokensVisible: realTokensVisible, transition, propsByView }),
+    [uid, realTokens, realTokensVisible, transition],
+  );
+  const texts = useMemo(() => [...wallTexts, curText], [wallTexts, curText]);
+
+  return (
+    <PositionBox {...propsPosition}>
+      <Scrollbar {...propsByView.scrollBar}>
+        <Flex {...propsByView.flex}>{texts.map(renderOneText)}</Flex>
+      </Scrollbar>
+    </PositionBox>
+  );
+};

package/view/components/index.js

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

package/view/components/tokens.hook.jsx

@@ -0,0 +1,34 @@
+import { useEffect, useMemo, useState } from "react";
+import { flushSync } from "react-dom";
+
+const EMPTY_ARR = [];
+
+export const useTokensHook = (isShow, tokens, tokensVisible, uid) => {
+  const [savedUid, setSavedUid] = useState("");
+  const [tokensSync, setTokensSync] = useState(EMPTY_ARR);
+  const [tokensWrong, setTokensWrong] = useState(EMPTY_ARR);
+
+  useEffect(() => {
+    if (isShow) setTokensWrong(tokens);
+  }, [isShow]);
+  useEffect(() => {
+    setImmediate(() => {
+      if (savedUid === uid) {
+        if (!isShow) setTokensWrong(tokens);
+        setTokensSync(tokens);
+        return;
+      }
+      flushSync(() => {
+        setSavedUid(uid);
+        if (!isShow) setTokensWrong(tokens);
+        setTokensSync(tokens);
+      });
+    });
+  }, [tokens]);
+
+  const isShowTokens = useMemo(() => tokensSync !== tokensWrong, [tokensSync, tokensWrong]);
+  const realTokensVisible = useMemo(() => (isShowTokens ? tokensVisible : 0), [isShowTokens, tokensVisible]);
+  const realTokens = useMemo(() => (isShowTokens ? tokensSync : EMPTY_ARR), [isShowTokens, tokensSync]);
+
+  return { isShowTokens, realTokensVisible, realTokens };
+};

package/view/index.jsx

@@ -0,0 +1,62 @@
+import { useCallback, useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Screen, useIsForceHook } from "@vnejs/uis.react";
+
+import { InterfaceBackdrop, InterfaceViewDialog, InterfaceViewLine, InterfaceViewWall } from "./components";
+
+const EMPTY_ARRAY = [];
+
+const Interface = ({ store, onMount, ...props } = {}) => {
+  const [state, setState] = useState({});
+
+  const { isShow = false, isVisible = false, isForce = false, tokensVisible = 0, view = "", locs = {} } = state;
+  const { speaker, meet = 0, tokens = EMPTY_ARRAY, wall = [], postfix = "", prefix = "", uid = "" } = state;
+
+  const onClick = useCallback(() => props.emit(props.EVENTS.INTERFACE.INTERACT), []);
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  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 : props.PARAMS.INTERFACE.TRANSITION;
+  const speakerInfo = props.PARAMS.TEXT.SPEAKERS_INFO[speaker] || props.PARAMS.TEXT.SPEAKERS_INFO[props.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]);
+  const propsDialog = useMemo(() => ({ isShow: view === "adv", ...propsView, ...props }), [view, propsView]);
+  const propsLine = useMemo(() => ({ isShow: view === "line", ...propsView, ...props }), [view, propsView]);
+  const propsWall = useMemo(() => ({ isShow: view === "wall", ...propsView, ...props }), [view, propsView]);
+
+  return (
+    <Screen
+      isShow={isShow}
+      isForce={isRealForce}
+      isHidden={!isVisible}
+      isDisableAutoread={false}
+      isAllowAutoread={Boolean(isShow && isVisible)}
+      isIgnoreOnScreenshot={false}
+      transition={transition}
+      zIndex={props.PARAMS.INTERFACE.ZINDEX}
+      onClick={onClick}
+    >
+      <InterfaceBackdrop {...propsBackdrop} />
+      <InterfaceViewDialog {...propsDialog} />
+      <InterfaceViewLine {...propsLine} />
+      <InterfaceViewWall {...propsWall} />
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<Interface {...props} />);