Looping, increase/decrease volume fix

5 files changed, 50 insertions, 27 deletions

diff --git a/src/js/listeners.js b/src/js/listeners.js
index 7a455c13..cebfb0fa 100644
--- a/src/js/listeners.js
+++ b/src/js/listeners.js
@@ -145,7 +145,7 @@ const listeners = {
                         }
                         break;
 
-                    case 73:
+                    /* case 73:
                         this.setLoop('start');
                         break;
 
@@ -155,7 +155,7 @@ const listeners = {
 
                     case 79:
                         this.setLoop('end');
-                        break;
+                        break; */
 
                     default:
                         break;
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js
index 83b6d942..f35cc927 100644
--- a/src/js/plugins/vimeo.js
+++ b/src/js/plugins/vimeo.js
@@ -53,7 +53,7 @@ const vimeo = {
         // Get Vimeo params for the iframe
         const options = {
             loop: player.config.loop.active,
-            autoplay: player.config.autoplay,
+            autoplay: player.autoplay,
             byline: false,
             portrait: false,
             title: false,
@@ -155,6 +155,18 @@ const vimeo = {
             },
         });
 
+        // Loop
+        let { loop } = player.media;
+        Object.defineProperty(player.media, 'loop', {
+            get() {
+                return loop;
+            },
+            set(input) {
+                loop = utils.is.boolean(input) ? input : player.config.loop.active;
+                player.embed.setLoop(loop);
+            },
+        });
+
         // Source
         let currentSrc;
         player.embed.getVideoUrl().then(value => {
diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js
index 84d16488..5ff45ca8 100644
--- a/src/js/plugins/youtube.js
+++ b/src/js/plugins/youtube.js
@@ -76,7 +76,7 @@ const youtube = {
                 widget_referrer: window && window.location.href,
 
                 // Captions are flaky on YouTube
-                cc_load_policy: (this.captions.active ? 1 : 0),
+                cc_load_policy: this.captions.active ? 1 : 0,
                 cc_lang_pref: this.config.captions.language,
             },
             events: {
@@ -246,18 +246,15 @@ const youtube = {
                     switch (event.data) {
                         case 0:
                             // YouTube doesn't support loop for a single video, so mimick it.
-                            if (player.config.loop.active) {
+                            if (player.media.loop) {
                                 // YouTube needs a call to `stopVideo` before playing again
                                 instance.stopVideo();
                                 instance.playVideo();
-
-                                break;
+                            } else {
+                                utils.dispatchEvent.call(player, player.media, 'ended');
+                                player.media.paused = true;
                             }
 
-                            player.media.paused = true;
-
-                            utils.dispatchEvent.call(player, player.media, 'ended');
-
                             break;
 
                         case 1:
diff --git a/src/js/plyr.js b/src/js/plyr.js
index 09b2aa8a..16a3a2e0 100644
--- a/src/js/plyr.js
+++ b/src/js/plyr.js
@@ -1,4 +1,4 @@
-// ==========================================================================
+// ==========================================================================
 // Plyr
 // plyr.js v3.0.0
 // https://github.com/sampotts/plyr
@@ -419,16 +419,16 @@ class Plyr {
 
     // Increase volume
     increaseVolume(step) {
-        const volume = this.media.muted ? 0 : this.media.volume;
-
-        return this.setVolume(volume + utils.is.number(step) ? step : 1);
+        const volume = this.media.muted ? 0 : this.volume;
+        this.volume = volume + utils.is.number(step) ? step : 1;
+        return this;
     }
 
     // Decrease volume
     decreaseVolume(step) {
-        const volume = this.media.muted ? 0 : this.media.volume;
-
-        return this.setVolume(volume - utils.is.number(step) ? step : 1);
+        const volume = this.media.muted ? 0 : this.volume;
+        this.volume = volume - utils.is.number(step) ? step : 1;
+        return this;
     }
 
     // Toggle mute
@@ -517,11 +517,14 @@ class Plyr {
     }
 
     // Toggle loop
-    // TODO: Finish logic
-    // TODO: Set the indicator on load as user may pass loop as config
-    /* loop(input) {
+    // TODO: Finish fancy new logic. Set the indicator on load as user may pass loop as config
+    set loop(input) {
+        const toggle = utils.is.boolean(input) ? input : this.config.loop.active;
+        this.config.loop.active = toggle;
+        this.media.loop = toggle;
+
         // Set default to be a true toggle
-        const type = ['start', 'end', 'all', 'none', 'toggle'].includes(input) ? input : 'toggle';
+        /* const type = ['start', 'end', 'all', 'none', 'toggle'].includes(input) ? input : 'toggle';
 
         switch (type) {
             case 'start':
@@ -561,11 +564,12 @@ class Plyr {
                 this.config.loop.start = 0;
                 this.config.loop.end = null;
                 break;
-        }
+        } */
+    }
 
-        // Allow chaining
-        return this;
-    } */
+    get loop() {
+        return this.media.loop;
+    }
 
     // Media source
     set src(input) {
@@ -596,6 +600,15 @@ class Plyr {
         return this.media.getAttribute('poster');
     }
 
+    // Autoplay
+    get autoplay() {
+        return this.config.autoplay;
+    }
+    set autoplay(input) {
+        const toggle = utils.is.boolean(input) ? input : this.config.autoplay;
+        this.config.autoplay = toggle;
+    }
+
     // Toggle captions
     toggleCaptions(input) {
         // If there's no full support, or there's no caption toggle
diff --git a/src/js/ui.js b/src/js/ui.js
index aa579d8d..c0db3f8f 100644
--- a/src/js/ui.js
+++ b/src/js/ui.js
@@ -71,12 +71,13 @@ const ui = {
 
         // Set volume
         this.volume = null;
+        // this.muted = null;
 
         // Set playback speed
         this.speed = null;
 
         // Set loop
-        // this.setLoop();
+        this.loop = null;
 
         // Reset time display
         ui.timeUpdate.call(this);