@shijiu/jsview-vue 2.0.1021 → 2.0.1073

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("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);
-      }
-    },
-  },
-};
+onBeforeUnmount(() => {
+  if (audio != null) {
+    audio.release();
+    props.onRef?.(null);
+  }
+});
 </script>
 
 <template>

package/utils/JsViewPlugin/JsvAudio/JsvAudioBrowser.vue

@@ -1,7 +1,11 @@
 <script>
 // import playerExMethods from "./JsvMediaBrowserInterface.js"
+import JsvSystemAudio from '../../JsViewVueWidget/JsvSystemAudio.vue';
 
 export default {
+  components: {
+    JsvSystemAudio,
+  },
   props: {
     onRef: { type: Function, default: () => {} },
   },
@@ -11,8 +15,8 @@ export default {
     };
   },
   methods: {
-    onRefProxy(video_ref) {
-      this.audioRef = video_ref;
+    onRefProxy(audio_ref) {
+      this.audioRef = audio_ref;
 
       // 不在此直接回调 onRef，因为onRefProxy可能会因为 .src的设置导致重新触发一次调用(vue本身问题)
       // 参照vue-core处理的 componentUpdateFn处理, onMounted 一次, src设置后会再次 onPatch 一次
@@ -20,21 +24,21 @@ export default {
   },
   mounted() {
     if (this.audioRef && this.onRef) {
-      let video_ref = this.audioRef;
+      let audio_ref = this.audioRef;
       this.audioRef = null;
 
       // 补充插件扩展出来的接口
       // for (let method_name in playerExMethods) {
-      //     video_ref[method_name] = playerExMethods[method_name].bind(video_ref);
+      //     audio_ref[method_name] = playerExMethods[method_name].bind(audio_ref);
       // }
 
       // 将修改好的video回调返回给使用者
-      this.onRef(video_ref);
+      this.onRef(audio_ref);
     }
   },
   beforeUnmount() {
     if (this.onRef) {
-      // video_ref为null，代表video标签卸载处理
+      // audio_ref为null，代表video标签卸载处理
       this.onRef(null);
     }
   },
@@ -42,5 +46,5 @@ export default {
 </script>
 
 <template>
-  <audio :ref="onRefProxy" v-bind="$attrs" />
+  <jsv-system-audio :onRef="onRefProxy" v-bind="$attrs" />
 </template>

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"){