410 lines
9.6 KiB
Vue
410 lines
9.6 KiB
Vue
<template>
|
||
<uni-popup ref="PopupRef" class="popup" mask-background-color="rgba(0,0,0,.2)" @change="changeShow">
|
||
<view class="overlay-box" @click="playEnded" v-if="fileType === 'video'">
|
||
<video class="video-cont-center" :id="`video`+ fileId" ref="playerRef" v-if="fileUrlShow"
|
||
:src="fileUrlShow"
|
||
:header="{
|
||
summary: token
|
||
}"
|
||
:controls="true" @error="playError" @ended="playEnded" object-fit="contain"></video>
|
||
<!-- <IVideo class="video-cont-bottom" :id="`ivideo`+ fileId" ref="iplayerRef"
|
||
:src="fileUrlShow"
|
||
:controls="true"></IVideo> -->
|
||
</view>
|
||
<view class="overlay-box" @click="playEnded" @touchmove.stop v-if="fileType === 'image'">
|
||
<movable-area scale-area class="detail-movable">
|
||
<movable-view class="detail-movable-view" :out-of-bounds="true" direction="all" @scale="onScale" :scale="true"
|
||
scale-min="0.5" scale-max="4" :scale-value="scale">
|
||
<image class="detail-img" :src="fileUrlShow" mode="aspectFit"></image>
|
||
</movable-view>
|
||
</movable-area>
|
||
</view>
|
||
<view class="overlay-box" @click="playEnded" @touchmove.stop v-if="fileType === 'imageList'">
|
||
<swiper class="stack-swiper" :current="currentIndex" previous-margin="0" next-margin="0" :autoplay="false">
|
||
<swiper-item v-for="(item, index) in srcList" :key="index" class="swiper-item">
|
||
<movable-area scale-area class="detail-movable">
|
||
<movable-view class="detail-movable-view" :out-of-bounds="true" direction="all" @scale="onScale"
|
||
:scale="true" scale-min="0.5" scale-max="4" :scale-value="scale">
|
||
<image class="detail-img" :src="initSrc(item)" mode="aspectFit"></image>
|
||
</movable-view>
|
||
</movable-area>
|
||
</swiper-item>
|
||
</swiper>
|
||
</view>
|
||
</uni-popup>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
downloadFile,
|
||
getPreviewFileUrl
|
||
} from '@/api/common.js'
|
||
import {
|
||
useStorageStore
|
||
} from "@/store/storage.js"
|
||
import {
|
||
get_base_url
|
||
} from '@/api/request.js'
|
||
import imagePreviewVue from './image-preview.vue'
|
||
import {
|
||
getToken
|
||
} from '@/common/common.js'
|
||
import IVideo from './i-video.vue'
|
||
import {
|
||
getPhoneEnvBool
|
||
} from '@/common/common.js';
|
||
export default {
|
||
name: "video-preview",
|
||
components: {
|
||
imagePreviewVue,
|
||
IVideo
|
||
},
|
||
props: {
|
||
// fileId:{
|
||
// default:'',
|
||
// type:String
|
||
// },
|
||
// src:{
|
||
// default:'',
|
||
// type:String
|
||
// },
|
||
// fileType:{
|
||
// default:'image',
|
||
// type:String
|
||
// }
|
||
},
|
||
data() {
|
||
return {
|
||
showModel: false,
|
||
fileUrlShow: '',
|
||
watching: false,
|
||
videoContext: null,
|
||
base_url: get_base_url(),
|
||
scale: 1,
|
||
currentIndex: 0,
|
||
IsAndEnv: getPhoneEnvBool('AND')
|
||
};
|
||
},
|
||
computed: {
|
||
storageStore: () => useStorageStore(),
|
||
videoObj() {
|
||
return this.storageStore?.videoObj || {}
|
||
},
|
||
imageObj() {
|
||
return this.storageStore?.imgObj || {};
|
||
},
|
||
showPreviewDetail() {
|
||
return !!this.storageStore?.getShowPreviewDetail
|
||
},
|
||
fileType() {
|
||
return this.storageStore?.getFileType
|
||
},
|
||
fileId() {
|
||
return this.storageStore?.getFileId
|
||
},
|
||
src() {
|
||
return this.storageStore?.getFileSrc
|
||
},
|
||
srcList() {
|
||
return this.storageStore?.getFileSrcList
|
||
},
|
||
isBase() {
|
||
return this.storageStore?.getIsBase
|
||
},
|
||
token() {
|
||
return getToken()
|
||
},
|
||
videoSrc(){
|
||
if(this.IsAndEnv){
|
||
return this.fileUrlShow
|
||
}else{
|
||
return 'https://cms-emer-res.cctvnews.cctv.com/video/1005/p/39450b1263cf4be8b258bdf38995d2fb-023f0694178843bca3845de46aca7bbf-4.mp4'
|
||
}
|
||
}
|
||
},
|
||
watch: {
|
||
fileId: {
|
||
handler(newval, oldval) {
|
||
this.initFileId(newval, oldval)
|
||
},
|
||
immediate: true,
|
||
deep: true,
|
||
},
|
||
src: {
|
||
handler(newval, oldval) {
|
||
this.initSrc(newval, oldval)
|
||
},
|
||
immediate: true,
|
||
deep: true,
|
||
},
|
||
showPreviewDetail(val) {
|
||
if (val) {
|
||
this.showModelNow()
|
||
} else {
|
||
this.$refs.PopupRef.close()
|
||
this.showModel = false
|
||
}
|
||
}
|
||
},
|
||
methods: {
|
||
initFileId(newval, oldval) {
|
||
if (this.fileType === 'image') {
|
||
if (newval.indexOf('/') === 0) {
|
||
this.fileUrlShow = this.base_url + newval + '?tk=' + getToken();
|
||
return;
|
||
}
|
||
if (newval.indexOf('http') === 0) {
|
||
this.fileUrlShow = newval + '?tk=' + getToken();
|
||
return;
|
||
}
|
||
if (newval && this.watching) {
|
||
this.getImagePreviewUrlBlob(newval);
|
||
}
|
||
}
|
||
if (this.fileType === 'video') {
|
||
if (newval.indexOf('http') === 0) {
|
||
this.fileUrlShow = newval + '?tk=' + getToken()
|
||
} else {
|
||
if (newval && this.watching) {
|
||
this.getPreviewUrlBlob(newval);
|
||
}
|
||
}
|
||
}
|
||
//
|
||
this.videoContext = uni.createVideoContext(`video` + this.fileId)
|
||
},
|
||
initSrc(newval, oldval) {
|
||
let _src
|
||
if(this.isBase){
|
||
_src = newval
|
||
this.fileUrlShow = _src
|
||
return _src
|
||
}
|
||
if (newval.indexOf('http') === 0) {
|
||
_src = newval + '?tk=' + getToken()
|
||
} else {
|
||
_src = this.base_url + newval + '?tk=' + getToken()
|
||
}
|
||
this.fileUrlShow = _src
|
||
return _src
|
||
},
|
||
getImagePreviewUrlBlob(id) {
|
||
if (!id) {
|
||
this.fileUrlShow = '';
|
||
return;
|
||
}
|
||
if (this.isCache) {
|
||
let _cache = this.imageObj[`/${id}/${this.width}/${this.height}`] || '';
|
||
if (_cache) {
|
||
this.fileUrlShow = _cache;
|
||
return;
|
||
}
|
||
previewCacheThumbImage(id, this.width, this.height).then((res) => {
|
||
this.fileUrlShow = res + '?tk=' + getToken();
|
||
this.storageStore.setStorage('image', `/${id}/${this.width}/${this.height}`, res);
|
||
});
|
||
} else {
|
||
let _cache = this.imageObj[`${id}`] || '';
|
||
if (_cache) {
|
||
this.fileUrlShow = _cache;
|
||
return;
|
||
}
|
||
previewFile(id).then((result) => {
|
||
//#ifdef APP-PLUS
|
||
let _header = result.header['Content-Type'].split(';')[0];
|
||
// #endif
|
||
//#ifndef APP-PLUS
|
||
let _header = result.header['content-type'].split(';')[0];
|
||
// #endif
|
||
let base64 = `data:${_header};base64,` + uni.arrayBufferToBase64(result.data);
|
||
this.fileUrlShow = base64;
|
||
this.storageStore.setStorage('image', id, base64);
|
||
});
|
||
}
|
||
},
|
||
changeShow(data) {
|
||
if (!data.show) {
|
||
this.storageStore.setTouchBtnZIndex(12);
|
||
} else {
|
||
this.storageStore.setTouchBtnZIndex(-1);
|
||
}
|
||
},
|
||
showModelNow() {
|
||
this.$refs.PopupRef.open()
|
||
this.showModel = true
|
||
if (this.fileType === 'image') {
|
||
if (this.fileId) {
|
||
if (this.fileId.indexOf('/') === 0) {
|
||
this.fileUrlShow = this.base_url + this.fileId;
|
||
} else if (this.fileId.indexOf('http') === 0) {
|
||
this.fileUrlShow = this.fileId;
|
||
} else {
|
||
this.getPreviewUrlBlob(this.fileId);
|
||
}
|
||
}
|
||
this.watching = true;
|
||
if (this.src) {
|
||
this.fileUrlShow = this.base_url + this.src;
|
||
}
|
||
}
|
||
if (this.fileType === 'video') {
|
||
if (this.fileId) {
|
||
let _newDate = new Date().getTime()
|
||
if (this.fileId.indexOf('http') === 0) {
|
||
this.fileUrlShow = this.fileId + '?tk=' + getToken() + '&t=' + _newDate
|
||
} else {
|
||
this.getPreviewUrlBlob(this.fileId);
|
||
}
|
||
this.videoContext = uni.createVideoContext(`video` + this.fileId)
|
||
}
|
||
}
|
||
},
|
||
playError(info) {
|
||
console.log('err：', info)
|
||
},
|
||
playEnded() {
|
||
this.storageStore.setShowPreviewDetail({
|
||
status: false,
|
||
fileType: '',
|
||
fileId: '',
|
||
fileSrc: ''
|
||
})
|
||
},
|
||
getPreviewUrlBlob(id) {
|
||
if (!id) {
|
||
this.fileUrlShow = ''
|
||
return
|
||
}
|
||
let _cache = this.videoObj[id] || ''
|
||
if (_cache) {
|
||
this.fileUrlShow = _cache;
|
||
return
|
||
}
|
||
let _newDate = new Date().getTime()
|
||
this.fileUrlShow = getPreviewFileUrl(this.fileId) + '?tk=' + getToken() + '&t=' + _newDate
|
||
// downloadFile(id).then(res=>{
|
||
// this.fileUrlShow = res.tempFilePath
|
||
// this.storageStore.setStorage('video', id, this.fileUrlShow)
|
||
// })
|
||
},
|
||
getPreviewFileUrlNow(id) {
|
||
let _newDate = new Date().getTime()
|
||
if (id.indexOf('http') === 0) {
|
||
this.fileUrlShow = id + '?tk=' + getToken() + '&t=' + _newDate
|
||
return
|
||
}
|
||
if (id && this.watching) {
|
||
this.getPreviewUrlBlob(id);
|
||
}
|
||
},
|
||
onScale(e) {
|
||
console.log(e)
|
||
}
|
||
},
|
||
mounted() {
|
||
this.watching = true
|
||
},
|
||
beforeUnmount() {
|
||
this.playEnded()
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.video-view-box {
|
||
width: 100%;
|
||
height: 100%;
|
||
background-color: #fafafa !important;
|
||
position: relative;
|
||
}
|
||
|
||
.img-box {
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 50%;
|
||
width: 100rpx;
|
||
height: 100rpx;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
|
||
.preview-pic {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.overlay-box .video-cont-center {
|
||
width: 100vw;
|
||
max-height: 100%;
|
||
position: absolute;
|
||
top: 50%;
|
||
left: 50%;
|
||
transform: translate(-50%, -50%);
|
||
}
|
||
.overlay-box .video-cont-bottom {
|
||
width: 100vw;
|
||
max-height: 100%;
|
||
position: absolute;
|
||
bottom: 100%;
|
||
left: 50%;
|
||
transform: translateX(-50%);
|
||
}
|
||
|
||
.overlay-box {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 999;
|
||
background-color: rgba(0, 0, 0, .65);
|
||
}
|
||
|
||
.overlay-box {
|
||
position: fixed;
|
||
left: 0;
|
||
top: 0;
|
||
width: 100vw;
|
||
height: 100vh;
|
||
z-index: 999;
|
||
background-color: rgba(0, 0, 0, 0.65);
|
||
|
||
.stack-swiper {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
}
|
||
|
||
movable-view {
|
||
position: fixed;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
movable-area {
|
||
width: 620rpx;
|
||
height: 100vh;
|
||
position: fixed;
|
||
overflow: hidden;
|
||
}
|
||
|
||
movable-view image {
|
||
width: 100%;
|
||
}
|
||
|
||
.detail-img {
|
||
width: calc(100% - 40rpx);
|
||
height: calc(100% - 100rpx);
|
||
}
|
||
|
||
// .detail-img {
|
||
// position: absolute;
|
||
// left: 50%;
|
||
// top: 50%;
|
||
// width: calc(100% - 40rpx);
|
||
// height: calc(100% - 100rpx);
|
||
// transform: translate(-50%, -50%);
|
||
// }
|
||
}
|
||
</style> |