nnwhen/scritch-player
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

add new theme options

Browse source 
- overlayTextColor
- overlayBackgroundColor
- hideInfoDropdown
This commit is contained in:
torcado 2023-11-03 01:32:13 -04:00
parent 97e3945b41
commit cc932783bb
1 changed files with 35 additions and 11 deletions
Download patch file Download diff file Expand all files Collapse all files

46
index.html
View file

@ -26,6 +26,8 @@
--previewStripeColor1: #3f3f3f; --previewStripeColor1: #3f3f3f;
--previewStripeColor2: #2c2c2c; --previewStripeColor2: #2c2c2c;
--linkColor: #838383; --linkColor: #838383;
--overlayTextColor: var(--primaryTextColor);
--overlayBackgroundColor: rgb(0,0,0,0.5);
--font: sans-serif; --font: sans-serif;
} }
@ -216,7 +218,8 @@
backdrop-filter: blur(3px); backdrop-filter: blur(3px);
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, 0.5); color: var(--overlayTextColor);
background-color: var(--overlayBackgroundColor);
border-radius: 0; border-radius: 0;
display: flex; display: flex;
text-align: center; text-align: center;
@ -692,6 +695,9 @@
.track.active .toggleInfo { .track.active .toggleInfo {
color: var(--primaryColor); color: var(--primaryColor);
} }
.hide-info .track .toggleInfo {
cursor: auto;
}
.track .infoContainer { .track .infoContainer {
width: 100%; width: 100%;
@ -701,6 +707,9 @@
height: 0px !important; height: 0px !important;
overflow: hidden; overflow: hidden;
} }
.hide-info .track .infoContainer {
display: none;
}
.track .info { .track .info {
padding: 10px; padding: 10px;
@ -860,16 +869,18 @@
function updateTheme(theme){ function updateTheme(theme){
config.theme = theme; config.theme = theme;
let rootEl = document.documentElement; let rootEl = document.documentElement;
if(theme.primaryColor) rootEl.style.setProperty('--primaryColor', theme.primaryColor); if(theme.primaryColor) rootEl.style.setProperty('--primaryColor', theme.primaryColor);
if(theme.primaryAltColor) rootEl.style.setProperty('--primaryAltColor', theme.primaryAltColor); if(theme.primaryAltColor) rootEl.style.setProperty('--primaryAltColor', theme.primaryAltColor);
if(theme.primaryTextColor) rootEl.style.setProperty('--primaryTextColor', theme.primaryTextColor); if(theme.primaryTextColor) rootEl.style.setProperty('--primaryTextColor', theme.primaryTextColor);
if(theme.primaryAltTextColor) rootEl.style.setProperty('--primaryAltTextColor', theme.primaryAltTextColor); if(theme.primaryAltTextColor) rootEl.style.setProperty('--primaryAltTextColor', theme.primaryAltTextColor);
if(theme.secondaryColor) rootEl.style.setProperty('--secondaryColor', theme.secondaryColor); if(theme.secondaryColor) rootEl.style.setProperty('--secondaryColor', theme.secondaryColor);
if(theme.highlightColor) rootEl.style.setProperty('--highlightColor', theme.highlightColor); if(theme.highlightColor) rootEl.style.setProperty('--highlightColor', theme.highlightColor);
if(theme.backgroundColor) rootEl.style.setProperty('--backgroundColor', theme.backgroundColor); if(theme.backgroundColor) rootEl.style.setProperty('--backgroundColor', theme.backgroundColor);
if(theme.previewStripeColor1) rootEl.style.setProperty('--previewStripeColor1', theme.previewStripeColor1); if(theme.previewStripeColor1) rootEl.style.setProperty('--previewStripeColor1', theme.previewStripeColor1);
if(theme.previewStripeColor2) rootEl.style.setProperty('--previewStripeColor2', theme.previewStripeColor2); if(theme.previewStripeColor2) rootEl.style.setProperty('--previewStripeColor2', theme.previewStripeColor2);
if(theme.linkColor) rootEl.style.setProperty('--linkColor', theme.linkColor); if(theme.linkColor) rootEl.style.setProperty('--linkColor', theme.linkColor);
if(theme.overlayTextColor) rootEl.style.setProperty('--overlayTextColor', theme.overlayTextColor);
if(theme.overlayBackgroundColor) rootEl.style.setProperty('--overlayBackgroundColor', theme.overlayBackgroundColor);
if(theme.layoutStyle){ if(theme.layoutStyle){
mainContainerEl.classList.remove('vertical', 'horizontal'); mainContainerEl.classList.remove('vertical', 'horizontal');
mainContainerEl.classList.add(theme.layoutStyle); mainContainerEl.classList.add(theme.layoutStyle);
@ -890,6 +901,11 @@
document.getElementById('audio').classList.remove('native'); document.getElementById('audio').classList.remove('native');
mediaVideoEl.removeAttribute('controls'); mediaVideoEl.removeAttribute('controls');
} }
if(theme.hideInfoDropdown){
mainContainerEl.classList.add('hide-info');
} else {
mainContainerEl.classList.remove('hide-info');
}
mediaContainerEl.style.maxWidth = theme.coverSize + 'px'; mediaContainerEl.style.maxWidth = theme.coverSize + 'px';
mediaContainerEl.style.maxHeight = theme.coverSize + 'px'; mediaContainerEl.style.maxHeight = theme.coverSize + 'px';
mediaColumnEl.style.maxWidth = theme.coverSize + 'px'; mediaColumnEl.style.maxWidth = theme.coverSize + 'px';
@ -1167,6 +1183,14 @@
} }
} }
function setCover(cover, size){
if(cover){
config.cover = cover;
size && (config.coverSize = size);
loadCover(cover)
}
}
playerEl.addEventListener('canplay', e => { playerEl.addEventListener('canplay', e => {
removeLoading(currentEntry); removeLoading(currentEntry);
if(currentEntry.needsDuration){ if(currentEntry.needsDuration){