@shijiu/jsview 1.9.719

package/dom/jsview-dom/src/dom-wrapper/node/FDivElement.js

@@ -0,0 +1,48 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-extra-boolean-cast */
+import Element from './Element'
+import { FocusNode, FocusHub } from '../utils/focusableNode'
+
+let sFocusNodeIdGenerator = 1;
+
+class FDivElement extends Element {
+    constructor() {
+        super();
+
+        this.FocusNodeRef = new FocusNode("__DEFAULT_ID_" + (sFocusNodeIdGenerator++)); // 以id为初始名
+        this.HubRef = undefined;
+    }
+
+    jsvGetTagName() {
+        return Element.TAG.FDIV;
+    }
+
+    setAttribute(name, value) {
+        if (!name) {
+            return;
+        }
+
+        if (name === "fname") {
+            // 设置FDivHub查找用的名字
+            if (value) { // value 可能为空
+                this.FocusNodeRef.setBranchName(value);
+            }
+        } else if (name === "new-namespace") {
+            // 建立路由hub分支，以支撑新的namespace路由
+            if (value !== "" && !this.HubRef) {
+                let router_hub = new FocusHub(false, value);
+                this.HubRef = router_hub;
+                this.FocusNodeRef.setHub(router_hub);
+                this.FocusNodeRef.setBranchName(value);
+            }
+        } else {
+            // 不接受其他属性，所以不用调用 super.setAttribute(name, value)
+        }
+    }
+
+    jsvGetHub() {
+        return this.HubRef;
+    }
+}
+
+export default FDivElement;

package/dom/jsview-dom/src/dom-wrapper/node/HeadElement.js

@@ -0,0 +1,47 @@
+/* eslint-disable no-unused-vars */
+import Element from './Element'
+import LinkElement from './LinkElement'
+import ScriptElement from './ScriptElement'
+
+class HeaderElement extends Element {
+    constructor() {
+        super();
+        // console.log("Document header construct");
+    }
+
+    appendChild(node) {
+        // console.log("HeadElement.appendChild", node);
+
+        if(node.constructor.name == "HTMLScriptElement"
+        || node.constructor.name == "HTMLStyleElement"
+        || node.constructor.name == "HTMLLinkElement") {
+            window.originDocument.headAppendChild(node);
+        } else {
+            super.appendChild(node);
+        }
+
+        // if(node.constructor.name == "HTMLScriptElement") {
+        //     const htmlNode = node;
+        //     node = document.createElement("script");
+        //     node.src = htmlNode.src;
+        // }
+
+        if(node instanceof LinkElement
+        || node instanceof ScriptElement) {
+            // console.log("Found append script in head.");
+            node.jsvLoadResource();
+        }
+    }
+
+    removeChild(node) {
+        if(node.constructor.name == "HTMLScriptElement"
+        || node.constructor.name == "HTMLStyleElement"
+        || node.constructor.name == "HTMLLinkElement") {
+            window.originDocument.headRemoveChild(node);
+        } else {
+            super.removeChild(node);
+        }
+    }
+}
+
+export default HeaderElement;

package/dom/jsview-dom/src/dom-wrapper/node/ImageElement.js

