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

Optimize search for videos and change location for video thumbnails

Browse source
This commit is contained in:
Korbs 2024-06-28 00:35:09 -04:00
parent 0b4457ccb4
commit 532db59b6e
No known key found for this signature in database
2 changed files with 5 additions and 13 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -25,12 +25,7 @@ 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 onload=` <img src={'https://yt.sudovanilla.org/vi/' + ID + '/hqdefault.jpg'}/>
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>
@ -39,10 +34,6 @@ 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;
@ -56,6 +47,7 @@ document.querySelectorAll("img[src='https://i.ytimg.com/vi/undefined/maxresdefau
aspect-ratio: 16/9; aspect-ratio: 16/9;
object-fit: contain; object-fit: contain;
background: #cfcfcf; background: #cfcfcf;
object-fit: cover;
} }
p#vi-length { p#vi-length {
margin: -41px 8px 0px 0px; margin: -41px 8px 0px 0px;

6
src/pages/search.astro
View file

@ -13,7 +13,7 @@ const DEFAULT_SAFETWITCH_BACKEND = import.meta.env.DEFAULT_SAFETWITCH_BACKEND
// Fetch // Fetch
const Query = Astro.url.href.split("search?q=").pop() const Query = Astro.url.href.split("search?q=").pop()
const InvidiousResponse = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE + "/api/v1/search?q=" + Query) const InvidiousVideosResponse = await fetch('https://' + DEFAULT_INVIDIOUS_INSTANCE + "/api/v1/search?q=" + Query + '&type=video')
.catch((error) => { .catch((error) => {
console.log(error) console.log(error)
}) })
@ -27,7 +27,7 @@ const TwitchResponse = await fetch('https://' + DEFAULT_SAFETWITCH_BACKEND + "/a
console.log(error) console.log(error)
}) })
const InvidiousData = await InvidiousResponse.json() const InvidiousVideosData = await InvidiousVideosResponse.json()
const InvidiousChannelsData = await InvidiousChannelsResponse.json() const InvidiousChannelsData = await InvidiousChannelsResponse.json()
const TwitchData = await TwitchResponse.json() const TwitchData = await TwitchResponse.json()
--- ---
@ -77,7 +77,7 @@ const TwitchData = await TwitchResponse.json()
</div> </div>
<p>YouTube Videos</p> <p>YouTube Videos</p>
<div class="video-grid"> <div class="video-grid">
{InvidiousData.map((data) => {InvidiousVideosData.map((data) =>
<Video <Video
ID={data.videoId} ID={data.videoId}
Title={data.title} Title={data.title}