From 4a4b5cb5b1eaf561cea757df4066cc9a0ff88c2d Mon Sep 17 00:00:00 2001
From: Dylan Hillerbrand <dhillerbrand@gmail.com>
Date: Wed, 6 Sep 2023 14:40:45 -0400
Subject: [PATCH] Stop chant audio on accordion selection but not scroll

Listens to a click on any chant accordion header to
stop audio, but keeps audio playing even if user has
scrolled to a new image.
---
 .../manuscript-detail/folio/ChantItemView.js    | 17 +++++++++++++++--
 .../manuscript-detail/folio/ChantRecordView.js  |  7 +++++--
 2 files changed, 20 insertions(+), 4 deletions(-)

diff --git a/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantItemView.js b/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantItemView.js
index b7d70821..1becaaa7 100644
--- a/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantItemView.js
+++ b/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantItemView.js
@@ -1,8 +1,11 @@
 import Marionette from 'marionette';
+import Backbone from 'backbone';
 import ChantRecordView from './ChantRecordView';
 
 import template from './chant-item.template.html';
 
+var manuscriptChannel = Backbone.Radio.channel('manuscript');
+
 /**
  * A panel containing chant information
  */
@@ -18,12 +21,14 @@ export default Marionette.LayoutView.extend({
     },
 
     ui: {
-        collapse: '.collapse'
+        collapse: '.collapse',
+        panelHeading: '.panel-heading'
     },
 
     events: {
         'hide.bs.collapse': '_triggerFoldChant',
-        'show.bs.collapse': '_triggerUnfoldChant'
+        'show.bs.collapse': '_triggerUnfoldChant',
+        'click @ui.panelHeading': 'onChantAccordionClick'
     },
 
     collapseContent: function ()
@@ -74,5 +79,13 @@ export default Marionette.LayoutView.extend({
     _triggerUnfoldChant: function ()
     {
         this.trigger('unfold:chant');
+    },
+
+    /**
+     * Trigger an event to stop any audio that is playing
+        */
+    onChantAccordionClick: function ()
+    {
+        manuscriptChannel.trigger('chantAccordion:click');
     }
 });
diff --git a/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantRecordView.js b/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantRecordView.js
index 0cd59110..4fcebfbb 100644
--- a/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantRecordView.js
+++ b/nginx/public/node/frontend/public/js/app/manuscript-detail/folio/ChantRecordView.js
@@ -245,7 +245,7 @@ export default Marionette.ItemView.extend({
 		this.model.set('volpiano', formattedVolpiano);
 		var cdb_uri = this.model.get('cdb_uri');
 		this.model.set({ 'cdb_link_url': 'https://cantus.uwaterloo.ca/node/' + cdb_uri });
-		this.listenTo(manuscriptChannel, 'change:chant', this.chantChanged);
+		manuscriptChannel.on('chantAccordion:click',this.stopChantAudio, this);
 	},
 	ui : {
 		volpianoSyllables: ".volpiano-syllable",
@@ -265,9 +265,12 @@ export default Marionette.ItemView.extend({
 	stop: function(){
 		audioStopReset(MIDI);
 	},
-	chantChanged: function(){
+	stopChantAudio: function(){
 		if (MIDI.getContext().state === "running"){
 			audioStopReset(MIDI);
 		}
+	},
+	onDestroy: function(){
+		manuscriptChannel.off('chantAccordion:click',this.stopChantAudio, this);
 	}
 });