From 3212d0aeb1e7434b31a30e397b64d608cda8b7cb Mon Sep 17 00:00:00 2001
From: Carson McManus <carson.mcmanus1@gmail.com>
Date: Thu, 22 Aug 2024 13:40:22 -0400
Subject: [PATCH] client: move chat outside of youtube player bounds to comply
 with youtube TOS

---
 client/src/components/Chat.vue                |   4 +-
 .../src/components/controls/VideoControls.vue |  45 +--
 client/src/views/Room.vue                     | 348 +++++++++---------
 3 files changed, 210 insertions(+), 187 deletions(-)

diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue
index 6e0462f75..dca38ae71 100644
--- a/client/src/components/Chat.vue
+++ b/client/src/components/Chat.vue
@@ -73,11 +73,11 @@
 </template>
 
 <script lang="ts" setup>
-import { onUpdated, ref, Ref, nextTick, onMounted, onUnmounted } from "vue";
+import { onUpdated, ref, type Ref, nextTick, onMounted, onUnmounted } from "vue";
 import type { ChatMessage } from "ott-common/models/types";
 import { useConnection } from "@/plugins/connection";
 import { useRoomApi } from "@/util/roomapi";
-import { ServerMessageChat } from "ott-common/models/messages";
+import type { ServerMessageChat } from "ott-common/models/messages";
 import { useRoomKeyboardShortcuts } from "@/util/keyboard-shortcuts";
 import { useSfx } from "@/plugins/sfx";
 import ChatMsg from "./ChatMsg.vue";
diff --git a/client/src/components/controls/VideoControls.vue b/client/src/components/controls/VideoControls.vue
index b5fadc874..59822fdf9 100644
--- a/client/src/components/controls/VideoControls.vue
+++ b/client/src/components/controls/VideoControls.vue
@@ -1,24 +1,26 @@
 <template>
-	<v-col
-		:class="{
-			'video-controls': true,
-			'in-video': mode == 'in-video',
-			'outside-video': mode == 'outside-video',
-			'hide': !controlsVisible,
-		}"
-	>
-		<VideoProgressSlider :current-position="sliderPosition" />
-		<v-row no-gutters class="controls-row2">
-			<BasicControls :current-position="truePosition" />
-			<!-- eslint-disable-next-line vue/no-v-model-argument -->
-			<VolumeControl />
-			<TimestampDisplay :current-position="truePosition" data-cy="timestamp-display" />
-			<div class="grow"><!-- Spacer --></div>
-			<ClosedCaptionsSwitcher />
-			<PlaybackRateSwitcher />
-			<LayoutSwitcher />
-		</v-row>
-	</v-col>
+	<div class="video-controls-wrapper">
+		<div
+			:class="{
+				'video-controls': true,
+				'in-video': mode == 'in-video',
+				'outside-video': mode == 'outside-video',
+				'hide': !controlsVisible,
+			}"
+		>
+			<VideoProgressSlider :current-position="sliderPosition" />
+			<div class="controls-row2">
+				<BasicControls :current-position="truePosition" />
+				<!-- eslint-disable-next-line vue/no-v-model-argument -->
+				<VolumeControl />
+				<TimestampDisplay :current-position="truePosition" data-cy="timestamp-display" />
+				<div class="grow"><!-- Spacer --></div>
+				<ClosedCaptionsSwitcher />
+				<PlaybackRateSwitcher />
+				<LayoutSwitcher />
+			</div>
+		</div>
+	</div>
 </template>
 
 <script lang="ts" setup>
@@ -57,6 +59,7 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
 	min-height: $video-controls-height;
 	transition: all 0.2s;
 	z-index: 100;
+	padding: 12px;
 
 	&.in-video {
 		position: relative;
@@ -77,7 +80,6 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
 	}
 
 	&.outside-video {
-		position: relative;
 		background: rgb($media-control-background);
 		border-radius: 0 0 10px 10px;
 
@@ -90,6 +92,7 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
 	}
 
 	.controls-row2 {
+		display: flex;
 		align-items: center;
 	}
 }
diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue
index b88d77847..b2f22222a 100644
--- a/client/src/views/Room.vue
+++ b/client/src/views/Room.vue
@@ -25,37 +25,32 @@
 				<div class="grow"><!-- Spacer --></div>
 				<span id="connectStatus">{{ connectionStatus }}</span>
 			</div>
