update personnal fps

src/components/SegmentationSidebar.vue

@@ -65,6 +65,7 @@
 
             <!-- Sélecteur de FPS -->
             <div class="fps-selector">
+              <label for="fps-select" class="fps-label">FPS prédéfini</label>
               <select 
                 id="fps-select"
                 v-model="selectedFps" 
@@ -79,6 +80,27 @@
                 <option value="60">60 FPS</option>
                 <option value="120">120 FPS</option>
               </select>
+              <div class="custom-fps">
+                <label for="custom-fps-input">FPS personnalisé</label>
+                <div class="custom-fps-row">
+                  <input
+                    id="custom-fps-input"
+                    type="number"
+                    min="1"
+                    step="0.01"
+                    v-model="customFps"
+                    @keydown.enter="applyCustomFps"
+                    class="fps-input"
+                    placeholder="ex: 29.97"
+                  />
+                  <button class="apply-fps-btn" @click="applyCustomFps" title="Appliquer" aria-label="Appliquer">
+                    <svg width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
+                      <path d="M20 6L9 17l-5-5"/>
+                    </svg>
+                  </button>
+                </div>
+                <p v-if="fpsError" class="fps-error">{{ fpsError }}</p>
+              </div>
             </div>
           </div>
 
@@ -225,6 +247,8 @@ export default {
       videoStore,
       annotationStore,
              selectedFps: videoStore.fps || 25,
+       customFps: '',
+       fpsError: '',
        currentViewIndex: 0,
        transitionName: 'slide-right',
        uploadedConfig: null,
@@ -331,7 +355,36 @@ export default {
     },
 
     updateFps() {
-      this.videoStore.setFps(parseInt(this.selectedFps))
+      const parsed = parseFloat(String(this.selectedFps))
+      this.videoStore.setFps(parsed)
+      if (this.annotationStore.currentSession) {
+        this.annotationStore.currentSession.frameRate = parsed
+        if (this.annotationStore.currentSession.metadata) {
+          this.annotationStore.currentSession.metadata.fps = parsed
+        }
+      }
+    },
+
+    applyCustomFps() {
+      this.fpsError = ''
+      const value = typeof this.customFps === 'string' ? this.customFps.replace(',', '.') : this.customFps
+      const parsed = parseFloat(value)
+      if (isNaN(parsed)) {
+        this.fpsError = 'Veuillez entrer un nombre valide.'
+        return
+      }
+      if (parsed <= 0 || parsed > 1000) {
+        this.fpsError = 'La valeur doit être > 0 et raisonnable (< 1000).'
+        return
+      }
+      this.videoStore.setFps(parsed)
+      this.selectedFps = String(parsed)
+      if (this.annotationStore.currentSession) {
+        this.annotationStore.currentSession.frameRate = parsed
+        if (this.annotationStore.currentSession.metadata) {
+          this.annotationStore.currentSession.metadata.fps = parsed
+        }
+      }
     },
 
     // Config upload methods
@@ -816,6 +869,8 @@ export default {
   gap: 8px;
   padding: 12px;
   border-radius: 8px;
+  background: #424242;
+  color: white;
 }
 
 .fps-select {
@@ -833,6 +888,76 @@ export default {
   border-color: #4CAF50;
 }
 
+.custom-fps {
+  display: flex;
+  flex-direction: column;
+  gap: 6px;
+}
+
+.custom-fps-row {
+  display: grid;
+  grid-template-columns: 1fr 36px;
+  gap: 8px;
+  align-items: center;
+}
+
+.fps-input {
+  background: #363636;
+  border: 1px solid #555;
+  border-radius: 4px;
+  color: white;
+  padding: 8px 12px;
+  font-size: 0.9rem;
+  width: 100%;
+  height: 36px;
+  appearance: textfield;
+  -webkit-appearance: none;
+  min-width: 0;
+}
+
+/* Masquer les flèches du type number (Chrome/Edge) */
+.fps-input::-webkit-outer-spin-button,
+.fps-input::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+/* Masquer les flèches du type number (Firefox) */
+.fps-input[type="number"] {
+  -moz-appearance: textfield;
+  appearance: textfield;
+}
+
+.apply-fps-btn {
+  background: #424242;
+  border: 1px solid #555;
+  border-radius: 4px;
+  color: white;
+  padding: 0;
+  font-size: 0.9rem;
+  cursor: pointer;
+  height: 36px;
+  width: 36px;
+  white-space: nowrap;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.apply-fps-btn:hover {
+  background: #4a4a4a;
+}
+
+.fps-error {
+  color: #ff7675;
+  font-size: 0.8rem;
+}
+
+.fps-label {
+  color: #ccc;
+  font-size: 0.8rem;
+}
+
 /* Config Upload Page Styles */
 .config-upload-page {
   display: flex;