Revert "iteration"

This reverts commit b149489.

docs/.vitepress/imgit/plugin/youtube/server.ts → docs/.vitepress/imgit/plugin/youtube.ts

@@ -1,6 +1,6 @@
-import { Plugin } from "../../server";
-import { BuiltAsset, ResolvedAsset } from "../../server/asset";
-import { Cache, cache, std, cfg, defaults } from "../../server";
+import { Plugin } from "../server";
+import { BuiltAsset, ResolvedAsset } from "../server/asset";
+import { Cache, cache, std, cfg } from "../server";
 
 type YouTubeCache = Cache & {
     /** Resolved thumbnail URLs mapped by YouTube video ID. */
@@ -9,48 +9,40 @@ type YouTubeCache = Cache & {
 
 /** YouTube thumbnail variants; each video is supposed to have at least "0". */
 const thumbs = ["maxresdefault", "mqdefault", "0"];
+const playButtonSvg = `
+<svg height="100%" viewBox="0 0 68 48" width="100%" class="imgit-youtube-play-button">
+    <path fill="#f00" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"></path>
+    <path fill="#fff" d="M 45,24 27,14 27,34"></path>
+</svg>`;
 
 /** Allows embedding YouTube videos with imgit.
- *  @example ![](https://www.youtube.com/watch?v=d_xyD3nNQuo) */
+ *  @example ![](https://www.youtube.com/watch?v=3SjX_X0oGxo) */
 export default function (): Plugin {
     if (!cache.hasOwnProperty("youtube")) cache.youtube = {};
     return {
-        resolvers: [resolveYouTubeAsset],
-        builders: [buildYouTubeHtml]
+        resolvers: [resolve],
+        builders: [build]
     };
 };
 
-async function resolveYouTubeAsset(asset: ResolvedAsset): Promise<boolean> {
+async function resolve(asset: ResolvedAsset): Promise<boolean> {
     if (!isYouTube(asset.syntax.url)) return false;
     const id = getYouTubeId(asset.syntax.url);
     asset.content = { src: await resolveThumbnailUrl(id) };
     return true;
 }
 
-async function buildYouTubeHtml(asset: BuiltAsset): Promise<boolean> {
+function build(asset: BuiltAsset): boolean {
     if (!isYouTube(asset.syntax.url)) return false;
     const id = getYouTubeId(asset.syntax.url);
     const source = `https://www.youtube-nocookie.com/embed/${id}`;
     asset.html = `
-<div class="imgit-youtube" data-imgit-container title="Play YouTube video">
-    <button class="imgit-youtube-play-button"/>
-    <div class="imgit-youtube-poster">
-        ${await buildPosterHtml(asset)}
-    </div>
-    <div class="imgit-youtube-player" hidden>
-        <iframe title="${asset.syntax.alt}" data-imgit-src="${source}" allowfullscreen></iframe>
-    </div>
+<div class="imgit-youtube" data-imgit-container>
+    <iframe title="${asset.syntax.alt}" src="${source}" allowfullscreen></iframe>
 </div>`;
     return true;
 }
 
-async function buildPosterHtml(asset: BuiltAsset): Promise<string> {
-    // Pretend the asset is an image to re-use default picture build procedure.
-    asset = { ...asset, syntax: { ...asset.syntax, url: "" } };
-    await defaults.transform.build([asset]);
-    return asset.html;
-}
-
 /** Whether specified url is a valid YouTube video link. */
 function isYouTube(url: string): boolean {
     return url.includes("youtube.com/watch?v=");
@@ -75,7 +67,3 @@ async function resolveThumbnailUrl(id: string): Promise<string> {
 function buildThumbnailUrl(id: string, variant: string): string {
     return `https://i.ytimg.com/vi_webp/${id}/${variant}.webp`;
 }
-
-function handlePosterClick(event: Event) {
-
-}

docs/.vitepress/imgit/server/transform/6-build.ts

@@ -21,12 +21,12 @@ async function buildAsset(asset: BuiltAsset, merges: BuiltAsset[]): Promise<void
     throw Error(`Failed to build HTML for '${asset.syntax.url}': unknown type (${asset.content.info.type}).`);
 }
 
-async function buildPicture(content: EncodedContent, asset: BuiltAsset, merges?: BuiltAsset[]): Promise<void> {
+async function buildPicture(content: EncodedContent, asset: BuiltAsset, merges: BuiltAsset[]): Promise<void> {
     const size = buildSizeAttributes(content.info);
     const lazy = asset.spec?.eager == null;
     const load = lazy ? `loading="lazy" decoding="async"` : `decoding="sync"`;
     let sourcesHtml = await buildPictureSources(content, asset);
-    if (merges) for (const merge of merges)
+    for (const merge of merges)
         if (merge.content) sourcesHtml += await buildPictureSources(merge.content, merge);
     sourcesHtml += `<img data-imgit-loadable alt="${asset.syntax.alt}" ${size} ${load}/>`;
     asset.html = `
@@ -68,10 +68,10 @@ async function buildVideo(content: EncodedContent, asset: BuiltAsset, merges: Bu
 </div>`;
 }
 
-async function buildCover(asset: EncodedAsset, size: string, merges?: BuiltAsset[]): Promise<string> {
+async function buildCover(asset: EncodedAsset, size: string, merges: BuiltAsset[]): Promise<string> {
     if (!cfg.cover) return "";
     let sourcesHtml = asset.content?.cover ? await buildCoverSource(asset.content.cover, asset) : "";
-    if (merges) for (const merge of merges)
+    for (const merge of merges)
         if (merge.content?.cover && merge.content)
             sourcesHtml += await buildCoverSource(merge.content?.cover, merge);
     sourcesHtml += `<img src="${cfg.cover}" alt="cover" ${size} decoding="sync"/>`;

docs/.vitepress/theme/index.ts

@@ -1,6 +1,5 @@
 import DefaultTheme from "vitepress/theme-without-fonts";
 import "../imgit/client";
-import "../imgit/plugin/youtube/client";
 import "./style.css";
 
 // https://vitepress.dev/guide/extending-default-theme

docs/.vitepress/theme/style.css

@@ -294,10 +294,6 @@ table > tfoot:not(:last-child) {
  * Custom elements
  * -------------------------------------------------------------------------- */
 
-[data-imgit-container] * {
-    border-radius: 8px;
-}
-
 .engine-design-light {
     width: 100%;
     display: block;
@@ -316,6 +312,30 @@ table > tfoot:not(:last-child) {
     display: block;
 }
 
+.imgit-picture *, .imgit-video * {
+    border-radius: 8px;
+}
+
+.imgit-youtube {
+    display: block;
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    overflow: hidden;
+}
+
+.imgit-youtube iframe,
+.imgit-youtube object,
+.imgit-youtube embed {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 8px;
+}
+
 .config-table table {
     display: table;
     width: 100%;

docs/imgit/index.md

@@ -76,7 +76,7 @@
 
 ## YouTube
 
-![youtube](https://www.youtube.com/watch?v=d_xyD3nNQuo)
+![youtube](https://www.youtube.com/watch?v=3SjX_X0oGxo)
 
 ## Art Direction
 

docs/public/imgit/youtube.json

@@ -1 +1 @@
-{"7tOIFZRSAec":"https://i.ytimg.com/vi_webp/7tOIFZRSAec/maxresdefault.webp","X2iyGSCpnJs":"https://i.ytimg.com/vi_webp/X2iyGSCpnJs/maxresdefault.webp","wcgTGro0_SE":"https://i.ytimg.com/vi_webp/wcgTGro0_SE/maxresdefault.webp","lRxIKDU9z4k":"https://i.ytimg.com/vi_webp/lRxIKDU9z4k/maxresdefault.webp","TA-kx6B9uD8":"https://i.ytimg.com/vi_webp/TA-kx6B9uD8/maxresdefault.webp","wFil5vje3NE":"https://i.ytimg.com/vi_webp/wFil5vje3NE/maxresdefault.webp","9UmccF9R9xI":"https://i.ytimg.com/vi_webp/9UmccF9R9xI/maxresdefault.webp","aWdq7YxIxkE":"https://i.ytimg.com/vi_webp/aWdq7YxIxkE/maxresdefault.webp","IbT6MTecO-k":"https://i.ytimg.com/vi_webp/IbT6MTecO-k/maxresdefault.webp","wrAm-cwPXy4":"https://i.ytimg.com/vi_webp/wrAm-cwPXy4/maxresdefault.webp","3SjX_X0oGxo":"https://i.ytimg.com/vi_webp/3SjX_X0oGxo/maxresdefault.webp","u5B5s-X2Bw0":"https://i.ytimg.com/vi_webp/u5B5s-X2Bw0/maxresdefault.webp","HPxhR0I1u2Q":"https://i.ytimg.com/vi_webp/HPxhR0I1u2Q/maxresdefault.webp","N856vi18XVU":"https://i.ytimg.com/vi_webp/N856vi18XVU/mqdefault.webp","hqhfhXzQkdk":"https://i.ytimg.com/vi_webp/hqhfhXzQkdk/maxresdefault.webp","cNRNgk5HhKQ":"https://i.ytimg.com/vi_webp/cNRNgk5HhKQ/maxresdefault.webp","tn14ZhBTFew":"https://i.ytimg.com/vi_webp/tn14ZhBTFew/maxresdefault.webp","HZjey6M2-PE":"https://i.ytimg.com/vi_webp/HZjey6M2-PE/mqdefault.webp","wkZeszk6gm0":"https://i.ytimg.com/vi_webp/wkZeszk6gm0/mqdefault.webp","gobowgagdyE":"https://i.ytimg.com/vi_webp/gobowgagdyE/maxresdefault.webp","2YP-36THHvk":"https://i.ytimg.com/vi_webp/2YP-36THHvk/mqdefault.webp","fx_YS2ZQGHI":"https://i.ytimg.com/vi_webp/fx_YS2ZQGHI/maxresdefault.webp","y87wd5jHfFw":"https://i.ytimg.com/vi_webp/y87wd5jHfFw/mqdefault.webp","6PdOAOsnhio":"https://i.ytimg.com/vi_webp/6PdOAOsnhio/mqdefault.webp","CRZuS1u_J4c":"https://i.ytimg.com/vi_webp/CRZuS1u_J4c/mqdefault.webp","Bl3kXrg8tiI":"https://i.ytimg.com/vi_webp/Bl3kXrg8tiI/maxresdefault.webp","rw_Z69z0pAg":"https://i.ytimg.com/vi_webp/rw_Z69z0pAg/mqdefault.webp","81OTbSAnWbw":"https://i.ytimg.com/vi_webp/81OTbSAnWbw/mqdefault.webp","d_xyD3nNQuo":"https://i.ytimg.com/vi_webp/d_xyD3nNQuo/maxresdefault.webp"}
+{"7tOIFZRSAec":"https://i.ytimg.com/vi_webp/7tOIFZRSAec/maxresdefault.webp","X2iyGSCpnJs":"https://i.ytimg.com/vi_webp/X2iyGSCpnJs/maxresdefault.webp","wcgTGro0_SE":"https://i.ytimg.com/vi_webp/wcgTGro0_SE/maxresdefault.webp","lRxIKDU9z4k":"https://i.ytimg.com/vi_webp/lRxIKDU9z4k/maxresdefault.webp","TA-kx6B9uD8":"https://i.ytimg.com/vi_webp/TA-kx6B9uD8/maxresdefault.webp","wFil5vje3NE":"https://i.ytimg.com/vi_webp/wFil5vje3NE/maxresdefault.webp","9UmccF9R9xI":"https://i.ytimg.com/vi_webp/9UmccF9R9xI/maxresdefault.webp","aWdq7YxIxkE":"https://i.ytimg.com/vi_webp/aWdq7YxIxkE/maxresdefault.webp","IbT6MTecO-k":"https://i.ytimg.com/vi_webp/IbT6MTecO-k/maxresdefault.webp","wrAm-cwPXy4":"https://i.ytimg.com/vi_webp/wrAm-cwPXy4/maxresdefault.webp","3SjX_X0oGxo":"https://i.ytimg.com/vi_webp/3SjX_X0oGxo/maxresdefault.webp","u5B5s-X2Bw0":"https://i.ytimg.com/vi_webp/u5B5s-X2Bw0/maxresdefault.webp","HPxhR0I1u2Q":"https://i.ytimg.com/vi_webp/HPxhR0I1u2Q/maxresdefault.webp","N856vi18XVU":"https://i.ytimg.com/vi_webp/N856vi18XVU/mqdefault.webp","hqhfhXzQkdk":"https://i.ytimg.com/vi_webp/hqhfhXzQkdk/maxresdefault.webp","cNRNgk5HhKQ":"https://i.ytimg.com/vi_webp/cNRNgk5HhKQ/maxresdefault.webp","tn14ZhBTFew":"https://i.ytimg.com/vi_webp/tn14ZhBTFew/maxresdefault.webp","HZjey6M2-PE":"https://i.ytimg.com/vi_webp/HZjey6M2-PE/mqdefault.webp","wkZeszk6gm0":"https://i.ytimg.com/vi_webp/wkZeszk6gm0/mqdefault.webp","gobowgagdyE":"https://i.ytimg.com/vi_webp/gobowgagdyE/maxresdefault.webp","2YP-36THHvk":"https://i.ytimg.com/vi_webp/2YP-36THHvk/mqdefault.webp","fx_YS2ZQGHI":"https://i.ytimg.com/vi_webp/fx_YS2ZQGHI/maxresdefault.webp","y87wd5jHfFw":"https://i.ytimg.com/vi_webp/y87wd5jHfFw/mqdefault.webp","6PdOAOsnhio":"https://i.ytimg.com/vi_webp/6PdOAOsnhio/mqdefault.webp","CRZuS1u_J4c":"https://i.ytimg.com/vi_webp/CRZuS1u_J4c/mqdefault.webp","Bl3kXrg8tiI":"https://i.ytimg.com/vi_webp/Bl3kXrg8tiI/maxresdefault.webp","rw_Z69z0pAg":"https://i.ytimg.com/vi_webp/rw_Z69z0pAg/mqdefault.webp","81OTbSAnWbw":"https://i.ytimg.com/vi_webp/81OTbSAnWbw/mqdefault.webp"}