Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Reapply "client: move chat outside of youtube player bounds to comply with youtube TOS (#1791)" #1796

Merged
merged 2 commits into from
Aug 26, 2024
Merged

Reapply "client: move chat outside of youtube player bounds to comply with youtube TOS (#1791)" #1796

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
19a9e9f
Reapply "client: move chat outside of youtube player bounds to comply…
dyc3 Aug 26, 2024
9c9355d
fix the css
dyc3 Aug 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 3 additions & 2 deletions client/src/components/Chat.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand Down 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
51 changes: 27 additions & 24 deletions client/src/components/controls/VideoControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
Expand Down Expand Up @@ -53,14 +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 All @@ -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;

Expand All @@ -90,6 +92,7 @@ $media-control-background: var(--v-theme-media-control-background, (0, 0, 0));
}

.controls-row2 {
display: flex;
align-items: center;
}
}
Expand Down
8 changes: 4 additions & 4 deletions client/src/components/players/OmniPlayer.vue
View file
Open in desktop
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
21 changes: 2 additions & 19 deletions client/src/components/players/YoutubePlayer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -105,6 +105,7 @@
}

this.resizeObserver = new ResizeObserver(this.fitToContainer);
console.log(this.$el);
this.resizeObserver.observe(this.$el);
},
mounted() {
Expand Down Expand Up @@ -280,25 +281,7 @@
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%");

Check warning on line 284 in client/src/components/players/YoutubePlayer.vue

View check run for this annotation

Codecov / codecov/patch

client/src/components/players/YoutubePlayer.vue#L284 

Added line #L284 was not covered by tests
},
},
watch: {
Expand Down
Loading
Loading