refactor: update captions toggle and create generic toggle interface

Author: kaseyvee

src/components/media/audio/sound.cy.tsx

@@ -95,7 +95,7 @@ describe('Sound', () => {
           captions={captionsPath}
         />
       )
-      cy.get('[data-cy=captions-toggle]').click()
+      cy.get('[data-cy=captionsOn-button]').click()
       cy.get('track').should('exist').should('have.attr', 'src', captionsPath)
     })
     it(`should display an error message when no valid sources are found on ${viewport} screen`, () => {

src/components/media/audio/sound.tsx

@@ -1,17 +1,15 @@
 import './sound.css'
 
-import ClosedCaptionDisabledRoundedIcon from '@mui/icons-material/ClosedCaptionDisabledRounded'
-import ClosedCaptionRoundedIcon from '@mui/icons-material/ClosedCaptionRounded'
 import { useMediaQuery, useTheme } from '@mui/material'
 import Alert from '@mui/material/Alert'
 import CircularProgress from '@mui/material/CircularProgress'
-import IconButton from '@mui/material/IconButton'
 import Typography from '@mui/material/Typography'
 import { Box } from '@mui/system'
 import React, { useEffect, useRef, useState } from 'react'
 
 import type { AudioFormat } from '../../types'
 import {
+  CaptionsToggle,
   MoveTenSecondsButton,
   PausePlayToggle,
   PlaybackRateButton,
@@ -76,17 +74,10 @@ export default function Sound(props: AudioFormat) {
   function renderCaptionsToggle() {
     if (props.captions && props.captions.length > 0) {
       return (
-        <IconButton
-          onClick={() => setAreCaptionsShown(!areCaptionsShown)}
-          aria-label={areCaptionsShown ? 'Hide captions' : 'Show captions'}
-          data-cy="captions-toggle"
-        >
-          {areCaptionsShown ? (
-            <ClosedCaptionRoundedIcon color="primary" />
-          ) : (
-            <ClosedCaptionDisabledRoundedIcon color="primary" />
-          )}
-        </IconButton>
+        <CaptionsToggle
+          active={areCaptionsShown}
+          setActive={() => setAreCaptionsShown(!areCaptionsShown)}
+        />
       )
     }
   }
@@ -119,8 +110,8 @@ export default function Sound(props: AudioFormat) {
     if (props.transcript) {
       return (
         <TranscriptToggle
-          isTranscriptShown={isTranscriptShown}
-          setIsTranscriptShown={() => setIsTranscriptShown(!isTranscriptShown)}
+          active={isTranscriptShown}
+          setActive={() => setIsTranscriptShown(!isTranscriptShown)}
         />
       )
     }

src/components/media/controls/controls.tsx

@@ -26,6 +26,8 @@ interface MediaIconButtonProps {
     | 'pictureInPictureExit'
     | 'fullscreen'
     | 'fullscreenExit'
+    | 'captionsOn'
+    | 'captionsOff'
   className?: string
   color?: string
 }
@@ -35,9 +37,9 @@ interface MediaControls {
   color?: string
 }
 
-interface TranscriptToggleProps {
-  isTranscriptShown: boolean
-  setIsTranscriptShown: () => void
+interface Toggle {
+  active: boolean
+  setActive: () => void
   color?: string
 }
 
@@ -70,6 +72,8 @@ export function MediaIconButton(props: MediaIconButtonProps) {
     },
     fullscreen: { symbol: 'fullscreen', label: 'fullscreen' },
     fullscreenExit: { symbol: 'fullscreen_exit', label: 'exit fullscreen' },
+    captionsOn: { symbol: 'closed_caption', label: 'show captions' },
+    captionsOff: { symbol: 'closed_caption_disabled', label: 'hide captions' },
   }
   return (
     <IconButton
@@ -207,18 +211,22 @@ export function VolumeSettings(props: MediaControls) {
   )
 }
 
-export function TranscriptToggle(props: TranscriptToggleProps) {
-  const Icon = props.isTranscriptShown
-    ? KeyboardArrowUpIcon
-    : KeyboardArrowDownIcon
+export function CaptionsToggle(props: Toggle) {
+  const action = props.active ? 'captionsOff' : 'captionsOn'
 
-  const buttonText = `${props.isTranscriptShown ? 'Hide' : 'Show'} Transcript`
+  return <MediaIconButton onClick={props.setActive} action={action} />
+}
+
+export function TranscriptToggle(props: Toggle) {
+  const Icon = props.active ? KeyboardArrowUpIcon : KeyboardArrowDownIcon
+
+  const buttonText = `${props.active ? 'Hide' : 'Show'} Transcript`
 
   return (
     <Button
       className="rustic-transcript-toggle"
       data-cy="transcript-toggle"
-      onClick={props.setIsTranscriptShown}
+      onClick={props.setActive}
       endIcon={<Icon sx={{ color: props.color }} />}
     >
       <Typography variant="overline" sx={{ color: props.color }}>

src/components/video/video.tsx

@@ -132,8 +132,8 @@ export default function Video(props: VideoFormat) {
     if (props.transcript && !isFullscreen) {
       return (
         <TranscriptToggle
-          isTranscriptShown={isTranscriptShown}
-          setIsTranscriptShown={() => setIsTranscriptShown(!isTranscriptShown)}
+          active={isTranscriptShown}
+          setActive={() => setIsTranscriptShown(!isTranscriptShown)}
           color={color}
         />
       )