diff --git a/README.md b/README.md index 54f02e0..bba3aa0 100644 --- a/README.md +++ b/README.md @@ -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. > 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) > If `true`, sets this file as the "featured" track, which will queue up first when loading the page. diff --git a/index.html b/index.html index 3696b3f..95569dd 100644 --- a/index.html +++ b/index.html @@ -884,13 +884,7 @@ } function loadContent(data){ - if(data.cover){ - loadCover(data.cover); - } else { - mediaImageEl.style.width = data.theme.coverSize + 'px'; - mediaImageEl.style.height = data.theme.coverSize + 'px'; - mediaImageEl.style.visibility = 'hidden'; - } + loadCover(data.cover); if(data.media) loadMedia(data.media); } function updateTitle(title){ @@ -1130,12 +1124,21 @@ } function loadCover(cover){ - let src = cover; - if(!/:\/\//.test(src)){ //if not a url - src = mediaDir + src; + if(cover){ + let src = cover; + 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 => { @@ -1435,7 +1438,7 @@ } function nextTrack(manual=true){ - if(loopMode === 'track'){ + if(!manual && loopMode === 'track'){ loadEntry(currentEntry); } else if(!manual && currentEntry.remainingLoops > 0){ currentEntry.remainingLoops--; @@ -1613,6 +1616,12 @@ mediaVideoEl.pause(); mediaVideoEl.removeAttribute('src'); mediaVideoEl.load(); + + if(entry.cover){ + loadCover(entry.cover); + } else { + loadCover(config.cover); + } } playerEl.src = entry.file; entry.started = false;