diff --git a/src/app/play/page.tsx b/src/app/play/page.tsx
index 05348a3..fe6f195 100644
--- a/src/app/play/page.tsx
+++ b/src/app/play/page.tsx
@@ -1975,48 +1975,13 @@ function PlayPageClient() {
},
});
artPlayerRef.current.setting.update({
- name: '设置片头',
- html: '设置片头',
- icon: '',
+ name: '跳过配置',
+ html: '跳过配置',
+ icon: '',
tooltip:
- skipConfigRef.current.intro_time === 0
- ? '设置片头时间'
- : `${formatTime(skipConfigRef.current.intro_time)}`,
- onClick: function () {
- const currentTime = artPlayerRef.current?.currentTime || 0;
- if (currentTime > 0) {
- const newConfig = {
- ...skipConfigRef.current,
- intro_time: currentTime,
- };
- handleSkipConfigChange(newConfig);
- return `${formatTime(currentTime)}`;
- }
- },
- });
- artPlayerRef.current.setting.update({
- name: '设置片尾',
- html: '设置片尾',
- icon: '',
- tooltip:
- skipConfigRef.current.outro_time >= 0
- ? '设置片尾时间'
- : `-${formatTime(-skipConfigRef.current.outro_time)}`,
- onClick: function () {
- const outroTime =
- -(
- artPlayerRef.current?.duration -
- artPlayerRef.current?.currentTime
- ) || 0;
- if (outroTime < 0) {
- const newConfig = {
- ...skipConfigRef.current,
- outro_time: outroTime,
- };
- handleSkipConfigChange(newConfig);
- return `-${formatTime(-outroTime)}`;
- }
- },
+ skipConfigRef.current.intro_time === 0 && skipConfigRef.current.outro_time === 0
+ ? '设置跳过配置'
+ : `片头: ${formatTime(skipConfigRef.current.intro_time)} | 片尾: ${formatTime(Math.abs(skipConfigRef.current.outro_time))}`,
});
} catch (settingErr) {
console.warn('更新播放器设置失败:', settingErr);
@@ -3918,63 +3883,166 @@ function PlayPageClient() {
},
},
{
- html: '删除跳过配置',
- onClick: function () {
- handleSkipConfigChange({
- enable: false,
- intro_time: 0,
- outro_time: 0,
- });
- return '';
- },
- },
- {
- name: '设置片头',
- html: '设置片头',
- icon: '',
+ name: '跳过配置',
+ html: '跳过配置',
+ icon: '',
tooltip:
- skipConfigRef.current.intro_time === 0
- ? '设置片头时间'
- : `${formatTime(skipConfigRef.current.intro_time)}`,
- onClick: function () {
- // 安全地获取当前播放时间，避免循环依赖
+ skipConfigRef.current.intro_time === 0 && skipConfigRef.current.outro_time === 0
+ ? '设置跳过配置'
+ : `片头: ${formatTime(skipConfigRef.current.intro_time)} | 片尾: ${formatTime(Math.abs(skipConfigRef.current.outro_time))}`,
+ onClick: async function () {
const player = artPlayerRef.current;
- if (player && player.currentTime) {
- const currentTime = player.currentTime || 0;
- if (currentTime > 0) {
+ if (player) {
+ // 如果处于全屏状态，先退出全屏
+ if (player.fullscreen) {
+ player.fullscreen = false;
+ // 等待全屏退出动画完成
+ await new Promise(resolve => setTimeout(resolve, 300));
+ }
+
+ // 使用 ArtPlayer 的 prompt 功能创建输入弹窗
+ const currentIntro = skipConfigRef.current.intro_time || 0;
+ const currentOutro = Math.abs(skipConfigRef.current.outro_time) || 0;
+
+ // 创建一个自定义的提示框
+ const container = document.createElement('div');
+ container.style.cssText = `
+ position: fixed;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ background: rgba(0, 0, 0, 0.9);
+ padding: 20px;
+ border-radius: 8px;
+ z-index: 9999;
+ min-width: 300px;
+ box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
+ `;
+
+ container.innerHTML = `
+
+ 跳过配置
+
+
+ 设置片头片尾跳过时间，到达时间自动跳过
+
+
+
+
+
+
+
+
+
+
💡 提示：
+
• 点击"当前时间"可快速设置为播放位置
+
• 片头90秒表示跳过前1分30秒
+
• 片尾120秒表示跳过最后2分钟
+
+
+
+
+
+
+ `;
+
+ document.body.appendChild(container);
+
+ const introInput = container.querySelector('#intro-input') as HTMLInputElement;
+ const outroInput = container.querySelector('#outro-input') as HTMLInputElement;
+ const setIntroBtn = container.querySelector('#set-intro-btn');
+ const setOutroBtn = container.querySelector('#set-outro-btn');
+ const cancelBtn = container.querySelector('#cancel-btn');
+ const clearBtn = container.querySelector('#clear-btn');
+ const confirmBtn = container.querySelector('#confirm-btn');
+
+ const cleanup = () => {
+ document.body.removeChild(container);
+ };
+
+ // 设置片头为当前时间
+ setIntroBtn?.addEventListener('click', () => {
+ const currentTime = player.currentTime || 0;
+ if (currentTime > 0) {
+ introInput.value = Math.floor(currentTime).toString();
+ }
+ });
+
+ // 设置片尾为当前时间到结束的时长
+ setOutroBtn?.addEventListener('click', () => {
+ if (player.duration && player.currentTime) {
+ const outroTime = player.duration - player.currentTime;
+ if (outroTime > 0) {
+ outroInput.value = Math.floor(outroTime).toString();
+ }
+ }
+ });
+
+ cancelBtn?.addEventListener('click', cleanup);
+
+ clearBtn?.addEventListener('click', () => {
+ handleSkipConfigChange({
+ enable: false,
+ intro_time: 0,
+ outro_time: 0,
+ });
+ cleanup();
+ });
+
+ confirmBtn?.addEventListener('click', () => {
+ const introTime = parseFloat(introInput.value) || 0;
+ const outroTime = parseFloat(outroInput.value) || 0;
+
const newConfig = {
...skipConfigRef.current,
- intro_time: currentTime,
+ intro_time: introTime,
+ outro_time: outroTime > 0 ? -outroTime : 0,
};
+
handleSkipConfigChange(newConfig);
- return `${formatTime(currentTime)}`;
- }
- }
- return '';
- },
- },
- {
- name: '设置片尾',
- html: '设置片尾',
- icon: '',
- tooltip:
- skipConfigRef.current.outro_time >= 0
- ? '设置片尾时间'
- : `-${formatTime(-skipConfigRef.current.outro_time)}`,
- onClick: function () {
- // 安全地获取播放器时长和当前时间，避免循环依赖
- const player = artPlayerRef.current;
- if (player && player.duration && player.currentTime) {
- const outroTime =
- -(player.duration - player.currentTime) || 0;
- if (outroTime < 0) {
- const newConfig = {
- ...skipConfigRef.current,
- outro_time: outroTime,
- };
- handleSkipConfigChange(newConfig);
- return `-${formatTime(-outroTime)}`;
- }
+ cleanup();
+ });
+
+ // 支持 Enter 键确认
+ const handleEnter = (e: KeyboardEvent) => {
+ if (e.key === 'Enter') {
+ confirmBtn?.dispatchEvent(new Event('click'));
+ } else if (e.key === 'Escape') {
+ cancelBtn?.dispatchEvent(new Event('click'));
+ }
+ };
+
+ introInput.addEventListener('keydown', handleEnter);
+ outroInput.addEventListener('keydown', handleEnter);
}
return '';
},