Spaces:
Running
Running
update fps
Browse files
src/components/SegmentationSidebar.vue
CHANGED
@@ -29,6 +29,25 @@
|
|
29 |
{{ video.name }}
|
30 |
</div>
|
31 |
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
32 |
</div>
|
33 |
</template>
|
34 |
|
@@ -41,7 +60,8 @@ export default {
|
|
41 |
data() {
|
42 |
const videoStore = useVideoStore()
|
43 |
return {
|
44 |
-
videoStore
|
|
|
45 |
}
|
46 |
},
|
47 |
|
@@ -96,6 +116,10 @@ export default {
|
|
96 |
selectVideo(video) {
|
97 |
this.videoStore.setSelectedVideo(video)
|
98 |
this.$emit('video-selected', video)
|
|
|
|
|
|
|
|
|
99 |
}
|
100 |
}
|
101 |
}
|
@@ -214,4 +238,43 @@ export default {
|
|
214 |
.video-item.active {
|
215 |
background: #3a3a3a;
|
216 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
217 |
</style>
|
|
|
29 |
{{ video.name }}
|
30 |
</div>
|
31 |
</div>
|
32 |
+
|
33 |
+
<!-- Sélecteur de FPS -->
|
34 |
+
<div class="fps-selector">
|
35 |
+
<select
|
36 |
+
id="fps-select"
|
37 |
+
v-model="selectedFps"
|
38 |
+
@change="updateFps"
|
39 |
+
class="fps-select"
|
40 |
+
>
|
41 |
+
<option value="15">15 FPS</option>
|
42 |
+
<option value="24">24 FPS</option>
|
43 |
+
<option value="25">25 FPS</option>
|
44 |
+
<option value="30">30 FPS</option>
|
45 |
+
<option value="50">50 FPS</option>
|
46 |
+
<option value="60">60 FPS</option>
|
47 |
+
<option value="120">120 FPS</option>
|
48 |
+
</select>
|
49 |
+
</div>
|
50 |
+
|
51 |
</div>
|
52 |
</template>
|
53 |
|
|
|
60 |
data() {
|
61 |
const videoStore = useVideoStore()
|
62 |
return {
|
63 |
+
videoStore,
|
64 |
+
selectedFps: videoStore.fps || 25 // Utiliser la valeur du store ou 25 par défaut
|
65 |
}
|
66 |
},
|
67 |
|
|
|
116 |
selectVideo(video) {
|
117 |
this.videoStore.setSelectedVideo(video)
|
118 |
this.$emit('video-selected', video)
|
119 |
+
},
|
120 |
+
|
121 |
+
updateFps() {
|
122 |
+
this.videoStore.setFps(parseInt(this.selectedFps))
|
123 |
}
|
124 |
}
|
125 |
}
|
|
|
238 |
.video-item.active {
|
239 |
background: #3a3a3a;
|
240 |
}
|
241 |
+
|
242 |
+
.fps-selector {
|
243 |
+
display: flex;
|
244 |
+
flex-direction: column;
|
245 |
+
gap: 8px;
|
246 |
+
padding: 12px;
|
247 |
+
border-radius: 8px;
|
248 |
+
}
|
249 |
+
|
250 |
+
.fps-label {
|
251 |
+
color: white;
|
252 |
+
font-size: 0.9rem;
|
253 |
+
font-weight: 500;
|
254 |
+
}
|
255 |
+
|
256 |
+
.fps-select {
|
257 |
+
background: #363636;
|
258 |
+
border: 1px solid #555;
|
259 |
+
border-radius: 4px;
|
260 |
+
color: white;
|
261 |
+
padding: 8px;
|
262 |
+
font-size: 0.9rem;
|
263 |
+
cursor: pointer;
|
264 |
+
transition: border-color 0.2s ease;
|
265 |
+
}
|
266 |
+
|
267 |
+
.fps-select:hover {
|
268 |
+
border-color: #777;
|
269 |
+
}
|
270 |
+
|
271 |
+
.fps-select:focus {
|
272 |
+
outline: none;
|
273 |
+
border-color: #4CAF50;
|
274 |
+
}
|
275 |
+
|
276 |
+
.fps-select option {
|
277 |
+
background: #363636;
|
278 |
+
color: white;
|
279 |
+
}
|
280 |
</style>
|
src/components/TimelineSection.vue
CHANGED
@@ -92,6 +92,9 @@ export default {
|
|
92 |
},
|
93 |
|
94 |
mounted() {
|
|
|
|
|
|
|
95 |
// Ajouter un écouteur d'événement pour les touches Entrée et Espace
|
96 |
this.keyboardListener = (event) => {
|
97 |
if (event.key === ' ' || event.code === 'Space') {
|
@@ -128,6 +131,29 @@ export default {
|
|
128 |
}
|
129 |
},
|
130 |
immediate: true
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
131 |
}
|
132 |
},
|
133 |
|
@@ -140,7 +166,8 @@ export default {
|
|
140 |
// Mettre à jour les propriétés locales
|
141 |
this.duration = duration
|
142 |
this.videoElement = videoElement
|
143 |
-
|
|
|
144 |
|
145 |
// Mettre à jour le frameRate dans le store d'annotation
|
146 |
if (this.annotationStore.currentSession) {
|
|
|
92 |
},
|
93 |
|
94 |
mounted() {
|
95 |
+
// Synchroniser le frameRate avec le store au démarrage
|
96 |
+
this.frameRate = this.videoStore.fps || 25
|
97 |
+
|
98 |
// Ajouter un écouteur d'événement pour les touches Entrée et Espace
|
99 |
this.keyboardListener = (event) => {
|
100 |
if (event.key === ' ' || event.code === 'Space') {
|
|
|
131 |
}
|
132 |
},
|
133 |
immediate: true
|
134 |
+
},
|
135 |
+
|
136 |
+
// Watcher pour les changements de FPS
|
137 |
+
'videoStore.fps': {
|
138 |
+
handler(newFps) {
|
139 |
+
if (newFps && newFps !== this.frameRate) {
|
140 |
+
console.log('FPS changé de', this.frameRate, 'à', newFps)
|
141 |
+
|
142 |
+
// Mettre à jour le frameRate
|
143 |
+
this.frameRate = newFps
|
144 |
+
|
145 |
+
// Recalculer la frame actuelle basée sur le nouveau FPS
|
146 |
+
this.currentFrame = this.getCurrentFrame()
|
147 |
+
|
148 |
+
// Mettre à jour le frameRate dans le store d'annotation
|
149 |
+
if (this.annotationStore.currentSession) {
|
150 |
+
this.annotationStore.currentSession.frameRate = this.frameRate
|
151 |
+
}
|
152 |
+
|
153 |
+
console.log('Frame actuelle après changement de FPS:', this.currentFrame)
|
154 |
+
}
|
155 |
+
},
|
156 |
+
immediate: true
|
157 |
}
|
158 |
},
|
159 |
|
|
|
166 |
// Mettre à jour les propriétés locales
|
167 |
this.duration = duration
|
168 |
this.videoElement = videoElement
|
169 |
+
// Utiliser le FPS du store plutôt que celui détecté de la vidéo
|
170 |
+
this.frameRate = this.videoStore.fps || frameRate || 25
|
171 |
|
172 |
// Mettre à jour le frameRate dans le store d'annotation
|
173 |
if (this.annotationStore.currentSession) {
|