Allow authenticated requests by passing through xhr options to connections

[jkeen]

This adds an xhr option so that when loading/playing sounds, you can provide the xhr params necessary to perform an authenticated request.

The available parameters are: xhr.withCredentials, xhr.headers, and xhr.method. These attributes will configure the Howler connection's xhr property, and the HLS connection's xhrSetup function.

Using this in a template helper might look something:

<button
      type='button'
      {{on
        'click'
        (toggle-play-sound
          this.url
          xhr=(hash
            headers=(hash
              X-ACCESS-TOKEN='xyz123'
            )
          )
        )
      }}
    >
    {{#if (sound-is-playing this.url)}}
      Pause
    {{else}}
      Play
    {{/if}}
</button>

This isn't yet implemented in the NativeAudio connection yet, which requires more significant changes to support something like this.

[jkeen]

I'd probably also make an xhr-auth-details helper or something in my ember app if using this approach so you don't have to retype those xhr params each time, and can have the helper worry about that

<button
   type='button'
    {{on
        'click'
        (toggle-play-sound
          this.url
          xhr=(xhr-auth-details)
        )
      }}
    >
    {{#if (sound-is-playing this.url)}}
      Pause
    {{else}}
      Play
    {{/if}}
</button>

[mwhitworth]

This looks good to me!

In terms of a the xhr option, I can imagine it being a property of an Ember service in an application related to authentication (e.g. a derived session service)

[jkeen]

:tada: This PR is included in version 4.2.0 :tada:

The release is available on:

• npm package (@latest dist-tag)
• GitHub release

Your semantic-release bot :package::rocket:

[jkeen]

:tada: This PR is included in version 5.0.0-beta.20 :tada:

The release is available on:

• npm package (@beta dist-tag)
• GitHub release

Your semantic-release bot :package::rocket: