@vnejs/plugins.views.screens.history 0.1.8

package/const/events.js

@@ -0,0 +1,14 @@
+export const SUBSCRIBE_EVENTS = {
+  GET: "vne:history:get",
+  ADD: "vne:history:add",
+  LOAD: "vne:history:load",
+  BACK: "vne:history:back",
+  KEYS: "vne:history:keys",
+  CLEAR: "vne:history:clear",
+
+  HIDE: "vne:history:hide",
+  SHOW: "vne:history:show",
+  CLICK: "vne:history:click",
+  UPDATE: "vne:history:update",
+  ACCEPT: "vne:history:accept",
+};

package/const/params.js

@@ -0,0 +1,11 @@
+export const MAX_LENGTH = 50;
+
+export const ZINDEX = 2000;
+export const TRANSITION = 300;
+export const LOC_LABEL = "history";
+
+export const VIEW_PROPS = {
+  screen: { isDisableAutoread: true, withBlur: true, withDark: true, zIndex: ZINDEX, transition: TRANSITION },
+  lines: { position: { top: 120, left: 120, right: 120 }, controls: { wrapHeight: 1800, withScrollbar: true, flexGap: 36, textSize: 60, textMarginTop: 36 } },
+  close: { position: { bottom: 120, left: 120 }, text: { size: 60 } },
+};

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 { HistoryController } from "./modules/controller";
+import { History } from "./modules/history";
+import { HistoryView } from "./modules/view";
+
+regPlugin("HISTORY", { events: SUBSCRIBE_EVENTS, params }, [HistoryController, History, HistoryView]);

package/modules/controller.js

@@ -0,0 +1,49 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class HistoryController extends ModuleController {
+  name = "history.controller";
+
+  emitHide = () => this.emit(this.EVENTS.HISTORY.HIDE);
+
+  updateEvent = this.EVENTS.HISTORY.UPDATE;
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.BACK]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.MENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.GAMEMENU]: this.emitHide,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_UP]: this.decCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ARROW_BOTTOM]: this.incCurrentItem,
+    [this.CONST.CONTROLS.BUTTONS.ACCEPT]: () => this.emit(this.EVENTS.HISTORY.ACCEPT),
+  };
+  controlsIndex = this.PARAMS.HISTORY.ZINDEX;
+
+  subscribe = () => {
+    this.on(this.EVENTS.HISTORY.SHOW, this.onShow);
+    this.on(this.EVENTS.HISTORY.HIDE, this.onHide);
+    this.on(this.EVENTS.HISTORY.ACCEPT, this.onAccept);
+    this.on(this.EVENTS.HISTORY.CLICK, this.onClick);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+
+  beforeShow = async () => {
+    this.maxCurrentItem = this.globalState.history.history.length - 1;
+
+    this.updateState({
+      historyLocs: await Promise.all(this.globalState.history.history.map(this.getHistoryText)),
+      historyKeys: await this.emitOne(this.EVENTS.HISTORY.KEYS),
+      history: this.globalState.history.history,
+    });
+  };
+  afterHide = () => this.setDefaultState();
+
+  onAccept = () => this.currentItem !== null && this.emit(this.EVENTS.HISTORY.CLICK, { uid: this.globalState.history.history[this.currentItem].uid });
+  onClick = ({ uid } = {}) => this.state.historyKeys.includes(uid) && this.emit(this.EVENTS.HISTORY.LOAD, { uid });
+
+  onStateSet = () => this.emit(this.EVENTS.HISTORY.HIDE, { isForce: true });
+
+  getHistoryText = async ({ label, text, args, uid } = {}) => {
+    const state = await this.emitOne(this.EVENTS.HISTORY.GET, { uid });
+
+    return this.emitOne(this.EVENTS.TEXT.REPLACE, { label, text, args, state });
+  };
+}

package/modules/history.js

@@ -0,0 +1,66 @@
+import { Module } from "@vnejs/module";
+
+export class History extends Module {
+  name = "history";
+
+  isLoadInProcess = false;
+
+  subscribe = () => {
+    this.on(this.EVENTS.HISTORY.ADD, this.onHistoryAdd);
+    this.on(this.EVENTS.HISTORY.GET, this.onHistoryGet);
+    this.on(this.EVENTS.HISTORY.LOAD, this.onHistoryLoad);
+    this.on(this.EVENTS.HISTORY.BACK, this.onHistoryBack);
+    this.on(this.EVENTS.HISTORY.KEYS, this.onHistoryKeys);
+
+    this.on(this.EVENTS.STATE.CLEAR, this.setDefaultState);
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+
+  init = () => this.emit(this.EVENTS.MEMORY.REG, { module: this.name });
+
+  onHistoryAdd = async (historyObj = {}) => {
+    if (this.isLoadInProcess) return;
+
+    const [state, uid] = await Promise.all([this.emitOne(this.EVENTS.STATE.GET), this.emitOne(this.EVENTS.VENDORS.UID)]);
+
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "add", uid } });
+
+    await this.emit(this.EVENTS.MEMORY.SET, { module: this.name, key: uid, value: state });
+
+    this.state.history.push({ uid, ...historyObj });
+
+    if (this.state.history.length > this.PARAMS.HISTORY.MAX_LENGTH)
+      this.state.history = this.state.history.slice(this.state.history.length - this.PARAMS.HISTORY.MAX_LENGTH, this.state.history.length);
+
+    this.updateHistoryKeys();
+  };
+  onHistoryLoad = async ({ uid } = {}) => {
+    this.isLoadInProcess = true;
+
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load start", uid } });
+
+    const state = await this.emitOne(this.EVENTS.HISTORY.GET, { uid });
+
+    if (!state) return void this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load deleted", uid } });
+
+    await this.emit(this.EVENTS.STATE.LOAD, await this.emitOne(this.EVENTS.VENDORS.CLONE, state));
+
+    this.emit(this.EVENTS.SCENARIO.LABEL_GET, { label: state.scenario.label });
+
+    this.isLoadInProcess = false;
+
+    this.emit(this.EVENTS.LOGS.EMIT, { module: this.name, value: { action: "load end", uid } });
+
+    this.updateHistoryKeys();
+  };
+  onHistoryBack = () =>
+    !this.isLoadInProcess && this.state.history.length && this.emit(this.EVENTS.HISTORY.LOAD, { uid: this.state.history[this.state.history.length - 1].uid });
+  onHistoryKeys = () => this.emitOne(this.EVENTS.MEMORY.KEYS, { module: this.name });
+  onHistoryGet = ({ uid = "" } = {}) => this.emitOne(this.EVENTS.MEMORY.GET, { module: this.name, key: uid });
+
+  onStateSet = async ({ [this.name]: state } = {}) => this.setState(await this.emitOne(this.EVENTS.VENDORS.CLONE, state));
+
+  updateHistoryKeys = () => Promise.all(this.state.history.map(({ uid = "" } = {}) => this.emitOne(this.EVENTS.HISTORY.GET, { uid })));
+
+  getDefaultState = () => ({ history: [] });
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.screens.history",
+  "version": "0.1.8",
+  "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/HistoryClose.jsx

