diff --git a/src/assets/css/post-parser.css b/src/assets/css/post-parser.css index b97544e2..4ab8c790 100644 --- a/src/assets/css/post-parser.css +++ b/src/assets/css/post-parser.css @@ -2,8 +2,7 @@ * @file assets css post-parser.css * @description 米游社解析 css * @todo 需要完善 - * @author BTMuli - * @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; diff --git a/src/plugins/Mys/utils/parsePost.ts b/src/plugins/Mys/utils/parsePost.ts index e7e8821f..d02508da 100644 --- a/src/plugins/Mys/utils/parsePost.ts +++ b/src/plugins/Mys/utils/parsePost.ts @@ -1,11 +1,9 @@ /** * @file plugins Mys utils parsePost.ts * @description 用于解析Mys数据的工具 - * @author BTMuli - * @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");