@vnejs/plugins.views.scenario.interface.fastforward 0.1.2 → 0.1.4

package/dist/index.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/index.js

@@ -0,0 +1,5 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.scenario.interface.fastforward.contract";
+import { InterfaceFastForwardController } from "./modules/controller.js";
+import { InterfaceFastForwardView } from "./modules/view.js";
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [InterfaceFastForwardController, InterfaceFastForwardView]);

package/dist/modules/controller.d.ts

@@ -0,0 +1,29 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { InterfaceFastforwardPluginConstants, InterfaceFastforwardPluginEvents, InterfaceFastforwardPluginParams, InterfaceFastforwardPluginSettings } from "../types.js";
+import type { FastforwardChangedPayload, InterfaceFastforwardDisableAnimationPayload, InterfaceFastforwardForcePayload, InterfaceFastforwardPluginState } from "../utils/interface.fastforward.js";
+export declare class InterfaceFastForwardController extends ModuleController<InterfaceFastforwardPluginEvents, InterfaceFastforwardPluginConstants, InterfaceFastforwardPluginSettings, InterfaceFastforwardPluginParams, InterfaceFastforwardPluginState> {
+    name: string;
+    updateEvent: "vne:interface_fastforward:update";
+    controls: {
+        abstract_fastforward_toggle: () => undefined;
+        abstract_fastforward_start: () => undefined;
+        abstract_fastforward_finish: () => undefined;
+    };
+    controlsUnvisible: {};
+    controlsCheckNext: boolean;
+    controlsIndex: number;
+    subscribe: () => void;
+    beforeShow: () => Promise<void>;
+    onClick: () => false | Promise<unknown[]> | undefined;
+    onShowChanged: ({ isForce }?: InterfaceFastforwardForcePayload) => Promise<unknown[]> | undefined;
+    onViewChanged: ({ isForce }?: InterfaceFastforwardForcePayload) => Promise<unknown[]> | undefined;
+    onVisibleChanged: ({ isForce }?: InterfaceFastforwardForcePayload) => Promise<unknown[]> | undefined;
+    onStateChanged: () => Promise<unknown[]> | undefined;
+    onFastForward: ({ value }?: FastforwardChangedPayload) => false | Promise<unknown[]> | undefined;
+    onDisableAnimation: ({ isDisabled }?: InterfaceFastforwardDisableAnimationPayload) => Promise<unknown[]> | undefined;
+    onMemoryCleared: () => Promise<unknown[] | undefined>;
+    toggleUnvisibleControls: (isVisible: boolean) => Promise<unknown[]> | undefined;
+    emitFastforwardEvent: (event: string) => Promise<unknown[]> | undefined;
+    getIconSrc: () => Promise<string>;
+    getDefaultState: () => InterfaceFastforwardPluginState;
+}

package/dist/modules/controller.js

