fix(video-player): fix the video player to permit the nagivation through the video (it was because de fast api server refused range request)

frontend/src/views/VlogDetail.vue

@@ -18,23 +18,23 @@
     <div v-else>
       <!-- Header -->
       <div class="mb-8">
-        <div class="flex items-center justify-between mb-4">
+        <div class="flex flex-col sm:flex-row items-start sm:items-center justify-between mb-4 space-y-4 sm:space-y-0">
           <router-link to="/vlogs" class="text-primary-600 hover:text-primary-700 flex items-center">
             <ArrowLeft class="w-4 h-4 mr-2" />
             Retour aux vlogs
           </router-link>
           
-          <div v-if="canEdit" class="flex space-x-2">
+          <div v-if="canEdit" class="flex w-full sm:w-auto space-x-2">
             <button
               @click="showEditModal = true"
-              class="btn-secondary"
+              class="flex-1 sm:flex-none btn-secondary justify-center"
             >
               <Edit class="w-4 h-4 mr-2" />
               Modifier
             </button>
             <button
               @click="deleteVlog"
-              class="btn-secondary text-accent-600 hover:text-accent-700 hover:border-accent-300"
+              class="flex-1 sm:flex-none btn-secondary text-accent-600 hover:text-accent-700 hover:border-accent-300 justify-center"
             >
               <Trash2 class="w-4 h-4 mr-2" />
               Supprimer
@@ -42,9 +42,9 @@
           </div>
         </div>
         
-        <h1 class="text-4xl font-bold text-gray-900 mb-4">{{ vlog.title }}</h1>
+        <h1 class="text-2xl sm:text-4xl font-bold text-gray-900 mb-4">{{ vlog.title }}</h1>
         
-        <div class="flex items-center space-x-6 text-gray-600 mb-6">
+        <div class="flex flex-wrap items-center gap-4 text-sm sm:text-base text-gray-600 mb-6">
           <div class="flex items-center">
             <img
               v-if="vlog.author_avatar"
@@ -52,10 +52,10 @@
               :alt="vlog.author_name"
               class="w-8 h-8 rounded-full object-cover mr-3"
             >
-            <div v-else class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center mr-3">
+            <div v-else class="w-8 h-8 rounded-full bg-primary-100 flex items-center justify-center mr-2">
               <User class="w-4 h-4 text-primary-600" />
             </div>
-            <span>Par {{ vlog.author_name }}</span>
+            <span>{{ vlog.author_name }}</span>
           </div>
           
           <div class="flex items-center">
@@ -67,6 +67,11 @@
             <Eye class="w-4 h-4 mr-2" />
             <span>{{ vlog.views_count }} vue{{ vlog.views_count > 1 ? 's' : '' }}</span>
           </div>
+
+          <div class="flex items-center">
+            <RotateCcw class="w-4 h-4 mr-2" />
+            <span>{{ vlog.replays_count }} replay{{ vlog.replays_count > 1 ? 's' : '' }}</span>
+          </div>
           
           <div v-if="vlog.duration" class="flex items-center">
             <Clock class="w-4 h-4 mr-2" />
@@ -76,7 +81,7 @@
       </div>
 
       <!-- Video Player -->
-      <div class="card p-6 mb-8">
+      <div class="card p-0 sm:p-6 mb-8 overflow-hidden sm:overflow-visible">
         <VideoPlayer
           :src="vlog.video_url"
           :poster="vlog.thumbnail_url"
@@ -84,6 +89,7 @@
           :description="vlog.description"
           :duration="vlog.duration"
           :views-count="vlog.views_count"
+          :replays-count="vlog.replays_count"
           :likes-count="vlog.likes_count"
           :comments-count="vlog.comments?.length || 0"
           :is-liked="vlog.is_liked"
@@ -93,13 +99,13 @@
       </div>
 
       <!-- Description -->
-      <div v-if="vlog.description" class="card p-6 mb-8">
+      <div v-if="vlog.description" class="card p-4 sm:p-6 mb-8">
         <h2 class="text-xl font-semibold text-gray-900 mb-4">Description</h2>
         <p class="text-gray-700 whitespace-pre-wrap">{{ vlog.description }}</p>
       </div>
 
       <!-- Comments Section -->
-      <div class="card p-6 mb-8">
+      <div class="card p-4 sm:p-6 mb-8">
         <VlogComments
           :vlog-id="vlog.id"
           :comments="vlog.comments || []"
@@ -233,7 +239,8 @@ import {
   Edit,
   Trash2,
   Film,
-  Play
+  Play,
+  RotateCcw
 } from 'lucide-vue-next'
 import VideoPlayer from '@/components/VideoPlayer.vue'
 import VlogComments from '@/components/VlogComments.vue'
@@ -279,8 +286,9 @@ function formatDuration(seconds) {
 async function toggleLike() {
   try {
     const response = await axios.post(`/api/vlogs/${vlog.value.id}/like`)
-    // Refresh vlog data to get updated like count
-    await fetchVlog()
+    // Update local state without refreshing full vlog data (avoiding view increment)
+    vlog.value.likes_count = response.data.likes_count
+    vlog.value.is_liked = !vlog.value.is_liked
     toast.success(response.data.message)
   } catch (error) {
     toast.error('Erreur lors de la mise à jour du like')