@shijiu/jsview 1.9.719

package/dom/jsview-dom/src/engine-js/browser/layout_view_debug.js

@@ -0,0 +1,15 @@
+/* eslint-disable no-unused-vars */
+import Forge from "../ForgeDefine";
+
+class LayoutViewDebugClass {
+  SetTextureTracer (to_enable) {
+
+  }
+
+  GetTextureTracer () {
+    return null;
+  }
+}
+Forge.LayoutViewDebugClass = LayoutViewDebugClass;
+Forge.ForgeDebug = new Forge.LayoutViewDebugClass(); // export global variable
+window.ForgeDebug = Forge.ForgeDebug;

package/dom/jsview-dom/src/engine-js/browser/media.js

@@ -0,0 +1,379 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-prototype-builtins */
+class BaseMedia {
+  constructor(type) {
+    this.state = {};
+    this.type = type;
+    this._AutoPlay = false;
+  }
+
+  buildPlatformInstance() {
+    this.Ele = window.originDocument.createElement(this.type);
+    this.Ele.addEventListener("loadedmetadata", () => {
+      if (this.hasOwnProperty("onload")) { // 这个onload是必须调用的，否则创建的video 标签不会被添加到父view上
+        this.onload();
+      }
+      if (this.hasOwnProperty("onloadedmetadata")) {
+        this.onloadedmetadata();
+      }
+    });
+  }
+
+  set autoplay(value) {
+    if (typeof value !== "undefined") {
+      this._AutoPlay = true;
+      if (this.Ele.paused) { // 属性设置时，不允许操作play，故设置timeout 0
+        setTimeout(() => {
+          this.play();
+        }, 0);
+      }
+    }
+  }
+
+  get currentTime() {
+    return this.Ele.currentTime;
+  }
+
+  set currentTime(value) {
+    this.Ele.currentTime = value;
+    this.setState("seek", value, "number");
+  }
+
+  get duration() {
+    return this.Ele.duration;
+  }
+
+  set loop(value) {
+    if (typeof value === "boolean") {
+      this.Ele.loop = true;
+    } else if (typeof value === "undefined") {
+      this.Ele.loop = false;
+    } else {
+      this.Ele.loop = true; // html5标准用法, 任何value不为boolean|undefined都会转变为true
+    }
+  }
+
+  get muted() {
+    return this.getState("muted");
+  }
+
+  set muted(value) {
+    this.setState("muted", value, "boolean");
+  }
+
+  get paused() {
+    return this.Ele.paused;
+  }
+
+  get playbackRate() {
+    return this.getState("playbackRate");
+  }
+
+  set playbackRate(value) {
+    this.setState("playbackRate", value, "number");
+  }
+
+  set src(value) {
+    this.setState("src", value, "string");
+    if (value && this._AutoPlay) {
+      setTimeout(() => { // 属性设置时，不允许操作play，故设置timeout 0
+        this.play();
+      }, 0);
+    }
+  }
+
+  get style() {
+    const _this = this;
+    return {
+      set bottom(value) {
+        _this.setState("style", `{"bottom":"${value}"}`, "string");
+      },
+      set left(value) {
+        _this.setState("style", `{"left":"${value}"}`, "string");
+      },
+      set right(value) {
+        _this.setState("style", `{"right":"${value}"}`, "string");
+      },
+      set top(value) {
+        _this.setState("style", `{"top":"${value}"}`, "string");
+      },
+      set height(value) {
+        _this.setState("style", `{"height":"${value}"}`, "string");
+      },
+      set width(value) {
+        _this.setState("style", `{"width":"${value}"}`, "string");
+      },
+    };
+  }
+
+  get volume() {
+    return this.getState("volume");
+  }
+
+  set volume(value) {
+    this.setState("volume", value, "number");
+  }
+
+  get playableDuration() {
+    return this.Ele.playableDuration;
+  }
+
+  addEventListener(type, listener) {
+    this[`on${type}`] = listener;
+    this.Ele.addEventListener(type, (event) => {
+      this[`on${type}`](event);
+    });
+  }
+
+  load() {
+    this.Ele.load();
+  }
+
+  pause() {
+    this.Ele.pause();
+    this.setState("paused", true, "boolean");
+    if (this.hasOwnProperty("onpause")) {
+      this.onpause();
+    }
+  }
+
+  play() {
+    this.setState("paused", false, "boolean");
+    this.Ele.play();
+    if (this.hasOwnProperty("onplay")) {
+      this.onplay();
+    }
+  }
+
+  unload() {
+    this.setState("paused", true, "boolean");
+    this.Ele.pause();
+    this.Ele.removeAttribute('src'); // empty source
+    this.Ele.load();
+  }
+
+  setState(key, value, type) {
+    if (typeof (value) !== type) {
+      console.warn(`invalid paramter type to set ${key}. value is not ${type}`);
+      return;
+    }
+    if (key == "playbackRate") {
+      this.Ele.playbackRate = value
+    } else {
+      this.Ele.setAttribute(key, value);
+    }
+    this.state[key] = value;
+    console.log(`set ${key} = ${value}`);
+  }
+
+  getState(key) {
+    let value = this.state[key];
+    console.log(`get ${key} = ${value}`);
+    if (typeof value === "undefined") {
+      value = this.Ele.getAttribute(key);
+      this.state[key] = value;
+    }
+    return value;
+  }
+
+  onEnd(data) {
+    this.setState("paused", true, "boolean");
+    if (this.hasOwnProperty("onended")) {
+      this.onended();
+    }
+  }
+
+  onError(event) {
+    if (this.hasOwnProperty("onerror")) {
+      this.onerror(event.currentTarget.error.code);
+    }
+  }
+
+  mediaHandler() {
+    return this.Ele;
+  }
+
+  // Extension beyond HTML5
+  static setDesignMapWidth(w) {
+    if (typeof (w) !== "number") {
+      console.warn(`Invalid paramter type to set ${w}. It is not number.`);
+      return;
+    }
+
+    BaseMedia.prototype.designMapWidth = w;
+  }
+}
+BaseMedia.prototype.designMapWidth = 0;
+
+class Media extends BaseMedia {
+  constructor(type) {
+    super(type);
+    super.buildPlatformInstance(type);
+  }
+}
+
+class Audio extends Media {
+  constructor() {
+    super("audio");
+  }
+}
+window._ExtAudio = Audio;
+
+class Video extends Media {
+  constructor() {
+    super("video");
+    this.state.height = 0;
+    this.state.width = 0;
+    this.state.aspectRatiow = 'origin'; // 'origin', 'full', '16:9', '4:3',
+  }
+
+  get height() {
+    return this.getState("height");
+  }
+
+  set height(value) {
+    this.style.height = value;
+    this.state.height = value;
+  }
+
+  get poster() {
+    console.log("Video.poster() TODO");
+    return null;
+  }
+
+  set poster(value) {
+    console.log("Video.poster() TODO");
+  }
+
+  get videoAspectRatio() {
+    return this.getState("aspectRatio");
+  }
+
+  set videoAspectRatio(value) {
+    this.setState("aspectRatio", value, "string");
+  }
+
+  get videoHeight() {
+    return this.Ele.videoHeight;
+  }
+
+  get videoWidth() {
+    return this.Ele.videoWidth;
+  }
+
+  get width() {
+    return this.getState("width");
+  }
+
+  set width(value) {
+    this.style.width = value;
+    this.state.width = value;
+  }
+
+  onLoad(event) {
+    super.onLoad(event);
+  }
+
+  setRotation(degrees, viewWidth, viewHeight, fillView) {
+    let doRotation = function () {
+      let transform = `rotate3d(0, 0, 1, ${degrees}deg)`;
+
+      if (degrees == 90 || degrees == -90) {
+        let scaleWidth, scaleHeight;
+        if (fillView) {
+          scaleWidth = viewHeight / viewWidth;
+          scaleHeight = viewWidth / viewHeight;
+        } else {
+          scaleWidth = this.videoHeight / this.videoWidth;
+          scaleHeight = this.videoWidth / this.videoHeight;
+        }
+        if (isNaN(scaleWidth) || isNaN(scaleHeight)) {
+          return false;
+        }
+        transform += ` scale3d(${scaleWidth}, ${scaleHeight}, 1)`;
+      }
+
+      this.Ele.style.transform = transform;
+      if (this.Ele.parentNode) {
+        this.Ele.parentNode.style.overflow = 'hidden';
+      }
+      return true;
+    };
+    doRotation =  doRotation.bind(this);
+
+    const ret = doRotation();
+    if (!ret) { // video还没有返回宽高
+      this.Ele.addEventListener("loadedmetadata", () => {
+        doRotation();
+      });
+    }
+  }
+}
+window._ExtVideo = Video;
+
+class OffscreenVideoPlayer extends BaseMedia {
+  constructor() {
+    super("video");
+    this._ReleaseCallbacks = [];
+    this._ResourceTerminater = null;
+    super.buildPlatformInstance();
+  }
+
+  setResourceTerminator(callback) {
+    this._ResourceTerminater = callback;
+  }
+
+  hasTerminator() {
+    return (this._ResourceTerminater !== null);
+  }
+
+  listenToRelease(callback) {
+    this._ReleaseCallbacks.push(callback);
+  }
+
+  unload() {
+    super.unload();
+    // 用于在回调中释放Texture资源
+    if (this._ResourceTerminater !== null) {
+      this._ResourceTerminater();
+    }
+    this._ResourceTerminater = null;
+  }
+
+  releaseResource() {
+    for (let i = 0; i < this._ReleaseCallbacks.length; i++) {
+      this._ReleaseCallbacks[i]();
+    }
+
+    // 用于在回调中释放Texture资源
+    if (this._ResourceTerminater !== null) {
+      this._ResourceTerminater();
+    }
+    this._ResourceTerminater = null;
+  }
+
+  confirmInitSetup() {
+
+  }
+
+  setRotation() {
+    console.log("media.setRotation no implemented")
+  }
+
+  onPlatformDestroy() {
+
+  }
+
+  get videoHeight() {
+    return this.Ele.videoHeight;
+  }
+
+  get videoWidth() {
+    return this.Ele.videoWidth;
+  }
+}
+window._ExtOVP = OffscreenVideoPlayer;
+
+window.Audio = Audio;
+window.Video = Video;
+window.OffscreenVideoPlayer = OffscreenVideoPlayer;