@@ -0,0 +1,64 @@
+import { ModuleController } from "@vnejs/module.components";
+export class InterfaceFastForwardController extends ModuleController {
+    name = "interface.fastforward.controller";
+    updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.UPDATE;
+    controls = {
+        [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_TOGGLE]: () => void this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE),
+        [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_START]: () => void this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.START),
+        [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_FINISH]: () => void this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.STOP),
+    };
+    controlsUnvisible = {};
+    controlsCheckNext = true;
+    controlsIndex = this.PARAMS.INTERFACE.ZINDEX + 200;
+    subscribe = () => {
+        this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW, this.onShow);
+        this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE, this.onHide);
+        this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK, this.onClick);
+        this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.DISABLE_ANIMATION, this.onDisableAnimation);
+        this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
+        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.FASTFORWARD.CHANGED, this.onFastForward);
+        this.on(this.EVENTS.SYSTEM.STARTED, this.getIconSrc);
+        this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+    };
+    beforeShow = async () => this.updateState({ iconSrc: await this.getIconSrc() });
+    onClick = () => {
+        const { isShow = false, isVisible = false } = this.globalState.interface;
+        return isShow && isVisible && this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE);
+    };
+    onShowChanged = ({ isForce = false } = {}) => {
+        const { isShow = false } = this.globalState.interface;
+        const event = isShow ? this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW : this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE;
+        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);
+    };
+    onVisibleChanged = ({ isForce = false } = {}) => {
+        const { isVisible = false } = this.globalState.interface;
+        this.toggleUnvisibleControls(isVisible);
+        if (this.state.isVisible !== isVisible)
+            return this.updateStateAndView({ isVisible }, isForce, !isForce);
+    };
+    onStateChanged = () => {
+        const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
+        this.toggleUnvisibleControls(isVisible);
+        return this.updateStateAndViewForce({ isVisible, isShow, view });
+    };
+    onFastForward = ({ value } = {}) => this.isReady && this.updateStateAndViewFast({ isActive: value });
+    onDisableAnimation = ({ isDisabled = false } = {}) => this.updateStateAndViewFast({ isAnimationDisabled: isDisabled });
+    onMemoryCleared = async () => this.updateStateAndViewFast({ iconSrc: await this.getIconSrc() });
+    toggleUnvisibleControls = (isVisible) => {
+        if (isVisible)
+            return this.emit(this.EVENTS.CONTROLS.POP, { key: `${this.name}-unvisible` });
+        return this.emit(this.EVENTS.CONTROLS.PUSH, { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 });
+    };
+    emitFastforwardEvent = (event) => this.emit(this.globalState.interface.isVisible ? event : this.EVENTS.INTERFACE.VISIBLE);
+    getIconSrc = async () => (await this.loadImageMedia("interface/fastforward", "icons", this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src;
+    getDefaultState = () => ({ isActive: false, isVisible: false, isShow: false, isAnimationDisabled: false, isForce: false });
+}

package/dist/modules/view.d.ts

@@ -0,0 +1,10 @@
+import { ModuleView } from "@vnejs/module.components";
+import type { InterfaceFastforwardPluginConstants, InterfaceFastforwardPluginEvents, InterfaceFastforwardPluginParams, InterfaceFastforwardPluginSettings } from "../types.js";
+import type { InterfaceFastforwardPluginState } from "../utils/interface.fastforward.js";
+export declare class InterfaceFastForwardView extends ModuleView<InterfaceFastforwardPluginEvents, InterfaceFastforwardPluginConstants, InterfaceFastforwardPluginSettings, InterfaceFastforwardPluginParams, InterfaceFastforwardPluginState> {
+    name: string;
+    animationTime: number;
+    updateEvent: "vne:interface_fastforward:update";
+    renderFunc: import("@vnejs/module.components").ViewRenderFunc<InterfaceFastforwardPluginState>;
+    updateHandler: (state?: InterfaceFastforwardPluginState | undefined) => Promise<void>;
+}

package/dist/modules/view.js

@@ -0,0 +1,9 @@
+import { ModuleView } from "@vnejs/module.components";
+import { render } from "../view/index.js";
+export class InterfaceFastForwardView extends ModuleView {
+    name = "interface.fastforward.view";
+    animationTime = this.PARAMS.INTERFACE.TRANSITION;
+    updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.UPDATE;
+    renderFunc = render;
+    updateHandler = this.onUpdateStoreComponent;
+}

package/dist/types.d.ts

@@ -0,0 +1,12 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName, SubscribeEvents as ControlsSubscribeEvents } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { PluginName as FastforwardPluginName, SubscribeEvents as FastforwardSubscribeEvents } from "@vnejs/plugins.scenario.fastforward.contract";
+import type { Params as InterfaceParams, PluginName as InterfacePluginName, SubscribeEvents as InterfaceSubscribeEvents } from "@vnejs/plugins.views.scenario.interface.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.scenario.interface.fastforward.contract";
+export type InterfaceFastforwardPluginEvents = ModuleComponentsEvents & Record<PluginName, SubscribeEvents> & Record<InterfacePluginName, InterfaceSubscribeEvents> & Record<FastforwardPluginName, FastforwardSubscribeEvents> & Record<ControlsPluginName, ControlsSubscribeEvents> & Record<SystemPluginName, Pick<SystemSubscribeEvents, "STARTED">> & Record<MemoryPluginName, MemorySubscribeEvents>;
+export type InterfaceFastforwardPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+export type InterfaceFastforwardPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+export type InterfaceFastforwardPluginParams = ModuleComponentsParams & Record<PluginName, Params> & Record<InterfacePluginName, InterfaceParams>;

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/dist/utils/interface.fastforward.d.ts

