<NME> PublicShareAuthSidebar.vue
<BEF> <!--
  - @copyright Copyright (c) 2020, Daniel Calviño Sánchez <danxuliu@gmail.com>
  -
  - @author Marco Ambrosini <marcoambrosini@icloud.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/>.
  -
  -->

<template>
	<transition name="slide-right">
				<div class="icon icon-talk" />
				<h2>{{ t('spreed', 'This conversation has ended') }}</h2>
			</div>
			<div v-else class="emptycontent">
				<div class="icon icon-talk" />
				<h2>Password requested</h2>
			</div>
		</aside>
	</transition>
</template>

<script>
import { EventBus } from './services/EventBus'
import { fetchConversation } from './services/conversationsService'
import { joinConversation } from './services/participantsService'
import ChatView from './components/ChatView.vue'
import TopBar from './components/TopBar/TopBar.vue'
import { EventBus } from './services/EventBus.js'

	name: 'PublicShareAuthSidebar',

	data() {
		return {
			fetchCurrentConversationIntervalId: null,
	components: {
		CallView,
		ChatView,
		TopBar,
	},

	mixins: [
		sessionIssueHandler,
		talkHashCheck,
	],

	data() {
		return {
			fetchCurrentConversationIntervalId: null,
			isWaitingToClose: false,
		}
	},

	computed: {
		token() {
			return this.$store.getters.getToken()
		},

		conversation() {
			return this.$store.getters.conversation(this.token)
		},

		isOpen() {
			return this.conversation || this.isWaitingToClose
		},
	},

	watch: {
		token(token) {
		async joinConversation() {
			await joinConversation(this.token)

			// No need to wait for it, but fetching the conversation needs to be
			// done once the user has joined the conversation (otherwise only
			// limited data would be received if the user was not a participant
			// of the conversation yet).
			this.fetchCurrentConversation()

			// FIXME The participant will not be updated with the server data
			// when the conversation is got again (as "addParticipantOnce" is
				// We have to do this synchronously, because in unload and beforeunload
				// Promises, async and await are prohibited.
				signalingKill()
				if (!this.isLeavingAfterSessionIssue) {
					leaveConversationSync(this.token)
				}
			}
		})
	},

	methods: {

			}
		},

		async fetchCurrentConversation() {
			if (!this.token) {
				return
			// has been set, which is done once the conversation has been
			// fetched.
			try {
				const response = await fetchConversation(this.token)
				this.$store.dispatch('addConversation', response.data.ocs.data)
			} catch (exception) {
				window.clearInterval(this.fetchCurrentConversationIntervalId)

			}
		},

		async joinCall() {
			await this.$store.dispatch('joinCall', {
				token: this.token,
				participantIdentifier: this.$store.getters.getParticipantIdentifier(),
				silent: false,
			})
		},

		async fetchCurrentConversation() {
			if (!this.token) {
				return
			}

			try {
				await this.$store.dispatch('fetchConversation', { token: this.token })

				// Although the current participant is automatically added to
				// the participants store it must be explicitly set in the
				// actors store.
				if (!this.$store.getters.getUserId()) {
					// Set the current actor/participant for guests
					const conversation = this.$store.getters.conversation(this.token)

					// Setting a guest only uses "sessionId" and "participantType".
					this.$store.dispatch('setCurrentParticipant', conversation)
				}
			} catch (exception) {
				window.clearInterval(this.fetchCurrentConversationIntervalId)

				this.$store.dispatch('deleteConversation', this.token)
				this.$store.dispatch('updateToken', '')
			}
		},
	},
}
</script>
	min-width: 0 !important;
	max-width: 0 !important;
}
</style>
}

#talk-sidebar #call-container ::v-deep .nameIndicator {
	/* The name indicator has some small padding to prevent the name from
	 * reaching the edges, but it also uses "width: 100%", so the padding should
	 * be included in the full width of the element. */
	box-sizing: border-box;
}

#talk-sidebar .chatView {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	position: relative;

	flex-grow: 1;

	/* Distribute available height between call container and chat view. */
	height: 50%;
}

