Menu design tweaks, moved logic into plugins
This commit is contained in:
Sam Potts
@ -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');
|
||||
|
||||
@ -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
|
||||
|
||||
@ -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);
|
||||
|
||||
@ -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,
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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;
|
||||
|
||||
Reference in New Issue
Block a user