From e4f0862bd8af0ac1c7aab59904b69dd071526aff Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Fri, 12 Aug 2022 23:59:41 +0800
Subject: [PATCH] 视频模块添加播放历史
---
src/components/mini/box16-videoDetail.vue | 126 ++++++++++++++++++++++++++++++++++++++---
1 files changed, 115 insertions(+), 11 deletions(-)
diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
index 126478e..d093711 100644
--- a/src/components/mini/box16-videoDetail.vue
+++ b/src/components/mini/box16-videoDetail.vue
@@ -1,11 +1,14 @@
<template>
<div>
- <div class="boxMain">
- <videoPlayBox></videoPlayBox>
- </div>
- <div class="articleComment">
- <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true"/>
- </div>
+ <div class="boxMain ">
+ <videoPlayBox ref="videoPlayBox" @swichPlay="swichPlay"></videoPlayBox>
+ </div>
+ <div style="padding: 20px 20px 5px;margin-bottom: 20px;" class="myShadow fadeInLeft">
+ <pre>{{introduce}}</pre>
+ </div>
+ <div class="articleComment fadeInRight">
+ <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment" :foldReply="true" />
+ </div>
</div>
</template>
@@ -16,6 +19,10 @@
} from '../../api/blogArticleComment.js'
import videoPlayBox from "../mini/box15-videoPlayBox.vue"
import comment from "../mini/box12-comment.vue"
+
+ import {
+ queryBlogArticleDetail
+ } from '../../api/blogArticle.js'
export default {
components: {
@@ -31,7 +38,6 @@
// },
articleId: function(newValue, oldValue) {
if (newValue == undefined || newValue == null || newValue == "") {
- this.showMsg = true;
this.errorMsg = "日志id参数缺失";
} else {
this.$nextTick(function() {
@@ -43,13 +49,99 @@
data() {
return {
articleId: "",
- isAllowedComment: false
+ lastArticleId: "",
+ isAllowedComment: false,
+ introduce: "",
+ secret: "",
+ myLock: false,
+ videoData: {
+ img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
+ url: "",
+ type: "normal",
+ title: "",
+ introduce: "",
+ id: ""
+ }
}
},
methods: {
- showVideo(param) {
- this.articleId = param.id
+ swichPlay(videoData) {
+ this.introduce = videoData.introduce;
+ this.$refs.myComment.updateCommentList(videoData.id);
},
+ showVideo(item) {
+ //防止重复加载
+ this.lastArticleId = this.articleId;
+ this.articleId = item.id
+
+ if (this.articleId == this.lastArticleId) {
+ return
+ }
+
+ this.isAllowedComment = item.isAllowedComment;
+ this.introduce = item.introduce;
+ this.loadData();
+ },
+ loadData() {
+
+ if (this.$refs.videoPlayBox.isPlaying) {
+ this.$message.info("上个视频正在播放中")
+ }
+
+ if (this.myLock) {
+ this.$message.info("正在努力加载中..", 3)
+ return
+ }
+
+ let _this = this;
+ queryBlogArticleDetail({
+ id: this.articleId,
+ authWord: this.secret == "" ? null : md5(this.secret)
+ }).then((res) => {
+ this.myLock = !this.myLock;
+
+ if (res.code != 200) {
+
+ if (res.code == 1019001) {
+ //日志需要授权
+ this.$message.error(res.message)
+ } else if (res.code == 1019002) {
+
+ this.$message.error(res.message)
+ } else {
+ this.$notification.error({
+ message: '好像哪里不对劲..',
+ description: res.message,
+ placement: 'bottomRight'
+ });
+ }
+ return
+ }
+
+ this.isAllowedComment = res.data.isAllowedComment;
+ this.videoData.url = res.data.articleFileURL;
+ this.videoData.img = res.data.coverFileURL;
+ this.videoData.title = res.data.title;
+ this.videoData.introduce = res.data.introduce;
+ this.videoData.id = res.data.id;
+
+
+ if (res.data.articleFileURL != null &&
+ res.data.articleFileURL != "" &&
+ res.data.articleFileURL.endsWith("m3u8")) {
+ this.videoData.type = "customHls";
+ } else {
+ this.videoData.type = "normal";
+ }
+
+ this.myLock = !this.myLock;
+ if (this.lastArticleId != this.articleId) {
+ let tempParam = JSON.parse(JSON.stringify(this.videoData))
+ _this.$refs.videoPlayBox.startPlay(tempParam)
+ }
+ })
+
+ }
},
}
</script>
@@ -58,9 +150,21 @@
color: black;
}
+ pre {
+ font-family: 'HYTangMeiRen';
+ src: url("http://t.inleft.com/share/z%E5%AD%97%E4%BD%93%E5%BA%93/hytmr55%E6%B1%89%E4%BB%AA%E5%94%90%E7%BE%8E%E4%BA%BA%E5%AD%97%E4%BD%93.woff") format("truetype");
+ }
+
.boxMain {
+ user-select: none;
display: flex;
justify-content: center;
- padding: 20px;
+ padding: 5px 20px;
+ }
+
+ .myShadow {
+
+ box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
+ -8px -8px 18px #ffffff;
}
</style>
--
Gitblit v1.9.1