Skip to content

Commit b06520d

Browse files
webstackdevwebstackdev
committed
Add intersection observer to pause carousels and computer animation when container is partially out of viewport
1 parent 45d2dd4 commit b06520d

7 files changed

Lines changed: 247 additions & 31 deletions

File tree

‎_TODO.md‎

Lines changed: 0 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -204,24 +204,6 @@ Google Calendar, Apple Calendar, Yahoo Calender, Microsoft 365, Outlook, and T
204204
`https://github.com/add2cal/add-to-calendar-button`
205205
`https://add-to-calendar-button.com/`
206206

207-
### Privacy Policy and Package Release Refactor
208-
209-
Refactor privacy policy and package release integrations to use virtual modules instead of env vars
210-
211-
### Markdown Unit Tests
212-
213-
Figure out why coverage.spec.ts isn't erroring on no unit tests in these remark / rehype plugins lacking any tests:
214-
215-
remark-mark-plus
216-
remark-custom-blocks
217-
rehype-inline-code-color-swatch
218-
rehype-footnotes-title
219-
220-
### CRON Job Failures
221-
222-
Error: 505, message='Invalid response status', url='wss://webstack-corporate-preview-webstackdev.aws-us-east-1.turso.io'
223-
Error: Process completed with exit code 1.
224-
225207
### Fix to Featured Pages Carousel
226208

227209
Pause carousels on intersection observer, when part of the carousel is scrolled off the page

‎src/components/Animations/Computers/client/__tests__/index.spec.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -259,7 +259,7 @@ describe('ComputersAnimationElement', () => {
259259
})
260260
})
261261

