Ok, how should I go about checking for that error. I’m in the theme code now but I’m not seeing any errors with the very little coding knowledge I have. Do you have any pointers for things I should check for?
I’m in the Media-gallery.js, here’s the code pasted. Not sure if that’s helpful.
if (!customElements.get(‘media-gallery’)) {
customElements.define(
'media-gallery',
class MediaGallery extends HTMLElement {
constructor() {
super();
this.elements = {
liveRegion: this.querySelector('\[id^="GalleryStatus"\]'),
viewer: this.querySelector('\[id^="GalleryViewer"\]'),
thumbnails: this.querySelector('\[id^="GalleryThumbnails"\]'),
};
this.mql = window.matchMedia('(min-width: 750px)');
if (!this.elements.thumbnails) return;
this.elements.viewer.addEventListener('slideChanged', debounce(this.onSlideChanged.bind(this), 500));
this.elements.thumbnails.querySelectorAll('\[data-target\]').forEach((mediaToSwitch) => {
mediaToSwitch
.querySelector('button')
.addEventListener('click', this.setActiveMedia.bind(this, mediaToSwitch.dataset.target, false));
});
if (this.dataset.desktopLayout.includes('thumbnail') && this.mql.matches) this.removeListSemantic();
// NEW: on load, jump to the first video and autoplay it
this.activateFirstVideoThenAutoplay();
}
// ----- helpers we added -----
activateFirstVideoThenAutoplay() {
// Prefer an already-active slide if it contains a video; otherwise pick the first slide with .deferred-media
const current = this.elements.viewer.querySelector('\[data-media-id\].is-active');
const currentHasVideo = current && current.querySelector('.deferred-media, video');
const firstVideoItem =
currentHasVideo ? current :
(this.elements.viewer.querySelector('\[data-media-id\] .deferred-media') ||
this.elements.viewer.querySelector('video'))
?.closest?.('\[data-media-id\]');
if (firstVideoItem) {
// Make that slide active (if not already), then play it.
if (!firstVideoItem.classList.contains('is-active')) {
this.setActiveMedia(firstVideoItem.dataset.mediaId, false);
} else {
this.playActiveMedia(firstVideoItem, /\*force\*/ true);
}
}
}
onSlideChanged(event) {
const thumbnail = this.elements.thumbnails.querySelector(
\`\[data-target="${event.detail.currentElement.dataset.mediaId}"\]\`
);
this.setActiveThumbnail(thumbnail);
}
setActiveMedia(mediaId, prepend) {
const activeMedia =
this.elements.viewer.querySelector(\`\[data-media-id="${mediaId}"\]\`) ||
this.elements.viewer.querySelector('\[data-media-id\]');
if (!activeMedia) return;
this.elements.viewer.querySelectorAll('\[data-media-id\]').forEach((el) => el.classList.remove('is-active'));
activeMedia.classList.add('is-active');
if (prepend) {
activeMedia.parentElement.firstChild !== activeMedia && activeMedia.parentElement.prepend(activeMedia);
if (this.elements.thumbnails) {
const activeThumb = this.elements.thumbnails.querySelector(\`\[data-target="${mediaId}"\]\`);
activeThumb.parentElement.firstChild !== activeThumb && activeThumb.parentElement.prepend(activeThumb);
}
if (this.elements.viewer.slider) this.elements.viewer.resetPages();
}
this.preventStickyHeader();
window.setTimeout(() => {
if (!this.mql.matches || this.elements.thumbnails) {
activeMedia.parentElement.scrollTo({ left: activeMedia.offsetLeft });
}
const rect = activeMedia.getBoundingClientRect();
if (rect.top <= -0.5) window.scrollTo({ top: rect.top + window.scrollY, behavior: 'smooth' });
});
// Load & autoplay the selected media
this.playActiveMedia(activeMedia, /\*force\*/ true);
if (!this.elements.thumbnails) return;
const activeThumb = this.elements.thumbnails.querySelector(\`\[data-target="${mediaId}"\]\`);
this.setActiveThumbnail(activeThumb);
this.announceLiveRegion(activeMedia, activeThumb.dataset.mediaPosition);
}
setActiveThumbnail(thumbnail) {
if (!this.elements.thumbnails || !thumbnail) return;
this.elements.thumbnails.querySelectorAll('button').forEach((el) => el.removeAttribute('aria-current'));
thumbnail.querySelector('button').setAttribute('aria-current', true);
if (this.elements.thumbnails.isSlideVisible(thumbnail, 10)) return;
this.elements.thumbnails.slider.scrollTo({ left: thumbnail.offsetLeft });
}
announceLiveRegion(activeItem, position) {
const image = activeItem.querySelector('.product__modal-opener--image img');
if (!image) return;
image.onload = () => {
this.elements.liveRegion.setAttribute('aria-hidden', false);
this.elements.liveRegion.innerHTML = window.accessibilityStrings.imageAvailable.replace('\[index\]', position);
setTimeout(() => this.elements.liveRegion.setAttribute('aria-hidden', true), 2000);
};
image.src = image.src;
}
/\*\*
\* Force-load deferred content and autoplay a native <video>.
\* (Shopify-uploaded videos.)
\*/
playActiveMedia(activeItem, force) {
if (window.pauseAllMedia) window.pauseAllMedia();
const deferred = activeItem.querySelector('.deferred-media');
if (deferred && typeof deferred.loadContent === 'function') {
if (force || deferred.hasAttribute('data-autoplay') || true) {
deferred.loadContent(false); // stamp template
deferred.setAttribute('loaded', 'true');
}
const posterBtn = activeItem.querySelector('.deferred-media__poster');
if (posterBtn) posterBtn.remove();
}
// Try to play as soon as the <video> is present & ready
let tries = 0;
const kick = () => {
const video = activeItem.querySelector('video');
if (!video) return ++tries < 20 ? setTimeout(kick, 80) : null;
// Attributes browsers require for autoplay
video.muted = true;
video.playsInline = true;
video.setAttribute('muted', '');
video.setAttribute('autoplay', '');
video.setAttribute('playsinline', '');
const tryPlay = () => {
const p = video.play && video.play();
if (p && typeof p.then === 'function') p.catch(() => setTimeout(tryPlay, 120));
};
if (video.readyState >= 2) {
tryPlay();
} else {
video.addEventListener('loadeddata', tryPlay, { once: true });
try { video.load(); } catch (e) {}
}
};
kick();
}
preventStickyHeader() {
this.stickyHeader = this.stickyHeader || document.querySelector('sticky-header');
if (!this.stickyHeader) return;
this.stickyHeader.dispatchEvent(new Event('preventHeaderReveal'));
}
removeListSemantic() {
if (!this.elements.viewer.slider) return;
this.elements.viewer.slider.setAttribute('role', 'presentation');
this.elements.viewer.sliderItems.forEach((slide) => slide.setAttribute('role', 'presentation'));
}
}
);
// Re-run when the section hot-reloads in the editor
document.addEventListener(‘shopify:section:load’, () => {
document.querySelectorAll('media-gallery').forEach((g) => {
if (typeof g.activateFirstVideoThenAutoplay === 'function') g.activateFirstVideoThenAutoplay();
});
});
}
