2nzi commited on
Commit
4147607
·
verified ·
1 Parent(s): 636d817

upload csv

Browse files
Files changed (1) hide show
  1. src/views/SegmentationView.vue +132 -132
src/views/SegmentationView.vue CHANGED
@@ -1,132 +1,132 @@
1
- <template>
2
- <div class="segmentation-view">
3
- <!-- Sidebar de segmentation -->
4
- <SegmentationSidebar
5
- class="sidebar"
6
- @video-selected="selectVideo"
7
- />
8
-
9
- <div class="main-content">
10
- <!-- Grille 2x2 avec les 4 sections -->
11
- <div class="grid-container">
12
- <!-- Ligne du haut -->
13
- <VideoSection class="video-section grid-item" />
14
- <ZoomSection class="zoom-section grid-item" />
15
-
16
- <!-- Ligne du bas -->
17
- <VideoTimeline class="video-timeline grid-item" />
18
- <EnrichedSection class="enriched-section grid-item" />
19
- </div>
20
- </div>
21
- </div>
22
- </template>
23
-
24
- <script>
25
- import SegmentationSidebar from '@/components/SegmentationSidebar.vue'
26
- import VideoSection from '@/components/VideoSection.vue'
27
- import VideoTimeline from '@/components/VideoTimeline.vue'
28
- import ZoomSection from '@/components/ZoomSection.vue'
29
- import EnrichedSection from '@/components/EnrichedSection.vue'
30
- import { useVideoStore } from '@/stores/videoStore'
31
-
32
- export default {
33
- name: 'SegmentationView',
34
-
35
- components: {
36
- SegmentationSidebar,
37
- VideoSection,
38
- VideoTimeline,
39
- ZoomSection,
40
- EnrichedSection
41
- },
42
-
43
- setup() {
44
- const videoStore = useVideoStore()
45
- return {
46
- videoStore
47
- }
48
- },
49
-
50
- async mounted() {
51
- // Charger une vidéo par défaut si aucune n'est sélectionnée
52
- if (!this.videoStore.selectedVideo) {
53
- await this.loadDefaultVideo()
54
- }
55
- },
56
-
57
- methods: {
58
- async selectVideo(video) {
59
- await this.videoStore.setSelectedVideo(video)
60
- },
61
-
62
- async loadDefaultVideo() {
63
- // Créer une vidéo par défaut avec la vidéo de football
64
- try {
65
- const defaultVideo = {
66
- name: 'football.mp4',
67
- path: require('@/assets/football.mp4'),
68
- type: 'video/mp4',
69
- isDefault: true,
70
- size: 0
71
- }
72
- await this.videoStore.setSelectedVideo(defaultVideo)
73
- console.log('Vidéo par défaut chargée:', defaultVideo.name)
74
- } catch (error) {
75
- console.error('Erreur lors du chargement de la vidéo par défaut:', error)
76
- }
77
- }
78
- }
79
- }
80
- </script>
81
-
82
- <style scoped>
83
- .segmentation-view {
84
- display: flex;
85
- height: 100vh;
86
- background: #1a1a1a;
87
- }
88
-
89
- .sidebar {
90
- width: 200px;
91
- border-right: 1px solid #333;
92
- }
93
-
94
- .main-content {
95
- flex: 1;
96
- display: flex;
97
- flex-direction: column;
98
- padding: 8px;
99
- background: #2A2A2A;
100
- }
101
-
102
- .grid-container {
103
- flex: 1;
104
- display: grid;
105
- grid-template-columns: 3fr 1fr;
106
- grid-template-rows: 1fr 1fr;
107
- gap: 8px;
108
- min-height: 0;
109
- }
110
-
111
- .grid-item {
112
- background: #2a2a2a;
113
- border-radius: 8px;
114
- overflow: hidden;
115
- }
116
-
117
- .video-section {
118
- /* Section vidéo principale - haut gauche */
119
- }
120
-
121
- .zoom-section {
122
- /* Section zoom - haut droite */
123
- }
124
-
125
- .enriched-section {
126
- /* Section enriched - bas droite */
127
- }
128
-
129
- .video-timeline {
130
- /* Timeline vidéo - bas gauche */
131
- }
132
- </style>
 
