@vnejs/plugins.view.coralina.history 0.0.1

package/const/events.js

@@ -0,0 +1,7 @@
+export const SUBSCRIBE_EVENTS = {
+  HIDE: "vne:history_view:hide",
+  SHOW: "vne:history_view:show",
+  CLICK: "vne:history_view:click",
+  UPDATE: "vne:history_view:update",
+  ACCEPT: "vne:history_view:accept",
+};

package/index.js

@@ -0,0 +1,8 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+
+import { HistoryController } from "./modules/controller";
+import { HistoryView } from "./modules/view";
+
+regPlugin("HISTORY_VIEW", { events: SUBSCRIBE_EVENTS }, [HistoryController, HistoryView]);

package/modules/controller.js

@@ -0,0 +1,46 @@
+import { Module } from "@vnejs/module";
+
+export class HistoryController extends Module.Controller {
+  name = "history.controller";
+
+  emitHide = () => this.emit(this.EVENTS.HISTORY_VIEW.HIDE);
+
+  updateEvent = this.EVENTS.HISTORY_VIEW.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_VIEW.ACCEPT),
+  };
+  controlsIndex = 3000;
+
+  subscribe = () => {
+    this.on(this.EVENTS.HISTORY_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.HISTORY_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.HISTORY_VIEW.ACCEPT, this.onAccept);
+    this.on(this.EVENTS.HISTORY_VIEW.CLICK, this.onClick);
+
+    this.on(this.EVENTS.STATE.SET, this.onStateSet);
+  };
+
+  beforeShow = async () =>
+    this.updateState({
+      historyLocs: await Promise.all(this.globalState.history.history.map(this.getHistoryLoc)),
+      history: this.globalState.history.history,
+    });
+
+  onAccept = async () => {
+    if (this.currentItem !== null)
+      await this.emit(this.EVENTS.HISTORY_VIEW.CLICK, { uid: this.globalState.history.history[this.currentItem].uid });
+  };
+
+  onClick = async ({ uid } = {}) => {
+    if (this.shared.history.storageKeys.includes(uid)) await this.emit(this.EVENTS.HISTORY.LOAD, { uid });
+  };
+
+  onStateSet = () => this.emit(this.EVENTS.HISTORY_VIEW.HIDE, { force: true });
+
+  getHistoryLoc = ({ text, label } = {}) => this.getLocTextByKey(label, text);
+}

package/modules/view.js

@@ -0,0 +1,12 @@
+import { Module } from "@vnejs/module";
+
+import { render } from "../view";
+
+export class HistoryView extends Module.View {
+  name = "history.view";
+  locLabel = "history";
+  animationTime = 300;
+  renderFunc = render;
+  updateEvent = this.EVENTS.HISTORY_VIEW.UPDATE;
+  updateHandler = this.onUpdateReactComponent;
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.history",
+  "version": "0.0.1",
+  "main": "index.js",
+  "scripts": {
+    "test": "echo \"Error: no test specified\" && exit 1",
+    "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": "",
+  "peerDependencies": {
+    "@vnejs/shared": "*",
+    "@vnejs/module": "*"
+  }
+}

package/view/index.jsx

@@ -0,0 +1,66 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("History");
+
+class History extends React.Component {
+  state = { isShow: false, history: [], storageKeys: [] };
+  linesRef = React.createRef(null);
+  componentDidUpdate(props, state) {
+    if (this.state.isShow && !state.isShow) setImmediate(this.scrollLinesToBottom);
+  }
+  onCloseClick = () => this.props.emit(this.props.EVENTS.HISTORY_VIEW.HIDE);
+  onLineClick = (e) => {
+    const { uid } = e.currentTarget.dataset;
+
+    this.props.emit(this.props.EVENTS.HISTORY_VIEW.CLICK, { uid });
+  };
+  renderHistoryLine = ({ uid, text, speaker, meet } = {}, i) => {
+    const { historyLocs = [], currentItem } = this.state;
+    const { history: { storageKeys } = {}, speakers = {}, lang = "ru" } = this.props.shared;
+    const isActive = Boolean(storageKeys.find((key) => key === uid));
+    const { names = {}, speakerColor = "white" } = speakers[speaker] || speakers.default;
+    const langNames = names[lang] || names.default;
+    const speakerName = langNames[meet] || langNames[langNames.length - 1];
+    const realText = (historyLocs && historyLocs[i]) || text;
+
+    return (
+      <div
+        className={b("line", { active: isActive, disabled: !isActive, isCurrent: currentItem === i }, ["textWrap_60"])}
+        key={uid}
+        data-uid={uid}
+        onClick={isActive ? this.onLineClick : undefined}
+      >
+        <span className={b("lineSpeaker", ["text"])} style={{ color: speakerColor }}>
+          {speakerName && <>{speakerName}: </>}
+        </span>
+        <span className={b("lineText", ["text"])}>{realText}</span>
+      </div>
+    );
+  };
+  scrollLinesToBottom = () => {
+    this.linesRef.current.scrollTop = 9999999;
+  };
+  render() {
+    const { isShow = false, isForce = false, history = [], locs = {} } = this.state;
+
+    return (
+      <div className={b({ isShow, isForce })} id="History" data-html2canvas-ignore="1">
+        <div className={b("wrap")}>
+          <div className={b("lines")} ref={this.linesRef}>
+            {history.map(this.renderHistoryLine)}
+          </div>
+          <div className={b("back", ["textWrap_60"])} onClick={this.onCloseClick}>
+            <span className="text">{locs.back}</span>
+          </div>
+        </div>
+      </div>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<History {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,77 @@
+.History
+  position: absolute
+  top: 0
+  right: 0
+  bottom: 0
+  left: 0
+  z-index: 4000
+  backdrop-filter: blur(5px) brightness(0.5)
+  background: rgba(0,0,0,0.4)
+  opacity: 0
+  pointer-events: none
+  display: flex
+  justify-content: center
+  align-items: center
+  font-family: Montserrat
+
+  &-wrap
+    position: absolute
+    top: 1.25%
+    right: 2.25%
+    bottom: 1.25%
+    left: 2.25%
+    z-index: 4001
+    box-sizing: border-box
+    display: flex
+    align-items: initial
+    justify-content: space-between
+    align-items: flex-start
+    flex-direction: column
+
+  &-linesWrap
+    position relative
+
+  &-lines
+    overflow: auto
+    display: flex
+    flex-direction: column
+    align-items: flex-start
+    height: calc(1900 / 2100 * 100%)
+
+  &-line
+    color: rgb(255, 255, 255, 1)
+    opacity: 0.6
+    border-radius: 8px
+    transition: opacity 300ms, outline 300ms
+
+    &_active
+      cursor: pointer
+
+      &:hover
+        opacity: 1
+
+    &_isCurrent
+      outline: 2px solid white
+
+    & ~ & 
+      margin-top: 1%
+
+  &-lineSpeaker
+    font-weight: 700
+
+  &-back
+    color: white
+    cursor: pointer
+    transition: opacity  300ms
+    flex-shrink: 0
+    opacity 0.6
+
+    &:hover
+      opacity: 1
+
+  &_isShow
+    opacity: 1
+    pointer-events: all
+
+  &:not(&_isForce)
+      transition: opacity 300ms