@@ -0,0 +1,17 @@
+import type { FastforwardChangedPayload } from "@vnejs/plugins.scenario.fastforward.contract";
+export type InterfaceFastforwardPluginState = {
+    isActive: boolean;
+    isVisible: boolean;
+    isShow: boolean;
+    isAnimationDisabled: boolean;
+    isForce: boolean;
+    view?: string;
+    iconSrc?: string;
+};
+export type InterfaceFastforwardForcePayload = {
+    isForce?: boolean;
+};
+export type InterfaceFastforwardDisableAnimationPayload = {
+    isDisabled?: boolean;
+};
+export type { FastforwardChangedPayload };

package/dist/utils/interface.fastforward.js

@@ -0,0 +1 @@
+export {};

package/dist/view/index.d.ts

@@ -0,0 +1,3 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { InterfaceFastforwardPluginState } from "../utils/interface.fastforward.js";
+export declare const render: ViewRenderFunc<InterfaceFastforwardPluginState>;

package/dist/view/index.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { Icon, View, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+import { b } from "./index.styles.js";
+const InterfaceFastForward = ({ store, onMount, emit, EVENTS, PARAMS }) => {
+    const { isShow = false, isVisible = false, isForce = false, isActive = false, isAnimationDisabled = false, view = "", iconSrc = "", } = useStoreState(store, onMount);
+    const onClick = useCallback(() => emit(EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK), [emit, EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK]);
+    const isRealForce = useIsForceHook(isForce);
+    const transition = isRealForce ? 0 : PARAMS.INTERFACE.TRANSITION;
+    const propsByView = useMemo(() => PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS[view], [view, PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS]);
+    const propsIcon = useMemo(() => ({ ...propsByView?.icon, src: iconSrc, transition }), [propsByView, iconSrc, transition]);
+    const propsView = useMemo(() => ({ ...propsByView?.view, isShow, isForce: isRealForce, transition, onClick }), [propsByView, isShow, isRealForce, transition, onClick]);
+    return (_jsx(View, { ...propsView, className: b({ isAnimated: isActive && !isAnimationDisabled }), isHidden: !isVisible, zIndex: PARAMS.INTERFACE.ZINDEX + 200, children: _jsx(Icon, { ...propsIcon }) }));
+};
+export const render = createRenderFunc(InterfaceFastForward);

package/dist/view/index.styles.d.ts

@@ -0,0 +1 @@
+export declare const b: import("@bem-react/classname").ClassNameFormatter;

package/dist/view/index.styles.js

@@ -0,0 +1,25 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+export const b = cn("InterfaceFastForward");
+const CSS = `
+@keyframes fastforward {
+  from {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  to {
+    transform: scale(1.1);
+  }
+}
+
+${sel(b({ isAnimated: true }))} {
+  animation-duration: 500ms;
+  animation-name: fastforward;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+`;
+injectStyles(CSS);

package/package.json

@@ -1,17 +1,52 @@
 {
   "name": "@vnejs/plugins.views.scenario.interface.fastforward",
-  "version": "0.1.2",
-  "main": "index.js",
+  "version": "0.1.4",
+  "description": "",
+  "main": "dist/index.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.js",
+      "default": "./dist/index.js"
+    }
+  },
+  "files": [
+    "dist",
+    "src",
+    "tsconfig.json"
+  ],
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",
+    "build": "npx @vnejs/monorepo package",
     "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"
+    "publish:major": "npx @vnejs/monorepo publish major --access public",
+    "publish:minor": "npx @vnejs/monorepo publish minor --access public",
+    "publish:patch": "npx @vnejs/monorepo publish patch --access public"
   },
   "author": "",
   "license": "ISC",