1
+ <template>
2
+ <div class="segmentation-view">
3
+ <!-- Sidebar de segmentation -->
4
+ <SegmentationSidebar
5
+ class="sidebar"
6
+ @video-selected="selectVideo"
7
+ />
8
+
9
+ <div class="main-content">
10
+ <!-- Grille 2x2 avec les 4 sections -->
11
+ <div class="grid-container">
12
+ <!-- Ligne du haut -->
13
+ <VideoSection class="video-section grid-item" />
14
+ <ZoomSection class="zoom-section grid-item" />
15
+
16
+ <!-- Ligne du bas -->
17
+ <VideoTimeline class="video-timeline grid-item" />
18
+ <EnrichedSection class="enriched-section grid-item" />
19
+ </div>
20
+ </div>
21
+ </div>
22
+ </template>
23
+
24
+ <script>
25
+ import SegmentationSidebar from '@/components/SegmentationSidebar.vue'
26
+ import VideoSection from '@/components/VideoSection.vue'
27
+ import VideoTimeline from '@/components/VideoTimeline.vue'
28
+ import ZoomSection from '@/components/ZoomSection.vue'
29
+ import EnrichedSection from '@/components/EnrichedSection.vue'
30
+ import { useVideoStore } from '@/stores/videoStore'
31
+
32
+ export default {
33
+ name: 'SegmentationView',
34
+
35
+ components: {
36
+ SegmentationSidebar,
37
+ VideoSection,
38
+ VideoTimeline,
39
+ ZoomSection,
40
+ EnrichedSection
41
+ },
42
+
43
+ setup() {
44
+ const videoStore = useVideoStore()
45
+ return {
46
+ videoStore
47
+ }
48
+ },
49
+
50
+ async mounted() {
51
+ // Charger une vidéo par défaut si aucune n'est sélectionnée
52
+ if (!this.videoStore.selectedVideo) {
53
+ await this.loadDefaultVideo()
54
+ }
55
+ },
56
+
57
+ methods: {
58
+ async selectVideo(video) {
59
+ await this.videoStore.setSelectedVideo(video)
60
+ },
61
+
62
+ async loadDefaultVideo() {
63
+ // Créer une vidéo par défaut avec la vidéo de football
64
+ try {
65
+ const defaultVideo = {
66
+ name: 'football.mp4',
67
+ path: require('@/assets/football.mp4'),
68
+ type: 'video/mp4',
69
+ isDefault: true,
70
+ size: 0
71
+ }
72
+ await this.videoStore.setSelectedVideo(defaultVideo)
73
+ console.log('Vidéo par défaut chargée:', defaultVideo.name)
74
+ } catch (error) {
75
+ console.error('Erreur lors du chargement de la vidéo par défaut:', error)
76
+ }
77
+ }
78
+ }
79
+ }
80
+ </script>
81
+
82
+ <style scoped>
83
+ .segmentation-view {
84
+ display: flex;
85
+ height: 100vh;
86
+ background: #1a1a1a;
87
+ }
88
+
89
+ .sidebar {
90
+ width: 200px;
91
+ border-right: 1px solid #333;
92
+ }
93
+
94
+ .main-content {
95
+ flex: 1;
96
+ display: flex;
97
+ flex-direction: column;
98
+ padding: 8px;
99
+ background: #2A2A2A;
100
+ }
101
+
102
+ .grid-container {
103
+ flex: 1;
104
+ display: grid;
105
+ grid-template-columns: 3fr 1fr;
106
+ grid-template-rows: 1fr 1fr;
107
+ gap: 8px;
108
+ min-height: 0;
109
+ }
110
+
111
+ .grid-item {
112
+ background: #2a2a2a;
113
+ border-radius: 8px;
114
+ overflow: hidden;
115
+ }
116
+
117
+ .video-section {
118
+ /* Section vidéo principale - haut gauche */
119
+ }
120
+
121
+ .zoom-section {
122
+ /* Section zoom - haut droite */
123
+ }
124
+
125
+ .enriched-section {
126
+ /* Section enriched - bas droite */
127
+ }
128
+
129
+ .video-timeline {
130
+ /* Timeline vidéo - bas gauche */
131
+ }
132
+ </style>