-
@@ -59,173 +49,65 @@ const embedVimeo = (url) => {
return embedHTML;
};
-const embedSpark = (url) => {
- let embedURL = url;
- if (!url.pathname.endsWith('/embed.html') && !url.pathname.endsWith('/embed')) {
- embedURL = new URL(`${url.href}${url.pathname.endsWith('/') ? '' : '/'}embed.html`);
- }
-
- return getDefaultEmbed(embedURL);
-};
-
const embedTwitter = (url) => {
- const embedHTML = ``;
+ const embedHTML = ``;
loadScript('https://platform.twitter.com/widgets.js');
return embedHTML;
};
-const embedTiktok = (url) => {
- const resultHtml = document.createElement('div');
- resultHtml.setAttribute('id', 'tiktok');
-
- const tiktokBuild = async (fetchUrl) => {
- const response = await fetch(fetchUrl);
- response.json().then((data) => {
- const tiktok = document.getElementById('tiktok');
- tiktok.outerHTML = data.html;
- loadScript('https://www.tiktok.com/embed.js');
- });
- };
- tiktokBuild(`https://www.tiktok.com/oembed?url=${url}`);
-
- return resultHtml.outerHTML;
-};
-
-const embedSlideShare = (url) => {
- const resultHtml = document.createElement('div');
- resultHtml.setAttribute('id', 'slideShare');
-
- const slideShareBuild = async () => {
- const response = await fetch(url);
- const body = await response.text();
- const el = document.createElement('div');
- el.innerHTML = body;
- const slideShowInfo = el.querySelector('.slideshow-info meta[itemprop="embedURL"]');
- if (slideShowInfo) {
- const embedUrl = el.querySelector('.slideshow-info meta[itemprop="embedURL"]').content;
- const slideShare = document.getElementById('slideShare');
- slideShare.outerHTML = `
-
-
`;
- }
- };
- if (url.href.includes('embed_code')) {
- resultHtml.innerHTML = `
-
-
`;
- } else {
- slideShareBuild(url);
- }
-
- return resultHtml.outerHTML;
-};
-
-const EMBEDS_CONFIG = {
- youtube: {
- type: 'youtube',
- embed: embedYoutube,
- },
- 'adobe-tv': {
- type: 'adobe-tv',
- embed: getDefaultEmbed,
- },
- 'adobe-spark': {
- type: 'adobe-spark',
- embed: embedSpark,
- },
- instagram: {
- type: 'instagram',
- embed: embedInstagram,
- },
- vimeo: {
- type: 'vimeo',
- embed: embedVimeo,
- },
- twitter: {
- type: 'twitter',
- embed: embedTwitter,
- },
- tiktok: {
- type: 'tiktok',
- embed: embedTiktok,
- },
- slideshare: {
- type: 'slideshare',
- embed: embedSlideShare,
- },
-};
-
-const loadEmbed = (block) => {
- if (block.classList.contains('is-loaded')) {
+const loadEmbed = (block, link, autoplay) => {
+ if (block.classList.contains('embed-is-loaded')) {
return;
}
- const figure = buildFigure(block.firstElementChild.firstElementChild);
- const a = figure.querySelector('a');
-
- if (a) {
- const url = new URL(a.href.replace(/\/$/, ''));
- const hostnameArr = url.hostname.split('.');
-
- // trimed domain name (ex, www.google.com -> google)
- const simpleDomain = hostnameArr[hostnameArr.length - 2];
-
- // getting config
- let config = EMBEDS_CONFIG[simpleDomain];
-
- // for different config for same domain:
- if (url.hostname.includes('adobe')) {
- if (url.hostname.includes('spark.adobe.com')) {
- config = EMBEDS_CONFIG['adobe-spark'];
- } else {
- config = EMBEDS_CONFIG['adobe-tv'];
- }
- } else if (url.hostname.includes('youtu')) {
- config = EMBEDS_CONFIG.youtube;
- }
-
- // loading embed function for given config and url.
- if (config) {
- a.outerHTML = config.embed(url);
- block.classList = `block embed embed-${config.type}`;
- } else {
- a.outerHTML = getDefaultEmbed(url);
- block.classList = `block embed embed-${simpleDomain}`;
- }
- block.innerHTML = figure.outerHTML;
- block.classList.add('is-loaded');
- }
-};
-
-const intersectHandler = (entries) => {
- const entry = entries[0];
- if (entry.isIntersecting) {
- if (entry.intersectionRatio >= 0.25) {
- const block = entry.target;
- loadEmbed(block);
- }
+ const EMBEDS_CONFIG = [
+ {
+ match: ['youtube', 'youtu.be'],
+ embed: embedYoutube,
+ },
+ {
+ match: ['vimeo'],
+ embed: embedVimeo,
+ },
+ {
+ match: ['twitter'],
+ embed: embedTwitter,
+ },
+ ];
+
+ const config = EMBEDS_CONFIG.find((e) => e.match.some((match) => link.includes(match)));
+ const url = new URL(link);
+ if (config) {
+ block.innerHTML = config.embed(url, autoplay);
+ block.classList = `block embed embed-${config.match[0]}`;
} else {
- // if ((entry.intersectionRatio === 0.0) && (adBox.dataset.totalViewTime >= 60000)) {
- // Error handler placeholder
- // }
+ block.innerHTML = getDefaultEmbed(url);
+ block.classList = 'block embed';
}
+ block.classList.add('embed-is-loaded');
};
export default function decorate(block) {
- const run = () => {
- const options = {
- root: null,
- rootMargin: '0px',
- threshold: [0.0, 0.25],
- };
-
- const observer = new IntersectionObserver(intersectHandler, options);
- observer.observe(block);
- };
-
- if (document.readyState === 'complete') {
- run();
+ const placeholder = block.querySelector('picture');
+ const link = block.querySelector('a').href;
+ block.textContent = '';
+
+ if (placeholder) {
+ const wrapper = document.createElement('div');
+ wrapper.className = 'embed-placeholder';
+ wrapper.innerHTML = '
';
+ wrapper.prepend(placeholder);
+ wrapper.addEventListener('click', () => {
+ loadEmbed(block, link, true);
+ });
+ block.append(wrapper);
} else {
- window.addEventListener('load', run);
+ const observer = new IntersectionObserver((entries) => {
+ if (entries.some((e) => e.isIntersecting)) {
+ observer.disconnect();
+ loadEmbed(block, link);
+ }
+ });
+ observer.observe(block);
}
}