(fix) videos broken size

Author: antoine92190

demo/src/ChatContainer.vue

@@ -81,9 +81,9 @@ import * as storageService from '@/database/storage'
 import { parseTimestamp, formatTimestamp } from '@/utils/dates'
 import logoAvatar from '@/assets/logo.png'
 
-import { register } from 'vue-advanced-chat'
+// import { register } from 'vue-advanced-chat'
 // import { register } from './../../dist/vue-advanced-chat.es.js'
-// import { register } from './../../src/lib/index.js'
+import { register } from './../../src/lib/index.js'
 register()
 
 export default {

src/lib/MediaPreview/MediaPreview.scss

@@ -29,6 +29,11 @@ $media-preview-width-sm: 20px;
 		background-position: center;
 	}
 
+	video {
+		width: 100%;
+		height: 100%;
+	}
+
 	.vac-svg-button {
 		position: absolute;
 		top: 30px;

src/lib/MediaPreview/MediaPreview.vue

@@ -17,7 +17,7 @@
 			</div>
 
 			<div v-else-if="isVideo" class="vac-media-preview-container">
-				<video width="100%" height="100%" controls autoplay>
+				<video controls autoplay>
 					<source :src="file.url" />
 				</video>
 			</div>

src/lib/Room/RoomMessage/MessageFiles/MessageFile/MessageFile.scss

@@ -54,6 +54,8 @@
 		cursor: pointer;
 
 		video {
+			width: 100%;
+			height: 100%;
 			border-radius: 4px;
 		}
 	}

src/lib/Room/RoomMessage/MessageFiles/MessageFile/MessageFile.vue

@@ -66,10 +66,10 @@
 		<div
 			v-else-if="isVideo"
 			class="vac-video-container"
-			@click.prevent="openFile('preview')"
+			@click.prevent="openFile($event, 'preview')"
 		>
 			<progress-bar v-if="file.progress >= 0" :progress="file.progress" />
-			<video width="100%" height="100%" controls>
+			<video controls>
 				<source :src="file.url" />
 			</video>
 		</div>

src/lib/Room/RoomMessage/MessageReply/MessageReply.scss

@@ -26,6 +26,8 @@
 		max-width: 100%;
 
 		video {
+			width: 100%;
+			height: 100%;
 			border-radius: 4px;
 		}
 	}

src/lib/Room/RoomMessage/MessageReply/MessageReply.vue

@@ -14,7 +14,7 @@
 		</div>
 
 		<div v-else-if="isVideo" class="vac-video-reply-container">
-			<video width="100%" height="100%" controls>
+			<video controls>
 				<source :src="firstFile.url" />
 			</video>
 		</div>