YouTube player for markdown (#1291)

New YouTube component which can be also used in any markdown content.
YT links are replaced with player.

---------

Co-authored-by: pre-commit-ci[bot] <66853113+pre-commit-ci[bot]@users.noreply.github.com>
Co-authored-by: Mia Bajić <[email protected]>

Author: 3 people

.env.development

@@ -1,3 +1,4 @@
 EP_SESSIONS_API="https://static.europython.eu/programme/ep2025/releases/current/sessions.json"
 EP_SPEAKERS_API="https://static.europython.eu/programme/ep2025/releases/current/speakers.json"
 EP_SCHEDULE_API="https://static.europython.eu/programme/ep2025/releases/current/schedule.json"
+EP_FAST_BUILD="true"

astro.config.mjs

@@ -1,4 +1,5 @@
 import path from "path";
+import { loadEnv } from "vite";
 import { defineConfig } from "astro/config";
 import mdx from "@astrojs/mdx";
 import sitemap from "@astrojs/sitemap";
@@ -27,6 +28,15 @@ if (!gitVersion) {
   }
 }
 
+const mode =
+  process.argv.find((arg) =>
+    ["development", "production", "preview"].includes(arg)
+  ) || "production";
+const fastBuild = loadEnv(mode, process.cwd(), "").EP_FAST_BUILD === "true";
+console.log(
+  `\x1b[35m[EP]\x1b[0m Fast Build: \x1b[1m\x1b[34m${fastBuild}\x1b[0m`
+);
+
 function dontDie() {
   return {
     name: "dont-die",
@@ -114,23 +124,27 @@ export default defineConfig({
   },
   integrations: [
     mdx(),
-    sitemap(),
-    metaTags(),
-    deleteUnusedImages(),
     svelte(),
     serviceWorker({
       workbox: { inlineWorkboxRuntime: true },
     }),
-    compress({
-      HTML: false,
-      CSS: false,
-      SVG: false,
-    }),
-    dontDie(),
+    ...(fastBuild
+      ? []
+      : [
+          sitemap(),
+          metaTags(),
+          deleteUnusedImages(),
+          compress({
+            HTML: false,
+            CSS: false,
+            SVG: false,
+          }),
+          dontDie(),
+        ]),
   ],
   output: "static",
   build: {
-    minify: true,
+    ...(fastBuild ? {} : { minify: true }),
   },
   image: {
     remotePatterns: [{ protocol: "https" }],

package.json

@@ -33,6 +33,7 @@
     "date-fns-tz": "^3.2.0",
     "hastscript": "^9.0.1",
     "js-yaml": "^4.1.0",
+    "lite-youtube-embed": "^0.3.3",
     "marked": "^15.0.12",
     "nanostores": "^1.0.1",
     "pagefind": "^1.3.0",
@@ -50,7 +51,8 @@
     "prettier-plugin-astro": "^0.14.1",
     "puppeteer": "^24.9.0",
     "tsx": "^4.19.4",
-    "typescript": "^5.8.3"
+    "typescript": "^5.8.3",
+    "vite": "^6.3.5"
   },
   "prettier": {
     "proseWrap": "always"

pnpm-lock.yaml

@@ -29,11 +29,12 @@
 
 <script>
 function showInstallPrompt() {
-  const installBanner = document.getElementById('install-pwa');
+  const installBanner = document.getElementById('install-pwa') as HTMLElement;
   installBanner.classList.remove('hidden');
 }
 
-document.getElementById('install-btn').addEventListener('click', () => {
+  const installBtn = document.getElementById('install-btn') as HTMLElement;
+  installBtn.addEventListener('click', () => {
   if (deferredPrompt) {
     deferredPrompt.prompt();
     deferredPrompt.userChoice.then((choiceResult: any) => {

src/components/InstallPWA.astro

@@ -1,12 +1,13 @@
 ---
 import { marked } from 'marked';
+import { replaceYouTubeLinks } from "@utils/markdown";
 
 interface Props {
   content: string;
 }
 
 const { content } = Astro.props;
-const html = marked.parse(content);
+const html = marked.parse(await replaceYouTubeLinks(content) );
 ---
 
 <div class="prose prose-xl max-w-none" >

src/components/ui/Markdown.astro

@@ -1,21 +1,78 @@
 ---
-import { YouTube as Player } from "@astro-community/astro-embed-youtube";
 
-type Props = {
-  id?: string;
-  class?: string;
-  [key: string]: any;
+import 'lite-youtube-embed/src/lite-yt-embed.css';
+import liteJS from 'lite-youtube-embed/src/lite-yt-embed.js?url';
+
+const urlPattern =
+	/(?=(\s*))\1(?:<a [^>]*?>)??(?=(\s*))\2(?:https?:\/\/)??(?:w{3}\.)??(?:youtube\.com|youtu\.be)\/(?:watch\?v=|embed\/|shorts\/)??([A-Za-z0-9-_]{11})(?:[^\s<>]*)(?=(\s*))\4(?:<\/a>)??(?=(\s*))\5/;
+
+function urlMatcher(url: string): string | undefined {
+	const match = url.match(urlPattern);
+	return match?.[3];
+}
+
+export interface Props extends astroHTML.JSX.HTMLAttributes {
+	id: string;
+	poster?: string;
+	posterQuality?: 'max' | 'high' | 'default' | 'low';
+	params?: string;
+	playlabel?: string;
 }
 
 const {
+	id,
+	poster,
+	posterQuality = 'default',
+	title,
   class: userClass = '',
-  ...attrs
-} = Astro.props;
-
-const attrId = attrs.id || '';
+	...attrs
+} = Astro.props as Props;
 
 const defaultClass = 'border-4 border-white rounded-lg shadow-lg';
 const className = `${defaultClass} ${userClass}`.trim();
+
+const idRegExp = /^[A-Za-z0-9-_]{11}$/;
+
+function extractID(idOrUrl: string) {
+	if (idRegExp.test(idOrUrl)) return idOrUrl;
+	return urlMatcher(idOrUrl);
+}
+
+const videoid = extractID(id);
+const posterFile =
+	{
+		max: 'maxresdefault',
+		high: 'sddefault',
+		default: 'hqdefault',
+		low: 'default',
+	}[posterQuality] || 'hqdefault';
+const posterURL =
+	poster || `https://i.ytimg.com/vi/${videoid}/${posterFile}.jpg`;
+const href = `https://youtube.com/watch?v=${videoid}`;
 ---
 
-<Player id={attrId} class={className} {...attrs} />
+<lite-youtube
+	{videoid}
+	{title}
+	data-title={title}
+	{...attrs}
+  class={className}
+	style=`background-image: url('${posterURL}');`
+>
+	<a {href} class="lty-playbtn ">
+		<span class="lyt-visually-hidden">{attrs.playlabel || 'Play'}</span>
+	</a>
+</lite-youtube>
+
+<script is:inline type="module" src={liteJS}></script>
+
+<style is:global>
+	lite-youtube > iframe {
+		all: unset !important;
+		width: 100% !important;
+		height: 100% !important;
+		position: absolute !important;
+		inset: 0 !important;
+		border: 0 !important;
+	}
+</style>