pxt-core 12.2.17 → 12.2.18

package/built/backendutils.d.ts

@@ -184,5 +184,6 @@ declare namespace pxt.docs {
     export function buildTOC(summaryMD: string): pxt.TOCMenuEntry[];
     export function visitTOC(toc: TOCMenuEntry[], fn: (e: TOCMenuEntry) => void): void;
     export function augmentDocs(baseMd: string, childMd: string): string;
+    export function hydrateYouTubeEmbeds(content: HTMLElement, tickEvent: boolean): void;
     export {};
 }

package/built/backendutils.js

@@ -862,7 +862,8 @@ var pxt;
                 const text = token.text || "";
                 if (href.startsWith("youtube:")) {
                     const videoId = href.split(":").pop();
-                    return `<div class="tutorial-video-embed"><iframe class="yt-embed" src="https://www.youtube.com/embed/${videoId}" title="${text}" frameborder="0" allowFullScreen allow="autoplay; picture-in-picture"></iframe></div>`;
+                    // This data-youtube attribute is handled in hydrateYoutubeEmbeds
+                    return `<div class="tutorial-video-embed" data-youtube="${encodeURIComponent(videoId)}" title="${text}"></div>`;
                 }
                 else {
                     let out = `<img class="ui image" src="${href}" alt="${text}"`;
@@ -1547,6 +1548,32 @@ My links
             test(templ0, inp0, outp0);
             test(templ0, inp1, outp1);
         }
+        function hydrateYouTubeEmbeds(content, tickEvent) {
+            var _a, _b;
+            for (const videoContainer of content.querySelectorAll(".tutorial-video-embed[data-youtube]")) {
+                const videoId = decodeURIComponent(videoContainer.getAttribute("data-youtube"));
+                const iframe = document.createElement("iframe");
+                iframe.className = "yt-embed";
+                const rawUrl = `https://www.youtube.com/embed/${videoId}`;
+                let lang = (_b = (_a = pxt.appTarget.appTheme) === null || _a === void 0 ? void 0 : _a.defaultLocale) !== null && _b !== void 0 ? _b : "en";
+                let url = new URL(rawUrl);
+                if (tickEvent) {
+                    pxt.tickEvent("video.loaded", {
+                        player: "youtube",
+                        url: rawUrl
+                    });
+                }
+                url.searchParams.append("hl", lang);
+                iframe.setAttribute("src", url.toString());
+                iframe.setAttribute("title", videoContainer.getAttribute("title") || "");
+                iframe.setAttribute("frameborder", "0");
+                iframe.setAttribute("allowFullScreen", "true");
+                iframe.setAttribute("allow", "autoplay; picture-in-picture");
+                videoContainer.textContent = "";
+                videoContainer.appendChild(iframe);
+            }
+        }
+        docs.hydrateYouTubeEmbeds = hydrateYouTubeEmbeds;
     })(docs = pxt.docs || (pxt.docs = {}));
 })(pxt || (pxt = {}));
 /// <reference path="../pxtlib/docsrender.ts"/>

package/built/cli.js

@@ -36,11 +36,11 @@ pxt.docs.requireDOMSanitizer = () => {
     const sanitizeHtml = require("sanitize-html");
     const defaults = sanitizeHtml.defaults || {};
     const baseAllowedAttrs = defaults.allowedAttributes || {};
-    const mergeClassAttribute = (tag) => {
+    const mergeClassAttribute = (tag, ...otherAttributes) => {
         const existing = baseAllowedAttrs[tag] || [];
-        return Array.from(new Set([...existing, "class"]));
+        return Array.from(new Set([...existing, "class", ...otherAttributes]));
     };
-    const options = Object.assign(Object.assign({}, defaults), { allowedAttributes: Object.assign(Object.assign({}, baseAllowedAttrs), { code: mergeClassAttribute("code"), pre: mergeClassAttribute("pre") }) });
+    const options = Object.assign(Object.assign({}, defaults), { allowedAttributes: Object.assign(Object.assign({}, baseAllowedAttrs), { code: mergeClassAttribute("code"), pre: mergeClassAttribute("pre"), div: mergeClassAttribute("div", "data-youtube", "title") }) });
     return (html) => sanitizeHtml(html, options);
 };
 let forceCloudBuild = process.env["KS_FORCE_CLOUD"] !== "no";

package/built/pxt.js

@@ -107072,7 +107072,8 @@ var pxt;
                 const text = token.text || "";
                 if (href.startsWith("youtube:")) {
                     const videoId = href.split(":").pop();
-                    return `<div class="tutorial-video-embed"><iframe class="yt-embed" src="https://www.youtube.com/embed/${videoId}" title="${text}" frameborder="0" allowFullScreen allow="autoplay; picture-in-picture"></iframe></div>`;
+                    // This data-youtube attribute is handled in hydrateYoutubeEmbeds
+                    return `<div class="tutorial-video-embed" data-youtube="${encodeURIComponent(videoId)}" title="${text}"></div>`;
                 }
                 else {
                     let out = `<img class="ui image" src="${href}" alt="${text}"`;
@@ -107757,6 +107758,32 @@ My links
             test(templ0, inp0, outp0);
             test(templ0, inp1, outp1);
         }
+        function hydrateYouTubeEmbeds(content, tickEvent) {
+            var _a, _b;
+            for (const videoContainer of content.querySelectorAll(".tutorial-video-embed[data-youtube]")) {
+                const videoId = decodeURIComponent(videoContainer.getAttribute("data-youtube"));
+                const iframe = document.createElement("iframe");
+                iframe.className = "yt-embed";
+                const rawUrl = `https://www.youtube.com/embed/${videoId}`;
+                let lang = (_b = (_a = pxt.appTarget.appTheme) === null || _a === void 0 ? void 0 : _a.defaultLocale) !== null && _b !== void 0 ? _b : "en";
+                let url = new URL(rawUrl);
+                if (tickEvent) {
+                    pxt.tickEvent("video.loaded", {
+                        player: "youtube",
+                        url: rawUrl
+                    });
+                }
+                url.searchParams.append("hl", lang);
+                iframe.setAttribute("src", url.toString());
+                iframe.setAttribute("title", videoContainer.getAttribute("title") || "");
+                iframe.setAttribute("frameborder", "0");
+                iframe.setAttribute("allowFullScreen", "true");
+                iframe.setAttribute("allow", "autoplay; picture-in-picture");
+                videoContainer.textContent = "";
+                videoContainer.appendChild(iframe);
+            }
+        }
+        docs.hydrateYouTubeEmbeds = hydrateYouTubeEmbeds;
     })(docs = pxt.docs || (pxt.docs = {}));
 })(pxt || (pxt = {}));
 var pxt;
