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

Add per-track album art

Browse source
This commit is contained in:
torcado 2023-09-28 18:50:03 -04:00
parent 315288bb75
commit 3c54513233
2 changed files with 28 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

6
README.md
View file

@ -121,6 +121,12 @@ And that's it! you can upload the files to your website, or zip them up and uplo
> The name shown for this entry in the player. > The name shown for this entry in the player.
> Defaults to the file name if not specified > Defaults to the file name if not specified
\
`cover` (optional)
> The name of the file in the /media folder for the cover image for this track.
> This will replace the main cover image when this track is playing, and uses the same theme options (such as `coverSize`)
> **NOTE:** this will have no effect when the media is a video, the video display takes precedence.
\ \
`feature` (optional) `feature` (optional)
> If `true`, sets this file as the "featured" track, which will queue up first when loading the page. > If `true`, sets this file as the "featured" track, which will queue up first when loading the page.

35
index.html
View file

@ -884,13 +884,7 @@
} }
function loadContent(data){ function loadContent(data){
if(data.cover){ loadCover(data.cover);
loadCover(data.cover);
} else {
mediaImageEl.style.width = data.theme.coverSize + 'px';
mediaImageEl.style.height = data.theme.coverSize + 'px';
mediaImageEl.style.visibility = 'hidden';
}
if(data.media) loadMedia(data.media); if(data.media) loadMedia(data.media);
} }
function updateTitle(title){ function updateTitle(title){
@ -1130,12 +1124,21 @@
} }
function loadCover(cover){ function loadCover(cover){
let src = cover; if(cover){
if(!/:\/\//.test(src)){ //if not a url let src = cover;
src = mediaDir + src; if(mediaImageEl.src == src){
return; //already loaded
}
if(!/:\/\//.test(src)){ //if not a url
src = mediaDir + src;
}
mediaImageEl.src = src;
mediaImageEl.classList.add('active');
} else {
mediaImageEl.style.width = data.theme.coverSize + 'px';
mediaImageEl.style.height = data.theme.coverSize + 'px';
mediaImageEl.style.visibility = 'hidden';
} }
mediaImageEl.src = src;
mediaImageEl.classList.add('active');
} }
playerEl.addEventListener('canplay', e => { playerEl.addEventListener('canplay', e => {
@ -1435,7 +1438,7 @@
} }
function nextTrack(manual=true){ function nextTrack(manual=true){
if(loopMode === 'track'){ if(!manual && loopMode === 'track'){
loadEntry(currentEntry); loadEntry(currentEntry);
} else if(!manual && currentEntry.remainingLoops > 0){ } else if(!manual && currentEntry.remainingLoops > 0){
currentEntry.remainingLoops--; currentEntry.remainingLoops--;
@ -1613,6 +1616,12 @@
mediaVideoEl.pause(); mediaVideoEl.pause();
mediaVideoEl.removeAttribute('src'); mediaVideoEl.removeAttribute('src');
mediaVideoEl.load(); mediaVideoEl.load();
if(entry.cover){
loadCover(entry.cover);
} else {
loadCover(config.cover);
}
} }
playerEl.src = entry.file; playerEl.src = entry.file;
entry.started = false; entry.started = false;