Issue #3308215: Make bigger area for Play audio button

CHANGELOG.md

@@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 - Adjusted "Make available offline" button text when processed.
 - Fixed the problem "Unable to install Anu LMS Permissions due to unmet dependencies". That was happening in a case when "Anu LMS Assessments" module was disabled when a user tried to enable "Anu LMS Permissions" module.
 - Fixed a bug broken html output for lessons when highlighting was requested.
+- #3308215: Make bigger area for Play audio button.
 
 ## [2.8.1]
 - Fixed spacing for the lesson sidebar and lesson mobile navigation.

js/src/components/Audio/AudioPlayer.js

@@ -86,17 +86,18 @@ const AudioPlayer = ({
   return (
     <Box className={classes.wrapper}>
       {showButton && (
-        <Box className={`${classes.button} ${isReady ? classes.buttonActive : ''}`}>
+        <Box
+          className={`${classes.button} ${isReady ? classes.buttonActive : ''}`}
+          {...(isReady && { onClick: handlePlayPause })}
+        >
           {!isReady && showLoading && <CircularProgress size={null} className={classes.loader} />}
           {showPauseButton && (
             <PauseIcon
-              onClick={handlePlayPause}
               className={`${classes.buttonIcon} ${isReady ? classes.buttonIconActive : ''}`}
             />
           )}
           {!showPauseButton && (
             <PlayIcon
-              onClick={handlePlayPause}
               className={`${classes.buttonIcon} ${isReady ? classes.buttonIconActive : ''}`}
               role="button"
             />