@@ -162752,11 +162779,11 @@ pxt.docs.requireDOMSanitizer = () => {
     const sanitizeHtml = require("sanitize-html");
     const defaults = sanitizeHtml.defaults || {};
     const baseAllowedAttrs = defaults.allowedAttributes || {};
-    const mergeClassAttribute = (tag) => {
+    const mergeClassAttribute = (tag, ...otherAttributes) => {
         const existing = baseAllowedAttrs[tag] || [];
-        return Array.from(new Set([...existing, "class"]));
+        return Array.from(new Set([...existing, "class", ...otherAttributes]));
     };
-    const options = Object.assign(Object.assign({}, defaults), { allowedAttributes: Object.assign(Object.assign({}, baseAllowedAttrs), { code: mergeClassAttribute("code"), pre: mergeClassAttribute("pre") }) });
+    const options = Object.assign(Object.assign({}, defaults), { allowedAttributes: Object.assign(Object.assign({}, baseAllowedAttrs), { code: mergeClassAttribute("code"), pre: mergeClassAttribute("pre"), div: mergeClassAttribute("div", "data-youtube", "title") }) });
     return (html) => sanitizeHtml(html, options);
 };
 let forceCloudBuild = process.env["KS_FORCE_CLOUD"] !== "no";

package/built/pxtlib.d.ts

@@ -1303,6 +1303,7 @@ declare namespace pxt.docs {
     export function buildTOC(summaryMD: string): pxt.TOCMenuEntry[];
     export function visitTOC(toc: TOCMenuEntry[], fn: (e: TOCMenuEntry) => void): void;
     export function augmentDocs(baseMd: string, childMd: string): string;
+    export function hydrateYouTubeEmbeds(content: HTMLElement, tickEvent: boolean): void;
     export {};
 }
 declare namespace pxt.dom {

package/built/pxtlib.js

@@ -9351,7 +9351,8 @@ var pxt;
                 const text = token.text || "";
                 if (href.startsWith("youtube:")) {
                     const videoId = href.split(":").pop();
-                    return `<div class="tutorial-video-embed"><iframe class="yt-embed" src="https://www.youtube.com/embed/${videoId}" title="${text}" frameborder="0" allowFullScreen allow="autoplay; picture-in-picture"></iframe></div>`;
+                    // This data-youtube attribute is handled in hydrateYoutubeEmbeds
+                    return `<div class="tutorial-video-embed" data-youtube="${encodeURIComponent(videoId)}" title="${text}"></div>`;
                 }
                 else {
                     let out = `<img class="ui image" src="${href}" alt="${text}"`;
@@ -10036,6 +10037,32 @@ My links
             test(templ0, inp0, outp0);
             test(templ0, inp1, outp1);
         }
+        function hydrateYouTubeEmbeds(content, tickEvent) {
+            var _a, _b;
+            for (const videoContainer of content.querySelectorAll(".tutorial-video-embed[data-youtube]")) {
+                const videoId = decodeURIComponent(videoContainer.getAttribute("data-youtube"));
+                const iframe = document.createElement("iframe");
+                iframe.className = "yt-embed";
+                const rawUrl = `https://www.youtube.com/embed/${videoId}`;
+                let lang = (_b = (_a = pxt.appTarget.appTheme) === null || _a === void 0 ? void 0 : _a.defaultLocale) !== null && _b !== void 0 ? _b : "en";
+                let url = new URL(rawUrl);
+                if (tickEvent) {
+                    pxt.tickEvent("video.loaded", {
+                        player: "youtube",
+                        url: rawUrl
+                    });
+                }
+                url.searchParams.append("hl", lang);
+                iframe.setAttribute("src", url.toString());
+                iframe.setAttribute("title", videoContainer.getAttribute("title") || "");
+                iframe.setAttribute("frameborder", "0");
+                iframe.setAttribute("allowFullScreen", "true");
+                iframe.setAttribute("allow", "autoplay; picture-in-picture");
+                videoContainer.textContent = "";
+                videoContainer.appendChild(iframe);
+            }
+        }
+        docs.hydrateYouTubeEmbeds = hydrateYouTubeEmbeds;
     })(docs = pxt.docs || (pxt.docs = {}));
 })(pxt || (pxt = {}));
 var pxt;