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

package/index.js

@@ -5,7 +5,4 @@ import { SUBSCRIBE_EVENTS } from "./const/events";
 import { InterfaceFastForwardController } from "./modules/controller";
 import { InterfaceFastForwardView } from "./modules/view";
 
-regPlugin("INTERFACE_FASTFORWARD", { events: SUBSCRIBE_EVENTS }, [
-  InterfaceFastForwardController,
-  InterfaceFastForwardView,
-]);
+regPlugin("INTERFACE_FASTFORWARD", { events: SUBSCRIBE_EVENTS }, [InterfaceFastForwardController, InterfaceFastForwardView]);

package/modules/controller.js

@@ -1,6 +1,8 @@
-import { Module } from "@vnejs/module";
+import { ModuleController } from "@vnejs/module.components";
 
-export class InterfaceFastForwardController extends Module.Controller {
+import { ZINDEX } from "../view";
+
+export class InterfaceFastForwardController extends ModuleController {
   name = "interface.fastforward.controller";
 
   updateEvent = this.EVENTS.INTERFACE_FASTFORWARD.UPDATE;
@@ -12,7 +14,7 @@ export class InterfaceFastForwardController extends Module.Controller {
   };
   controlsUnvisible = {};
   controlsCheckNext = true;
-  controlsIndex = 1100;
+  controlsIndex = ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.INTERFACE_FASTFORWARD.SHOW, this.onShow);
@@ -20,7 +22,9 @@ export class InterfaceFastForwardController extends Module.Controller {
     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.INTERFACE.VIEW_CHANGED, this.onViewChanged);
+    this.on(this.EVENTS.INTERFACE.STATE_CHANGED, this.onStateChanged);
+    this.on(this.EVENTS.INTERFACE.VISIBLE_CHANGED, this.onVisibleChanged);
 
     this.on(this.EVENTS.CHOOSE.SHOW, this.onChooseShow);
     this.on(this.EVENTS.CHOOSE.HIDE, this.onChooseHide);
@@ -34,31 +38,47 @@ export class InterfaceFastForwardController extends Module.Controller {
     if (isShow && isVisible) return this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE);
   };
 
-  onShowChanged = ({ force = false } = {}) => {
-    const { isShow = false, view = "" } = this.globalState.interface;
+  onShowChanged = ({ isForce = false } = {}) => {
+    const { isShow = false } = 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 });
+    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);
   };
 
-  onVisible = async ({ force = false } = {}) => {
+  onVisibleChanged = ({ isForce = false } = {}) => {
     const { isVisible = false } = this.globalState.interface;
 
-    if (this.state.isVisible === isVisible) return;
+    this.toggleUnvisibleControls(isVisible);
 
-    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);
+    if (this.state.isVisible !== isVisible) return this.updateStateAndView({ isVisible }, isForce, !isForce);
   };
 
-  onFastForward = ({ value } = {}) => this.isReady && this.updateStateAndView({ isActive: value }, false, true);
+  onStateChanged = () => {
+    const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
 
-  onChooseShow = () => this.updateStateAndView({ isChooseShow: true }, false, true);
-  onChooseHide = () => this.updateStateAndView({ isChooseShow: false }, false, true);
+    return this.updateStateAndViewForce({ isVisible, isShow, view });
+  };
+
+  onFastForward = ({ value } = {}) => this.isReady && this.updateStateAndViewFast({ isActive: value });
+
+  onChooseShow = () => this.updateStateAndViewFast({ isChooseShow: true });
+  onChooseHide = () => this.updateStateAndViewFast({ isChooseShow: false });
+
+  toggleUnvisibleControls = (isVisible) => {
+    const args = { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 };
+
+    return this.emit(isVisible ? this.EVENTS.CONTROLS.POP : this.EVENTS.CONTROLS.PUSH, args);
+  };
 
-  emitFastforwardEvent = (event) =>
-    this.globalState.interface.isVisible ? this.emit(event) : this.emit(this.EVENTS.INTERFACE.VISIBLE);
+  emitFastforwardEvent = (event) => this.emit(this.globalState.interface.isVisible ? event : this.EVENTS.INTERFACE.VISIBLE);
 
   getDefaultState = () => ({ isActive: false, isVisible: false, isShow: false, isChooseShow: false });
 }

package/modules/view.js

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

package/package.json

@@ -1,18 +1,17 @@
 {
   "name": "@vnejs/plugins.view.coralina.interface.fastforward",
-  "version": "0.0.1",
+  "version": "0.1.1",
   "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": "",
-  "peerDependencies": {
-    "@vnejs/shared": "*",
-    "@vnejs/module": "*"
-  }
+  "description": ""
 }

package/view/index.jsx

@@ -3,28 +3,48 @@ import ReactDOM from "react-dom";
 
 import { cn } from "@bem-react/classname";
 
+import { Icon, View } from "@vnejs/uis.base";
+
 import "./index.styl";
 
+import iconSrc from "./media/fastforward.png";
+
 const b = cn("InterfaceFastForward");
 
+export const TRANSITION = 500;
+export const ZINDEX = 1100;
+
 class InterfaceFastForward extends React.Component {
   state = {};
-  onClick = (e) => {
-    e.stopPropagation();
-    this.props.emit(this.props.EVENTS.INTERFACE_FASTFORWARD.CLICK);
-  };
+  onClick = () => 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 { 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} />;
+    return (
+      <View
+        className={b({ isAnimated })}
+        isShow={isShow}
+        isForce={isForce}
+        isHidden={!isVisible}
+        bottom={0}
+        right={0}
+        translateY={view === "adv" ? "calc(-1px * var(--vne-length-96))" : "calc(-1px * var(--vne-length-24))"}
+        translateX={view === "adv" ? "calc(-1px * var(--vne-length-96))" : "calc(-1px * var(--vne-length-360))"}
+        zIndex={ZINDEX}
+        transition={TRANSITION}
+        onClick={this.onClick}
+      >
+        <Icon
+          width={384}
+          height={384}
+          scale={view === "adv" ? 1 : 0.25}
+          isOpacityOnHover={true}
+          src={iconSrc}
+          transition={isForce ? 0 : TRANSITION}
+        />
+      </View>
+    );
   }
 }
 

package/view/index.styl

@@ -1,55 +1,19 @@
 @keyframes fastforward
     from
-        transform: translateY(50%) scale(1.1)
+        transform: scale(1.1)
 
     50%
-        transform: translateY(50%) scale(0.9)
+        transform: scale(0.9)
 
     to
-        transform: translateY(50%) scale(1.1)
+        transform: 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%)
-