From 80da1d24fab176b4ab3e39d8b588774a4c4e00bc Mon Sep 17 00:00:00 2001
From: Kumar Saurabh Raj <kumarsaurabhraj.sr@gmail.com>
Date: Wed, 20 Jan 2021 09:34:19 +0530
Subject: [PATCH] BugFix: Phrase Maker - play stop button

---
 js/widgets/phrasemaker.js | 37 ++++++++++++++++++++++++++++++++++++-
 1 file changed, 36 insertions(+), 1 deletion(-)

diff --git a/js/widgets/phrasemaker.js b/js/widgets/phrasemaker.js
index 5d9f555585..85f217bf51 100644
--- a/js/widgets/phrasemaker.js
+++ b/js/widgets/phrasemaker.js
@@ -267,10 +267,35 @@ class PhraseMaker {
             widgetWindow.destroy();
         };
 
-        widgetWindow.addButton("play-button.svg", PhraseMaker.ICONSIZE, _("Play")).onclick = () => {
+        this._playButton = widgetWindow.addButton("play-button.svg", PhraseMaker.ICONSIZE, _("Play"));
+        
+        this._playButton.onclick = () => {
             logo.turtleDelay = 0;
 
             logo.resetSynth(0);
+            if(this.playingNow) {
+                this._playButton.innerHTML =
+                    '&nbsp;&nbsp;<img src="header-icons/play-button.svg" title="' +
+                    _("Play") +
+                    '" alt="' +
+                    _("Play") +
+                    '" height="' +
+                    PhraseMaker.ICONSIZE +
+                    '" width="' +
+                    PhraseMaker.ICONSIZE +
+                    '" vertical-align="middle">&nbsp;&nbsp;';
+            } else {
+                this._playButton.innerHTML =
+                    '&nbsp;&nbsp;<img src="header-icons/stop-button.svg" title="' +
+                    _("Stop") +
+                    '" alt="' +
+                    _("Stop") +
+                    '" height="' +
+                    PhraseMaker.ICONSIZE +
+                    '" width="' +
+                    PhraseMaker.ICONSIZE +
+                    '" vertical-align="middle">&nbsp;&nbsp;';
+            }
             this.playAll();
         };
 
@@ -3887,6 +3912,16 @@ class PhraseMaker {
                     _("Play")
                 );
                 this.playingNow = false;
+                this._playButton.innerHTML =
+                        '&nbsp;&nbsp;<img src="header-icons/play-button.svg" title="' +
+                        _("Play") +
+                        '" alt="' +
+                        _("Play") +
+                        '" height="' +
+                        PhraseMaker.ICONSIZE +
+                        '" width="' +
+                        PhraseMaker.ICONSIZE +
+                        '" vertical-align="middle">&nbsp;&nbsp;';
             } else {
                 row = this._noteValueRow;
                 cell = row.cells[this._colIndex];