x15904151985/ArtPlayer
1
0 Fork 0
mirror of https://github.com/zhw2590582/ArtPlayer.git synced 2026-10-25 16:11:20 -08:00
Code Issues Packages Projects Releases Wiki Activity

add indicator icon

Browse Source
This commit is contained in:
Harvey committed 2021-11-29 13:27:21 +08:00
1 parent 4d6e56beb2
commit 61f36c795d
14 files changed
+76 -24
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/control/progress.js
+23 -2
View File
@@ -3,6 +3,7 @@ import {
clamp,
secondToTime,
setStyle,
setStyles,
getStyle,
query,
addClass,
@@ -30,15 +31,16 @@ export default function progress(option) {
option: { highlight, theme },
events: { proxy },
player,
icons,
} = art;
return {
...option,
html: `
<div class="art-control-progress-inner">
<div class="art-progress-loaded"></div>
<div class="art-progress-played" style="background: ${theme}"></div>
<div class="art-progress-played"></div>
<div class="art-progress-highlight"></div>
<div class="art-progress-indicator" style="background: ${theme}"></div>
<div class="art-progress-indicator"></div>
<div class="art-progress-tip art-tip"></div>
</div>
`,
@@ -50,6 +52,25 @@ export default function progress(option) {
const $indicator = query('.art-progress-indicator', $control);
const $tip = query('.art-progress-tip', $control);
setStyle($played, 'backgroundColor', theme);
if (icons.indicator) {
append($indicator, icons.indicator);
setStyles($indicator, {
top: '-6px',
left: '-8px',
width: '16px',
height: '16px',
});
} else {
setStyles($indicator, {
top: '-5px',
left: '-7px',
width: '14px',
height: '14px',
backgroundColor: theme,
});
}
function showHighlight(event) {
const { width } = getPosFromEvent(art, event);
const { text } = event.target.dataset;
packages/artplayer/src/plugins/miniProgressBar.js
+2 -2
View File
@@ -14,10 +14,10 @@ export default function miniProgressBar(art) {
right: 0,
bottom: 0,
height: '2px',
background: theme,
backgroundColor: theme,
},
mounted($progressBar) {
art.on('control', value => {
art.on('control', (value) => {
$progressBar.style.display = value ? 'none' : 'block';
});
packages/artplayer/src/style/bottom.scss
+11 -6
View File
@@ -77,16 +77,21 @@
.art-progress-indicator {
display: none;
align-items: center;
justify-content: center;
position: absolute;
z-index: 40;
top: -5px;
left: -6.5px;
width: 13px;
height: 13px;
border-radius: 50%;
.art-icon {
width: 100%;
height: 100%;
pointer-events: none;
user-select: none;
}
&.art-show-indicator {
display: block;
display: flex;
}
}
@@ -114,7 +119,7 @@
height: 100%;
.art-progress-indicator,
.art-progress-tip {
display: block;
display: flex;
}
}
}
packages/artplayer/src/style/contextmenu.scss
+1 -1
View File
@@ -8,7 +8,7 @@
top: 10px;
min-width: 200px;
padding: 5px 0;
background: rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.9);
border-radius: 3px;
.art-contextmenu {
packages/artplayer/src/style/fullscreenRotate.scss
+1 -1
View File
@@ -7,5 +7,5 @@
top: 0;
right: 0;
bottom: 0;
background: #000;
background-color: #000;
}
packages/artplayer/src/style/info.scss
+1 -1
View File
@@ -12,7 +12,7 @@
font-size: 12px;
font-family: Noto Sans CJK SC DemiLight, Roboto, Segoe UI, Tahoma, Arial, Helvetica, sans-serif;
-webkit-font-smoothing: antialiased;
background: rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.9);
.art-info-item {
display: flex;
packages/artplayer/src/style/mini.scss
+1 -1
View File
@@ -9,7 +9,7 @@
height: 35px;
line-height: 35px;
color: #fff;
background: rgba(0, 0, 0, 0.5);
background-color: rgba(0, 0, 0, 0.5);
align-items: center;
justify-content: space-between;
opacity: 0;
packages/artplayer/src/style/notice.scss
+1 -1
View File
@@ -13,7 +13,7 @@
display: inline-block;
padding: 5px 10px;
color: #fff;
background: rgba(0, 0, 0, 0.6);
background-color: rgba(0, 0, 0, 0.6);
border-radius: 3px;
}
}
packages/artplayer/src/style/selector.scss
+1 -1
View File
@@ -9,7 +9,7 @@
padding: 5px 0;
text-align: center;
color: #fff;
background: rgba(0, 0, 0, 0.8);
background-color: rgba(0, 0, 0, 0.8);
border-radius: 3px;
.art-selector-item {
height: 30px;
packages/artplayer/src/style/setting.scss
+3 -3
View File
@@ -22,7 +22,7 @@
width: 300px;
height: 100%;
font-size: 12px;
background: rgba(0, 0, 0, 0.9);
background-color: rgba(0, 0, 0, 0.9);
transition: all 0.2s ease-in-out;
overflow: auto;
@@ -51,7 +51,7 @@
border: none;
outline: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
&:active {
@@ -93,7 +93,7 @@
border: none;
outline: none;
color: #fff;
background: rgba(255, 255, 255, 0.2);
background-color: rgba(255, 255, 255, 0.2);
border-radius: 2px;
text-align: center;
}