chore(CallView): clean up unused methods, move some calculations to setup or children

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

2 files changed, 38 insertions, 65 deletions

diff --git a/src/components/CallView/CallView.vue b/src/components/CallView/CallView.vue
index cd6e586e9..679cc9ce7 100644
--- a/src/components/CallView/CallView.vue
+++ b/src/components/CallView/CallView.vue
@@ -30,7 +30,7 @@
 			:local-shared-data="localSharedData" />
 
 		<template v-else>
-			<EmptyCallView v-if="!remoteParticipantsCount && !screenSharingActive && !isGrid" :is-sidebar="isSidebar" />
+			<EmptyCallView v-if="!callParticipantModels.length && !screenSharingActive && !isGrid" :is-sidebar="isSidebar" />
 
 			<div id="videos">
 				<template v-if="!isGrid">
@@ -136,13 +136,8 @@
 					:is-recording="isRecording"
 					:token="token"
 					:has-pagination="true"
-					:min-height="isGrid && !isSidebar ? 240 : 150"
-					:min-width="isGrid && !isSidebar ? 320 : 200"
-					:videos-cap="gridVideosCap"
-					:videos-cap-enforced="gridVideosCapEnforced"
 					:call-participant-models="callParticipantModels"
 					:screens="screens"
-					:target-aspect-ratio="gridTargetAspectRatio"
 					:local-media-model="localMediaModel"
 					:local-call-participant-model="localCallParticipantModel"
 					:shared-datas="sharedDatas"
@@ -180,7 +175,6 @@ import AccountBox from 'vue-material-design-icons/AccountBoxOutline.vue'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { showMessage } from '@nextcloud/dialogs'
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
-import { loadState } from '@nextcloud/initial-state'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 
@@ -200,6 +194,8 @@ import { EventBus } from '../../services/EventBus.js'
 import { localMediaModel, localCallParticipantModel, callParticipantCollection } from '../../utils/webrtc/index.js'
 import RemoteVideoBlocker from '../../utils/webrtc/RemoteVideoBlocker.js'
 
+const supportedReactions = getCapabilities()?.spreed?.config?.call?.['supported-reactions']
+
 export default {
 	name: 'CallView',
 
@@ -233,6 +229,12 @@ export default {
 		},
 	},
 
+	setup() {
+		return {
+			supportedReactions,
+		}
+	},
+
 	data() {
 		return {
 			screens: [],
@@ -243,7 +245,6 @@ export default {
 			speakingUnwatchers: {},
 			screenUnwatchers: {},
 			speakers: [],
-			// callParticipantModelsWithScreen: [],
 			localSharedData: {
 				screenVisible: true,
 			},
@@ -266,10 +267,6 @@ export default {
 			return this.callParticipantModels.slice().reverse()
 		},
 
-		remoteParticipantsCount() {
-			return this.callParticipantModels.length
-		},
-
 		callParticipantModelsWithScreen() {
 			return this.callParticipantModels.filter(callParticipantModel => callParticipantModel.attributes.screen)
 		},
@@ -282,10 +279,6 @@ export default {
 			})
 		},
 
-		injectableLocalMediaModel() {
-			return localMediaModel
-		},
-
 		localScreen() {
 			return localMediaModel.attributes.localScreen
 		},
@@ -302,22 +295,6 @@ export default {
 			return this.$store.getters.isGrid && !this.isSidebar
 		},
 
-		gridTargetAspectRatio() {
-			if (this.isGrid) {
-				return 1.5
-			} else {
-				return 1
-			}
-		},
-
-		gridVideosCap() {
-			return parseInt(loadState('spreed', 'grid_videos_limit'), 10)
-		},
-
-		gridVideosCapEnforced() {
-			return loadState('spreed', 'grid_videos_limit_enforced')
-		},
-
 		selectedVideoPeerId() {
 			return this.$store.getters.selectedVideoPeerId
 		},
@@ -396,10 +373,6 @@ export default {
 			return null
 		},
 
-		supportedReactions() {
-			return getCapabilities()?.spreed?.config?.call?.['supported-reactions']
-		},
-
 		presenterVideoBlockerEnabled() {
 			return this.sharedDatas[this.shownRemoteScreenPeerId]?.remoteVideoBlocker?.isVideoEnabled()
 		},
diff --git a/src/components/CallView/Grid/Grid.vue b/src/components/CallView/Grid/Grid.vue
index 16b728ef4..5f137e04a 100644
--- a/src/components/CallView/Grid/Grid.vue
+++ b/src/components/CallView/Grid/Grid.vue
@@ -156,6 +156,7 @@ import ChevronRight from 'vue-material-design-icons/ChevronRight.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 
 import { subscribe, unsubscribe } from '@nextcloud/event-bus'
+import { loadState } from '@nextcloud/initial-state'
 import { generateFilePath } from '@nextcloud/router'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
@@ -167,6 +168,10 @@ import LocalVideo from '../shared/LocalVideo.vue'
 import VideoBottomBar from '../shared/VideoBottomBar.vue'
 import VideoVue from '../shared/VideoVue.vue'
 
+// Max number of videos per page. `0`, the default value, means no cap
+const videosCap = parseInt(loadState('spreed', 'grid_videos_limit'), 10) || 0
+const videosCapEnforced = loadState('spreed', 'grid_videos_limit_enforced') || false
+
 export default {
 	name: 'Grid',
 
@@ -189,35 +194,6 @@ export default {
 
 	props: {
 		/**
-		 * Minimum width of the video components
-		 */
-		minWidth: {
-			type: Number,
-			default: 200,
-		},
-		/**
-		 * Minimum height of the video components
-		 */
-		minHeight: {
-			type: Number,
-			default: 150,
-		},
-		/**
-		 * Max number of videos per page. `0`, the default value, means no cap
-		 */
-		videosCap: {
-			type: Number,
-			default: 0,
-		},
-		videosCapEnforced: {
-			type: Boolean,
-			default: false,
-		},
-		targetAspectRatio: {
-			type: Number,
-			default: 1,
-		},
-		/**
 		 * Developer mode: If enabled it allows to debug the grid using dummy
 		 * videos
 		 */
@@ -290,6 +266,13 @@ export default {
 
 	emits: ['select-video', 'click-local-video'],
 
+	setup() {
+		return {
+			videosCap,
+			videosCapEnforced,
+		}
+	},
+
 	data() {
 		return {
 			gridWidth: 0,
@@ -389,6 +372,19 @@ export default {
 			return devicePixelRatio
 		},
 
+		/**
+		 * Minimum width of the video components
+		 */
+		minWidth() {
+			return (this.isStripe || this.isSidebar) ? 200 : 320
+		},
+		/**
+		 * Minimum height of the video components
+		 */
+		minHeight() {
+			return (this.isStripe || this.isSidebar) ? 150 : 240
+		},
+
 		dpiAwareMinWidth() {
 			return this.minWidth / this.dpiFactor
 		},
@@ -402,6 +398,10 @@ export default {
 			return (this.gridWidth / this.gridHeight).toPrecision([2])
 		},
 
+		targetAspectRatio() {
+			return this.isStripe ? 1 : 1.5
+		},
+
 		// Max number of columns possible
 		columnsMax() {
 			// Max amount of columns that fits on screen, including gaps and paddings (8px)