@shijiu/jsview-vue 2.0.1106 → 2.0.1127-next-vue.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@shijiu/jsview-vue",
-  "version": "2.0.1106",
+  "version": "2.0.1127-next-vue.0",
   "license": "MIT",
   "repository": "system/jsview-framework",
   "author": "mengxk",

package/utils/JsViewPlugin/JsvPlayer/JsvMedia.js

@@ -21,6 +21,7 @@ let MediaPluginInfo = getPluginInfo();
 var mediaArray = [];
 
 var pluginLoadListener = [];
+var PluginEventKey = "JsvPlayer";
 
 let LOG_LEVEL_FATAL = 5;
 let LOG_LEVEL_ERROR = 4;
@@ -69,7 +70,7 @@ function setLogLevel(level){
 */
 var pluginLoadState = 0; 
 
-window.top.JsvPlayerPluginStatus = function(status){
+function JsvPlayerPluginStatus(status){
     logDebug("JsvPlayerPluginStatus: "+status);
     let ret = JSON.parse(status);
     
@@ -86,7 +87,11 @@ window.top.JsvPlayerPluginStatus = function(status){
     }
 }
 
-window.top.JsvPlayerPluginLoadResult = function (result) {
+window.top.JsvPlayerPluginStatus = function(status){
+    JsvPlayerPluginStatus(status);
+}
+
+function JsvPlayerPluginLoadResult(result){
     logDebug("JsvPlayerPluginLoadResult: "+result);
     var ret_obj = JSON.parse(result)
     let plugin_status = 1;
@@ -103,6 +108,8 @@ window.top.JsvPlayerPluginLoadResult = function (result) {
     if(pluginLoadState === 5){
         logFatal("*************************JsvPlayer plugin load failed, error code is "+ret_obj.status+"*************************");
     }
+
+    UnregisterJsvPlayerPluginEvent();
     
     for(let i=0; i<mediaArray.length; i++){
         mediaArray[i].buildPlatformInstance();
@@ -113,6 +120,10 @@ window.top.JsvPlayerPluginLoadResult = function (result) {
     }
 }
 
+window.top.JsvPlayerPluginLoadResult = function (result) {
+    JsvPlayerPluginLoadResult(result);
+}
+
 window.top.CreatePlayerResult = function (result) {
     logDebug("CreatePlayerResult: "+result);
     let result_obj = JSON.parse(result);
@@ -128,15 +139,59 @@ window.top.CreatePlayerResult = function (result) {
     }
 }.bind(this);
 
+function JsvPlayerPluginEvent(data){
+    console.log("LoadPlugin2 result: "+data);
+    let obj = JSON.parse(data);
+    let event_obj = JSON.parse(obj.param);
+    let type = event_obj.type;
+    let param = event_obj.param;
+    if(type === 1){
+        JsvPlayerPluginStatus(param)
+    }else if(type === 2){
+        JsvPlayerPluginLoadResult(param);
+    }else{
+        logError("Invalid type: "+type);
+    }
+}
+
+function RegisterJsvPlayerPluginEvent(){
+    window.JMD.subscribe(PluginEventKey, JsvPlayerPluginEvent);
+}
+
+function UnregisterJsvPlayerPluginEvent(){
+    window.JMD.unsubscribe(PluginEventKey, JsvPlayerPluginEvent);
+}
+
 /**
  * listener回调处理中参数信息的说明:
  * 插件加载状态回调。
  * 回调函数的参数定义如下：
- * 1:无法正常加载插件。
- * 2:正在加载旧插件，此时插件加载过程很短，可以不用出现用户提示界面。
- * 3:正在加载新插件，此时插件需要经历下载、解压等过程，用时较长，可以考虑给用户相关提示。
- * 4:插件加载完成。
- * 5:已加载不同版本的插件，此版本无法加载。
+ * object结构，包含status和code两个变量：
+ * 1）开始加载插件：
+ *    obj.status=1；
+ *    obj.code表示是否是首次加载：1：首次加载，此时插件需要经历下载、解压等过程，用时较长，可以考虑给用户相关提示；
+ *                             2：非首次加载，此时插件加载过程很短，可以不用出现用户提示界面。
+ * 2）插件加载中，只在加载新插件时才会上报此状态：
+ *    obj.status=2；
+ *    obj.code表示加载过程中的状态：1：插件下载完成；2：插件解压完成；3：插件dexload完成。
+ * 3）插件加载成功
+ *    obj.status=3;
+ *    obj.code无效。
+ * 4）插件加载失败
+ *    obj.status=4;
+ *    obj.code表示插件加载失败原因：1：插件管理模块不存在（未真正开始加载插件），下面的负值为插件管理模块返回的错误；
+ *                              -1：请求插件加载的参数不正确，需要确认构造的PluginInfo内容；
+ *                              -2：未找到插件更新链接；
+ *                              -3：插件HTTP请求失败；
+ *                              -4：插件下载失败；
+ *                              -5：插件MD5校验失败；
+ *                              -6：解压失败；
+ *                              -7：文件大小为0；
+ *                              -8：未找到dex文件；
+ *                              -9：dex文件load失败；
+ *                              -10：插件初始化失败；
+ *                              -11：取消插件下载；
+ *                              -12：版本检查失败，比如已经加载了其他版本，此版本不能再加载。
  * 
  * 备注：不管插件加载处于什么状态，都可以正常使用播放器组件，播放器对象在插件未加载完成的情况下，会把相关状态保存，等完成加载后再自动下发。
  */
@@ -171,7 +226,13 @@ function globalLoadJsvPlayerPlugin(listener){
     }
     pluginLoadState = 1;
 
-    window.jPluginManagerBridge.LoadPlugin(JSON.stringify(MediaPluginInfo));
+    RegisterJsvPlayerPluginEvent();
+
+    if(typeof window.jPluginManagerBridge.LoadPlugin2 !== "undefined"){
+        window.jPluginManagerBridge.LoadPlugin2(PluginEventKey, JSON.stringify(MediaPluginInfo));
+    }else{
+        window.jPluginManagerBridge.LoadPlugin(JSON.stringify(MediaPluginInfo));
+    }
 }
 
 /**
@@ -207,6 +268,7 @@ class JsvBaseMedia {
             rate: 1.0,
             volume: 1.0,
             chromaKey: null,
+            audioTrack: 0,
         };
         
 		this.local = {
@@ -267,10 +329,25 @@ class JsvBaseMedia {
 
         let share_view = true;
 
-        let result = window.jsvPlayerBridge.CreatePlayer(this.key, this.windowMode, this.holeId, this.background, this.designMapWidth, share_view, this.playerType, this.decodeType, "top.CreatePlayerResult");
-        if(result > 0){
-            this.initPlayer();
-        }
+        window.jsvPlayerBridge.CreatePlayer2(this.key, this.windowMode, this.holeId, this.background, this.designMapWidth, share_view, this.playerType, this.decodeType).then(
+            result=>{
+                logDebug("CreatePlayerResult: "+result);
+                let result_obj = JSON.parse(result);
+                if(result_obj.code == 0){
+                    //当播放器释放后，不需要进一步进行初始化，所以这里做了查找过程，没有直接调用initPlayer接口。
+                    for(var i=0; i<mediaArray.length; i++){
+                        if(mediaArray[i].key === result_obj.key){
+                            mediaArray[i].initPlayer();
+                           break;
+                        }
+                    }
+                }else{
+                    logError("Create player failed, key="+result_obj.key);
+                }
+            }, data=>{
+                logError("Create player failed, reject("+data+")");
+            }
+        );
     }
 
     /**
@@ -347,6 +424,10 @@ class JsvBaseMedia {
         if(this.state["chromaKey"]){
             this.setState("chromaKey", this.state["chromaKey"], "string");
         }
+
+        if(this.state["audioTrack"] !== 0){
+            this.setState("audioTrack", this.state["audioTrack"], "number");
+        }
     }
 
     onVisibilityChangeCallBack(){
@@ -976,6 +1057,35 @@ class JsvBaseMedia {
 		}
     }
 
+    /**
+     * 获取AudioTrack个数
+     * @returns total number of audio track.
+     */
+    getAudioTrackCount(){
+        let count = this.getProperty("audioTrackCount");
+        if(count === null){
+            return 1;
+        }
+
+        return count;
+    }
+
+    /**
+     * 获取当前使用的audio track
+     * @returns the current playing track
+     */
+    getSelectedAudioTrack(){
+        return this.getState("audioTrack");
+    }
+
+    /**
+     * 选择audio track
+     * @param {*} track audio track index
+     */
+    selectAudioTrack(track){
+        this.setState("audioTrack", track, "number");
+    }
+
     /**
      * 停止视频流。
      */
@@ -1002,6 +1112,11 @@ class JsvBaseMedia {
      */
     joinChannel(mixNo){
         logTrace("joinChannel, key="+this.key+", mixNo="+mixNo);
+        if(this.type === "audio"){
+            logWarning("Audio player do not support joinChannel.");
+            return 0;
+        }
+
         let ret = this.joinChannelPrivate(mixNo);
         if(ret >= 0){
             this.currentEventStatus = EVENT_STATUS_NONE;
@@ -1011,6 +1126,11 @@ class JsvBaseMedia {
     }
 
     joinChannelPrivate(mixNo){
+        if(this.type === "audio"){
+            logWarning("Audio player do not support joinChannelPrivate.");
+            return 0;
+        }
+
         if(mixNo <= 0){
             return -1;
         }
@@ -1040,6 +1160,11 @@ class JsvBaseMedia {
      */
     leaveChannel(){
         logTrace("leaveChannel, key="+this.key+", channelID="+this.channelID);
+        if(this.type === "audio"){
+            logWarning("Audio player do not support leaveChannel.");
+            return 0;
+        }
+
         let ret = this.leaveChannelPrivate();
 
         this.currentEventStatus = EVENT_STATUS_NONE;
@@ -1049,6 +1174,11 @@ class JsvBaseMedia {
 
     leaveChannelPrivate(){
         let ret = 0;
+        if(this.type === "audio"){
+            logWarning("Audio player do not support leaveChannelPrivate.");
+            return ret;
+        }
+
         if(this.playerCreate && this.appVisible){
             ret = window.jsvPlayerBridge.leaveChannel(this.key);
         }
@@ -1073,6 +1203,17 @@ class JsvBaseMedia {
     //     this.setState("fastForward", value, "number");
     // }
 
+    /**
+     * 当流停止后，不需要显示最后一帧，调用此接口清除。
+     */
+    clearLastFrame(){
+        logTrace("clearLastFrame, key="+this.key);
+        if(typeof window.jsvPlayerBridge !== "undefined"){
+            window.jsvPlayerBridge.clearLastFrame(this.key);
+        }
+
+        return;
+    }
     /**
      * @return {int} 当前音量，0-100。
      * */
@@ -1174,6 +1315,10 @@ class JsvBaseMedia {
      */
     setTimeShift(time){
         logTrace("setTimeShift, key="+this.key+", time="+time);
+        if(this.type === "audio"){
+            logWarning("Audio player do not support setTimeShift.");
+            return;
+        }
         if(this.playerCreate && this.appVisible){
             window.jsvPlayerBridge.setTimeShift(this.key, time);
         }
@@ -1190,6 +1335,10 @@ class JsvBaseMedia {
      */
      setChromaKey(chromaKey){
         logTrace("setChromaKey, key="+this.key+", chroma key="+JSON.stringify(chromaKey));
+        if(this.type === "audio"){
+            logWarning("Audio player do not support setChromaKey.");
+            return;
+        }
         this.setState("chromaKey", JSON.stringify(chromaKey), "string");
     }
 
@@ -1275,8 +1424,8 @@ class JsvMedia extends JsvBaseMedia {
 }
 
 class JsvMediaAudio extends JsvMedia {
-    constructor() {
-        super("audio", "resizable", null, null, null, null, null, 0);
+    constructor(key, design_map_width) {
+        super("audio", "resizable", 0, 3, key, true, design_map_width, 0);
     }
 }
 

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -1,5 +1,5 @@
 <script>
-import {JsvMediaVideo, findMediaObjectByKey, logDebug} from './JsvMedia'
+import {JsvMediaVideo, JsvMediaAudio, findMediaObjectByKey, logDebug} from './JsvMedia'
 import JsvNativeSharedDiv from 'jsview/utils/JsViewVueWidget/JsvNativeSharedDiv.vue'
 
 
@@ -26,7 +26,7 @@ export default {
 		 */
 		windowMode: {type: String, default: "resizable"},
 		/**
-		 * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv播放器。默认2。
+		 * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv视频播放器；3:jsv音频播放器。默认2。
 		 */
 		playerType: {type: Number, default: 2},
 		/**
@@ -170,7 +170,7 @@ export default {
 	watch: {
 		active(newValue) {
 			logDebug("active newValue: "+newValue);
-			if(this.video){
+			if(this.video && this.playerType !== 3){
 				if(newValue){
 					this.registerEvent();
 					this.video.setHoleID(this.holeId);
@@ -188,7 +188,7 @@ export default {
 		},
 		style(newValue){
 			logDebug("holeStyle newValue: left="+newValue.left+", top="+newValue.top+", width="+newValue.width+", height="+newValue.height);
-			if(this.active){
+			if(this.active && this.playerType !== 3){
 				this.holeStyle = {
 					left: 0, top: 0,
 					width:newValue.width, height:newValue.height
@@ -226,7 +226,7 @@ export default {
 		}
 		logDebug("player key:"+key)
 
-		let player_type = 1;
+		let player_type = 2;
 		if(this.playerType)
 			player_type = this.playerType;
 
@@ -243,7 +243,11 @@ export default {
 		let first_create = true;
 
 		if(!this.video){
-			this.video = new JsvMediaVideo(this.holeId, this.windowMode, player_type, key, background, designMap.width, this.decodeType);
+			if(player_type === 3){
+				this.video = new JsvMediaAudio(key, designMap.width);
+			}else{
+				this.video = new JsvMediaVideo(this.holeId, this.windowMode, player_type, key, background, designMap.width, this.decodeType);
+			}
 		}else{
 			this.video.setRef();
 			first_create = false;
@@ -286,10 +290,12 @@ export default {
 				//}else{
 				if(!first_create){
 					this.video.setHoleID(this.holeId);
-					this.holeStyle = {
-						left: 0, top: 0,
-						width: this.style.width, height: this.style.height
-					};
+					if(this.playerType !== 3){
+						this.holeStyle = {
+							left: 0, top: 0,
+							width: this.style.width, height: this.style.height
+						};
+					}
 				}
 			}
 
@@ -318,10 +324,12 @@ export default {
 				this.video.addEventListener("timeupdate", this.onTimeUpdate);
 				this.video.addEventListener("loadstart", () => {
 					logDebug("JsvPlayer received loadstart event.");
-					this.holeStyle = {
-						left: 0, top: 0,
-						width:this.style.width, height:this.style.height
-					};
+					if(this.playerType !== 3){
+						this.holeStyle = {
+							left: 0, top: 0,
+							width:this.style.width, height:this.style.height
+						};
+					}
 					this.onLoadStart();
 				});
 				this.video.addEventListener("canplaythrough", this.onCanPlayThrough);
@@ -349,7 +357,9 @@ export default {
 </script>
 
 <template>
-  <div :style="style" backgroundColor="rgba(0,0,0,1)">
+  <div 
+	v-if="playerType!=3"
+	:style="style" backgroundColor="rgba(0,0,0,1)">
     <JsvNativeSharedDiv :style="holeStyle" :getId="getHoleId"></JsvNativeSharedDiv>
   </div>
 </template>

package/utils/JsViewPlugin/JsvPlayer/version.mjs

@@ -1,18 +1,18 @@
-let PluginInfo={
-    // downloadUrl:"http://192.168.0.85:8080/plugin/JsvPlayer-203.zip", //插件下载地址
-    packageName:"com.qcode.jsvplayer",
-    name:"播放器插件",
-    version:"2.0.4",  //插件需要的版本号
-    versionCodeMin:204,
-    versionCodeMax:204,
-    bridgeName:"jsvPlayerBridge", //插件bridge注册到jsview的名称
-    className:"com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
-    initMethod:"createInstance",   //插件初始化方法
-    listener:"top.JsvPlayerPluginLoadResult",  //插件加载结果回调
+let PluginInfo = {
+    // downloadUrl:"http://192.168.0.85:8080/plugin/JsvPlayer-208.zip", //插件下载地址
+    packageName: "com.qcode.jsvplayer",
+    name: "播放器插件",
+    version: "2.0.9",  //插件需要的版本号
+    versionCodeMin: 209,
+    versionCodeMax: 209,
+    bridgeName: "jsvPlayerBridge", //插件bridge注册到jsview的名称
+    className: "com.qcode.jsvplayer.JsvPlayer",  //插件初始化类名称
+    initMethod: "createInstance",   //插件初始化方法
+    listener: "top.JsvPlayerPluginLoadResult",  //插件加载结果回调
     listener2: "top.JsvPlayerPluginStatus",
     // debug:true,
-    md5:"7aa897a8ff6f6a09d2522cf93c3a083e"
+    md5: "4aee086cdab079baa7aacf7f0e915b48"
 };
 
 // 导出字段要含有 pluginVersionInfo 信息，作为npm时版本参考
-export default PluginInfo;
+export default PluginInfo;

package/utils/JsViewVueTools/JsvHashHistory.js

@@ -64,10 +64,17 @@ class JsvHashHistory {
     const initHash = this.#getInitHash();
     if(initHash) {
       // 已设置hash，替换到hash页面
-      history.replace({
-        path: initHash.substring(1),// 去除#
-        query: window.location.search
-      });
+      const replaceTo = {
+        path: initHash.substring(1), // 去除#
+        query: undefined,
+      }
+
+      const queryIdx = initHash.indexOf('?');
+      if(queryIdx >= 0) {
+        replaceTo.path = replaceTo.path.substring(0, queryIdx - 1),
+        replaceTo.query = this.#convertUrlParams(initHash.substring(queryIdx));
+      }
+      history.replace(replaceTo);
     } else {
       // 未设置hash定位，追加hash根的显示
       this.#updateLocation(null);
@@ -105,9 +112,39 @@ class JsvHashHistory {
     }
   }
 
+  #convertUrlParams(value) {
+    // 去除问号
+    const questionMarkIdx = value.indexOf('?');
+    if(questionMarkIdx >= 0) {
+      value = value.substr(questionMarkIdx + 1);
+    }
+
+    // 分割参数
+    var paramArray = value.split('&');
+    var result = {};
+
+    // 遍历参数并解析键值对
+    for(const param of paramArray) {
+      const [key, value] = param.split('=');
+
+      // 如果键已存在，则将值转换为数组
+      if (result.hasOwnProperty(key)) {
+        if (!Array.isArray(result[key])) {
+          result[key] = [result[key]];
+        }
+        result[key].push(value);
+      } else {
+        result[key] = value;
+      }
+    };
+
+    return result;
+  }
+
   #history;
 }
 
+
 function jsvCreateHashHistory(base) {
   return new JsvHashHistory(base)
 }

package/utils/JsViewVueWidget/JsvSpriteAnim/JsvSpriteAnim.vue

@@ -35,7 +35,7 @@
  <script setup>
  import { getKeyFramesGroup } from '../../JsViewVueTools/JsvDynamicKeyFrames.js'
  import { reactive, shallowRef, onUnmounted, watch } from 'vue';
- 
+ import {getsAnimationToken} from "./sAnimationToken.js"
  
  const _getTransformInfo = (source_obj, target_obj, canvas_width, canvas_height) => {
      const result = { csw: 1, csh: 1, cx: 0, cy: 0, sw: 1, sh: 1, x: 0, y: 0 };
@@ -73,7 +73,7 @@
      duration: Number,
      onAnimEnd: Function,
      autostart: [Boolean, String],
-     loop: [String,Number],
+     loop: [String, Number],
      spriteName: String,
      controller: Object,
  })
@@ -108,7 +108,6 @@
  let spriteDuration = shallowRef(props.duration);
  let blinkAnim = shallowRef(null);
  let blinkAnimCache = reactive({});
- let sAnimationToken = shallowRef(0);
  
  const _removeKeyFrame = (names_array) => {
      if (keyFrameStyleSheet) {
@@ -128,7 +127,7 @@
  })
  
  const _getAnimNameBase = () => {
-     return props.spriteName ? props.spriteName : `sprite-anim-name-${sAnimationToken.value++}`;
+     return props.spriteName ? props.spriteName : `sprite-anim-name-${getsAnimationToken()}`;
  }
  
  const _updateFrozeFrameCache = (image_url, frame_info_list,
@@ -324,7 +323,6 @@
  })
  const onAnimEndDelegate = () => {
      // 在onAnimEnd之前进行Stop，以防onAnimEnd内部继续发生别的操作
-     stopped.value = true;
      if (props.onAnimEnd) {
          props.onAnimEnd();
      }
@@ -413,9 +411,9 @@
   
  <template>
      <div id="canvas">
-         <div id="clip" :style="{ ...transform_style.clipStyle }">
-             <div id="trans" :style="{ ...transform_style.transStyle }" @animationend="onAnimEndDelegate">
-                 <div id="image" :style="{ ...transform_style.imageStyle, animation: blinkAnim }"
+         <div id="clip" :style="{ ...transform_style.clipStyle }" :key="innerId">
+             <div id="trans" :style="{ ...transform_style.transStyle }" @animationend="onAnimEndDelegate" :key="innerId">
+                 <div id="image" :style="{ ...transform_style.imageStyle, animation: blinkAnim }" :key="innerId"
                      @animationend="onBlinkAnimEnd"></div>
              </div>
          </div>

package/utils/JsViewVueWidget/JsvSpriteAnim/sAnimationToken.js

@@ -0,0 +1,9 @@
+let sAnimationToken=0
+
+const getsAnimationToken=()=>{
+    return sAnimationToken++
+}
+
+export{
+    getsAnimationToken
+}