video preview in shared single page

resources/js/components/FilePreview/FilePreviewMedia.vue

@@ -21,7 +21,7 @@
             <!--Show Audio, Video and Image-->
             <div class="w-full h-full flex items-center justify-center">
                 <Audio v-if="isAudio" :file="currentFile"/>
-                <Video v-if="isVideo" :file="currentFile" />
+                <Video v-if="isVideo" :file="currentFile" class="max-w-[1080px] max-h-full self-center mx-auto" />
                 <ImageFile v-if="isImage" :file="currentFile" class="max-w-[100%] max-h-[100%] self-center mx-auto" />
             </div>
         </div>

resources/js/components/FilePreview/Media/Video.vue

@@ -1,15 +1,13 @@
 <template>
-    <div class="max-w-[1080px] max-h-full">
-        <video
-            :src="file.data.attributes.file_url"
-            class="video"
-            :class="{ 'file-shadow': !$isMobile() }"
-            controlsList="nodownload"
-            disablePictureInPicture
-            playsinline
-            controls
-        />
-    </div>
+	<video
+		:src="file.data.attributes.file_url"
+		class="video"
+		:class="{ 'file-shadow': !$isMobile() }"
+		controlsList="nodownload"
+		disablePictureInPicture
+		playsinline
+		controls
+	/>
 </template>
 
 <script>

resources/js/components/Others/FilePreviewDetail.vue

@@ -9,10 +9,10 @@
         />
 
         <!--Audio-->
-        <audio v-else-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls class="w-full"></audio>
+        <audio v-if="singleFile.data.type === 'audio'" :src="singleFile.data.attributes.file_url" controlsList="nodownload" controls class="w-full"></audio>
 
         <!--Video-->
-        <video class="h-auto w-full overflow-hidden rounded-sm" v-else-if="singleFile.data.type === 'video'" controlsList="nodownload" disablePictureInPicture playsinline controls>
+        <video v-if="singleFile.data.type === 'video'" ref="video" class="h-auto w-full overflow-hidden rounded-sm" controlsList="nodownload" disablePictureInPicture playsinline controls>
             <source :src="singleFile.data.attributes.file_url" type="video/mp4" />
         </video>
     </div>
@@ -33,5 +33,12 @@ export default {
             return this.singleFile && !includes(['folder', 'file'], this.singleFile.data.type)
         },
     },
+	watch: {
+		'singleFile': function (val) {
+			if (val.data.type === 'video') {
+				this.$refs.video.load()
+			}
+		}
+	}
 }
 </script>