Merge branch 'ww' into 'main'

feat: implement play streaming video

See merge request huang/thingskit-app!71

-<template>
-	<view class="camera-page">
-		<!-- 公共组件-每个页面必须引入 -->
-		<public-module></public-module>
-		<view class="org-sty">
-			<view @click="openOrg" class="org-item">
-				<view class="u-flex org-contact"><text class="text">组织关系</text></view>
-				<view @click="openOrg" class="u-flex org-device">
-					<image class="device-image" src="../../../static/org.png"></image>
-					<text class="device-text">摄像头数：{{ cameraTotal }}</text>
-				</view>
-			</view>
-			<view @click="openOrg" class="org-item"><image class="image" src="../../../static/arrow-right.png"></image></view>
-		</view>
-		<view style="height: 150rpx;"></view>
-		<!-- 自带分页组件 -->
-		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback" @up="upCallback">
-			<view class="camera-container">
-				<view class="container-item">
-					<view v-for="(item, index) in list" :key="index" class="item">
-						<video
-							:data-id="item.id"
-							:key="item.id"
-							:id="'video' + item.id"
-							class="video"
-							:src="item.videoUrl"
-							controls
-							:title="item.name"
-							x5-video-player-type="h5"
-							x5-video-orientation="portraint"
-							show-mute-btn
-							:poster="item.avatar"
-							@play="playVideo"
-						></video>
-						<view class="bottom-text">
-							<text class="text">{{ item.name }}</text>
-						</view>
-					</view>
-				</view>
-			</view>
-		</mescroll-body>
-		<!-- 自带分页组件 -->
-		<view style="height: 60rpx;"></view>
-	</view>
-</template>
-
-<script>
-import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
-
-export default {
-	mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
-	data() {
-		return {
-			page: {
-				num: 0,
-				size: 10
-			},
-			downOption: {
-				auto: true //是否在初始化后,自动执行downCallback; 默认true
-			},
-			upOption: {
-				auto: false // 不自动加载
-			},
-			current: 0,
-			cameraTotal: 0,
-			list: [],
-			ordId: ''
-		};
-	},
-	onShow() {
-		if (this.ordId == '') {
-		} else {
-			this.loadData(1, this.ordId);
-		}
-	},
-	onHide() {
-		this.ordId = '';
-		this.loadData(1, null);
-	},
-	onLoad() {
-		// 隐藏原生的tabbar
-		uni.hideTabBar();
-	},
-	methods: {
-		/*下拉刷新的回调 */
-		downCallback() {
-			//联网加载数据
-			this.page.num = 1;
-			this.loadData(1);
-		},
-		/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
-		upCallback() {
-			//联网加载数据
-			this.page.num += 1;
-			this.loadData(this.page.num);
-		},
-		loadData(pageNo, organizationV) {
-			let httpData = {
-				page: pageNo,
-				pageSize: 10,
-				organizationId: organizationV
-			};
-			uni.$u.http
-				.get('/yt/video', { params: httpData, custom: { load: false } })
-				.then(res => {
-					uni.stopPullDownRefresh();
-					this.mescroll.endByPage(res.items.length, res.total);
-					this.cameraTotal = res.total;
-					if (pageNo == 1) {
-						this.list = res.items;
-					} else {
-						this.list = this.list.concat(res.items);
-					}
-				})
-				.catch(e => {
-					//联网失败, 结束加载
-					this.mescroll.endErr();
-				});
-		},
-		hideImageUrl(item, index) {
-			this.current = index;
-		},
-		playVideo(e) {
-			/**
-			 * 点击全屏播放当前视频，暂停其余视频
-			 * 兼容APP和MP端
-			 */
-			let currentId = 'video' + e.currentTarget.dataset.id;
-			this.videoContent = uni.createVideoContext(currentId, this);
-			this.videoContent.requestFullScreen();
-			// 获取视频列表
-			let trailer = this.list;
-			trailer.forEach((item, index) => {
-				if (item.videoUrl != null && item.videoUrl != '') {
-					let temp = 'video' + item.id;
-					if (temp != currentId) {
-						//暂停不是当前的视频
-						uni.createVideoContext(temp, this).pause();
-					}
-				}
-			});
-		},
-		openOrg() {
-			uni.navigateTo({
-				url: './org/org'
-			});
-		}
-	}
-};
-</script>
-
-<style lang="scss" scoped>
-@import '../static/camera.scss';
+<template>
+	<view class="camera-page">
+		<!-- 公共组件-每个页面必须引入 -->
+		<public-module></public-module>
+		<view class="org-sty">
+			<view @click="openOrg" class="org-item">
+				<view class="u-flex org-contact"><text class="text">组织关系</text></view>
+				<view @click="openOrg" class="u-flex org-device">
+					<image class="device-image" src="../../../static/org.png"></image>
+					<text class="device-text">摄像头数：{{ cameraTotal }}</text>
+				</view>
+			</view>
+			<view @click="openOrg" class="org-item">
+				<image class="image" src="../../../static/arrow-right.png"></image>
+			</view>
+		</view>
+		<view style="height: 150rpx;"></view>
+		<!-- 自带分页组件 -->
+		<mescroll-body ref="mescrollRef" :up="upOption" @init="mescrollInit" :down="downOption" @down="downCallback"
+			@up="upCallback">
+			<view class="camera-container">
+				<view class="container-item">
+					<view v-for="(item, index) in list" :key="item.id" class="item">
+						<video :data-id="item.id" :data-accessMode="item.accessMode" :key="item.id" preload="none"
+							:id="'video' + item.id" class="video" :src="item.videoUrl || commonVideoUrl" controls
+							:title="item.name" x5-video-player-type="h5" x5-video-orientation="portraint" show-mute-btn
+							:poster="item.avatar" @play="playVideo"></video>
+						<view class="bottom-text">
+							<text class="text">{{ item.name }}</text>
+						</view>
+					</view>
+				</view>
+			</view>
+		</mescroll-body>
+		<!-- 自带分页组件 -->
+		<view style="height: 60rpx;"></view>
+	</view>
+</template>
+
+<script>
+	import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
+
+	export default {
+		mixins: [MescrollMixin], // 使用mixin (在main.js注册全局组件)
+		data() {
+			return {
+				page: {
+					num: 0,
+					size: 10
+				},
+				downOption: {
+					auto: true //是否在初始化后,自动执行downCallback; 默认true
+				},
+				upOption: {
+					auto: false // 不自动加载
+				},
+				current: 0,
+				cameraTotal: 0,
+				list: [],
+				ordId: '',
+				commonVideoUrl: 'http://playertest.longtailvideo.com/adaptive/bipbop/gear4/prog_index.m3u8'
+			};
+		},
+		onShow() {
+			if (this.ordId == '') {} else {
+				this.loadData(1, this.ordId);
+			}
+		},
+		onHide() {
+			this.ordId = '';
+			this.loadData(1, null);
+		},
+		onLoad() {
+			// 隐藏原生的tabbar
+			uni.hideTabBar();
+		},
+		methods: {
+			/*下拉刷新的回调 */
+			downCallback() {
+				//联网加载数据
+				this.page.num = 1;
+				this.loadData(1);
+			},
+			/*上拉加载的回调: 其中page.num:当前页 从1开始, page.size:每页数据条数,默认10 */
+			upCallback() {
+				//联网加载数据
+				this.page.num += 1;
+				this.loadData(this.page.num);
+			},
+			loadData(pageNo, organizationV) {
+				let httpData = {
+					page: pageNo,
+					pageSize: 10,
+					organizationId: organizationV
+				};
+				uni.$u.http
+					.get('/yt/video', {
+						params: httpData,
+						custom: {
+							load: false
+						}
+					})
+					.then(res => {
+						uni.stopPullDownRefresh();
+						this.mescroll.endByPage(res.items.length, res.total);
+						this.cameraTotal = res.total;
+						if (pageNo == 1) {
+							this.list = res.items;
+						} else {
+							this.list = this.list.concat(res.items);
+						}
+					})
+					.catch(e => {
+						//联网失败, 结束加载
+						this.mescroll.endErr();
+					});
+			},
+			hideImageUrl(item, index) {
+				this.current = index;
+			},
+			playVideo(e) {
+				const {
+					currentTarget: {
+						dataset: {
+							accessmode,
+							id
+						}
+					} = {}
+				} = e
+				const isExistVideoUrl = this.list.find(item => item.id == id).videoUrl
+				if (accessmode === 1 && !isExistVideoUrl) {
+					uni.$u.http.get(`/yt/video/url/${id}`)
+						.then(res => {
+							const {
+								data: {
+									url
+								} = {}
+							} = res
+							const index = this.list.findIndex(item => item.id === id)
+							if (~index && url) {
+								this.list.splice(index, 1, {
+									...this.list[index],
+									videoUrl: url
+								})
+								this.$nextTick(() => {
+									let currentId = 'video' + id;
+									const videoContext = uni.createVideoContext(currentId, this);
+									videoContext.play()
+								})
+							}
+						})
+				}
+
+				/**
+				 * 点击全屏播放当前视频，暂停其余视频
+				 * 兼容APP和MP端
+				 */
+				let currentId = 'video' + id;
+				this.videoContent = uni.createVideoContext(currentId, this);
+				this.videoContent.requestFullScreen();
+				// 获取视频列表
+				let trailer = this.list;
+				trailer.forEach((item, index) => {
+					if (item.videoUrl != null && item.videoUrl != '') {
+						let temp = 'video' + item.id;
+						if (temp != currentId) {
+							//暂停不是当前的视频
+							uni.createVideoContext(temp, this).pause();
+						}
+					}
+				});
+			},
+			openOrg() {
+				uni.navigateTo({
+					url: './org/org'
+				});
+			}
+		}
+	};
+</script>
+
+<style lang="scss" scoped>
+	@import '../static/camera.scss';
 </style>