Merge pull request #125 from read2me-online/issue-124-preloading-setting

Fixes #124: preloading setting
read2me-online · Jun 12, 2019 · 5c79d65 · 5c79d65
2 parents c34e10b + f84f713
commit 5c79d65
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 13 deletions.
diff --git a/.published b/.published
@@ -65,3 +65,4 @@
 1.1.0-beta5r2
 1.1.0-beta5r3
 1.1.0-beta5r4
+1.1.0-beta5r5
diff --git a/README.md b/README.md
@@ -7,7 +7,7 @@ Add this to your page, ideally immediately after `<body>`:
     if (d.getElementById(id)) return;
     div = d.createElement(t); div.id = id;
     d.body.insertBefore(div, d.body.firstChild);
-    s = 'https://d22fip447qchhd.cloudfront.net/api/widget/1.1.0-beta5r4/widget.min.html';
+    s = 'https://d22fip447qchhd.cloudfront.net/api/widget/1.1.0-beta5r5/widget.min.html';
     r = new XMLHttpRequest(); r.responseType = 'document'; r.open('GET', s, true);
     r.onload = function(e) {
         c = e.target.response.querySelector('style');
@@ -63,7 +63,8 @@ Add this where you want the player to appear:
 - `data-design` - design type. optional, defaults to _standard_. available choices are: standard, minimal
 - `data-theme` - color preset. optional, defaults to _white_. available presets are: white, gray, blue and green.
 - `data-colors` - set primary and secondary colors on top of the theme as an array (e.g. `data-colors="['#EE1932', '#ffffff']"`). optional, but if passed, must be in hex format. 
-- `data-width` - sets a custom width for the widget. for standard design the minimum is 570 px, and for minimal 250 px. if you use a standard design but the container is less than 570px wide, it'll automatically apply the minimal design. optional, defaults to 570px for tablets and desktops and 100% for phones 
+- `data-width` - sets a custom width for the widget. for standard design the minimum is 570 px, and for minimal 250 px. if you use a standard design but the container is less than 570px wide, it'll automatically apply the minimal design. optional, defaults to 570px for tablets and desktops and 100% for phones
+- `data-preload` - set if audio should be preloaded (auto|metadata|none) 
 - `data-only-instantiate` - only use the widget code for validation, don't instantiate the player. this should be used when you don't want to use any of the available players, but instead you want to code your own solution against [the API](https://app.swaggerhub.com/apis/Read2Me/convert/1.0.0). optional, defaults to false
 
 # Advanced usage
@@ -119,4 +120,5 @@ Onboarding is manual. If you're interested please send an email to `hello@read2m
 # Development
 1. Set `AWS_ACCESS_KEY_ID` and `AWS_SECRET_ACCESS_KEY` env variables (with S3 permissions)
 2. For development: `gulp default` (by default, Gulp will use Read2Me's S3 buckets - you can change that in gulpfile.js)
-3. Production versioning: change VERSION file and execute `gulp publish` (which uploads to production S3)
+3. Production versioning: change VERSION file and execute `gulp publish` (which uploads to production S3)
+4. Change the sample JS snippet at the top of this document so it reflects the new version 
diff --git a/VERSION b/VERSION
@@ -1 +1 @@
-1.1.0-beta5r4
+1.1.0-beta5r5
diff --git a/dist/app.min.js b/dist/app.min.js
diff --git a/dist/widget.html b/dist/widget.html
diff --git a/dist/widget.min.html b/dist/widget.min.html
diff --git a/src/js/Read2MeAudioController.js b/src/js/Read2MeAudioController.js
@@ -4,9 +4,11 @@ export default class Read2MeAudioController {
      *
      * @param audioFileUrl
      * @param events
+     * @param preload string
      */
-    constructor(audioFileUrl, events) {
+    constructor(audioFileUrl, events, preload = null) {
         this.audio = new Audio(audioFileUrl);
+        this.audio.preload = preload === null ? 'auto' : preload;
         this.canPlay = false;
         this.canPlayThrough = false;
         this._isPlaying = false;

diff --git a/src/js/Read2MePlayerBuilder.js b/src/js/Read2MePlayerBuilder.js
@@ -37,6 +37,7 @@ export default class Read2MePlayerBuilder {
         let voice = elem.getAttribute('data-voice');
         let design = elem.getAttribute('data-design');
         let colors = elem.getAttribute('data-colors');
+        let preload = elem.getAttribute('data-preload');
 
         autoplay = autoplay === null ? false : Read2MeHelpers.booleanStringToBoolean(autoplay);
         ignoreContentChange = ignoreContentChange === null
@@ -47,14 +48,16 @@ export default class Read2MePlayerBuilder {
 
         let backendWrapper = new Read2MeBackendWrapper(appId, url, cssSelectors, voice, ignoreContentChange, 'widget');
         let playerId = this.playerInstances.length;
-        this.playerInstances[playerId] =
-            new Read2MeWidgetPlayer(elem, url, title, thumbnail, autoplay, playerId, theme, width, design, colors);
+        this.playerInstances[playerId] = new Read2MeWidgetPlayer(
+            elem, url, title, thumbnail, autoplay, playerId, theme, width, design, colors, preload
+        );
 
         this._makeApiCalls(backendWrapper, (responseResult) => {
             // success
             let audioController = new Read2MeAudioController(
                 responseResult.audio_url,
-                new Read2MeAudioEvents(this.playerInstances[playerId]).getAll()
+                new Read2MeAudioEvents(this.playerInstances[playerId]).getAll(),
+                preload
             );
 
             this.playerInstances[playerId].finishInitialisation(audioController, backendWrapper, responseResult);

diff --git a/src/js/Read2MeWidgetPlayer.js b/src/js/Read2MeWidgetPlayer.js
@@ -9,7 +9,8 @@ export default class Read2MeWidgetPlayer {
         widgetBlueprint, url, title = null,
         thumbnail = null, autoplay = false,
         playerId = 0, theme = null, width = null,
-        design = null, colors = null) {
+        design = null, colors = null, preload = null
+    ) {
         // sliders
         this.isScrubberBeingDragged = false;
         this.scrubber = null;
@@ -30,6 +31,7 @@ export default class Read2MeWidgetPlayer {
         this.width = width;
         this.design = design === null ? 'standard' : 'minimal';
         this.colors = colors; // array|null
+        this.preload = preload;
         this.hasColors = this.colors !== null && this.colors.length > 0;
         this.primaryColor = this.hasColors ? this.colors[0] : null;
         this.secondaryColor = this.hasColors ? this.colors[1] : null;
@@ -608,7 +610,7 @@ export default class Read2MeWidgetPlayer {
 
         this.audioController.pause();
         delete this.audioController;
-        this.audioController = new Read2MeAudioController(source, events);
+        this.audioController = new Read2MeAudioController(source, events, this.preload);
 
         this.configureSliders(duration);