Apply lazy load to hosted videos

[yileifeng]

Related Item(s)

https://github.com/ramp4-pcar4/tcei-tmx-cwa-storylines/issues/172

Changes

• [FEATURE] apply lazy load for hosted video files
• other changes need to be made directly in Dev

Testing

Steps:

1. Check network tab and filter for media
2. Ensure the hosted video file (one in the dynamic slide) is not downloaded until intersected

---

This change is 

[spencerwahl]

Reviewable status: 0 of 2 files reviewed, 1 unresolved discussion (waiting on @yileifeng)

---

src/components/panels/video-panel.vue line 139 at r1 (raw file):

        observer.value = new IntersectionObserver(([video]) => {
            if (video.isIntersecting) {
                console.log('LOAD VIDEO');

lurking console log

[github-actions]

Your demo site is ready! 🚀 Visit it here: https://ramp4-pcar4.github.io/story-ramp/lazy-load-video/#/en/00000000-0000-0000-0000-000000000000

[yileifeng]

Reviewable status: 0 of 2 files reviewed, 1 unresolved discussion (waiting on @spencerwahl)

---

src/components/panels/video-panel.vue line 139 at r1 (raw file):

Previously, spencerwahl (Spencer Wahl) wrote…

lurking console log

removed

[RyanCoulsonCA]

Reviewable status: 0 of 2 files reviewed, 2 unresolved discussions (waiting on @spencerwahl and @yileifeng)

---

src/components/panels/video-panel.vue line 114 at r2 (raw file):

const videoBlobSrc = ref('');
const captionsBlobSrc = ref('');
// const transcriptBlobSrc = ref('');

This can probably be removed too if we're not using it

[yileifeng]

Reviewable status: 0 of 2 files reviewed, 2 unresolved discussions (waiting on @RyanCoulsonCA and @spencerwahl)

---

src/components/panels/video-panel.vue line 114 at r2 (raw file):

Previously, RyanCoulsonCA (Ryan Coulson) wrote…

This can probably be removed too if we're not using it

removed

[RyanCoulsonCA]

Reviewed 1 of 2 files at r1, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @spencerwahl)

[spencerwahl]

Reviewed 1 of 2 files at r1, 1 of 1 files at r3, all commit messages.
Reviewable status: all files reviewed, 1 unresolved discussion (waiting on @yileifeng)

[spencerwahl]

Reviewable status: complete! all files reviewed, all discussions resolved (waiting on @yileifeng)