From 1cf6d9fb8cf2f10e302509f033d8d55b4e60712c Mon Sep 17 00:00:00 2001
From: inleft <inleft@qq.com>
Date: Sun, 14 Aug 2022 01:45:42 +0800
Subject: [PATCH] 优化友链布局，月台窗口自适应，处理hls取消后仍然缓存问题
---
src/components/mini/box-friend.vue | 27 +++--
src/components/mini/box15-videoPlayBox.vue | 92 +++++++++++++++---
src/components/mini/box10-add.vue | 7
src/components/mini/box13-reply.vue | 4
src/components/group/MyVideo.vue | 31 +++++
src/components/mini/box14-video.vue | 20 +--
src/components/mini/box-17-linkAdd.vue | 11 +-
src/components/mini/box16-videoDetail.vue | 53 ++++++++--
src/components/mini/tagInfo.vue | 4
9 files changed, 184 insertions(+), 65 deletions(-)
diff --git a/src/components/group/MyVideo.vue b/src/components/group/MyVideo.vue
index 17fc80c..c04e931 100644
--- a/src/components/group/MyVideo.vue
+++ b/src/components/group/MyVideo.vue
@@ -1,10 +1,11 @@
<template>
<div class="myModal">
- <a-modal v-model="visible" title="视频盒子" :footer="null" :mask="false" :maskClosable="true"
- :bodyStyle="{'overflow':'overlay','maxHeight': '750px'}" :afterClose="afterClose">
- <videoDetail ref="videoDetail"></videoDetail>
+ <a-modal v-model="visible" title="视频盒子" :width="myWidth" :footer="null" :mask="false" :maskClosable="true"
+ :bodyStyle="{'overflow':'overlay','height': '750px'}" :afterClose="afterClose" >
+ <videoDetail ref="videoDetail" :showFade="showFade"></videoDetail>
</a-modal>
</div>
+
</template>
<script>
@@ -13,6 +14,14 @@
export default {
components: {
videoDetail,
+ },
+ mounted() {
+ this.juseWidth(document.body.clientWidth)
+ window.onresize = () => {
+ return (() => {
+ this.juseWidth(document.body.clientWidth)
+ })();
+ };
},
watch: {
// '$route'(to, from) {
@@ -36,9 +45,22 @@
return {
visible: false,
articleId: "",
+ myWidth: 410,
+ showFade: true,
}
},
methods: {
+ juseWidth(screenWidth) {
+ this.showFade = true;
+ if (screenWidth > 1000) {
+ this.myWidth = 1000
+ } else if (screenWidth > 767) {
+ this.myWidth = 600
+ } else {
+ this.myWidth = 410
+ this.showFade = false;
+ }
+ },
showModal(param) {
this.visible = true;
this.$nextTick(function() {
@@ -56,4 +78,7 @@
</script>
<style scoped>
+
+
+
</style>
diff --git a/src/components/mini/box-17-linkAdd.vue b/src/components/mini/box-17-linkAdd.vue
index b263c30..1284041 100644
--- a/src/components/mini/box-17-linkAdd.vue
+++ b/src/components/mini/box-17-linkAdd.vue
@@ -19,6 +19,7 @@
</a-select-option>
</a-select>
</a-form-model-item>
+
<a-form-model-item label="avatar" prop="avatar">
<a-input v-model="form.avatar" placeholder="链接图片地址" />
@@ -53,7 +54,7 @@
url: '',
avatar: '',
remark: '',
- linkType: '',
+ linkType: undefined,
topValue: 50,
isNewWindowOpen: 1
},
@@ -90,8 +91,8 @@
},
{
trigger: 'blur',
- pattern: /^((https|http)?:\/\/)[^\s]+/,
- message: '仅支持 https | http'
+ pattern: /^((https|http)?:\/\/)+/,
+ message: '仅支持 https:// | http://'
}
],
linkType: [{
@@ -103,8 +104,8 @@
required: false,
}, {
trigger: 'blur',
- pattern: /^((https|http)?:\/\/)[^\s]+/,
- message: '仅支持 https | http'
+ pattern: /^((https|http)?:\/\/)+/,
+ message: '仅支持 https:// | http://'
}],
}
diff --git a/src/components/mini/box-friend.vue b/src/components/mini/box-friend.vue
index 49e55ce..c2328c1 100644
--- a/src/components/mini/box-friend.vue
+++ b/src/components/mini/box-friend.vue
@@ -191,24 +191,31 @@
@media screen and (min-width: 1600px) {
.link-box a {
margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(100% / 5 - 1.875rem);
- width: calc(100% / 5 - 1.875rem);
+ width: -webkit-calc(100% / 5 - 4rem);
+ width: calc(100% / 5 - 4rem);
}
}
- @media screen and (max-width: 1599px) and (min-width: 768px) {
+ @media screen and (max-width: 1599px) and (min-width: 1439px) {
.link-box a {
margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(100% / 4 - 1.875rem);
- width: calc(100% / 4 - 1.875rem);
+ width: -webkit-calc(100% / 3 - 8rem);
+ width: calc(100% / 3 - 8rem);
+ }
+ }
+ @media screen and (max-width: 1438px) and (min-width: 791px) {
+ .link-box a {
+ margin: 0 0.9375rem 3.75rem;
+ width: -webkit-calc(100% / 4 - 2.3rem);
+ width: calc(100% / 4 - 2.3rem);
}
}
- @media screen and (max-width: 767px) and (min-width: 501px) {
+ @media screen and (max-width: 790px) and (min-width: 501px) {
.link-box a {
margin: 0 0.9375rem 3.75rem;
- width: -webkit-calc(100% / 3 - 1.875rem);
- width: calc(100% / 3 - 1.875rem);
+ width: -webkit-calc(100% / 3 - 2.3rem);
+ width: calc(100% / 3 - 2.3rem);
}
}
@@ -216,8 +223,8 @@
@media screen and (max-width: 500px) and (min-width: 319px) {
.link-box a {
margin: 0 0.75rem 1.5rem;
- width: -webkit-calc(50% - 1.5rem);
- width: calc(50% - 1.5rem);
+ width: -webkit-calc(100% / 3 - 1.5rem);
+ width: calc(100% / 3 - 1.5rem);
}
.blog-main {
diff --git a/src/components/mini/box10-add.vue b/src/components/mini/box10-add.vue
index 8800027..4c2b300 100644
--- a/src/components/mini/box10-add.vue
+++ b/src/components/mini/box10-add.vue
@@ -24,7 +24,7 @@
<a-form-model-item label="日志文件" v-show="!form.online">
<a-upload ref="blogFileUpload" :customRequest="customRequest" name="file" :showUploadList="true"
@change="handleChange" :default-file-list="form.blogFileList" :beforeUpload="beforeUpload"
- :data="{'fileType':fileTypeMarkDown}" accept=".md,.html,.htm,.txt">
+ :data="{'fileType':myConstant.fileTypeMarkDown}" accept=".md,.html,.htm,.txt">
<a-button>
<a-icon type="upload" />限 markdown/html
</a-button>
@@ -102,7 +102,7 @@
<a-form-model-item label="封面">
<a-upload :customRequest="customRequest" name="file" :showUploadList="true" list-type="picture"
- :data="{'fileType':fileTypeCover}" @change="handleChangeCoverFile"
+ :data="{'fileType':myConstant.fileTypeCover}" @change="handleChangeCoverFile"
:default-file-list="form.coverFileList" :beforeUpload="beforeUploadCover"
accept=".jpg,.png,.jpeg">
<!-- :disabled="form.coverFileList.length>=1" -->
@@ -213,8 +213,7 @@
};
return {
- fileTypeMarkDown: myConstant.fileTypeMarkDown,
- fileTypeCover: myConstant.fileTypeCover,
+ myConstant: myConstant,
blogArticleType: [],
tags: [],
inputVisible: false,
diff --git a/src/components/mini/box13-reply.vue b/src/components/mini/box13-reply.vue
index 6fa0307..95634b1 100644
--- a/src/components/mini/box13-reply.vue
+++ b/src/components/mini/box13-reply.vue
@@ -232,8 +232,8 @@
}],
"homePage": [{
trigger: 'blur',
- pattern: /^((https|http)?:\/\/)[^\s]+/,
- message: '仅支持 https | http'
+ pattern: /^((https|http)?:\/\/)+/,
+ message: '仅支持 https:// | http://'
}, {
trigger: 'blur',
max: 50,
diff --git a/src/components/mini/box14-video.vue b/src/components/mini/box14-video.vue
index 2ef594c..328edae 100644
--- a/src/components/mini/box14-video.vue
+++ b/src/components/mini/box14-video.vue
@@ -271,27 +271,25 @@
overflow: hidden;
}
- @media screen and (max-width:1024px) {
+ @media screen and (min-width:768px) {
+ .gridClass {
+ grid-template-columns: repeat(2, 1fr);
+ }
+ }
+
+ @media screen and (max-width:767px) {
.gridClass {
grid-row-gap: 2rem;
grid-column-gap: 0rem;
grid-template-columns: repeat(1, 1fr);
-
+
.entry-preview {
display: block;
}
-
+
.thumbnail_box {
min-width: 100%;
}
- }
-
-
- }
-
- @media screen and (min-width:1025px) {
- .gridClass {
- grid-template-columns: repeat(2, 1fr);
}
}
</style>
diff --git a/src/components/mini/box15-videoPlayBox.vue b/src/components/mini/box15-videoPlayBox.vue
index 0a6b19b..34690fd 100644
--- a/src/components/mini/box15-videoPlayBox.vue
+++ b/src/components/mini/box15-videoPlayBox.vue
@@ -3,13 +3,18 @@
<div>
正在播放: <span> {{playingVideoData.title}} </span>
</div>
- <div class="myVideo">
+ <div class="myVideo fade">
<div id="videoPlay" ref="myVdeoPlay"></div>
</div>
<div style="border-radius: 0 0 4px 4px;">
<div style="padding: 10px 0px;">
音量 :
<a-slider v-model="volumeInit" :default-value="0.1" :step="0.1" :max="1" @change="changeVolume" />
+ </div>
+ <div style="padding: 10px 0px;">
+ 播放进度 : {{Math.floor(currentTime/60)}}:{{Math.floor(currentTime%60)}} /
+ {{Math.floor(duration/60)}}:{{Math.floor(duration%60)}}
+ <a-slider v-model="currentTime" :max="duration" @afterChange="changeTime" />
</div>
<a-collapse activeKey="playHistory">
<a-collapse-panel key="playHistory" header="播放记录">
@@ -18,7 +23,9 @@
<a-tooltip placement="bottomRight" title="播放/暂停">
<div @click="togglePlay" class="playItem">
{{item.title}}
- <a-icon type="youtube" class="playIcon" />
+ <span v-if="!isPlaying " class="myTip">(已暂停)</span>
+ <a-icon type="youtube" class="playIcon "
+ v-bind:class="{ activeElement: isPlaying }" />
</div>
</a-tooltip>
</div>
@@ -52,6 +59,8 @@
volumeInit: 0.1,
isPlaying: false,
swichLock: false,
+ currentTime: 0,
+ duration: 0,
playingVideoData: {
img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
url: "",
@@ -59,7 +68,7 @@
title: "",
id: ""
},
-
+ hls: null,
}
},
mounted() {
@@ -74,13 +83,23 @@
this.dp.on('pause', function() {
_this.$message.info("停止播放")
- this.isPlaying = false;
+ _this.isPlaying = false;
});
this.dp.on('play', function() {
_this.$message.info("开始播放..")
- this.isPlaying = true;
+ _this.isPlaying = true;
+ _this.duration = _this.dp.video.duration;
+ _this.currentTime = _this.dp.video.currentTime;
});
+ this.dp.on('timeupdate', function() {
+ //_this.$message.info("进度..")
+ _this.currentTime = _this.dp.video.currentTime;
+ });
+ this.dp.on('volumechange', function() {
+ _this.volumeInit = _this.dp.video.volume;
+ });
+
},
methods: {
togglePlay() {
@@ -89,6 +108,9 @@
},
changeVolume(value) {
this.dp.volume(value, true, false);
+ },
+ changeTime(time) {
+ this.dp.seek(time)
},
//切换视频源
swichPlay(videoId) {
@@ -106,11 +128,12 @@
this.$message.info("切换视频源..", 1)
this.swichLock = !this.swichLock;
+
this.startPlay(tempData)
setTimeout(() => {
this.swichLock = !this.swichLock;
- }, 5000);
+ }, 2000);
//通知父组件更换评论信息
this.$emit("swichPlay", tempData)
@@ -130,18 +153,29 @@
},
//加载播放
startPlay(videoData) {
+ //重要!!防止hls类型视频在切换后不停在后台缓存
+ if (this.hls != null) {
+ this.hls.destroy();
+ }
this.adjustOrder(videoData)
this.playingVideoData = videoData
this.isPlaying = false;
- this.dp.switchVideo(this.playingVideoData, null)
+ //重要!!防止hls类型视频在切换后不停在后台缓存
+ if (videoData.type == "customHls") {
+ this.hls = new Hls();
+ }
+ setTimeout(() => {
+ this.dp.switchVideo(this.playingVideoData)
+ }, 500);
},
//播放器初始化
init() {
+ var _this = this;
this.dp = new DPlayer({
element: document.getElementById("videoPlay"),
//logo: "https://qczh-1252727916.cos.ap-nanjing.myqcloud.com/pic/273658f508d04d488414fd2b84c9f923.png", // 在视频左上角上打一个logo
@@ -152,7 +186,7 @@
lang: "zh-cn", // 语言，'en', 'zh-cn', 'zh-tw'
// screenshot: true, // 是否允许截图（按钮），点击可以自动将截图下载到本地
preload: "metadata", // 自动预加载 'none', 'metadata', 'auto'
- volume: this.volumeInit, // 初始化音量
+ volume: _this.volumeInit, // 初始化音量
playbackSpeed: [2, 1, 0.5], //可选的播放速度，可自定义
contextmenu: [
//右键菜单
@@ -172,15 +206,17 @@
// },
],
video: {
- pic: this.defalutImg, // 视频封面
+ pic: _this.defalutImg, // 视频封面
// url: videoInfo.url,
//url: "http://t.inleft.com/share/mp3/EOPMusic%282%29.mp3",
type: "normal",
customType: {
customHls: function(video, player) {
- const hls = new Hls()
- hls.loadSource(video.src)
- hls.attachMedia(video)
+ //const hls = new Hls()
+ if (_this.hls != null) {
+ _this.hls.loadSource(video.src)
+ _this.hls.attachMedia(video)
+ }
}
}
}
@@ -205,7 +241,7 @@
padding: 10px;
border-radius: 5px;
margin: 10px;
- transition: all .5s;
+ transition: all .3s;
position: relative;
}
@@ -214,7 +250,8 @@
}
.playItem:active {
- transform: scale(0.75) translate3d(0, 0, 0);
+ // transform: scale(0.75) translate3d(0, 0, 0);
+ box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1), -8px -8px 18px #ffffff;
}
@@ -227,7 +264,7 @@
.myVideo {
position: relative;
- width: 300px;
+ width: 315px;
height: 180px;
background-color: #565656;
border-radius: 10px;
@@ -240,5 +277,28 @@
border-radius: 5px;
}
-
+ .activeElement {
+ -webkit-animation: free_download 1s linear alternate infinite;
+ animation: free_download 1s linear alternate infinite;
+ }
+
+ @-webkit-keyframes free_download {
+ 0% {
+ -webkit-transform: scale(1);
+ }
+
+ 100% {
+ -webkit-transform: scale(1.2);
+ }
+ }
+
+ @keyframes free_download {
+ 0% {
+ transform: scale(1);
+ }
+
+ 100% {
+ transform: scale(1.2);
+ }
+ }
</style>
diff --git a/src/components/mini/box16-videoDetail.vue b/src/components/mini/box16-videoDetail.vue
index d093711..9c9f19e 100644
--- a/src/components/mini/box16-videoDetail.vue
+++ b/src/components/mini/box16-videoDetail.vue
@@ -1,13 +1,16 @@
<template>
- <div>
- <div class="boxMain ">
+ <div class="boxMain">
+ <div class=" playBox" v-bind:class="{ fadeInLeft: this.$attrs.showFade,fade: !this.$attrs.showFade }">
<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 v-bind:class="{ fadeInRight: this.$attrs.showFade,fade: !this.$attrs.showFade }">
+ <div class="introduce myShadow" v-if="introduce!=''">
+ <pre style="white-space: pre-line;">{{introduce}}</pre>
+ </div>
+ <div class="articleComment ">
+ <comment ref="myComment" :articleId="articleId" :isAllowedComment="isAllowedComment"
+ :foldReply="true" />
+ </div>
</div>
</div>
@@ -40,9 +43,11 @@
if (newValue == undefined || newValue == null || newValue == "") {
this.errorMsg = "日志id参数缺失";
} else {
- this.$nextTick(function() {
- this.$refs.myComment.updateCommentList(this.articleId);
- })
+ if (this.newValue != this.oldValue) {
+ this.$nextTick(function() {
+ this.$refs.myComment.updateCommentList(this.articleId);
+ })
+ }
}
},
},
@@ -54,6 +59,7 @@
introduce: "",
secret: "",
myLock: false,
+ showFade: true,
videoData: {
img: "http://t.inleft.com/share/media_photo/idea_beijing.jpg",
url: "",
@@ -67,6 +73,7 @@
methods: {
swichPlay(videoData) {
this.introduce = videoData.introduce;
+ this.articleId = videoData.id
this.$refs.myComment.updateCommentList(videoData.id);
},
showVideo(item) {
@@ -85,7 +92,7 @@
loadData() {
if (this.$refs.videoPlayBox.isPlaying) {
- this.$message.info("上个视频正在播放中")
+ this.$message.info("视频源已切换..", 6)
}
if (this.myLock) {
@@ -157,9 +164,17 @@
.boxMain {
user-select: none;
+ grid-template-columns: repeat(2, 1fr);
+ display: grid;
+ clear: both;
+ gap: 2rem;
+ max-height: 100%;
+ }
+
+ .playBox {
display: flex;
justify-content: center;
- padding: 5px 20px;
+ padding: 20px 0px;
}
.myShadow {
@@ -167,4 +182,18 @@
box-shadow: 8px 8px 18px rgba(0, 0, 0, 0.1),
-8px -8px 18px #ffffff;
}
+
+ .introduce {
+ padding: 20px 20px 5px;
+ margin-bottom: 20px;
+ }
+
+ @media screen and (max-width: 1023px) {
+ .boxMain {
+ grid-template-columns: repeat(1, 1fr);
+ gap: 0rem;
+ }
+
+ }
+
</style>
diff --git a/src/components/mini/tagInfo.vue b/src/components/mini/tagInfo.vue
index 87ed56a..cfe2479 100644
--- a/src/components/mini/tagInfo.vue
+++ b/src/components/mini/tagInfo.vue
@@ -1,5 +1,6 @@
<template>
- <!-- 异步加载组件 消息总线独立 状态管理 常量抽取 模块重构 jtx使用 css优化-->
+ <!-- 异步加载组件 消息总线独立 状态管理 常量抽取 模块重构 jsx使用 css优化-->
+ <!-- 好用的黑色 #292a2d -->
<div class="swichTag ">
<a-page-header title="关于我的一些..小故事" style="padding: 10px 0px 20px 0px;" @back="() => this.$router.go(-1)" />
<a-timeline pending="...">
@@ -44,7 +45,6 @@
</ul>
</a-timeline-item>
-->
-
<!--
它叫 faye's theme 出自高瞰/的独立游戏(寻找天堂)
--
Gitblit v1.9.1