@@ -0,0 +1,203 @@
+/* eslint-disable no-extra-boolean-cast */
+import Element from "./Element"
+import StyleDeclaration from "../style/StyleDeclaration"
+import ForgeExtension from "../ForgeExtension"
+import LoadEvent from "../event/LoadEvent"
+import Forge from "../../engine-js/ForgeDefine"
+
+class ImageElement extends Element {
+    constructor(tag) {
+        super(tag);
+
+        this.jsvImageView = new Forge.LayoutView(null, "img");
+        this.jsvMainView.AddView(this.jsvImageView);
+        this._ImageInLoading = false;
+        this.jsvColorSpace = Forge.ColorSpace.RGBA_8888;
+        this.jsvScaleDownTex = null;
+        this._HasUserOnLoad = false;
+        this._OnLoadSeq = 1; // 记录请求请求图片次序，用于防止onLoad多次调用
+        this._LoadedSrc = null;
+        this.jsvApicAutoPlay = true;
+    }
+
+    jsvGetTagName() {
+        return Element.TAG.IMAGE;
+    }
+
+    setAttribute(name, value) {
+        // console.log("ImageElement.setAttribute() name=", name, ", value=", value);
+        //拦截图片texutre信息
+        if (this.jsvTakeTextureAttribute(name, value)) {
+            return;
+        }
+
+        super.setAttribute(name, value);
+
+        if (name === Element.ATTRIBUTE.SRC) {
+            this.jsvSetAttrLazySync(name, Element.ATTRTYPE.CSS);
+        }
+    }
+
+    //Override
+    jsvSetElementProp(caches) {
+        this.jsvImageView.SetElementProp(caches, ForgeExtension.RootActivity);
+    }
+
+    // Override
+    // 当View从Root脱离时，需要通过jsvOnUnloadForgeView调用jsvRelease来释放播放器
+    jsvCallbackOnUnloadForgeView() {
+        return () => {
+            if (this._HasUserOnLoad) {
+                let image_texture = this.jsvImageView?.TextureSetting?.Texture;
+                if (image_texture) {
+                    image_texture.DisableBackgroundLoad(this);
+                }
+            }
+        };
+    }
+
+    // Override
+    jsvFlushEventHandlers() {
+        super.jsvFlushEventHandlers(); // 调用Super确保Handler获取成功
+        if (this.eventHandlers.onLoad) {
+            // 用户监听了onload事件，启用Texture的后台加载逻辑，即使Texture不可见也会进行加载
+            let image_texture = this.jsvImageView?.TextureSetting?.Texture;
+            if (image_texture) {
+                this._HasUserOnLoad = true;
+                image_texture.EnableBackgroundLoad(this);
+            }
+        } else if (this._HasUserOnLoad) {
+            // 用户取消了Onload回调(从有->无)
+            let image_texture = this.jsvImageView?.TextureSetting?.Texture;
+            if (image_texture) {
+                image_texture.DisableBackgroundLoad(this);
+            }
+            this._HasUserOnLoad = false;
+        }
+    }
+
+    jsvTakeTextureAttribute(name, value) {
+        //console.log("ImageElement.jsvTakeTextureAttribute() name=" + name);
+        if (name == "jsv_img_color_space"
+        || name == "jsvImgColorSpace"
+        || name == "jsv-img-color-space") {
+            this.jsvColorSpace = value;
+            return true;
+        } else if (name == "jsv_img_scaledown_tex"
+        || name == "jsvImgScaledownTex"
+        || name == "jsv-img-scaledown-tex") {
+            if (value === "" || typeof value === 'undefined') {
+                value = "true";
+            }
+            this.jsvScaleDownTex = value;
+            return true;
+        } else if (name == "jsv_disable_apic_autoplay") {
+            this.jsvApicAutoPlay = false;
+            return true;
+        }
+        return false
+    }
+
+    jsvFlushViewLayout() {
+        //console.log("ImageElement.jsvFlushViewLayout()");
+        if (this._ImageInLoading) {
+            // 将View放置为最小化，但仍然描画状态
+            this.jsvImageView.WaitTextureToResize(true);
+            // 设置view的尺寸信息，以便于渲染系统判断该view是否在屏幕上
+            this.jsvImageView.ResetLayoutParams({ x: 0, y: 0, width: this.style.width, height: this.style.height });
+        } else {
+            // 解除View等待Texture时处于的尺寸最小化状态
+            this.jsvImageView.WaitTextureToResize(false);
+        }
+
+        super.jsvFlushViewLayout();
+    }
+
+    jsvOnLoaded(imageSize) {
+        console.log("ImageElement.jsvOnLoaded() imageSize=" + JSON.stringify(imageSize));
+        this._ImageInLoading = false;
+        this._LoadedSrc = this.src;
+
+        this.jsvStore.textureWidth = imageSize.width;
+        this.jsvStore.textureHeight = imageSize.height;
+
+        // 触发view进行resize调整
+        //console.log("===========" + JSON.stringify(this.style));
+        this.style.jsvLazySyncCache.setCacheProperty(StyleDeclaration.TYPE.LAYOUT_SIZE, true);
+
+        // 触发onload事件
+        if (this._HasUserOnLoad) {
+            let event = new LoadEvent();
+            event.target = this;
+            document.dispatchEvent(event);
+        }
+    }
+
+    // override
+    jsvOnAttrLazySync(attri_changes) {
+        if (attri_changes.hasOwnProperty(Element.ATTRIBUTE.SRC)) {
+            // 当src有更新时，触发刷新
+            // 注意测试: borderRadius被设置在class中的场景
+            if (this.src != this._LoadedSrc) {
+                this._ImageInLoading = true;
+                this.jsvStore.textureWidth = NaN;
+                this.jsvStore.textureHeight = NaN;
+                this.jsvDrawImage();
+            }
+        }
+    }
+
+    // override
+    jsvOnLoadForgeView() {
+        //console.log("ImageElement.jsvOnLoadForgeView()");
+        if (!this.style.objectFit) {
+            // 设置默认ObjectFit以触发ClientWidth/ClientHeight自适配
+            this.style.jsvSetPropertySilently("objectFit", StyleDeclaration.ObjectFit.FILL);
+        }
+        super.jsvOnLoadForgeView();
+    }
+
+    // Override
+    jsvApplyObjectFit(origin_layout) {
+        // origin_layout.width = 200;
+        // origin_layout.height = 200;
+        //console.log("ImageElement.jsvApplyObjectFit() " + JSON.stringify(origin_layout));
+        if (this.jsvStore.textureWidth == 0 || this.jsvStore.textureHeight == 0) {
+            console.warn("warning: size 0 not support object fit, src=" + this.src);
+        }
+
+        return Element.applyObjectFitCommon(this, origin_layout, this.jsvImageView);
+    }
+
+    jsvDrawImage() {
+        if (!this.src) {
+            return;
+        }
+
+        let target_size = null;
+        if (this.jsvScaleDownTex === "true") {
+            if (this.style && this.style.width) {
+                target_size = {
+                    width: this.style.width,
+                    height: 0
+                }
+            } else {
+                console.error("set jsvScaleDownTex while style.width is not set. you need to set 'src' prop at the end.")
+            }
+        }
+        this._OnLoadSeq++;
+        let load_seq = this._OnLoadSeq;
+
+        ForgeExtension.SetBackgroundImage(this.jsvImageView, this.src,
+            this.style.borderRadius,
+            (imageSize) => {
+                if (load_seq === this._OnLoadSeq) {
+                    this.jsvOnLoaded(imageSize);
+                }
+            },
+            target_size,
+            this.jsvColorSpace,
+            this.jsvApicAutoPlay);
+    }
+}
+export default ImageElement;

