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

Jump to bottom

Resize aspect-ratio / padding to fix video overflow #641

Merged
merged 8 commits into from
Sep 8, 2022
Merged

Resize aspect-ratio / padding to fix video overflow #641

Changes from 1 commit
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
c7bd2be
Add the resize observer to update padding/aspect-ratio
LittorWired Sep 6, 2022
cafd760
Callback to update padding / aspect ration. Change heights.
LittorWired Sep 6, 2022
353f62a
Debounce the resize entries in the observer for perf
LittorWired Sep 7, 2022
9452589
move debounce implementation from realtime-api to core
edolix Sep 8, 2022
158b41f
welcome createRootElementResizeObserver
edolix Sep 8, 2022
1fc5d6f
use the new observer for rootElement
edolix Sep 8, 2022
5c46528
update heroku demo
edolix Sep 8, 2022
75b5ba4
changsets
edolix Sep 8, 2022
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
20 changes: 18 additions & 2 deletions packages/js/src/utils/videoElement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -170,11 +170,27 @@ const setVideoMediaTrack = ({
}) => {
element.srcObject = new MediaStream([track])

const debounce = <F extends (...args: any[]) => any>(
func: F,
timeout = 250
) => {
let timer!: ReturnType<typeof setTimeout>

return (...args: Parameters<F>): Promise<ReturnType<F>> =>
new Promise((resolve) => {
if (timer) clearTimeout(timer)
timer = setTimeout(() => resolve(func(...args)), timeout)
})
}

// debounce to avoid multiple calls
const debounceGetDimensionsFromResize = debounce(getDimensionsFromResize, 150)
edolix marked this conversation as resolved.
Show resolved Hide resolved

const rsObserver = new ResizeObserver((entries) => {
entries.forEach((entry) => {
// newer api but less supported
if (entry.contentBoxSize?.length > 0) {
getDimensionsFromResize({
debounceGetDimensionsFromResize({
width: entry.contentBoxSize[0].inlineSize,
height: entry.contentBoxSize[0].blockSize,
})
Expand All @@ -184,7 +200,7 @@ const setVideoMediaTrack = ({
entry.contentRect.width !== 0 &&
entry.contentRect.height !== 0
) {
getDimensionsFromResize({
debounceGetDimensionsFromResize({
width: entry.contentRect.width,
height: entry.contentRect.height,
})
Expand Down