@shijiu/jsview-vue 0.9.359-alpha.0 → 0.9.422

package/utils/JsViewPlugin/JsvPlayer/JsvMediaBrowserInterface.js

@@ -0,0 +1,101 @@
+/* eslint-disable no-unused-vars */
+let methods = {
+    /**
+     * 要求终端访问指定的频道，并立即返回。对由本地设置为跳过的频道，也返回-1。
+     * 频道地址为通过 CTCSetConfig 设置的频道列表中的地址：
+     * 如频道地址为 igmp：//的组播地址，则加入组播频道，播放器开始播放组播频道，并处理相应的时移等功能；
+     * 如频道地址为 rtsp：//的单播地址，则连接单播频道，播放器开始播放；
+     * 如频道地址为 http：//的地址，则浏览器直接发起请求，访问该页面。
+     * 【注】：在加入一个频道之前已经加入另外一个频道，需先调用 leaveChannel 方法离开前一个频道。
+     * @param {int} channelID 用户频道号。
+     * @returns {int} 0，表示成功；-1：表示频道号无效。
+     */
+    joinChannel(channelID) {
+        console.log(`PC simulate browser player joinChannel(${channelID})`);
+    },
+
+    /**
+     * 要求终端离开指定的频道，并立即返回。
+     * 如原频道地址为 igmp：//的组播地址，则立即离开组播频道，播放器停止播放组播频道，并断开相应的时移连接；
+     * 如频道地址为 rtsp：//的单播地址，则断开单播频道，播放器停止播放；
+     * 如频道地址为 http：//的地址，则浏览器不作操作。
+     * 【注】：本方法只用于离开通过 joinChannel 方法加入的频道。
+     * @returns {int} 0，表示成功；-1：表示频道号无效。
+     */
+    leaveChannel() {
+        console.log(`PC simulate browser player leaveChannel()`);
+        return 0;
+    },
+
+    // /**
+    //  * 快进。
+    //  * @param {float} speed 2至32
+    //  */
+    // fastForward(value) {
+    //     console.log(`browser player fastForward(${value})`);
+    // },
+
+    // /**
+    //  * 快退。
+    //  * @param {float} speed -2至-32
+    //  */
+    // fastRewind(value) {
+    //     console.log(`browser player fastRewind(${value})`);
+    // },
+
+    /**
+     * 获取系统音量。
+     * @param {int} max_volume 音量范围，即可设置的最大音量值，一般有16和100两种值。
+     * @return {int} 当前音量，根据max_volume进行了换算。
+     * */
+    getGlobalVolume(max_volume) {
+        console.log(`PC simulate browser player getGlobalVolume(${max_volume})`);
+        return 0;
+    },
+
+    /**
+     * 设置系统音量。
+     * @param {int} volume 0-max_volume，音量值。
+     * @param {int} flags 1表示显示音量调节UI；4表示使用提示音。两个值可以是或的关系。
+     * @param {int} max_volume 音量范围，即可设置的最大音量值，一般有16和100两种值。
+     * */
+    setGlobalVolume(volume, flags, max_volume) {
+        console.log(`PC simulate browser player setGlobalVolume(${volume}, ${flags}, ${max_volume})`);
+    },
+
+    /**
+     * 调整系统音量，一次设置一个步长。
+     * @param {int} direction 1增大音量；-1减小音量。
+     * @param {int} flags FLAG_SHOW_UI(1)表示显示音量调节UI；FLAG_PLAY_SOUND(4)表示使用提示音。两个值可以是或的关系。
+     * */
+    adjustGlobalVolume(direction, flags) {
+        console.log(`PC simulate browser player adjustGlobalVolume(${direction}, ${flags})`);
+    },
+
+    /**
+     * 回到视频的开头。
+     */
+    gotoStart() {
+        console.log(`PC simulate browser player gotoStart()`);
+    },
+
+    /**
+     * 到达视频的末尾。
+     */
+    gotoEnd() {
+        console.log(`PC simulate browser player gotoEnd()`);
+    },
+
+    /**
+     * 设置播放地址。
+     * @param {string} url 播放地址。
+     * @param {string} head 网络请求的head信息，可以为NULL。
+     * @param {int} type 类型，1表示点播，2表示直播，3表示时移，默认1。
+     */
+    setSrc(url, head, type) {
+        console.log(`PC simulate setSrc url=${url} head=${head} type=${type}`);
+        this.src = url;
+    },
+}
+
+export default methods;

