Skip to content

Commit

Permalink
Merge pull request #146 from donnes/icons-option
Browse files Browse the repository at this point in the history 
Expose icons as an option and create a new option to set icon color
  • Loading branch information
DIYgod authored Sep 19, 2017
2 parents 6ca11a2 + 457daaa commit 7d1b719
Show file tree
Hide file tree
Showing 6 changed files with 241 additions and 115 deletions.
122 changes: 105 additions & 17 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="UTF-8">
<title>DPlayer Demo</title>
Expand All @@ -10,6 +11,7 @@
<script src="https://unpkg.com/hls.js/dist/hls.min.js"></script>
<script src="DPlayer.js"></script>
</head>

<body class="markdown-body">
<h2 id="quick-start">Quick Start</h2>
<div class="example">
Expand Down Expand Up @@ -122,7 +124,7 @@ <h2 id="options">Options</h2>
var eventsEle = document.getElementById('events');
for (let i = 0; i < events.length; i++) {
dp2.on(events[i], (info) => {
eventsEle.innerHTML += '<p>Event: ' + events[i] + '</p>';
eventsEle.innerHTML += '<p>Event: ' + events[i] + '</p>';
eventsEle.scrollTop = eventsEle.scrollHeight;
})
}
Expand All @@ -134,22 +136,22 @@ <h2 id="quality-switching">Quality switching</h2>
<button class="btn" onclick="dp3.switchQuality(1)">Switch quality</button>
<div id="dplayer3"></div>
<script>
var dp3 = new DPlayer({
container: document.getElementById('dplayer3'),
video: {
quality: [{
name: 'HD',
url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
type: 'hls'
}, {
name: 'SD',
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
type: 'normal'
}],
defaultQuality: 0,
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
}
});
var dp3 = new DPlayer({
container: document.getElementById('dplayer3'),
video: {
quality: [{
name: 'HD',
url: 'http://devtest.qiniudn.com/若能绽放光芒5.m3u8',
type: 'hls'
}, {
name: 'SD',
url: 'http://devtest.qiniudn.com/若能绽放光芒.mp4',
type: 'normal'
}],
defaultQuality: 0,
pic: 'http://devtest.qiniudn.com/若能绽放光芒.png'
}
});
</script>
</div>

Expand Down Expand Up @@ -221,6 +223,91 @@ <h2 id="bilibili-video-and-danmaku">Bilibili video and danmaku</h2>
</script>
</div>

