update fps

src/components/SegmentationSidebar.vue

@@ -29,6 +29,25 @@
         {{ video.name }}
       </div>
     </div>
+
+    <!-- Sélecteur de FPS -->
+    <div class="fps-selector">
+      <select 
+        id="fps-select"
+        v-model="selectedFps" 
+        @change="updateFps"
+        class="fps-select"
+      >
+        <option value="15">15 FPS</option>
+        <option value="24">24 FPS</option>
+        <option value="25">25 FPS</option>
+        <option value="30">30 FPS</option>
+        <option value="50">50 FPS</option>
+        <option value="60">60 FPS</option>
+        <option value="120">120 FPS</option>
+      </select>
+    </div>
+
   </div>
 </template>
 
@@ -41,7 +60,8 @@ export default {
   data() {
     const videoStore = useVideoStore()
     return {
-      videoStore
+      videoStore,
+      selectedFps: videoStore.fps || 25 // Utiliser la valeur du store ou 25 par défaut
     }
   },
 
@@ -96,6 +116,10 @@ export default {
     selectVideo(video) {
       this.videoStore.setSelectedVideo(video)
       this.$emit('video-selected', video)
+    },
+
+    updateFps() {
+      this.videoStore.setFps(parseInt(this.selectedFps))
     }
   }
 }
@@ -214,4 +238,43 @@ export default {
 .video-item.active {
   background: #3a3a3a;
 }
+
+.fps-selector {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  padding: 12px;
+  border-radius: 8px;
+}
+
+.fps-label {
+  color: white;
+  font-size: 0.9rem;
+  font-weight: 500;
+}
+
+.fps-select {
+  background: #363636;
+  border: 1px solid #555;
+  border-radius: 4px;
+  color: white;
+  padding: 8px;
+  font-size: 0.9rem;
+  cursor: pointer;
+  transition: border-color 0.2s ease;
+}
+
+.fps-select:hover {
+  border-color: #777;
+}
+
+.fps-select:focus {
+  outline: none;
+  border-color: #4CAF50;
+}
+
+.fps-select option {
+  background: #363636;
+  color: white;
+}
 </style> 

src/components/TimelineSection.vue

@@ -92,6 +92,9 @@ export default {
   },
   
   mounted() {
+    // Synchroniser le frameRate avec le store au démarrage
+    this.frameRate = this.videoStore.fps || 25
+    
     // Ajouter un écouteur d'événement pour les touches Entrée et Espace
     this.keyboardListener = (event) => {
       if (event.key === ' ' || event.code === 'Space') {
@@ -128,6 +131,29 @@ export default {
         }
       },
       immediate: true
+    },
+    
+    // Watcher pour les changements de FPS
+    'videoStore.fps': {
+      handler(newFps) {
+        if (newFps && newFps !== this.frameRate) {
+          console.log('FPS changé de', this.frameRate, 'à', newFps)
+          
+          // Mettre à jour le frameRate
+          this.frameRate = newFps
+          
+          // Recalculer la frame actuelle basée sur le nouveau FPS
+          this.currentFrame = this.getCurrentFrame()
+          
+          // Mettre à jour le frameRate dans le store d'annotation
+          if (this.annotationStore.currentSession) {
+            this.annotationStore.currentSession.frameRate = this.frameRate
+          }
+          
+          console.log('Frame actuelle après changement de FPS:', this.currentFrame)
+        }
+      },
+      immediate: true
     }
   },
   
@@ -140,7 +166,8 @@ export default {
         // Mettre à jour les propriétés locales
         this.duration = duration
         this.videoElement = videoElement
-        this.frameRate = frameRate || 30 // Utiliser 30 fps par défaut si non spécifié
+        // Utiliser le FPS du store plutôt que celui détecté de la vidéo
+        this.frameRate = this.videoStore.fps || frameRate || 25
         
         // Mettre à jour le frameRate dans le store d'annotation
         if (this.annotationStore.currentSession) {