@vnejs/plugins.media.video 0.0.1

package/const/const.js

@@ -0,0 +1 @@
+export const LINE_REG = /^{(?<name>.*)}( (?<animation>.*) (?<duration>\d+))?$/;

package/const/events.js

@@ -0,0 +1,8 @@
+export const SUBSCRIBE_EVENTS = {
+  SET: "vne:video:set",
+  GET: "vne:video:get",
+  LOAD: "vne:video:load",
+  SHOW: "vne:video:show",
+  HIDE: "vne:video:hide",
+  UPDATE: "vne:video:update",
+};

package/index.js

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

package/modules/video.js

@@ -0,0 +1,71 @@
+import { Module } from "@vnejs/module";
+
+export class Video extends Module.Controller {
+  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;
+
+  subscribe = () => {
+    this.on(this.EVENTS.VIDEO.SHOW, this.onShow);
+    this.on(this.EVENTS.VIDEO.HIDE, this.onHide);
+    this.on(this.EVENTS.VIDEO.LOAD, this.onVideoLoad);
+    this.on(this.EVENTS.VIDEO.GET, this.onVideoGet);
+    this.on(this.EVENTS.VIDEO.SET, this.onVideoSet);
+
+    this.on(this.EVENTS.STATE.SET, this.onUpdateStateFromGlobalState);
+    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 });
+  };
+
+  beforeShow = async () => this.emit(this.EVENTS.INTERFACE.TEXT_HIDE);
+  afterHide = async () => {
+    await this.emit(this.EVENTS.INTERACT.POP, { key: this.name });
+    this.emitNext();
+  };
+
+  onExecLineHandler = async (line = "") => {
+    const { name } = line.match(this.CONST.VIDEO.LINE_REG).groups;
+
+    await this.emit(this.EVENTS.VIDEO.SET, { name });
+    await this.emit(this.EVENTS.VIDEO.SHOW);
+    await this.emit(this.EVENTS.INTERACT.PUSH, { key: this.name, handler: this.emitHide });
+  };
+
+  onPreloadLineHandler = async ({
+    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 });
+  };
+
+  onVideoLoad = async ({ 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));
+
+  onVideoSet = async ({ name = "" } = {}) => {
+    const video = await this.emitOne(this.EVENTS.VIDEO.GET, { name });
+
+    if (!video) throw Error("no video");
+
+    this.setState({ ...this.state, src: video.src });
+  };
+
+  getMediaArgs = (name, priority, isConstant) => {
+    const [type, quality] = [this.CONST.MEDIA.TYPES.VIDEO, this.shared.settings[this.SETTINGS.CANVAS.QUALITY]];
+
+    return { mediaType: this.name, type, name, quality, priority, isConstant };
+  };
+}

package/modules/view.js

@@ -0,0 +1,11 @@
+import { Module } from "@vnejs/module";
+
+import { render } from "../view";
+
+export class VideoView extends Module.View {
+  name = "video.view";
+  animationTime = 300;
+  renderFunc = render;
+  updateEvent = this.EVENTS.VIDEO.UPDATE;
+  updateHandler = this.onUpdateReactComponent;
+}

package/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@vnejs/plugins.media.video",
+  "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,48 @@
+import React from "react";
+import ReactDOM from "react-dom";
+
+import { cn } from "@bem-react/classname";
+
+import "./index.styl";
+
+const b = cn("VideoView");
+
+class VideoView extends React.Component {
+  state = { isShow: false, isForce: false, src: "" };
+  videoRef = React.createRef(null);
+
+  componentDidUpdate(props, state) {
+    const {
+      videoRef: { current: video } = {},
+      state: { isShow = false } = {},
+      props: { shared = {}, SETTINGS = {} } = {},
+    } = this;
+
+    video.volume = shared.settings[SETTINGS.AUDIO.VOLUME];
+
+    if (isShow !== state.isShow) {
+      setTimeout(() => (isShow ? video.play() : video.pause()), 300);
+    }
+  }
+
+  emitHide = () => this.props.emit(this.props.EVENTS.VIDEO.HIDE);
+
+  render() {
+    const { isShow, isForce, src } = this.state;
+
+    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>
+    );
+  }
+}
+
+export const render = (props, root, resolve) => ReactDOM.render(<VideoView {...props} />, root, resolve);

package/view/index.styl

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