#talk-sidebar ::v-deep .wrapper {
	margin-top: 0;
}

/* Restore rules from style.scss overriden by guest.css for the sidebar. */
#talk-sidebar ::v-deep a {
	color: var(--color-main-text);
	font-weight: inherit;
}
</style>

<MSG> Replace dummy sidebar contents with CallView and ChatView

Signed-off-by: Daniel Calviño Sánchez <bd7629e975cc0e00ea7cda4ab6a120f2ee42ac1b@gmail.com>

<DFF> @@ -25,15 +25,19 @@
 				<div class="icon icon-talk" />
 				<h2>{{ t('spreed', 'This conversation has ended') }}</h2>
 			</div>
-			<div v-else class="emptycontent">
-				<div class="icon icon-talk" />
-				<h2>Password requested</h2>
-			</div>
+			<template v-else>
+				<CallView :token="token" />
+				<ChatView :token="token" />
+			</template>
 		</aside>
 	</transition>
 </template>
 
 <script>
+import { getCurrentUser } from '@nextcloud/auth'
+import CallView from './components/CallView/CallView'
+import ChatView from './components/ChatView'
+import { PARTICIPANT } from './constants'
 import { EventBus } from './services/EventBus'
 import { fetchConversation } from './services/conversationsService'
 import { joinConversation } from './services/participantsService'
@@ -43,6 +47,11 @@ export default {
 
 	name: 'PublicShareAuthSidebar',
 
+	components: {
+		CallView,
+		ChatView,
+	},
+
 	data() {
 		return {
 			fetchCurrentConversationIntervalId: null,
@@ -83,11 +92,16 @@ export default {
 		async joinConversation() {
 			await joinConversation(this.token)
 
-			// No need to wait for it, but fetching the conversation needs to be
-			// done once the user has joined the conversation (otherwise only
-			// limited data would be received if the user was not a participant
-			// of the conversation yet).
-			this.fetchCurrentConversation()
+			// Fetching the conversation needs to be done once the user has
+			// joined the conversation (otherwise only limited data would be
+			// received if the user was not a participant of the conversation
+			// yet).
+			await this.fetchCurrentConversation()
+
+			// Joining the call needs to be done once the participant identifier
+			// has been set, which is done once the conversation has been
+			// fetched.
+			this.joinCall()
 
 			// FIXME The participant will not be updated with the server data
 			// when the conversation is got again (as "addParticipantOnce" is
@@ -106,6 +120,14 @@ export default {
 			}
 		},
 
+		async joinCall() {
+			await this.$store.dispatch('joinCall', {
+				token: this.token,
+				participantIdentifier: this.$store.getters.getParticipantIdentifier(),
+				flags: PARTICIPANT.CALL_FLAG.IN_CALL,
+			})
+		},
+
 		async fetchCurrentConversation() {
 			if (!this.token) {
 				return
@@ -114,6 +136,16 @@ export default {
 			try {
 				const response = await fetchConversation(this.token)
 				this.$store.dispatch('addConversation', response.data.ocs.data)
+
+				// Although the current participant is automatically added to
+				// the participants store it must be explicitly set in the
+				// actors store.
+				if (getCurrentUser()) {
+					this.$store.dispatch('setCurrentUser', getCurrentUser())
+				} else {
+					// Setting a guest only uses "sessionId" and "participantType".
+					this.$store.dispatch('setCurrentParticipant', response.data.ocs.data)
+				}
 			} catch (exception) {
 				window.clearInterval(this.fetchCurrentConversationIntervalId)
 
@@ -159,4 +191,80 @@ export default {
 	min-width: 0 !important;
 	max-width: 0 !important;
 }
+
+#talk-sidebar {
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+}
+
+#talk-sidebar > .emptycontent {
+	/* Remove default margin-top as it is unneeded when showing only the empty
+	 * content in a flex sidebar. */
+	margin-top: 0;
+}
+
+#talk-sidebar #call-container {
+	position: relative;
+
+	flex-grow: 1;
+
+	/* Prevent shadows of videos from leaking on other elements. */
+	overflow: hidden;
+
+	/* Distribute available height between call container and chat view. */
+	height: 50%;
+
+	/* Ensure that the background will be black also in voice only calls. */
+	background-color: #000;
+}
+
+#talk-sidebar #call-container ::v-deep .videoContainer {
+        /* The video container has some small padding to prevent the video from
+         * reaching the edges, but it also uses "width: 100%", so the padding should
+         * be included in the full width of the element. */
+        box-sizing: border-box;
+}
+
+#talk-sidebar #call-container ::v-deep .videoContainer.promoted video {
+	/* Base the size of the video on its width instead of on its height;
+	 * otherwise the video could appear in full height but cropped on the sides
+	 * due to the space available in the sidebar being typically larger in
+	 * vertical than in horizontal. */
+	width: 100%;
+	height: auto;
+}
+
+#talk-sidebar #call-container ::v-deep .nameIndicator {
+	/* The name indicator has some small padding to prevent the name from
+	 * reaching the edges, but it also uses "width: 100%", so the padding should
+	 * be included in the full width of the element. */
+	box-sizing: border-box;
+}
+
+#talk-sidebar .chatView {
+	display: flex;
+	flex-direction: column;
+	overflow: hidden;
+
+	flex-grow: 1;
+
+	/* Distribute available height between call container and chat view. */
+	height: 50%;
+}
+
+/* Unset conflicting rules from guest.css for the sidebar. */
+#talk-sidebar {
+	text-align: left;
+}
+
+#talk-sidebar ::v-deep .wrapper {
+	margin-top: 0;
+}
+
+/* Restore rules from style.scss overriden by guest.css for the sidebar. */
+#talk-sidebar ::v-deep a {
+	color: var(--color-main-text);
+	font-weight: inherit;
+}
 </style>