package/dom/jsview-dom/src/dom-wrapper/node/JsvAudioTrackElement.js

@@ -0,0 +1,22 @@
+import Element from "./Element.js";
+import AudioElement from "./AudioElement";
+import MediaElement from "./MediaElement";
+
+class JsvAudioTrackElement extends AudioElement {
+    constructor(src) {
+        super(src);
+        console.log("AudioElement.constructor()", this);
+    }
+
+    jsvGetTagName() {
+        return Element.TAG.AUDIOTRACK;
+    }
+
+    jsvInit() {
+        // 覆盖Media的创建, 播放器使用AudioTrack, 对接短的本地化音频
+        this.jsvMedia = new MediaElement.HOOKS.Audio("AudioTrack");
+        this.jsvOverrideMedia = true;
+        super.jsvInit();
+    }
+}
+export default JsvAudioTrackElement;

package/dom/jsview-dom/src/dom-wrapper/node/JsvElement.js

@@ -0,0 +1,40 @@
+import Forge from "../../engine-js/ForgeDefine"
+import Element from "./Element"
+class JsvElement extends Element {
+    constructor(name) {
+        super();
+        this.jsvMainView = new Forge.JsvElementView(name);
+    }
+
+    get textContent() {
+        return this.jsvMainView.textContent;
+    }
+
+    set textContent(text) {
+        this.jsvMainView.textContent = text;
+    }
+
+    setAttribute(name, value) {
+        super.setAttribute(name, value);
+        this.jsvMainView.setAttribute(name, value);
+    }
+
+    removeAttribute(name) {
+        super.removeAttribute(name);
+        this.jsvMainView.removeAttribute(name);
+    }
+
+    getAttribute(name) {
+        return this.jsvMainView.getAttribute(name);
+    }
+
+    hasAttribute(name) {
+        return this.jsvMainView.hasAttribute(name);
+    }
+
+    jsvOnStyleChanged(styleTypes) {
+        super.jsvOnStyleChanged(styleTypes);
+    }
+}
+
+export default JsvElement;

