src/components/SegmentationSidebar.vue

<template>
  <div class="segmentation-sidebar">
    <button class="upload-video-btn" @click="uploadVideo">
      <span>Upload Video</span>
      <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor">
        <path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/>
        <path d="m17 8-5-5-5 5"/>
        <path d="M12 3v12"/>
      </svg>
    </button>
    
    <!-- Input file caché -->
    <input 
      ref="fileInput" 
      type="file" 
      accept="video/*" 
      @change="handleVideoUpload" 
      style="display: none;"
    />

    <div class="video-list" v-if="videoStore.videos.length">
      <div 
        v-for="video in videoStore.videos" 
        :key="video.path"
        class="video-item"
        :class="{ active: videoStore.selectedVideo?.path === video.path }"
        @click="selectVideo(video)"
      >
        {{ 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>

<script>
import { useVideoStore } from '../stores/videoStore'

export default {
  name: 'SegmentationSidebar',

  data() {
    const videoStore = useVideoStore()
    return {
      videoStore,
      selectedFps: videoStore.fps || 25 // Utiliser la valeur du store ou 25 par défaut
    }
  },

  watch: {
    'videoStore.selectedVideo': {
      handler(newVideo) {
        console.log('Vidéo sélectionnée:', newVideo)
      },
      deep: true
    }
  },

  mounted() {
    // Plus besoin de charger un dossier par défaut - l'utilisateur uploadera une vidéo
    console.log('SegmentationSidebar mounted - prêt pour l\'upload de vidéo')
  },

  methods: {
    uploadVideo() {
      // Déclencher le clic sur l'input file caché
      this.$refs.fileInput.click()
    },

    handleVideoUpload(event) {
      const file = event.target.files[0]
      if (file) {
        console.log('Vidéo sélectionnée:', file.name)
        
        // Créer un URL blob pour la vidéo
        const videoUrl = URL.createObjectURL(file)
        
        // Créer un objet vidéo pour le store
        const videoObject = {
          name: file.name,
          path: videoUrl,
          file: file,
          size: file.size,
          type: file.type
        }
        
        // Mettre à jour le store avec la nouvelle vidéo
        this.videoStore.setVideos([videoObject])
        this.videoStore.setSelectedVideo(videoObject)
        
        // Émettre l'événement pour informer les autres composants
        this.$emit('video-selected', videoObject)
        
        console.log('Vidéo uploadée et sélectionnée:', videoObject)
      }
    },

    selectVideo(video) {
      this.videoStore.setSelectedVideo(video)
      this.$emit('video-selected', video)
    },

    updateFps() {
      this.videoStore.setFps(parseInt(this.selectedFps))
    }
  }
}
</script>

<style scoped>
.segmentation-sidebar {
  background: #363636;
  height: 100%;
  width: 200px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.navigation-menu {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 8px;
}

.nav-item {
  display: flex;
  align-items: center;
  padding: 12px;
  color: white;
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
  background: #424242;
}

.nav-item:hover {
  background: #4a4a4a;
}

.nav-item.active {
  background: #3a3a3a;
  color: #4CAF50;
}

.nav-icon {
  margin-right: 12px;
  font-size: 1.2rem;
}

.nav-text {
  font-size: 0.9rem;
}

.upload-video-btn {
  background: #424242;
  border: none;
  border-radius: 8px;
  color: white;
  padding: 12px 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  font-size: 1rem;
  flex-shrink: 0;
  transition: background-color 0.2s ease;
}

.upload-video-btn:hover {
  background: #4a4a4a;
}

.video-list {
  height: 20vh;
  background: #424242;
  border-radius: 8px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 4px;
}

/* Styles pour Firefox */
.video-list {
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

/* Styles pour Chrome/Safari/Edge */
.video-list::-webkit-scrollbar {
  width: 4px;
}

.video-list::-webkit-scrollbar-track {
  background: transparent;
}

.video-list::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 2px;
}

.video-item {
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  color: white;
  transition: background-color 0.2s;
}

.video-item:hover {
  background: #4a4a4a;
}

.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>