From ff2e1af61ab474408bdc6d1281d6be13dfe168e0 Mon Sep 17 00:00:00 2001 From: Carson McManus Date: Mon, 26 Aug 2024 06:18:07 -0400 Subject: [PATCH] fix the css --- client/src/components/Chat.vue | 1 + .../src/components/controls/VideoControls.vue | 6 +- client/src/components/players/OmniPlayer.vue | 8 +- .../src/components/players/YoutubePlayer.vue | 24 +-- client/src/views/Room.vue | 145 ++++++++---------- 5 files changed, 79 insertions(+), 105 deletions(-) diff --git a/client/src/components/Chat.vue b/client/src/components/Chat.vue index dca38ae71..85b74c05a 100644 --- a/client/src/components/Chat.vue +++ b/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; } diff --git a/client/src/components/controls/VideoControls.vue b/client/src/components/controls/VideoControls.vue index 59822fdf9..8d31b9ef2 100644 --- a/client/src/components/controls/VideoControls.vue +++ b/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, diff --git a/client/src/components/players/OmniPlayer.vue b/client/src/components/players/OmniPlayer.vue index c89c736ea..944c8bacb 100644 --- a/client/src/components/players/OmniPlayer.vue +++ b/client/src/components/players/OmniPlayer.vue @@ -91,14 +91,14 @@ @buffering="onBuffering" @error="onError" /> - +

{{ $t("video.no-video") }}

{{ $t("video.no-video-text") }} - +
diff --git a/client/src/components/players/YoutubePlayer.vue b/client/src/components/players/YoutubePlayer.vue index 4b796f61d..11cf74aff 100644 --- a/client/src/components/players/YoutubePlayer.vue +++ b/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: { @@ -312,4 +295,5 @@ export default { }; - + diff --git a/client/src/views/Room.vue b/client/src/views/Room.vue index b2f22222a..fa8856d2f 100644 --- a/client/src/views/Room.vue +++ b/client/src/views/Room.vue @@ -26,10 +26,7 @@ {{ connectionStatus }}
-
+
-
+
@@ -61,7 +58,10 @@ :mode="controlsMode" />
-
+
@@ -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,8 +758,7 @@ $in-video-chat-width-small: 250px; padding: 0; .video-container { - height: 85vh; - width: 100%; + grid-template-rows: minmax(400px, 85vh); } .room-title { @@ -768,36 +766,26 @@ $in-video-chat-width-small: 250px; } } -#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;