MinPluto/poke-on-astro-experiment
Archived
1
Fork 0
Code Issues Pull requests Activity

If the thumbnail fails to load, replace with Poke placeholder

Browse source
This commit is contained in:
Korbs 2024-06-28 00:18:16 -04:00
parent b2ed5701f6
commit 0b4457ccb4
No known key found for this signature in database
1 changed files with 10 additions and 1 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
src/components/common/VideoItem.astro
View file

@ -25,7 +25,12 @@ const ViewsFormat = ViewsConversion.format(Views)
<a href={'/watch?v=' + ID} class="video-item" data-astro-reload> <a href={'/watch?v=' + ID} class="video-item" data-astro-reload>
<div class="video-item-thumbnail"> <div class="video-item-thumbnail">
<img src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/> <img onload=`
if (this.naturalWidth == '120') {
src='https://md.sudovanilla.org/images/pt-th-fl.png'
}
`
src={'https://i.ytimg.com/vi/' + ID + '/maxresdefault.jpg'}/>
</div> </div>
<div class="video-item-details"> <div class="video-item-details">
<p id="vi-title">{Title}</p> <p id="vi-title">{Title}</p>
@ -34,6 +39,10 @@ const ViewsFormat = ViewsConversion.format(Views)
</div> </div>
</a> </a>
<script is:inline>
document.querySelectorAll("img[src='https://i.ytimg.com/vi/undefined/maxresdefault.jpg']").forEach(img => {img.src='https://md.sudovanilla.org/images/pt-th-fl.png'})
</script>
<style lang="scss"> <style lang="scss">
.video-item { .video-item {
display: flex; display: flex;