package/utils/JsViewPlugin/JsvPlayer/JsvPlayer.vue

@@ -1,60 +1,185 @@
 <script>
-import { ref } from 'vue'
-import { Options, Vue } from "vue-class-component";
-import {JsvMediaVideo} from './JsvMedia'
+import {JsvMediaVideo, findMediaObjectByKey} from './JsvMedia'
 import JsvNativeSharedDiv from 'jsview/utils/JsViewVueWidget/JsvNativeSharedDiv.vue'
 
-@Options({
-  props: {
-    onRef: { type: Function, default: () => {} },
-    autoplay: { type: String, default: undefined },
-	playerKey: { type: String, default: "JsvPlayer"},
-	playerType: {type: Number, default: 1},
-	background: {type: Boolean, default: true},
-	src: {type: String, default: ""},
-	currentTime: { type: Number, default: 0},
-	onEnded: {type: Function, default: ()=>{return{}}},
-	onError: {type: Function, default: ()=>{return{}}},
-	onAbort: {type: Function, default: ()=>{return{}}},
-	onTimeUpdate: {type: Function, default: ()=>{return{}}},
-	onLoadStart: {type: Function, default: ()=>{return{}}},
-	onCanPlayThrough: {type: Function, default: ()=>{return{}}},
-	onProgress: {type: Function, default: ()=>{return{}}},
-	onLoadedMetaData: {type: Function, default: ()=>{return{}}},
-	onLoad: {type: Function, default: ()=>{return{}}},
-	onDurationChange: {type: Function, default: ()=>{return{}}},
-	onSeeking: {type: Function, default: ()=>{return{}}},
-	onSeeked: {type: Function, default: ()=>{return{}}},
-	onStalled: {type: Function, default: ()=>{return{}}},
-	onPlaying: {type: Function, default: ()=>{return{}}},
-	onCanPlay: {type: Function, default: ()=>{return{}}},
-	onAudioFocusLoss: {type: Function, default: ()=>{return{}}},
-	onAudioFocusGain: {type: Function, default: ()=>{return{}}},
-	style: {type: Object, default: ()=>{return{}}},
-
-  },
-  components: {
-    JsvNativeSharedDiv
-  }
-})
-class JsvPlayer extends Vue {
-  constructor(props) {
-    super(props);
-	this.video = ref(null);
-	this.holeId = ref("");
-	this.getHoleId = this.getHoleId.bind(this);
-	this.holeStyle = {};
-  }
-
-  getHoleId(id){
-	console.log("getHoleId:", id)
-	this.holeId = id;
-  }
-
-  mounted() {
-        console.log("JsvPlayer:",this.style)
+
+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},
+		/**
+		 * 属性，int类型，底层使用的播放器类型。1：系统播放器；2:jsv播放器。默认2。
+		 */
+		playerType: {type: Number, default: 2},
+		/**
+		 * 属性，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: false},
+		/**
+		 * 回调函数，播放结束时通过此回调接口通知。
+		 */
+		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{}}},
+		/**
+		 * 属性，Object类型，设置窗口属性，同其他组件的style设置。
+		 */
+		style: {type: Object, default: ()=>{return{}}},
+		/**
+		 * 属性，Boolean类型，活跃状态，当多个JsvPlayer组件指向一个video对象时，只能有一个处于活跃状态。
+		 * 视频显示在活跃JsvPlayer设置的显示区域内，事件通知也只会送给活跃的JsvPlayer组件注册的回调函数。
+		 */
+		active:{type: Boolean, default: true},
+	},
+	components: {
+		JsvNativeSharedDiv
+	},
+	watch: {
+		active(newValue) {
+			console.log("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){
+			console.log("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){
+			console.log("keepLastFrame newValue: "+newValue);
+			if(this.video && this.active){
+				this.video.keepLastFrame = this.keepLastFrame;
+			}
+		}
+	},
+
+	setup(){
+		return {
+			video: null,
+			holeId: "",
+		};
+	},
+
+	data() {
+		return {
+			holeStyle: {},
+		};
+	},
+	created() {
+	},
+	mounted() {
+		console.log("JsvPlayer:",this.style)
           
-		let key = "JsvVideo";
+		let key = "Jsv_" + Math.floor(Math.random() * 10000);
 		if(this.playerKey){
 			key = this.playerKey;
 		}
@@ -69,64 +194,109 @@ class JsvPlayer extends Vue {
 			background = this.background;
 
 		console.log("JsvPlayer background:"+background)
-		//background = false;
 
 		const designMap = window.Forge.DesignMap();
 		console.log("JsvPlayer:", this.holeId)
 
-		this.video = new JsvMediaVideo(this.holeId, player_type, key, background, designMap.width);
+		this.video = findMediaObjectByKey(key);
+		let first_create = true;
 
+		if(!this.video){
+			this.video = new JsvMediaVideo(this.holeId, player_type, key, background, designMap.width);
+		}else{
+			this.video.setRef();
+			first_create = false;
+		}
 
 		if(this.video != null){
-			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", () => {
-				console.log("JsvPlayer received loadstart event.");
-				this.holeStyle = {
-					left: this.style.left, top: this.style.top,
-				 	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);
-
-			if(this.src && this.src !== "")
-				this.video.src = this.src;
-			
-			if(this.currenttime !== 0)
-				this.video.currentTime = this.currenttime;
-
-			if(typeof this.onRef != "undefined" && this.onRef){
-				this.onRef(this.video);
+			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;
+					}
+				}else{
+					this.video.setHoleID(this.holeId);
+					this.holeStyle = {
+						left: 0, top: 0,
+						width: this.style.width, height: this.style.height
+					};
+				}
 			}
+
+			this.onRef?.(this.video)
 		}
-	}
+	},
 
 	unmounted(){
 		if(this.video != null){
 			this.video.releasePlayer();
+			this.onRef?.(null)
+		}
+	},
+
+	methods: {
+		getHoleId(id){
+			console.log("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", () => {
+					console.log("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);
+			}
 		}
-	}
+	},
 }
 
