From 494516f58b4271ce68f19ffa5c90c478e938bcbd Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E6=99=9A=E9=A3=8E=E6=8B=82=E6=9F=B3=E9=A2=9C?=
 <434857005@qq.com>
Date: Thu, 11 May 2023 16:55:08 +0800
Subject: [PATCH] =?UTF-8?q?=E6=92=AD=E6=94=BE=E5=8A=9F=E8=83=BD=E5=AE=8C?=
 =?UTF-8?q?=E5=96=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 doc/更新日志.md                        |  4 ++
 js/version.txt                         |  2 +-
 templates/cms/mxpro/css/commonUI.css   | 22 +++++-
 templates/cms/mxpro/detailContent.html | 95 ++++++++++++++++++++++++--
 templates/cms/mxpro/js/commonUI.js     | 35 ++++++++++
 5 files changed, 150 insertions(+), 8 deletions(-)

diff --git a/doc/更新日志.md b/doc/更新日志.md
index bf3317b..8140aa6 100644
--- a/doc/更新日志.md
+++ b/doc/更新日志.md
@@ -1,3 +1,7 @@
+###### 2023/05/11
+- [X] 3.9.41beta23 完成播放功能
+- [X] 优化部分显示bug
+
 ###### 2023/05/10
 - [X] 3.9.41beta18 后台管理预览源增加搜索页
 - [X] 修复js0搜索不支持翻页问题
