mirror of
https://github.com/BTMuli/TeyvatGuide.git
synced 2025-12-14 09:38:13 +08:00
103 lines
3.4 KiB
TypeScript
103 lines
3.4 KiB
TypeScript
/**
|
||
* @file utils MysParse.ts
|
||
* @description 用于解析Mys数据的工具
|
||
* @author BTMuli<bt-muli@outlook.com>
|
||
* @since Alpha
|
||
*/
|
||
|
||
/**
|
||
* @description 解析Mys数据
|
||
* @param {string} data Mys数据
|
||
* @description 为了安全考虑，不会解析所有的属性，只会解析几个常用的属性
|
||
* @returns {Document} 解析后的 HTML 文档
|
||
*/
|
||
export function parseMys(data: string): Document {
|
||
// Json 化
|
||
let jsonData = JSON.parse(data);
|
||
while (typeof jsonData === "string") jsonData = JSON.parse(jsonData);
|
||
// 创建 HTML 文档
|
||
const doc = document.implementation.createHTMLDocument();
|
||
// 遍历 Json 数据
|
||
jsonData.forEach((item: any) => {
|
||
if (item.insert.image) {
|
||
// 创建 div
|
||
const div = document.createElement("div");
|
||
// 创建图片
|
||
const img = document.createElement("img");
|
||
img.src = item.insert.image;
|
||
// 设置图片属性
|
||
img.height = item.attributes.height; // 设置高度
|
||
img.width = item.attributes.width; // 设置宽度
|
||
// 如果宽度超过 800，将其设置为 800，图片自适应
|
||
if (img.width > 800) img.width = 800;
|
||
// 高度自适应
|
||
img.style.height = "auto";
|
||
// 插入图片
|
||
div.appendChild(img);
|
||
// 设置 div 属性
|
||
div.style.display = "center"; // 居中
|
||
div.style.margin = "20px auto"; // 设置 margin
|
||
// 插入 div
|
||
doc.body.appendChild(div);
|
||
} else if (item.insert.vod) {
|
||
// 创建 div
|
||
const div = document.createElement("div");
|
||
// 创建视频
|
||
const video = document.createElement("video");
|
||
// 获取最高分辨率的视频
|
||
let resolution;
|
||
// 获取 resolutions中definition="1080P"的视频
|
||
resolution = item.insert.vod.resolutions.find(
|
||
(resolution: any) => resolution.definition === "1080P"
|
||
);
|
||
if (!resolution) {
|
||
// 如果没有找到，就获取720P的视频
|
||
resolution = item.insert.vod.resolutions.find(
|
||
(resolution: any) => resolution.definition === "720P"
|
||
);
|
||
}
|
||
if (!resolution) {
|
||
// 如果还是没有找到，就获取第一个
|
||
resolution = item.insert.vod.resolutions[0];
|
||
}
|
||
// 设置一些属性
|
||
video.poster = item.insert.vod.cover; // 设置封面
|
||
video.width = resolution.width > 800 ? 800 : resolution.width; // 设置宽度（取最高分辨率的宽度）
|
||
video.height = resolution.width > 800 ? 450 : resolution.height; // 设置高度（取最高分辨率的高度）
|
||
video.controls = true; // 设置 controls
|
||
// 添加 source
|
||
const source = document.createElement("source");
|
||
source.src = resolution.url;
|
||
source.type = resolution.format === ".mp4" ? "video/mp4" : "video/webm";
|
||
video.appendChild(source);
|
||
// 添加 controls
|
||
video.controls = true;
|
||
// 插入 video
|
||
div.appendChild(video);
|
||
// 设置 div 属性
|
||
div.style.display = "center"; // 居中
|
||
div.style.margin = "20px auto"; // 设置 margin
|
||
// 插入 div
|
||
doc.body.appendChild(div);
|
||
} else if (typeof item.insert === "string") {
|
||
// 创建文本
|
||
const text = document.createElement("span");
|
||
// 设置文本属性
|
||
// 创建 style string
|
||
if (item.attributes) {
|
||
let styleString = "";
|
||
if (item.attributes.color) styleString += `color: ${item.attributes.color};`;
|
||
// 设置 style
|
||
text.style.cssText = styleString;
|
||
}
|
||
text.innerText = item.insert; // 设置文本
|
||
// 插入文本
|
||
doc.body.appendChild(text);
|
||
}
|
||
});
|
||
// doc 宽度设为 800,居中
|
||
doc.body.style.width = "800px";
|
||
doc.body.style.margin = "20px auto";
|
||
return doc;
|
||
}
|