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

add overlaid-toggle infoStyle

Browse source
This commit is contained in:
torcado194 2022-06-06 14:45:23 -04:00
parent 4557e2cc16
commit 05c8b548ce
2 changed files with 19 additions and 8 deletions
Download patch file Download diff file Expand all files Collapse all files

2
README.md
View file

@ -225,7 +225,9 @@ And that's it! you can upload the files to your website, or zip them up and uplo
`infoStyle` `infoStyle`
> Styles the track info of the currently playing track > Styles the track info of the currently playing track
> `"overlaid"` (default) text sits layered on top of the cover image > `"overlaid"` (default) text sits layered on top of the cover image
> `"overlaid-toggle"` text sits layered on top of the cover image only if the info drawer is toggled on the current track, otherwise it is hidden
> `"below"` text sits below the cover image (note: this will push down the controls and track list in a vertical layout) > `"below"` text sits below the cover image (note: this will push down the controls and track list in a vertical layout)
> `"none"` text is not displayed (other than in the info drawer under the track, when toggled)
\ \
`contentWidth` `contentWidth`

25
index.html
View file

@ -141,7 +141,7 @@
grid-row: 2/3; grid-row: 2/3;
} }
.info-overlaid #mediaColumn { .info-overlaid #mediaColumn, .info-overlaid-toggle #mediaColumn {
max-width: 480px; max-width: 480px;
height: fit-content; height: fit-content;
} }
@ -181,7 +181,7 @@
margin-top: 12px; margin-top: 12px;
} }
.info-overlaid #mediaInfoContainer { .info-overlaid #mediaInfoContainer, .info-overlaid-toggle #mediaInfoContainer {
padding: 30px; padding: 30px;
margin: 0; margin: 0;
position: absolute; position: absolute;
@ -196,10 +196,10 @@
opacity: 0; opacity: 0;
transition: opacity 0.25s; transition: opacity 0.25s;
} }
.info-overlaid #mediaInfoContainer.active { .info-overlaid #mediaInfoContainer.active, .info-overlaid-toggle #mediaInfoContainer.active {
opacity: 1; opacity: 1;
} }
.info-overlaid #mediaInfo { .info-overlaid #mediaInfo, .info-overlaid-toggle #mediaInfo {
margin: auto; margin: auto;
position: relative; position: relative;
top: 0; top: 0;
@ -800,7 +800,7 @@
document.getElementById('mainContainer').classList.add(theme.layoutStyle); document.getElementById('mainContainer').classList.add(theme.layoutStyle);
} }
if(theme.infoStyle){ if(theme.infoStyle){
document.getElementById('mainContainer').classList.remove('info-none', 'info-overlaid', 'info-below'); document.getElementById('mainContainer').classList.remove('info-none', 'info-overlaid', 'info-below', 'info-overlaid-toggle');
document.getElementById('mainContainer').classList.add('info-' + theme.infoStyle); document.getElementById('mainContainer').classList.add('info-' + theme.infoStyle);
} }
if(theme.titleStyle){ if(theme.titleStyle){
@ -958,7 +958,16 @@
let infoContainerEl = trackEl.querySelector('.infoContainer'); let infoContainerEl = trackEl.querySelector('.infoContainer');
trackEl.querySelector('.toggleInfo').addEventListener('click', (e) => { trackEl.querySelector('.toggleInfo').addEventListener('click', (e) => {
infoContainerEl.style.height = trackEl.querySelector('.info').clientHeight + 'px'; infoContainerEl.style.height = trackEl.querySelector('.info').clientHeight + 'px';
infoContainerEl.classList.toggle('active'); entry.infoToggled = infoContainerEl.classList.toggle('active');
if(config.theme.infoStyle === 'overlaid-toggle'){
if(entry.info && entry.infoToggled){
mediaInfoEl.innerHTML = entry.info;
mediaInfoContainer.classList.add('active');
} else {
mediaInfoEl.innerHTML = '';
mediaInfoContainer.classList.remove('active');
}
}
}); });
} }
if(!entry.previewFade && entry.previewFade !== false){ if(!entry.previewFade && entry.previewFade !== false){
@ -1450,7 +1459,7 @@
setLoading(currentEntry); setLoading(currentEntry);
entry.trackEl.classList.add('active'); entry.trackEl.classList.add('active');
controlsEl.querySelector('.title').innerHTML = entry.title; controlsEl.querySelector('.title').innerHTML = entry.title;
if(entry.info){ if(entry.info && (config.theme.infoStyle !== 'overlaid-toggle' || entry.infoToggled)){
mediaInfoEl.innerHTML = entry.info; mediaInfoEl.innerHTML = entry.info;
mediaInfoContainer.classList.add('active'); mediaInfoContainer.classList.add('active');
} else { } else {
@ -1480,7 +1489,7 @@
if(isNaN(secs)){ if(isNaN(secs)){
return '00:00'; return '00:00';
} }
let sec_num = Math.max(0, Math.round(secs)); //flooring is more correct, but rounding gives nicer results due to playback event buffering let sec_num = Math.max(0, Math.round(secs)); //flooring is more correct, but rounding gives nicer results due to playback event buffering
let hours = Math.floor(sec_num / 3600); let hours = Math.floor(sec_num / 3600);
let minutes = Math.floor(sec_num / 60) % 60; let minutes = Math.floor(sec_num / 60) % 60;