fix: add suggestions

Author: kaseyvee

src/components/media/audio/sound.tsx

@@ -233,7 +233,9 @@ export default function Sound(props: AudioFormat) {
       {renderVideoElement()}
       {renderControls()}
       <Fade in={controlErrorMessage.length > 0}>
-        <Alert severity="error">{controlErrorMessage}</Alert>
+        <Alert severity="error" onClose={() => setControlErrorMessage('')}>
+          {controlErrorMessage}
+        </Alert>
       </Fade>
     </Box>
   )

src/components/media/controls/commonControls.tsx

@@ -169,14 +169,9 @@ export function PlayOrPauseButton(props: PlayOrPauseButtonProps) {
     if (isPlaying) {
       props.mediaElement.pause()
     } else {
-      props.mediaElement
-        .play()
-        .then(() => {
-          props.onError('')
-        })
-        .catch(() => {
-          props.onError('Failed to play the media. Please try again.')
-        })
+      props.mediaElement.play().catch(() => {
+        props.onError('Failed to play the media. Please try again.')
+      })
     }
   }
 

src/components/media/controls/videoControls.tsx

@@ -28,7 +28,6 @@ export function PictureInPictureButton(props: PictureInPictureButtonProps) {
       document
         .exitPictureInPicture()
         .then(() => {
-          props.onError('')
           setIsPictureInPicture(false)
         })
         .catch(() => {
@@ -40,7 +39,6 @@ export function PictureInPictureButton(props: PictureInPictureButtonProps) {
       videoElement
         .requestPictureInPicture()
         .then(() => {
-          props.onError('')
           setIsPictureInPicture(true)
         })
         .catch(() => {
@@ -69,7 +67,6 @@ export function FullscreenButton(props: FullscreenButtonProps) {
       document
         .exitFullscreen()
         .then(() => {
-          props.onError('')
           setIsFullscreen(false)
         })
         .catch(() => {
@@ -79,7 +76,6 @@ export function FullscreenButton(props: FullscreenButtonProps) {
       props.element
         .requestFullscreen()
         .then(() => {
-          props.onError('')
           setIsFullscreen(true)
         })
         .catch(() => {

src/components/media/video/video.tsx

@@ -72,18 +72,7 @@ export default function Video(props: VideoFormat) {
     })
   }, [])
 
-  function adjustHexColorOpacity(color: string, opacity: number) {
-    const r = parseInt(color.slice(1, 3), 16)
-    const g = parseInt(color.slice(3, 5), 16)
-    const b = parseInt(color.slice(5, 7), 16)
-
-    return `rgba(${r}, ${g}, ${b}, ${opacity})`
-  }
-
-  const backgroundColor = adjustHexColorOpacity(
-    theme.palette.background.paper,
-    0.6
-  )
+  const backgroundColor = theme.palette.background.paper
 
   function renderVideoElement() {
     return (
@@ -314,6 +303,7 @@ export default function Video(props: VideoFormat) {
             severity="error"
             className="rustic-video-control-error-message"
             data-cy="control-error-message"
+            onClose={() => setControlErrorMessage('')}
           >
             {controlErrorMessage}
           </Alert>