@shijiu/jsview-vue 0.9.426 → 0.9.502

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -1,5 +1,5 @@
 <script>
-import {JsvMediaVideo, findMediaObjectByKey} from './JsvMedia'
+import {JsvMediaVideo, findMediaObjectByKey, logDebug} from './JsvMedia'
 import JsvNativeSharedDiv from 'jsview/utils/JsViewVueWidget/JsvNativeSharedDiv.vue'
 
 
@@ -46,6 +46,10 @@ export default {
 		 * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
 		 */
 		keepLastFrame: {type: Boolean, default: false},
+		/**
+		 * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
+		 */
+		videoAspectRatio: {type: String, default: "origin"},
 		/**
 		 * 回调函数，播放结束时通过此回调接口通知。
 		 */
@@ -113,6 +117,22 @@ export default {
 		 * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
 		 */
 		onAudioFocusGain: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，直播进入时移状态时，触发此事件。
+		 */
+		onTimeShift: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，直播进入时移状态时，成功播放触发此事件。
+		 */
+		onTimeShifted: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，时移回到直播状态，触发此事件。
+		 */
+		onBackLive: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，时移回到直播状态时，成功播放触发此事件。
+		 */
+		onBackLived: {type: Function, default: ()=>{return{}}},
 		/**
 		 * 属性，Object类型，设置窗口属性，同其他组件的style设置。
 		 */
@@ -128,7 +148,7 @@ export default {
 	},
 	watch: {
 		active(newValue) {
-			console.log("active newValue: "+newValue);
+			logDebug("active newValue: "+newValue);
 			if(this.video){
 				if(newValue){
 					this.registerEvent();
@@ -146,7 +166,7 @@ export default {
 			}
 		},
 		style(newValue){
-			console.log("holeStyle newValue: left="+newValue.left+", top="+newValue.top+", width="+newValue.width+", height="+newValue.height);
+			logDebug("holeStyle newValue: left="+newValue.left+", top="+newValue.top+", width="+newValue.width+", height="+newValue.height);
 			if(this.active){
 				this.holeStyle = {
 					left: 0, top: 0,
@@ -155,7 +175,7 @@ export default {
 			}
 		},
 		keepLastFrame(newValue){
-			console.log("keepLastFrame newValue: "+newValue);
+			logDebug("keepLastFrame newValue: "+newValue);
 			if(this.video && this.active){
 				this.video.keepLastFrame = this.keepLastFrame;
 			}
@@ -177,13 +197,13 @@ export default {
 	created() {
 	},
 	mounted() {
-		console.log("JsvPlayer:",this.style)
+		logDebug("JsvPlayer:",this.style)
           
 		let key = "Jsv_" + Math.floor(Math.random() * 10000);
 		if(this.playerKey){
 			key = this.playerKey;
 		}
-		console.log("player key:"+key)
+		logDebug("player key:"+key)
 
 		let player_type = 1;
 		if(this.playerType)
@@ -193,10 +213,10 @@ export default {
 		if(!this.background)
 			background = this.background;
 
-		console.log("JsvPlayer background:"+background)
+		logDebug("JsvPlayer background:"+background)
 
 		const designMap = window.Forge.DesignMap();
-		console.log("JsvPlayer:", this.holeId)
+		logDebug("JsvPlayer:", this.holeId)
 
 		this.video = findMediaObjectByKey(key);
 		let first_create = true;
@@ -212,12 +232,12 @@ export default {
 			if(this.active){
 				this.registerEvent();
 
-				if(first_create){
+				//if(first_create){
 					if(this.src && this.src !== "")
 						this.video.src = this.src;
 					
-					if(this.currenttime !== 0)
-						this.video.currentTime = this.currenttime;
+					if(this.currentTime !== 0)
+						this.video.currentTime = this.currentTime;
 
 					if(this.autoplay){
 						this.video.autoplay = this.autoplay;
@@ -234,7 +254,12 @@ export default {
 					if(this.keepLastFrame){
 						this.video.keepLastFrame = this.keepLastFrame;
 					}
-				}else{
+
+					if(this.videoAspectRatio !== "origin"){
+						this.video.videoAspectRatio = this.videoAspectRatio;
+					}
+				//}else{
+				if(!first_create){
 					this.video.setHoleID(this.holeId);
 					this.holeStyle = {
 						left: 0, top: 0,
@@ -256,7 +281,7 @@ export default {
 
 	methods: {
 		getHoleId(id){
-			console.log("getHoleId:", id)
+			logDebug("getHoleId:", id)
 			this.holeId = id;
 		},
 		registerEvent(){
@@ -266,7 +291,7 @@ export default {
 				//this.video.addEventListener("abort", this.onAbort);
 				this.video.addEventListener("timeupdate", this.onTimeUpdate);
 				this.video.addEventListener("loadstart", () => {
-					console.log("JsvPlayer received loadstart event.");
+					logDebug("JsvPlayer received loadstart event.");
 					this.holeStyle = {
 						left: 0, top: 0,
 						width:this.style.width, height:this.style.height
@@ -285,6 +310,10 @@ export default {
 				this.video.addEventListener("canplay", this.onCanPlay);
 				this.video.addEventListener("audiofocusloss", this.onAudioFocusLoss);
 				this.video.addEventListener("audiofocusgain", this.onAudioFocusGain);
+				this.video.addEventListener("timeshift", this.onTimeShift);
+				this.video.addEventListener("timeshifted", this.onTimeShifted);
+				this.video.addEventListener("backlive", this.onBackLive);
+				this.video.addEventListener("backlived", this.onBackLived);
 			}
 		}
 	},

package/utils/JsViewPlugin/JsvPlayer/JsvPlayerBrowser.vue

@@ -8,25 +8,38 @@ export default {
     playerType: {type: Number, default: 1}, // PC 模拟时，不对接本功能
     background: {type: Boolean, default: true}, // PC 模拟时，不对接本功能
   },
+  setup() {
+    return {
+      VideoRef: null
+    };
+  },
   methods: {
     onRefProxy(video_ref) {
-        if (video_ref) {
-          // 补充插件扩展出来的接口
-          for (let method_name in playerExMethods) {
-              video_ref[method_name] = playerExMethods[method_name].bind(video_ref);
-          }
-        } else {
-          // video_ref为null，代表video标签卸载处理
-        }
+      this.VideoRef = video_ref;
 
-        // 将修改好的video回调返回给使用者
-        if (this.onRef) {
-            this.onRef(video_ref);
-        }
+      // 不在此直接回调 onRef，因为onRefProxy可能会因为 .src的设置导致重新触发一次调用(vue本身问题)
+      // 参照vue-core处理的 componentUpdateFn处理, onMounted 一次, src设置后会再次 onPatch 一次
     }  
   },
   mounted() {
+    if (this.VideoRef && this.onRef) {
+      let video_ref = this.VideoRef;
+      this.VideoRef = null;
+
+      // 补充插件扩展出来的接口
+      for (let method_name in playerExMethods) {
+          video_ref[method_name] = playerExMethods[method_name].bind(video_ref);
+      }
 
+      // 将修改好的video回调返回给使用者
+      this.onRef(video_ref);
+    }
+  },
+  beforeUnmount() {
+    if (this.onRef) {
+        // video_ref为null，代表video标签卸载处理
+        this.onRef(null);
+    }
   }
 };
 

package/utils/JsViewPlugin/JsvPlayer/index.js

@@ -15,6 +15,10 @@ if (window.JsvWidgetWrapperGroup?.BrowserJsvPlayer) {
         console.log("Loading player plugin");
         setTimeout(()=>{listener()}, 0);
     }
+
+    getJsvPlayerCapabilitySet = () => {
+        return null;
+    }
 }
 
 let component = _JsvPlayer.default;

package/utils/JsViewPlugin/JsvPlayer/version.js

@@ -0,0 +1,19 @@
+let PluginInfo={
+    //downloadUrl:"http://192.168.0.37:8080/plugin/JsvPlayer-6.0.zip", //插件下载地址
+    packageName:"com.qcode.jsvplayer",
+    name:"播放器插件",
+    version:"1.5.0",  //插件需要的版本号
+    versionCodeMin:150,
+    versionCodeMax:150,
+    bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
+    className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
+    initMethod:"createInstance",   //插件初始化方法
+    listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
+    listener2: "top.JsvPlayerPluginStatus",
+    // debug:true,
+    md5:"b0d74cbeafdb0adb02862addf61ce9d3"
+};
+
+// 不要用export default，update-env脚本不能解析
+// 导出字段要含有 pluginVersionInfo 信息，作为npm时版本参考
+module.exports = PluginInfo;

package/utils/JsViewVueTools/DebugTool.js

@@ -12,10 +12,34 @@ let DebugTools = {
     },
 };
 
+function DebugWrap81ErrorStack() {
+    // V8 js-core r81 版本内部，对于console.error和warn的堆栈无法和map自动匹配(缺少列号)
+    // 后续的V8版本修正了这个问题，而对于81版本，先使用new Error中的堆栈信息来绕开这个问题
+    if (!console._jsvOriginError) {
+        console._jsvOriginError = console.error; // JSExtra固化函数不能简单的用闭包替代
+        console.error = (...args) => {
+            console._jsvOriginError(...args, new Error("stack"));
+        }
+    }
+}
+
+function DebugWrap81WarnStack() {
+    // V8 js-core r81 版本内部，对于console.error和warn的堆栈无法和map自动匹配(缺少列号)
+    // 后续的V8版本修正了这个问题，而对于81版本，先使用new Error中的堆栈信息来绕开这个问题
+    if (!console._jsvOriginWarn) {
+        console._jsvOriginWarn = console.warn; // JSExtra固化函数不能简单的用闭包替代
+        console.warn = (...args) => {
+            console._jsvOriginWarn(...args, new Error("stack"));
+        }
+    }
+}
+
 // 全局引用，以便于在devtools中能直接进行查询
 window.JsvDebugTools = DebugTools;
 
 export {
     DebugTools,
     DebugObjectRefer,
+    DebugWrap81ErrorStack,
+    DebugWrap81WarnStack
 }

package/utils/JsViewVueTools/NinePatchHelper.js

@@ -0,0 +1,44 @@
+function toHtmlBorderSet() {
+
+}
+
+
+/*
+ * imageWidth { int } // (必填)原图信息: 原图的宽度(由于正方形,宽高相同)
+ * centerWidth  { int } // (必填)原图信息: .9图的中心区域宽度(repeat区域)
+ * imageDspWidth { int } // (选填)原图缩放后的显示宽度，计算方法: 
+ *                          四角为90度圆弧时: imageDspWidth = 显示图形的圆弧半径 / 原图中圆弧的半径 * 原图宽度
+ *                          原图中圆弧半径 = (原图宽度 - borderOutset * 2) / 2
+ *                          四角为其他形状时，原图.9图的四角区域，缩放到要和显示图形重合后的宽度。
+ * borderOutset { int } // (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
+ */
+function toNinePatchForgeViewSet(imageWidth, centerWidth, imageDspWidth, borderOutset) {
+    let image_scaledown_width = (imageDspWidth > 0 ? imageDspWidth : imageWidth);
+    
+    // 内容边缘尺寸(相对于缩放后的图)
+    let outset_of_content_scaledown = Math.ceil(borderOutset * image_scaledown_width / imageWidth); 
+    
+    // 中心repeat区域宽度，最小为1px
+    let center_repeat_width_scaledown = Math.max(1, Math.ceil(centerWidth * image_scaledown_width / imageWidth));
+
+    // 计算repeat距离图片的边界
+    // 注意: 当去除repeat区域后左右不对称时，默认取左边比右边的短1px
+    let outset_of_repeat_scaledown = Math.floor((image_scaledown_width - center_repeat_width_scaledown) / 2);
+
+    return {
+        padding: {
+            start: outset_of_content_scaledown,
+            width: Math.max(0, image_scaledown_width - 2 * outset_of_content_scaledown)
+        },
+        repeat: [{
+            start: outset_of_repeat_scaledown,
+            width: center_repeat_width_scaledown
+        }],
+        imageDspSize: image_scaledown_width
+    };
+}
+
+export {
+    toHtmlBorderSet,
+    toNinePatchForgeViewSet
+}

package/utils/JsViewVueTools/TypeCheckAndSet.js

@@ -0,0 +1,27 @@
+var number_convert_tmp = new Float32Array(1);
+
+function numberCheckSet(number) {
+    number_convert_tmp = number; // 强制类型转换, 避免JSON化时类型出错，因为 '123' 123 都能通过Nan检测
+    if (!isNaN(number_convert_tmp)) {
+        return number_convert_tmp;
+    } else {
+        console.warn(`${number} is not type of number, default as 0`);
+        return 0;
+    }
+}
+
+function urlCheckSet(origin_url) {
+    if (origin_url && origin_url.indexOf("http") === 0) {
+        return origin_url;
+    } else if (window.JsView.React.UrlRef) {
+        return (new window.JsView.React.UrlRef(origin_url)).href;
+    } else {
+        console.warn(`${origin_url} is not valid url format, default as null`);
+        return null;
+    }
+}
+
+export {
+    numberCheckSet,
+    urlCheckSet
+};

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserQrcode.vue

@@ -4,9 +4,18 @@ export default {
     props: {
         value: String,
         size: Number,
-        fgColor: String,
-        bgColor: String,
-        level: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+        fgColor: {
+            type: String,
+            default: "#000000"
+        },
+        bgColor: {
+            type: String,
+            default: "#ffffff"
+        },
+        level: {
+            type: String, // ，容错级别，分别是L(7%)、M(15%)、Q(25%)、H(30%),
+            default: "L"
+        },
         imageSettings: Object
     },
     data() {
@@ -90,7 +99,7 @@ export default {
             const imageSettings = props.imageSettings;
             const size = props.size;
             if (!imageSettings) {
-            return null;
+                return null;
             }
             const w = imageSettings.width;
             const h = imageSettings.height;
@@ -123,6 +132,8 @@ export default {
                     left: calculatedImageSettings.x + margin,
                     top: calculatedImageSettings.y + margin
                 }
+            } else {
+                this.imageStyle = {}
             }
             const fgPath = this.generatePath(cells, margin);
             return {numCells, fgPath};
@@ -133,16 +144,16 @@ export default {
 
 <template>
     <div>
-        <jsvsvg
+        <jsve-svg
             :type="'qrcode'"
             :shapeRendering="'crispEdges'"
             :height="size"
             :width="size"
             :viewBox="'0 0 ' + renderQrcode().numCells + ' ' + renderQrcode().numCells"
         >
-            <jsvpath :fill="bgColor" :d="'M0,0 h' + renderQrcode().numCells + 'v' + renderQrcode().numCells + 'H0z'" />
-            <jsvpath :fill="fgColor" :d="renderQrcode().fgPath" />
-        </jsvsvg>
+            <jsve-path :fill="bgColor" :d="'M0,0 h' + renderQrcode().numCells + 'v' + renderQrcode().numCells + 'H0z'" />
+            <jsve-path :fill="fgColor" :d="renderQrcode().fgPath" />
+        </jsve-svg>
         <div :style="imageStyle"></div>
     </div>
 </template>

package/utils/JsViewVueWidget/BrowserDebugWidget/JsvApic/BrowserApic.vue

@@ -120,5 +120,5 @@ export { LoopType };
 </script>
 
 <template>
-  <jsvcanvas :id="canvasId" :style="style" />
+  <jsve-canvas :id="canvasId" :style="style" />
 </template>

package/utils/JsViewVueWidget/JsvApic/JsvApic.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2021-10-13 13:14:42
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2021-11-18 16:43:54
+ * @LastEditTime: 2022-04-25 15:37:04
  * @Description: file content
 -->
 
@@ -10,7 +10,7 @@
  * 【模块 export 内容】
  * JsvApic：Vue高阶组件，控制动图播放
  *      prop说明:
- *          src {string} 对应img标签的src
+ *          src {string} 对应img标签的src, 传url时需要注意使用url([链接])
  *          style {object} 对应img标签的style
  *          loopType {enum} 循环播放类型 LOOP_DEFAULT(默认)/LOOP_INFINITE(无限)/LOOP_FINITE(有限)/LOOP_PART(部分帧循环)
  *          loopInfo {int[][3]} loopType为LOOP_PART时的循环设置,

package/utils/JsViewVueWidget/JsvFilterView.vue

@@ -0,0 +1,73 @@
+<!--
+ * 【模块 export 内容】
+ * JsvFilterView：黑白滤镜组件
+ *      props说明:
+ *          width   {int}   宽
+ *          height  {int}   高
+ *          left    {int}   left位置
+ *          top     {int}   top位置
+ *      methods说明:
+ *          enableFilter
+                @description 开关滤镜
+                @params {boolean} enable 滤镜是否生效
+-->
+<script>
+import { Forge, ForgeExtension } from "../../dom/jsv-forge-define";
+
+export default {
+  props: {
+    width: {
+      type: Number,
+    },
+    height: {
+      type: Number,
+    },
+    left: {
+      type: Number,
+      default: 0,
+    },
+    top: {
+      type: Number,
+      default: 0,
+    },
+  },
+  setup() {
+    return {
+      filterView: null,
+    };
+  },
+  created() {
+    this.filterView = new Forge.FilterView();
+    const view_store = ForgeExtension.RootActivity
+      ? ForgeExtension.RootActivity.ViewStore
+      : Forge.sViewStore;
+    this.viewId = view_store.add(
+      new Forge.ViewInfo(this.filterView, {
+        x: this.left,
+        y: this.top,
+        width: this.width,
+        height: this.height,
+      })
+    );
+  },
+  beforeUnmount() {
+    const view_store = ForgeExtension.RootActivity
+      ? ForgeExtension.RootActivity.ViewStore
+      : Forge.sViewStore;
+    view_store.remove(this.viewId);
+  },
+  methods: {
+    enableFilter(enable) {
+      if (this.filterView) {
+        this.filterView.FilterSwitch(enable);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div :jsv_innerview="viewId">
+    <slot></slot>
+  </div>
+</template>