change(ui): prevent player playing during editing of fields

frontend/app/components/Session/Layout/Player/Controls.js

@@ -89,7 +89,7 @@ function Controls({
               icon="replay-10"
             />
           </div>
-          <div className="flex items-center"> 
+          <div className="flex items-center">
             <button
               className={ cn("text-gray-darkest hover:bg-gray-lightest", cls.speedButton) }
               onClick={ player.toggleSpeed }
@@ -119,7 +119,7 @@ function Controls({
                 hasErrors={ hasErrors }
               />
             )}
-            
+
             <ControlButton
               disabled={ disabled }
               onClick={ player.toggleFullscreen }
@@ -134,4 +134,4 @@ function Controls({
   );
 }
 
-export default observer(Controls);
+export default observer(Controls);

frontend/app/components/Session_/Player/Overlay/PlayIconLayer.tsx

@@ -26,7 +26,7 @@ function PlayIconLayer({ playing, togglePlay, notesEdit }: Props) {
   const getIsEdit = React.useCallback(() => notesEdit, [notesEdit])
 
   const onKeyDown = (e: any) => {
-    if (getIsEdit()) return;
+    if (getIsEdit() || e.target instanceof HTMLInputElement || e.target instanceof HTMLTextAreaElement) return;
     if (e.key === ' ') {
       togglePlayAnimated();
     }

frontend/app/components/ui/Checkbox/Checkbox.tsx

@@ -10,7 +10,7 @@ export default (props: Props) => {
     const { className = '', label = '', ...rest } = props;
     return (
         <label className={cn('flex items-center cursor-pointer', className)}>
-            <input type="checkbox"  onChange={() => null} {...rest} />
+            <input type="checkbox" onChange={() => null} {...rest} />
             {label && <span className="ml-2 select-none mb-0">{label}</span>}
         </label>
     );