package/dom/jsview-dom/src/dom-wrapper/node/LinkElement.js

@@ -0,0 +1,48 @@
+import Element from "./Element"
+import Event from "../event/Event"
+import URL from "../style/URL"
+
+class LinkElement extends Element {
+	constructor(tag) {
+		super(tag);
+		this.src = null;
+		this.onerror = null;
+		this.onload = null;
+	}
+
+	setAttribute(name, value) {
+		console.log("LinkElement.setAttribute() name=" + name + ", value=", value);
+		this[name] = value;
+	}
+
+	jsvLoadResource() {
+        let isSuccess = false;
+        let errCode = null
+
+		if (this.href != null) {
+			var url = new URL(this.href);
+			console.log("Ignore to load link from url=" + url.href);
+            isSuccess = true;
+		} else {
+			console.warn("Failed to load link, href is not exists.");
+            errCode = "NoSrc";
+        }
+
+		this.jsvOnLoadResult(isSuccess, errCode);
+	}
+
+	jsvOnLoadResult(isSuccess, errCode) {
+		console.log("jsvOnLoadResult isSuccess:" + isSuccess + ", errCode:" + errCode);
+		if (isSuccess) {
+			if (this.onload) {
+                let event = new Event('load');
+				this.onload(event);
+			}
+		} else {
+			if (this.onerror) {
+				this.onerror({ type: 'jsvErr_' + errCode, target:this });
+			}
+		}
+	}
+}
+export default LinkElement;

package/dom/jsview-dom/src/dom-wrapper/node/MediaElement.js

