@shijiu/jsview-vue 2.0.1002 → 2.0.1045-next-vue.0

package/package.json

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

package/utils/JsViewEngineWidget/MetroWidget/MetroWidget.vue

@@ -135,6 +135,10 @@
         unlock
           @description 解锁
           @params {int} type 参考lock的type参数
+  slots:
+    renderItem: 该slot用于描画每个单元格
+    background: 该slot描画在item后, 一般用于描画需要跟随MetroWidget滚动的内容
+    foreground: 该slot描画在item前, 一般用于描画需要跟随MetroWidget滚动的内容
  * 【技巧说明】
  * Q: 插槽props如何使用？
  * A: data: 当前item的数据
@@ -1490,7 +1494,7 @@ const _calculateVisibleStart = (target_item, direction) => {
     new_visible_start =
       new_visible_start > boundary ? last_visible_start : new_visible_start;
   }
-  return new_visible_start;
+  return Math.round(new_visible_start);
 };
 
 const _onFocusableItemEdge = (edge_info) => {
@@ -1956,6 +1960,9 @@ defineExpose(exportObject);
           height: touchContainerH,
         }"
       >
+        <div>
+          <slot name="background"></slot>
+        </div>
         <div ref="locateDiv">
           <jsv-focus-block
             ref="focusNode"
@@ -2016,6 +2023,9 @@ defineExpose(exportObject);
             </div>
           </jsv-focus-block>
         </div>
+        <div>
+          <slot name="foreground"></slot>
+        </div>
       </div>
     </div>
   </div>

package/utils/JsViewPlugin/JsvAudio/AudioProxy.js

@@ -10,6 +10,11 @@ import Events from "./Events.js"
 
 const TAG = "JsvAudio";
 
+let keyToken = 0;
+const getKeyToken = () => {
+  return ++keyToken;
+}
+
 class AudioManager {
   constructor() {
     this.audioMap = {};
@@ -40,20 +45,9 @@ class AudioManager {
       this.audioMap[id].buildPlatformInstance();
     }
   }
-
-  onCreatePlayer(result) {
-    console.log("CreatePlayerResult: " + result);
-    let resultObj = JSON.parse(result);
-    if (resultObj.code == 0) {
-      this.audioMap[resultObj.key]?.initPlayer();
-    } else {
-      console.error("Create player failed, key=" + resultObj.key);
-    }
-  }
 }
 const sAudioManager = new AudioManager();
 