-  "description": ""
+  "dependencies": {
+    "@vnejs/plugins.views.scenario.interface.fastforward.contract": "~0.0.1",
+    "@vnejs/plugins.views.scenario.interface.contract": "~0.0.1"
+  },
+  "peerDependencies": {
+    "@vnejs/helpers": "~0.1.0",
+    "@vnejs/module": "~0.0.1",
+    "@vnejs/module.components": "~0.0.1",
+    "@vnejs/plugins.canvas.layer.contract": "~0.0.1",
+    "@vnejs/plugins.controls.contract": "~0.0.1",
+    "@vnejs/plugins.core.memory.contract": "~0.0.1",
+    "@vnejs/plugins.core.system.contract": "~0.0.1",
+    "@vnejs/plugins.scenario.fastforward.contract": "~0.0.1",
+    "@vnejs/shared": "~0.0.9",
+    "@vnejs/uis.react": "~0.1.0",
+    "@vnejs/uis.utils": "~0.1.0"
+  },
+  "devDependencies": {
+    "@vnejs/configs.ts-common": "~0.0.1"
+  }
 }

package/src/index.ts

@@ -0,0 +1,7 @@
+import { regPlugin } from "@vnejs/shared";
+import { PARAMS, PLUGIN_NAME, SUBSCRIBE_EVENTS } from "@vnejs/plugins.views.scenario.interface.fastforward.contract";
+
+import { InterfaceFastForwardController } from "./modules/controller.js";
+import { InterfaceFastForwardView } from "./modules/view.js";
+
+regPlugin(PLUGIN_NAME, { events: SUBSCRIBE_EVENTS, params: PARAMS }, [InterfaceFastForwardController, InterfaceFastForwardView]);

package/src/modules/controller.ts