@@ -0,0 +1,230 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable no-extra-boolean-cast */
+import Element from "./Element"
+import URL from "../style/URL"
+
+
+class MediaElement extends Element {
+    constructor(src) {
+        super();
+        this.jsvMediaView = null;
+        this.jsvMedia = null;
+        this.onVisibilityChange = this.onVisibilityChange.bind(this);
+        this.stopByOnHide = false;
+        this.playBackground = false;
+        if(!!src) {
+            this.srcValue = src;
+        }
+    }
+
+    addEventListener(event, func, useCapture) {
+        event = event.replace(/-/g, ''); // Vue会将'onXxxYyy'(大写字母)转换为'xxx-yyy'，在此处将'-'去除
+        super.addEventListener(event, func, useCapture);
+        this.jsvAddMediaListener(event);
+    }
+
+    jsvOnLoaded() {
+        //need override
+    }
+
+    set src(value) {
+        if (!!value) {
+            if (value !== "about:null" && value !== "about:blank") {
+                let url = new URL(value);
+                value = url.href;
+            } else {
+                // 保持 value 为 about:null 或 about:blank, 用于停止播放行为
+            }
+        }
+
+        if(!this.jsvMedia) {
+            this.jsvInit();
+        }
+        if (value !== this.jsvMedia.src) {
+            this.jsvMedia.src = value;
+            this.srcValue = value;
+        }
+    }
+
+    jsvOnLoadForgeView() {
+        console.log("MediaElement jsvOnLoadForgeView");
+        super.jsvOnLoadForgeView();
+
+        if(!this.jsvMedia) {
+            this.jsvInit();
+        }
+        this.registerOnVisibilityChange();
+    }
+
+    jsvInit() {
+        // console.warn("MediaElement.jsvInit() this.jsvMedia=" + this.jsvMedia);
+        let addedEventList = this.jsvEventListener;
+        if(!!addedEventList) {
+            for(var event in addedEventList.keys) {
+                this.jsvAddMediaListener(event);
+            }
+        }
+        Promise.resolve().then(() => {
+            if (this.jsvMedia) {
+                this.jsvMedia.confirmInitSetup?.();
+            }
+        });
+    }
+
+    // Override
+    // 当View从Root脱离时，需要通过jsvOnUnloadForgeView调用jsvRelease来释放播放器
+    jsvCallbackOnUnloadForgeView() {
+        return this.jsvOnUnloadForgeView.bind(this);
+    }
+
+    jsvOnUnloadForgeView() {
+        console.log("MediaElement jsvOnUnloadForgeView");
+        this.unregisterOnVisibilityChange();
+        if (this.jsvMediaView) {
+            this.jsvMediaView = null;
+        }
+        this.jsvRelease();
+    }
+
+    jsvRelease() {
+        if(this.jsvMedia) {
+            this.jsvMedia.pause();
+            if (this.jsvMedia.unload) {
+                this.jsvMedia.unload();
+            }
+            if (this.jsvMedia.releaseResource) {
+                this.jsvMedia.releaseResource();
+                this.jsvMedia.onPlatformDestroy();
+            }
+        }
+        this.jsvEventListener = undefined;
+    }
+
+    jsvAddMediaListener(event) {
+        //need override
+    }
+
+    onJsViewHide() {
+        if (this.jsvMedia) {
+            //释放
+            if (!this.jsvMedia.paused) {
+                this.stopByOnHide = true;
+            }
+            this.jsvMedia.unload();
+        }
+    }
+
+    onJsViewShow() {
+        //重新加载
+        if (!this.jsvMedia) {
+            this.jsvInit();
+        }
+        this.jsvMedia.src = this.srcValue;
+
+        if (this.stopByOnHide) {
+            this.stopByOnHide = false;
+            this.jsvMedia.play();
+        }
+    }
+
+    onVisibilityChange(status) {
+        if (this.playBackground) { return; }
+        if (status.status === "show") {
+            this.onJsViewShow();
+        } else if (status.status === "hide") {
+            this.onJsViewHide();
+        }
+    }
+
+    registerOnVisibilityChange() {
+        if (window.JsView) {
+            window.JsView.onVisibilityChange(this.onVisibilityChange);
+        }
+    }
+
+    unregisterOnVisibilityChange() {
+        if (window.JsView) {
+            window.JsView.removeEventCallback(this.onVisibilityChange);
+        }
+    }
+
+    setAttribute(name, value) {
+        if (name === "jsv_play_background") {
+            this.playBackground = value === "true"
+            return;
+        }
+        super.setAttribute(name, value);
+    }
+}
+
+MediaElement.HOOKS = { // hook jsview的Audio和Video类，这两个类会被替换成AudioElement和VideoElement。
+    Audio      : Audio,
+    Video      : window._ExtVideo,
+	OffscreenVideo: window._ExtOVP,
+};
+
+MediaElement.PROP = {
+    SetOnly: [
+        "autoplay",
+        "loop",
+        "timeupdateless",
+        "predownload",
+    ],
+    GetOnly: [
+        "duration",
+        "paused",
+    ],
+    SetAndGet: [
+        "currentTime",
+        "muted",
+        "playbackRate",
+        "preload",
+        "volume",
+    ],
+    Function: [
+        "load",
+        "pause",
+        "play",
+        "unload",
+        "confirmInitSetup",
+    ],
+};
+
+for(let propType in MediaElement.PROP) {
+    let propArray = MediaElement.PROP[propType];
+    for (let propName of propArray) {
+        let propValue = {};
+        if(propType === "SetOnly" || propType === "SetAndGet") {
+            propValue.set = function (value) {
+                if (!this.jsvMedia) {
+                    this.jsvInit();
+                }
+                // console.warn("MediaElement.set() name=" + propName + ", value=" + value);
+                this.jsvMedia[propName] = value;
+            }
+        }
+        if(propType === "GetOnly" || propType === "SetAndGet") {
+            propValue.get = function () {
+                if (!this.jsvMedia) {
+                    this.jsvInit();
+                }
+                return this.jsvMedia[propName];
+            }
+        }
+        if(propType === "Function") {
+            propValue = function(...args) {
+                if (!this.jsvMedia) {
+                    this.jsvInit();
+                }
+                return this.jsvMedia[propName]?this.jsvMedia[propName](...args):null;
+            }
+        }
+
+        if (propValue instanceof Function) {
+            MediaElement.prototype[propName] = propValue;
+        } else {
+            Object.defineProperty(MediaElement.prototype, propName, propValue);
+        }
+    }
+}
+export default MediaElement;