Disable playback while recordings are generated

src/components/app/pieces-tab/drop-down/index.jsx

@@ -49,7 +49,7 @@ const Dropdown = ({ options, selected, onSelect, title }) => {
 Dropdown.propTypes = {
   options: propTypes.array.isRequired,
   selected: propTypes.string.isRequired,
-  onSelect: propTypes.string.isRequired,
+  onSelect: propTypes.func.isRequired,
   title: propTypes.string.isRequired,
 };
 

src/components/app/pieces-tab/index.jsx

@@ -132,6 +132,7 @@ const PiecesTabComponent = ({
               onPlayClick={onPlayClick}
               onStopClick={onStopClick}
               changeFilter={clearAndChangeFilter}
+              isRecording={isRecordingGenerationInProgress}
             />
           ))}
         </div>

src/components/app/pieces-tab/piece/index.jsx

@@ -22,26 +22,40 @@ const Piece = ({
   isSelected,
   isPlaying,
   isLoading,
+  isRecording,
   onPieceClick,
   onPlayClick,
   onStopClick,
   changeFilter,
 }) => {
   const handlePieceClick = () => {
-    if (!isSelected) {
+    if (isRecording) {
       onPieceClick(piece);
-    }
-    if (!isPlaying) {
-      onPlayClick();
+    } else {
+      if (!isSelected) {
+        onPieceClick(piece);
+      }
+      if (!isPlaying) {
+        onPlayClick();
+      }
     }
   };
 
+  let centerButtonTitle;
+  if (isRecording) {
+    centerButtonTitle = 'Playback is disabled while recordings are generated';
+  } else if (isPlaying) {
+    centerButtonTitle = 'Stop';
+  } else {
+    centerButtonTitle = `Play ${piece.title}`;
+  }
+
   return (
     <div className="piece" key={piece.id}>
       <div
         className="piece__image"
         onClick={handlePieceClick}
-        title={`Play ${piece.title}`}
+        title={`${isRecording ? 'Select' : 'Play'} ${piece.title}`}
       >
         <img src={piece.image ? piece.image : defaultImage} />
         {isSelected && (isPlaying || isLoading) && (
@@ -64,7 +78,8 @@ const Piece = ({
               ? () => onStopClick()
               : handlePieceClick
           }
-          title={isPlaying ? 'Stop' : `Play ${piece.title}`}
+          title={centerButtonTitle}
+          isDisabled={isRecording}
         />
         <MoreButton className="piece__btns__btn" pieceId={piece.id} />
       </div>
@@ -115,6 +130,7 @@ Piece.propTypes = {
   isPlaying: propTypes.bool.isRequired,
   isDisabled: propTypes.bool.isRequired,
   isLoading: propTypes.bool.isRequired,
+  isRecording: propTypes.bool.isRequired,
   onPieceClick: propTypes.func.isRequired,
   onPlayClick: propTypes.func.isRequired,
   onStopClick: propTypes.func.isRequired,

src/components/shared/icon-button/icon-button.scss

@@ -12,6 +12,17 @@
     outline: none;
   }
 
+  &:disabled {
+    color: $primaryActiveColor;
+    cursor: not-allowed;
+
+    @include hoverStyle(#{&}) {
+      &:hover {
+        color: $primaryActiveColor;
+      }
+    }
+  }
+
   @include hoverStyle(#{&}) {
     &:hover {
       color: $primaryHoverColor;

src/components/shared/icon-button/index.jsx

@@ -10,6 +10,7 @@ const IconButton = ({
   title,
   className = '',
   isFilled = false,
+  isDisabled = false,
 }) => (
   <button
     type="button"
@@ -18,6 +19,7 @@ const IconButton = ({
     className={classNames('icon-button', className, {
       'icon-button--is-filled': isFilled,
     })}
+    disabled={isDisabled}
   >
     <FontAwesomeIcon icon={faIcon} />
   </button>
@@ -29,6 +31,7 @@ IconButton.propTypes = {
   title: propTypes.string.isRequired,
   className: propTypes.string,
   isFilled: propTypes.bool,
+  isDisabled: propTypes.bool,
 };
 
 export default IconButton;