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

Setting (#502)

Browse Source 
* init

* remove updateStyle

* Revert "remove updateStyle"

This reverts commit 053654ae72.

* add --art-tip-background
This commit is contained in:
Harvey Zack authored and GitHub committed 2023-04-18 16:02:00 +08:00
1 parent 4b9e8dfc9d
commit 058325d3cc
13 files changed
+32 -37
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

packages/artplayer/src/setting/index.js
+3 -7
View File
@@ -9,6 +9,7 @@ import {
append,
addClass,
setStyle,
isMobile,
inverseClass,
createElement,
includeFromEvent,
@@ -60,9 +61,7 @@ export default class Setting extends Component {
const item = option[index];
item.$parentItem = parentItem;
item.$parentList = parentList;
if (item.selector) {
Setting.makeRecursion(item.selector, item, option);
}
Setting.makeRecursion(item.selector || [], item, option);
}
return option;
}
@@ -362,7 +361,7 @@ export default class Setting extends Component {
template: { $player, $setting },
} = this.art;
if (controls.setting) {
if (controls.setting && !isMobile) {
const settingWidth = width || constructor.SETTING_WIDTH;
const { left: controlLeft, width: controlWidth } = controls.setting.getBoundingClientRect();
const { left: playerLeft, width: playerWidth } = $player.getBoundingClientRect();
@@ -374,9 +373,6 @@ export default class Setting extends Component {
setStyle($setting, 'left', `${settingLeft}px`);
setStyle($setting, 'right', 'auto');
}
} else {
setStyle($setting, 'left', 'auto');
setStyle($setting, 'right', '10px');
}
}
packages/artplayer/src/style/bottom.less
+1 -1
View File
@@ -8,7 +8,7 @@
gap: var(--art-bottom-gap);
bottom: var(--art-bottom-offset);
height: var(--art-bottom-height);
padding: 0 10px;
padding: 0 var(--art-padding);
opacity: 0;
pointer-events: none;
transition: all var(--art-duration) ease;
packages/artplayer/src/style/contextmenu.less
+1 -1
View File
@@ -7,7 +7,7 @@
padding: 5px 0;
border-radius: 3px;
font-size: 12px;
background-color: var(--art-background);
background-color: var(--art-widget-background);
min-width: var(--art-contextmenus-min-width);
.art-contextmenu {
packages/artplayer/src/style/info.less
+3 -3
View File
@@ -2,13 +2,13 @@
.art-info {
display: none;
position: absolute;
left: 10px;
top: 10px;
left: var(--art-padding);
top: var(--art-padding);
z-index: 100;
padding: 10px;
font-size: 12px;
border-radius: 3px;
background-color: var(--art-background);
background-color: var(--art-widget-background);
.art-info-panel {
display: flex;
packages/artplayer/src/style/notice.less
+5 -7
View File
@@ -1,12 +1,10 @@
.art-video-player {
.art-notice {
display: none;
position: absolute;
z-index: 80;
left: 0;
top: 0;
padding: 10px;
width: 100%;
.art-full(80);
height: auto;
bottom: auto;
padding: var(--art-padding);
pointer-events: none;
.art-notice-inner {
@@ -14,7 +12,7 @@
padding: 5px;
line-height: 1;
border-radius: 3px;
background-color: var(--art-background);
background-color: var(--art-tip-background);
}
}
packages/artplayer/src/style/plugins.less
+3 -3
View File
@@ -15,7 +15,7 @@
height: 34px;
width: 34px;
border-radius: 50%;
background-color: rgba(0, 0, 0, 0.5);
background-color: var(--art-tip-background);
}
.art-layer-auto-playback {
@@ -23,12 +23,12 @@
gap: 10px;
align-items: center;
position: absolute;
left: 10px;
border-radius: 3px;
padding: 10px;
line-height: 1;
left: var(--art-padding);
bottom: calc(var(--art-control-height) + var(--art-bottom-gap) + 10px);
background-color: var(--art-background);
background-color: var(--art-widget-background);
.art-auto-playback-close {
.art-center();
packages/artplayer/src/style/progress.less
+2 -2
View File
@@ -89,7 +89,7 @@
font-size: 12px;
border-radius: 3px;
white-space: nowrap;
background-color: var(--art-background);
background-color: var(--art-tip-background);
}
}
@@ -107,7 +107,7 @@
left: 0;
border-radius: 3px;
pointer-events: none;
background-color: var(--art-background);
background-color: var(--art-widget-background);
box-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.2), 0 1px 2px -1px rgb(0 0 0 / 0.2);
}
packages/artplayer/src/style/selector.less
+1 -1
View File
@@ -9,7 +9,7 @@
position: absolute;
border-radius: 3px;
bottom: var(--art-control-height);
background-color: var(--art-background);
background-color: var(--art-widget-background);
opacity: 0;
transform: translateY(10px);
pointer-events: none;
packages/artplayer/src/style/setting.less
+4 -2
View File
@@ -4,11 +4,13 @@
flex-direction: column;
position: absolute;
z-index: 90;
left: 0;
left: auto;
overflow: hidden;
border-radius: 3px;
right: var(--art-padding);
bottom: var(--art-control-height);
transition: all var(--art-duration) ease;
background-color: var(--art-background);
background-color: var(--art-widget-background);
.art-setting-panel {
display: none;
packages/artplayer/src/style/variables.less
+3 -1
View File
@@ -1,6 +1,7 @@
.art-video-player {
--art-theme: #f00;
--art-duration: 0.2s;
--art-padding: 10px;
--art-state-size: 80px;
--art-state-opacity: 0.8;
--art-subtitle-font-size: 20px;
@@ -19,7 +20,8 @@
--art-volume-handle-size: 14px;
--art-indicator-size: 16px;
--art-subtitle-border: #000;
--art-background: rgba(0, 0, 0, 0.85);
--art-widget-background: rgba(0, 0, 0, 0.85);
--art-tip-background: rgba(0, 0, 0, 0.5);
--art-settings-icon-size: 24px;
--art-progress-color: rgba(255, 255, 255, 0.2);
--art-hover-color: rgba(255, 255, 255, 0.5);
packages/artplayer/src/style/volume.less
+1 -1
View File
@@ -28,7 +28,7 @@
padding: 10px 0 12px;
border-radius: 3px;
background-color: var(--art-background);
background-color: var(--art-widget-background);
.art-volume-slider {
flex: 1;