-			<v-col :style="{ padding: store.state.fullscreen ? 0 : 'inherit' }">
-				<div class="video-container">
-					<div
-						class="video-subcontainer"
-						:style="{ padding: store.state.fullscreen ? 0 : 'inherit' }"
-					>
-						<div class="player-container">
-							<OmniPlayer
-								:source="store.state.room.currentSource"
-								@apiready="onPlayerApiReady"
-								@playing="onPlaybackChange(true)"
-								@paused="onPlaybackChange(false)"
-								@ready="onPlayerReady"
-							/>
-							<div
-								id="mouse-event-swallower"
-								:class="{ hide: controlsVisible }"
-							></div>
-							<div class="in-video-chat">
-								<Chat ref="chat" @link-click="setAddPreviewText" />
-							</div>
-							<div class="playback-blocked-prompt" v-if="mediaPlaybackBlocked">
-								<v-btn
-									prepend-icon="mdi-play"
-									size="x-large"
-									color="warning"
-									@click="onClickUnblockPlayback"
-								>
-									{{ $t("common.play") }}
-								</v-btn>
-							</div>
+			<div class="video-container">
+				<div
+					class="video-subcontainer"
+					:style="{ padding: store.state.fullscreen ? 0 : 'inherit' }"
+				>
+					<div class="player-container">
+						<OmniPlayer
+							:source="store.state.room.currentSource"
+							@apiready="onPlayerApiReady"
+							@playing="onPlaybackChange(true)"
+							@paused="onPlaybackChange(false)"
+							@ready="onPlayerReady"
+						/>
+						<div id="mouse-event-swallower" :class="{ hide: controlsVisible }"></div>
+						<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">
+							<v-btn
+								prepend-icon="mdi-play"
+								size="x-large"
+								color="warning"
+								@click="onClickUnblockPlayback"
+							>
+								{{ $t("common.play") }}
+							</v-btn>
 						</div>
 					</div>
 					<VideoControls
@@ -66,108 +61,111 @@
 						:mode="controlsMode"
 					/>
 				</div>
-				<div class="banners">
-					<RestoreQueue />
-					<VoteSkip />
+				<div class="out-video-chat" v-if="controlsMode == 'outside-video' && !fullscreen">
+					<Chat ref="chat" @link-click="setAddPreviewText" />
+				</div>
+			</div>
+			<div class="banners">
+				<RestoreQueue />
+				<VoteSkip />
+			</div>
+			<div class="under-video-grid">
+				<div class="under-video-tabs">
+					<v-tabs fixed-tabs v-model="queueTab" color="primary">
+						<v-tab>
+							<v-icon>mdi-format-list-bulleted</v-icon>
+							<span class="tab-text">{{ $t("room.tabs.queue") }}</span>
+							<v-chip size="x-small">
+								{{
+									store.state.room.queue.length <= 99
+										? $n(store.state.room.queue.length)
+										: "99+"
+								}}
+							</v-chip>
+						</v-tab>
+						<v-tab>
+							<v-icon>mdi-plus</v-icon>
+							<span class="tab-text">{{ $t("common.add") }}</span>
+						</v-tab>
+						<v-tab>
+							<v-icon>mdi-wrench</v-icon>
+							<span class="tab-text">{{ $t("room.tabs.settings") }}</span>
+						</v-tab>
+					</v-tabs>
+					<v-window v-model="queueTab" class="queue-tab-content">
+						<v-window-item>
+							<VideoQueue @switchtab="queueTab = 1" />
+						</v-window-item>
+						<v-window-item>
+							<AddPreview ref="addpreview" />
+						</v-window-item>
+						<v-window-item>
+							<RoomSettingsForm ref="settings" />
+						</v-window-item>
+					</v-window>
 				</div>