diff --git a/js/version.txt b/js/version.txt
index 4f1d812..7c87d9d 100644
--- a/js/version.txt
+++ b/js/version.txt
@@ -1 +1 @@
-3.9.41beta22
\ No newline at end of file
+3.9.41beta23
\ No newline at end of file
diff --git a/templates/cms/mxpro/css/commonUI.css b/templates/cms/mxpro/css/commonUI.css
index 83b72d3..24d7ad0 100644
--- a/templates/cms/mxpro/css/commonUI.css
+++ b/templates/cms/mxpro/css/commonUI.css
@@ -6,5 +6,25 @@ a.links{
 max-width: 100%;
 border-radius: 2px;height:155px;
 overflow: hidden;
-pointer-events: none;
+/*pointer-events: none;*/
+}
+
+.showPhoto {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 99999;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.showPhoto .img {
+  display: block;
+  margin: auto 0;
+  max-width: 100%;
+  text-align: center;
 }
\ No newline at end of file
diff --git a/templates/cms/mxpro/detailContent.html b/templates/cms/mxpro/detailContent.html
index 7f2ca64..bc07cd1 100644
--- a/templates/cms/mxpro/detailContent.html
+++ b/templates/cms/mxpro/detailContent.html
@@ -44,9 +44,15 @@
 			<div class="stui-pannel__bd">
 				<div class="stui-content">
 					<div class="stui-content__thumb">
-						<a class="pic" href="" title="{{ctx.vod_name}}">
-							<img class="lazyload" :data-original="dinfo.vod_pic" src="/web/cms/mxpro/img/load.gif" v-show="!iframeShow"/>
-							<iframe :src="iframeSrc" v-show="iframeShow" frameborder="no" scrolling="no"></iframe>
+						<a class="pic" title="{{ctx.vod_name}}">
+							<img class="lazyload" :data-original="dinfo.vod_pic" src="/web/cms/mxpro/img/load.gif" v-show="!iframeShow" @click.self="showBigImage($event)"/>
+							<stu-image :visible="photoVisible" :url="dinfo.vod_pic" @close_image="photoVisible=false"></stu-image>
+							<button v-show="iframeShow" onclick="openFullScreen()">全屏播放</button>
+							<button v-show="iframeShow" @click="openTestVideo">测试直链</button>
+							<iframe id="iframe-player" :src="iframeSrc" v-show="iframeShow"
+							allowfullscreen="true" allowtransparency="true" webkitallowfullscreen="true" mozallowfullscreen="true"
+							name="iframe-player" scrolling="no" frameborder="0" ref="iframeRef"
+							></iframe>
 						</a>
 					</div>
 					<div class="stui-content__detail">
@@ -65,7 +71,7 @@
 							<a class="detail-more" href="javascript:;">详情 <i class="icon iconfont icon-moreunfold"></i></a>
 						</p>
 						<div class="play-btn">
-							<a :href="fast_play">立即播放</a>
+							<a :href="fast_play" @click.prevent="lazyPlay(fast_play)">立即播放</a>
 <!--							<a href="">收藏</a>-->
 						</div>
 					</div>
@@ -124,7 +130,7 @@
 <!--vue结束-->
 
 <script>
-const { createApp,reactive, toRefs, ref,getCurrentInstance,onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, watch,computed } = Vue;
+const { createApp,defineEmits,reactive, toRefs, ref,getCurrentInstance,onBeforeMount, onMounted,onBeforeUpdate,onUpdated,onBeforeUnmount, onUnmounted, watch,computed } = Vue;
 const app = createApp({
 	delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
 	props: {},
@@ -233,6 +239,8 @@ const app = createApp({
 
 		const iframeSrc = ref('');
 		const iframeShow = ref(false);
+		const photoVisible = ref(false);
+		const iframeRef = ref(null);
 
 		const methods = {
 			async lazyPlay(url){
@@ -244,14 +252,73 @@ const app = createApp({
 					if(!res.data.parse&&res.data.url){
 						console.log(ctx.value);
 						iframeSrc.value = ctx.value.path+'?url='+res.data.url;
+					}else if(res.data.parse&&res.data.url){
+						console.log(ctx.value);
+						iframeSrc.value = res.data.url;
+						if(confirm('该视频来自其它正版地址,drpy网页暂未实现解析功能,是否跳到正版站通过油猴插件等手段播放?')){
+							open(res.data.url);
+						}
 					}
 				}catch (e) {
 					console.log('抓到了错误:'+e.message);
 					console.log('iframeSrc.value:',iframeSrc.value);
 					iframeSrc.value = url;
+					const total_time = 10000;
+					var sniffer;
+					var counter = 1; // 嗅探计数
+					var speeder = 250; // 嗅探间隔
+					var total_counter = total_time/speeder;
+					let iframeWindow = iframeRef.value.contentWindow;
+					clearInterval(sniffer);
+					console.log(`开始嗅探,最多嗅探:${total_counter}次...`);
+					sniffer = setInterval(function (){
+						console.log(`第${counter}次嗅探开始`);
+						if(counter >= total_counter){
+							clearInterval(sniffer);
+							console.log(`嗅探超时并结束,共计嗅探:${counter}次`);
+							return
+						}
+						try {
+							let resources = iframeWindow.performance.getEntriesByType('resource');
+							console.log(resources);
+							for(const resource of resources){
+								let res_url = resource.name;
+								let res_url2 = res_url.split('?')[0];
+								if(res_url2.endsWith('.m3u8')){
+									console.log(`嗅探到m3u8文件:${res_url},共计嗅探:${counter}次`);
+									clearInterval(sniffer);
+									break;
+								}else if(res_url2.endsWith('.mp4')){
+									console.log(`嗅探到mp4文件:${res_url},共计嗅探:${counter}次`);
+									clearInterval(sniffer);
+									break;
+								}else if(/\.(m4a|mp3|flv|aac)$/.test(res_url2)){
+									console.log(`嗅探到音频文件:${res_url},共计嗅探:${counter}次`);
+									clearInterval(sniffer);
+									break;
+								}
+							}
+						}catch (e) {
+							console.log(`第${counter}次嗅探发生错误:`,e.message);
+						}
+						console.log(`第${counter}次嗅探完毕`);
+						counter+=1;
+
+					},speeder);
+
 				}
 			},
-		};
+			showBigImage(e) {//点击图片函数，点击后，把photoVisible设置成true
+				// console.log('showBigImage:',e);
+				if (e !== "") {
+				  // this.photoVisible = true; // 这样也可以
+					photoVisible.value = true;
+				}
+			},
+			openTestVideo(e){
+				iframeSrc.value = ctx.value.path+'?url='+'https://sf9-dycdn-tos.pstatp.com/obj/tos-cn-i-8gu37r9deh/7c399215485c40cb9f1d1da640354a12?filename=1.mp4';
+			}
+		}
 		return {
 			...methods,
 			ctx:ctx,
@@ -270,6 +337,8 @@ const app = createApp({
 			fast_play:fast_play,
 			iframeSrc:iframeSrc,
 			iframeShow:iframeShow,
+			photoVisible:photoVisible,
+			iframeRef:iframeRef,
 		}
 	},
 });
@@ -286,6 +355,7 @@ app.component('copy-right',  copyRightComponent);
 app.component('foot-button', footButtonComponent);
 app.component('note-popup',  notePopup);
 app.component('stu-header', stuHeaderComponent);
+app.component('stu-image', StuImageComponent);
 app.mount('#app');
 eruda.init();
 
@@ -323,6 +393,19 @@ $(function(){
 	$('.ant-back-top').click(function(){
 	$('html,body').animate({scrollTop: '0px'}, 800);});
 });
+function openFullScreen(){
+	console.log('点击全屏');
+	let elem = document.getElementById('iframe-player');
+	if (elem.requestFullScreen) {
+		elem.requestFullScreen();
+	} else if (elem.mozRequestFullScreen) {/* Firefox */
+		elem.mozRequestFullScreen();
+	} else if (elem.webkitRequestFullScreen) { /* Chrome, Safari and Opera */
+		elem.webkitRequestFullScreen();
+	} else if (elem.msRequestFullScreen) { /* IE/Edge */
+		elem.msRequestFullScreen();
+	}
+}
 </script>
 
 </body>
diff --git a/templates/cms/mxpro/js/commonUI.js b/templates/cms/mxpro/js/commonUI.js
index f3fa53a..8ecfb15 100644
--- a/templates/cms/mxpro/js/commonUI.js
+++ b/templates/cms/mxpro/js/commonUI.js
@@ -322,6 +322,41 @@ const stuLinksComponent = {
 	delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
 };
 
+const StuImageComponent = {
+	template:`
+	<div v-show="visible" @click="closeImage" class="showPhoto">
+    	<img class="img" :src="url" alt="图片加载失败" />
+  	</div>
+	`,
+	setup(props, context) {
+		console.log('StuImage组件加载完毕');
+		const methods = {
+			closeImage(e) {
+			  //子组件可以使用 context.emit 触发父组件的自定义事件
+				// console.log(context.emit);
+				// console.log('调用父组件 closeImage');
+				context.emit('close_image');
+			},
+		};
+		return {
+			...methods,
+			// visible
+		}
+	},
+	props: {
+		url: {
+			type: String,
+			default: "",
+		},
+		visible: {
+			type: Boolean,
+			default: false,
+		},
+	},//配置需要传入的属性
+	emits :['close_image'],
+	delimiters: ['{[', ']}'],//delimiters：改变默认的插值符号
+}
+
 //下面的注册组件方法无法使用,需要在app里去注册
 // Vue.component('copy-right',  copyRightComponent);
 // Vue.component('foot-button', footButtonComponent);