Add dummy media controls

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

css/icons.scss

@@ -24,13 +24,33 @@
 &.icon-mail {
   background-image: url(icon-color-path('mail', 'actions', 'fff', 1, true));
 }
-&.forced-white.icon-menu-people {
-  background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1));
-}
 &.icon-changelog {
   background-image: url('../img/changelog.svg');
 }
 
+&.forced-white {
+	&.icon-menu-people {
+		background-image: url(icon-color-path('menu-people', 'spreed', 'fff', 1));
+	}
+	&.icon-audio {
+		background-image: url(icon-color-path('audio', 'actions', 'fff', 1, true));
+	}
+	&.icon-audio-off {
+		background-image: url(icon-color-path('audio-off', 'actions', 'fff', 1, true));
+	}
+	&.icon-video {
+		background-image: url(icon-color-path('video', 'actions', 'fff', 1, true));
+	}
+	&.icon-video-off {
+		background-image: url(icon-color-path('video-off', 'actions', 'fff', 1, true));
+	}
+	&.icon-screen {
+		background-image: url(icon-color-path('screen', 'actions', 'fff', 1, true));
+	}
+	&.icon-screen-off {
+		background-image: url(icon-color-path('screen-off', 'actions', 'fff', 1, true));
+	}
+}
 
 /* Show favorite icon in yellow instead of default black. */
 @include icon-color('star-dark', 'actions', 'FC0', 1, true);

src/components/CallView/CallView.vue

@@ -1,10 +1,53 @@
 <template>
-	<div class="stage" />
+	<div class="stage">
+		<div class="promoted-stream" />
+
+		<div class="video-container-row">
+			<div class="own-video">
+				<Avatar v-if="actorType === 'users'"
+					class="messages__avatar__icon"
+					:user="actorId"
+					:display-name="displayName"
+					:size="128" />
+				<div v-else
+					class="avatar guest">
+					{{ firstLetterOfGuestName }}
+				</div>
+
+				<MediaControls />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script>
+import Avatar from '@nextcloud/vue/dist/Components/Avatar'
+import MediaControls from './MediaControls'
+
 export default {
 	name: 'CallView',
+
+	components: {
+		Avatar,
+		MediaControls,
+	},
+
+	computed: {
+		actorType() {
+			return this.$store.getters.getActorType()
+		},
+		actorId() {
+			return this.$store.getters.getActorId()
+		},
+		displayName() {
+			return this.$store.getters.getDisplayName()
+		},
+
+		firstLetterOfGuestName() {
+			const customName = this.displayName !== t('spreed', 'Guest') ? this.displayName : '?'
+			return customName.charAt(0)
+		},
+	},
 }
 </script>
 
@@ -13,5 +56,20 @@ export default {
 	background: #000000;
 	width: 100%;
 	height: 100%;
+
+	.promoted-stream {
+		height: auto;
+	}
+
+	.video-container-row {
+		height: 180px;
+		position: absolute;
+		bottom: 0;
+		width: 100%;
+
+		.own-video {
+			float: right;
+		}
+	}
 }
 </style>

src/components/CallView/MediaControls.vue

@@ -0,0 +1,28 @@
+<template>
+	<div class="controls">
+		<button class="forced-white icon-audio" />
+		<button class="forced-white icon-video" />
+		<button class="forced-white icon-screen" />
+	</div>
+</template>
+
+<script>
+export default {
+	name: 'MediaControls',
+}
+</script>
+
+<style lang="scss" scoped>
+.controls {
+	width: 100%;
+	margin: 0 auto;
+
+	button {
+		background-color: transparent !important;
+		border: none;
+		width: 32px;
+		height: 32px;
+		background-size: 22px;
+	}
+}
+</style>

src/components/MessagesList/MessagesGroup/AuthorAvatar.vue

@@ -87,7 +87,7 @@ export default {
 
 <style lang="scss" scoped>
 
-// size of avtars of chat message authors
+// size of avatars of chat message authors
 $author-avatar-size: 32px;
 
 .avatar {