xiaoxue_admin
/
DPlayer
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

add tooltips

This commit is contained in:
DIYgod 2017-09-15 00:10:23 +08:00
parent 1ebd49497c
commit 1ff8e0e2f2
No known key found for this signature in database
GPG Key ID: EC0B76A252D3EF67
10 changed files with 63 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
dist/DPlayer.min.css vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.css.map vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js vendored
View File

File diff suppressed because one or more lines are too long

2
dist/DPlayer.min.js.map vendored
View File

File diff suppressed because one or more lines are too long

3
package.json
View File

@ -51,5 +51,8 @@
"url-loader": "^0.5.7",
"webpack": "^3.1.0",
"webpack-dev-server": "^2.4.5"
},
"dependencies": {
"balloon-css": "^0.5.0"
}
}

12
src/DPlayer.js
View File

@ -281,11 +281,10 @@ class DPlayer {
const volumeEle = this.element.getElementsByClassName('dplayer-volume')[0];
const volumeBarWrapWrap = this.element.getElementsByClassName('dplayer-volume-bar-wrap')[0];
const volumeBarWrap = this.element.getElementsByClassName('dplayer-volume-bar')[0];
const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0];
const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0].getElementsByClassName('dplayer-icon-content')[0];
const vWidth = 35;
this.switchVolumeIcon = () => {
const volumeicon = this.element.getElementsByClassName('dplayer-volume-icon')[0];
if (this.volume() >= 0.95) {
volumeicon.innerHTML = svg('volume-up');
}
@ -842,18 +841,17 @@ class DPlayer {
/**
* Set volume
*/
volume (percentage, nonotice, nostorage) {
volume (percentage, nostorage) {
percentage = parseFloat(percentage);
if (!isNaN(percentage)) {
percentage = percentage > 0 ? percentage : 0;
percentage = percentage < 1 ? percentage : 1;
this.updateBar('volume', percentage, 'width');
const formatPercentage = `${(percentage * 100).toFixed(0)}%`;
this.element.getElementsByClassName('dplayer-volume-bar-wrap')[0].dataset.balloon = formatPercentage;
if (!nostorage) {
this.user.set('volume', percentage);
}
if (!nonotice) {
this.notice(`${this.tran('Volume')} ${(percentage * 100).toFixed(0)}%`);
}
this.video.volume = percentage;
if (this.video.muted) {
this.video.muted = false;
@ -1005,7 +1003,7 @@ class DPlayer {
});
}
this.volume(this.user.get('volume'), true, true);
this.volume(this.user.get('volume'), true);
}
switchQuality (index) {

26
src/DPlayer.scss
View File

@ -1,3 +1,5 @@
@import '../node_modules/balloon-css/balloon.css';
.dplayer {
position: relative;
overflow: hidden;
@ -497,14 +499,19 @@
background-color: transparent;
outline: none;
cursor: pointer;
opacity: .8;
transition: all .2s ease-in-out;
vertical-align: middle;
box-sizing: border-box;
display: inline-block;
.dplayer-icon-content {
transition: all .2s ease-in-out;
opacity: .8;
}
&:hover {
opacity: 1;
.dplayer-icon-content {
opacity: 1;
}
}
&.dplayer-quality-icon {
@ -1263,3 +1270,16 @@
transform: translate(0, 0) rotate(0deg);
}
}
[data-balloon]:before {
display: none;
}
[data-balloon]:after {
padding: 0.3em 0.7em;
background: rgba(17, 17, 17, 0.7);
}
[data-balloon][data-balloon-pos="up"]:after {
margin-bottom: 0;
}

34
src/html.js
View File

@ -51,13 +51,13 @@ const html = {
<div class="dplayer-controller">
<div class="dplayer-icons dplayer-icons-left">
<button class="dplayer-icon dplayer-play-icon">
${svg('play')}
<span class="dplayer-icon-content">${svg('play')}</span>
</button>
<div class="dplayer-volume">
<button class="dplayer-icon dplayer-volume-icon">
${svg('volume-down')}
<span class="dplayer-icon-content">${svg('volume-down')}</span>
</button>
<div class="dplayer-volume-bar-wrap">
<div class="dplayer-volume-bar-wrap" data-balloon-pos="up">
<div class="dplayer-volume-bar">
<div class="dplayer-volume-bar-inner" style="background: ${option.theme};">
<span class="dplayer-thumb" style="background: ${option.theme}"></span>
@ -77,17 +77,17 @@ const html = {
</div>
` : ``}
${option.screenshot ? `
<a href="#" class="dplayer-icon dplayer-camera-icon">
${svg('camera')}
<a href="#" class="dplayer-icon dplayer-camera-icon" data-balloon="${tran('Screenshot')}" data-balloon-pos="up">
<span class="dplayer-icon-content">${svg('camera')}</span>
</a>
` : ``}
<div class="dplayer-comment">
<button class="dplayer-icon dplayer-comment-icon">
${svg('comment')}
<button class="dplayer-icon dplayer-comment-icon" data-balloon="${tran('Send danmaku')}" data-balloon-pos="up">
<span class="dplayer-icon-content">${svg('comment')}</span>
</button>
<div class="dplayer-comment-box">
<button class="dplayer-icon dplayer-comment-setting-icon">
${svg('menu')}
<button class="dplayer-icon dplayer-comment-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
<span class="dplayer-icon-content">${svg('menu')}</span>
</button>
<div class="dplayer-comment-setting-box">
<div class="dplayer-comment-setting-color">
@ -134,23 +134,23 @@ const html = {
</div>
</div>
<input class="dplayer-comment-input" type="text" placeholder="${tran('Input danmaku, hit Enter')}" maxlength="30">
<button class="dplayer-icon dplayer-send-icon">
${svg('send')}
<button class="dplayer-icon dplayer-send-icon" data-balloon="${tran('Send')}" data-balloon-pos="up">
<span class="dplayer-icon-content">${svg('send')}</span>
</button>
</div>
</div>
<div class="dplayer-setting">
<button class="dplayer-icon dplayer-setting-icon">
${svg('setting')}
<button class="dplayer-icon dplayer-setting-icon" data-balloon="${tran('Setting')}" data-balloon-pos="up">
<span class="dplayer-icon-content">${svg('setting')}</span>
</button>
<div class="dplayer-setting-box"></div>
</div>
<div class="dplayer-full">
<button class="dplayer-icon dplayer-full-in-icon">
${svg('full-in')}
<button class="dplayer-icon dplayer-full-in-icon" data-balloon="${tran('Web full screen')}" data-balloon-pos="up">
<span class="dplayer-icon-content">${svg('full-in')}</span>
</button>
<button class="dplayer-icon dplayer-full-icon">
${svg('full')}
<button class="dplayer-icon dplayer-full-icon" data-balloon="${tran('Full screen')}" data-balloon-pos="up">
<span class="dplayer-icon-content">${svg('full')}</span>
</button>
</div>
</div>

8
src/i18n.js
View File

@ -44,7 +44,13 @@ const tranTxt = {
'quality': '画质',
'FF to': '快进至',
'REW to': '快退至',
'Unlimited danmaku': '海量弹幕'
'Unlimited danmaku': '海量弹幕',
'Send danmaku': '发送弹幕',
'Setting': '设置',
'Full screen': '全屏',
'Web full screen': '页面全屏',
'Send': '发送',
'Screenshot': '截图'
},
"zh-tw" : {
'Danmaku is loading': '彈幕加載中',

4
yarn.lock
View File

@ -701,6 +701,10 @@ balanced-match@^0.4.1, balanced-match@^0.4.2:
version "0.4.2"
resolved "http://registry.npm.taobao.org/balanced-match/download/balanced-match-0.4.2.tgz#cb3f3e3c732dc0f01ee70b403f302e61d7709838"
balloon-css@^0.5.0:
version "0.5.0"
resolved "https://registry.npmjs.org/balloon-css/-/balloon-css-0.5.0.tgz#6a3c065efab9ea5f509a95d4315df00aae114fa3"
base64-js@^1.0.2:
version "1.2.0"
resolved "http://registry.npm.taobao.org/base64-js/download/base64-js-1.2.0.tgz#a39992d723584811982be5e290bb6a53d86700f1"