Menu design tweaks, moved logic into plugins

demo/index.html

@@ -65,18 +65,20 @@
                     </svg>Vimeo</button> media player.
             </p>
 
-            <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
+            <span class="action">
-                <svg class="icon">
+                <a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
-                    <title>GitHub</title>
+                    <svg class="icon">
-                    <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
+                        <title>GitHub</title>
+                        <path d="M8,0.2c-4.4,0-8,3.6-8,8c0,3.5,2.3,6.5,5.5,7.6
                C5.9,15.9,6,15.6,6,15.4c0-0.2,0-0.7,0-1.4C3.8,14.5,3.3,13,3.3,13c-0.4-0.9-0.9-1.2-0.9-1.2c-0.7-0.5,0.1-0.5,0.1-0.5
                c0.8,0.1,1.2,0.8,1.2,0.8C4.4,13.4,5.6,13,6,12.8c0.1-0.5,0.3-0.9,0.5-1.1c-1.8-0.2-3.6-0.9-3.6-4c0-0.9,0.3-1.6,0.8-2.1
                c-0.1-0.2-0.4-1,0.1-2.1c0,0,0.7-0.2,2.2,0.8c0.6-0.2,1.3-0.3,2-0.3c0.7,0,1.4,0.1,2,0.3c1.5-1,2.2-0.8,2.2-0.8
                c0.4,1.1,0.2,1.9,0.1,2.1c0.5,0.6,0.8,1.3,0.8,2.1c0,3.1-1.9,3.7-3.7,3.9C9.7,12,10,12.5,10,13.2c0,1.1,0,1.9,0,2.2
                c0,0.2,0.1,0.5,0.6,0.4c3.2-1.1,5.5-4.1,5.5-7.6C16,3.8,12.4,0.2,8,0.2z"></path>
-                </svg>
+                    </svg>
-                Download on GitHub
+                    Download on GitHub
-            </a>
+                </a>
+            </span>
         </header>
 
         <main>

demo/src/less/components/header.less

@@ -11,6 +11,14 @@ header {
         .font-size(@font-size-large);
     }
 
