Force apply Mime mixin to all components handler

.eslintrc.js

@@ -1,8 +1,9 @@
 module.exports = {
 	globals: {
-		appVersion: true
+		appVersion: true,
+		isTesting: true,
 	},
 	extends: [
-		'@nextcloud'
-	]
+		'@nextcloud',
+	],
 };

.github/workflows/cypress.yml

@@ -51,7 +51,7 @@ jobs:
         working-directory: apps/${{ env.APP_NAME }}
         run: |
           npm ci
-          npm run build --if-present
+          TESTING=true npm run build --if-present
 
       - name: Set up php ${{ matrix.php-versions }}
         uses: shivammathur/setup-php@v1

src/components/Images.vue

@@ -45,15 +45,11 @@ import axios from '@nextcloud/axios'
 import Vue from 'vue'
 import AsyncComputed from 'vue-async-computed'
 
-import Mime from '../mixins/Mime'
-
 Vue.use(AsyncComputed)
 
 export default {
 	name: 'Images',
-	mixins: [
-		Mime,
-	],
+
 	props: {
 		// file etag, used for cache reset
 		etag: {

src/components/Videos.vue

@@ -55,9 +55,6 @@ import Vue from 'vue'
 import VuePlyr from 'vue-plyr'
 import { generateFilePath } from '@nextcloud/router'
 
-import Mime from '../mixins/Mime'
-import PreviewUrl from '../mixins/PreviewUrl'
-
 const liveExt = ['jpg', 'jpeg', 'png']
 const liveExtRegex = new RegExp(`\\.(${liveExt.join('|')})$`, 'i')
 
@@ -66,8 +63,6 @@ Vue.use(VuePlyr)
 export default {
 	name: 'Videos',
 
-	mixins: [Mime, PreviewUrl],
-
 	computed: {
 		livePhoto() {
 			return this.fileList.find(file => {

src/mixins/Mime.js

@@ -114,7 +114,7 @@ export default {
 				}
 			}
 		},
-		// update image size on SIDEBARsidebar
+		// update image size on sidebar toggle
 		isSidebarShown: function() {
 			// wait for transition to complete (100ms)
 			setTimeout(this.updateHeightWidth, 200)

src/views/Viewer.vue

@@ -26,16 +26,17 @@
 		v-if="initiated || currentFile.modal"
 		id="viewer-content"
 		:class="{'icon-loading': !currentFile.loaded && !currentFile.failed}"
+		:clear-view-delay="isTesting ? -1 : 5000 /* prevent cypress timeouts */"
 		:dark="true"
-		:view="currentFile.modal"
 		:enable-slideshow="hasPrevious || hasNext"
-		:spread-navigation="true"
-		:has-previous="hasPrevious"
-		:has-next="hasNext"
-		:title="currentFile.basename"
 		:enable-swipe="canSwipe"
+		:has-next="hasNext"
+		:has-previous="hasPrevious"
 		:size="isMobile ? 'full' : 'large'"
+		:spread-navigation="true"
 		:style="{width: isSidebarShown ? `calc(100% - ${sidebarWidth}px)` : null}"
+		:title="currentFile.basename"
+		:view="currentFile.modal"
 		@close="close"
 		@previous="previous"
 		@next="next">
@@ -111,6 +112,7 @@ import Vue from 'vue'
 import { extractFilePaths, sortCompare } from '../utils/fileUtils'
 import Error from '../components/Error'
 import File from '../models/file'
+import Mime from '../mixins/Mime'
 import getFileList from '../services/FileList'
 import getFileInfo from '../services/FileInfo'
 
@@ -128,35 +130,37 @@ export default {
 	mixins: [isMobile, isFullscreen],
 
 	data: () => ({
-		// reactivity bindings
+		// Reactivity bindings
 		Viewer: OCA.Viewer.state,
 		Sidebar: null,
 		handlers: OCA.Viewer.availableHandlers,
 
+		// Viewer variables
 		components: {},
 		mimeGroups: {},
 		registeredHandlers: [],
 
+		// Files variables
 		currentIndex: 0,
 		previousFile: {},
 		currentFile: {},
 		nextFile: {},
-
 		fileList: [],
 
+		// States
 		isLoaded: false,
 		initiated: false,
 
 		// cancellable requests
 		cancelRequestFile: () => {},
 		cancelRequestFolder: () => {},
 
-		isSidebarShown: false,
+		// Flags
 		sidebarWidth: 0,
-
+		isSidebarShown: false,
 		canSwipe: true,
-
-		standalone: !(OCA && OCA.Files && 'fileActions' in OCA.Files),
+		isStandalone: !(OCA && OCA.Files && 'fileActions' in OCA.Files),
+		isTesting,
 
 		root: getRootPath(),
 	}),
@@ -283,7 +287,7 @@ export default {
 
 		window.addEventListener('resize', this.onResize)
 
-		if (this.standalone) {
+		if (this.isStandalone) {
 			console.debug('No OCA.Files app found, viewer is now in standalone mode')
 		}
 	},
@@ -482,6 +486,9 @@ export default {
 				return
 			}
 
+			// force apply mixin
+			handler.component.mixins = [...handler.component.mixins || [], Mime]
+
 			// parsing mimes registration
 			if (handler.mimes) {
 				handler.mimes.forEach(mime => {
@@ -541,7 +548,7 @@ export default {
 		},
 
 		registerAction({ mime, group }) {
-			if (!this.standalone) {
+			if (!this.isStandalone) {
 				// unregistered handler, let's go!
 				OCA.Files.fileActions.registerAction({
 					name: 'view',

webpack.common.js

@@ -5,6 +5,7 @@ const StyleLintPlugin = require('stylelint-webpack-plugin')
 
 const appName = process.env.npm_package_name
 const appVersion = JSON.stringify(process.env.npm_package_version)
+const isTesting = !!process.env.TESTING
 
 module.exports = {
 	entry: path.join(__dirname, 'src', 'main.js'),
@@ -50,7 +51,7 @@ module.exports = {
 	plugins: [
 		new VueLoaderPlugin(),
 		new StyleLintPlugin(),
-		new webpack.DefinePlugin({ appVersion }),
+		new webpack.DefinePlugin({ appVersion, isTesting }),
 	],
 	resolve: {
 		alias: {
@@ -61,6 +62,6 @@ module.exports = {
 			Services: path.resolve(__dirname, 'src/services/'),
 			Views: path.resolve(__dirname, 'src/views/'),
 		},
-		extensions: ['*', '.js', '.vue', '.json'],
+		extensions: ['*', '.js', '.vue'],
 	},
 }