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>