@vnejs/plugins.views.video 0.1.8

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/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

@@ -0,0 +1,10 @@
+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, params }, [Video, VideoView]);

package/modules/video.js

@@ -0,0 +1,66 @@
+import { ModuleController } from "@vnejs/module.components";
+
+export class Video extends ModuleController {
+  name = "video";
+
+  emitHide = () => this.emit(this.EVENTS.VIDEO.HIDE);
+
+  updateEvent = this.EVENTS.VIDEO.UPDATE;
+  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);
+    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 = () =>
+    Promise.all([
+      this.emit(this.EVENTS.SCENARIO.LINE_EXEC_REG, { module: this.name, handler: this.onExecLineHandler }),
+      this.emit(this.EVENTS.SCENARIO.LINE_LOAD_REG, { module: this.name, handler: this.onPreloadLineHandler }),
+    ]);
+
+  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 });
+  };
+
+  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 = ({ line, priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND } = {}) => {
+    const { name = "" } = line.match(this.CONST.VIDEO.LINE_REG).groups;
+
+    return name && this.emit(this.EVENTS.VIDEO.LOAD, { name, priority });
+  };
+
+  onVideoLoad = ({ name = "", priority = this.CONST.MEDIA.PRIORITIES.BACKGROUND } = {}) => this.emit(this.EVENTS.MEDIA.LOAD, this.getMediaArgs(name, priority));
+
+  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.updateState({ src: video.src });
+  };
+
+  getMediaArgs = (name, priority) => {
+    const [type, quality] = [this.CONST.MEDIA.TYPES.VIDEO, this.shared.settings[this.SETTINGS.LAYER.QUALITY]];
+
+    return { mediaType: this.name, type, name, quality, priority };
+  };
+}

package/modules/view.js

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

package/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@vnejs/plugins.views.video",
+  "version": "0.1.8",
+  "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": ""
+}

package/view/index.jsx

@@ -0,0 +1,49 @@
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import { createRoot } from "react-dom/client";
+
+import { Screen } from "@vnejs/uis.react";
+
+import "./index.styl";
+
+const TRANSPARENT_IMAGE = "data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxIDEiLz4=";
+
+const VIDEO_PROPS = { pip: "false", poster: TRANSPARENT_IMAGE, className: "VideoView-video", crossOrigin: "anonymous" };
+
+const VideoView = ({ store, onMount, ...props } = {}) => {
+  const [{ isShow = false, isForce = false, src }, setState] = useState({});
+
+  useEffect(() => store.subscribe(setState), []);
+  useEffect(() => void onMount(), []);
+
+  const videoRef = useRef(null);
+
+  if (videoRef.current) videoRef.current.volume = props.shared.settings[props.SETTINGS.VOLUME.VALUE] / 100;
+
+  useEffect(() => {
+    const tm = setTimeout(() => {
+      if (videoRef.current) videoRef.current.volume = props.shared.settings[props.SETTINGS.VOLUME.VALUE] / 100;
+
+      if (isShow) return videoRef.current.play();
+
+      if (videoRef.current) {
+        videoRef.current.pause();
+        videoRef.current.currentTime = 0;
+      }
+    }, props.PARAMS.VIDEO.TRANSITION);
+
+    return () => clearTimeout(tm);
+  }, [isShow]);
+
+  const onClick = useCallback(() => props.emit(props.EVENTS.VIDEO.HIDE), []);
+
+  const propsScreen = useMemo(() => ({ ...props.PARAMS.VIDEO.VIEW_PROPS.screen, onClick, isShow, isForce }), [isShow, isForce]);
+  const propsVideo = useMemo(() => ({ ...VIDEO_PROPS, src, ref: videoRef, onEnded: onClick }), [src]);
+
+  return (
+    <Screen {...propsScreen}>
+      <video {...propsVideo} />
+    </Screen>
+  );
+};
+
+export const render = (props, root) => createRoot(root).render(<VideoView {...props} />);

package/view/index.styl

@@ -0,0 +1,10 @@
+.VideoView    
+    &-video
+        width: 100%
+        height: 100%
+        object-fit: fill
+
+        &::-webkit-media-controls,
+        &::-webkit-media-controls-start-playback-button {
+            display: none !important;
+        }