<h2 id="customize-ui-icons">Customize UI icons</h2>
<div class="example">
<div id="dplayer9"></div>
<script>
var dp9 = new DPlayer({
container: document.getElementById('dplayer9'),
screenshot: false,
video: {
url: 'https://api.prprpr.me/dplayer/video/bilibili?aid=4045652',
},
icons: {
play: [
'0 0 24 24',
'M8 5v14l11-7z',
'24'
],
pause: [
'0 0 24 24',
'M6 19h4V5H6v14zm8-14v14h4V5h-4z',
'24'
],
'volume-up': [
'0 0 24 24',
'M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z',
'24'
],
'volume-down': [
'0 0 24 24',
'M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z',
'24'
],
'volume-off': [
'0 0 24 24',
'M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z',
'24'
],
loop: [
'0 0 32 32',
'M1.882 16.941c0 4.152 3.221 7.529 7.177 7.529v1.882c-4.996 0-9.060-4.222-9.060-9.412s4.064-9.412 9.060-9.412h7.96l-3.098-3.098 1.331-1.331 5.372 5.37-5.37 5.372-1.333-1.333 3.1-3.098h-7.962c-3.957 0-7.177 3.377-7.177 7.529zM22.94 7.529v1.882c3.957 0 7.177 3.377 7.177 7.529s-3.221 7.529-7.177 7.529h-7.962l3.098-3.098-1.331-1.331-5.37 5.37 5.372 5.372 1.331-1.331-3.1-3.1h7.96c4.998 0 9.062-4.222 9.062-9.412s-4.064-9.412-9.060-9.412z'
],
full: [
'0 0 24 24',
'M7 14H5v5h5v-2H7v-3zm-2-4h2V7h3V5H5v5zm12 7h-3v2h5v-5h-2v3zM14 5v2h3v3h2V5h-5z',
'24'
],
'full-in': [
'0 0 32 33',
'M24.965 24.38h-18.132c-1.366 0-2.478-1.113-2.478-2.478v-11.806c0-1.364 1.111-2.478 2.478-2.478h18.132c1.366 0 2.478 1.113 2.478 2.478v11.806c0 1.364-1.11 2.478-2.478 2.478zM6.833 10.097v11.806h18.134l-0.002-11.806h-18.132zM2.478 28.928h5.952c0.684 0 1.238-0.554 1.238-1.239 0-0.684-0.554-1.238-1.238-1.238h-5.952v-5.802c0-0.684-0.554-1.239-1.238-1.239s-1.239 0.556-1.239 1.239v5.802c0 1.365 1.111 2.478 2.478 2.478zM30.761 19.412c-0.684 0-1.238 0.554-1.238 1.238v5.801h-5.951c-0.686 0-1.239 0.554-1.239 1.238 0 0.686 0.554 1.239 1.239 1.239h5.951c1.366 0 2.478-1.111 2.478-2.478v-5.801c0-0.683-0.554-1.238-1.239-1.238zM0 5.55v5.802c0 0.683 0.554 1.238 1.238 1.238s1.238-0.555 1.238-1.238v-5.802h5.952c0.684 0 1.238-0.554 1.238-1.238s-0.554-1.238-1.238-1.238h-5.951c-1.366-0.001-2.478 1.111-2.478 2.476zM32 11.35v-5.801c0-1.365-1.11-2.478-2.478-2.478h-5.951c-0.686 0-1.239 0.554-1.239 1.238s0.554 1.238 1.239 1.238h5.951v5.801c0 0.683 0.554 1.237 1.238 1.237 0.686 0.002 1.239-0.553 1.239-1.236z'
],
setting: [
'0 0 24 24',
'M19.43 12.98c.04-.32.07-.64.07-.98s-.03-.66-.07-.98l2.11-1.65c.19-.15.24-.42.12-.64l-2-3.46c-.12-.22-.39-.3-.61-.22l-2.49 1c-.52-.4-1.08-.73-1.69-.98l-.38-2.65C14.46 2.18 14.25 2 14 2h-4c-.25 0-.46.18-.49.42l-.38 2.65c-.61.25-1.17.59-1.69.98l-2.49-1c-.23-.09-.49 0-.61.22l-2 3.46c-.13.22-.07.49.12.64l2.11 1.65c-.04.32-.07.65-.07.98s.03.66.07.98l-2.11 1.65c-.19.15-.24.42-.12.64l2 3.46c.12.22.39.3.61.22l2.49-1c.52.4 1.08.73 1.69.98l.38 2.65c.03.24.24.42.49.42h4c.25 0 .46-.18.49-.42l.38-2.65c.61-.25 1.17-.59 1.69-.98l2.49 1c.23.09.49 0 .61-.22l2-3.46c.12-.22.07-.49-.12-.64l-2.11-1.65zM12 15.5c-1.93 0-3.5-1.57-3.5-3.5s1.57-3.5 3.5-3.5 3.5 1.57 3.5 3.5-1.57 3.5-3.5 3.5z',
'24'
],
right: [
'0 0 32 32',
'M22 16l-10.105-10.6-1.895 1.987 8.211 8.613-8.211 8.612 1.895 1.988 8.211-8.613z'
],
comment: [
'0 0 24 24',
'M20 2H4c-1.1 0-1.99.9-1.99 2L2 22l4-4h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zM6 9h12v2H6V9zm8 5H6v-2h8v2zm4-6H6V6h12v2z',
'24'
],
'comment-off': [
'0 0 32 32',
'M27.090 0.131h-22.731c-2.354 0-4.262 1.839-4.262 4.109v16.401c0 2.269 1.908 4.109 4.262 4.109h4.262v-2.706h8.469l-8.853 8.135 1.579 1.451 7.487-6.88h9.787c2.353 0 4.262-1.84 4.262-4.109v-16.401c0-2.27-1.909-4.109-4.262-4.109v0zM28.511 19.304c0 1.512-1.272 2.738-2.841 2.738h-8.425l-0.076-0.070-0.076 0.070h-11.311c-1.569 0-2.841-1.226-2.841-2.738v-13.696c0-1.513 1.272-2.739 2.841-2.739h19.889c1.569 0 2.841-0.142 2.841 1.37v15.064z'
],
send: [
'0 0 32 32',
'M13.725 30l3.9-5.325-3.9-1.125v6.45zM0 17.5l11.050 3.35 13.6-11.55-10.55 12.425 11.8 3.65 6.1-23.375-32 15.5z'
],
menu: [
'0 0 22 32',
'M20.8 14.4q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2zM1.6 11.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2zM20.8 20.8q0.704 0 1.152 0.48t0.448 1.12-0.48 1.12-1.12 0.48h-19.2q-0.64 0-1.12-0.48t-0.48-1.12 0.448-1.12 1.152-0.48h19.2z'
],
camera: [
'0 0 32 32',
'M16 23c-3.309 0-6-2.691-6-6s2.691-6 6-6 6 2.691 6 6-2.691 6-6 6zM16 13c-2.206 0-4 1.794-4 4s1.794 4 4 4c2.206 0 4-1.794 4-4s-1.794-4-4-4zM27 28h-22c-1.654 0-3-1.346-3-3v-16c0-1.654 1.346-3 3-3h3c0.552 0 1 0.448 1 1s-0.448 1-1 1h-3c-0.551 0-1 0.449-1 1v16c0 0.552 0.449 1 1 1h22c0.552 0 1-0.448 1-1v-16c0-0.551-0.448-1-1-1h-11c-0.552 0-1-0.448-1-1s0.448-1 1-1h11c1.654 0 3 1.346 3 3v16c0 1.654-1.346 3-3 3zM24 10.5c0 0.828 0.672 1.5 1.5 1.5s1.5-0.672 1.5-1.5c0-0.828-0.672-1.5-1.5-1.5s-1.5 0.672-1.5 1.5zM15 4c0 0.552-0.448 1-1 1h-4c-0.552 0-1-0.448-1-1v0c0-0.552 0.448-1 1-1h4c0.552 0 1 0.448 1 1v0z'
]
},
iconsColor: 'orange'
});
</script>
</div>

