Trigger a vue event when SessionStorage "joined_conversation" changes

Otherwise there is no update of the computed and the call screen will not show up.

Signed-off-by: Joas Schilling <coding@schilljs.com>

6 files changed, 93 insertions, 39 deletions

diff --git a/src/App.vue b/src/App.vue
index 9202f3095..e10088c1b 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -45,7 +45,6 @@ import Router from './router/router'
 import RightSidebar from './components/RightSidebar/RightSidebar'
 import { EventBus } from './services/EventBus'
 import BrowserStorage from './services/BrowserStorage'
-import SessionStorage from './services/SessionStorage'
 import { getCurrentUser } from '@nextcloud/auth'
 import { fetchConversation } from './services/conversationsService'
 import {
@@ -59,6 +58,7 @@ import {
 import { emit } from '@nextcloud/event-bus'
 import browserCheck from './mixins/browserCheck'
 import duplicateSessionHandler from './mixins/duplicateSessionHandler'
+import isInCall from './mixins/isInCall'
 import talkHashCheck from './mixins/talkHashCheck'
 import { generateUrl } from '@nextcloud/router'
 
@@ -76,6 +76,7 @@ export default {
 		browserCheck,
 		talkHashCheck,
 		duplicateSessionHandler,
+		isInCall,
 	],
 
 	data: function() {
@@ -116,11 +117,6 @@ export default {
 			}
 		},
 
-		isInCall() {
-			return SessionStorage.getItem('joined_conversation') === this.token
-				&& this.participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
-		},
-
 		warnLeaving() {
 			return !this.isLeavingAfterSessionConflict && this.isInCall
 		},
diff --git a/src/FilesSidebarCallViewApp.vue b/src/FilesSidebarCallViewApp.vue
index 24e2e9fff..7ad620281 100644
--- a/src/FilesSidebarCallViewApp.vue
+++ b/src/FilesSidebarCallViewApp.vue
@@ -23,7 +23,7 @@
 <template>
 	<div v-if="isInFile">
 		<CallView
-			v-show="isInCall"
+			v-show="showCallView"
 			:token="token"
 			:is-sidebar="true" />
 		<PreventUnload :when="warnLeaving" />
@@ -36,8 +36,8 @@ import CallView from './components/CallView/CallView'
 import PreventUnload from 'vue-prevent-unload'
 import browserCheck from './mixins/browserCheck'
 import duplicateSessionHandler from './mixins/duplicateSessionHandler'
+import isInCall from './mixins/isInCall'
 import talkHashCheck from './mixins/talkHashCheck'
-import SessionStorage from './services/SessionStorage'
 
 export default {
 
@@ -51,6 +51,7 @@ export default {
 	mixins: [
 		browserCheck,
 		duplicateSessionHandler,
+		isInCall,
 		talkHashCheck,
 	],
 
@@ -93,39 +94,38 @@ export default {
 		 *          otherwise.
 		 */
 		isInFile() {
-			if (this.fileId !== this.fileIdForToken) {
-				return false
-			}
-
-			return true
+			return this.fileId === this.fileIdForToken
 		},
 
-		isInCall() {
+		showCallView() {
 			// FIXME Remove participants as soon as the file changes so this
 			// condition is not needed.
 			if (!this.isInFile) {
 				return false
 			}
 
+			return this.isInCall
+		},
+
+		participant() {
 			const participantIndex = this.$store.getters.getParticipantIndex(this.token, this.$store.getters.getParticipantIdentifier())
 			if (participantIndex === -1) {
-				return false
+				return {
+					inCall: PARTICIPANT.CALL_FLAG.DISCONNECTED,
+				}
 			}
 
-			const participant = this.$store.getters.getParticipant(this.token, participantIndex)
-
-			return SessionStorage.getItem('joined_conversation') === this.token
-				&& participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
+			return this.$store.getters.getParticipant(this.token, participantIndex)
 		},
 
 		warnLeaving() {
-			return !this.isLeavingAfterSessionConflict && this.isInCall
+			return !this.isLeavingAfterSessionConflict && this.showCallView
 		},
 	},
 
 	watch: {
-		isInCall: function(isInCall) {
-			if (isInCall) {
+		showCallView: function(showCallView) {
+			if (showCallView) {
 				this.replaceSidebarHeaderContentsWithCallView()
 			} else {
 				this.restoreSidebarHeaderContents()
diff --git a/src/PublicShareSidebar.vue b/src/PublicShareSidebar.vue
index 6d9187eb4..5b7095b05 100644
--- a/src/PublicShareSidebar.vue
+++ b/src/PublicShareSidebar.vue
@@ -60,8 +60,8 @@ import {
 import { signalingKill } from './utils/webrtc/index'
 import browserCheck from './mixins/browserCheck'
 import duplicateSessionHandler from './mixins/duplicateSessionHandler'
+import isInCall from './mixins/isInCall'
 import talkHashCheck from './mixins/talkHashCheck'
-import SessionStorage from './services/SessionStorage'
 
 export default {
 
@@ -77,6 +77,7 @@ export default {
 	mixins: [
 		browserCheck,
 		duplicateSessionHandler,
+		isInCall,
 		talkHashCheck,
 	],
 
@@ -112,16 +113,15 @@ export default {
 			return this.state.isOpen
 		},
 
-		isInCall() {
+		participant() {
 			const participantIndex = this.$store.getters.getParticipantIndex(this.token, this.$store.getters.getParticipantIdentifier())
 			if (participantIndex === -1) {
-				return false
+				return {
+					inCall: PARTICIPANT.CALL_FLAG.DISCONNECTED,
+				}
 			}
 
-			const participant = this.$store.getters.getParticipant(this.token, participantIndex)
-
-			return SessionStorage.getItem('joined_conversation') === this.token
-				&& participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
+			return this.$store.getters.getParticipant(this.token, participantIndex)
 		},
 
 		warnLeaving() {
diff --git a/src/components/TopBar/CallButton.vue b/src/components/TopBar/CallButton.vue
index e14e1842d..e25c295a7 100644
--- a/src/components/TopBar/CallButton.vue
+++ b/src/components/TopBar/CallButton.vue
@@ -51,7 +51,7 @@
 <script>
 import { CONVERSATION, PARTICIPANT, WEBINAR } from '../../constants'
 import browserCheck from '../../mixins/browserCheck'
-import SessionStorage from '../../services/SessionStorage'
+import isInCall from '../../mixins/isInCall'
 import Tooltip from '@nextcloud/vue/dist/Directives/Tooltip'
 import { emit } from '@nextcloud/event-bus'
 
@@ -62,7 +62,10 @@ export default {
 		Tooltip,
 	},
 
-	mixins: [browserCheck],
+	mixins: [
+		browserCheck,
+		isInCall,
+	],
 
 	data() {
 		return {
@@ -105,11 +108,6 @@ export default {
 			}
 		},
 
-		isInCall() {
-			return SessionStorage.getItem('joined_conversation') === this.token
-				&& this.participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
-		},
-
 		isBlockedByLobby() {
 			return this.conversation.lobbyState === WEBINAR.LOBBY.NON_MODERATORS
 				&& !this.isParticipantTypeModerator(this.conversation.participantType)
diff --git a/src/mixins/isInCall.js b/src/mixins/isInCall.js
new file mode 100644
index 000000000..d2165bb48
--- /dev/null
+++ b/src/mixins/isInCall.js
@@ -0,0 +1,59 @@
+/**
+ *
+ * @copyright Copyright (c) 2020 Joas Schilling <coding@schilljs.com>
+ *
+ * @license GNU AGPL version 3 or any later version
+ *
+ * This program is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as
+ * published by the Free Software Foundation, either version 3 of the
+ * License, or (at your option) any later version.
+ *
+ * This program is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with this program.  If not, see <http://www.gnu.org/licenses/>.
+ *
+ */
+
+import { PARTICIPANT } from '../constants'
+import SessionStorage from '../services/SessionStorage'
+import { EventBus } from '../services/EventBus'
+
+/**
+ * A mixin to check whether the current session of a user is in a call or not.
+ *
+ * Components using this mixin require a "token" property and a "participant" property with, at least, the "inCall" property.
+ */
+export default {
+
+	data() {
+		return {
+			sessionStorageJoinedConversation: null,
+		}
+	},
+
+	computed: {
+		isInCall() {
+			return this.sessionStorageJoinedConversation === this.token
+				&& this.participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
+		},
+	},
+
+	beforeDestroy() {
+		EventBus.$off('joinedConversation', this.readSessionStorageJoinedConversation)
+	},
+
+	beforeMount() {
+		EventBus.$on('joinedConversation', this.readSessionStorageJoinedConversation)
+	},
+
+	methods: {
+		readSessionStorageJoinedConversation() {
+			this.sessionStorageJoinedConversation = SessionStorage.getItem('joined_conversation')
+		},
+	},
+}
diff --git a/src/views/MainView.vue b/src/views/MainView.vue
index 4806c9814..b7652bf77 100644
--- a/src/views/MainView.vue
+++ b/src/views/MainView.vue
@@ -22,7 +22,7 @@ import LobbyScreen from '../components/LobbyScreen'
 import TopBar from '../components/TopBar/TopBar'
 import { PARTICIPANT } from '../constants'
 import isInLobby from '../mixins/isInLobby'
-import SessionStorage from '../services/SessionStorage'
+import isInCall from '../mixins/isInCall'
 
 export default {
 	name: 'MainView',
@@ -35,7 +35,9 @@ export default {
 
 	mixins: [
 		isInLobby,
+		isInCall,
 	],
+
 	props: {
 		token: {
 			type: String,
@@ -66,8 +68,7 @@ export default {
 		},
 
 		showChatInSidebar() {
-			return SessionStorage.getItem('joined_conversation') === this.token
-				&& this.participant.inCall !== PARTICIPANT.CALL_FLAG.DISCONNECTED
+			return this.isInCall
 		},
 	},