Conversation
st0nebreaker
left a comment
st0nebreaker
left a comment
There was a problem hiding this comment.
Looks good to me! I didn't catch any issues
| useEffect(() => { | ||
| const videos = features.map( | ||
| (vid, index): VideoElement => ({ | ||
| el: document.querySelector(`.video-${index}`), | ||
| paused: true, | ||
| }) | ||
| ) | ||
|
|
||
| if (window.IntersectionObserver) { | ||
| for (const vid of videos) { | ||
| const observer = new IntersectionObserver( | ||
| entries => { | ||
| const currentVideo = entries[0] | ||
|
|
||
| if (!currentVideo.isIntersecting && !vid.paused) { | ||
| vid?.el?.pause() | ||
| vid.paused = true | ||
| } else if (vid.paused) { | ||
| vid?.el?.play() | ||
| vid.paused = false | ||
| } | ||
| }, | ||
| { threshold: 1 } | ||
| ) | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| observer.observe(vid.el!) | ||
| } | ||
| } | ||
| }, []) |
There was a problem hiding this comment.
This is sweet! I haven't programmatically manipulated videos yet 🤓
There was a problem hiding this comment.
Seconding @st0nebraker here. It'll be awesome to learn more about how this works!
There was a problem hiding this comment.
Awesome, thanks y'all! This was quite an interesting solution! We can chat about it sometime 🤓
zlonko
left a comment
zlonko
left a comment
There was a problem hiding this comment.
It's awesome to see the homepage finally on the Replatform! Thank you for going above and beyond with improvements to style, tracking, implementation across the repo, etc. This looks great!
| const image = | ||
| post.frontmatter.socialImage ?? 'https://about.sourcegraph.com/meta/sourcegraph-social-image-share-02.png' |
There was a problem hiding this comment.
Did this happen to occur with Prettier? I saw a similar change today when I ran the script. I am not sure this is necessary. Perhaps let's update this rule when we revisit the Prettier cookbook?
There was a problem hiding this comment.
Yeah, prettier likes to wrap things to new lines if they're too long. It's great for some things, but in this case it's kind-of weird eh? We can look into updating our prettier settings soon!
| buttonLocation, | ||
| } from '@components' | ||
| import { ContentSection, BlockquoteWithBorder, IntegrationsSection, Layout, SelfHostedSection } from '@components' | ||
| import { buttonStyle, buttonLocation } from '@data' |
There was a problem hiding this comment.
Very much appreciate how you gave button tracking its own new home!
There was a problem hiding this comment.
Thanks Tim! I anticipate we'll probably add a few more things in this directory in the future. Excited to organize some more things soon too! ✨
| useEffect(() => { | ||
| const videos = features.map( | ||
| (vid, index): VideoElement => ({ | ||
| el: document.querySelector(`.video-${index}`), | ||
| paused: true, | ||
| }) | ||
| ) | ||
|
|
||
| if (window.IntersectionObserver) { | ||
| for (const vid of videos) { | ||
| const observer = new IntersectionObserver( | ||
| entries => { | ||
| const currentVideo = entries[0] | ||
|
|
||
| if (!currentVideo.isIntersecting && !vid.paused) { | ||
| vid?.el?.pause() | ||
| vid.paused = true | ||
| } else if (vid.paused) { | ||
| vid?.el?.play() | ||
| vid.paused = false | ||
| } | ||
| }, | ||
| { threshold: 1 } | ||
| ) | ||
|
|
||
| // eslint-disable-next-line @typescript-eslint/no-non-null-assertion | ||
| observer.observe(vid.el!) | ||
| } | ||
| } | ||
| }, []) |
There was a problem hiding this comment.
Seconding @st0nebraker here. It'll be awesome to learn more about how this works!
3 participants
Ports over the homepage:
Test