{'commit': 'diff --git a/css/icons.scss b/css/icons.scss\nindex 2cc861d94..4cfd6e77b 100644\n--- a/css/icons.scss\n+++ b/css/icons.scss\n@@ -10,6 +10,7 @@\n \n .app-Talk,\n .talk-modal,\n+#talk-sidebar,\n #call-container {\n \t// We always want to use the white icons, this is why we don\'t use var(--color-white) here.\n \t.icon-public {\ndiff --git a/src/PublicShareAuthSidebar.vue b/src/PublicShareAuthSidebar.vue\nindex 66720b99f..68279b695 100644\n--- a/src/PublicShareAuthSidebar.vue\n+++ b/src/PublicShareAuthSidebar.vue\n@@ -25,15 +25,19 @@\n \t\t\t\t<div class="icon icon-talk" />\n \t\t\t\t<h2>{{ t(\'spreed\', \'This conversation has ended\') }}</h2>\n \t\t\t</div>\n-\t\t\t<div v-else class="emptycontent">\n-\t\t\t\t<div class="icon icon-talk" />\n-\t\t\t\t<h2>Password requested</h2>\n-\t\t\t</div>\n+\t\t\t<template v-else>\n+\t\t\t\t<CallView :token="token" />\n+\t\t\t\t<ChatView :token="token" />\n+\t\t\t</template>\n \t\t</aside>\n \t</transition>\n </template>\n \n <script>\n+import { getCurrentUser } from \'@nextcloud/auth\'\n+import CallView from \'./components/CallView/CallView\'\n+import ChatView from \'./components/ChatView\'\n+import { PARTICIPANT } from \'./constants\'\n import { EventBus } from \'./services/EventBus\'\n import { fetchConversation } from \'./services/conversationsService\'\n import { joinConversation } from \'./services/participantsService\'\n@@ -43,6 +47,11 @@ export default {\n \n \tname: \'PublicShareAuthSidebar\',\n \n+\tcomponents: {\n+\t\tCallView,\n+\t\tChatView,\n+\t},\n+\n \tdata() {\n \t\treturn {\n \t\t\tfetchCurrentConversationIntervalId: null,\n@@ -83,11 +92,16 @@ export default {\n \t\tasync joinConversation() {\n \t\t\tawait joinConversation(this.token)\n \n-\t\t\t// No need to wait for it, but fetching the conversation needs to be\n-\t\t\t// done once the user has joined the conversation (otherwise only\n-\t\t\t// limited data would be received if the user was not a participant\n-\t\t\t// of the conversation yet).\n-\t\t\tthis.fetchCurrentConversation()\n+\t\t\t// Fetching the conversation needs to be done once the user has\n+\t\t\t// joined the conversation (otherwise only limited data would be\n+\t\t\t// received if the user was not a participant of the conversation\n+\t\t\t// yet).\n+\t\t\tawait this.fetchCurrentConversation()\n+\n+\t\t\t// Joining the call needs to be done once the participant identifier\n+\t\t\t// has been set, which is done once the conversation has been\n+\t\t\t// fetched.\n+\t\t\tthis.joinCall()\n \n \t\t\t// FIXME The participant will not be updated with the server data\n \t\t\t// when the conversation is got again (as "addParticipantOnce" is\n@@ -106,6 +120,14 @@ export default {\n \t\t\t}\n \t\t},\n \n+\t\tasync joinCall() {\n+\t\t\tawait this.$store.dispatch(\'joinCall\', {\n+\t\t\t\ttoken: this.token,\n+\t\t\t\tparticipantIdentifier: this.$store.getters.getParticipantIdentifier(),\n+\t\t\t\tflags: PARTICIPANT.CALL_FLAG.IN_CALL,\n+\t\t\t})\n+\t\t},\n+\n \t\tasync fetchCurrentConversation() {\n \t\t\tif (!this.token) {\n \t\t\t\treturn\n@@ -114,6 +136,16 @@ export default {\n \t\t\ttry {\n \t\t\t\tconst response = await fetchConversation(this.token)\n \t\t\t\tthis.$store.dispatch(\'addConversation\', response.data.ocs.data)\n+\n+\t\t\t\t// Although the current participant is automatically added to\n+\t\t\t\t// the participants store it must be explicitly set in the\n+\t\t\t\t// actors store.\n+\t\t\t\tif (getCurrentUser()) {\n+\t\t\t\t\tthis.$store.dispatch(\'setCurrentUser\', getCurrentUser())\n+\t\t\t\t} else {\n+\t\t\t\t\t// Setting a guest only uses "sessionId" and "participantType".\n+\t\t\t\t\tthis.$store.dispatch(\'setCurrentParticipant\', response.data.ocs.data)\n+\t\t\t\t}\n \t\t\t} catch (exception) {\n \t\t\t\twindow.clearInterval(this.fetchCurrentConversationIntervalId)\n \n@@ -159,4 +191,80 @@ export default {\n \tmin-width: 0 !important;\n \tmax-width: 0 !important;\n }\n+\n+#talk-sidebar {\n+\tdisplay: flex;\n+\tflex-direction: column;\n+\tjustify-content: center;\n+}\n+\n+#talk-sidebar > .emptycontent {\n+\t/* Remove default margin-top as it is unneeded when showing only the empty\n+\t * content in a flex sidebar. */\n+\tmargin-top: 0;\n+}\n+\n+#talk-sidebar #call-container {\n+\tposition: relative;\n+\n+\tflex-grow: 1;\n+\n+\t/* Prevent shadows of videos from leaking on other elements. */\n+\toverflow: hidden;\n+\n+\t/* Distribute available height between call container and chat view. */\n+\theight: 50%;\n+\n+\t/* Ensure that the background will be black also in voice only calls. */\n+\tbackground-color: #000;\n+}\n+\n+#talk-sidebar #call-container ::v-deep .videoContainer {\n+        /* The video container has some small padding to prevent the video from\n+         * reaching the edges, but it also uses "width: 100%", so the padding should\n+         * be included in the full width of the element. */\n+        box-sizing: border-box;\n+}\n+\n+#talk-sidebar #call-container ::v-deep .videoContainer.promoted video {\n+\t/* Base the size of the video on its width instead of on its height;\n+\t * otherwise the video could appear in full height but cropped on the sides\n+\t * due to the space available in the sidebar being typically larger in\n+\t * vertical than in horizontal. */\n+\twidth: 100%;\n+\theight: auto;\n+}\n+\n+#talk-sidebar #call-container ::v-deep .nameIndicator {\n+\t/* The name indicator has some small padding to prevent the name from\n+\t * reaching the edges, but it also uses "width: 100%", so the padding should\n+\t * be included in the full width of the element. */\n+\tbox-sizing: border-box;\n+}\n+\n+#talk-sidebar .chatView {\n+\tdisplay: flex;\n+\tflex-direction: column;\n+\toverflow: hidden;\n+\n+\tflex-grow: 1;\n+\n+\t/* Distribute available height between call container and chat view. */\n+\theight: 50%;\n+}\n+\n+/* Unset conflicting rules from guest.css for the sidebar. */\n+#talk-sidebar {\n+\ttext-align: left;\n+}\n+\n+#talk-sidebar ::v-deep .wrapper {\n+\tmargin-top: 0;\n+}\n+\n+/* Restore rules from style.scss overriden by guest.css for the sidebar. */\n+#talk-sidebar ::v-deep a {\n+\tcolor: var(--color-main-text);\n+\tfont-weight: inherit;\n+}\n </style>\n', 'commit_subject': 'Replace dummy sidebar contents with CallView and ChatView', 'repo_name': 'nextcloud/spreed', 'committer': {'name': 'Daniel Calviño Sánchez', 'email': 'bd7629e975cc0e00ea7cda4ab6a120f2ee42ac1b@gmail.com', 'time_sec': '1579025184', 'tz_offset': '60', 'date': {'seconds': '1579025184'}}, 'commit_tree': '02b18b2e82342e494680f7d6404764205d03f7f3', 'commit_message': 'Replace dummy sidebar contents with CallView and ChatView\n\nSigned-off-by: Daniel Calviño Sánchez <bd7629e975cc0e00ea7cda4ab6a120f2ee42ac1b@gmail.com>\n', 'language_name': 'PHP', 'license': 'agpl-3.0', 'hunks': '@@ -25,15 +25,19 @@\n \t\t\t\t<div class="icon icon-talk" />\n \t\t\t\t<h2>{{ t(\'spreed\', \'This conversation has ended\') }}</h2>\n \t\t\t</div>\n-\t\t\t<div v-else class="emptycontent">\n-\t\t\t\t<div class="icon icon-talk" />\n-\t\t\t\t<h2>Password requested</h2>\n-\t\t\t</div>\n+\t\t\t<template v-else>\n+\t\t\t\t<CallView :token="token" />\n+\t\t\t\t<ChatView :token="token" />\n+\t\t\t</template>\n \t\t</aside>\n \t</transition>\n </template>\n \n <script>\n+import { getCurrentUser } from \'@nextcloud/auth\'\n+import CallView from \'./components/CallView/CallView\'\n+import ChatView from \'./components/ChatView\'\n+import { PARTICIPANT } from \'./constants\'\n import { EventBus } from \'./services/EventBus\'\n import { fetchConversation } from \'./services/conversationsService\'\n import { joinConversation } from \'./services/participantsService\'\n@@ -43,6 +47,11 @@ export default {\n \n \tname: \'PublicShareAuthSidebar\',\n \n+\tcomponents: {\n+\t\tCallView,\n+\t\tChatView,\n+\t},\n+\n \tdata() {\n \t\treturn {\n \t\t\tfetchCurrentConversationIntervalId: null,\n@@ -83,11 +92,16 @@ export default {\n \t\tasync joinConversation() {\n \t\t\tawait joinConversation(this.token)\n \n-\t\t\t// No need to wait for it, but fetching the conversation needs to be\n-\t\t\t// done once the user has joined the conversation (otherwise only\n-\t\t\t// limited data would be received if the user was not a participant\n-\t\t\t// of the conversation yet).\n-\t\t\tthis.fetchCurrentConversation()\n+\t\t\t// Fetching the conversation needs to be done once the user has\n+\t\t\t// joined the conversation (otherwise only limited data would be\n+\t\t\t// received if the user was not a participant of the conversation\n+\t\t\t// yet).\n+\t\t\tawait this.fetchCurrentConversation()\n+\n+\t\t\t// Joining the call needs to be done once the participant identifier\n+\t\t\t// has been set, which is done once the conversation has been\n+\t\t\t// fetched.\n+\t\t\tthis.joinCall()\n \n \t\t\t// FIXME The participant will not be updated with the server data\n \t\t\t// when the conversation is got again (as "addParticipantOnce" is\n@@ -106,6 +120,14 @@ export default {\n \t\t\t}\n \t\t},\n \n+\t\tasync joinCall() {\n+\t\t\tawait this.$store.dispatch(\'joinCall\', {\n+\t\t\t\ttoken: this.token,\n+\t\t\t\tparticipantIdentifier: this.$store.getters.getParticipantIdentifier(),\n+\t\t\t\tflags: PARTICIPANT.CALL_FLAG.IN_CALL,\n+\t\t\t})\n+\t\t},\n+\n \t\tasync fetchCurrentConversation() {\n \t\t\tif (!this.token) {\n \t\t\t\treturn\n@@ -114,6 +136,16 @@ export default {\n \t\t\ttry {\n \t\t\t\tconst response = await fetchConversation(this.token)\n \t\t\t\tthis.$store.dispatch(\'addConversation\', response.data.ocs.data)\n+\n+\t\t\t\t// Although the current participant is automatically added to\n+\t\t\t\t// the participants store it must be explicitly set in the\n+\t\t\t\t// actors store.\n+\t\t\t\tif (getCurrentUser()) {\n+\t\t\t\t\tthis.$store.dispatch(\'setCurrentUser\', getCurrentUser())\n+\t\t\t\t} else {\n+\t\t\t\t\t// Setting a guest only uses "sessionId" and "participantType".\n+\t\t\t\t\tthis.$store.dispatch(\'setCurrentParticipant\', response.data.ocs.data)\n+\t\t\t\t}\n \t\t\t} catch (exception) {\n \t\t\t\twindow.clearInterval(this.fetchCurrentConversationIntervalId)\n \n@@ -159,4 +191,80 @@ export default {\n \tmin-width: 0 !important;\n \tmax-width: 0 !important;\n }\n+\n+#talk-sidebar {\n+\tdisplay: flex;\n+\tflex-direction: column;\n+\tjustify-content: center;\n+}\n+\n+#talk-sidebar > .emptycontent {\n+\t/* Remove default margin-top as it is unneeded when showing only the empty\n+\t * content in a flex sidebar. */\n+\tmargin-top: 0;\n+}\n+\n+#talk-sidebar #call-container {\n+\tposition: relative;\n+\n+\tflex-grow: 1;\n+\n+\t/* Prevent shadows of videos from leaking on other elements. */\n+\toverflow: hidden;\n+\n+\t/* Distribute available height between call container and chat view. */\n+\theight: 50%;\n+\n+\t/* Ensure that the background will be black also in voice only calls. */\n+\tbackground-color: #000;\n+}\n+\n+#talk-sidebar #call-container ::v-deep .videoContainer {\n+        /* The video container has some small padding to prevent the video from\n+         * reaching the edges, but it also uses "width: 100%", so the padding should\n+         * be included in the full width of the element. */\n+        box-sizing: border-box;\n+}\n+\n+#talk-sidebar #call-container ::v-deep .videoContainer.promoted video {\n+\t/* Base the size of the video on its width instead of on its height;\n+\t * otherwise the video could appear in full height but cropped on the sides\n+\t * due to the space available in the sidebar being typically larger in\n+\t * vertical than in horizontal. */\n+\twidth: 100%;\n+\theight: auto;\n+}\n+\n+#talk-sidebar #call-container ::v-deep .nameIndicator {\n+\t/* The name indicator has some small padding to prevent the name from\n+\t * reaching the edges, but it also uses "width: 100%", so the padding should\n+\t * be included in the full width of the element. */\n+\tbox-sizing: border-box;\n+}\n+\n+#talk-sidebar .chatView {\n+\tdisplay: flex;\n+\tflex-direction: column;\n+\toverflow: hidden;\n+\n+\tflex-grow: 1;\n+\n+\t/* Distribute available height between call container and chat view. */\n+\theight: 50%;\n+}\n+\n+/* Unset conflicting rules from guest.css for the sidebar. */\n+#talk-sidebar {\n+\ttext-align: left;\n+}\n+\n+#talk-sidebar ::v-deep .wrapper {\n+\tmargin-top: 0;\n+}\n+\n+/* Restore rules from style.scss overriden by guest.css for the sidebar. */\n+#talk-sidebar ::v-deep a {\n+\tcolor: var(--color-main-text);\n+\tfont-weight: inherit;\n+}\n </style>\n', 'addition_count': 117, 'deletion_count': 9, 'src_file': 'a/src/PublicShareAuthSidebar.vue', 'tgt_file': 'b/src/PublicShareAuthSidebar.vue', 'file_extension': '.vue', 'before_file': '<!--\n  - @copyright Copyright (c) 2020, Daniel Calviño Sánchez <danxuliu@gmail.com>\n  -\n  - @author Marco Ambrosini <marcoambrosini@icloud.com>\n  -\n  - @license GNU AGPL version 3 or any later version\n  -\n  - This program is free software: you can redistribute it and/or modify\n  - it under the terms of the GNU Affero General Public License as\n  - published by the Free Software Foundation, either version 3 of the\n  - License, or (at your option) any later version.\n  -\n  - This program is distributed in the hope that it will be useful,\n  - but WITHOUT ANY WARRANTY; without even the implied warranty of\n  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the\n  - GNU Affero General Public License for more details.\n  -\n  - You should have received a copy of the GNU Affero General Public License\n  - along with this program. If not, see <http://www.gnu.org/licenses/>.\n  -\n  -->\n\n<template>\n\t<transition name="slide-right">\n\t\t\t\t<div class="icon icon-talk" />\n\t\t\t\t<h2>{{ t(\'spreed\', \'This conversation has ended\') }}</h2>\n\t\t\t</div>\n\t\t\t<div v-else class="emptycontent">\n\t\t\t\t<div class="icon icon-talk" />\n\t\t\t\t<h2>Password requested</h2>\n\t\t\t</div>\n\t\t</aside>\n\t</transition>\n</template>\n\n<script>\nimport { EventBus } from \'./services/EventBus\'\nimport { fetchConversation } from \'./services/conversationsService\'\nimport { joinConversation } from \'./services/participantsService\'\nimport ChatView from \'./components/ChatView.vue\'\nimport TopBar from \'./components/TopBar/TopBar.vue\'\nimport { EventBus } from \'./services/EventBus.js\'\n\n\tname: \'PublicShareAuthSidebar\',\n\n\tdata() {\n\t\treturn {\n\t\t\tfetchCurrentConversationIntervalId: null,\n\tcomponents: {\n\t\tCallView,\n\t\tChatView,\n\t\tTopBar,\n\t},\n\n\tmixins: [\n\t\tsessionIssueHandler,\n\t\ttalkHashCheck,\n\t],\n\n\tdata() {\n\t\treturn {\n\t\t\tfetchCurrentConversationIntervalId: null,\n\t\t\tisWaitingToClose: false,\n\t\t}\n\t},\n\n\tcomputed: {\n\t\ttoken() {\n\t\t\treturn this.$store.getters.getToken()\n\t\t},\n\n\t\tconversation() {\n\t\t\treturn this.$store.getters.conversation(this.token)\n\t\t},\n\n\t\tisOpen() {\n\t\t\treturn this.conversation || this.isWaitingToClose\n\t\t},\n\t},\n\n\twatch: {\n\t\ttoken(token) {\n\t\tasync joinConversation() {\n\t\t\tawait joinConversation(this.token)\n\n\t\t\t// No need to wait for it, but fetching the conversation needs to be\n\t\t\t// done once the user has joined the conversation (otherwise only\n\t\t\t// limited data would be received if the user was not a participant\n\t\t\t// of the conversation yet).\n\t\t\tthis.fetchCurrentConversation()\n\n\t\t\t// FIXME The participant will not be updated with the server data\n\t\t\t// when the conversation is got again (as "addParticipantOnce" is\n\t\t\t\t// We have to do this synchronously, because in unload and beforeunload\n\t\t\t\t// Promises, async and await are prohibited.\n\t\t\t\tsignalingKill()\n\t\t\t\tif (!this.isLeavingAfterSessionIssue) {\n\t\t\t\t\tleaveConversationSync(this.token)\n\t\t\t\t}\n\t\t\t}\n\t\t})\n\t},\n\n\tmethods: {\n\n\t\t\t}\n\t\t},\n\n\t\tasync fetchCurrentConversation() {\n\t\t\tif (!this.token) {\n\t\t\t\treturn\n\t\t\t// has been set, which is done once the conversation has been\n\t\t\t// fetched.\n\t\t\ttry {\n\t\t\t\tconst response = await fetchConversation(this.token)\n\t\t\t\tthis.$store.dispatch(\'addConversation\', response.data.ocs.data)\n\t\t\t} catch (exception) {\n\t\t\t\twindow.clearInterval(this.fetchCurrentConversationIntervalId)\n\n\t\t\t}\n\t\t},\n\n\t\tasync joinCall() {\n\t\t\tawait this.$store.dispatch(\'joinCall\', {\n\t\t\t\ttoken: this.token,\n\t\t\t\tparticipantIdentifier: this.$store.getters.getParticipantIdentifier(),\n\t\t\t\tsilent: false,\n\t\t\t})\n\t\t},\n\n\t\tasync fetchCurrentConversation() {\n\t\t\tif (!this.token) {\n\t\t\t\treturn\n\t\t\t}\n\n\t\t\ttry {\n\t\t\t\tawait this.$store.dispatch(\'fetchConversation\', { token: this.token })\n\n\t\t\t\t// Although the current participant is automatically added to\n\t\t\t\t// the participants store it must be explicitly set in the\n\t\t\t\t// actors store.\n\t\t\t\tif (!this.$store.getters.getUserId()) {\n\t\t\t\t\t// Set the current actor/participant for guests\n\t\t\t\t\tconst conversation = this.$store.getters.conversation(this.token)\n\n\t\t\t\t\t// Setting a guest only uses "sessionId" and "participantType".\n\t\t\t\t\tthis.$store.dispatch(\'setCurrentParticipant\', conversation)\n\t\t\t\t}\n\t\t\t} catch (exception) {\n\t\t\t\twindow.clearInterval(this.fetchCurrentConversationIntervalId)\n\n\t\t\t\tthis.$store.dispatch(\'deleteConversation\', this.token)\n\t\t\t\tthis.$store.dispatch(\'updateToken\', \'\')\n\t\t\t}\n\t\t},\n\t},\n}\n</script>\n\tmin-width: 0 !important;\n\tmax-width: 0 !important;\n}\n</style>\n}\n\n#talk-sidebar #call-container ::v-deep .nameIndicator {\n\t/* The name indicator has some small padding to prevent the name from\n\t * reaching the edges, but it also uses "width: 100%", so the padding should\n\t * be included in the full width of the element. */\n\tbox-sizing: border-box;\n}\n\n#talk-sidebar .chatView {\n\tdisplay: flex;\n\tflex-direction: column;\n\toverflow: hidden;\n\tposition: relative;\n\n\tflex-grow: 1;\n\n\t/* Distribute available height between call container and chat view. */\n\theight: 50%;\n}\n\n#talk-sidebar ::v-deep .wrapper {\n\tmargin-top: 0;\n}\n\n/* Restore rules from style.scss overriden by guest.css for the sidebar. */\n#talk-sidebar ::v-deep a {\n\tcolor: var(--color-main-text);\n\tfont-weight: inherit;\n}\n</style>\n', 'message': 'Replace dummy sidebar contents with CallView and ChatView\n\nSigned-off-by: Daniel Calviño Sánchez <bd7629e975cc0e00ea7cda4ab6a120f2ee42ac1b@gmail.com>\n', 'author_name': 'Daniel Calviño Sánchez', 'lang': 'vue'}