ProximaEntertainment/plyr
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Menu design tweaks, moved logic into plugins

Browse Source
This commit is contained in:
Sam Potts 2017-11-05 01:02:10 +11:00
parent 13d3037a53
commit 3930ebb339
13 changed files with 68 additions and 76 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
demo/dist/demo.css vendored
View File

File diff suppressed because one or more lines are too long

16
demo/index.html
View File

@ -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">
<svg class="icon">
<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
<span class="action">
<a href="https://github.com/sampotts/plyr" target="_blank" class="button" data-shr-network="github">
<svg class="icon">
<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>
Download on GitHub
</a>
</svg>
Download on GitHub
</a>
</span>
</header>
<main>

8
demo/src/less/components/header.less
View File

@ -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);

1
demo/src/less/layout/core.less
View File

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

2
dist/plyr.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/plyr.js.map vendored
View File

File diff suppressed because one or more lines are too long

22
src/js/plugins/vimeo.js
View File

@ -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');

18
src/js/plugins/youtube.js
View File

@ -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

59
src/js/plyr.js
View File

@ -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);

6
src/less/components/menus.less
View File

@ -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,

2
src/less/components/tooltips.less
View File

@ -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;

4
src/less/settings.less
View File

@ -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;