Port over homepage #144
Port over homepage #144
Conversation
| 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 🤓
| 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!
Ports over the homepage:
Test