@shijiu/jsview-vue 0.9.684 → 0.9.783

package/utils/JsViewPlugin/JsvAudio/AudioProxy.js

@@ -0,0 +1,302 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-22 15:43:56
+ * @Description: file content
+ */
+import JsvAudioBridgeProxy from "./JsvAudioBridgeProxy";
+import { checkType, toRawType } from "./CheckType";
+import sPluginLoader from "./PluginLoader";
+import Events from "./Events.js"
+
+const TAG = "JsvAudio";
+
+class AudioManager {
+  constructor() {
+    this.audioMap = {};
+    sPluginLoader.registerOnDoneListener(this.onPluginLoadDone.bind(this));
+  }
+
+  createAudio(id) {
+    if (!Object.hasOwn(this.audioMap, id)) {
+      this.audioMap[id] = new AudioProxy(id, this);
+    } else {
+      this.audioMap[id].ref()
+    }
+
+    if (!JsvAudioBridgeProxy.isReady()) {
+      sPluginLoader.loadPlugin();
+    } else {
+      this.audioMap[id].buildPlatformInstance();
+    }
+    return this.audioMap[id]
+  }
+
+  releaseAudio(id) {
+    delete this.audioMap[id];
+  }
+
+  onPluginLoadDone(status) {
+    for (let id in this.audioMap) {
+      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 },
+  "paused": { type: Boolean },
+  "autoplay": { type: Boolean },
+  "volume": { type: Number },
+  "muted": { type: Boolean },
+  "loop": { type: Boolean },
+  "enablePlayer": { type: Boolean },
+}
+
+class AudioProxy {
+  constructor(id, audioManager) {
+    this._onEvent = this.onEvent.bind(this);
+    this._playerId = id;
+    this._ref = 1;
+    this._audioManager = audioManager;
+    this._created = false;
+    this._eventListener = {};
+    this._propCache = {};
+  }
+
+  /** 初始化函数, 外部不应该调用 */
+  buildPlatformInstance() {
+    console.log("buildPlatformInstance, key=" + this._playerId);
+    if (!JsvAudioBridgeProxy.isReady()) {
+      console.error("no jsvAudioBridge");
+      return;
+    }
+    let result = JsvAudioBridgeProxy.CreateAudio(this._playerId, "top.CreatePlayerResult");
+    console.log("JsvAudio CreateAudio result ", result);
+    if (result > 0) {
+      this.initPlayer();
+    }
+  }
+
+  initPlayer() {
+    if (this._created) return;
+
+    console.log("InitPlayer:1, key=" + this._playerId);
+    this._created = true;
+
+    window.JMD.subscribe(this._playerId, this._onEvent);
+    this.initParams();
+  }
+
+  initParams() {
+    if (this._propCache["src"]) {
+      this.setProperty("src", this._propCache["src"]);
+    }
+
+    if (this._propCache["paused"] == false) {
+      this.setProperty("paused", this._propCache["paused"]);
+    }
+
+    if (this._propCache["autoplay"]) {
+      this.setProperty("autoplay", this._propCache["autoplay"]);
+    }
+
+    if (this._propCache["loop"]) {
+      this.setProperty("loop", this._propCache["loop"]);
+    }
+
+    if (this._propCache["muted"]) {
+      this.setProperty("muted", this._propCache["muted"]);
+    }
+  }
+  /*******/
+
+  /** events */
+  addEventListener(type, listener) {
+    if (listener) {
+      this._eventListener['on' + type] = listener;
+    }
+  }
+
+  callEventListener(name, ...params) {
+    this._eventListener[name]?.(...params);
+  }
+
+  onEvent(eventStr) {
+    console.log("player event: ", eventStr);
+    let obj = JSON.parse(eventStr);
+    let event_obj = JSON.parse(obj.param);
+    let event = event_obj.event;
+    let data = event_obj.data;
+    switch (event) {
+      case Events.EVENT_END:
+        this.setProperty("paused", true);
+        this.callEventListener("onend");
+        break;
+      case Events.EVENT_LOAD_START:
+        this.callEventListener("onloadstart");
+        break;
+      case Events.EVENT_LOAD:
+        this.callEventListener("onloadedmetadata");
+        this.callEventListener("onload");
+        this.callEventListener("ondurationchange");
+        break;
+      case Events.EVENT_ERROR:
+        const Error = {
+          MEDIA_ERR_ABORTED: 1,
+          MEDIA_ERR_NETWORK: 2,
+          MEDIA_ERR_DECODE: 3,
+          MEDIA_ERR_SRC_NOT_SUPPORTED: 4,
+          MEDIA_ERR_NO_DECODE_RESOURCE: 6,
+        };
+        const platform_error = data.error.what;
+        let e = Error.MEDIA_ERR_ABORTED;
+        switch (platform_error) {
+          case -1004: // MediaPlayer.MEDIA_ERROR_IO
+            e = Error.MEDIA_ERR_NETWORK;
+            break;
+          case -1007: // MediaPlayer.MEDIA_ERROR_MALFORMED
+            e = Error.MEDIA_ERR_DECODE;
+            break;
+          case -1010: // MediaPlayer.MEDIA_ERROR_UNSUPPORTED
+            e = Error.MEDIA_ERR_SRC_NOT_SUPPORTED;
+            break;
+          case -50002:
+            e = Error.MEDIA_ERR_NO_DECODE_RESOURCE;
+            break;
+          default:
+            break;
+        }
+        this.callEventListener("onerror", e);
+        break;
+      case Events.EVENT_EXT:
+        switch (data.eventExt) {
+          case "videoMetadataUpdate":
+            this.callEventListener("onloadedmetadata");
+            break;
+          default:
+            logWarning("unimplentation event ext type = " + data.eventExt);
+            break;
+        }
+        break;
+      default:
+        break;
+    }
+  }
+
+
+  /** control */
+  load() {
+    this.setProperty("enablePlayer", true);
+  }
+
+  play() {
+    this.setProperty("paused", false);
+  }
+
+  pause() {
+    this.setProperty("paused", true);
+  }
+
+  unload() {
+    this.pause();
+    this.setProperty("enablePlayer", false);
+  }
+
+  /** audio props */
+  /** src 不支持get */
+  set src(value) {
+    this.setSrc(value, null)
+  }
+
+  /** volume */
+  set volume(value) { this.setProperty("volume", value); }
+
+  get volume() { return this.getProperty("volume"); }
+
+  /** muted */
+  set muted(value) { this.setProperty("muted", value); }
+
+  get muted() { return this.getProperty("muted"); }
+
+  /** loop 不支持 get*/
+  set loop(value) { this.setProperty("loop", value); }
+
+  /** paused 不支持 set */
+  get paused() { return this.getProperty("paused"); }
+
+  /** autoplay 不支持 get */
+  set autoplay(value) { this.setProperty("autoplay", value); }
+
+  /** duration 不支持 set */
+  get duration() { return this.getProperty("duration"); }
+
+  /** current 目前不支持时移, 只能get */
+  get currentTime() { return this.getProperty("currentTime"); }
+
+  setSrc(url, head) {
+    const param = {
+      url: url,
+      head: JSON.stringify(head),
+    };
+    this.setProperty("src", param);
+  }
+
+  setProperty(key, value) {
+    if (AUDIO_PROPS.hasOwnProperty(key)) {
+      if (checkType(value, AUDIO_PROPS[key].type)) {
+        console.log(TAG, "setProperty", key, value)
+        this._propCache[key] = value;
+
+        if (this._created) {
+          const param = { [key]: value };
+          JsvAudioBridgeProxy.SetProperty(this._playerId, JSON.stringify(param));
+        }
+      } else {
+        console.error(TAG, `Invalid prop: type check failed for prop "${key}". Expected ${toRawType(AUDIO_PROPS[key].type)}, got ${toRawType(value)} with value ${value}.`);
+      }
+    } else {
+      console.error(TAG, `property ${key} not supported`);
+    }
+  }
+
+  getProperty(key) {
+    if (this._created) {
+      const jsonStr = JsvAudioBridgeProxy.GetProperty(this._playerId, key);
+      if (jsonStr) {
+        const obj = JSON.parse(jsonStr);
+        return obj[key];
+      }
+    }
+    return null;
+  }
+
+  ref() {
+    this._ref++;
+    console.log("JsvAudio ref up", this._ref);
+  }
+
+  release() {
+    this._ref--;
+    console.log("JsvAudio release", this._ref);
+    if (this._ref === 0) {
+      window.JMD.unsubscribe(this._playerId, this._onEvent);
+      JsvAudioBridgeProxy.ReleasePlayer(this._playerId);
+      this._audioManager.releaseAudio(this._playerId);
+    }
+  }
+}
+
+export { sAudioManager };

package/utils/JsViewPlugin/JsvAudio/CheckType.js

@@ -0,0 +1,68 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-23 10:40:16
+ * @Description: file content
+ */
+
+const isArray = Array.isArray;
+const isMap = (val) => Object.prototype.toString.call(val) === '[object Map]';
+const isSet = (val) => Object.prototype.toString.call(val) === '[object Set]';
+const isDate = (val) => Object.prototype.toString.call(val) === '[object Date]';
+const isFunction = (val) => typeof val === 'function';
+const isString = (val) => typeof val === 'string';
+const isSymbol = (val) => typeof val === 'symbol';
+const isObject = (val) => val !== null && typeof val === 'object';
+
+function getType(ctor) {
+  const match = ctor && ctor.toString().match(/^\s*function (\w+)/);
+  return match ? match[1] : ctor === null ? 'null' : '';
+}
+
+const objectToString = Object.prototype.toString;
+
+const toTypeString = (value) => objectToString.call(value);
+
+const toRawType = (value) => {
+  // extract "RawType" from strings like "[object RawType]"
+  return toTypeString(value).slice(8, -1);
+};
+
+function makeMap(str, expectsLowerCase) {
+  const map = Object.create(null);
+  const list = str.split(',');
+  for (let i = 0; i < list.length; i++) {
+      map[list[i]] = true;
+  }
+  return expectsLowerCase ? val => !!map[val.toLowerCase()] : val => !!map[val];
+}
+
+const isSimpleType = /*#__PURE__*/ makeMap('String,Number,Boolean,Function,Symbol,BigInt');
+
+function checkType(value, type) {
+  if (typeof type === "undefined" || type === null) { return true;}
+  let valid;
+  const expectedType = getType(type);
+  if (isSimpleType(expectedType)) {
+      const t = typeof value;
+      valid = t === expectedType.toLowerCase();
+      // for primitive wrapper objects
+      if (!valid && t === 'object') {
+          valid = value instanceof type;
+      }
+  }
+  else if (expectedType === 'Object') {
+      valid = isObject(value);
+  }
+  else if (expectedType === 'Array') {
+      valid = isArray(value);
+  }
+  else if (expectedType === 'null') {
+      valid = value === null;
+  }
+  else {
+      valid = value instanceof type;
+  }
+  return valid;
+}
+
+export { checkType, toRawType }

package/utils/JsViewPlugin/JsvAudio/Events.js

@@ -0,0 +1,17 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-28 17:56:47
+ * @Description: file content
+ */
+export default {
+  EVENT_EXT: "onEventExt", // QCode Modify
+  EVENT_LOAD_START: "onLoadStart",
+  EVENT_LOAD: "onLoad",
+  EVENT_ERROR: "onError",
+  EVENT_PROGRESS: "onProgress",
+  EVENT_END: "onEnd",
+  EVENT_PAUSE: "onPause",
+  EVENT_PLAY: "onPlay",
+  EVENT_AUDIO_FOCUS_GAIN: "onAudioFocusGain",
+  EVENT_AUDIO_FOCUS_LOSS: "onAudioFocusLoss",
+}

package/utils/JsViewPlugin/JsvAudio/JsvAudio.vue

@@ -0,0 +1,176 @@
+<script>
+import { sAudioManager } from "./AudioProxy.js";
+
+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 {};
+      },
+    },
+    /**
+     * 属性，Boolean类型，活跃状态
+     */
+    active: { type: Boolean, default: true },
+  },
+
+  watch: {
+    active(newValue) {
+      console.log("active newValue: " + newValue);
+      if (this.audio) {
+        if (newValue) {
+          //同key的player切换时需要切换回调
+          this.registerEvent();
+        }
+      }
+    },
+  },
+  setup() {
+    return {
+      audio: null,
+    };
+  },
+  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);
+
+    if (this.active) {
+      this.registerEvent();
+      if (this.src && this.src !== "") this.audio.src = this.src;
+
+      if (this.currentTime !== 0) this.audio.currentTime = this.currentTime;
+
+      if (this.autoplay) {
+        this.audio.autoplay = this.autoplay;
+      }
+
+      if (this.muted) {
+        this.audio.muted = this.muted;
+      }
+
+      if (this.loop) {
+        this.audio.loop = this.loop;
+      }
+    }
+
+    this.onRef?.(this.audio);
+  },
+
+  beforeUnmount() {
+    if (this.audio != null) {
+      this.audio.release();
+      this.onRef?.(null);
+    }
+  },
+
+  methods: {
+    registerEvent() {
+      if (this.audio && this.active) {
+        this.audio.addEventListener("end", this.onEnded);
+        this.audio.addEventListener("error", this.onError);
+        this.audio.addEventListener("loadstart", () => {
+          console.log("JsAudio received loadstart event.");
+          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);
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div :style="{width: 1, height: 1}" backgroundColor="rgba(0,0,0,1)"></div>
+</template>

package/utils/JsViewPlugin/JsvAudio/JsvAudioBridgeProxy.js

@@ -0,0 +1,40 @@
+/*
+ * @Author: ChenChanghua
+ * @Date: 2023-02-23 10:06:08
+ * @Description: file content
+ */
+export default class {
+  static isReady() {
+    return typeof window.jsvAudioBridge != "undefined" && !!window.jsvAudioBridge;
+  }
+  static CreateAudio(key, callback) {
+    if (typeof window.jsvAudioBridge != "undefined"
+      && typeof window.jsvAudioBridge.CreateAudio != "undefined") {
+      return window.jsvAudioBridge.CreateAudio(key, callback);
+    }
+    return -1;
+  }
+
+  static ReleasePlayer(key) {
+    if (typeof window.jsvAudioBridge != "undefined"
+      && typeof window.jsvAudioBridge.ReleasePlayer != "undefined") {
+      return window.jsvAudioBridge.ReleasePlayer(key);
+    }
+    return -1;
+  }
+
+  static GetProperty(key, name) {
+    if (typeof window.jsvAudioBridge != "undefined"
+      && typeof window.jsvAudioBridge.GetProperty != "undefined") {
+      return window.jsvAudioBridge.GetProperty(key, name);
+    }
+    return null;
+  }
+
+  static SetProperty(key, params) {
+    if (typeof window.jsvAudioBridge != "undefined"
+      && typeof window.jsvAudioBridge.SetProperty != "undefined") {
+      return window.jsvAudioBridge.SetProperty(key, params);
+    }
+  }
+}

package/utils/JsViewPlugin/JsvAudio/JsvAudioBrowser.vue

@@ -0,0 +1,46 @@
+<script>
+// import playerExMethods from "./JsvMediaBrowserInterface.js"
+
+export default {
+  props: {
+    onRef: { type: Function, default: () => {} },
+  },
+  setup() {
+    return {
+      audioRef: null,
+    };
+  },
+  methods: {
+    onRefProxy(video_ref) {
+      this.audioRef = video_ref;
+
+      // 不在此直接回调 onRef，因为onRefProxy可能会因为 .src的设置导致重新触发一次调用(vue本身问题)
+      // 参照vue-core处理的 componentUpdateFn处理, onMounted 一次, src设置后会再次 onPatch 一次
+    },
+  },
+  mounted() {
+    if (this.audioRef && this.onRef) {
+      let video_ref = this.audioRef;
+      this.audioRef = 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);
+    }
+  },
+};
+</script>
+
+<template>
+  <audio :ref="onRefProxy" v-bind="$attrs" />
+</template>