@@ -0,0 +1,15 @@
+import { useCallback, useMemo } from "react";
+
+import { PositionBox, Text } from "@vnejs/uis.react";
+
+export const HistoryClose = ({ locs = {}, ...props } = {}) => {
+  const onClick = useCallback(() => props.emit(props.EVENTS.HISTORY.HIDE), []);
+
+  const propsText = useMemo(() => ({ ...props.PARAMS.HISTORY.VIEW_PROPS.close.text, text: locs.back, onClick }), [locs]);
+
+  return (
+    <PositionBox {...props.PARAMS.HISTORY.VIEW_PROPS.close.position}>
+      <Text {...propsText} />
+    </PositionBox>
+  );
+};

package/view/components/HistoryLines.jsx

@@ -0,0 +1,53 @@
+import { useCallback, useEffect, useMemo, useRef } from "react";
+
+import { PositionBox, Text, TextControls } from "@vnejs/uis.react";
+
+const scrollToBottom = (scrollbarWrapRef) => {
+  if (!scrollbarWrapRef.current) return requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+  if (scrollbarWrapRef.current.clientHeight === scrollbarWrapRef.current.scrollHeight || scrollbarWrapRef.current.scrollTop !== 0) return;
+
+  scrollbarWrapRef.current.scrollTop = 9999999;
+  requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+};
+
+export const HistoryLines = ({ isShow = false, history = [], currentItem = null, historyLocs = [], historyKeys = [], locs = {}, ...props } = {}) => {
+  const scrollbarWrapRef = useRef(null);
+
+  const onClick = useCallback((uid) => historyKeys.includes(uid) && props.emit(props.EVENTS.HISTORY.CLICK, { uid }), [historyKeys]);
+
+  const mapTexts = useCallback(
+    ({ text, uid, speaker, meet }, i) => {
+      const speakers = props.PARAMS.TEXT.SPEAKERS_INFO;
+
+      const { speakerColor = "white" } = speakers[speaker] || speakers.default;
+      const speakerName = locs[`speaker.${speaker}.${meet}`];
+
+      return {
+        text: (historyLocs && historyLocs[i]) || text,
+        value: uid,
+        textPrefix: speakerName ? `${speakerName}: ` : undefined,
+        colorPrefix: speakerColor,
+        weightPrefix: Text.WEIGHT.BOLD,
+        isHoverable: Boolean(historyKeys.find((key) => key === uid)),
+      };
+    },
+    [historyLocs, historyKeys],
+  );
+
+  useEffect(() => {
+    if (isShow) requestAnimationFrame(() => scrollToBottom(scrollbarWrapRef));
+  }, [isShow]);
+
+  const texts = useMemo(() => history.map(mapTexts), [history, mapTexts]);
+
+  const propsView = props.PARAMS.HISTORY.VIEW_PROPS.lines;
+
+  const propsControlsCommon = useMemo(() => ({ ...propsView.controls, onClick, scrollbarWrapRef }), [scrollbarWrapRef]);
+  const propsControls = useMemo(() => ({ ...propsControlsCommon, texts, selectedIndex: currentItem }), [texts, currentItem]);
+
+  return (
+    <PositionBox {...propsView.position}>
+      <TextControls {...propsControls} />
+    </PositionBox>
+  );
+};

package/view/components/index.js

@@ -0,0 +1,2 @@
+export * from "./HistoryClose";
+export * from "./HistoryLines";

package/view/index.jsx

@@ -0,0 +1,27 @@
+import { useEffect, useMemo, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Screen } from "@vnejs/uis.react";
+
+import { HistoryClose, HistoryLines } from "./components";
+
+const History = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, locs = {}, history = [], historyLocs = [], historyKeys = [], currentItem = null }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.HISTORY.VIEW_PROPS.screen, isShow, isForce }), [isShow, isForce]);
+  const propsHistory = useMemo(() => ({ history, historyLocs, historyKeys }), [history, historyLocs, historyKeys]);
+  const propsLines = useMemo(() => ({ ...props, ...propsHistory, isShow, currentItem, locs }), [propsHistory, isShow, currentItem, locs]);
+  const propsClose = useMemo(() => ({ ...props, locs }), [locs]);
+
+  return (
+    <Screen {...propsScreen}>
+      <HistoryLines {...propsLines} />
+      <HistoryClose {...propsClose} />
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<History {...props} />);