xudan/web-map
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 优化播放控制器中的时间格式化逻辑，移除不必要的乐观显示状态，简化代码结构

Browse Source
This commit is contained in:
xudan 2025-10-09 18:14:42 +08:00
parent b49d662e72
commit 6a5a72828f
1 changed files with 2 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

17
src/components/PlaybackController.vue
View File

@ -62,24 +62,13 @@ const formatTime = (ms: number): string => {
return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`; return `${String(hours).padStart(2, '0')}:${String(minutes).padStart(2, '0')}:${String(seconds).padStart(2, '0')}`;
}; };
const currentTimeFormatted = computed(() => formatTime(pendingSeekTime.value ?? props.currentTime)); const currentTimeFormatted = computed(() => formatTime(props.currentTime));
const totalDurationFormatted = computed(() => formatTime(props.totalDuration)); const totalDurationFormatted = computed(() => formatTime(props.totalDuration));
// 本地“乐观显示”的时间：在 seek 后先行展示，待实际时间变更后清空
const pendingSeekTime = ref<number | null>(null);
// 同步清理：当外部 currentTime 改变时，移除乐观显示
watch(
() => props.currentTime,
() => {
pendingSeekTime.value = null;
},
);
const playheadPosition = computed(() => { const playheadPosition = computed(() => {
const viewDuration = viewEndTime.value - viewStartTime.value; const viewDuration = viewEndTime.value - viewStartTime.value;
if (viewDuration <= 0) return '0%'; if (viewDuration <= 0) return '0%';
const current = pendingSeekTime.value ?? props.currentTime; const current = props.currentTime;
const relativeTime = current - viewStartTime.value; const relativeTime = current - viewStartTime.value;
const clamped = Math.min(Math.max(relativeTime, 0), viewDuration); const clamped = Math.min(Math.max(relativeTime, 0), viewDuration);
return `${(clamped / viewDuration) * 100}%`; return `${(clamped / viewDuration) * 100}%`;
@ -116,7 +105,6 @@ const handleHourChange = (newHour: number) => {
const newTime = newHour * HOUR_IN_MS; const newTime = newHour * HOUR_IN_MS;
// 确保搜寻时间不超过总时长 // 确保搜寻时间不超过总时长
const clampedTime = Math.min(newTime, props.totalDuration); const clampedTime = Math.min(newTime, props.totalDuration);
pendingSeekTime.value = clampedTime;
emit('seek', clampedTime); emit('seek', clampedTime);
}; };
@ -140,7 +128,6 @@ const handleTimelineClick = (event: MouseEvent) => {
const ratio = clampedX / effectiveWidth; const ratio = clampedX / effectiveWidth;
const viewDuration = viewEndTime.value - viewStartTime.value; const viewDuration = viewEndTime.value - viewStartTime.value;
const targetTime = Math.floor(viewStartTime.value + ratio * viewDuration); const targetTime = Math.floor(viewStartTime.value + ratio * viewDuration);
pendingSeekTime.value = targetTime;
emit('seek', targetTime); emit('seek', targetTime);
// 点击发生后，立即更新所选小时，保持左侧小时选择与视窗一致 // 点击发生后，立即更新所选小时，保持左侧小时选择与视窗一致
const clickedHour = Math.floor(targetTime / HOUR_IN_MS); const clickedHour = Math.floor(targetTime / HOUR_IN_MS);