davidl/jav-play
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactored the player button component, updated the button display logic, and deleted the unused style files

Browse Source
This commit is contained in:
asimov
2025-05-28 15:04:25 +12:00
parent 845a721e01
commit ac1bcd7ef5
7 changed files with 214 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
components/NavigationButtons.css Normal file
View File

@@ -0,0 +1,22 @@
.wxt-nav-button {
position: fixed;
right: 0px;
z-index: 9999;
display: flex;
align-items: center;
gap: 5px;
background-color: #28a745; /* 导航按钮使用绿色以作区分 */
color: white;
padding: 5px 10px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
cursor: pointer;
transition: transform 0.2s ease-in-out, background-color 0.2s ease;
}
.wxt-nav-button:hover {
transform: scale(1.05);
}

55
components/NavigationButtons.ts Normal file
View File

@@ -0,0 +1,55 @@
import './NavigationButtons.css';
/**
* 创建或更新一个浮动导航按钮。
* 此按钮在新标签页中打开链接。
*/
function createOrUpdateNavButton(id: string, name: string, iconClass: string, url: string, topPosition: string) {
let button = document.getElementById(id) as HTMLAnchorElement | null;
if (!button) {
button = document.createElement('a');
button.id = id;
button.className = 'wxt-nav-button';
button.innerHTML = `
<i class="${iconClass}"></i>
<span>${name}</span>
`;
// 关键：设置在新标签页打开
button.target = '_blank';
// 安全性最佳实践
button.rel = 'noopener noreferrer';
document.body.appendChild(button);
}
button.href = url;
button.style.top = topPosition;
button.style.display = 'flex';
}
function hideButton(id: string) {
const button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
const MISSAV_BUTTON_ID = 'wxt-missav-nav-button';
/**
* 添加或更新 MissAV 导航按钮。
* @param videoNumber - 视频番号 (例如, 'IPX-811')。
*/
export function addOrUpdateNavigationButtons(videoNumber: string) {
const missavUrl = `https://missav.ws/${videoNumber.toLowerCase()}`;
createOrUpdateNavButton(MISSAV_BUTTON_ID, 'MissAV', 'icon-play', missavUrl, '200px');
}
/**
* 隐藏所有的导航按钮。
*/
export function hideNavigationButtons() {
hideButton(MISSAV_BUTTON_ID);
}

27
components/PlayerButtons.css Normal file
View File

@@ -0,0 +1,27 @@
.wxt-player-button {
/* 定位和层级 */
position: fixed;
right: 0px;
z-index: 9999;
/* 外观和布局 */
display: flex;
align-items: center;
gap: 5px;
background-color: #3173dc; /* 播放器按钮使用蓝色 */
color: white;
padding: 5px 10px;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
font-size: 14px;
font-weight: 500;
text-decoration: none;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
/* 交互效果 */
cursor: pointer;
transition: transform 0.2s ease-in-out, background-color 0.2s ease;
}
.wxt-player-button:hover {
transform: scale(1.05);
}

124
components/PlayerButtons.ts
View File

@@ -1,72 +1,66 @@
import './PlayerButtons.css';
/**
* 创建或更新一个浮动播放器按钮。
* @param id - 按钮元素的 ID。
* @param name - 按钮上显示的文本。
* @param iconClass - 按钮图标的 CSS 类。
* @param url - 按钮点击后跳转的 URL。
* @param topPosition - 按钮的 CSS 'top' 属性值。
*/
function createOrUpdateButton(id: string, name:string, iconClass: string, url: string, topPosition: string) {
let button = document.getElementById(id) as HTMLAnchorElement | null;
if (!button) {
button = document.createElement('a');
button.id = id;
button.className = 'wxt-player-button'; // 为所有播放器按钮使用一个通用类名
button.innerHTML = `
<i class="${iconClass}"></i>
<span>${name}</span>
`;
document.body.appendChild(button);
// 添加点击事件监听器
button.addEventListener('click', (e) => {
e.preventDefault(); // 阻止 <a> 标签的默认跳转行为
window.location.href = button!.href;
});
}
// 更新按钮的链接和位置
button.href = url;
button.style.top = topPosition;
button.style.display = 'flex'; // 确保按钮可见
let button = document.getElementById(id) as HTMLAnchorElement | null;
if (!button) {
button = document.createElement('a');
button.id = id;
button.className = 'wxt-player-button';
button.innerHTML = `
<i class="${iconClass}"></i>
<span>${name}</span>
`;
document.body.appendChild(button);
button.addEventListener('click', (e) => {
e.preventDefault();
window.location.href = button!.href;
});
}
/**
* 隐藏指定的播放器按钮。
* @param id - 要隐藏的按钮的 ID。
*/
function hideButton(id: string) {
const button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
button.href = url;
button.style.top = topPosition;
button.style.display = 'flex';
}
/**
* 隐藏指定的播放器按钮。
*/
function hideButton(id: string) {
const button = document.getElementById(id);
if (button) {
button.style.display = 'none';
}
}
// 定义按钮的常量 ID
const IINA_BUTTON_ID = 'wxt-iina-floating-button';
const POTPLAYER_BUTTON_ID = 'wxt-potplayer-floating-button';
/**
* 添加或更新播放器按钮。
* @param missavUUID - 用于生成播放链接的 UUID。
*/
export function addOrUpdatePlayerButtons(missavUUID: string) {
const playlistUrl = `https://surrit.com/${missavUUID}/playlist.m3u8`;
// 定义按钮的常量 ID
const IINA_BUTTON_ID = 'wxt-iina-floating-button';
const POTPLAYER_BUTTON_ID = 'wxt-potplayer-floating-button';
/**
* 添加或更新 IINA 和 PotPlayer 的浮动按钮。
* @param missavUUID - 用于生成播放链接的 UUID。
*/
export function addOrUpdatePlayerButtons(missavUUID: string) {
const playlistUrl = `https://surrit.com/${missavUUID}/playlist.m3u8`;
// IINA 按钮
const iinaUrl = `iina://weblink?url=${playlistUrl}`;
createOrUpdateButton(IINA_BUTTON_ID, 'IINA', 'icon-play', iinaUrl, '100px');
// PotPlayer 按钮
const potplayerUrl = `potplayer://${playlistUrl}`;
createOrUpdateButton(POTPLAYER_BUTTON_ID, 'PotPlayer', 'icon-play', potplayerUrl, '150px');
}
/**
* 隐藏所有的播放器按钮。
*/
export function hidePlayerButtons() {
hideButton(IINA_BUTTON_ID);
hideButton(POTPLAYER_BUTTON_ID);
}
// IINA 按钮
const iinaUrl = `iina://weblink?url=${playlistUrl}`;
createOrUpdateButton(IINA_BUTTON_ID, 'IINA', 'icon-play', iinaUrl, '100px');
// PotPlayer 按钮
const potplayerUrl = `potplayer://${playlistUrl}`;
createOrUpdateButton(POTPLAYER_BUTTON_ID, 'PotPlayer', 'icon-play', potplayerUrl, '140px');
}
/**
* 隐藏所有的播放器按钮。
*/
export function hidePlayerButtons() {
hideButton(IINA_BUTTON_ID);
hideButton(POTPLAYER_BUTTON_ID);
}