PointTrackApp / src /components /SegmentationSidebar.vue
2nzi's picture
update fps
3890d0d verified
<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>