Disable Stop Button Until Play Is Triggered (Improve Playback UX)

[vara-prasad-07]

Current Behavior

Both Play and Stop buttons are always active.
Clicking Stop before clicking Play does nothing, which is technically correct, but from a user experience perspective, it is confusing because the button appears actionable when it is not.

Desired Behaviour

• The Stop button should be inactive (disabled) by default when the program is not running.
• When the user clicks Play, the Stop button should become active.
• When the user clicks Stop, execution should stop and the Stop button should return to an inactive state.
• Button states should clearly reflect whether the program is running or stopped.

This behaviour aligns with standard media controls and improves usability, especially for new users.

Screenshots / Mockups

Implementation

• Maintain a simple boolean flag (e.g., isPlaying) in JavaScript to track whether execution is running.
• Default state on load:
  • isPlaying = false
  • Play button enabled
  • Stop button disabled
• On Play button click:
  • Set isPlaying = true
  • Enable the Stop button
• On Stop button click:
  • Set isPlaying = false
  • Disable the Stop button
• Update the button’s disabled attribute and visual styling (e.g., opacity or cursor) to clearly indicate inactive state.

This can be implemented using standard DOM event listeners and does not require any framework.

Acceptance Tests

• Stop button is disabled on application load.
• Clicking Stop without starting playback has no effect and the button remains disabled.
• Clicking Play enables the Stop button.
• Clicking Stop halts execution and disables the Stop button.
• Button states always match the execution state.

Environment

• Operating System: [e.g., Windows, macOS, Linux]
• Browser (if applicable): [e.g., Chrome, Firefox, Safari]
• Version of Software/Project: [e.g., v1.0.0]

Additional Information

This is a UX improvement only and does not alter existing execution logic. It improves clarity and prevents misleading interactions for users.

Checklist

• I have read and followed the project's code of conduct.
• I have searched for similar issues before creating this one.
• I have provided all the necessary information to understand and reproduce the issue.
• I am willing to contribute to the resolution of this issue.

---

Thank you for contributing to our project! We appreciate your help in improving it.

📚 See contributing instructions.

🙋🏾🙋🏼 Questions: Community Matrix Server.

[vara-prasad-07]

Hi @walterbender ,
If this issue is valid, I'm happy to submit a PR
Thank you