chore: Improve MuxPlayer NextJS page for advanced testing (a la DRM)

examples/nextjs-with-typescript/app/page-state/index.ts

@@ -5,6 +5,8 @@ import { Dispatch, Reducer, useEffect, useReducer } from 'react';
 
 const DEFAULT_INITIAL_STATE = Object.freeze({}) as Readonly<Record<string, any>>;
 
+export const isObject = (x: unknown): x is object => (x && typeof x === 'object' && !Array.isArray(x));
+
 export const defaultToInitialState = <T extends Record<string, any> = Record<string, any>>(
   query: NextParsedUrlQuery,
   ..._additionalArgs: any[]
@@ -42,10 +44,30 @@ export const reducer = <T extends Record<string, any> = Record<string, any>>(
   const { type, value } = action;
   switch (type) {
     case ActionType.UPDATE: {
-      return {
-        ...state,
-        ...value,
+      const updateFn = typeof value === 'function' ? value : (prevState) => {
+        return Object.entries(value).reduce((nextState, [name, value]) => {
+          let nextValue = value;
+          if (isObject(value) && isObject(nextState[name])) {
+            // nextValue = { ...nextState[name], ...value };
+            nextValue = Object.entries(value).reduce((nextValue, [newValueKey, newValueValue]) => {
+              // Treat undefined (but not null) as a removal/delete condition
+              if (newValueValue === undefined) {
+                delete nextValue[newValueKey];
+              } else {
+                nextValue[newValueKey] = newValueValue;
+              }
+              return nextValue;
+            }, { ...nextState[name] });
+            // Also remove empty objects (aka no remaining keys after prior logic)
+            if (!Object.keys(nextValue).length) {
+              nextValue = undefined;
+            }
+          }
+          nextState[name] = nextValue;
+          return nextState;
+        }, { ...prevState });
       };
+      return updateFn(state);
     }
     default: {
       return state;

examples/nextjs-with-typescript/components/ComponentCodeRenderer.tsx

@@ -1,27 +1,43 @@
+import { Box, IconButton, Tooltip } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+
 const toValueString = (value: any) => {
-    if (['boolean', 'number', 'string'].includes(typeof value)) return `${JSON.stringify(value)}`;
-    if (Array.isArray(value)) return `[${value.map(toValueString).join(', ')}]`;
-    if (typeof value === 'object') return `{ ${Object.entries(value).map(([key, entryValue]) => `${key}: ${toValueString(entryValue)}`).join(', ')} }`;
-    return value;
-  };
+  if (['boolean', 'number', 'string'].includes(typeof value)) return `${JSON.stringify(value)}`;
+  if (Array.isArray(value)) return `[${value.map(toValueString).join(', ')}]`;
+  if (typeof value === 'object')
+    return `{ ${Object.entries(value)
+      .map(([key, entryValue]) => `${key}: ${toValueString(entryValue)}`)
+      .join(', ')} }`;
+  return value;
+};
 
-const ComponentCodeRenderer = ({ state, component = 'MuxPlayer' }: { state: Record<string, any>; component?: string; }) => {
-    const stateEntries = Object.entries(state).filter(([,value]) => value != undefined);
-    const propsStr = stateEntries.length
-      ? `\n${stateEntries.map(([key, value]) => `  ${key}={${toValueString(value)}}`).join('\n')}\n`
-      : '';
-    const codeStr = `<${component}${propsStr}/>`;
-    const copyToClipboard = () => {
-      navigator.clipboard?.writeText(codeStr);
-    };
-    return (
-      <div className="code-renderer" style={{}}>
-        <pre>
-          <code>{codeStr}</code>
-        </pre>
-        <button onClick={copyToClipboard}>Copy code</button>
-      </div>
-    );
+const ComponentCodeRenderer = ({
+  state,
+  component = 'MuxPlayer',
+}: {
+  state: Record<string, any>;
+  component?: string;
+}) => {
+  const stateEntries = Object.entries(state).filter(([, value]) => value != undefined);
+  const propsStr = stateEntries.length
+    ? `\n${stateEntries.map(([key, value]) => `  ${key}={${toValueString(value)}}`).join('\n')}\n`
+    : '';
+  const codeStr = `<${component}${propsStr}/>`;
+  const copyToClipboard = () => {
+    navigator.clipboard?.writeText(codeStr);
   };
+  return (
+    <Box style={{ position: 'relative' }}>
+      <Tooltip title={'Copy to clipboard'}>
+        <IconButton style={{ position: 'absolute', top: 0, right: 0 }} onClick={copyToClipboard}>
+          <ContentCopyIcon />
+        </IconButton>
+      </Tooltip>
+      <pre>
+        <code>{codeStr}</code>
+      </pre>
+    </Box>
+  );
+};
 
-  export default ComponentCodeRenderer;
+export default ComponentCodeRenderer;

examples/nextjs-with-typescript/components/URLPathRenderer.tsx

@@ -1,24 +1,39 @@
+import { Box, IconButton, Tooltip, Typography } from '@mui/material';
+import ContentCopyIcon from '@mui/icons-material/ContentCopy';
+import Link from 'next/link';
+
 const URLPathRenderer = ({
   state,
   location: { origin, pathname } = {
     origin: '',
-    pathname: './'
+    pathname: './',
   },
-}: { state: Record<string, any>; location?: Pick<Location, 'origin' | 'pathname'>; }) => {
-  const stateEntries = Object.entries(state).filter(([,value]) => value != undefined);
+}: {
+  state: Record<string, any>;
+  location?: Pick<Location, 'origin' | 'pathname'>;
+}) => {
+  const stateEntries = Object.entries(state).filter(([, value]) => value != undefined);
   const urlSearchParamsStr = stateEntries.length
     ? `?${new URLSearchParams(Object.fromEntries(stateEntries.map(([k, v]) => [k, JSON.stringify(v)]))).toString()}`
-    : ''
+    : '';
   const urlStr = `${origin}${pathname}${urlSearchParamsStr}`;
   const copyToClipboard = () => {
     navigator.clipboard?.writeText(urlStr);
   };
   return (
-    <div className="url-renderer">
-      <a href={urlStr} target="_blank">{urlStr}</a>
-      <button onClick={copyToClipboard}>Copy URL</button>
-    </div>
+    <Box style={{ display: 'flex', alignItems: 'center', textOverflow: 'ellipsis' }}>
+      <Tooltip title={urlStr}>
+        <Link href={urlStr} style={{ minWidth: 0 }} target="_blank">
+          <Typography noWrap>{urlStr}</Typography>
+        </Link>
+      </Tooltip>
+      <Tooltip title={'Copy to clipboard'}>
+        <IconButton onClick={copyToClipboard}>
+          <ContentCopyIcon />
+        </IconButton>
+      </Tooltip>
+    </Box>
   );
 };
 
-export default URLPathRenderer;
+export default URLPathRenderer;