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

add locked tracks

Browse source
This commit is contained in:
torcado194 2022-03-29 17:53:28 -04:00
parent 596299d5ae
commit 6720921c49
1 changed files with 66 additions and 35 deletions
Download patch file Download diff file Expand all files Collapse all files

101
index.html
View file

@ -458,6 +458,9 @@
flex-wrap: wrap; flex-wrap: wrap;
border-radius: 6px; border-radius: 6px;
} }
.track.locked {
opacity: 0.35;
}
.track.active:before { .track.active:before {
content: ''; content: '';
width: 100%; width: 100%;
@ -494,7 +497,7 @@
align-items: center; align-items: center;
justify-content: center; justify-content: center;
} }
.track button:not(.loading, .error):after { .track button:not(.loading, .error, .locked):after {
content: ''; content: '';
display: block; display: block;
width: 0px; width: 0px;
@ -507,7 +510,7 @@
position: relative; position: relative;
left: 1px; left: 1px;
} }
.track button:not(.loading, .error).pause:after { .track button:not(.loading, .error, .locked).pause:after {
content: ''; content: '';
border: 0; border: 0;
border-left: 4px solid var(--secondaryColor); border-left: 4px solid var(--secondaryColor);
@ -537,6 +540,22 @@
cursor: default; cursor: default;
} }
.track button.locked {
cursor: default;
}
.track button.locked:after {
content: "\1f512";
color: var(--secondaryColor);
font-family: 'icons' !important;
speak: never;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
font-size: 20px;
}
.track .title { .track .title {
word-break: break-word; word-break: break-word;
} }
@ -855,9 +874,9 @@
tracksEl.textContent = ''; tracksEl.textContent = '';
media.forEach((entry, i) => { media.forEach((entry, i) => {
tracksEl.insertAdjacentHTML('beforeend', tracksEl.insertAdjacentHTML('beforeend',
`<div class="track"> `<div class="track ${entry.locked ? 'locked' : ''}" ${entry.locked ? 'title="This track is only available to supporters"' : ''}>
<div class="main"> <div class="main">
<button class="loading"></button> <button class="${entry.locked ? 'locked' : 'loading'}"></button>
<div class="details"> <div class="details">
<div class="number">${i+1}. </div> <div class="number">${i+1}. </div>
<div class="title">${entry.title}</div> <div class="title">${entry.title}</div>
@ -879,10 +898,8 @@
if(entry.feature){ if(entry.feature){
featureIndex = i; featureIndex = i;
} }
trackEl.querySelector('button').onclick = () => { if(entry.locked && featureIndex === i){
loadedFirst = true; featureIndex++;
autoPlay = true;
playEntry(entry);
} }
if(entry.info){ if(entry.info){
let infoContainerEl = trackEl.querySelector('.infoContainer'); let infoContainerEl = trackEl.querySelector('.infoContainer');
@ -891,32 +908,39 @@
infoContainerEl.classList.toggle('active'); infoContainerEl.classList.toggle('active');
}); });
} }
let loaderEl; if(!entry.locked){
if(entry.type === 'video'){ trackEl.querySelector('button').onclick = () => {
loaderEl = document.createElement('video'); loadedFirst = true;
} else { autoPlay = true;
loaderEl = document.createElement('audio'); playEntry(entry);
}
loaderEl.addEventListener('loadedmetadata', e => {
entry.duration = e.target.duration;
trackEl.querySelector('.duration').textContent = toHMS(entry.duration);
if(entry === currentEntry){
updateScrubPosition(0);
} }
}); let loaderEl;
loaderEl.addEventListener('error', e => { if(entry.type === 'video'){
entry.error = true; loaderEl = document.createElement('video');
entry.errorMessage = e.target.error; } else {
removeLoading(entry, true); loaderEl = document.createElement('audio');
trackEl.querySelector('button').classList.add('error', 'icon-warning'); }
trackEl.querySelector('button').setAttribute('title', 'error loading file'); loaderEl.addEventListener('loadedmetadata', e => {
}); entry.duration = e.target.duration;
loaderEl.addEventListener('canplay', e => { trackEl.querySelector('.duration').textContent = toHMS(entry.duration);
removeLoading(entry, true); if(entry === currentEntry){
}); updateScrubPosition(0);
loaderEl.volume = 0; }
loaderEl.src = entry.file; });
entry.loading = true; loaderEl.addEventListener('error', e => {
entry.error = true;
entry.errorMessage = e.target.error;
removeLoading(entry, true);
trackEl.querySelector('button').classList.add('error', 'icon-warning');
trackEl.querySelector('button').setAttribute('title', 'error loading file');
});
loaderEl.addEventListener('canplay', e => {
removeLoading(entry, true);
});
loaderEl.volume = 0;
loaderEl.src = entry.file;
entry.loading = true;
}
}); });
loadEntry(media[featureIndex]); loadEntry(media[featureIndex]);
} }
@ -1135,6 +1159,10 @@
} }
} }
function canPlay(entry){
return !entry.error && !entry.locked;
}
function nextTrack(loop=true){ function nextTrack(loop=true){
let idx = media.indexOf(currentEntry)+1; let idx = media.indexOf(currentEntry)+1;
if(!loop && idx >= media.length){ if(!loop && idx >= media.length){
@ -1142,7 +1170,7 @@
} }
let entry = media[mod(idx, media.length)]; let entry = media[mod(idx, media.length)];
let i = 0; let i = 0;
while(entry.error && i < media.length){ while(!canPlay(entry) && i < media.length){
i++; i++;
idx++; idx++;
if(!loop && idx >= media.length){ if(!loop && idx >= media.length){
@ -1159,7 +1187,7 @@
let idx = media.indexOf(currentEntry)-1; let idx = media.indexOf(currentEntry)-1;
let entry = media[mod(idx, media.length)]; let entry = media[mod(idx, media.length)];
let i = 0; let i = 0;
while(entry.error && i < media.length){ while(!canPlay(entry) && i < media.length){
i++; i++;
idx--; idx--;
entry = media[mod(idx, media.length)]; entry = media[mod(idx, media.length)];
@ -1199,6 +1227,9 @@
if(entry.error){ if(entry.error){
return; return;
} }
if(entry.locked){
return;
}
media.forEach(entry => { media.forEach(entry => {
entry.trackEl.classList.remove('active'); entry.trackEl.classList.remove('active');
entry.trackEl.querySelector('button').classList.remove('pause'); entry.trackEl.querySelector('button').classList.remove('pause');