upload csv

src/views/SegmentationView.vue

@@ -1,132 +1,132 @@
-<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>
+<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>