@@ -0,0 +1,110 @@
+import { ModuleController } from "@vnejs/module.components";
+import type { ControlsPopPayload, ControlsPushPayload } from "@vnejs/plugins.controls.contract";
+
+import type {
+  InterfaceFastforwardPluginConstants,
+  InterfaceFastforwardPluginEvents,
+  InterfaceFastforwardPluginParams,
+  InterfaceFastforwardPluginSettings,
+} from "../types.js";
+import type {
+  FastforwardChangedPayload,
+  InterfaceFastforwardDisableAnimationPayload,
+  InterfaceFastforwardForcePayload,
+  InterfaceFastforwardPluginState,
+} from "../utils/interface.fastforward.js";
+
+export class InterfaceFastForwardController extends ModuleController<
+  InterfaceFastforwardPluginEvents,
+  InterfaceFastforwardPluginConstants,
+  InterfaceFastforwardPluginSettings,
+  InterfaceFastforwardPluginParams,
+  InterfaceFastforwardPluginState
+> {
+  name = "interface.fastforward.controller";
+
+  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.UPDATE;
+
+  controls = {
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_TOGGLE]: () => void this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE),
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_START]: () => void this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.START),
+    [this.CONST.CONTROLS.BUTTONS.FASTFORWARD_FINISH]: () => void this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.STOP),
+  };
+  controlsUnvisible = {};
+  controlsCheckNext = true;
+  controlsIndex = this.PARAMS.INTERFACE.ZINDEX + 200;
+
+  subscribe = () => {
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW, this.onShow);
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE, this.onHide);
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK, this.onClick);
+    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.DISABLE_ANIMATION, this.onDisableAnimation);
+
+    this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
+    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.FASTFORWARD.CHANGED, this.onFastForward);
+
+    this.on(this.EVENTS.SYSTEM.STARTED, this.getIconSrc);
+    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
+  };
+
+  beforeShow = async () => this.updateState({ iconSrc: await this.getIconSrc() });
+
+  onClick = () => {
+    const { isShow = false, isVisible = false } = this.globalState.interface;
+
+    return isShow && isVisible && this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE);
+  };
+
+  onShowChanged = ({ isForce = false }: InterfaceFastforwardForcePayload = {}) => {
+    const { isShow = false } = this.globalState.interface;
+    const event = isShow ? this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW : this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE;
+
+    if (this.state.isShow !== isShow) return this.emit(event, { isForce });
+  };
+
+  onViewChanged = ({ isForce = false }: InterfaceFastforwardForcePayload = {}) => {
+    const { view = "" } = this.globalState.interface;
+
+    if (this.state.view !== view) return this.updateStateAndView({ view }, isForce, !isForce);
+  };
+
+  onVisibleChanged = ({ isForce = false }: InterfaceFastforwardForcePayload = {}) => {
+    const { isVisible = false } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
+
+    if (this.state.isVisible !== isVisible) return this.updateStateAndView({ isVisible }, isForce, !isForce);
+  };
+
+  onStateChanged = () => {
+    const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
+
+    this.toggleUnvisibleControls(isVisible);
+
+    return this.updateStateAndViewForce({ isVisible, isShow, view });
+  };
+
+  onFastForward = ({ value }: FastforwardChangedPayload = {}) => this.isReady && this.updateStateAndViewFast({ isActive: value });
+
+  onDisableAnimation = ({ isDisabled = false }: InterfaceFastforwardDisableAnimationPayload = {}) =>
+    this.updateStateAndViewFast({ isAnimationDisabled: isDisabled });
+
+  onMemoryCleared = async () => this.updateStateAndViewFast({ iconSrc: await this.getIconSrc() });
+
+  toggleUnvisibleControls = (isVisible: boolean) => {
+    if (isVisible) return this.emit(this.EVENTS.CONTROLS.POP, { key: `${this.name}-unvisible` });
+
+    return this.emit(this.EVENTS.CONTROLS.PUSH, { key: `${this.name}-unvisible`, controls: this.controlsUnvisible, index: this.controlsIndex + 500 });
+  };
+
+  emitFastforwardEvent = (event: string) => this.emit(this.globalState.interface.isVisible ? event : this.EVENTS.INTERFACE.VISIBLE);
+
+  getIconSrc = async () =>
+    (await this.loadImageMedia("interface/fastforward", "icons", this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src;
+
+  getDefaultState = (): InterfaceFastforwardPluginState => ({ isActive: false, isVisible: false, isShow: false, isAnimationDisabled: false, isForce: false });
+}

package/src/modules/view.ts

@@ -0,0 +1,21 @@
+import { ModuleView } from "@vnejs/module.components";
+
+import { render } from "../view/index.js";
+import type { InterfaceFastforwardPluginConstants, InterfaceFastforwardPluginEvents, InterfaceFastforwardPluginParams, InterfaceFastforwardPluginSettings } from "../types.js";
+import type { InterfaceFastforwardPluginState } from "../utils/interface.fastforward.js";
+
+export class InterfaceFastForwardView extends ModuleView<
+  InterfaceFastforwardPluginEvents,
+  InterfaceFastforwardPluginConstants,
+  InterfaceFastforwardPluginSettings,
+  InterfaceFastforwardPluginParams,
+  InterfaceFastforwardPluginState
+> {
+  name = "interface.fastforward.view";
+
+  animationTime = this.PARAMS.INTERFACE.TRANSITION;
+  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.UPDATE;
+
+  renderFunc = render;
+  updateHandler = this.onUpdateStoreComponent;
+}

package/src/types.ts

@@ -0,0 +1,24 @@
+import type { ModuleComponentsConstants, ModuleComponentsEvents, ModuleComponentsParams, ModuleComponentsSettings } from "@vnejs/module.components";
+import type { SettingsKeys as LayerSettingsKeys, PluginName as LayerPluginName } from "@vnejs/plugins.canvas.layer.contract";
+import type { Constants as ControlsConstants, PluginName as ControlsPluginName, SubscribeEvents as ControlsSubscribeEvents } from "@vnejs/plugins.controls.contract";
+import type { PluginName as MemoryPluginName, SubscribeEvents as MemorySubscribeEvents } from "@vnejs/plugins.core.memory.contract";
+import type { PluginName as SystemPluginName, SubscribeEvents as SystemSubscribeEvents } from "@vnejs/plugins.core.system.contract";
+import type { PluginName as FastforwardPluginName, SubscribeEvents as FastforwardSubscribeEvents } from "@vnejs/plugins.scenario.fastforward.contract";
+import type { Params as InterfaceParams, PluginName as InterfacePluginName, SubscribeEvents as InterfaceSubscribeEvents } from "@vnejs/plugins.views.scenario.interface.contract";
+import type { Params, PluginName, SubscribeEvents } from "@vnejs/plugins.views.scenario.interface.fastforward.contract";
+
+export type InterfaceFastforwardPluginEvents = ModuleComponentsEvents &
+  Record<PluginName, SubscribeEvents> &
+  Record<InterfacePluginName, InterfaceSubscribeEvents> &
+  Record<FastforwardPluginName, FastforwardSubscribeEvents> &
+  Record<ControlsPluginName, ControlsSubscribeEvents> &
+  Record<SystemPluginName, Pick<SystemSubscribeEvents, "STARTED">> &
+  Record<MemoryPluginName, MemorySubscribeEvents>;
+
+export type InterfaceFastforwardPluginConstants = ModuleComponentsConstants & Record<ControlsPluginName, ControlsConstants>;
+
+export type InterfaceFastforwardPluginSettings = ModuleComponentsSettings & Record<LayerPluginName, LayerSettingsKeys>;
+
+export type InterfaceFastforwardPluginParams = ModuleComponentsParams &
+  Record<PluginName, Params> &
+  Record<InterfacePluginName, InterfaceParams>;

package/src/utils/interface.fastforward.ts

@@ -0,0 +1,21 @@
+import type { FastforwardChangedPayload } from "@vnejs/plugins.scenario.fastforward.contract";
+
+export type InterfaceFastforwardPluginState = {
+  isActive: boolean;
+  isVisible: boolean;
+  isShow: boolean;
+  isAnimationDisabled: boolean;
+  isForce: boolean;
+  view?: string;
+  iconSrc?: string;
+};
+
+export type InterfaceFastforwardForcePayload = {
+  isForce?: boolean;
+};
+
+export type InterfaceFastforwardDisableAnimationPayload = {
+  isDisabled?: boolean;
+};
+
+export type { FastforwardChangedPayload };

package/src/view/index.styles.ts

@@ -0,0 +1,28 @@
+import { cn, injectStyles, sel } from "@vnejs/uis.utils";
+
+export const b = cn("InterfaceFastForward");
+
+const CSS = `
+@keyframes fastforward {
+  from {
+    transform: scale(1.1);
+  }
+
+  50% {
+    transform: scale(0.9);
+  }
+
+  to {
+    transform: scale(1.1);
+  }
+}
+
+${sel(b({ isAnimated: true }))} {
+  animation-duration: 500ms;
+  animation-name: fastforward;
+  animation-iteration-count: infinite;
+  animation-timing-function: ease-in-out;
+}
+`;
+
+injectStyles(CSS);

package/src/view/index.tsx

@@ -0,0 +1,56 @@
+import type { ViewRenderFunc } from "@vnejs/module.components";
+import type { ReactComponentProps } from "@vnejs/uis.react";
+import { Icon, View, createRenderFunc, useCallback, useIsForceHook, useMemo, useStoreState } from "@vnejs/uis.react";
+
+import type { InterfaceFastforwardPluginConstants, InterfaceFastforwardPluginEvents, InterfaceFastforwardPluginParams, InterfaceFastforwardPluginSettings } from "../types.js";
+import type { InterfaceFastforwardPluginState } from "../utils/interface.fastforward.js";
+import { b } from "./index.styles.js";
+
+type InterfaceFastforwardComponentProps = ReactComponentProps<
+  InterfaceFastforwardPluginEvents,
+  InterfaceFastforwardPluginConstants,
+  InterfaceFastforwardPluginSettings,
+  InterfaceFastforwardPluginParams,
+  InterfaceFastforwardPluginState
+>;
+
+const InterfaceFastForward = ({ store, onMount, emit, EVENTS, PARAMS }: InterfaceFastforwardComponentProps) => {
+  const {
+    isShow = false,
+    isVisible = false,
+    isForce = false,
+    isActive = false,
+    isAnimationDisabled = false,
+    view = "",
+    iconSrc = "",
+  } = useStoreState<InterfaceFastforwardPluginState>(store, onMount);
+
+  const onClick = useCallback(() => emit(EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK), [emit, EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK]);
+
+  const isRealForce = useIsForceHook(isForce);
+
+  const transition = isRealForce ? 0 : PARAMS.INTERFACE.TRANSITION;
+
+  const propsByView = useMemo(
+    () => PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS[view as keyof typeof PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS],
+    [view, PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS],
+  );
+  const propsIcon = useMemo(() => ({ ...propsByView?.icon, src: iconSrc, transition }), [propsByView, iconSrc, transition]);
+  const propsView = useMemo(
+    () => ({ ...propsByView?.view, isShow, isForce: isRealForce, transition, onClick }),
+    [propsByView, isShow, isRealForce, transition, onClick],
+  );
+
+  return (
+    <View
+      {...propsView}
+      className={b({ isAnimated: isActive && !isAnimationDisabled })}
+      isHidden={!isVisible}
+      zIndex={PARAMS.INTERFACE.ZINDEX + 200}
+    >
+      <Icon {...propsIcon} />
+    </View>
+  );
+};
+
+export const render: ViewRenderFunc<InterfaceFastforwardPluginState> = createRenderFunc(InterfaceFastForward);

package/tsconfig.json

@@ -0,0 +1,10 @@
+{
+  "extends": "@vnejs/configs.ts-common/tsconfig.json",
+  "compilerOptions": {
+    "rootDir": "src",
+    "outDir": "dist",
+    "jsx": "react-jsx"
+  },
+  "include": ["src/**/*.ts", "src/**/*.tsx"],
+  "exclude": ["dist", "node_modules"]
+}

package/const/events.js

@@ -1,6 +0,0 @@
-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/const/params.js

@@ -1,17 +0,0 @@
-import { getVneLength } from "@vnejs/uis.utils";
-
-const createView = (x, y, tX, tY) => ({
-  bottom: 0,
-  right: 0,
-  translateX: getVneLength(-x),
-  translateY: getVneLength(-y),
-  transformOriginX: tX,
-  transformOriginY: tY,
-});
-const createIcon = (scale) => ({ width: 384, height: 384, isOpacityOnHover: true, scale, transformOriginX: "100%", transformOriginY: "100%" });
-
-export const VIEW_PROPS = {
-  adv: { view: createView(96, 96, "50%", "50%"), icon: createIcon(1) },
-  line: { view: createView(360, 24, "87.5%", "87.5%"), icon: createIcon(0.25) },
-  wall: { view: createView(144, 144, "87.5%", "87.5%"), icon: createIcon(0.25) },
-};

package/index.js

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

package/modules/controller.js

@@ -1,91 +0,0 @@
-import { ModuleController } from "@vnejs/module.components";
-
-export class InterfaceFastForwardController extends ModuleController {
-  name = "interface.fastforward.controller";
-
-  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.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 = this.PARAMS.INTERFACE.ZINDEX + 200;
-
-  subscribe = () => {
-    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW, this.onShow);
-    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE, this.onHide);
-    this.on(this.EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK, this.onClick);
-
-    this.on(this.EVENTS.INTERFACE.SHOW_CHANGED, this.onShowChanged);
-    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);
-
-    this.on(this.EVENTS.FASTFORWARD.CHANGED, this.onFastForward);
-
-    this.on(this.EVENTS.SYSTEM.STARTED, this.getIconSrc);
-    this.on(this.EVENTS.MEMORY.CLEARED, this.onMemoryCleared);
-  };
-
-  beforeShow = async () => this.updateState({ iconSrc: await this.getIconSrc() });
-
-  onClick = () => {
-    const { isShow = false, isVisible = false } = this.globalState.interface;
-
-    return isShow && isVisible && this.emitFastforwardEvent(this.EVENTS.FASTFORWARD.TOGGLE);
-  };
-
-  onShowChanged = ({ isForce = false } = {}) => {
-    const { isShow = false } = this.globalState.interface;
-    const event = isShow ? this.EVENTS.INTERFACE_FASTFORWARD_VIEW.SHOW : this.EVENTS.INTERFACE_FASTFORWARD_VIEW.HIDE;
-
-    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);
-  };
-
-  onVisibleChanged = ({ isForce = false } = {}) => {
-    const { isVisible = false } = this.globalState.interface;
-
-    this.toggleUnvisibleControls(isVisible);
-
-    if (this.state.isVisible !== isVisible) return this.updateStateAndView({ isVisible }, isForce, !isForce);
-  };
-
-  onStateChanged = () => {
-    const { isShow = false, isVisible = false, view = "" } = this.globalState.interface;
-
-    this.toggleUnvisibleControls(isVisible);
-
-    return this.updateStateAndViewForce({ isVisible, isShow, view });
-  };
-
-  onFastForward = ({ value } = {}) => this.isReady && this.updateStateAndViewFast({ isActive: value });
-
-  onChooseShow = () => this.updateStateAndViewFast({ isChooseShow: true });
-  onChooseHide = () => this.updateStateAndViewFast({ isChooseShow: false });
-
-  onMemoryCleared = async () => this.updateStateAndViewFast({ iconSrc: await this.getIconSrc() });
-
-  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.emit(this.globalState.interface.isVisible ? event : this.EVENTS.INTERFACE.VISIBLE);
-
-  getIconSrc = async () => (await this.loadImageMedia(`interface/fastforward`, "icons", this.shared.settings[this.SETTINGS.LAYER.QUALITY])).src;
-
-  getDefaultState = () => ({ isActive: false, isVisible: false, isShow: false, isChooseShow: false });
-}