-				<v-row no-gutters>
-					<v-col cols="12" md="8" sm="12">
-						<v-tabs fixed-tabs v-model="queueTab" color="primary">
-							<v-tab>
-								<v-icon>mdi-format-list-bulleted</v-icon>
-								<span class="tab-text">{{ $t("room.tabs.queue") }}</span>
-								<v-chip size="x-small">
-									{{
-										store.state.room.queue.length <= 99
-											? $n(store.state.room.queue.length)
-											: "99+"
-									}}
-								</v-chip>
-							</v-tab>
-							<v-tab>
-								<v-icon>mdi-plus</v-icon>
-								<span class="tab-text">{{ $t("common.add") }}</span>
-							</v-tab>
-							<v-tab>
-								<v-icon>mdi-wrench</v-icon>
-								<span class="tab-text">{{ $t("room.tabs.settings") }}</span>
-							</v-tab>
-						</v-tabs>
-						<v-window v-model="queueTab" class="queue-tab-content">
-							<v-window-item>
-								<VideoQueue @switchtab="queueTab = 1" />
-							</v-window-item>
-							<v-window-item>
-								<AddPreview ref="addpreview" />
-							</v-window-item>
-							<v-window-item>
-								<RoomSettingsForm ref="settings" />
-							</v-window-item>
-						</v-window>
-					</v-col>
-					<v-col col="4" md="4" sm="12" class="user-invite-container">
-						<div v-if="debugMode" class="debug-container">
-							<v-card>
-								<v-card-title> Debug (prod: {{ production }}) </v-card-title>
-								<v-list-item>
-									Player status: {{ store.state.playerStatus }}
-								</v-list-item>
-								<v-list-item v-if="store.state.playerBufferPercent">
-									Buffered:
-									{{ Math.round(store.state.playerBufferPercent * 10000) / 100 }}%
-								</v-list-item>
-								<v-list-item
-									v-if="
-										store.state.playerBufferSpans &&
-										store.state.playerBufferSpans.length > 0
-									"
-								>
-									Buffered spans:
-									{{ store.state.playerBufferSpans.length }}
-									{{
-										Array.from(
-											{ length: store.state.playerBufferSpans.length },
-											(v, k) => k++
+				<div class="user-invite-container">
+					<div v-if="debugMode" class="debug-container">
+						<v-card>
+							<v-card-title> Debug (prod: {{ production }}) </v-card-title>
+							<v-list-item>
+								Player status: {{ store.state.playerStatus }}
+							</v-list-item>
+							<v-list-item v-if="store.state.playerBufferPercent">
+								Buffered:
+								{{ Math.round(store.state.playerBufferPercent * 10000) / 100 }}%
+							</v-list-item>
+							<v-list-item
+								v-if="
+									store.state.playerBufferSpans &&
+									store.state.playerBufferSpans.length > 0
+								"
+							>
+								Buffered spans:
+								{{ store.state.playerBufferSpans.length }}
+								{{
+									Array.from(
+										{ length: store.state.playerBufferSpans.length },
+										(v, k) => k++
+									)
+										.map(
+											i =>
+												`${i}: [${secondsToTimestamp(
+													store.state.playerBufferSpans?.start(i) ?? 0
+												)} => ${secondsToTimestamp(
+													store.state.playerBufferSpans?.end(i) ?? 0
+												)}]`
 										)
-											.map(
-												i =>
-													`${i}: [${secondsToTimestamp(
-														store.state.playerBufferSpans?.start(i) ?? 0
-													)} => ${secondsToTimestamp(
-														store.state.playerBufferSpans?.end(i) ?? 0
-													)}]`
-											)
-											.join(" ")
-									}}
-								</v-list-item>
-								<v-list-item>
-									<span>Is Mobile: {{ isMobile }}</span>
-								</v-list-item>
-								<v-list-item>
-									<span>Device Orientation: {{ orientation }}</span>
-								</v-list-item>
-								<v-list-item>
-									<span>
-										Video controls: timeoutId:
-										{{ videoControlsHideTimeout }} visible:
-										{{ controlsVisible }}
-									</span>
-								</v-list-item>
-								<v-list-item>
-									<v-btn @click="roomapi.kickMe()" :disabled="!isConnected">
-										{{ $t("room.kick-me") }}
-									</v-btn>
-									<v-btn @click="roomapi.kickMe(1000)" :disabled="!isConnected">
-										Disconnect Me
-									</v-btn>
-								</v-list-item>
-							</v-card>
-						</div>
-						<UserList :users="Array.from(store.state.users.users.values())" />
-						<ShareInvite />
-					</v-col>
-				</v-row>
-			</v-col>
+										.join(" ")
+								}}
+							</v-list-item>
+							<v-list-item>
+								<span>Is Mobile: {{ isMobile }}</span>
+							</v-list-item>
+							<v-list-item>
+								<span>Device Orientation: {{ orientation }}</span>
+							</v-list-item>
+							<v-list-item>
+								<span>
+									Video controls: timeoutId:
+									{{ videoControlsHideTimeout }} visible:
+									{{ controlsVisible }}
+								</span>
+							</v-list-item>
+							<v-list-item>
+								<v-btn @click="roomapi.kickMe()" :disabled="!isConnected">
+									{{ $t("room.kick-me") }}
+								</v-btn>
+								<v-btn @click="roomapi.kickMe(1000)" :disabled="!isConnected">
+									Disconnect Me
+								</v-btn>
+							</v-list-item>
+						</v-card>
+					</div>
+					<UserList :users="Array.from(store.state.users.users.values())" />
+					<ShareInvite />
+				</div>
+			</div>
 		</v-container>
 		<v-footer>
 			<v-container>
@@ -727,55 +725,44 @@ $in-video-chat-width: 400px;
 $in-video-chat-width-small: 250px;
 
 .video-container {
+	position: relative;
 	display: flex;
-	align-items: center;
 	justify-content: center;
-	margin: auto;
-	flex-direction: column;
-	aspect-ratio: 16 / 9;
-
-	.video-subcontainer {
-		display: flex;
-		flex-grow: 1;
-		aspect-ratio: 16 / 9;
-		width: 100%;
-	}
+	align-items: center;
+	flex-direction: row;
+	width: 100%;
 
 	@media (max-width: $md-max) {
 		margin-left: 0;
 		margin-right: 0;
 	}
+}
 
-	@media (min-aspect-ratio: 16 / 9) {
-		aspect-ratio: initial;
-	}
+.video-subcontainer {
+	position: relative;
+	display: flex;
+	flex-direction: column;
+	flex-grow: 1;
+	width: 100%;
 }
 
 .layout-default {
-	.video-container {
-		width: 80vw;
-
+	.video-subcontainer {
+		max-width: 80%;
 		@media (max-width: $md-max) {
-			width: 100%;
+			max-width: 100%;
 		}
 	}
-
-	.video-subcontainer {
-		max-height: $video-player-max-height;
-	}
 }
 
 .layout-theater {
 	padding: 0;
 
 	.video-container {
+		height: 85vh;
 		width: 100%;
 	}
 
-	.video-subcontainer {
-		max-height: $video-player-max-height-theater;
-	}
-
 	.room-title {
 		font-size: 24px;
 	}
@@ -829,6 +816,18 @@ $in-video-chat-width-small: 250px;
 	pointer-events: none;
 }
 
+.out-video-chat {
+	padding: 5px 10px;
+
+	width: $in-video-chat-width;
+	height: 300px;
+	min-height: 100px;
+	@media screen and (max-width: $sm-max) {
+		width: $in-video-chat-width-small;
+	}
+	pointer-events: none;
+}
+
 .playback-blocked-prompt {
 	position: absolute;
 	top: 0;
@@ -850,9 +849,13 @@ $in-video-chat-width-small: 250px;
 
 .player-container {
 	position: relative;
-	top: 0;
-	left: 0;
 	width: 100%;
+	height: 100%;
+	aspect-ratio: 16 / 9;
+
+	@media (min-aspect-ratio: 16 / 9) {
+		aspect-ratio: initial;
+	}
 }
 
 .fullscreen {
@@ -865,12 +868,11 @@ $in-video-chat-width-small: 250px;
 		max-height: 100vh;
 		aspect-ratio: inherit;
 		width: 100vw;
+	}
 
-		.video-subcontainer {
-			width: 100%;
-			aspect-ratio: inherit;
-			max-height: 100vh;
-		}
+	.video-subcontainer {
+		width: 100%;
+		max-height: 100vh;
 	}
 
 	.player-container {
@@ -919,4 +921,22 @@ $in-video-chat-width-small: 250px;
 .grow {
 	flex-grow: 1;
 }
+
+.under-video-grid {
+	display: flex;
+	width: 100%;
+
+	@media screen and (max-width: $sm-max) {
+		flex-direction: column;
+	}
+}
+
+.under-video-tabs {
+	flex-grow: 1;
+	width: 60%;
+
+	@media screen and (max-width: $sm-max) {
+		width: 100%;
+	}
+}
 </style>