Skip to content

test: add slow proxy to next app for slow storyboard blocking playbac… #1289

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
cjpillsbury wants to merge 4 commits into
base: main
Choose a base branch
from
+43 −4
Draft

test: add slow proxy to next app for slow storyboard blocking playbac… #1289

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
23f0f63
test: add slow proxy to next app for slow storyboard blocking playbac…
cjpillsbury Mar 17, 2026
c96de88
fix: disable browser caching on storyboard proxy endpoint
cjpillsbury Mar 17, 2026
7ed2e26
test: show playerSoftwareName and playerSoftwareVersion in MuxPlayer …
cjpillsbury Mar 17, 2026
644182d
test: move playerSoftwareInfo display above player, show as name@version
cjpillsbury Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 16 additions & 4 deletions examples/nextjs-with-typescript/pages/MuxPlayer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,11 @@
import Head from 'next/head';
import MuxPlayer, { MuxPlayerProps, MaxResolution, MinResolution, RenditionOrder } from '@mux/mux-player-react';
import type MuxPlayerElement from '@mux/mux-player';
import '@mux/mux-player/themes/classic';
import '@mux/mux-player/themes/minimal';
import '@mux/mux-player/themes/microvideo';
import '@mux/mux-player/themes/gerwig';
import { useReducer, useState } from 'react';
import { useReducer, useRef, useState } from 'react';
import mediaAssetsJSON from '@mux/assets/media-assets.json';
import type { NextParsedUrlQuery } from 'next/dist/server/request-meta';
import {
Expand Down Expand Up @@ -250,7 +251,8 @@ export const getServerSideProps = getLocationServerSideProps;
type Props = LocationProps;

function MuxPlayerPage({ location }: Props) {
// const mediaElRef = useRef<MuxPlayerElement>(null);
const mediaElRef = useRef<MuxPlayerElement>(null);
const [playerSoftwareInfo, setPlayerSoftwareInfo] = useState<{ name?: string; version?: string }>({});
const [mediaAssets, _setMediaAssets] = useState(mediaAssetsJSON);
const [selectedAsset, setSelectedAsset] = useState(undefined);
/** @TODO fix typing complexities here (CJP) */
Expand All @@ -262,15 +264,22 @@ function MuxPlayerPage({ location }: Props) {
const [stylesState, dispatchStyles] = useReducer(reducer, DEFAULT_INITIAL_STYLES_STATE);
const genericOnStyleChange = (obj) => dispatchStyles(updateProps(obj));

console.log('playerSoftwareInfo', playerSoftwareInfo);

return (
<>
<Head>
<title>&lt;MuxPlayer/&gt; Demo</title>
</Head>
<main className="component-page">
{(playerSoftwareInfo.name || playerSoftwareInfo.version) && (
<div>
<strong>{playerSoftwareInfo.name ?? 'N/A'}@{playerSoftwareInfo.version ?? 'N/A'}</strong>
</div>
)}
<div id="custom-fullscreen-element">
<MuxPlayer
// ref={mediaElRef}
ref={mediaElRef}
style={stylesState}
theme={state.theme}
fullscreenElement={state.fullscreenElement}
Expand Down Expand Up @@ -298,7 +307,6 @@ function MuxPlayerPage({ location }: Props) {
crossOrigin={state.crossOrigin}
nohotkeys={state.nohotkeys}
hotkeys={state.hotkeys}
// onPlayerReady={() => console.log("ready!")}
preferCmcd={state.preferCmcd}
preferPlayback={state.preferPlayback}
debug={state.debug}
Expand Down Expand Up @@ -338,6 +346,10 @@ function MuxPlayerPage({ location }: Props) {
proudlyDisplayMuxBadge={state.proudlyDisplayMuxBadge}
onPlay={(evt: Event) => {
onPlay(evt);
setPlayerSoftwareInfo({
name: mediaElRef.current?.playerSoftwareName,
version: mediaElRef.current?.playerSoftwareVersion,
});
// dispatch(updateProps({ paused: false }));
}}
onPause={(evt: Event) => {
Expand Down
27 changes: 27 additions & 0 deletions examples/nextjs-with-typescript/pages/api/storyboard-proxy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,27 @@
import type { NextApiRequest, NextApiResponse } from 'next';

export default async function handler(req: NextApiRequest, res: NextApiResponse) {
const { url, delay } = req.query;

if (!url || typeof url !== 'string') {
return res.status(400).json({ error: 'Missing required "url" query parameter' });
}

const delayMs = parseInt(typeof delay === 'string' ? delay : '0', 10) || 0;

if (delayMs > 0) {
await new Promise((resolve) => setTimeout(resolve, delayMs));
}

const upstream = await fetch(url);

if (!upstream.ok) {
return res.status(upstream.status).json({ error: `Upstream error: ${upstream.statusText}` });
}

const body = await upstream.text();

res.setHeader('Content-Type', upstream.headers.get('content-type') ?? 'text/vtt');
res.setHeader('Cache-Control', 'no-store');
res.status(200).send(body);
}
Loading