Fun/TeyvatGuide
1
0
Fork 0
mirror of https://github.com/BTMuli/TeyvatGuide.git synced 2025-12-12 09:18:14 +08:00
Code Issues Packages Projects Releases Wiki Activity

✨ 粗略处理视频截图 #44

Browse Source
This commit is contained in:
BTMuli
2023-10-10 13:51:42 +08:00
parent 146f3404f0
commit fa22a45bb1
2 changed files with 46 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

35
src/assets/css/post-parser.css
View File

@@ -2,8 +2,7 @@
* @file assets css post-parser.css
* @description 米游社解析 css
* @todo 需要完善
* @author BTMuli <bt-muli@outlook.com>
* @since Beta v0.3.0
* @since Beta v0.3.3
*/
.mys-post-body {
@@ -28,6 +27,7 @@
}
:deep(.mys-post-div) {
position: relative;
margin: 10px auto;
}
@@ -73,6 +73,37 @@
border-radius: 10px;
}
:deep(.mys-post-vod-cover-div) {
position: absolute;
z-index: -1;
top: 0;
left: 0;
width: 800px;
height: 450px;
border-radius: 10px;
}
:deep(.mys-post-vod-cover) {
width: 800px;
height: 450px;
border-radius: 10px;
}
:deep(.mys-post-vod-icon) {
position: absolute;
top: calc(50% - 40px);
left: calc(50% - 40px);
width: 80px;
height: 80px;
border-radius: 50%;
backdrop-filter: blur(5px);
background: rgba(0, 0, 0, 0.5);
color: #fff;
font-size: 50px;
line-height: 80px;
text-align: center;
}
:deep(.mys-post-iframe) {
overflow: hidden;
width: 800px;

17
src/plugins/Mys/utils/parsePost.ts
View File

@@ -1,11 +1,9 @@
/**
* @file plugins Mys utils parsePost.ts
* @description 用于解析Mys数据的工具
* @author BTMuli <bt-muli@outlook.com>
* @since Beta v0.3.2
* @since Beta v0.3.3
*/
// third party
import { score } from "wcag-color";
import * as colorConvert from "color-convert";
@@ -311,7 +309,7 @@ function parseImage(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLDivElem
/**
* @description 解析视频
* @since Beta v0.3.0
* @since Beta v0.3.3
* @param {TGApp.Plugins.Mys.Post.StructuredContent} data Mys数据
* @returns {HTMLDivElement} 解析后的视频
*/
@@ -345,6 +343,17 @@ function parseVideo(data: TGApp.Plugins.Mys.Post.StructuredContent): HTMLDivElem
video.appendChild(source);
// 插入 video
div.appendChild(video);
// 创建视频封面图
const coverDiv = document.createElement("div");
const cover = document.createElement("img");
cover.classList.add("mys-post-vod-cover");
cover.src = video.poster;
coverDiv.appendChild(cover);
const playIcon = document.createElement("div");
playIcon.classList.add("mdi", "mdi-play-circle-outline", "mys-post-vod-icon");
coverDiv.appendChild(playIcon);
coverDiv.classList.add("mys-post-vod-cover-div");
div.appendChild(coverDiv);
} else if (data.insert.video) {
// 创建 iframe
const video = document.createElement("iframe");