diff options
Diffstat (limited to 'src')
| -rw-r--r-- | src/js/plugins/vimeo.js | 22 | ||||
| -rw-r--r-- | src/js/plugins/youtube.js | 18 | ||||
| -rw-r--r-- | src/js/plyr.js | 59 | ||||
| -rw-r--r-- | src/less/components/menus.less | 6 | ||||
| -rw-r--r-- | src/less/components/tooltips.less | 2 | ||||
| -rw-r--r-- | src/less/settings.less | 4 |
6 files changed, 46 insertions, 65 deletions
diff --git a/src/js/plugins/vimeo.js b/src/js/plugins/vimeo.js index 7bcb2d01..8c7f2b04 100644 --- a/src/js/plugins/vimeo.js +++ b/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'); diff --git a/src/js/plugins/youtube.js b/src/js/plugins/youtube.js index ce21433e..7b8447c2 100644 --- a/src/js/plugins/youtube.js +++ b/src/js/plugins/youtube.js @@ -140,8 +140,19 @@ const youtube = { get() { return instance.getPlaybackRate(); }, - set(speed) { - instance.setPlaybackRate(speed); + set(input) { + 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 diff --git a/src/js/plyr.js b/src/js/plyr.js index 60960d01..cc997094 100644 --- a/src/js/plyr.js +++ b/src/js/plyr.js @@ -320,40 +320,7 @@ class Plyr { targetTime = this.duration; } - // Set the current time - // 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 { - - } */ - + // Set 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); diff --git a/src/less/components/menus.less b/src/less/components/menus.less index 52b735de..171ae52d 100644 --- a/src/less/components/menus.less +++ b/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%); - box-shadow: 0 1px 0 fade(#fff, 10%); + background: @plyr-menu-border-color; + box-shadow: 0 1px 0 @plyr-menu-border-shadow-color; } &.tab-focus::after, diff --git a/src/less/components/tooltips.less b/src/less/components/tooltips.less index 0f7c0071..225bb02a 100644 --- a/src/less/components/tooltips.less +++ b/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; diff --git a/src/less/settings.less b/src/less/settings.less index cc5b870e..bbcca869 100644 --- a/src/less/settings.less +++ b/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; |