Selaa lähdekoodia

feat(live-stream): add current play time display to timeline progress

- Implemented a visual indicator for the current play time during playback on the timeline.
- Enhanced the styling of the progress time display for better visibility and user experience.
- Updated the timeline progress component to reflect the current play time dynamically.
yb 2 päivää sitten
vanhempi
commit
b1912a0425
1 muutettua tiedostoa jossa 43 lisäystä ja 3 poistoa
  1. 43 3
      src/views/live-stream/index.vue

+ 43 - 3
src/views/live-stream/index.vue

@@ -304,7 +304,12 @@
                 <!-- 时间轴轨道 -->
                 <div :class="['timeline-track', { 'is-playing': isTimelinePlaying }]" ref="timelineTrackRef">
                   <!-- 时间轴进度指示器 -->
-                  <div class="timeline-progress" :style="{ width: `${timelineProgress}%` }"></div>
+                  <div class="timeline-progress" :style="{ width: `${timelineProgress}%` }">
+                    <!-- 巡航时显示当前时间 -->
+                    <div v-if="isTimelinePlaying" class="progress-time">
+                      {{ formatTimelineTime(currentPlayTime) }}
+                    </div>
+                  </div>
                   <!-- 关键点 - 竖线风格 -->
                   <div
                     v-for="point in timelinePoints"
@@ -760,6 +765,10 @@ const timelinePoints = ref<TimelinePoint[]>([])
 const selectedPoint = ref<TimelinePoint | null>(null)
 const isTimelinePlaying = ref(false)
 const timelineProgress = ref(0)
+// 当前播放时间(秒)
+const currentPlayTime = computed(() => {
+  return Math.round((timelineProgress.value / 100) * timelineDuration.value)
+})
 const savingPreset = ref(false)
 const isLoopEnabled = ref(false) // 是否循环巡航
 let timelinePlayAbort: AbortController | null = null
@@ -2410,6 +2419,33 @@ onMounted(async () => {
       border-radius: 2px 0 0 2px;
       pointer-events: none;
       transition: width 0.3s ease;
+
+      // 当前播放时间显示
+      .progress-time {
+        position: absolute;
+        right: 0;
+        top: calc(100% + 4px);
+        transform: translateX(50%);
+        background: #ef4444;
+        color: #fff;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 11px;
+        font-weight: 600;
+        white-space: nowrap;
+        pointer-events: none;
+        z-index: 15;
+
+        &::before {
+          content: '';
+          position: absolute;
+          bottom: 100%;
+          left: 50%;
+          transform: translateX(-50%);
+          border: 4px solid transparent;
+          border-bottom-color: #ef4444;
+        }
+      }
     }
 
     // 圆形打点
@@ -2460,8 +2496,12 @@ onMounted(async () => {
       }
 
       &.passed {
-        background: #22c55e; // 巡航走过 - 绿色
-        box-shadow: 0 0 8px rgba(34, 197, 94, 0.6);
+        background: #818cf8; // 巡航走过 - 主题色(紫蓝色)
+        box-shadow: 0 0 8px rgba(129, 140, 248, 0.6);
+
+        .point-number {
+          color: #fff;
+        }
       }
 
       &.dragging {