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

package/view/components/InterfaceViewLine.jsx

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

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

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

package/view/index.jsx

@@ -1,65 +0,0 @@
-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];
-
-  console.log(99999999, speaker, speakerInfo, props.PARAMS.TEXT.DEFAULT_SPEAKER_NAME, props.PARAMS.TEXT.SPEAKERS_INFO);
-
-  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} />);