All JQuery click events are unbind on init of speech description

[Tim-Obert]

When initializing in description.js, all clickevents on document are removed instead of only the newly added one.
Specifically, this causes a problem with "collapse" in Bootstrap v4. Here it also listens to click on the document, which doesn't work after this function removes all click eventlistener on document. Line 198:

ableplayer/scripts/description.js

Lines 187 to 208 in b0635e8

	if (context === 'init') {
	// handle a click on anything, in case the user
	// clicks something before they click 'play' or 'prefs' buttons
	// that would allow us to init speech before it's needed
	$(document).on('click',function() {
	var greeting = new SpeechSynthesisUtterance('Hi!');
	greeting.volume = 0; // silent
	greeting.rate = 10; // fastest speed supported by the API
	thisObj.synth.speak(greeting);
	greeting.onstart = function(e) {
	// utterance has started
	$(document).off('click'); // unbind the click event listener
	}
	greeting.onend = function(e) {
	// should now be able to get browser voices
	// in browsers that require a click
	thisObj.getBrowserVoices();
	if (thisObj.descVoices.length) {
	thisObj.speechEnabled = true;
	}
	};
	});

[elliot-sawyer]

We have a similar problem with a megamenu that relies on the existing click handler. When Able initialises, its click handler replaces the global one shared with our menu and results in an audible "Hi!" on the most recent stable tag (fixed in #576). However, when the audio stops, it unbinds the click listener and doesn't restore the old one.

I can think of a few fixes for this, but before I offer a pull request, is this functional test of an audible noise still necessary? This is effectively a unit test that I would suggest should not be in production code - I would think the mere existence of the SpeechSynthesisUtterance class would be enough of a test at runtime, given the support it enjoys in all major browsers

[MarHerUMR]

We have the same problem when using collapse elements from bootstrap:

Describe the bug

Able Player breaks Collapse elements from Bootstrap when used on the same page.

To Reproduce

Steps to reproduce the behavior:

1. Add a video player with Able Player to a page.
2. Load Bootstrap (tested with version 3.4)
3. Create a closed Collapse element on the page
4. Click on the Collapse element in order to open it.
5. Click on the Collapse element again in order to close it. It will not close again.

Expected behavior

When using Able Player and Bootstrap the Collapse elements should keep working.

Desktop (please complete the following information):

• OS: Windows 10 Education (22H2)
• Tested with Vivaldi 6.7.3329.21 (Stable channel) (64-Bit) and Firefox 115.10.0esr (64-Bit)

Additional context

Bootstrap uses $(document).on() to handle the interactions with collapsibles:

 $(document).on('click.bs.collapse.data-api', '[data-toggle="collapse"]', function (e) {
    var $this   = $(this)

    if (!$this.attr('data-target')) e.preventDefault()

    var $target = getTargetFromTrigger($this)
    var data    = $target.data('bs.collapse')
    var option  = data ? 'toggle' : $this.data()

    Plugin.call($target, option)
  })

Source

Able Player uses the same method in order to "init speech before it's needed" and disables the event listener again.

                        greeting.onstart = function(e) {
                            // utterance has started 
                            $(document).off('click'); // unbind the click event listener
                        }

Source

By removing the event listener for Able Player the event listener for Boostrap is removed as well. Therefore the collapsibles no longer works.