pag-player
Version:
pag预览插件
247 lines (233 loc) • 7.12 kB
HTML
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>PAG Preview</title>
<script src="./pag.min.js"></script>
<style>
* {
margin: 0;
padding: 0;
border: 0;
}
body {
padding: 0 ;
}
.pag-player {
width: 100vw;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: #000;
padding: 20px;
box-sizing: border-box;
}
.pag-canvas {
width: 50vw;
max-height: 100vh;
object-fit: contain;
display: block;
background-image: linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20)), linear-gradient(45deg, rgb(20, 20, 20) 25%, transparent 25%, transparent 75%, rgb(20, 20, 20) 75%, rgb(20, 20, 20));
/* background-image: linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)), linear-gradient(45deg, rgb(230, 230, 230) 25%, transparent 25%, transparent 75%, rgb(230, 230, 230) 75%, rgb(230, 230, 230)); */
background-position: 0 0, 8px 8px;
background-size: 16px 16px;
border: 1px solid var(--vscode-imagePreview-border);
}
.button-container {
position: fixed;
left: 0;
right: 0;
margin: 0 auto;
bottom: 30px;
display: flex;
justify-content: center;
align-items: center;
}
.pag-btn {
width: 34px;
height: 34px;
border-radius: 5px;
margin: 4px;
border: 1px solid #909090;
}
.pag-btn-1 {
background-color: #000;
}
.pag-btn-2 {
background-color: #fff;
}
.pag-btn-3 {
background-color: #00bcd3;
}
.pag-play {
width: 100px;
position: fixed;
top: 20px;
right: 20px;
border: 1px solid #005ad9;
background-color: #005ad9;
color: #fff;
font-weight: 600;
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
padding: 0 16px;
height: 48px;
line-height: 48px;
border-radius: 8px;
text-align: center;
font-size: 18px;
}
#loading {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: #fff;
font-size: 20px;
}
</style>
</head>
<body>
<div class="pag-player">
<button onclick="playToggle()" class="pag-play">pause</button>
<canvas class="pag-canvas"></canvas>
<div id="loading">Loading...</div>
</div>
<div class="button-container">
<div class="pag-btn pag-btn-1" onclick="changeBg(1)"></div>
<div class="pag-btn pag-btn-2" onclick="changeBg(2)"></div>
<div class="pag-btn pag-btn-3" onclick="changeBg(3)"></div>
</div>
<script>
const vscode = acquireVsCodeApi();
// const theme = vscode.window.activeColorTheme.kind;
console.log('theme:', vscode);
let oldPlayingStatus = false;
const PAGView = libpag.PAGView;
const types = libpag.types;
const pagCanvasEl = document.querySelector('.pag-canvas');
const pagPlayer = document.querySelector('.pag-player');
const playRef = document.querySelector('.pag-play');
const loadingEl = document.getElementById("loading");
let pagView = null;
const renderingMode = types.RenderingMode.WebGL;
const BACKGROUND_COLORS = {
1: "#000",
2: "#FFF",
3: "#00bcd3",
};
window.addEventListener('message', async(event) => {
const message = event.data;
if (message.type === 'loadFile') {
const info = await initPag(message.fileUri).catch((err) => {
console.error('Failed to initialize PAG:', err);
});
if (!info) return;
// 发送 PAG 文件的宽高到 VSCode
vscode.postMessage({
type: "pagDimensions",
size: info.size,
width: info.width,
height: info.height,
duration: info.duration,
});
}
// if (message.type === 'getPagDimensions') {
// // 如果 VSCode 请求宽高信息，发送当前 PAG 文件的宽高
// if (pagView) {
// const bounds = pagView.getBounds();
// vscode.postMessage({
// type: "pagDimensions",
// width: bounds.width,
// height: bounds.height,
// });
// }
// }
if (message.type === "play") {
if (!oldPlayingStatus) return
if (!pagView.isPlaying()) {
pagView.play();
playRef.innerText = "pause";
}
} else if (message.type === "pause") {
oldPlayingStatus = pagView.isPlaying()
if (pagView.isPlaying()) {
pagView.pause();
playRef.innerText = "play";
}
}
if (message.type === "themeChange") {
const theme = message.theme;
console.log('theme:Change', theme);
}
});
const loadPag = async (url) => {
try {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return await response.arrayBuffer();
} catch (error) {
console.error("Failed to fetch PAG file:", error);
throw error;
}
};
const initPag = async (src) => {
try {
loadingEl.style.display = "block";
const pagBuffer = await loadPag(src);
loadingEl.style.display = "none";
// 获取文件大小
const fileSize = pagBuffer.byteLength;
console.log(`PAG 文件大小: ${fileSize} bytes`);
pagView = PAGView.init(pagBuffer, pagCanvasEl, {
renderingMode: renderingMode === 'webgl' ? types.RenderingMode.WebGL : types.RenderingMode.Canvas2D,
useScale: true,
});
const width = pagCanvasEl.width;
const height = pagCanvasEl.height;
console.log(`PAG 文件宽高: ${width} x ${height}`);
pagView.setRepeatCount(0);
await pagView.play();
return {
player: pagView,
buffer: pagBuffer,
size: fileSize,
width,
height,
duration: pagView.duration(),
}
} catch (error) {
loadingEl.style.display = "none";
console.error("Failed to initialize PAG:", error);
vscode.postMessage({ type: "error", message: error.message });
}
};
function playToggle() {
if (pagView.isPlaying()) {
pagView.pause();
playRef.innerText = "play";
} else {
pagView.play();
playRef.innerText = "pause";
}
}
function changeBg(type) {
if (BACKGROUND_COLORS[type]) {
pagPlayer.style.backgroundColor = BACKGROUND_COLORS[type];
}
}
window.addEventListener("unload", () => {
console.log('unload啦啦啦啦');
if (pagView) {
pagView.destroy();
}
});
</script>
</body>
</html>