File size: 1,706 Bytes
b4f9490
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<template>
  <div class="video-progress">
    <div 
      class="timeline-bar"
      ref="timelineBar"
      @click="handleTimelineClick"
    >
      <div 
        class="progress-indicator"
        :style="{ left: `${(currentTime / duration) * 100}%` }"
      ></div>
    </div>
    <div class="time-display">
      {{ formatTime(currentTime) }} / {{ formatTime(duration) }}
    </div>
  </div>
</template>

<script>
export default {
  name: 'VideoProgressTimeline',
  
  props: {
    duration: {
      type: Number,
      required: true
    },
    currentTime: {
      type: Number,
      required: true
    }
  },

  methods: {
    handleTimelineClick(event) {
      const rect = this.$refs.timelineBar.getBoundingClientRect()
      const clickPosition = event.clientX - rect.left
      const percentage = clickPosition / rect.width
      const newTime = this.duration * percentage
      this.$emit('seek', newTime)
    },

    formatTime(seconds) {
      const minutes = Math.floor(seconds / 60)
      const remainingSeconds = Math.floor(seconds % 60)
      return `${minutes}:${remainingSeconds.toString().padStart(2, '0')}`
    }
  }
}
</script>

<style scoped>
.video-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.timeline-bar {
  height: 8px;
  background: #666666;
  border-radius: 4px;
  position: relative;
  cursor: pointer;
}

.progress-indicator {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #4CAF50;
  border-radius: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.time-display {
  color: #ffffff;
  font-size: 0.875rem;
  text-align: center;
}
</style>