fix: Positioning and active state of viewer components

Signed-off-by: Julius Härtl <[email protected]>

Author: juliusknorr

apps/files/src/views/ReferenceFileWidget.vue

@@ -37,16 +37,16 @@
 
 	<!-- Live preview if a handler is available -->
 	<component :is="viewerHandler.component"
-		v-else-if="viewerHandler && !failedViewer"
-		:active="false"
+		v-else-if="interactive && viewerHandler && !failedViewer"
+		:active="false /* prevent video from autoplaying */"
 		:can-swipe="false"
 		:can-zoom="false"
 		:is-embedded="true"
 		v-bind="viewerFile"
 		:file-list="[viewerFile]"
 		:is-full-screen="false"
 		:is-sidebar-shown="false"
-		class="widget-file widget-file--preview"
+		class="widget-file widget-file--interactive"
 		@error="failedViewer = true" />
 
 	<!-- The file is accessible -->
@@ -307,5 +307,12 @@ export default defineComponent({
 	&--link {
 		color: var(--color-text-maxcontrast);
 	}
+
+	&--interactive {
+		position: relative;
+		height: 400px;
+		max-height: 50vh;
+		margin: 0;
+	}
 }
 </style>