refactor(frontend): make openViewer and isInCall mixins composables

Signed-off-by: Grigorii Shartsev <grigorii.shartsev@nextcloud.com>

20 files changed, 262 insertions, 179 deletions

diff --git a/src/App.vue b/src/App.vue
index 68dbbeeea..0ca46cf7a 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -56,9 +56,9 @@ import RightSidebar from './components/RightSidebar/RightSidebar.vue'
 import SettingsDialog from './components/SettingsDialog/SettingsDialog.vue'
 import UploadEditor from './components/UploadEditor.vue'
 
+import { useIsInCall } from './composables/useIsInCall.js'
 import { CONVERSATION, PARTICIPANT } from './constants.js'
 import browserCheck from './mixins/browserCheck.js'
-import isInCall from './mixins/isInCall.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import talkHashCheck from './mixins/talkHashCheck.js'
@@ -89,11 +89,15 @@ export default {
 		browserCheck,
 		talkHashCheck,
 		sessionIssueHandler,
-		isInCall,
 		participant,
 		isMobile,
 	],
 
+	setup() {
+		const isInCall = useIsInCall()
+		return { isInCall }
+	},
+
 	data() {
 		return {
 			savedLastMessageMap: {},
diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index 8089030fc..042319a20 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/src/FilesSidebarCallViewApp.vue
@@ -38,7 +38,6 @@ import PreventUnload from 'vue-prevent-unload'
 import CallView from './components/CallView/CallView.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 
-import isInCall from './mixins/isInCall.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import talkHashCheck from './mixins/talkHashCheck.js'
@@ -46,6 +45,8 @@ import talkHashCheck from './mixins/talkHashCheck.js'
 // Styles
 import '@nextcloud/dialogs/dist/index.css'
 
+import { useIsInCall } from './composables/useIsInCall.js'
+
 export default {
 
 	name: 'FilesSidebarCallViewApp',
@@ -58,11 +59,14 @@ export default {
 
 	mixins: [
 		sessionIssueHandler,
-		isInCall,
 		participant,
 		talkHashCheck,
 	],
 
+	setup() {
+		return { isInCall: useIsInCall() }
+	},
+
 	data() {
 		return {
 			// Needed for reactivity.
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index ffaedab5e..8f4abea8c 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -66,8 +66,8 @@ import MediaSettings from './components/MediaSettings/MediaSettings.vue'
 import CallButton from './components/TopBar/CallButton.vue'
 import TopBar from './components/TopBar/TopBar.vue'
 
+import { useIsInCall } from './composables/useIsInCall.js'
 import browserCheck from './mixins/browserCheck.js'
-import isInCall from './mixins/isInCall.js'
 import participant from './mixins/participant.js'
 import sessionIssueHandler from './mixins/sessionIssueHandler.js'
 import talkHashCheck from './mixins/talkHashCheck.js'
@@ -98,7 +98,6 @@ export default {
 	mixins: [
 		browserCheck,
 		sessionIssueHandler,
-		isInCall,
 		participant,
 		talkHashCheck,
 	],
@@ -115,6 +114,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const isInCall = useIsInCall()
+		return { isInCall }
+	},
+
 	data() {
 		return {
 			fetchCurrentConversationIntervalId: null,
diff --git a/src/components/CallView/shared/LocalMediaControls.vue b/src/components/CallView/shared/LocalMediaControls.vue
index 3cd0f30e1..db95a59ad 100644
--- a/src/components/CallView/shared/LocalMediaControls.vue
+++ b/src/components/CallView/shared/LocalMediaControls.vue
@@ -157,8 +157,8 @@ import PresentToAll from '../../missingMaterialDesignIcons/PresentToAll.vue'
 import LocalAudioControlButton from './LocalAudioControlButton.vue'
 import LocalVideoControlButton from './LocalVideoControlButton.vue'
 
+import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { PARTICIPANT } from '../../../constants.js'
-import isInCall from '../../../mixins/isInCall.js'
 import { CONNECTION_QUALITY } from '../../../utils/webrtc/analyzers/PeerConnectionAnalyzer.js'
 import { callAnalyzer } from '../../../utils/webrtc/index.js'
 import SpeakingWhileMutedWarner from '../../../utils/webrtc/SpeakingWhileMutedWarner.js'
@@ -186,10 +186,6 @@ export default {
 		PresentToAll,
 	},
 
-	mixins: [
-		isInCall,
-	],
-
 	props: {
 		token: {
 			type: String,
@@ -221,6 +217,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const isInCall = useIsInCall()
+		return { isInCall }
+	},
+
 	data() {
 		return {
 			speakingWhileMutedNotification: null,
diff --git a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
index 8c0cfadd1..856f89418 100644
--- a/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
+++ b/src/components/LeftSidebar/NewGroupConversation/NewGroupConversation.vue
@@ -136,8 +136,8 @@ import Confirmation from './Confirmation/Confirmation.vue'
 import SetContacts from './SetContacts/SetContacts.vue'
 import SetConversationName from './SetConversationName/SetConversationName.vue'
 
+import { useIsInCall } from '../../../composables/useIsInCall.js'
 import { CONVERSATION } from '../../../constants.js'
-import isInCall from '../../../mixins/isInCall.js'
 import participant from '../../../mixins/participant.js'
 import {
 	createPublicConversation,
@@ -167,10 +167,12 @@ export default {
 		Plus,
 	},
 
-	mixins: [
-		isInCall,
-		participant,
-	],
+	mixins: [participant],
+
+	setup() {
+		const isInCall = useIsInCall()
+		return { isInCall }
+	},
 
 	data() {
 		return {
diff --git a/src/components/MediaSettings/MediaSettings.vue b/src/components/MediaSettings/MediaSettings.vue
index 183368880..071f3e00a 100644
--- a/src/components/MediaSettings/MediaSettings.vue
+++ b/src/components/MediaSettings/MediaSettings.vue
@@ -202,9 +202,9 @@ import CallButton from '../TopBar/CallButton.vue'
 import VolumeIndicator from '../VolumeIndicator/VolumeIndicator.vue'
 import VideoBackgroundEditor from './VideoBackgroundEditor.vue'
 
+import { useIsInCall } from '../../composables/useIsInCall.js'
 import { CALL, VIRTUAL_BACKGROUND } from '../../constants.js'
 import { devices } from '../../mixins/devices.js'
-import isInCall from '../../mixins/isInCall.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import BrowserStorage from '../../services/BrowserStorage.js'
 import { localMediaModel } from '../../utils/webrtc/index.js'
@@ -237,7 +237,12 @@ export default {
 		VideoBackgroundEditor,
 	},
 
-	mixins: [devices, isInLobby, isInCall],
+	mixins: [devices, isInLobby],
+
+	setup() {
+		const isInCall = useIsInCall()
+		return { isInCall }
+	},
 
 	data() {
 		return {
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
index 50841c6ec..58c18e466 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.spec.js
@@ -20,6 +20,7 @@ import FilePreview from './MessagePart/FilePreview.vue'
 import Location from './MessagePart/Location.vue'
 import Mention from './MessagePart/Mention.vue'
 
+import * as useIsInCallModule from '../../../../composables/useIsInCall.js'
 import { CONVERSATION, ATTENDEE, PARTICIPANT } from '../../../../constants.js'
 import { EventBus } from '../../../../services/EventBus.js'
 import storeConfig from '../../../../store/storeConfig.js'
@@ -231,17 +232,13 @@ describe('Message.vue', () => {
 				messageProps.message = 'message two'
 				conversationProps.hasCall = true
 
+				jest.spyOn(useIsInCallModule, 'useIsInCall').mockReturnValue(() => true)
+
 				const wrapper = shallowMount(Message, {
 					localVue,
 					store,
 					propsData: messageProps,
 					provide: injected,
-					mixins: [{
-						// mock the isInCall mixin
-						computed: {
-							isInCall: () => true,
-						},
-					}],
 				})
 
 				const callButton = wrapper.findComponent({ name: 'CallButton' })
diff --git a/src/components/MessagesList/MessagesGroup/Message/Message.vue b/src/components/MessagesList/MessagesGroup/Message/Message.vue
index 3e1dfe6dd..07f4b5045 100644
--- a/src/components/MessagesList/MessagesGroup/Message/Message.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/Message.vue
@@ -231,8 +231,8 @@ import Location from './MessagePart/Location.vue'
 import Mention from './MessagePart/Mention.vue'
 import Poll from './MessagePart/Poll.vue'
 
+import { useIsInCall } from '../../../../composables/useIsInCall.js'
 import { ATTENDEE, CONVERSATION, PARTICIPANT } from '../../../../constants.js'
-import isInCall from '../../../../mixins/isInCall.js'
 import participant from '../../../../mixins/participant.js'
 import { EventBus } from '../../../../services/EventBus.js'
 
@@ -261,7 +261,6 @@ export default {
 
 	mixins: [
 		participant,
-		isInCall,
 	],
 
 	inject: ['scrollerBoundingClientRect'],
@@ -401,6 +400,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const isInCall = useIsInCall()
+		return { isInCall }
+	},
+
 	data() {
 		return {
 			isHovered: false,
diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
index 11f9cdea0..b0b8a2218 100644
--- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
+++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue
@@ -84,7 +84,7 @@ import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip.js'
 
 import AudioPlayer from './AudioPlayer.vue'
 
-import { openViewer } from '../../../../../mixins/openViewer.js'
+import { useViewer } from '../../../../../composables/useViewer.js'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
@@ -107,8 +107,6 @@ export default {
 		tooltip: Tooltip,
 	},
 
-	mixins: [openViewer],
-
 	props: {
 		/**
 		 * File id
@@ -236,6 +234,12 @@ export default {
 			default: false,
 		},
 	},
+
+	setup() {
+		const { openViewer } = useViewer()
+		return { openViewer }
+	},
+
 	data() {
 		return {
 			isLoading: true,
diff --git a/src/components/MessagesList/MessagesList.vue b/src/components/MessagesList/MessagesList.vue
index f4041e5e8..7d9b02437 100644
--- a/src/components/MessagesList/MessagesList.vue
+++ b/src/components/MessagesList/MessagesList.vue
@@ -89,8 +89,8 @@ import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
 import LoadingPlaceholder from '../LoadingPlaceholder.vue'
 import MessagesGroup from './MessagesGroup/MessagesGroup.vue'
 
+import { useIsInCall } from '../../composables/useIsInCall.js'
 import { ATTENDEE, CHAT } from '../../constants.js'
-import isInCall from '../../mixins/isInCall.js'
 import isInLobby from '../../mixins/isInLobby.js'
 import { EventBus } from '../../services/EventBus.js'
 
@@ -105,10 +105,7 @@ export default {
 		NcEmptyContent,
 	},
 
-	mixins: [
-		isInLobby,
-		isInCall,
-	],
+	mixins: [isInLobby],
 
 	provide() {
 		return {
@@ -131,6 +128,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const isInCall = useIsInCall()
+		return { isInCall }
+	},
+
 	data() {
 		return {
 			viewId: null,
diff --git a/src/components/NewMessageForm/NewMessageForm.vue b/src/components/NewMessageForm/NewMessageForm.vue
index 0041c0384..a28873f60 100644
--- a/src/components/NewMessageForm/NewMessageForm.vue
+++ b/src/components/NewMessageForm/NewMessageForm.vue
@@ -247,8 +247,8 @@ import AudioRecorder from './AudioRecorder/AudioRecorder.vue'
 import SimplePollsEditor from './SimplePollsEditor/SimplePollsEditor.vue'
 import TemplatePreview from './TemplatePreview.vue'
 
+import { useViewer } from '../../composables/useViewer.js'
 import { CONVERSATION, PARTICIPANT } from '../../constants.js'
-import { openViewer } from '../../mixins/openViewer.js'
 import { EventBus } from '../../services/EventBus.js'
 import { shareFile, createTextFile } from '../../services/filesSharingServices.js'
 import { searchPossibleMentions } from '../../services/mentionsService.js'
@@ -293,8 +293,6 @@ export default {
 		NcTextField,
 	},
 
-	mixins: [openViewer],
-
 	props: {
 		/**
 		 * The current conversation token or the breakout room token.
@@ -331,6 +329,11 @@ export default {
 		},
 	},
 
+	setup() {
+		const { openViewer } = useViewer()
+		return { openViewer }
+	},
+
 	data() {
 		return {
 			text: '',
diff --git a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
index 69de7ef15..06114eaee 100644
--- a/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
+++ b/src/components/RightSidebar/BreakoutRooms/BreakoutRoomsActions.vue
@@ -121,8 +121,8 @@ import NcModal f