@epic-web/workshop-utils 6.55.0 → 6.56.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/epic-api.server.js

@@ -1,6 +1,7 @@
 import { invariant } from '@epic-web/invariant';
 import * as cookie from 'cookie';
 import md5 from 'md5-hex';
+import PQueue from 'p-queue';
 import { z } from 'zod';
 import { getExerciseApp, getExercises, getWorkshopFinished, getWorkshopInstructions, } from "./apps.server.js";
 import { cachified, epicApiCache } from "./cache.server.js";
@@ -84,6 +85,7 @@ const CachedEpicVideoInfoSchema = z
 }))
     .or(z.null());
 const videoInfoLog = log.logger('video-info');
+const EPIC_VIDEO_INFO_CONCURRENCY = 6;
 export async function getEpicVideoInfos(epicWebUrls, { request, timings } = {}) {
     if (!epicWebUrls) {
         videoInfoLog.warn('no epic web URLs provided, returning empty object');
@@ -92,18 +94,23 @@ export async function getEpicVideoInfos(epicWebUrls, { request, timings } = {})
     const authInfo = await getAuthInfo();
     if (getEnv().EPICSHOP_DEPLOYED)
         return {};
-    videoInfoLog(`fetching epic video infos for ${epicWebUrls.length} URLs`);
+    const uniqueUrls = Array.from(new Set(epicWebUrls));
+    videoInfoLog(`fetching epic video infos for ${uniqueUrls.length} URLs`);
     const epicVideoInfos = {};
-    for (const epicVideoEmbed of epicWebUrls) {
-        const epicVideoInfo = await getEpicVideoInfo({
+    const queue = new PQueue({ concurrency: EPIC_VIDEO_INFO_CONCURRENCY });
+    const results = await Promise.all(uniqueUrls.map((epicVideoEmbed) => queue.add(async () => ({
+        epicVideoEmbed,
+        info: await getEpicVideoInfo({
             epicVideoEmbed,
             accessToken: authInfo?.tokenSet.access_token,
             request,
             timings,
-        });
-        if (epicVideoInfo) {
-            epicVideoInfos[epicVideoEmbed] = epicVideoInfo;
-        }
+        }),
+    }))));
+    for (const result of results) {
+        if (!result.info)
+            continue;
+        epicVideoInfos[result.epicVideoEmbed] = result.info;
     }
     videoInfoLog(`successfully fetched ${Object.keys(epicVideoInfos).length} epic video infos`);
     return epicVideoInfos;

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

@@ -62,6 +62,7 @@ export declare function getOfflineVideoDownloadState(): OfflineVideoDownloadStat
 export declare function getOfflineVideoSummary({ request, }?: {
     request?: Request;
 }): Promise<OfflineVideoSummary>;
+export declare function warmOfflineVideoSummary(): Promise<void>;
 export declare function startOfflineVideoDownload({ request, }?: {
     request?: Request;
 }): Promise<OfflineVideoStartResult>;

package/dist/offline-videos.server.js

@@ -6,11 +6,21 @@ 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';
@@ -275,13 +285,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,8 +328,8 @@ 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;
     for (const url of urls) {
         const response = await fetch(url).catch((error) => {
@@ -328,7 +354,7 @@ async function downloadMuxVideo({ playbackId, filePath, key, iv, }) {
     }
     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 +383,7 @@ async function runOfflineVideoDownloads({ videos, index, keyInfo, workshop, }) {
                 filePath: path.join(getOfflineVideoDir(), entry.fileName),
                 key: keyInfo.key,
                 iv,
+                resolution,
             });
             index[video.playbackId] = {
                 ...entry,
@@ -422,6 +449,9 @@ export async function getOfflineVideoSummary({ request, } = {}) {
         downloadState,
     };
 }
+export async function warmOfflineVideoSummary() {
+    await getWorkshopVideoCollection();
+}
 export async function startOfflineVideoDownload({ request, } = {}) {
     if (getEnv().EPICSHOP_DEPLOYED) {
         return {
@@ -502,11 +532,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';
@@ -531,6 +563,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 &&
@@ -564,6 +597,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.0",
+  "version": "6.56.0",
   "publishConfig": {
     "access": "public"
   },