Skip to content

Commit

Permalink
fix the css
Browse files Browse the repository at this point in the history
  • Loading branch information
dyc3 committed Aug 26, 2024
1 parent 19a9e9f commit ff2e1af
Show file tree
Hide file tree
Showing 5 changed files with 79 additions and 105 deletions.
1 change: 1 addition & 0 deletions client/src/components/Chat.vue
Original file line number Diff line number Diff line change
Expand Up @@ -236,6 +236,7 @@ $chat-message-bg: $background-color;
.chat-header {
display: flex;
flex-direction: row;
align-items: center;
border-bottom: 1px solid #666;
}
Expand Down
6 changes: 3 additions & 3 deletions client/src/components/controls/VideoControls.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
8 changes: 4 additions & 4 deletions client/src/components/players/OmniPlayer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
24 changes: 4 additions & 20 deletions client/src/components/players/YoutubePlayer.vue
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@ export default {
}
this.resizeObserver = new ResizeObserver(this.fitToContainer);
console.log(this.$el);
this.resizeObserver.observe(this.$el);
},
mounted() {
Expand Down Expand Up @@ -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: {
Expand All @@ -312,4 +295,5 @@ export default {
};
</script>

<style lang="scss" scoped></style>
<style lang="scss" scoped>

Check failure on line 298 in client/src/components/players/YoutubePlayer.vue

View workflow job for this annotation

GitHub Actions / lint (18.x)

Delete `⏎`
</style>
145 changes: 67 additions & 78 deletions client/src/views/Room.vue
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand All @@ -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">
Expand All @@ -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>
Expand Down Expand Up @@ -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%;
}
Expand All @@ -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;
}
}
Expand Down Expand Up @@ -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;
Expand All @@ -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;
Expand All @@ -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;
Expand Down

0 comments on commit ff2e1af

Please sign in to comment.