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

This commit is contained in:
xudan 2025-10-09 18:14:42 +08:00
parent b49d662e72
commit 6a5a72828f

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')}`;
};
const currentTimeFormatted = computed(() => formatTime(pendingSeekTime.value ?? props.currentTime));
const currentTimeFormatted = computed(() => formatTime(props.currentTime));
const totalDurationFormatted = computed(() => formatTime(props.totalDuration));
// seek
const pendingSeekTime = ref<number | null>(null);
// currentTime
watch(
() => props.currentTime,
() => {
pendingSeekTime.value = null;
},
);
const playheadPosition = computed(() => {
const viewDuration = viewEndTime.value - viewStartTime.value;
if (viewDuration <= 0) return '0%';
const current = pendingSeekTime.value ?? props.currentTime;
const current = props.currentTime;
const relativeTime = current - viewStartTime.value;
const clamped = Math.min(Math.max(relativeTime, 0), viewDuration);
return `${(clamped / viewDuration) * 100}%`;
@ -116,7 +105,6 @@ const handleHourChange = (newHour: number) => {
const newTime = newHour * HOUR_IN_MS;
//
const clampedTime = Math.min(newTime, props.totalDuration);
pendingSeekTime.value = clampedTime;
emit('seek', clampedTime);
};
@ -140,7 +128,6 @@ const handleTimelineClick = (event: MouseEvent) => {
const ratio = clampedX / effectiveWidth;
const viewDuration = viewEndTime.value - viewStartTime.value;
const targetTime = Math.floor(viewStartTime.value + ratio * viewDuration);
pendingSeekTime.value = targetTime;
emit('seek', targetTime);
//
const clickedHour = Math.floor(targetTime / HOUR_IN_MS);