@epic-web/workshop-utils 6.55.1 → 6.57.0

package/dist/compile-mdx.server.js

@@ -2,6 +2,7 @@ import "./init-env.js";
 import fs from 'fs';
 import path from 'path';
 import { rehypeCodeBlocksShiki } from '@kentcdodds/md-temp';
+import * as cookie from 'cookie';
 import lz from 'lz-string';
 import md5 from 'md5-hex';
 import { bundleMDX } from 'mdx-bundler';
@@ -12,7 +13,51 @@ import gfm from 'remark-gfm';
 import { visit } from 'unist-util-visit';
 import { cachified, compiledInstructionMarkdownCache, compiledMarkdownCache, shouldForceFresh, } from "./cache.server.js";
 import { checkConnection } from "./utils.server.js";
-function remarkMermaidCodeToSvg() {
+const themeCookieName = 'EpicShop_theme';
+const themeHintCookieName = 'EpicShop_CH-prefers-color-scheme';
+function getMermaidTheme(request) {
+    if (!request)
+        return 'default';
+    const cookieHeader = request.headers.get('cookie');
+    if (!cookieHeader)
+        return 'default';
+    const parsed = cookie.parse(cookieHeader);
+    const themeCookie = parsed[themeCookieName];
+    if (themeCookie === 'dark')
+        return 'dark';
+    if (themeCookie === 'light')
+        return 'default';
+    const hintTheme = parsed[themeHintCookieName];
+    return hintTheme === 'dark' ? 'dark' : 'default';
+}
+function mdxStringExpressionAttribute(name, value) {
+    return {
+        type: 'mdxJsxAttribute',
+        name,
+        value: {
+            type: 'mdxJsxAttributeValueExpression',
+            value: JSON.stringify(value),
+            // This hack brought to you by this: https://github.com/syntax-tree/hast-util-to-estree/blob/e5ccb97e9f42bba90359ea6d0f83a11d74e0dad6/lib/handlers/mdx-expression.js#L35-L38
+            // no idea why we're required to have estree here, but I'm pretty sure someone is supposed to add it automatically for us and it just never happens...
+            data: {
+                estree: {
+                    type: 'Program',
+                    sourceType: 'script',
+                    body: [
+                        {
+                            type: 'ExpressionStatement',
+                            expression: {
+                                type: 'Literal',
+                                value,
+                            },
+                        },
+                    ],
+                },
+            },
+        },
+    };
+}
+function remarkMermaidCodeToSvg({ theme }) {
     return async (tree) => {
         const promises = [];
         visit(tree, 'code', (node, index, parent) => {
@@ -21,79 +66,50 @@ function remarkMermaidCodeToSvg() {
                     const isConnected = await checkConnection();
                     if (isConnected) {
                         const compressed = lz.compressToEncodedURIComponent(node.value);
-                        const url = `https://mermaid-to-svg.kentcdodds.workers.dev/svg?mermaid=${compressed}`;
+                        const url = new URL('https://mermaid-to-svg.kentcdodds.workers.dev/svg');
+                        url.searchParams.set('mermaid', compressed);
+                        url.searchParams.set('theme', theme);
                         const timeout = AbortSignal.timeout(5000);
-                        const svgResponse = await fetch(url, { signal: timeout }).catch(() => null);
+                        const svgResponse = await fetch(url, {
+                            signal: timeout,
+                        }).catch(() => null);
                         if (svgResponse?.ok) {
                             const svgText = await svgResponse.text();
                             if (svgText) {
+                                const attributes = [
+                                    {
+                                        type: 'mdxJsxAttribute',
+                                        name: 'code',
+                                        value: node.value,
+                                    },
+                                    mdxStringExpressionAttribute('svg', svgText),
+                                    {
+                                        type: 'mdxJsxAttribute',
+                                        name: 'svgTheme',
+                                        value: theme,
+                                    },
+                                ];
                                 parent.children[index] = {
                                     type: 'mdxJsxFlowElement',
-                                    name: 'div',
-                                    attributes: [
-                                        {
-                                            type: 'mdxJsxAttribute',
-                                            name: 'className',
-                                            value: 'mermaid not-prose',
-                                        },
-                                        {
-                                            type: 'mdxJsxAttribute',
-                                            name: 'dangerouslySetInnerHTML',
-                                            value: {
-                                                type: 'mdxJsxAttributeValueExpression',
-                                                value: `{__html: ${JSON.stringify(svgText)}}`,
-                                                // This hack brought to you by this: https://github.com/syntax-tree/hast-util-to-estree/blob/e5ccb97e9f42bba90359ea6d0f83a11d74e0dad6/lib/handlers/mdx-expression.js#L35-L38
-                                                // no idea why we're required to have estree here, but I'm pretty sure someone is supposed to add it automatically for us and it just never happens...
-                                                data: {
-                                                    estree: {
-                                                        type: 'Program',
-                                                        sourceType: 'script',
-                                                        body: [
-                                                            {
-                                                                type: 'ExpressionStatement',
-                                                                expression: {
-                                                                    type: 'ObjectExpression',
-                                                                    properties: [
-                                                                        {
-                                                                            type: 'Property',
-                                                                            method: false,
-                                                                            shorthand: false,
-                                                                            computed: false,
-                                                                            kind: 'init',
-                                                                            key: {
-                                                                                type: 'Identifier',
-                                                                                name: '__html',
-                                                                            },
-                                                                            value: {
-                                                                                type: 'Literal',
-                                                                                value: svgText,
-                                                                            },
-                                                                        },
-                                                                    ],
-                                                                },
-                                                            },
-                                                        ],
-                                                    },
-                                                },
-                                            },
-                                        },
-                                    ],
+                                    name: 'Mermaid',
+                                    attributes,
                                     children: [],
                                 };
                                 return;
                             }
                         }
                     }
+                    const attributes = [
+                        {
+                            type: 'mdxJsxAttribute',
+                            name: 'code',
+                            value: node.value,
+                        },
+                    ];
                     parent.children[index] = {
                         type: 'mdxJsxFlowElement',
                         name: 'Mermaid',
-                        attributes: [
-                            {
-                                type: 'mdxJsxAttribute',
-                                name: 'code',
-                                value: node.value,
-                            },
-                        ],
+                        attributes,
                         children: [],
                     };
                 })();
@@ -147,13 +163,14 @@ const rehypePlugins = [
 ];
 const verboseLog = process.env.EPICSHOP_VERBOSE_LOG === 'true' ? console.log : () => { };
 export async function compileMdx(file, { request, timings, forceFresh, } = {}) {
+    const mermaidTheme = getMermaidTheme(request);
     const stat = await fs.promises
         .stat(file)
         .catch((error) => ({ error }));
     if ('error' in stat) {
         throw new Error(`File stat cannot be read: ${stat.error}`);
     }
-    const key = `file:${file}`;
+    const key = `file:${file}:mermaid:${mermaidTheme}`;
     forceFresh = await shouldForceFresh({ forceFresh, request, key });
     const existingCacheEntry = await compiledInstructionMarkdownCache.get(key);
     if (!forceFresh && existingCacheEntry) {
@@ -165,10 +182,10 @@ export async function compileMdx(file, { request, timings, forceFresh, } = {}) {
         request,
         timings,
         forceFresh,
-        getFreshValue: () => compileMdxImpl(file),
+        getFreshValue: () => compileMdxImpl(file, { mermaidTheme }),
     });
 }
-async function compileMdxImpl(file) {
+async function compileMdxImpl(file, { mermaidTheme }) {
     let title = null;
     const epicVideoEmbeds = [];
     try {
@@ -180,7 +197,7 @@ async function compileMdxImpl(file) {
                 options.remarkPlugins = [
                     ...(options.remarkPlugins ?? []),
                     gfm,
-                    remarkMermaidCodeToSvg,
+                    [remarkMermaidCodeToSvg, { theme: mermaidTheme }],
                     () => (tree) => {
                         visit(tree, 'heading', (node) => {
                             if (title)

package/dist/db.server.d.ts

@@ -113,6 +113,13 @@ declare const DataSchema: z.ZodObject<{
             defaultView?: string | undefined;
             activeSidebarTab?: number | undefined;
         }>>>;
+        offlineVideo: z.ZodDefault<z.ZodOptional<z.ZodObject<{
+            downloadResolution: z.ZodOptional<z.ZodEnum<["best", "high", "medium", "low"]>>;
+        }, "strip", z.ZodTypeAny, {
+            downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+        }, {
+            downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+        }>>>;
         presence: z.ZodDefault<z.ZodOptional<z.ZodObject<{
             optOut: z.ZodBoolean;
         }, "strip", z.ZodTypeAny, {
@@ -152,6 +159,9 @@ declare const DataSchema: z.ZodObject<{
             defaultView?: string | undefined;
             activeSidebarTab?: number | undefined;
         };
+        offlineVideo: {
+            downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+        };
         presence: {
             optOut: boolean;
         };
@@ -179,6 +189,9 @@ declare const DataSchema: z.ZodObject<{
             defaultView?: string | undefined;
             activeSidebarTab?: number | undefined;
         } | undefined;
+        offlineVideo?: {
+            downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+        } | undefined;
         presence?: {
             optOut: boolean;
         } | undefined;
@@ -282,6 +295,9 @@ declare const DataSchema: z.ZodObject<{
             defaultView?: string | undefined;
             activeSidebarTab?: number | undefined;
         };
+        offlineVideo: {
+            downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+        };
         presence: {
             optOut: boolean;
         };
@@ -333,6 +349,9 @@ declare const DataSchema: z.ZodObject<{
             defaultView?: string | undefined;
             activeSidebarTab?: number | undefined;
         } | undefined;
+        offlineVideo?: {
+            downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+        } | undefined;
         presence?: {
             optOut: boolean;
         } | undefined;
@@ -390,6 +409,9 @@ export declare function readDb(): Promise<{
             defaultView?: string | undefined;
             activeSidebarTab?: number | undefined;
         };
+        offlineVideo: {
+            downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+        };
         presence: {
             optOut: boolean;
         };
@@ -487,6 +509,9 @@ export declare function getPreferences(): Promise<{
         defaultView?: string | undefined;
         activeSidebarTab?: number | undefined;
     };
+    offlineVideo: {
+        downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+    };
     presence: {
         optOut: boolean;
     };
@@ -515,6 +540,9 @@ export declare function setPreferences(preferences: z.input<typeof DataSchema>['
         defaultView?: string | undefined;
         activeSidebarTab?: number | undefined;
     };
+    offlineVideo: {
+        downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+    };
     presence: {
         optOut?: boolean | undefined;
     };
@@ -549,6 +577,9 @@ export declare function markOnboardingComplete(featureId: string): Promise<{
         defaultView?: string | undefined;
         activeSidebarTab?: number | undefined;
     } | undefined;
+    offlineVideo?: {
+        downloadResolution?: "best" | "high" | "medium" | "low" | undefined;
+    } | undefined;
     presence?: {
         optOut: boolean;
     } | undefined;

package/dist/db.server.js

@@ -38,6 +38,13 @@ export const PlayerPreferencesSchema = z
 })
     .optional()
     .default({});
+const OfflineVideoResolutionSchema = z.enum(['best', 'high', 'medium', 'low']);
+const OfflineVideoPreferencesSchema = z
+    .object({
+    downloadResolution: OfflineVideoResolutionSchema.optional(),
+})
+    .optional()
+    .default({});
 const PresencePreferencesSchema = z
     .object({
     optOut: z.boolean(),
@@ -55,6 +62,7 @@ const DataSchema = z.object({
     preferences: z
         .object({
         player: PlayerPreferencesSchema,
+        offlineVideo: OfflineVideoPreferencesSchema,
         presence: PresencePreferencesSchema,
         playground: z
             .object({
@@ -267,6 +275,10 @@ export async function setPreferences(preferences) {
                 ...data?.preferences?.player,
                 ...preferences?.player,
             },
+            offlineVideo: {
+                ...data?.preferences?.offlineVideo,
+                ...preferences?.offlineVideo,
+            },
             presence: {
                 ...data?.preferences?.presence,
                 ...preferences?.presence,

package/dist/offline-videos.server.d.ts

@@ -1,3 +1,4 @@
+import { EventEmitter } from 'node:events';
 import { Readable } from 'node:stream';
 type OfflineVideoEntryStatus = 'ready' | 'downloading' | 'error';
 export type OfflineVideoDownloadState = {
@@ -58,6 +59,18 @@ export type OfflineVideoAsset = {
         end: number;
     }) => Readable;
 };
+export type VideoDownloadProgress = {
+    playbackId: string;
+    bytesDownloaded: number;
+    totalBytes: number | null;
+    status: 'downloading' | 'complete' | 'error';
+};
+export declare const DOWNLOAD_PROGRESS_EVENTS: {
+    readonly PROGRESS: "progress";
+};
+declare class DownloadProgressEmitter extends EventEmitter {
+}
+export declare const downloadProgressEmitter: DownloadProgressEmitter;
 export declare function getOfflineVideoDownloadState(): OfflineVideoDownloadState;
 export declare function getOfflineVideoSummary({ request, }?: {
     request?: Request;

package/dist/offline-videos.server.js

@@ -1,4 +1,5 @@
 import { createHash, randomUUID } from 'node:crypto';
+import { EventEmitter } from 'node:events';
 import { createReadStream, createWriteStream, promises as fs } from 'node:fs';
 import path from 'node:path';
 import { Readable, Transform } from 'node:stream';
@@ -6,15 +7,34 @@ import { pipeline } from 'node:stream/promises';
 import { getApps, getExercises, getWorkshopFinished, getWorkshopInstructions, } from "./apps.server.js";
 import { getWorkshopConfig } from "./config.server.js";
 import { resolvePrimaryDir } from "./data-storage.server.js";
-import { getAuthInfo, getClientId } from "./db.server.js";
+import { getAuthInfo, getClientId, getPreferences } from "./db.server.js";
 import { getEpicVideoInfos } from "./epic-api.server.js";
 import { getEnv } from "./init-env.js";
 import { logger } from "./logger.js";
 import { OFFLINE_VIDEO_CRYPTO_VERSION, createOfflineVideoCipher, createOfflineVideoDecipher, createOfflineVideoIv, createOfflineVideoSalt, decodeOfflineVideoIv, deriveOfflineVideoKey, encodeOfflineVideoIv, getCryptoRange, incrementIv, } from "./offline-video-crypto.server.js";
+const offlineVideoDownloadResolutions = [
+    'best',
+    'high',
+    'medium',
+    'low',
+];
+function isOfflineVideoDownloadResolution(value) {
+    return (typeof value === 'string' &&
+        offlineVideoDownloadResolutions.includes(value));
+}
 const log = logger('epic:offline-videos');
 const offlineVideoDirectoryName = 'offline-videos';
 const offlineVideoIndexFileName = 'index.json';
 const offlineVideoConfigFileName = 'offline-video-config.json';
+export const DOWNLOAD_PROGRESS_EVENTS = {
+    PROGRESS: 'progress',
+};
+class DownloadProgressEmitter extends EventEmitter {
+}
+export const downloadProgressEmitter = new DownloadProgressEmitter();
+function emitDownloadProgress(progress) {
+    downloadProgressEmitter.emit(DOWNLOAD_PROGRESS_EVENTS.PROGRESS, progress);
+}
 let downloadState = {
     status: 'idle',
     startedAt: null,
@@ -203,6 +223,16 @@ function createSliceTransform({ skipBytes, takeBytes, }) {
         },
     });
 }
+function createProgressTrackingTransform({ onProgress, }) {
+    let totalBytes = 0;
+    return new Transform({
+        transform(chunk, _encoding, callback) {
+            totalBytes += chunk.length;
+            onProgress(totalBytes);
+            callback(null, chunk);
+        },
+    });
+}
 function createOfflineVideoReadStream({ filePath, size, key, iv, range, }) {
     if (!range) {
         const decipher = createOfflineVideoDecipher({ key, iv });
@@ -275,13 +305,29 @@ async function getWorkshopVideoCollection({ request, } = {}) {
     }
     return { videos, totalEmbeds: embedUrls.size, unavailable };
 }
-function getMuxMp4Urls(playbackId) {
-    return [
-        `https://stream.mux.com/${playbackId}/high.mp4`,
-        `https://stream.mux.com/${playbackId}/medium.mp4`,
-        `https://stream.mux.com/${playbackId}/low.mp4`,
-        `https://stream.mux.com/${playbackId}.mp4`,
-    ];
+async function getOfflineVideoDownloadResolution() {
+    const preferences = await getPreferences();
+    const resolution = preferences?.offlineVideo?.downloadResolution;
+    if (isOfflineVideoDownloadResolution(resolution)) {
+        return resolution;
+    }
+    return 'best';
+}
+const muxMp4Variants = {
+    high: (playbackId) => `https://stream.mux.com/${playbackId}/high.mp4`,
+    medium: (playbackId) => `https://stream.mux.com/${playbackId}/medium.mp4`,
+    low: (playbackId) => `https://stream.mux.com/${playbackId}/low.mp4`,
+    source: (playbackId) => `https://stream.mux.com/${playbackId}.mp4`,
+};
+const muxResolutionOrder = {
+    best: ['source', 'high', 'medium', 'low'],
+    high: ['high', 'medium', 'low', 'source'],
+    medium: ['medium', 'low', 'high', 'source'],
+    low: ['low', 'medium', 'high', 'source'],
+};
+function getMuxMp4Urls(playbackId, resolution) {
+    const order = muxResolutionOrder[resolution] ?? muxResolutionOrder.best;
+    return order.map((variant) => muxMp4Variants[variant](playbackId));
 }
 async function isOfflineVideoReady(index, playbackId, keyId, cryptoVersion, workshop) {
     const entry = index[playbackId];
@@ -302,9 +348,15 @@ async function isOfflineVideoReady(index, playbackId, keyId, cryptoVersion, work
         return false;
     }
 }
-async function downloadMuxVideo({ playbackId, filePath, key, iv, }) {
-    const urls = getMuxMp4Urls(playbackId);
+async function downloadMuxVideo({ playbackId, filePath, key, iv, resolution, }) {
+    const urls = getMuxMp4Urls(playbackId, resolution);
     let lastError = null;
+    emitDownloadProgress({
+        playbackId,
+        bytesDownloaded: 0,
+        totalBytes: null,
+        status: 'downloading',
+    });
     for (const url of urls) {
         const response = await fetch(url).catch((error) => {
             lastError = error;
@@ -316,19 +368,52 @@ async function downloadMuxVideo({ playbackId, filePath, key, iv, }) {
             lastError = new Error(`Failed to download ${playbackId} from ${url} (${response.status})`);
             continue;
         }
+        // Get content-length if available for progress tracking
+        const contentLengthHeader = response.headers.get('content-length');
+        const totalBytes = contentLengthHeader
+            ? parseInt(contentLengthHeader, 10)
+            : null;
+        emitDownloadProgress({
+            playbackId,
+            bytesDownloaded: 0,
+            totalBytes,
+            status: 'downloading',
+        });
         await ensureOfflineVideoDir();
         const tmpPath = `${filePath}.tmp-${randomUUID()}`;
         const stream = createWriteStream(tmpPath, { mode: 0o600 });
         const cipher = createOfflineVideoCipher({ key, iv });
+        const progressTracker = createProgressTrackingTransform({
+            onProgress: (bytesDownloaded) => {
+                emitDownloadProgress({
+                    playbackId,
+                    bytesDownloaded,
+                    totalBytes,
+                    status: 'downloading',
+                });
+            },
+        });
         const webStream = response.body;
-        await pipeline(Readable.from(webStream), cipher, stream);
+        await pipeline(Readable.from(webStream), progressTracker, cipher, stream);
         await fs.rename(tmpPath, filePath);
         const stat = await fs.stat(filePath);
+        emitDownloadProgress({
+            playbackId,
+            bytesDownloaded: stat.size,
+            totalBytes: stat.size,
+            status: 'complete',
+        });
         return { size: stat.size };
     }
+    emitDownloadProgress({
+        playbackId,
+        bytesDownloaded: 0,
+        totalBytes: null,
+        status: 'error',
+    });
     throw lastError ?? new Error(`Unable to download video ${playbackId}`);
 }
-async function runOfflineVideoDownloads({ videos, index, keyInfo, workshop, }) {
+async function runOfflineVideoDownloads({ videos, index, keyInfo, workshop, resolution, }) {
     for (const video of videos) {
         const updatedAt = new Date().toISOString();
         downloadState.current = {
@@ -357,6 +442,7 @@ async function runOfflineVideoDownloads({ videos, index, keyInfo, workshop, }) {
                 filePath: path.join(getOfflineVideoDir(), entry.fileName),
                 key: keyInfo.key,
                 iv,
+                resolution,
             });
             index[video.playbackId] = {
                 ...entry,
@@ -505,11 +591,13 @@ export async function startOfflineVideoDownload({ request, } = {}) {
         errors: [],
     };
     if (downloads.length > 0) {
+        const resolution = await getOfflineVideoDownloadResolution();
         void runOfflineVideoDownloads({
             videos: downloads,
             index,
             keyInfo,
             workshop,
+            resolution,
         }).catch((error) => {
             log.error('Offline video downloads failed', error);
             downloadState.status = 'error';
@@ -534,6 +622,7 @@ export async function downloadOfflineVideo({ playbackId, title, url, }) {
     });
     if (!keyInfo)
         return { status: 'error' };
+    const resolution = await getOfflineVideoDownloadResolution();
     const existing = index[playbackId];
     if (existing?.status === 'ready' &&
         existing.keyId === keyInfo.keyId &&
@@ -567,6 +656,7 @@ export async function downloadOfflineVideo({ playbackId, title, url, }) {
             filePath: path.join(getOfflineVideoDir(), entry.fileName),
             key: keyInfo.key,
             iv,
+            resolution,
         });
         index[playbackId] = {
             ...entry,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epic-web/workshop-utils",
-  "version": "6.55.1",
+  "version": "6.57.0",
   "publishConfig": {
     "access": "public"
   },