src/views/SegmentationView.vue

<template>
  <div class="segmentation-view">
    <!-- Sidebar de segmentation -->
    <SegmentationSidebar 
      class="sidebar" 
      @video-selected="selectVideo"
    />

    <div class="main-content">
      <!-- Grille 2x2 avec les 4 sections -->
      <div class="grid-container">
        <!-- Ligne du haut -->
        <VideoSection class="video-section grid-item" />
        <ZoomSection class="zoom-section grid-item" />
        
        <!-- Ligne du bas -->
        <VideoTimeline class="video-timeline grid-item" />
        <EnrichedSection class="enriched-section grid-item" />
      </div>
    </div>
  </div>
</template>

<script>
import SegmentationSidebar from '@/components/SegmentationSidebar.vue'
import VideoSection from '@/components/VideoSection.vue'
import VideoTimeline from '@/components/VideoTimeline.vue'
import ZoomSection from '@/components/ZoomSection.vue'
import EnrichedSection from '@/components/EnrichedSection.vue'
import { useVideoStore } from '@/stores/videoStore'

export default {
  name: 'SegmentationView',
  
  components: {
    SegmentationSidebar,
    VideoSection,
    VideoTimeline,
    ZoomSection,
    EnrichedSection
  },

  setup() {
    const videoStore = useVideoStore()
    return {
      videoStore
    }
  },

  async mounted() {
    // Charger une vidéo par défaut si aucune n'est sélectionnée
    if (!this.videoStore.selectedVideo) {
      await this.loadDefaultVideo()
    }
  },

  methods: {
    async selectVideo(video) {
      await this.videoStore.setSelectedVideo(video)
    },

    async loadDefaultVideo() {
      // Créer une vidéo par défaut avec la vidéo de football
      try {
        const defaultVideo = {
          name: 'football.mp4',
          path: require('@/assets/football.mp4'),
          type: 'video/mp4',
          isDefault: true,
          size: 0
        }
        await this.videoStore.setSelectedVideo(defaultVideo)
        console.log('Vidéo par défaut chargée:', defaultVideo.name)
      } catch (error) {
        console.error('Erreur lors du chargement de la vidéo par défaut:', error)
      }
    }
  }
}
</script>

<style scoped>
.segmentation-view {
  display: flex;
  height: 100vh;
  background: #1a1a1a;
}

.sidebar {
  width: 200px;
  border-right: 1px solid #333;
}

.main-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 8px;
  background: #2A2A2A;
}

.grid-container {
  flex: 1;
  display: grid;
  grid-template-columns: 3fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 8px;
  min-height: 0;
}

.grid-item {
  background: #2a2a2a;
  border-radius: 8px;
  overflow: hidden;
}

.video-section {
  /* Section vidéo principale - haut gauche */
}

.zoom-section {
  /* Section zoom - haut droite */
}

.enriched-section {
  /* Section enriched - bas droite */
}

.video-timeline {
  /* Timeline vidéo - bas gauche */
}
</style>