package/modules/view.js

@@ -1,13 +0,0 @@
-import { ModuleView } from "@vnejs/module.components";
-
-import { render } from "../view";
-
-export class InterfaceFastForwardView extends ModuleView {
-  name = "interface.fastforward.view";
-
-  animationTime = this.PARAMS.INTERFACE.TRANSITION;
-  updateEvent = this.EVENTS.INTERFACE_FASTFORWARD_VIEW.UPDATE;
-
-  renderFunc = render;
-  updateHandler = this.onUpdateStoreComponent;
-}

package/view/index.jsx

@@ -1,42 +0,0 @@
-import { useCallback, useEffect, useMemo, useState } from "react";
-import { createRoot } from "react-dom/client";
-
-import { cn } from "@bem-react/classname";
-
-import { Icon, useIsForceHook, View } from "@vnejs/uis.react";
-
-import "./index.styl";
-
-const b = cn("InterfaceFastForward");
-
-const InterfaceFastForward = ({ store, onMount, ...props } = {}) => {
-  const [state, setState] = useState({});
-
-  const { isShow = false, isVisible = false, isForce = false, isActive = false, isChooseShow = false, view = "", iconSrc = "" } = state;
-
-  useEffect(() => store.subscribe(setState), []);
-  useEffect(() => void onMount(), []);
-
-  const onClick = useCallback(() => props.emit(props.EVENTS.INTERFACE_FASTFORWARD_VIEW.CLICK));
-
-  const isRealForce = useIsForceHook(isForce);
-
-  const transition = isRealForce ? 0 : props.PARAMS.INTERFACE.TRANSITION;
-
-  const propsByView = useMemo(() => props.PARAMS.INTERFACE_FASTFORWARD_VIEW.VIEW_PROPS[view], [view]);
-  const propsIcon = useMemo(() => ({ ...propsByView?.icon, src: iconSrc, transition }), [view, iconSrc, transition]);
-  const propsView = useMemo(() => ({ ...propsByView?.view, isShow, isForce: isRealForce, transition, onClick }), [view, isShow, isRealForce, transition]);
-
-  return (
-    <View
-      {...propsView}
-      className={b({ isAnimated: isActive && !isChooseShow })}
-      isHidden={!isVisible}
-      zIndex={props.PARAMS.INTERFACE.ZINDEX + 200}
-    >
-      <Icon {...propsIcon} />
-    </View>
-  );
-};
-
-export const render = (props, root) => createRoot(root).render(<InterfaceFastForward {...props} />);

package/view/index.styl

@@ -1,19 +0,0 @@
-@keyframes fastforward
-    from
-        transform: scale(1.1)
-
-    50%
-        transform: scale(0.9)
-
-    to
-        transform: scale(1.1)
-
-.InterfaceFastForward
-    &_isAnimated
-        animation-duration: 500ms
-        animation-name: fastforward
-        animation-iteration-count: infinite
-        animation-timing-function: ease-in-out
-
-
-