From 18580a0f7fc88fd0096e44b4b3352fba3437b812 Mon Sep 17 00:00:00 2001
From: David Cook <dcook@prosentient.com.au>
Date: Fri, 25 Aug 2023 01:26:01 +0000
Subject: [PATCH] Bug 34613: Replace onclick attributes in midiplayer.js

This patch replaces the onclick attributes in midiplayer.js
with Javascript click handlers.

To test:
0. Apply patch
1. Clear browser cache (it may be necessary to go into the
   Network tab and explicitly disable cache)
2. Add 031 subfields 2gopnu to Default framework
3. Create a catalogue record with a 031 like follows:
2: pe
g: G-2
o: 4/4
p: 4bB''C2bE/2F4GbB/'bB2''C4D/F2.bE/4GG2bB/4'''C2C4''bB/4bE2G4bB/4bE2.F/
n: xFCGD
4. Enable the following sysprefs:
   OPACShowMusicalInscripts
   OPACPlayMusicalInscripts
5. Go to OPAC record view and click "Play this sample"
6. Play with the "Pause/Start" and "Stop" buttons
7. If the buttons work, it means the patch worked

Signed-off-by: Owen Leonard <oleonard@myacpl.org>
---
 koha-tmpl/opac-tmpl/lib/verovio/midiplayer.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/koha-tmpl/opac-tmpl/lib/verovio/midiplayer.js b/koha-tmpl/opac-tmpl/lib/verovio/midiplayer.js
index d54e3a2bed..d183347870 100644
--- a/koha-tmpl/opac-tmpl/lib/verovio/midiplayer.js
+++ b/koha-tmpl/opac-tmpl/lib/verovio/midiplayer.js
@@ -377,13 +377,19 @@ function runConversion() {
         };
 
         // Create the player
+        var play_button = $("<a class=\"icon play\" id=\"midiPlayer_play\"></a>");
+        play_button.on("click",play);
+        var pause_button = $("<a class=\"icon pause\" id=\"midiPlayer_pause\"></a>");
+        pause_button.on("click",pause);
+        var stop_button = $("<a class=\"icon stop\" id=\"midiPlayer_stop\"></a>");
+        stop_button.on("click",stop);
         this.append("<div id=\"midiPlayer_div\"></div>");
         $("#midiPlayer_div").append("<div id=\"midiPlayer_playingTime\">0:00</div>")
             .append("<div id=\"midiPlayer_bar\"><div id=\"midiPlayer_progress\"></div></div>")
             .append("<div id=\"midiPlayer_totalTime\">0:00</div>")
-            .append("<a class=\"icon play\" id=\"midiPlayer_play\" onclick=\"play()\"></a>")
-            .append("<a class=\"icon pause\" id=\"midiPlayer_pause\" onclick=\"pause()\"></a>")
-            .append("<a class=\"icon stop\" id=\"midiPlayer_stop\" onclick=\"stop()\"></a>");
+            .append(play_button)
+            .append(pause_button)
+            .append(stop_button);
 
         $("#midiPlayer_div").css("width", options.width + 200);
         $("#midiPlayer_bar").css("width", options.width);
@@ -436,4 +442,4 @@ function runConversion() {
         return;
     };
 }
-(jQuery));
\ No newline at end of file
+(jQuery));
-- 
2.30.2