+    .action {
+        display: inline-flex;
+
+        .button .icon {
+            flex-shrink: 0;
+        }
+    }
+
     @media @mq-md {
         max-width: 400px;
         margin-right: (@spacing-base * 2);

demo/src/less/layout/core.less

@@ -37,6 +37,7 @@ main {
 
 aside {
     display: flex;
+    flex-shrink: 0;
     align-items: center;
     justify-content: center;
     width: 100%;

src/js/plugins/vimeo.js

@@ -77,9 +77,9 @@ const vimeo = {
 
         player.media.paused = true;
         player.media.currentTime = 0;
-        let { currentTime } = player.media;
 
         // Seeking
+        let { currentTime } = player.media;
         Object.defineProperty(player.media, 'currentTime', {
             get() {
                 return currentTime;
@@ -114,14 +114,34 @@ const vimeo = {
             set() {},
         });
 
+        // Volume
+        let { volume } = player.media;
+        Object.defineProperty(player.media, 'volume', {
+            get() {
+                return volume;
+            },
+            set(input) {
+                volume = input;
+                player.embed.setVolume(input);
+                utils.dispatchEvent.call(player, player.media, 'volumechange');
+            },
+        });
+
         // Rebuild UI
         window.setTimeout(() => ui.build.call(player), 0);
 
+        // Get title
+        player.embed.getVideoTitle().then(title => {
+            player.config.title = title;
+        });
+
+        // Get current time
         player.embed.getCurrentTime().then(value => {
             currentTime = value;
             utils.dispatchEvent.call(this, this.media, 'timeupdate');
         });
 
+        // Get duration
         player.embed.getDuration().then(value => {
             player.media.duration = value;
             utils.dispatchEvent.call(player, player.media, 'durationchange');

src/js/plugins/youtube.js

@@ -140,8 +140,19 @@ const youtube = {
                         get() {
                             return instance.getPlaybackRate();
                         },
-                        set(speed) {
+                        set(input) {
-                            instance.setPlaybackRate(speed);
+                            instance.setPlaybackRate(input);
+                        },
+                    });
+
+                    // Volume
+                    Object.defineProperty(player.media, 'volume', {
+                        get() {
+                            return instance.getVolume() / 100;
+                        },
+                        set(input) {
+                            instance.setVolume(input * 100);
+                            utils.dispatchEvent.call(player, player.media, 'volumechange');
                         },
                     });
 
@@ -235,9 +246,8 @@ const youtube = {
 
                             // Poll to get playback progress
                             player.timers.playing = window.setInterval(() => {
-                                // player.media.currentTime = instance.getCurrentTime();
                                 utils.dispatchEvent.call(player, player.media, 'timeupdate');
-                            }, 100);
+                            }, 50);
 
                             // Check duration again due to YouTube bug
                             // https://github.com/sampotts/plyr/issues/374

src/js/plyr.js

@@ -320,40 +320,7 @@ class Plyr {
             targetTime = this.duration;
         }
 
-        // Set the current time
+        // Set
-        // TODO: This should be included in the "adapters"
-        // Embeds
-        /* if (this.isEmbed) {
-            // Get current paused state
-            const { paused } = this.media;
-
-            switch (this.type) {
-                case 'youtube':
-                    this.embed.seekTo(targetTime);
-                    break;
-
-                case 'vimeo':
-                    this.embed.setCurrentTime(targetTime);
-                    break;
-
-                default:
-                    break;
-            }
-
-            // Restore pause (some will play on seek)
-            if (paused) {
-                this.pause();
-            }
-
-            // Set seeking flag
-            this.media.seeking = true;
-
-            // Trigger seeking
-            utils.dispatchEvent.call(this, this.media, 'seeking');
-        } else {
-
-        } */
-
         this.media.currentTime = targetTime.toFixed(4);
 
         // Logging
@@ -364,7 +331,7 @@ class Plyr {
         return Number(this.media.currentTime);
     }
 
-    // Get the duration (or custom if set)
+    // Duration
     get duration() {
         // Faux duration set via config
         const fauxDuration = parseInt(this.config.duration, 10);
@@ -376,7 +343,7 @@ class Plyr {
         return !Number.isNaN(fauxDuration) ? fauxDuration : realDuration;
     }
 
-    // Set volume
+    // Volume
     set volume(value) {
         let volume = value;
         const max = 1;
@@ -409,26 +376,6 @@ class Plyr {
         // Set the player volume
         this.media.volume = volume;
 
-        // Trigger volumechange for embeds
-        // TODO: Do in adapters
-        if (this.isEmbed) {
-            // Set media volume
-            switch (this.type) {
-                case 'youtube':
-                    this.embed.setVolume(this.media.volume * 100);
-                    break;
-
-                case 'vimeo':
-                    this.embed.setVolume(this.media.volume);
-                    break;
-
-                default:
-                    break;
-            }
-
-            utils.dispatchEvent.call(this, this.media, 'volumechange');
-        }
-
         // Toggle muted state
         if (volume === 0) {
             this.toggleMute(true);

src/less/components/menus.less

@@ -30,7 +30,7 @@
         animation: plyr-popup 0.2s ease;
         background: @plyr-menu-bg;
         border-radius: 4px;
-        box-shadow: 0 1px 2px fade(#000, 20%);
+        box-shadow: @plyr-menu-shadow;
         white-space: nowrap;
         text-align: left;
         color: @plyr-menu-color;
@@ -117,8 +117,8 @@
                     height: 1px;
                     overflow: hidden;
                     margin-top: ceil(@plyr-control-padding / 2);
-                    background: fade(#000, 15%);
+                    background: @plyr-menu-border-color;
-                    box-shadow: 0 1px 0 fade(#fff, 10%);
+                    box-shadow: 0 1px 0 @plyr-menu-border-shadow-color;
                 }
 
                 &.tab-focus::after,

src/less/components/tooltips.less

@@ -12,7 +12,7 @@
     opacity: 0;
     background: @plyr-tooltip-bg;
     border-radius: @plyr-tooltip-radius;
-    box-shadow: 0 1px 2px fade(#000, 10%);
+    box-shadow: @plyr-tooltip-shadow;
     color: @plyr-tooltip-color;
     font-size: @plyr-font-size-small;
     font-weight: @plyr-font-weight-normal;

src/less/settings.less

@@ -48,11 +48,15 @@
 @plyr-tooltip-padding: (@plyr-control-spacing / 2);
 @plyr-tooltip-arrow-size: 4px;
 @plyr-tooltip-radius: 3px;
+@plyr-tooltip-shadow: 0 1px 2px fade(#000, 15%);
 
 // Menus
 @plyr-menu-bg: @plyr-tooltip-bg;
 @plyr-menu-color: @plyr-tooltip-color;
 @plyr-menu-arrow-size: 6px;
+@plyr-menu-border-color: #b6c5cd;
+@plyr-menu-border-shadow-color: #fff;
+@plyr-menu-shadow: 0 1px 2px fade(#000, 15%);
 
 // Progress
 @plyr-progress-loading-size: 25px;