-window.top.CreatePlayerResult = sAudioManager.onCreatePlayer.bind(sAudioManager);
 
 const AUDIO_PROPS = {
   "src": { type: Object },
@@ -74,6 +68,8 @@ class AudioProxy {
     this._created = false;
     this._eventListener = {};
     this._propCache = {};
+    this._onVisibilityChange = this.onVisibilityChange.bind(this);
+    window.JsView?.onVisibilityChange(this._onVisibilityChange);
   }
 
   /** 初始化函数, 外部不应该调用 */
@@ -83,11 +79,14 @@ class AudioProxy {
       console.error("no jsvAudioBridge");
       return;
     }
-    let result = JsvAudioBridgeProxy.CreateAudio(this._playerId, "top.CreatePlayerResult");
-    console.log("JsvAudio CreateAudio result ", result);
-    if (result > 0) {
-      this.initPlayer();
-    }
+    JsvAudioBridgeProxy.CreateAudio(this._playerId).then((data) => {
+      const info = JSON.parse(data);
+      if (info.state == 0) {
+        this.initPlayer();
+      } else {
+        console.error(TAG, "create audio failed", info.errorInfo);
+      }
+    });
   }
 
   initPlayer() {
@@ -143,7 +142,7 @@ class AudioProxy {
     switch (event) {
       case Events.EVENT_END:
         this.setProperty("paused", true);
-        this.callEventListener("onend");
+        this.callEventListener("onended");
         break;
       case Events.EVENT_LOAD_START:
         this.callEventListener("onloadstart");
@@ -306,8 +305,26 @@ class AudioProxy {
       window.JMD.unsubscribe(this._playerId, this._onEvent);
       JsvAudioBridgeProxy.ReleasePlayer(this._playerId);
       this._audioManager.releaseAudio(this._playerId);
+      window.JsView?.removeEventCallback(this._onVisibilityChange);
+    }
+  }
+
+  onVisibilityChange(state) {
+    console.log(TAG, "audio visibility change", JSON.stringify(state));
+    if (state.status == "show") {
+      if (typeof this._propCache["customerPause"] != "undefined") {
+        const customerPause = this._propCache["customerPause"];
+        delete this._propCache["customerPause"];
+        if (!customerPause) {
+          this.play();
+        }
+      }
+    } else {
+      // pause when invisible
+      this._propCache["customerPause"] = this._propCache["paused"];
+      this.pause();
     }
   }
 }
 
-export { sAudioManager };
+export { sAudioManager, getKeyToken };

package/utils/JsViewPlugin/JsvAudio/JsvAudio.vue

@@ -1,151 +1,138 @@
-<script>
-import { sAudioManager } from "./AudioProxy.js";
+<script setup>
+import { sAudioManager, getKeyToken } from "./AudioProxy.js";
+import { onBeforeUnmount } from "vue";
 
-export default {
-  props: {
-    /**
-     * 回调函数，播放器对象通知接口
-     * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
-     */
-    onRef: { type: Function, default: () => {} },
-    /**
-     * 属性，Boolean类型，true表示自动播放，默认false。
-     */
-    autoplay: { type: Boolean, default: false },
-    /**
-     * 属性，String类型，播放器实例索引，同样的key使用同一个播放器实例。
-     */
-    playerKey: { type: String, default: null },
-    /**
-     * 属性，Boolean类型，true表示静音，默认false。
-     */
-    muted: { type: Boolean, default: false },
-    /**
-     * 属性，Boolean类型，true表示循环播放，默认false。
-     */
-    loop: { type: Boolean, default: false },
-    /**
-     * 属性，String类型，播放地址。
-     */
-    src: { type: String, default: "" },
-    /**
-     * 回调函数，播放结束时通过此回调接口通知。
-     */
-    onEnded: {
-      type: Function,
-      default: () => {
-        return {};
-      },
+const props = defineProps({
+  /**
+   * 回调函数，播放器对象通知接口
+   * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
+   */
+  onRef: { type: Function, default: () => {} },
+  /**
+   * 属性，Boolean类型，true表示自动播放，默认false。
+   */
+  autoplay: { type: Boolean, default: false },
+  /**
+   * 属性，String类型，播放器实例索引，同样的key使用同一个播放器实例。
+   */
+  playerKey: { type: String, default: null },
+  /**
+   * 属性，Boolean类型，true表示静音，默认false。
+   */
+  muted: { type: Boolean, default: false },
+  /**
+   * 属性，Boolean类型，true表示循环播放，默认false。
+   */
+  loop: { type: Boolean, default: false },
+  /**
+   * 属性，String类型，播放地址。
+   */
+  src: { type: String, default: "" },
+  /**
+   * 回调函数，播放结束时通过此回调接口通知。
+   */
+  onEnded: {
+    type: Function,
+    default: () => {
+      return {};
     },
-    /**
-     * 回调函数，播放错误时通过此接口通知。
-     * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
-     */
-    onError: {
-      type: Function,
-      default: () => {
-        return {};
-      },
-    },
-    /**
-     * 回调函数，开始加载，设置完播放地址后，上报此事件。
-     */
-    onLoadStart: {
-      type: Function,
-      default: () => {
-        return {};
-      },
+  },
+  /**
+   * 回调函数，播放错误时通过此接口通知。
+   * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
+   */
+  onError: {
+    type: Function,
+    default: () => {
+      return {};
     },
-    /**
-     * 回调函数，视频准备好后触发。
-     */
-    onLoadedMetaData: {
-      type: Function,
-      default: () => {
-        return {};
-      },
+  },
+  /**
+   * 回调函数，开始加载，设置完播放地址后，上报此事件。
+   */
+  onLoadStart: {
+    type: Function,
+    default: () => {
+      return {};
     },
-    /**
-     * 回调函数，视频准备好后触发，这个时候可以正常seek。
-     */
-    onLoad: {
-      type: Function,
-      default: () => {
-        return {};
-      },
+  },
+  /**
+   * 回调函数，视频准备好后触发。
+   */
+  onLoadedMetaData: {
+    type: Function,
+    default: () => {
+      return {};
     },
-    /**
-     * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
-     */
-    onAudioFocusLoss: {
-      type: Function,
-      default: () => {
-        return {};
-      },
+  },
+  /**
+   * 回调函数，视频准备好后触发，这个时候可以正常seek。
+   */
+  onLoad: {
+    type: Function,
+    default: () => {
+      return {};
     },
-    /**
-     * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
-     */
-    onAudioFocusGain: {
-      type: Function,
-      default: () => {
-        return {};
-      },
+  },
+  /**
+   * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
+   */
+  onAudioFocusLoss: {
+    type: Function,
+    default: () => {
+      return {};
     },
   },
-  setup() {
-    return {
-      audio: null,
-    };
+  /**
+   * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
+   */
+  onAudioFocusGain: {
+    type: Function,
+    default: () => {
+      return {};
+    },
   },
-  mounted() {
-    let key = "JsvAudio_" + Math.floor(Math.random() * 10000);
-    if (this.playerKey) {
-      key = this.playerKey;
-    }
-    console.log("player key:" + key);
+});
 
-    this.audio = sAudioManager.createAudio(key);
-    this.registerEvent();
-    if (this.src && this.src !== "") {
-      this.audio.src = this.src;
-    }
+let key = "JsvAudio_" + getKeyToken();
+if (props.playerKey) {
+  key = props.playerKey;
+}
+console.log("player key:" + key);
+const audio = sAudioManager.createAudio(key);
+//register listener
+audio.addEventListener("ended", props.onEnded);
+audio.addEventListener("error", props.onError);
+audio.addEventListener("loadstart", props.onLoadStart);
+audio.addEventListener("loadedmetadata", props.onLoadedMetaData);
+audio.addEventListener("load", props.onLoad);
+audio.addEventListener("audiofocusloss", props.onAudioFocusLoss);
+audio.addEventListener("audiofocusgain", props.onAudioFocusGain);
+// ste props
+if (props.src && props.src !== "") {
+  audio.src = props.src;
+}
 
-    if (this.autoplay) {
-      this.audio.autoplay = this.autoplay;
-    }
+if (props.autoplay) {
+  audio.autoplay = props.autoplay;
+}
 
-    if (this.muted) {
-      this.audio.muted = this.muted;
-    }
+if (props.muted) {
+  audio.muted = props.muted;
+}
 
-    if (this.loop) {
-      this.audio.loop = this.loop;
-    }
-    this.onRef?.(this.audio);
-  },
+if (props.loop) {
+  audio.loop = props.loop;
+}
 
-  beforeUnmount() {
-    if (this.audio != null) {
-      this.audio.release();
-      this.onRef?.(null);
-    }
-  },
+props.onRef?.(audio);
 
-  methods: {
-    registerEvent() {
-      if (this.audio) {
-        this.audio.addEventListener("end", this.onEnded);
-        this.audio.addEventListener("error", this.onError);
-        this.audio.addEventListener("loadstart", this.onLoadStart);
-        this.audio.addEventListener("loadedmetadata", this.onLoadedMetaData);
-        this.audio.addEventListener("load", this.onLoad);
-        this.audio.addEventListener("audiofocusloss", this.onAudioFocusLoss);
-        this.audio.addEventListener("audiofocusgain", this.onAudioFocusGain);
-      }
-    },
-  },
-};
+onBeforeUnmount(() => {
+  if (audio != null) {
+    audio.release();
+    props.onRef?.(null);
+  }
+});
 </script>
 
 <template>

package/utils/JsViewPlugin/JsvAudio/JsvAudioBridgeProxy.js

@@ -7,12 +7,15 @@ export default class {
   static isReady() {
     return typeof window.jsvAudioBridge != "undefined" && !!window.jsvAudioBridge;
   }
-  static CreateAudio(key, callback) {
+  static CreateAudio(key) {
     if (typeof window.jsvAudioBridge != "undefined"
       && typeof window.jsvAudioBridge.CreateAudio != "undefined") {
-      return window.jsvAudioBridge.CreateAudio(key, callback);
+      return window.jsvAudioBridge.CreateAudio(key);
     }
-    return -1;
+    return Promise.reject(JSON.stringify({
+      state: -2,
+      errorInfo: "jsvAudioBridge is null."
+    }));
   }
 
   static ReleasePlayer(key) {

package/utils/JsViewPlugin/JsvAudio/version.js

@@ -7,9 +7,9 @@ let PluginInfo = {
     // downloadUrl:"http://192.168.0.63:8080/plugin/JsvAudio-164.zip", //插件下载地址
     packageName: "com.qcode.jsvaudio",
     name: "音频插件",
-    version: "1.0.19",  //插件需要的版本号
-    versionCodeMin: 19,
-    versionCodeMax: 19,
+    version: "1.0.21",  //插件需要的版本号
+    versionCodeMin: 21,
+    versionCodeMax: 21,
     bridgeName: "jsvAudioBridge", //插件bridge注册到jsview的名称
     className: "com.qcode.jsvaudio.JsvAudio",  //插件初始化类名称
     initMethod: "createInstance",   //插件初始化方法

package/utils/JsViewPlugin/JsvAudio/version.mjs

@@ -7,9 +7,9 @@ let PluginInfo = {
   // downloadUrl:"http://192.168.0.63:8080/plugin/JsvAudio-164.zip", //插件下载地址
   packageName: "com.qcode.jsvaudio",
   name: "音频插件",
-  version: "1.0.19",  //插件需要的版本号
-  versionCodeMin: 19,
-  versionCodeMax: 19,
+  version: "1.0.21",  //插件需要的版本号
+  versionCodeMin: 21,
+  versionCodeMax: 21,
   bridgeName: "jsvAudioBridge", //插件bridge注册到jsview的名称
   className: "com.qcode.jsvaudio.JsvAudio",  //插件初始化类名称
   initMethod: "createInstance",   //插件初始化方法

package/utils/JsViewPlugin/JsvPlayer/GetVersion.js

@@ -1,4 +1,4 @@
-import PluginInfo from './version'
+import PluginInfo from './version.mjs'
 
 function reconfigPluginInfo() {
     if(typeof window.jJsvRuntimeBridge!=='undefined' && window.jJsvRuntimeBridge && typeof window.jJsvRuntimeBridge.getPluginBaseUrl !== "undefined"){

package/utils/JsViewPlugin/JsvPlayer/JsvPlayerBrowser.vue

@@ -1,53 +1,382 @@
 <script>
-import playerExMethods from "./JsvMediaBrowserInterface.js"
+import { Forge } from "@shijiu/jsview/dom/jsv-forge-define";
+import { shallowRef } from "vue"
+
+let logDebug = console.log;
 
 export default {
-  props: {
-    onRef: { type: Function, default: () => {} },
-    playerKey: { type: String, default: "JsvPlayer"}, // TODO: 尝试通过teleport合并多个video元素
-    playerType: {type: Number, default: 1}, // PC 模拟时，不对接本功能
-    background: {type: Boolean, default: true}, // PC 模拟时，不对接本功能
-  },
-  setup() {
-    return {
-      VideoRef: null
-    };
-  },
-  methods: {
-    onRefProxy(video_ref) {
-      this.VideoRef = 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);
+	props: {
+		/**
+		 * 回调函数，播放器对象通知接口
+		 * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
+		 */
+		onRef: { type: Function, default: () => {} },
+		/**
+		 * 属性，Boolean类型，true表示自动播放，默认false。
+		 */
+		autoplay: { type: Boolean, default: false },
+		/**
+		 * 属性，String类型，播放器实例索引，同样的key使用同一个播放器实例。
+		 */
+		playerKey: { type: String, default: null},
+		/**
+		 *  属性，String类型，播放器窗口模式，默认resizable模式。
+		 *                  full：观影模式，全屏方式，不建议修改w/h/l/t，视频清晰度/流畅度最佳；
+		 *                  resizable：可变窗口模式，可以随意修改w/h/l/t，支持动画效果，视频清晰度/流畅度表现可能不如full模式；
+		 *                  pip：画中画模式，只在支持多路硬解的情况下使用，用户画中画的小窗播放，对清晰度/流畅度要求较差，可能会有反交错问题。
+		 */
+		windowMode: {type: String, default: "resizable"},
+		/**
+		 * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv播放器。默认2。
+		 */
+		playerType: {type: Number, default: 2},
+		/**
+		 * 属性，int类型，播放器解码方式。0：根据硬件能力自动匹配；1:硬解码；2:软解码。默认0（根据芯片能力自动匹配）。
+		 */
+		decodeType: {type: Number, default: 0},
+		/**
+		 * 属性，Boolean类型，层级关系，true表示在界面的下面，false表示在界面上面，默认true。
+		 */
+		background: {type: Boolean, default: true},
+		/**
+		 * 属性，Boolean类型，true表示静音，默认false。
+		 */
+		muted: {type: Boolean, default: false},
+		/**
+		 * 属性，Boolean类型，true表示循环播放，默认false。
+		 */
+		loop:{type: Boolean, default: false},
+		/**
+		 * 属性，String类型，播放地址。
+		 */
+		src: {type: String, default: ""},
+		/**
+		 * 属性，Double类型，起播时间，0-duration。
+		 */
+		currentTime: { type: Number, default: 0},
+		/**
+		 * 属性，Boolean类型，是否保留最后一帧，true保留，false不保留。
+		 */
+		keepLastFrame: {type: Boolean, default: true},
+		/**
+		 * 属性，String类型，视频显示比例，origin原始比例显示，full全屏显示，x:y按照指定比例显示。
+		 */
+		videoAspectRatio: {type: String, default: "origin"},
+		/**
+		 * 属性，JSON Object类型，色度抠像参数，包含color，colorDistance，edgeDistance，greenOffset四个参数，
+		 * 参考格式：{color: 0x30FF30, colorDistance: 0.15, edgeDistance: 0.4, greenOffset: 0.05}
+		 *          color，色值，int类型，为抠图色值范围的中心点，格式为0xRRGGBB。
+     	 *          colorDistance，float类型，色域范围，范围0-1.0。
+     	 *          edgeDistance，float类型，alpha透明度距离，范围colorDistance-1.0，从colorDistance到edgeDistance的alpha值从1.0-0线性递减。
+     	 *          greenOffset，float类型，红蓝差值，范围0-1.0。
+		 * 目前只支持扣绿。
+		 */
+		chromaKey: {type: Object, default: null},
+		/**
+		 * 回调函数，播放结束时通过此回调接口通知。
+		 */
+		onEnded: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，播放错误时通过此接口通知。
+		 * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
+		 */
+		onError: {type: Function, default: ()=>{return{}}},
+		// onAbort: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，当正常播放时，每0.5秒上报一次，回调接口里会带上当前时间，也可以使用video对象的currentTime属性去获取当前时间。
+		 * @param {Long} 当前播放时间，单位秒。
+		 */
+		onTimeUpdate: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，开始加载，设置完播放地址后，上报此事件。
+		 */
+		onLoadStart: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，开始正常播放，同一个播放地址仅触发一次。
+		 */
+		onCanPlayThrough: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，正常下载，duration不变的情况下只触发一次。
+		 */
+		onProgress: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后触发。
+		 */
+		onLoadedMetaData: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后触发，这个时候可以正常seek。
+		 */
+		onLoad: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后触发，这个时候可以获取duration。
+		 */
+		onDurationChange: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，视频准备好后，seek（修改currentTime）会出发此事件。
+		 */
+		onSeeking: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，seek完成后触发此事件。
+		 */
+		onSeeked: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，缓冲时触发。
+		 */
+		onStalled: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，正常播放后触发。
+		 */
+		onPlaying: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，正常显示后触发此事件。
+		 */
+		onCanPlay: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
+		 */
+		onAudioFocusLoss: {type: Function, default: ()=>{return{}}},
+		/**
+		 * 回调函数，音频获取焦点后触发此事件，可能会触发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设置。
+		 */
+		style: {type: Object, default: ()=>{return{}}},
+		/**
+		 * 属性，Boolean类型，活跃状态，当多个JsvPlayer组件指向一个video对象时，只能有一个处于活跃状态。
+		 * 视频显示在活跃JsvPlayer设置的显示区域内，事件通知也只会送给活跃的JsvPlayer组件注册的回调函数。
+		 */
+		active:{type: Boolean, default: true},
+	},
+	components: {
+		
+	},
+	watch: {
+		active(newValue) {
+			console.log("LudlDebug active newValue: "+newValue);
+			if(this.video){
+				if(newValue){
+					this.registerEvent();
+					this.video.setHoleID(this.holeId);
+					this.holeStyle = {
+						left: 0, top: 0,
+						width: this.style.width, height: this.style.height
+					};
+				}else{
+					this.holeStyle = {
+						left: 0, top: 0,
+						width: 0, height: 0
+					};
+				}
+			}
+		},
+		style(newValue){
+			logDebug("holeStyle newValue: left="+newValue.left+", top="+newValue.top+", width="+newValue.width+", height="+newValue.height);
+			if(this.active){
+				this.holeStyle = {
+					left: 0, top: 0,
+					width:newValue.width, height:newValue.height
+				};
+			}
+		},
+		keepLastFrame(newValue){
+			logDebug("keepLastFrame newValue: "+newValue);
+			if(this.video && this.active){
+				this.video.keepLastFrame = this.keepLastFrame;
+			}
+		}
+	},
+
+	setup(){
+		return {
+			video: null,
+			holeId: "",
+      jsvMainView: shallowRef(null),
+      innerViewId: shallowRef(-1),
+		};
+	},
+
+	data() {
+		return {
+			holeStyle: {},
+		};
+	},
+	created() {
+	},
+	mounted() {
+		logDebug("JsvPlayer:",this.style)
+          
+		let key = "Jsv_" + Math.floor(Math.random() * 10000);
+		if(this.playerKey){
+			key = this.playerKey;
+		}
+		logDebug("player key:"+key)
+
+		let player_type = 1;
+		if(this.playerType)
+			player_type = this.playerType;
+
+		let background = true;
+		if(!this.background)
+			background = this.background;
+
+		logDebug("JsvPlayer background:"+background)
+
+		const designMap = window.Forge.DesignMap();
+		logDebug("JsvPlayer:", this.holeId)
+
+		// this.video = findMediaObjectByKey(key);
+    // TODO: 后续支持共享MediaId ?
+		let first_create = true;
+
+		if(!this.video){
+      // 创建PC版本的video标签
+			this.video = window.originDocument.createElement("video");
+		}else{
+			this.video.setRef();
+			first_create = false;
+		}
+
+		if(this.video != null){
+			if(this.active){
+				this.registerEvent();
+
+				//if(first_create){
+					if(this.src && this.src !== "")
+						this.video.src = this.src;
+					
+					if(this.currentTime !== 0)
+						this.video.currentTime = this.currentTime;
+
+					if(this.autoplay){
+						this.video.autoplay = this.autoplay;
+					}
+
+					if(this.muted){
+						this.video.muted = this.muted;
+					}
+
+					if(this.loop){
+						this.video.loop = this.loop;
+					}
+
+					if(!this.keepLastFrame){
+						this.video.keepLastFrame = this.keepLastFrame;
+					}
+
+					if(this.videoAspectRatio !== "origin"){
+						this.video.videoAspectRatio = this.videoAspectRatio;
+					}
+
+					if(this.chromaKey && this.chromaKey !== ""){
+						this.video.setChromaKey(this.chromaKey)
+					}
+				//}else{
+				if(!first_create){
+					this.video.setHoleID(this.holeId);
+					this.holeStyle = {
+						left: 0, top: 0,
+						width: this.style.width, height: this.style.height
+					};
+				}
+			}
+
+      // 创建挂载的VideoView
+      this.jsvMainView = new Forge.VideoView(this.video, null);
+      this.innerViewId = Forge.sViewStore.add(
+        new Forge.ViewInfo(this.jsvMainView)
+      );
+
+			this.onRef?.(this.video)
+		}
+	},
+
+	unmounted(){
+		if(this.video != null) {
+      // 清理View管理缓存
+      if (this.innerViewId !== -1) {
+        Forge.sViewStore.remove(this.innerViewId);
+        this.innerViewId = -1;
+        this.jsvMainView = null;
       }
+			this.onRef?.(null)
+		}
+	},
 
-      // 将修改好的video回调返回给使用者
-      this.onRef(video_ref);
-    }
-  },
-  beforeUnmount() {
-    if (this.onRef) {
-        // video_ref为null，代表video标签卸载处理
-        this.onRef(null);
-    }
-  }
-};
+	methods: {
+		getHoleId(id){
+			logDebug("getHoleId:", id)
+			this.holeId = id;
+		},
+		registerEvent(){
+			if(this.video && this.active){
+				this.video.addEventListener("end", this.onEnded);
+				this.video.addEventListener("error", this.onError);
+				//this.video.addEventListener("abort", this.onAbort);
+				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
+					};
+					this.onLoadStart();
+				});
+				this.video.addEventListener("canplaythrough", this.onCanPlayThrough);
+				this.video.addEventListener("progress", this.onProgress);
+				this.video.addEventListener("loadedmetadata", this.onLoadedMetaData);
+				this.video.addEventListener("load", this.onLoad);
+				this.video.addEventListener("durationchange", this.onDurationChange);
+				this.video.addEventListener("seeking", this.onSeeking);
+				this.video.addEventListener("seeked", this.onSeeked);
+				this.video.addEventListener("stalled", this.onStalled);
+				this.video.addEventListener("playing", this.onPlaying);
+				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);
+			}
+		}
+	},
+}
 
+//export default JsvPlayer;
 </script>
 
 <template>
-  <video :ref="onRefProxy" v-bind="$attrs"/>
+  <div :style="holeStyle" backgroundColor="rgba(0,0,0,1)">
+    <div
+      :style="{
+        left: holeStyle.left,
+        top: holeStyle.top,
+        width: holeStyle.width,
+        height: holeStyle.height,
+      }"
+      :data-jsv-vw-innerview="innerViewId"
+    />
+  </div>
 </template>
 
 <style scoped>
-</style>
+
+</style>

package/utils/JsViewPlugin/JsvPlayer/version.mjs

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

package/utils/JsViewVueTools/JsvDemoTester.js

@@ -0,0 +1,80 @@
+let interfaceLoaded = false;
+let idGeneratoer = 1;
+let idObjectMap = {};
+
+const ensureInterface = ()=>{
+    return new Promise((resolve, reject)=>{
+        if (interfaceLoaded) {
+            // 已经加载完成
+            resolve();
+            return;
+        }
+    
+        if (window.JsView) {
+            let cb = ()=>{
+                // dynamic加载完成
+                if (window.jJsvDemoTester) {
+                    console.log("window.jJsvDemoTester ready")
+                } else {
+                    console.log("window.jJsvDemoTester failed")
+                }
+
+                console.log("remove cb=" + cb);
+
+                // 移除回调
+                window.JsView.removeEventListener(cb);
+
+                // 无论成功失败，暂且都论为加载完成
+                interfaceLoaded = true;
+                resolve();
+            };
+            window.JsView.addEventListener("__DemoTesterReady", cb);
+            window.JsView.ensureTesterUtils();
+        } else {
+            interfaceLoaded = true;
+            resolve(); // 非JsView场景,默认为完成状态
+        }
+    });
+}
+
+const enableNativeViewListener = (nativeViewId)=>{
+    let listenerId = idGeneratoer;
+    idGeneratoer++;
+    idObjectMap[listenerId] = {
+        eventCallback: (ret)=>{
+            console.log("JsvDemoTester nativeView info=" + ret.info);
+        }
+    };
+
+    (async ()=>{
+        await ensureInterface();
+
+        if (idObjectMap.hasOwnProperty(listenerId)) {
+            let eventName = "__enableNativeViewListener_" + listenerId;
+        
+            window.JsView?.addEventListener(eventName, idObjectMap[listenerId].eventCallback);
+            window.jJsvDemoTester?.enableNativeViewListener(nativeViewId, listenerId, eventName);
+        }
+    })();
+
+    return listenerId; // 用于 disableNativeViewListener() 调用
+}
+
+const disableNativeViewListener = (listenerId)=>{
+    (async ()=>{
+        await ensureInterface();
+
+        if (idObjectMap.hasOwnProperty(listenerId)) {
+            window.JsView?.removeEventListener(idObjectMap[listenerId].eventCallback);
+            window.jJsvDemoTester?.disableNativeViewListener(listenerId);
+            delete idObjectMap[listenerId];
+        } else {
+            console.warn("disableNativeViewListener id gone");
+        }
+    })();
+}
+
+export {
+    enableNativeViewListener,
+    disableNativeViewListener
+}

package/utils/JsViewVueTools/JsvHashHistory.js

@@ -50,7 +50,8 @@ class JsvHashHistory {
 
   #createMockHashHistory(base) {
     // 抄 createWebHashHistory 作业
-    base = location.host ? base || location.pathname + location.search : '';
+    // base = location.host ? base || location.pathname + location.search : '';
+    base = (location.host || location.protocol === 'file:') ? base || location.pathname + location.search : '';
     if (!base.includes('#'))
         base += '#';
     if (!base.endsWith('#/') && !base.endsWith('#')) {

package/utils/JsViewVueTools/index.js

@@ -18,3 +18,4 @@ export * from "./JsvImpactTracer.js";
 export * from "./JsvTextTools.js";
 export * from "./JsvPreDownloader.ts"
 export { default as DefaultKeyCodeMap } from "./DefaultKeyMap.js";
+export * from "./JsvDemoTester.js"

package/utils/JsViewVueWidget/JsvApic/index.js

@@ -11,7 +11,7 @@ let _JsvApic;
 if (window.JsView) {
   _JsvApic = JsvApic.default;
 } else {
-  const BrowserApic = await import("./BrowserApic/index.js");
+  const BrowserApic = await import("./BrowserApic/BrowserApic.vue");
   _JsvApic = BrowserApic.default;
 }
 let LoopType = JsvApic.LoopType;

package/utils/JsViewVueWidget/JsvNinePatch.vue

@@ -14,6 +14,7 @@
  *          borderOutset {int}      (必填)原图信息: 图片边缘到中心内容区域边缘的距离, 快速计算: (原图宽度 - 原图中放内容宽度) / 2
  *          animTime    {int}       (必填)缩放动画的时长(单位秒)
  *          waitForInit {boolean}  (选填)尺寸为0时是否进行描画(例如: 首次显示不展示动画的场合，设置为true),默认值为true
+ *          onTransitionEnd { Function } (选填)transition动画结束的回调
 -->
 
 <script setup>
@@ -37,6 +38,7 @@ const props = defineProps({
   centerWidth: { type: Number, default: -1, required: true },
   borderOutset: { type: Number, required: true },
   animTime: { type: Number, default: 0 },
+  onTransitionEnd: { type: Function },
 });
 
 const isReady = () => {
@@ -99,5 +101,6 @@ watchEffect(() => {
       borderImageWidth: `${borderDspWidth}px`,
       borderImageOutset: `${convertedBorderOutset}px`,
     }"
+    @transitionend="props.onTransitionEnd"
   />
 </template>

package/utils/JsViewVueWidget/JsvSystemAudio.vue

@@ -0,0 +1,219 @@
+<template>
+  <div :style="{ width: 1, height: 1 }" backgroundColor="rgba(0,0,0,1)"></div>
+</template>
+<script >
+export default {
+  props: {
+    /**
+     * 回调函数，播放器对象通知接口
+     * @param {Object} video对象，可以通过此video对象调用video相关属性和方法，具体属性和方法定义见JsvMedia.js文件里相关说明。
+     */
+    onRef: { type: Function, default: () => { } },
+    /**
+     * 属性，Boolean类型，true表示自动播放，默认false。
+     */
+    autoplay: { type: Boolean, default: false },
+    /**
+     * 属性，String类型，播放器实例索引，同样的key使用同一个播放器实例。
+     */
+    playerKey: { type: String, default: null },
+    /**
+     * 属性，Boolean类型，true表示静音，默认false。
+     */
+    muted: { type: Boolean, default: false },
+    /**
+     * 属性，Boolean类型，true表示循环播放，默认false。
+     */
+    loop: { type: Boolean, default: false },
+    /**
+     * 属性，String类型，播放地址。
+     */
+    src: { type: String, default: "" },
+    /**
+     * 回调函数，播放结束时通过此回调接口通知。
+     */
+    onEnded: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，播放错误时通过此接口通知。
+     * @param {int} 错误类型，当前定义了四种错误。1是异常中断；2是网络错误；3是解码错误；4是格式不支持。
+     */
+    onError: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，开始加载，设置完播放地址后，上报此事件。
+     */
+    onLoadStart: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发。
+     */
+    onLoadedMetaData: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，视频准备好后触发，这个时候可以正常seek。
+     */
+    onLoad: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，音频失去焦点后触发此事件，可能会导致pause（点播）或者离开频道（直播）。
+     */
+    onAudioFocusLoss: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /**
+     * 回调函数，音频获取焦点后触发此事件，可能会触发resume（点播）或者加入频道（直播）。
+     */
+    onAudioFocusGain: {
+      type: Function,
+      default: () => {
+        return {};
+      },
+    },
+    /*
+     *预下载音频
+     */
+    preDownload: {
+      type: Boolean,
+      default: false
+    }
+  },
+  setup() {
+    return {
+      audio: null,
+    };
+  },
+  mounted() {
+    this.Jsvinit()
+  },
+
+  beforeUnmount() {
+    if (this.audio != null) {
+      this.audio.unload?.();
+      this.audio.releaseResource?.();
+      this.audio.onPlatformDestroy?.();
+      this.onRef?.(null);
+      this.unregisterOnVisibilityChange()
+    }
+  },
+
+  methods: {
+    registerEvent() {
+      if (this.audio) {
+        this.audio.addEventListener("ended", this.onEnded);
+        this.audio.addEventListener("error", this.onError);
+        this.audio.addEventListener("loadstart", this.onLoadStart);
+        this.audio.addEventListener("loadedmetadata", this.onLoadedMetaData);
+        this.audio.addEventListener("load", this.onLoad);
+        this.audio.addEventListener("audiofocusloss", this.onAudioFocusLoss);
+        this.audio.addEventListener("audiofocusgain", this.onAudioFocusGain);
+      }
+    },
+    onVisibilityChange(status) {
+      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);
+      }
+    },
+    onJsViewHide() {
+      if (this.audio) {
+        //释放
+        if (!this.audio.paused) {
+          this.stopByOnHide = true;
+        }
+        this.audio.unload();
+      }
+    },
+    onJsViewShow() {
+      //重新加载
+      if (!this.audio) {
+        this.Jsvinit()
+      }
+
+      if (this.stopByOnHide) {
+        this.stopByOnHide = false;
+        this.Jsvinit()
+      }
+    },
+    Jsvinit() {
+      let key = "JsvAudio_" + Math.floor(Math.random() * 10000);
+      if (this.playerKey) {
+        key = this.playerKey;
+      }
+      console.log("player key:" + key);
+
+      this.audio = new Audio();
+      this.registerEvent();
+      if (this.src && this.src !== "") {
+        let realUrl
+        if (window.JsView) {
+          // jsview上
+          realUrl = new window.JsView.Dom.UrlRef(this.src).href;
+        } else {
+          realUrl = this.src;
+        }
+        this.audio.src = realUrl;
+      }
+
+      if (this.autoplay) {
+        this.audio.autoplay = this.autoplay;
+      }
+
+      if (this.muted) {
+        this.audio.muted = this.muted;
+      }
+
+      if (this.loop) {
+        this.audio.loop = this.loop;
+      }
+      if (this.preDownload) {
+        this.audio.predownload = this.preDownload;
+      }
+      this.onRef?.(this.audio);
+      //初始化
+      Promise.resolve().then(() => {
+        if (this.audio) {
+          this.audio.confirmInitSetup?.();
+        }
+      });
+      this.registerOnVisibilityChange()
+    }
+  },
+};
+</script>
+
+<style lang="scss" scoped></style>

package/utils/JsViewVueWidget/index.js

@@ -40,3 +40,4 @@ export { default as JsvTextBox } from "./JsvTextBox.vue";
 export { default as JsvTouchContainer } from "./JsvTouchContainer.vue";
 export { default as JsvTransparentDiv } from "./JsvTransparentDiv.vue";
 export { default as JsvVideo } from "./JsvVideo.vue";
+export { default as JsvSystemAudio } from "./JsvSystemAudio.vue";

package/utils/JsViewPlugin/JsvPlayer/version.js

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

package/utils/JsViewVueWidget/JsvApic/BrowserApic/index.js

@@ -1 +0,0 @@
-export * from "./BrowserApic.vue"