-export default JsvPlayer;
+//export default JsvPlayer;
 </script>
 
 <template>
-  <JsvNativeSharedDiv :style="holeStyle" :getId="getHoleId"></JsvNativeSharedDiv>
+  <div :style="style" backgroundColor="rgba(0,0,0,1)">
+    <JsvNativeSharedDiv :style="holeStyle" :getId="getHoleId"></JsvNativeSharedDiv>
+  </div>
 </template>
 
 <style scoped>

package/utils/JsViewPlugin/JsvPlayer/JsvPlayerBrowser.vue

@@ -0,0 +1,40 @@
+<script>
+import playerExMethods from "./JsvMediaBrowserInterface.js"
+
+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 模拟时，不对接本功能
+  },
+  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标签卸载处理
+        }
+
+        // 将修改好的video回调返回给使用者
+        if (this.onRef) {
+            this.onRef(video_ref);
+        }
+    }  
+  },
+  mounted() {
+
+  }
+};
+
+</script>
+
+<template>
+  <video :ref="onRefProxy" v-bind="$attrs"/>
+</template>
+
+<style scoped>
+</style>

package/utils/JsViewPlugin/JsvPlayer/index.js

@@ -0,0 +1,27 @@
+//考虑到.vue文件除了export default的component外，还有可能export其他对象,因此使用import * as
+import * as JsvPlayer from "./JsvPlayer.vue";
+import { globalLoadJsvPlayerPlugin as initPlugin } from "./JsvMedia.js"
+import { getJsvPlayerCapabilitySet as getCapabilitySet } from "./JsvMedia.js"
+let _JsvPlayer = JsvPlayer;
+
+let globalLoadJsvPlayerPlugin = initPlugin;
+let getJsvPlayerCapabilitySet = getCapabilitySet;
+if (window.JsvWidgetWrapperGroup?.BrowserJsvPlayer) {
+    // 浏览器版本
+    _JsvPlayer = window.JsvWidgetWrapperGroup.BrowserJsvPlayer;
+
+    // 为Browser重新定义初始化处理
+    globalLoadJsvPlayerPlugin = (listener) => {
+        console.log("Loading player plugin");
+        setTimeout(()=>{listener()}, 0);
+    }
+}
+
+let component = _JsvPlayer.default;
+
+export default component;
+export {
+    globalLoadJsvPlayerPlugin, // 全局初始化播放器插件处理
+    getJsvPlayerCapabilitySet, //获取设备能力集
+
+}