<h2 id="html5-check">HTML5 check</h2>
<ul>
<li class="video">Video</li>
Expand All @@ -239,4 +326,5 @@ <h2 id="html5-check">HTML5 check</h2>
<script src="demo.js"></script>
<script src="modernizr.js"></script>
</body>

</html>
30 changes: 16 additions & 14 deletions src/DPlayer.js
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import './DPlayer.scss';

import utils, {isMobile} from './utils';
import svg from './svg';
import utils, { isMobile } from './utils';
import handleOption from './options';
import i18n from './i18n';
import html from './html';
import SvgCollection from './svg';
import Danmaku from './danmaku';
import Thumbnails from './thumbnails';
import Events from './events';
Expand Down Expand Up @@ -33,6 +33,8 @@ class DPlayer {

this.tran = new i18n(this.options.lang).tran;

this.icons = new SvgCollection(this.options);

this.events = new Events();

this.user = new User(this);
Expand All @@ -45,7 +47,7 @@ class DPlayer {
this.container.classList.add('dplayer-mobile');
}

this.container.innerHTML = html.main(this.options, index, this.tran);
this.container.innerHTML = html.main(this.options, index, this.tran, this.icons);

const bar = {};
bar.volumeBar = this.container.getElementsByClassName('dplayer-volume-bar-inner')[0];
Expand Down Expand Up @@ -279,13 +281,13 @@ class DPlayer {

this.switchVolumeIcon = () => {
if (this.volume() >= 0.95) {
volumeicon.innerHTML = svg('volume-up');
volumeicon.innerHTML = this.icons.get('volume-up');
}
else if (this.volume() > 0) {
volumeicon.innerHTML = svg('volume-down');
volumeicon.innerHTML = this.icons.get('volume-down');
}
else {
volumeicon.innerHTML = svg('volume-off');
volumeicon.innerHTML = this.icons.get('volume-off');
}
};
const volumeMove = (event) => {
Expand Down Expand Up @@ -317,7 +319,7 @@ class DPlayer {
}
else {
this.video.muted = true;
volumeicon.innerHTML = svg('volume-off');
volumeicon.innerHTML = this.icons.get('volume-off');
this.updateBar('volume', 0, 'width');
}
});
Expand Down Expand Up @@ -347,7 +349,7 @@ class DPlayer {
/**
* setting
*/
const settingHTML = html.setting(this.tran);
const settingHTML = html.setting(this.tran, this.icons);

// toggle setting box
const settingIcon = this.container.getElementsByClassName('dplayer-setting-icon')[0];
Expand Down Expand Up @@ -502,7 +504,7 @@ class DPlayer {
settingEvent();

// set duration time
if (this.video.duration !== 1) { // compatibility: Android browsers will output 1 at first
if (this.video.duration !== 1) { // compatibility: Android browsers will output 1 at first
this.container.getElementsByClassName('dplayer-dtime')[0].innerHTML = this.video.duration ? utils.secondToTime(this.video.duration) : '00:00';
}

Expand Down Expand Up @@ -794,11 +796,11 @@ class DPlayer {
play () {
this.paused = false;
if (this.video.paused) {
this.bezel.innerHTML = svg('play');
this.bezel.innerHTML = this.icons.get('play');
this.bezel.classList.add('dplayer-bezel-transition');
}

this.playButton.innerHTML = svg('pause');
this.playButton.innerHTML = this.icons.get('pause');

this.video.play();
this.setTime();
Expand All @@ -816,12 +818,12 @@ class DPlayer {
this.container.classList.remove('dplayer-loading');

if (!this.video.paused) {
this.bezel.innerHTML = svg('pause');
this.bezel.innerHTML = this.icons.get('pause');
this.bezel.classList.add('dplayer-bezel-transition');
}

this.ended = false;
this.playButton.innerHTML = svg('play');
this.playButton.innerHTML = this.icons.get('play');
this.video.pause();
this.clearTime();
this.container.classList.remove('dplayer-playing');
Expand Down Expand Up @@ -926,7 +928,7 @@ class DPlayer {
}

// Support FLV
if (this.type === 'flv' && flvjs.isSupported()) {
if (this.type === 'flv' && flvjs.isSupported()) {
const flvPlayer = flvjs.createPlayer({
type: 'flv',
url: video.src
Expand Down
32 changes: 0 additions & 32 deletions src/DPlayer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -257,10 +257,6 @@
color: #fff;
pointer-events: none;

.dplayer-fill {
fill: rgba(255, 255, 255, .8);
}

.dplayer-bezel-icon {
position: absolute;
top: 50%;
Expand Down Expand Up @@ -534,10 +530,6 @@
}
}

.dplayer-fill {
fill: #fff;
}

.dplayer-volume {
position: relative;
display: inline-block;
Expand Down Expand Up @@ -807,18 +799,6 @@
top: 5px;
left: 7px;
padding: 0;
opacity: 1;

&:hover {
.dplayer-fill {
fill: #aaa;
}
}

.dplayer-fill {
transition: all .2s ease-in-out;
fill: #ddd;
}
}

.dplayer-comment-setting-box {
Expand Down Expand Up @@ -949,18 +929,6 @@
top: 6px;
right: 7px;
padding: 0;
opacity: 1;

&:hover {
.dplayer-fill {
fill: #aaa;
}
}

.dplayer-fill {
transition: all .2s ease-in-out;
fill: #ddd;
}
}
}
}
Expand Down
Loading

0 comments on commit 7d1b719

Please sign in to comment.