@vnejs/plugins.media.video 0.1.0 → 0.1.1

package/const/params.js

@@ -0,0 +1,6 @@
+export const TRANSITION = 300;
+export const ZINDEX = 2000;
+
+export const VIEW_PROPS = {
+  screen: { transition: TRANSITION, zIndex: ZINDEX },
+};

package/index.js

@@ -2,8 +2,9 @@ import { regPlugin } from "@vnejs/shared";
 
 import * as constants from "./const/const";
 import { SUBSCRIBE_EVENTS } from "./const/events";
+import * as params from "./const/params";
 
 import { Video } from "./modules/video";
 import { VideoView } from "./modules/view";
 
-regPlugin("VIDEO", { constants, events: SUBSCRIBE_EVENTS }, [Video, VideoView]);
+regPlugin("VIDEO", { constants, events: SUBSCRIBE_EVENTS, params }, [Video, VideoView]);

package/modules/video.js

@@ -3,12 +3,11 @@ import { ModuleController } from "@vnejs/module.components";
 export class Video extends ModuleController {
   name = "video";
 
-  emitInteract = () => this.emit(this.EVENTS.INTERACT.EMIT);
   emitHide = () => this.emit(this.EVENTS.VIDEO.HIDE);
 
   updateEvent = this.EVENTS.VIDEO.UPDATE;
-  controls = { [this.CONST.CONTROLS.BUTTONS.ANY]: this.emitInteract };
-  controlsIndex = 2000;
+  controls = { [this.CONST.CONTROLS.BUTTONS.ANY]: () => this.emit(this.EVENTS.INTERACT.EMIT) };
+  controlsIndex = this.PARAMS.VIDEO.ZINDEX;
 
   subscribe = () => {
     this.on(this.EVENTS.VIDEO.SHOW, this.onShow);
@@ -21,12 +20,13 @@ export class Video extends ModuleController {
     this.on(this.EVENTS.STATE.CLEAR, this.onHide);
   };
 
-  init = async () => {
-    await this.emit(this.EVENTS.SCENARIO.EXEC_REG, { module: this.name, handler: this.onExecLineHandler });
-    await this.emit(this.EVENTS.SCENARIO.LINE_REG, { module: this.name, handler: this.onPreloadLineHandler });
-  };
+  init = () =>
+    Promise.all([
+      this.emit(this.EVENTS.SCENARIO.EXEC_REG, { module: this.name, handler: this.onExecLineHandler }),
+      this.emit(this.EVENTS.SCENARIO.LINE_REG, { module: this.name, handler: this.onPreloadLineHandler }),
+    ]);
 
-  beforeShow = async () => this.emit(this.EVENTS.INTERFACE.TEXT_HIDE);
+  beforeShow = () => this.emit(this.EVENTS.INTERFACE.TEXT_HIDE);
   afterHide = async () => {
     await this.emit(this.EVENTS.INTERACT.POP, { key: this.name });
     this.emit(this.EVENTS.SCENARIO.NEXT, { module: this.name });
@@ -40,13 +40,13 @@ export class Video extends ModuleController {
     await this.emit(this.EVENTS.INTERACT.PUSH, { key: this.name, handler: this.emitHide });
   };
 
-  onPreloadLineHandler = async ({ line, priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND, isConstant = false } = {}) => {
+  onPreloadLineHandler = ({ line, priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND, isConstant = false } = {}) => {
     const { name = "" } = line.match(this.CONST.VIDEO.LINE_REG).groups;
 
-    if (name) await this.emit(this.EVENTS.VIDEO.LOAD, { name, priority, isConstant });
+    return name && this.emit(this.EVENTS.VIDEO.LOAD, { name, priority, isConstant });
   };
 
-  onVideoLoad = async ({ name = "", priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND, isConstant = false } = {}) =>
+  onVideoLoad = ({ name = "", priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND, isConstant = false } = {}) =>
     this.emit(this.EVENTS.MEDIA.LOAD, this.getMediaArgs(name, priority, isConstant));
 
   onVideoGet = ({ name = "" } = {}) => this.emitOne(this.EVENTS.MEDIA.GET, this.getMediaArgs(name));
@@ -56,7 +56,7 @@ export class Video extends ModuleController {
 
     if (!video) throw Error("no video");
 
-    this.setState({ ...this.state, src: video.src });
+    this.updateState({ src: video.src });
   };
 
   getMediaArgs = (name, priority, isConstant) => {

package/modules/view.js

@@ -5,9 +5,9 @@ import { render } from "../view";
 export class VideoView extends ModuleView {
   name = "video.view";
 
-  animationTime = 300;
+  animationTime = this.PARAMS.VIDEO.TRANSITION;
   updateEvent = this.EVENTS.VIDEO.UPDATE;
 
   renderFunc = render;
-  updateHandler = this.onUpdateReactComponent;
+  updateHandler = this.onUpdateStoreComponent;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vnejs/plugins.media.video",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "main": "index.js",
   "scripts": {
     "test": "echo \"Error: no test specified\" && exit 1",

package/view/index.jsx

@@ -1,49 +1,48 @@
-import React from "react";
+import React, { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import ReactDOM from "react-dom";
 
 import { cn } from "@bem-react/classname";
 
+import { Screen } from "@vnejs/uis.base";
+
 import "./index.styl";
 
 const b = cn("VideoView");
 
-class VideoView extends React.Component {
-  state = { isShow: false, isForce: false, src: "" };
-  videoRef = React.createRef(null);
+const VideoView = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, src = "" }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const videoRef = useRef(null);
 
-  componentDidUpdate(props, state) {
-    this.videoRef.current.volume = this.props.shared.settings[this.props.SETTINGS.AUDIO.VOLUME];
+  if (videoRef.current) videoRef.current.volume = props.shared.settings[props.SETTINGS.AUDIO.VOLUME];
 
-    if (this.state.isShow !== state.isShow) setTimeout(this.onShowChanged, 300);
-  }
+  useEffect(() => {
+    const tm = setTimeout(() => {
+      if (isShow) return videoRef.current.play();
 
-  onShowChanged = () => {
-    const video = this.videoRef.current;
+      videoRef.current.pause();
+      videoRef.current.currentTime = 0;
+    }, props.PARAMS.VIDEO.TRANSITION);
 
-    if (this.state.isShow) return video.play();
+    return () => clearTimeout(tm);
+  }, [isShow]);
 
-    video.pause();
-    video.currentTime = 0;
-  };
+  const emitHide = useCallback(() => props.emit(props.EVENTS.VIDEO.HIDE), []);
 
-  emitHide = () => this.props.emit(this.props.EVENTS.VIDEO.HIDE);
+  const propsScreenCommon = useMemo(() => ({ ...props.PARAMS.VIDEO.VIEW_PROPS.screen, onClick: emitHide }), []);
+  const propsScreen = useMemo(() => ({ ...propsScreenCommon, isShow, isForce }), [isShow, isForce]);
 
-  render() {
-    const { isShow, isForce, src } = this.state;
+  const propsVideoCommon = useMemo(() => ({ pip: "false", poster: "noposter", className: b("video") }), []);
+  const propsVideo = useMemo(() => ({ ...propsVideoCommon, src, ref: videoRef, onEnded: emitHide }), [src]);
 
-    return (
-      <div className={b({ isShow, isForce })} id="Video" onClick={this.emitHide}>
-        <video
-          pip="false"
-          poster="noposter"
-          className={b("video")}
-          src={src}
-          onEnded={this.emitHide}
-          ref={this.videoRef}
-        />
-      </div>
-    );
-  }
-}
+  return (
+    <Screen {...propsScreen}>
+      <video {...propsVideo} />
+    </Screen>
+  );
+};
 
-export const render = (props, root, resolve) => ReactDOM.render(<VideoView {...props} />, root, resolve);
+export const render = (props, root) => ReactDOM.render(<VideoView {...props} />, root);

package/view/index.styl

@@ -1,14 +1,4 @@
-.VideoView
-    position: absolute
-    top: 0
-    right: 0
-    bottom: 0
-    left: 0
-    z-index: 5000
-    display: flex
-    opacity: 0
-    pointer-events: none
-    
+.VideoView    
     &-video
         width: 100%
         height: 100%
@@ -17,11 +7,4 @@
         &::-webkit-media-controls,
         &::-webkit-media-controls-start-playback-button {
             display: none !important;
-        }
-
-    &_isShow
-        pointer-events: all
-        opacity: 1
-
-    &:not(&_isForce)
-        transition: opacity 300ms
+        }