fix the css

Author: dyc3

client/src/components/Chat.vue

@@ -236,6 +236,7 @@ $chat-message-bg: $background-color;
 .chat-header {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 	border-bottom: 1px solid #666;
 }
 

client/src/components/controls/VideoControls.vue

@@ -55,15 +55,15 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
 }
 
 .video-controls {
-	flex-basis: auto;
 	min-height: $video-controls-height;
 	transition: all 0.2s;
 	z-index: 100;
 	padding: 12px;
+	width: 100%;
 
 	&.in-video {
-		position: relative;
-		bottom: $video-controls-height;
+		position: absolute;
+		bottom: 0;
 
 		background: linear-gradient(
 			to top,

client/src/components/players/OmniPlayer.vue

@@ -91,14 +91,14 @@
 				@buffering="onBuffering"
 				@error="onError"
 			/>
-			<v-container v-else fluid fill-height class="no-video">
+			<div v-else class="no-video">
 				<h1>{{ $t("video.no-video") }}</h1>
 				<span>{{ $t("video.no-video-text") }}</span>
-			</v-container>
+			</div>
 			<template #fallback>
-				<v-container class="no-video">
+				<div class="no-video">
 					<v-progress-circular indeterminate />
-				</v-container>
+				</div>
 			</template>
 		</Suspense>
 	</div>

client/src/components/players/YoutubePlayer.vue

@@ -105,6 +105,7 @@ export default {
 		}
 
 		this.resizeObserver = new ResizeObserver(this.fitToContainer);
+		console.log(this.$el);
 		this.resizeObserver.observe(this.$el);
 	},
 	mounted() {
@@ -280,25 +281,7 @@ export default {
 			if (!this.player) {
 				return;
 			}
-			if (this.resizeRunawayDetected) {
-				this.resizeRunawayDetected = false;
-				return;
-			}
-			const before = {
-				width: this.$el.offsetWidth,
-				height: this.$el.offsetHeight,
-			};
-			this.player.setSize(this.$el.offsetWidth, this.$el.offsetHeight);
-			if (before.width !== this.$el.offsetWidth || before.height !== this.$el.offsetHeight) {
-				console.log(
-					"yt resize (detected runaway)",
-					before,
-					this.$el.offsetWidth,
-					this.$el.offsetHeight
-				);
-				this.resizeRunawayDetected = true;
-				this.player.setSize(before.width, before.height);
-			}
+			this.player.setSize("100%", "100%");
 		},
 	},
 	watch: {

client/src/views/Room.vue

@@ -26,10 +26,7 @@
 				<span id="connectStatus">{{ connectionStatus }}</span>
 			</div>
 			<div class="video-container">
-				<div
-					class="video-subcontainer"
-					:style="{ padding: store.state.fullscreen ? 0 : 'inherit' }"
-				>
+				<div class="video-subcontainer">
 					<div class="player-container">
 						<OmniPlayer
 							:source="store.state.room.currentSource"
@@ -39,7 +36,7 @@
 							@ready="onPlayerReady"
 						/>
 						<div id="mouse-event-swallower" :class="{ hide: controlsVisible }"></div>
-						<div class="in-video-chat" v-if="controlsMode == 'in-video'">
+						<div class="in-video-chat" v-if="controlsMode === 'in-video'">
 							<Chat ref="chat" @link-click="setAddPreviewText" />
 						</div>
 						<div class="playback-blocked-prompt" v-if="mediaPlaybackBlocked">
@@ -61,7 +58,10 @@
 						:mode="controlsMode"
 					/>
 				</div>
-				<div class="out-video-chat" v-if="controlsMode == 'outside-video' && !fullscreen">
+				<div
+					class="out-video-chat"
+					v-if="controlsMode === 'outside-video' && !store.state.fullscreen"
+				>
 					<Chat ref="chat" @link-click="setAddPreviewText" />
 				</div>
 			</div>
@@ -725,30 +725,29 @@ $in-video-chat-width: 400px;
 $in-video-chat-width-small: 250px;
 
 .video-container {
-	position: relative;
-	display: flex;
-	justify-content: center;
-	align-items: center;
-	flex-direction: row;
+	display: grid;
+	grid-template-columns: 1fr auto;
+	grid-template-rows: minmax(400px, 70vh);
 	width: 100%;
-
-	@media (max-width: $md-max) {
-		margin-left: 0;
-		margin-right: 0;
-	}
 }
 
 .video-subcontainer {
 	position: relative;
 	display: flex;
 	flex-direction: column;
-	flex-grow: 1;
+	height: 100%;
+}
+
+.player-container {
 	width: 100%;
+	height: 100%;
 }
 
 .layout-default {
 	.video-subcontainer {
-		max-width: 80%;
+		width: 80%;
+		justify-self: center;
+
 		@media (max-width: $md-max) {
 			max-width: 100%;
 		}
@@ -759,45 +758,34 @@ $in-video-chat-width-small: 250px;
 	padding: 0;
 
 	.video-container {
-		height: 85vh;
-		width: 100%;
+		grid-template-rows: minmax(400px, 85vh);
 	}
 
 	.room-title {
 		font-size: 24px;
 	}
 }
 
-#mouse-event-swallower {
-	position: absolute;
-	top: 0;
-	width: 100%;
-	height: 100%;
+.fullscreen {
+	padding: 0;
 
-	&.hide {
-		display: none;
+	.video-container {
+		display: block;
+		margin: 0;
+		height: 100vh;
+		max-height: 100vh;
+		aspect-ratio: inherit;
+		width: 100vw;
 	}
-}
-
-.user-invite-container {
-	padding: 0 10px;
-	min-height: 500px;
 
-	> * {
-		margin-bottom: 10px;
+	.video-subcontainer {
+		width: 100%;
+		max-height: 100vh;
+		padding: 0;
 	}
-}
-
-.queue-tab-content {
-	// HACK: the save button in room settings is not sticky if overflow is not "visible"
-	overflow: visible;
-}
 
-.tab-text {
-	margin: 0 8px;
-
-	@media screen and (max-width: $sm-max) {
-		display: none;
+	.player-container {
+		height: 100vh;
 	}
 }
 
@@ -828,6 +816,39 @@ $in-video-chat-width-small: 250px;
 	pointer-events: none;
 }
 
+#mouse-event-swallower {
+	position: absolute;
+	top: 0;
+	width: 100%;
+	height: 100%;
+
+	&.hide {
+		display: none;
+	}
+}
+
+.user-invite-container {
+	padding: 0 10px;
+	min-height: 500px;
+
+	> * {
+		margin-bottom: 10px;
+	}
+}
+
+.queue-tab-content {
+	// HACK: the save button in room settings is not sticky if overflow is not "visible"
+	overflow: visible;
+}
+
+.tab-text {
+	margin: 0 8px;
+
+	@media screen and (max-width: $sm-max) {
+		display: none;
+	}
+}
+
 .playback-blocked-prompt {
 	position: absolute;
 	top: 0;
@@ -847,39 +868,6 @@ $in-video-chat-width-small: 250px;
 	transition: transform 0s;
 }
 
-.player-container {
-	position: relative;
-	width: 100%;
-	height: 100%;
-	aspect-ratio: 16 / 9;
-
-	@media (min-aspect-ratio: 16 / 9) {
-		aspect-ratio: initial;
-	}
-}
-
-.fullscreen {
-	padding: 0;
-
-	.video-container {
-		display: block;
-		margin: 0;
-		height: 100vh;
-		max-height: 100vh;
-		aspect-ratio: inherit;
-		width: 100vw;
-	}
-
-	.video-subcontainer {
-		width: 100%;
-		max-height: 100vh;
-	}
-
-	.player-container {
-		height: 100vh;
-	}
-}
-
 .room {
 	@media (max-width: $md-max) {
 		padding: 0;
@@ -889,6 +877,7 @@ $in-video-chat-width-small: 250px;
 .room-header {
 	display: flex;
 	flex-direction: row;
+	align-items: center;
 	margin: 0 10px;
 	> * {
 		align-self: flex-end;