File size: 3,001 Bytes
b4f9490
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
<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>