<!-- Notice: Codepen requires YouTube embed/video to be muted if using autoplay which adwire adds automatically for seamless user experience. This won't be required on your website. -->

<div id="react-app"></div>

@charset "utf-8";

body {
	padding: 0;
	margin: 1rem auto;
}

p {
	margin: 1rem;
}

.is-active::before {
	content: "\2023";
	color: palegreen;
}

.adwire-responsive {
	position: relative;
	padding-bottom: 56.25%;
}

.adwire-responsive > iframe, /* original YouTube iframe */
.adwire-responsive .adwire-iframe,
.adwire-responsive .adwire {
	position: absolute;
}

.adwire-responsive > iframe, /* original YouTube iframe */
.adwire-responsive .adwire-iframe,
.adwire-responsive .adwire,
.adwire-responsive .adwire .adwire-ad,
.adwire-responsive .adwire .adwire-ad > *,
.adwire-responsive .adwire .adwire-ad iframe,
.adwire-responsive .adwire .adwire-ad video {
	width: 100% !important;
	height: 100% !important;
}

"use strict";

const AD_TAG_URL =
	"https://pubads.g.doubleclick.net/gampad/ads?sz=640x480&iu=/124319096/external/single_ad_samples&ciu_szs=300x250&impl=s&gdfp_req=1&env=vp&output=vast&unviewed_position_start=1&cust_params=deployment%3Ddevsite%26sample_ct%3Dskippablelinear&correlator=";

const ReactApp = () => {
	const embeds = [
		{
			id: "R6MlUcmOul8",
			title: "Tears of Steel - Blender VFX Open Movie"
		},
		{
			id: "aqz-KE-bpKQ",
			title: "Big Buck Bunny 60fps 4K - Official Blender Foundation Short Film"
		},
		{
			id: "eRsGyueVLvQ",
			title: "Sintel - Open Movie by Blender Foundation"
		},
		{
			id: "WhWc3b3KhnY",
			title: "Spring - Blender Open Movie"
		}
	];

	const [activeId, setActiveId] = React.useState();

	const iframe = React.useMemo(
		() =>
			activeId
				? `<iframe loading="lazy" width="560" height="315" src="https://www.youtube.com/embed/${activeId}?mute=1" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen referrerpolicy="no-referrer"></iframe>`
				: "Iframe error.",
		[activeId]
	);

	const onClick = React.useCallback((event, id) => {
		event.preventDefault();
		setActiveId(id);
	}, []);

	return (
		<React.Fragment>
			{embeds.length > 0 && (
				<ul>
					{embeds.map(({ id, title }) => (
						<li className={activeId === id && "is-active"}>
							<a href="#" title={title} onClick={(event) => onClick(event, id)}>
								{title}
							</a>
						</li>
					))}
				</ul>
			)}
			{activeId && (
				<div
					className="adwire-responsive"
					dangerouslySetInnerHTML={{ __html: iframe }}
				></div>
			)}
			<p>
				{!activeId ? (
					"Pick one from above."
				) : (
					<button type="button" title="Reset" onClick={() => setActiveId(null)}>
						Reset
					</button>
				)}
			</p>
		</React.Fragment>
	);
};

ReactDOM.render(<ReactApp />, document.getElementById("react-app"));

const options = {
	adTagUrl: AD_TAG_URL,
	cookies: true,
	mode: Adwire.Mode.INSTREAM_IFRAME_YOUTUBE,
	private: true,
	terms: true
};

const adwire = new Adwire(options);
const run = (iframe) => adwire.run(iframe);

new MutationObserver((mutations) => {
	mutations.forEach(({ type, addedNodes }) => {
		if (type !== "childList") return;

		const iframes = [...addedNodes].filter(({ tagName }) => tagName === "IFRAME");
		const childIframes = [...addedNodes]
			.filter(({ tagName }) => tagName !== "IFRAME")
			.map((node) =>
				node.getElementsByTagName ? [...node.getElementsByTagName("iframe")] : []
			)
			.flat()
			.filter((node) => node);

		[...iframes, ...childIframes].forEach(run);
	});
}).observe(document.body, {
	childList: true,
	subtree: true
});