262-
it('pauses when the element scrolls out of the viewport and resumes when it returns', async () => {
262+
it('pauses when the element is not fully visible and resumes when it returns', async () => {
263263
await renderComputersAnimation(async ({ element, window }) => {
264264
void window
265265
element.initialize()
@@ -271,8 +271,8 @@ describe('ComputersAnimationElement', () => {
271271
intersectionObserverCallback?.(
272272
[
273273
{
274-
isIntersecting: false,
275-
intersectionRatio: 0,
274+
isIntersecting: true,
275+
intersectionRatio: 0.5,
276276
} as unknown as IntersectionObserverEntry,
277277
],
278278
{} as IntersectionObserver,

‎src/components/Animations/Computers/client/index.ts‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -171,10 +171,12 @@ export class ComputersAnimationElement extends LitElement {
171171
(entries) => {
172172
const entry = entries.at(0)
173173
const ratio = entry?.intersectionRatio ?? 0
174-
this.isInViewport = Boolean(entry?.isIntersecting && ratio > 0)
174+
// Pause as soon as the element is even partially out of view.
175+
// Only consider it "in viewport" when it is fully visible.
176+
this.isInViewport = Boolean(entry?.isIntersecting && ratio >= 0.999)
175177
this.syncPlaybackWithVisibility()
176178
},
177-
{ threshold: 0.01 },
179+
{ threshold: [0, 0.999] },
178180
)
179181

180182
this.intersectionObserver.observe(this)
@@ -375,9 +377,9 @@ export class ComputersAnimationElement extends LitElement {
375377

376378
this.timeline = gsap
377379
.timeline({
378-
defaults: { duration: 1 },
380+
defaults: { duration: 1, immediateRender: false },
379381
delay: 1,
380-
paused: false,
382+
paused: true,
381383
repeat: -1,
382384
yoyo: false,
383385
})

‎src/components/Carousel/client/__tests__/index.spec.ts‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { beforeEach, describe, expect, it, vi } from 'vitest'
2+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
33
import { experimental_AstroContainer as AstroContainer } from 'astro/container'
44
import CarouselComponent from '@components/Carousel/index.astro'
55
import type { CarouselProps } from '@components/Carousel/@types'
@@ -41,6 +41,21 @@ const setMockScrollSnaps = (snapCount: number) => {
4141
mockScrollSnaps = Array.from({ length: count }, (_, index) => index)
4242
}
4343

44+
let intersectionObserverCallback: IntersectionObserverCallback | undefined
45+
46+
const originalIntersectionObserver = (
47+
globalThis as unknown as { IntersectionObserver?: typeof IntersectionObserver }
48+
).IntersectionObserver
49+
50+
class IntersectionObserverMock {
51+
observe = vi.fn()
52+
disconnect = vi.fn()
53+
54+
constructor(callback: IntersectionObserverCallback) {
55+
intersectionObserverCallback = callback
56+
}
57+
}
58+
4459
vi.mock('@components/scripts/store', () => ({
4560
createAnimationController: createAnimationControllerMock,
4661
}))
@@ -139,6 +154,18 @@ describe('Carousel component (server output)', () => {
139154
autoplayPluginInstances.length = 0
140155
createAutoplayPluginMock.mockClear()
141156
setMockScrollSnaps(3)
157+
intersectionObserverCallback = undefined
158+
;(globalThis as unknown as { IntersectionObserver?: typeof IntersectionObserver }).IntersectionObserver =
159+
IntersectionObserverMock as unknown as typeof IntersectionObserver
160+
})
161+
162+
afterEach(() => {
163+
const globalIntersection = globalThis as unknown as { IntersectionObserver?: typeof IntersectionObserver }
164+
if (originalIntersectionObserver) {
165+
globalIntersection.IntersectionObserver = originalIntersectionObserver
166+
return
167+
}
168+
delete globalIntersection.IntersectionObserver
142169
})
143170

144171
it('renders the provided title and respects the requested limit', async () => {
@@ -231,6 +258,44 @@ describe('Carousel component (server output)', () => {
231258
}
232259
})
233260

261+
it('pauses autoplay when partially out of the viewport and resumes when fully visible again', async () => {
262+
vi.useFakeTimers()
263+
try {
264+
await renderCarousel(async () => {
265+
const pluginInstance = autoplayPluginInstances.at(-1)
266+
expect(pluginInstance).toBeDefined()
267+
expect(intersectionObserverCallback).toBeTypeOf('function')
268+
269+
intersectionObserverCallback?.(
270+
[
271+
{
272+
isIntersecting: true,
273+
intersectionRatio: 0.5,
274+
} as unknown as IntersectionObserverEntry,
275+
],
276+
{} as IntersectionObserver,
277+
)
278+
279+
await vi.runAllTimersAsync()
280+
expect(pluginInstance?.play).not.toHaveBeenCalled()
281+
282+
intersectionObserverCallback?.(
283+
[
284+
{
285+
isIntersecting: true,
286+
intersectionRatio: 1,
287+
} as unknown as IntersectionObserverEntry,
288+
],
289+
{} as IntersectionObserver,
290+
)
291+
292+
expect(pluginInstance?.play).toHaveBeenCalled()
293+
}, { currentSlug: 'article-four' })
294+
} finally {
295+
vi.useRealTimers()
296+
}
297+
})
298+
234299
it('skips autoplay wiring when Embla reports a single snap', async () => {
235300
setMockScrollSnaps(1)
236301
await renderCarousel(({ root }) => {

‎src/components/Carousel/client/index.ts‎

Lines changed: 53 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,6 +52,9 @@ export class CarouselElement extends HTMLElement {
5252
private autoplayReady = false
5353
private autoplayReadyScheduled = false
5454
private autoplayReadyTimer: TimerHandle | null = null
55+
private intersectionObserver: IntersectionObserver | undefined
56+
private isFullyInViewport = true
57+
private requestedAutoplayState: AnimationPlayState = 'paused'
5558
private readonly animationInstanceId: string
5659
private readonly domReadyHandler = () => {
5760
document.removeEventListener('DOMContentLoaded', this.domReadyHandler)
@@ -126,6 +129,7 @@ export class CarouselElement extends HTMLElement {
126129
this.hasAutoplaySupport = supportsAutoplay
127130
this.autoplayPlugin = supportsAutoplay ? requestedAutoplay : null
128131
this.setAutoplayState('paused')
132+
this.requestedAutoplayState = 'paused'
129133

130134
if (this.autoplayPlugin) {
131135
const emblaWithEvents = this.emblaApi as EmblaCarouselType & {
@@ -150,6 +154,7 @@ export class CarouselElement extends HTMLElement {
150154
})
151155
if (this.hasAutoplaySupport) {
152156
this.registerAnimationLifecycle()
157+
this.setupViewportObserver()
153158
this.scheduleAutoplayReady()
154159
}
155160
} catch (error) {
@@ -163,6 +168,7 @@ export class CarouselElement extends HTMLElement {
163168
}
164169

165170
private teardown(): void {
171+
this.teardownViewportObserver()
166172
this.removeEventListener('keydown', this.keydownHandler)
167173
if (this.emblaApi) {
168174
const emblaWithEvents = this.emblaApi as EmblaCarouselType & {
@@ -347,20 +353,65 @@ export class CarouselElement extends HTMLElement {
347353

348354
pause(): void {
349355
try {
350-
this.updateAutoplayState('paused')
356+
this.requestedAutoplayState = 'paused'
357+
this.syncAutoplayWithViewport()
351358
} catch (error) {
352359
handleScriptError(error, { scriptName: SCRIPT_NAME, operation: 'pause' })
353360
}
354361
}
355362

356363
resume(): void {
357364
try {
358-
this.updateAutoplayState('playing')
365+
this.requestedAutoplayState = 'playing'
366+
this.syncAutoplayWithViewport()
359367
} catch (error) {
360368
handleScriptError(error, { scriptName: SCRIPT_NAME, operation: 'resume' })
361369
}
362370
}
363371

372+
private setupViewportObserver(): void {
373+
if (typeof document === 'undefined') return
374+
if (this.intersectionObserver) return
375+
376+
try {
377+
const IntersectionObserverCtor = (
378+
globalThis as unknown as { IntersectionObserver?: typeof IntersectionObserver }
379+
).IntersectionObserver
380+
381+
if (typeof IntersectionObserverCtor !== 'function') return
382+
383+
this.intersectionObserver = new IntersectionObserverCtor(
384+
(entries) => {
385+
const entry = entries.at(0)
386+
const ratio = entry?.intersectionRatio ?? 0
387+
this.isFullyInViewport = Boolean(entry?.isIntersecting && ratio >= 0.999)
388+
this.syncAutoplayWithViewport()
389+
},
390+
{ threshold: [0, 0.999] },
391+
)
392+
393+
const observedTarget = this.emblaRoot ?? this
394+
this.intersectionObserver.observe(observedTarget)
395+
} catch {
396+
// Best effort only
397+
}
398+
}
399+
400+
private teardownViewportObserver(): void {
401+
try {
402+
this.intersectionObserver?.disconnect()
403+
this.intersectionObserver = undefined
404+
this.isFullyInViewport = true
405+
} catch {
406+
// Best effort only
407+
}
408+
}
409+
410+
private syncAutoplayWithViewport(): void {
411+
const shouldPlay = this.requestedAutoplayState === 'playing' && this.isFullyInViewport
412+
this.updateAutoplayState(shouldPlay ? 'playing' : 'paused')
413+
}
414+
364415
private setAutoplayState(state: 'playing' | 'paused'): void {
365416
this.setAttribute('data-carousel-autoplay', state)
366417
}

‎src/components/Testimonials/client/__tests__/index.spec.ts‎

Lines changed: 66 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11

2-
import { beforeEach, describe, expect, it, vi } from 'vitest'
2+
import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
33
import { experimental_AstroContainer as AstroContainer } from 'astro/container'
44
import TestimonialsComponent from '@components/Testimonials/index.astro'
55
import type { TestimonialsProps } from '@components/Testimonials/props'
@@ -34,6 +34,21 @@ const createAutoplayPluginMock = vi.fn(() => {
3434
return instance
3535
})
3636

37+
let intersectionObserverCallback: IntersectionObserverCallback | undefined
38+
39+
const originalIntersectionObserver = (
40+
globalThis as unknown as { IntersectionObserver?: typeof IntersectionObserver }
41+
).IntersectionObserver
42+
43+
class IntersectionObserverMock {
44+
observe = vi.fn()
45+
disconnect = vi.fn()
46+
47+
constructor(callback: IntersectionObserverCallback) {
48+
intersectionObserverCallback = callback
49+
}
50+
}
51+
3752
vi.mock('@components/scripts/store', () => ({
3853
createAnimationController: createAnimationControllerMock,
3954
}))
@@ -107,6 +122,18 @@ describe('Testimonials component', () => {
107122
createAnimationControllerMock.mockClear()
108123
autoplayPluginInstances.length = 0
109124
createAutoplayPluginMock.mockClear()
125+
intersectionObserverCallback = undefined
126+
;(globalThis as unknown as { IntersectionObserver?: typeof IntersectionObserver }).IntersectionObserver =
127+
IntersectionObserverMock as unknown as typeof IntersectionObserver
128+
})
129+
130+
afterEach(() => {
131+
const globalIntersection = globalThis as unknown as { IntersectionObserver?: typeof IntersectionObserver }
132+
if (originalIntersectionObserver) {
133+
globalIntersection.IntersectionObserver = originalIntersectionObserver
134+
return
135+
}
136+
delete globalIntersection.IntersectionObserver
110137
})
111138

112139
it('renders the supplied title and respects the limit', async () => {
@@ -195,6 +222,44 @@ describe('Testimonials component', () => {
195222
}
196223
})
197224

225+
it('pauses autoplay when partially out of the viewport and resumes when fully visible again', async () => {
226+
vi.useFakeTimers()
227+
try {
228+
await renderTestimonials(async () => {
229+
const pluginInstance = autoplayPluginInstances.at(-1)
230+
expect(pluginInstance).toBeDefined()
231+
expect(intersectionObserverCallback).toBeTypeOf('function')
232+
233+
intersectionObserverCallback?.(
234+
[
235+
{
236+
isIntersecting: true,
237+
intersectionRatio: 0.5,
238+
} as unknown as IntersectionObserverEntry,
239+
],
240+
{} as IntersectionObserver,
241+
)
242+
243+
await vi.runAllTimersAsync()
244+
expect(pluginInstance?.play).not.toHaveBeenCalled()
245+
246+
intersectionObserverCallback?.(
247+
[
248+
{
249+
isIntersecting: true,
250+
intersectionRatio: 1,
251+
} as unknown as IntersectionObserverEntry,
252+
],
253+
{} as IntersectionObserver,
254+
)
255+
256+
expect(pluginInstance?.play).toHaveBeenCalled()
257+
})
258+
} finally {
259+
vi.useRealTimers()
260+
}
261+
})
262+
198263
it('toggles autoplay via the pause/play button', async () => {
199264
await renderTestimonials(async ({ root }) => {
200265
const autoplayToggle = root.querySelector('[data-testimonials-autoplay-toggle]')

0 commit comments

Comments
 (0)