Add call time

Signed-off-by: Marco <[email protected]>

src/components/TopBar/CallTime.vue

@@ -0,0 +1,127 @@
+<!--
+  - @copyright Copyright (c) 2021 Marco Ambrosini <[email protected]>  -
+  - @author Marco Ambrosini <[email protected]>
+  -
+  - @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>
+	<div class="call-time">
+		<NcPopover class="top-bar__button"
+			close-after-click="true"
+			:menu-title="callTime"
+			:shown.sync="showPopover"
+			:triggers="[]"
+			:container="container">
+			<template #trigger>
+				<NcButton :disabled="!isRecording" type="tertiary" @click="showPopover = true">
+					<template v-if="isRecording" #icon>
+						<RecordCircle :size="20"
+							fill-color="#e9322d" />
+					</template>
+					{{ callTime }}
+				</ncbutton>
+			</template>
+			<NcButton type="tertiary-no-background"
+				@click="stopRecording">
+				<template #icon>
+					<StopIcon :size="20" />
+				</template>
+				{{ t('spreed', 'Stop recording') }}
+			</NcButton>
+		</NcPopover>
+	</div>
+</template>
+
+<script>
+
+import RecordCircle from 'vue-material-design-icons/RecordCircle.vue'
+import StopIcon from 'vue-material-design-icons/Stop.vue'
+import NcPopover from '@nextcloud/vue/dist/Components/NcPopover.js'
+import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+
+export default {
+	name: 'CallTime',
+
+	components: {
+		RecordCircle,
+		StopIcon,
+		NcPopover,
+		NcButton,
+	},
+
+	props: {
+		/**
+		 * The date object, if undefined the stopwatch is back to the initial
+		 * state.
+		 */
+		start: {
+			type: Date,
+			default: undefined,
+		},
+
+		isRecording: {
+			type: Boolean,
+			required: true,
+		},
+	},
+
+	data() {
+		return {
+			hours: undefined,
+			minutes: undefined,
+			seconds: undefined,
+			showPopover: false,
+		}
+	},
+
+	computed: {
+		hasTime() {
+			return this.start !== undefined
+		},
+
+		container() {
+			return this.$store.getters.getMainContainerSelector()
+		},
+
+		callTime() {
+			return '11:11'
+		},
+	},
+
+	methods: {
+		stopRecording() {
+			this.$emit('stop-recording')
+			this.showPopover = false
+		},
+	},
+}
+</script>
+
+<style lang="scss" scoped>
+.call-time {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 44px;
+	font-weight: bold;
+	color: #fff;
+}
+
+::v-deep .button-vue:disabled {
+	opacity: 1 !important;
+}
+</style>

src/components/TopBar/TopBar.vue

@@ -52,6 +52,14 @@
 				</p>
 			</div>
 		</a>
+
+		<!-- Call time -->
+		<CallTime v-if="isInCall"
+			:start="new Date"
+			:is-recording="isRecording"
+			@stop-recording="isRecording = false" />
+
+		<!-- Local media controls -->
 		<LocalMediaControls v-if="isInCall"
 			class="local-media-controls"
 			:token="token"
@@ -100,7 +108,9 @@
 				<AccountMultiple :size="20"
 					:fill-color="isInCall ? '#ffffff': ''" />
 			</template>
-			{{ isInCall ? participantsInCall : '' }}
+			<template v-if="isInCall">
+				{{ participantsInCall }}
+			</template>
 		</NcButton>
 	</div>
 </template>
@@ -126,6 +136,7 @@ import LocalMediaControls from '../CallView/shared/LocalMediaControls.vue'
 import getParticipants from '../../mixins/getParticipants.js'
 import TopBarMenu from './TopBarMenu.vue'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
+import CallTime from './CallTime.vue'
 
 export default {
 	name: 'TopBar',
@@ -145,6 +156,7 @@ export default {
 		LocalMediaControls,
 		TopBarMenu,
 		NcButton,
+		CallTime,
 	},
 
 	mixins: [
@@ -173,7 +185,8 @@ export default {
 			unreadNotificationHandle: null,
 			localCallParticipantModel,
 			localMediaModel,
-
+			// TODO: real value
+			isRecording: true,
 		}
 	},
 
@@ -335,6 +348,11 @@ export default {
 		openConversationSettings() {
 			emit('show-conversation-settings', { token: this.token })
 		},
+
+		// TODO: implement real method
+		stopRecording() {
+			console.log('stop recordiiing')
+		},
 	},
 }
 </script>
@@ -431,8 +449,4 @@ export default {
 		color: var(--color-text-lighter);
 	}
 }
-
-.local-media-controls {
-	padding-left: $clickable-area;
-}
 </style>