Spaces:
Running
Running
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>
|