@vnejs/plugins.view.coralina.interface.fastforward 0.0.1

package/const/events.js

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

package/index.js

@@ -0,0 +1,11 @@
+import { regPlugin } from "@vnejs/shared";
+
+import { SUBSCRIBE_EVENTS } from "./const/events";
+
+import { InterfaceFastForwardController } from "./modules/controller";
+import { InterfaceFastForwardView } from "./modules/view";
+
+regPlugin("INTERFACE_FASTFORWARD", { events: SUBSCRIBE_EVENTS }, [
+  InterfaceFastForwardController,
+  InterfaceFastForwardView,
+]);

package/modules/controller.js

@@ -0,0 +1,64 @@
+import { Module } from "@vnejs/module";
+
+export class InterfaceFastForwardController extends Module.Controller {
+  name = "interface.fastforward.controller";
+
+  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD.UPDATE;
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_TOGGLE]: () => this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE),
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_START]: () => this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.START),
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_FINISH]: () => this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.STOP),
+  };
+  controlsUnvisible = {};
+  controlsCheckNext = true;
+  controlsIndex = 1100;
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD.SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD.HIDE, this.onHide);
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD.CLICK, this.onClick);
+
+    this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
+    this.on(this.EVENTS.INTERFACE.VISIBLE_CHANGED, this.onVisible);
+
+    this.on(this.EVENTS.CHOOSE.SHOW, this.onChooseShow);
+    this.on(this.EVENTS.CHOOSE.HIDE, this.onChooseHide);
+
+    this.on(this.EVENTS.FASTFORWARD.CHANGED, this.onFastForward);
+  };
+
+  onClick = () => {
+    const { isShow = false, isVisible = false } = this.globalState.interface;
+
+    if (isShow && isVisible) return this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE);
+  };
+
+  onShowChanged = ({ force = false } = {}) => {
+    const { isShow = false, view = "" } = this.globalState.interface;
+    const event = isShow ? this.EVENTS.INTERFACE_FASTFORWARD.SHOW : this.EVENTS.INTERFACE_FASTFORWARD.HIDE;
+
+    this.updateStateAndView({ view }, force, !force);
+    if (this.state.isShow !== isShow) return this.emit(event, { force });
+  };
+
+  onVisible = async ({ force = 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 }, force, !force);
+  };
+
+  onFastForward = ({ value } = {}) => this.isReady && this.updateStateAndView({ isActive: value }, false, true);
+
+  onChooseShow = () => this.updateStateAndView({ isChooseShow: true }, false, true);
+  onChooseHide = () => this.updateStateAndView({ isChooseShow: false }, false, true);
+
+  emitFastforwardEvent = (event) =>
+    this.globalState.interface.isVisible ? this.emit(event) : this.emit(this.EVENTS.INTERFACE.VISIBLE);
+
+  getDefaultState = () => ({ isActive: false, isVisible: false, isShow: false, isChooseShow: false });
+}

package/modules/view.js

@@ -0,0 +1,11 @@
+import { Module } from "@vnejs/module";
+
+import { render } from "../view";
+
+export class InterfaceFastForwardView extends Module.View {
+  name = "interface.fastforward.view";
+  animationTime = 500;
+  renderFunc = render;
+  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD.UPDATE;
+  updateHandler = this.onUpdateReactComponent;
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.view.coralina.interface.fastforward",
+  "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,31 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("InterfaceFastForward");
+
+class InterfaceFastForward extends React.Component {
+  state = {};
+  onClick = (e) => {
+    e.stopPropagation();
+    this.props.emit(this.props.EVENTS.INTERFACE_FASTFORWARD.CLICK);
+  };
+  render() {
+    const {
+      isShow = false,
+      isVisible = false,
+      isForce = false,
+      isActive = false,
+      isChooseShow = false,
+      view = "",
+    } = this.state;
+    const isAnimated = isActive && !isChooseShow;
+
+    return <div className={b({ isShow, isForce, isVisible, isAnimated, view })} onClick={this.onClick} />;
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<InterfaceFastForward {...props} />, root, resolve);

package/view/index.styl

@@ -0,0 +1,55 @@
+@keyframes fastforward
+    from
+        transform: translateY(50%) scale(1.1)
+
+    50%
+        transform: translateY(50%) scale(0.9)
+
+    to
+        transform: translateY(50%) scale(1.1)
+
+.InterfaceFastForward
+    position: absolute
+    transform: translateY(50%) scale(1)
+    aspect-ratio: 1/1
+    background-position: center
+    background-repeat: no-repeat
+    background-size: contain
+    background-image: url("./media/fastforward.png")
+    cursor: pointer
+    opacity: 0
+    pointer-events: none
+    z-index: 1200
+    
+    &:not(&_isForce)
+        transition: opacity 500ms, right 500ms, width 500ms, bottom 500ms, transform 500ms
+
+    &_isAnimated
+        animation-duration: 500ms
+        animation-name: fastforward
+        animation-iteration-count: infinite
+        animation-timing-function: ease-in-out
+
+    &:hover
+        opacity 1
+        transform: translateY(50%) scale(0.95)
+
+    &:not(&_isVisible)
+        opacity: 0
+
+    &_isShow
+        pointer-events: all
+        opacity: 0.7
+
+    &_view
+        &_line
+            right: 15%
+            width: calc(100 / 3840 * 100%)
+            bottom: 3.25%
+        &_adv
+            right: 2.5%
+            width: calc(375 / 3840 * 100%)
+            bottom: calc(300 / 2160 * 100%)
+
+
+