docs: minor cleanup on mui nextjs react hooks example components.

cjpillsbury · Apr 11, 2024 · 5e1ddfb · 5e1ddfb
1 parent c069e11
commit 5e1ddfb
Show file tree

Hide file tree

Showing 4 changed files with 47 additions and 38 deletions.
diff --git a/...s/nextjs-with-typescript/src/app/material-ui-player-chrome/components/AudioMenuButton.tsx b/...s/nextjs-with-typescript/src/app/material-ui-player-chrome/components/AudioMenuButton.tsx
@@ -49,21 +49,25 @@ const AudioMenuButton = () => {
     (state) => state.mediaAudioTrackEnabled
   );
 
+  const label = open ? 'close audio tracks menu' : 'select audio track';
+
   return (
     <>
-      <IconButton
-        id="renditions"
-        aria-controls={open ? 'close renditions' : 'select rendition'}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        color="primary"
-        onClick={handleClick}
-      >
-        <TuneIcon />
-      </IconButton>
+      <Tooltip title={label} placement="top">
+        <IconButton
+          id="audio-tracks"
+          aria-controls={label}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          color="primary"
+          onClick={handleClick}
+        >
+          <TuneIcon />
+        </IconButton>
+      </Tooltip>
       <Menu
-        id="renditions"
-        aria-labelledby="renditions"
+        id="audio-tracks"
+        aria-labelledby="subtitles"
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}

diff --git a/...extjs-with-typescript/src/app/material-ui-player-chrome/components/CaptionsMenuButton.tsx b/...extjs-with-typescript/src/app/material-ui-player-chrome/components/CaptionsMenuButton.tsx
@@ -51,21 +51,25 @@ const CaptionsMenuButton = () => {
   );
   const subtitlesOff = !mediaSubtitlesShowing?.length;
 
+  const label = open ? 'close subtitles menu' : 'select subtitles';
+
   return (
     <>
-      <IconButton
-        id="playback-rate"
-        aria-controls={open ? 'close playback rate' : 'select playback rate'}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        color="primary"
-        onClick={handleClick}
-      >
-        {subtitlesOff ? <ClosedCaptionDisabledIcon /> : <ClosedCaptionIcon />}
-      </IconButton>
+      <Tooltip title={label} placement="top">
+        <IconButton
+          id="subtitles"
+          aria-controls={label}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          color="primary"
+          onClick={handleClick}
+        >
+          {subtitlesOff ? <ClosedCaptionDisabledIcon /> : <ClosedCaptionIcon />}
+        </IconButton>
+      </Tooltip>
       <Menu
-        id="playback-rate"
-        aria-labelledby="playback-rate"
+        id="subtitles"
+        aria-labelledby="subtitles"
         anchorEl={anchorEl}
         open={open}
         onClose={handleClose}

diff --git a/...nextjs-with-typescript/src/app/material-ui-player-chrome/components/ControlsContainer.tsx b/...nextjs-with-typescript/src/app/material-ui-player-chrome/components/ControlsContainer.tsx
@@ -1,8 +1,5 @@
 import { Box, Stack } from '@mui/material';
-import {
-  useMediaDispatch,
-  useMediaSelector,
-} from 'media-chrome/react/media-store';
+import { useMediaSelector } from 'media-chrome/react/media-store';
 import CurrentTimeDisplay from './CurrentTimeDisplay';
 import Seekbar from './Seekbar';
 import DurationDisplay from './DurationDisplay';

diff --git a/...tjs-with-typescript/src/app/material-ui-player-chrome/components/RenditionsMenuButton.tsx b/...tjs-with-typescript/src/app/material-ui-player-chrome/components/RenditionsMenuButton.tsx
@@ -49,18 +49,22 @@ const RenditionsMenuButton = () => {
     (state) => state.mediaRenditionSelected
   );
 
+  const label = open ? 'close renditions menu' : 'select rendition';
+
   return (
     <>
-      <IconButton
-        id="renditions"
-        aria-controls={open ? 'close renditions' : 'select rendition'}
-        aria-haspopup="true"
-        aria-expanded={open ? 'true' : undefined}
-        color="primary"
-        onClick={handleClick}
-      >
-        <GraphicEqIcon />
-      </IconButton>
+      <Tooltip title={label} placement="top">
+        <IconButton
+          id="renditions"
+          aria-controls={label}
+          aria-haspopup="true"
+          aria-expanded={open ? 'true' : undefined}
+          color="primary"
+          onClick={handleClick}
+        >
+          <GraphicEqIcon />
+        </IconButton>
+      </Tooltip>
       <Menu
         id="renditions"
         aria-labelledby="renditions"