package/utils/JsViewVueWidget/BrowserDebugWidget/BrowserTextureAnim.vue

@@ -2,7 +2,7 @@
  * @Author: ChenChanghua
  * @Date: 2022-02-08 09:29:17
  * @LastEditors: ChenChanghua
- * @LastEditTime: 2022-02-21 10:25:16
+ * @LastEditTime: 2022-03-08 14:08:39
  * @Description: file content
 -->
 <script>
@@ -55,7 +55,6 @@ export default {
   methods: {
     start() {
       if (this.animDiv && this.animation) {
-        console.log("cchtest anim set", this.animSet);
         this.animDiv.style.animation = this.animSet;
       }
     },

package/utils/JsViewVueWidget/JsvMarquee.vue

@@ -44,7 +44,6 @@ export default {
     },
     fontStyles: {
       type: [Array, Object],
-      default: () => [sDefaultFontStyle],
     },
     styleToken: String,
     slideSpeed: {
@@ -56,6 +55,9 @@ export default {
       type: Boolean,
       default: false,
     },
+    className: {
+      type: String,
+    },
   },
   data() {
     return {
@@ -69,6 +71,11 @@ export default {
     };
   },
   setup() {},
+  computed: {
+    _className() {
+      return this.FontStyleClass ? this.FontStyleClass : this.className;
+    },
+  },
   methods: {
     _asyncStartSlider() {
       // 清理之前的Slider处理
@@ -185,10 +192,10 @@ export default {
           this.FontStyleClass = font_set.combinedClass;
         }
 
-        if (this.FontStyleClass.length === 0) {
+        if (this.FontStyleClass && this.FontStyleClass.length === 0) {
           this.FontStyleClass = null;
         }
-        this.TokenProcessed = this.$props.styleToken;
+        this.TokenProcessed = this.styleToken;
       }
     },
   },
@@ -210,23 +217,24 @@ export default {
 </script>
 
 <template>
-  <div :style="{ ...this.LayoutStyle, overflow: 'hidden' }">
+  <div :style="{ ...LayoutStyle, overflow: 'hidden' }">
     <div
       ref="sliderRef"
       :style="{
         left: 0,
         top: 0,
-        width: this.LayoutStyle.width,
-        height: this.LayoutStyle.height,
+        width: LayoutStyle.width,
+        height: LayoutStyle.height,
       }"
     >
       <div
         ref="textRef"
-        :className="this.FontStyleClass"
-        :style="{ ...this.FontStyle, height: this.LayoutStyle.height }"
-        :jsv_text_align_minwidth="this.LayoutStyle.width"
+        :className="_className"
+        :style="{ ...FontStyle, height: LayoutStyle.height }"
+        :jsv_text_align_minwidth="LayoutStyle.width"
+        jsv-inherit-class="2"
       >
-        {{ this.$props.text }}
+        {{ text }}
       </div>
     </div>
   </div>

package/utils/JsViewVueWidget/JsvMaskClipDiv.vue

@@ -97,7 +97,7 @@ export default {
       // 注意translate需要px单位，虽然移动的数值单位不是px，但是由于transform只接受px，所以作为workaround加上px
       this.innerView.ResetTextureCssTransform(
         `scale3d(${scale_width},${scale_height},1) ` +
-          `translate3d(${move_x}px,${move_y}px,0)`,
+          `translate3d(${move_x}px,-${move_y}px,0)`,
         "left top"
       );
 
@@ -154,8 +154,8 @@ export default {
 
       // 更新描画区域宽高
       this.innerView.ResetLayoutParams({
-        width: this._StyleDetail.width,
-        height: this._StyleDetail.height,
+        width: this.style.width,
+        height: this.style.height,
       });
 
       // 更新裁剪后的显示子区域