Spaces:
Running
Running
<template> | |
<div class="segmentation-sidebar"> | |
<button class="upload-video-btn" @click="uploadVideo"> | |
<span>Upload Video</span> | |
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor"> | |
<path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/> | |
<path d="m17 8-5-5-5 5"/> | |
<path d="M12 3v12"/> | |
</svg> | |
</button> | |
<!-- Input file caché --> | |
<input | |
ref="fileInput" | |
type="file" | |
accept="video/*" | |
@change="handleVideoUpload" | |
style="display: none;" | |
/> | |
<div class="video-list" v-if="videoStore.videos.length"> | |
<div | |
v-for="video in videoStore.videos" | |
:key="video.path" | |
class="video-item" | |
:class="{ active: videoStore.selectedVideo?.path === video.path }" | |
@click="selectVideo(video)" | |
> | |
{{ video.name }} | |
</div> | |
</div> | |
<!-- Sélecteur de FPS --> | |
<div class="fps-selector"> | |
<select | |
id="fps-select" | |
v-model="selectedFps" | |
@change="updateFps" | |
class="fps-select" | |
> | |
<option value="15">15 FPS</option> | |
<option value="24">24 FPS</option> | |
<option value="25">25 FPS</option> | |
<option value="30">30 FPS</option> | |
<option value="50">50 FPS</option> | |
<option value="60">60 FPS</option> | |
<option value="120">120 FPS</option> | |
</select> | |
</div> | |
</div> | |
</template> | |
<script> | |
import { useVideoStore } from '../stores/videoStore' | |
export default { | |
name: 'SegmentationSidebar', | |
data() { | |
const videoStore = useVideoStore() | |
return { | |
videoStore, | |
selectedFps: videoStore.fps || 25 // Utiliser la valeur du store ou 25 par défaut | |
} | |
}, | |
watch: { | |
'videoStore.selectedVideo': { | |
handler(newVideo) { | |
console.log('Vidéo sélectionnée:', newVideo) | |
}, | |
deep: true | |
} | |
}, | |
mounted() { | |
// Plus besoin de charger un dossier par défaut - l'utilisateur uploadera une vidéo | |
console.log('SegmentationSidebar mounted - prêt pour l\'upload de vidéo') | |
}, | |
methods: { | |
uploadVideo() { | |
// Déclencher le clic sur l'input file caché | |
this.$refs.fileInput.click() | |
}, | |
handleVideoUpload(event) { | |
const file = event.target.files[0] | |
if (file) { | |
console.log('Vidéo sélectionnée:', file.name) | |
// Créer un URL blob pour la vidéo | |
const videoUrl = URL.createObjectURL(file) | |
// Créer un objet vidéo pour le store | |
const videoObject = { | |
name: file.name, | |
path: videoUrl, | |
file: file, | |
size: file.size, | |
type: file.type | |
} | |
// Mettre à jour le store avec la nouvelle vidéo | |
this.videoStore.setVideos([videoObject]) | |
this.videoStore.setSelectedVideo(videoObject) | |
// Émettre l'événement pour informer les autres composants | |
this.$emit('video-selected', videoObject) | |
console.log('Vidéo uploadée et sélectionnée:', videoObject) | |
} | |
}, | |
selectVideo(video) { | |
this.videoStore.setSelectedVideo(video) | |
this.$emit('video-selected', video) | |
}, | |
updateFps() { | |
this.videoStore.setFps(parseInt(this.selectedFps)) | |
} | |
} | |
} | |
</script> | |
<style scoped> | |
.segmentation-sidebar { | |
background: #363636; | |
height: 100%; | |
width: 200px; | |
padding: 16px; | |
display: flex; | |
flex-direction: column; | |
gap: 16px; | |
} | |
.navigation-menu { | |
display: flex; | |
flex-direction: column; | |
gap: 8px; | |
margin-bottom: 8px; | |
} | |
.nav-item { | |
display: flex; | |
align-items: center; | |
padding: 12px; | |
color: white; | |
text-decoration: none; | |
border-radius: 8px; | |
transition: all 0.2s ease; | |
background: #424242; | |
} | |
.nav-item:hover { | |
background: #4a4a4a; | |
} | |
.nav-item.active { | |
background: #3a3a3a; | |
color: #4CAF50; | |
} | |
.nav-icon { | |
margin-right: 12px; | |
font-size: 1.2rem; | |
} | |
.nav-text { | |
font-size: 0.9rem; | |
} | |
.upload-video-btn { | |
background: #424242; | |
border: none; | |
border-radius: 8px; | |
color: white; | |
padding: 12px 16px; | |
cursor: pointer; | |
display: flex; | |
align-items: center; | |
justify-content: space-between; | |
width: 100%; | |
font-size: 1rem; | |
flex-shrink: 0; | |
transition: background-color 0.2s ease; | |
} | |
.upload-video-btn:hover { | |
background: #4a4a4a; | |
} | |
.video-list { | |
height: 20vh; | |
background: #424242; | |
border-radius: 8px; | |
overflow-y: auto; | |
display: flex; | |
flex-direction: column; | |
gap: 4px; | |
padding: 4px; | |
} | |
/* Styles pour Firefox */ | |
.video-list { | |
scrollbar-width: thin; | |
scrollbar-color: rgba(255, 255, 255, 0.3) transparent; | |
} | |
/* Styles pour Chrome/Safari/Edge */ | |
.video-list::-webkit-scrollbar { | |
width: 4px; | |
} | |
.video-list::-webkit-scrollbar-track { | |
background: transparent; | |
} | |
.video-list::-webkit-scrollbar-thumb { | |
background: rgba(255, 255, 255, 0.3); | |
border-radius: 2px; | |
} | |
.video-item { | |
padding: 8px 12px; | |
border-radius: 4px; | |
cursor: pointer; | |
color: white; | |
transition: background-color 0.2s; | |
} | |
.video-item:hover { | |
background: #4a4a4a; | |
} | |
.video-item.active { | |
background: #3a3a3a; | |
} | |
.fps-selector { | |
display: flex; | |
flex-direction: column; | |
gap: 8px; | |
padding: 12px; | |
border-radius: 8px; | |
} | |
.fps-label { | |
color: white; | |
font-size: 0.9rem; | |
font-weight: 500; | |
} | |
.fps-select { | |
background: #363636; | |
border: 1px solid #555; | |
border-radius: 4px; | |
color: white; | |
padding: 8px; | |
font-size: 0.9rem; | |
cursor: pointer; | |
transition: border-color 0.2s ease; | |
} | |
.fps-select:hover { | |
border-color: #777; | |
} | |
.fps-select:focus { | |
outline: none; | |
border-color: #4CAF50; | |
} | |
.fps-select option { | |
background: #363636; | |
color: white; | |
} | |
</style> |