feat: 添加控制栏按钮开关功能并优化缩放逻辑

- 添加控制栏按钮的显示开关配置选项,实现根据设置动态添加/移除按钮
- 优化缩放逻辑,添加SCALE_MAPPING常量并实现循环切换预设缩放比例
- 移除不常用的50%和200%缩放选项,简化预设列表
- 缩短默认Toast显示时间从3秒至1.5秒
This commit is contained in:
weedy233 2025-09-04 18:17:00 +08:00
parent 8f34721551
commit 4455da6e20
No known key found for this signature in database
GPG Key ID: 27A2575D0916FDD7
2 changed files with 87 additions and 21 deletions

View File

@ -1,26 +1,15 @@
import { ScalePreset } from './types'
// 缩放比例预设选项数组
export const SCALE_PRESETS = [
'50%',
'75%',
'100%',
'110%',
'125%',
'150%',
'200%',
'自定义',
] as const
export const SCALE_PRESETS = ['75%', '100%', '110%', '125%', '150%', '自定义'] as const
// 缩放比例映射表
export const SCALE_MAPPING: Record<ScalePreset, number> = {
'50%': 0.5,
'75%': 0.75,
'100%': 1.0,
'110%': 1.1,
'125%': 1.25,
'150%': 1.5,
'200%': 2.0,
自定义: 1.0,
}
@ -33,7 +22,7 @@ export const CUSTOM_SCALE_CONFIG = {
// Toast显示时间配置
export const TOAST_DURATION_CONFIG = {
defaultValue: 3.0, // 默认显示3
defaultValue: 1.5, // 默认显示1.5
min: 0.5, // 最小0.5秒
max: 5.0, // 最大5秒
step: 0.5, // 步长0.5秒

View File

@ -1,11 +1,13 @@
import { addComponentListener } from '@/core/settings'
import { videoChange } from '@/core/observer'
import { defineComponentMetadata } from '@/components/define'
import { componentsTags } from '@/components/component'
import { videoChange } from '@/core/observer'
import { addControlBarButton } from '@/components/video/video-control-bar'
import { ScaleState, applyScale, updateScaleFromSettings } from './scale-service'
import { showScaleToast, cleanupToasts, handleError } from './ui-utils'
import {
CUSTOM_SCALE_CONFIG,
SCALE_MAPPING,
SCALE_PRESETS,
TOAST_DURATION_CONFIG,
NO_TOAST_TIME_THRESHOLD,
@ -55,18 +57,18 @@ export const component = defineComponentMetadata({
displayName: '显示缩放提示',
},
toastDuration: toastDurationOption,
showControlBarButton: {
defaultValue: true,
displayName: '显示控制栏按钮',
},
},
entry: async ({ settings }) => {
// 缩放状态管理
const scaleState = new ScaleState()
// 记录页面加载时间
const pageLoadTime = Date.now()
// 初始化时根据showToast状态设置toastDuration的可见性
toastDurationOption.hidden = !settings.options.showToast
// 监听showToast变化动态控制toastDuration的可见性
const onShowToastChange = (showToast: boolean) => {
toastDurationOption.hidden = !showToast
}
@ -149,14 +151,89 @@ export const component = defineComponentMetadata({
handleError('导入observer', error)
}
// 清理函数,在组件卸载时调用
// 添加控制栏按钮开关的监听器
let controlBarButtonAdded = false
const toggleControlBarButton = async (showButton: boolean) => {
try {
if (showButton && !controlBarButtonAdded) {
await addControlBarButton({
name: 'videoScaling',
displayName: '视频缩放',
icon: 'mdi-magnify',
order: 100,
action: async () => {
console.log('视频缩放按钮被点击!')
try {
// 获取当前的缩放比例
const currentScale = scaleState.get()
console.log(`当前缩放比例: ${currentScale}`)
// 创建不包含"自定义"的预设比例数组
const presetScales = SCALE_PRESETS.filter(preset => preset !== '自定义')
// 找到当前缩放比例在数组中的索引
let currentIndex = -1
for (let i = 0; i < presetScales.length; i++) {
if (SCALE_MAPPING[presetScales[i]] === currentScale) {
currentIndex = i
break
}
}
// 如果找不到完全匹配的缩放比例,从当前最接近的比例开始
if (currentIndex === -1) {
console.log('未找到完全匹配的预设比例从100%开始')
currentIndex = presetScales.indexOf('100%')
}
// 计算下一个缩放比例的索引(循环)
const nextIndex = (currentIndex + 1) % presetScales.length
const nextPreset = presetScales[nextIndex]
const nextScale = SCALE_MAPPING[nextPreset]
console.log(
`将缩放比例从 ${currentScale} (${presetScales[currentIndex]}) 调整为 ${nextScale} (${nextPreset})`,
)
// 更新设置中的缩放预设
settings.options.scalePreset = nextPreset
// 应用新的缩放比例
await applyScaleAndShowToast(nextScale)
} catch (error) {
console.error('视频缩放: 循环切换缩放倍数时出错', error)
}
},
})
controlBarButtonAdded = true
console.log('视频缩放控制栏按钮已添加')
} else if (!showButton && controlBarButtonAdded) {
controlBarButtonAdded = false
console.log('视频缩放控制栏按钮已移除')
}
} catch (error) {
handleError('切换视频缩放控制栏按钮显示状态', error)
}
}
// 添加showControlBarButton设置的监听器
addComponentListener('videoScaling.showControlBarButton', toggleControlBarButton)
// 初始化时根据设置决定是否添加控制栏按钮
try {
if (settings.options.showControlBarButton) {
await toggleControlBarButton(true)
}
} catch (error) {
handleError('初始化视频缩放控制栏按钮', error)
}
return () => {
// 清理所有toast元素
cleanupToasts()
}
},
reload: () => {
// 重新加载组件时执行清理
cleanupToasts()
},
})