Creepso/miru
1
0
Fork 0
mirror of https://github.com/ThaUnknown/miru.git synced 2026-04-20 02:02:06 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

ui work progress, skeleton loader polishing

Browse source
This commit is contained in:
ThaUnknown 2021-01-05 14:11:14 +01:00
parent 4841bc4abe
commit 9406130b57
4 changed files with 346 additions and 127 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

81
app/css/misc.css
View file

@ -1,10 +1,11 @@
:root{
--dm-link-text-color: var(--dm-muted-text-color)!important;
--dm-link-text-color-hover: var(--dm-text-color)!important;
:root {
--dm-link-text-color: var(--dm-muted-text-color) !important;
--dm-link-text-color-hover: var(--dm-text-color) !important;
--base-html-font-size: 50%;
--base-html-font-size-1600: 62.5%;
--base-html-font-size-1920: 70%;
--tooltip-width: 17rem;
--card-border-width: 0;
}
body {
@ -54,10 +55,24 @@ input:invalid {
content: " • "
}
@keyframes load-in {
from {
bottom: -1.2rem;
transform: scale(.95);
}
to {
bottom: 0;
transform: scale(1);
}
}
.gallery .card {
animation: .3s ease 0s 1 load-in;
cursor: pointer;
overflow: hidden;
transition: transform .2s ease
transition: transform .2s ease;
box-shadow: rgba(0, 4, 12, .3) 0px 7px 15px, rgba(0, 4, 12, .05) 0px 4px 4px;
}
.gallery .card:hover {
@ -79,13 +94,14 @@ input:invalid {
background: linear-gradient(270deg, rgba(37, 40, 44, 1) 0%, rgba(37, 40, 44, 1) 15%, rgba(37, 40, 44, .45) 70%, rgba(37, 40, 44, 0) 100%);
}
#home.auth #homeContinue,
#home.auth #homePlanning {
display: grid !important;
#home.noauth #homeContinue,
#home.noauth #homePlanning {
display: none !important;
}
#home.auth #homeContinueMore,
#home.auth #homePlanningMore {
display: flex !important;
#home.noauth #homeContinueMore,
#home.noauth #homePlanningMore {
display: none !important;
}
.gallery {
@ -96,6 +112,22 @@ input:invalid {
grid-gap: 2rem;
padding: 4rem
}
#browse.loading .gallery{
overflow-y: initial !important;
}
#browse.loading{
height: 50rem !important;
position: relative;
overflow-y: hidden !important;
}
#browse.loading:after {
content: "";
position: absolute;
bottom: 0;
height: 10rem;
width: 100%;
background: linear-gradient(0deg, rgba(37, 40, 44, 1) 0%, rgba(37, 40, 44, 1) 15%, rgba(37, 40, 44, .45) 70%, rgba(37, 40, 44, 0) 100%);
}
.gallery-sm {
grid-template-columns: repeat(auto-fill, 30rem);
@ -118,6 +150,10 @@ section:target {
height: 100%
}
.h-10 {
height: 1rem !important
}
.material-icons {
font-size: 18px;
align-self: center
@ -127,6 +163,16 @@ section:target {
font-family: Arial;
}
@keyframes load {
from {
left: -150px;
}
to {
left: 100%;
}
}
.skeloader {
position: relative;
overflow: hidden;
@ -134,15 +180,12 @@ section:target {
.skeloader::before {
content: '';
display: block;
position: absolute;
left: -150px;
top: 0;
height: 100%;
width: 150px;
background: linear-gradient(to right, transparent 0%, #25282c 50%, transparent 100%);
animation: load 1s cubic-bezier(0.4, 0.0, 0.2, 1);
animation-iteration-count: infinite;
animation: load 1s infinite cubic-bezier(0.4, 0.0, 0.2, 1);
}
#trailer[src=""] {
@ -221,14 +264,4 @@ nav {
#oauth::after {
white-space: pre !important
}
@keyframes load {
from {
left: -150px;
}
to {
left: 100%;
}
}

246
app/index.html
View file

@ -139,19 +139,7 @@
<a href="#player" class="navbar-brand mt-5 ml-10">
<img src="logo_cut.png" alt="logo">
</a>
<a href="#browse" class="navbar-brand pointer ml-auto" data-toggle="tooltip" data-placement="bottom"
data-title="Anime Watch List" id="navList">
<span class="material-icons font-size-20">list_alt</span>
</a>
<a href="#releases" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
data-title="Latest Releases Feed" id="navNew">
<span class="material-icons font-size-20">fiber_new</span>
</a>
<a href="#browse" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
data-title="Currently Trending Anime" id="navTrending">
<span class="material-icons font-size-20">trending_up</span>
</a>
<a href="#downloads" class="navbar-brand pointer" data-toggle="tooltip" data-placement="bottom"
<a href="#downloads" class="navbar-brand pointer ml-auto" data-toggle="tooltip" data-placement="bottom"
data-title="Your Downloads" id="navDownloads">
<span class="material-icons font-size-20">get_app</span>
</a>
@ -270,38 +258,234 @@
<div class="gallery browse h-full overflow-y-auto">
</div>
</section>
<section id="home" class="flex-column border-top">
<div class="h-full overflow-y-auto">
<a class="d-none p-20 pb-5 pt-10 align-items-end pointer text-decoration-none" id="homeContinueMore" data-function="continue" href="#browse">
<section id="home" class="flex-column border-top overflow-y-auto">
<div class="h-full p-10">
<a class="d-flex px-20 align-items-end pointer text-decoration-none" id="homeContinueMore"
data-function="continue" href="#browse">
<div class="pl-10 font-size-24 font-weight-semi-bold">Continue Watching</div>
<div class="pr-10 ml-auto font-size-16">View More</div>
<div class="pr-10 ml-auto font-size-12">View More</div>
</a>
<div class="gallery d-none w-full overflow-x-hidden position-relative" id="homeContinue" data-function="continue">
<div class="gallery pt-10 pb-20 w-full overflow-x-hidden position-relative" id="homeContinue"
data-function="continue">
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
</div>
<a class="d-flex p-20 pb-5 pt-10 align-items-end pointer text-decoration-none" id="homeReleasesMore" data-function="releases" href="#browse">
<a class="d-flex px-20 align-items-end pointer text-decoration-none" id="homeReleasesMore"
data-function="releases" href="#browse">
<div class="pl-10 font-size-24 font-weight-semi-bold">New Releases</div>
<div class="pr-10 ml-auto font-size-16">View More</div>
<div class="pr-10 ml-auto font-size-12">View More</div>
</a>
<div class="gallery w-full overflow-x-hidden position-relative" id="homeReleases" data-function="releases">
<div class="gallery pt-10 pb-20 w-full overflow-x-hidden position-relative" id="homeReleases"
data-function="releases">
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
</div>
<a class="d-none p-20 pb-5 pt-10 align-items-end pointer text-decoration-none" id="homePlanningMore" data-function="planning" href="#browse">
<a class="d-flex px-20 align-items-end pointer text-decoration-none" id="homePlanningMore"
data-function="planning" href="#browse">
<div class="pl-10 font-size-24 font-weight-semi-bold">Your List</div>
<div class="pr-10 ml-auto font-size-16">View More</div>
<div class="pr-10 ml-auto font-size-12">View More</div>
</a>
<div class="gallery d-none w-full overflow-x-hidden position-relative" id="homePlanning" data-function="planning">
<div class="gallery pt-10 pb-20 w-full overflow-x-hidden position-relative" id="homePlanning"
data-function="planning">
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
</div>
<a class="d-flex p-20 pb-5 pt-10 align-items-end pointer text-decoration-none" id="homeTrendingMore" data-function="trending" href="#browse">
<a class="d-flex px-20 align-items-end pointer text-decoration-none" id="homeTrendingMore"
data-function="trending" href="#browse">
<div class="pl-10 font-size-24 font-weight-semi-bold">Trending Now</div>
<div class="pr-10 ml-auto font-size-16">View More</div>
<div class="pr-10 ml-auto font-size-12">View More</div>
</a>
<div class="gallery w-full overflow-x-hidden position-relative" id="homeTrending" data-function="trending">
<div class="gallery pt-10 pb-20 w-full overflow-x-hidden position-relative" id="homeTrending"
data-function="trending">
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
<div class="card m-0 p-0">
<div class="row h-full">
<div class="col-4 skeloader">
</div>
<div class="col-8 bg-very-dark px-15 py-10">
<p class="skeloader w-300 h-25 rounded bg-dark">
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
</div>
</div>
</div>
</section>
<section id="releases" class="flex-column border-top">
<div class="gallery releases h-full overflow-y-auto">
</div>
</section>
<section id="downloads" class="flex-column border-top">
<div class="gallery downloads h-full overflow-y-auto">
</div>

103
app/js/animeHandler.js
View file

@ -62,30 +62,7 @@ function searchBox() { // make searchbox behave nicely
document.location.hash = "#browse"
}
//events
navNew.onclick = () => { releasesRss() }
navTrending.onclick = () => { searchAnime() }
navNowPlaying.onclick = () => { viewAnime(playerData.nowPlaying[0]) }
navList.onclick = async () => { //user watchlist
let browse = document.querySelector(".browse")
browse.textContent = '';
browse.appendChild(skeletonCard)
let res = await alRequest({ method: "UserLists", id: alID }),
entries = res.data.MediaListCollection.lists[0].entries.concat(res.data.MediaListCollection.lists[1].entries),
frag = document.createDocumentFragment()
try {
entries.forEach(media => {
let template = cardCreator(media.media)
template.onclick = () => {
viewAnime(media.media)
}
frag.appendChild(template)
})
} catch (e) {
console.error(e)
}
browse.textContent = '';
browse.appendChild(frag)
}
//AL lookup logic
async function alRequest(opts) {
let query,
@ -358,7 +335,7 @@ function viewAnime(media) {
template.innerHTML = `
<div class="row h-full">
<div class="col-4">
<img src="${edge.node.coverImage.medium}"
<img loading="lazy" src="${edge.node.coverImage.medium}"
class="cover-img w-full h-full">
</div>
<div class="col-8 h-full card-grid">
@ -405,7 +382,7 @@ function viewAnime(media) {
let temp = document.createElement("div")
temp.classList.add("position-relative", "w-250", "rounded", "mr-10", "overflow-hidden", "pointer")
temp.innerHTML = `
<img src="${episode.thumbnail}" class="w-full h-full">
<img loading="lazy" src="${episode.thumbnail}" class="w-full h-full">
<div class="position-absolute ep-title w-full p-10 text-truncate bottom-0">${episode.title}</div>`
temp.onclick = () => { nyaaSearch(media, episodeRx.exec(episode.title)[1]); halfmoon.toggleModal("view") }
frag.appendChild(temp)
@ -456,7 +433,7 @@ function cardCreator(media, name, episode) {
template.innerHTML = `
<div class="row h-full" style="--color:${media.coverImage.color || "#1890ff"};">
<div class="col-4">
<img src="${media.coverImage.extraLarge || ""}"
<img loading="lazy" src="${media.coverImage.extraLarge || ""}"
class="cover-img w-full h-full">
</div>
<div class="col-8 h-full card-grid">
@ -481,12 +458,14 @@ function cardCreator(media, name, episode) {
} else {
template.innerHTML = `
<div class="row h-full">
<div class="col-4 w-full bg-very-dark skeloader">
<div class="col-4 skeloader">
</div>
<div class="col-8 h-full card-grid skeloader">
<div class="px-15 py-10">
<h5 class="m-0 text-capitalize font-weight-bold">${name ? name + " - " + episode : ""}</h5>
</div>
<div class="col-8 bg-very-dark px-15 py-10">
${name ? `<h5 class="m-0 text-capitalize font-weight-bold pb-10">${name + " - " + episode}</h5>` :
`<p class="skeloader w-300 h-25 rounded bg-dark">`}
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
<p class="skeloader w-150 h-10 rounded bg-dark"></p>
</p>
</div>
</div>
`
@ -523,8 +502,6 @@ async function nyaaRss(media, episode) {
let frag = document.createDocumentFragment(),
ep = (media.status == "FINISHED" && settings.torrent9) ? `"01-${media.episodes}"|"01~${media.episodes}"|"batch"|"Batch"|"complete"|"Complete"|"+${episode}+"|"+${episode}v"` : `"+${episode}+"|"+${episode}v"`,
url = new URL(`https://miru.kirdow.com/request/?url=https://nyaa.si/?page=rss$c=1_2$f=${settings.torrent3 == true ? 2 : 0}$s=seeders$o=desc$q=(${[...new Set(Object.values(media.title).concat(media.synonyms).filter(name => name != null))].join(")|(")})${ep}"${settings.torrent1}"`)
// console.log(`"${[...new Set(Object.values(media.title).concat(media.synonyms).filter(name => name != null))].join("\"|\"")}"${ep}"${settings.torrent1}"`)
// console.log(`https://miru.kirdow.com/request/?url=https://nyaa.si/?page=rss$c=1_2$f=${settings.torrent3 == true ? 2 : 0}$s=seeders$o=desc$q=(${[...new Set(Object.values(media.title).concat(media.synonyms).filter(name => name != null))].join(")|(")})${ep}"${settings.torrent1}"`)
res = await fetch(url)
await res.text().then((xmlTxt) => {
try {
@ -576,9 +553,8 @@ const nameParseRegex = {
let store = JSON.parse(localStorage.getItem("store")) || {},
lastResult
async function releasesRss() {
async function releasesRss(limit) {
let frag = document.createDocumentFragment(),
releases = document.querySelector(".releases"),
url
if (Object.values(torrent4list.options).filter(item => item.value == settings.torrent4)[0]) {
//add my own cors proxy for erai
@ -591,12 +567,10 @@ async function releasesRss() {
try {
let doc = DOMPARSER(xmlTxt, "text/xml")
if (lastResult != doc) {
releases.textContent = '';
releases.appendChild(skeletonCard)
lastResult = doc
let items = doc.querySelectorAll("item")
for (let item of items) {
let i = item.querySelector.bind(item),
for (let l = 0; l < (limit || items.length); l++) {
let i = items[l].querySelector.bind(items[l]),
regexParse = nameParseRegex.simple.exec(i("title").textContent),
episode
if (!regexParse[2]) {
@ -615,43 +589,40 @@ async function releasesRss() {
}
frag.appendChild(template)
}
releases.textContent = '';
releases.appendChild(frag)
}
} catch (e) {
console.error(e)
}
})
localStorage.setItem("store", JSON.stringify(store))
return frag
}
//latest releases auto-update
setInterval(() => {
if (document.location.hash == "#releases") {
releasesRss()
}
}, 30000);
// setInterval(() => {
// if (document.location.hash == "#releases") {
// releasesRss()
// }
// }, 30000);
let alID // login icon
async function loadAnime() {
await searchAnime()
loadOfflineStorage()
releasesRss()
}
loadAnime()
let alID // login icon
if (localStorage.getItem("ALtoken")) {
alRequest({ method: "Viewer" }).then(result => {
oauth.removeAttribute("href")
oauth.setAttribute("data-title", `${result.data.Viewer.name}\nClick To Logout`)
oauth.innerHTML = `<img src="${result.data.Viewer.avatar.medium}" class="m-0">`
home.classList.add("auth")
oauth.onclick = () => {
localStorage.removeItem("ALtoken");
location.reload()
}
alID = result.data.Viewer.id
if (localStorage.getItem("ALtoken")) {
alRequest({ method: "Viewer" }).then(result => {
oauth.removeAttribute("href")
oauth.setAttribute("data-title", `${result.data.Viewer.name}\nClick To Logout`)
oauth.innerHTML = `<img src="${result.data.Viewer.avatar.medium}" class="m-0">`
oauth.onclick = () => {
localStorage.removeItem("ALtoken");
location.reload()
}
alID = result.data.Viewer.id
loadHomePage()
})
} else {
loadHomePage()
})
} else {
loadHomePage()
home.classList.add("noauth")
}
}
loadAnime()

43
app/js/interface.js
View file

@ -3,17 +3,29 @@ async function loadHomePage() {
homePreviewElements = [homeContinue, homeReleases, homePlanning, homeTrending],
homeLoadFunctions = {
continue: async function (page) {
let gallery = document.querySelector(".browse")
if (!page) gallerySkeleton(gallery)
let res = await alRequest({ method: "UserLists", status_in: "CURRENT", id: alID, page: page || 1 })
galleryAppend({ media: res.data.Page.mediaList.map(i => i.media), gallery: document.querySelector(".browse"), method: "continue", page: page || 1 })
galleryAppend({ media: res.data.Page.mediaList.map(i => i.media), gallery: gallery, method: "continue", page: page || 1 })
},
releases: async function () {
let gallery = document.querySelector(".browse")
gallerySkeleton(gallery)
let frag = await releasesRss()
gallery.textContent = ''
browse.classList.remove("loading")
gallery.appendChild(frag)
opts.gallery.scrollTop = 0
},
planning: async function (page) {
let gallery = document.querySelector(".browse")
if (!page) gallerySkeleton(gallery)
let res = await alRequest({ method: "UserLists", status_in: "PLANNING", id: alID, page: page || 1 })
galleryAppend({ media: res.data.Page.mediaList.map(i => i.media), gallery: document.querySelector(".browse"), method: "planning", page: page || 1 })
},
trending: async function (page) {
let gallery = document.querySelector(".browse")
if (!page) gallerySkeleton(gallery)
let res = await alRequest({ method: "Trending", id: alID, page: page || 1 })
galleryAppend({ media: res.data.Page.media, gallery: document.querySelector(".browse"), method: "trending", page: page || 1 })
}
@ -24,7 +36,9 @@ async function loadHomePage() {
galleryAppend({ media: res.data.Page.mediaList.map(i => i.media), gallery: homeContinue })
},
releases: async function () {
let frag = await releasesRss(4)
homeReleases.textContent = ''
homeReleases.appendChild(frag)
},
planning: async function () {
let res = await alRequest({ method: "UserLists", status_in: "PLANNING", id: alID, perPage: 4 })
@ -35,8 +49,20 @@ async function loadHomePage() {
galleryAppend({ media: res.data.Page.media, gallery: homeTrending })
}
},
loadTimeout
loadTimeout,
gallerySkeletonFrag = function(){
let frag = document.createDocumentFragment()
for (let i = 0; i < 10; i++) {
frag.appendChild(cardCreator())
}
return frag
}
function gallerySkeleton(gallery) {
gallery.textContent = ''
browse.classList.add("loading")
gallery.appendChild(gallerySkeletonFrag())
}
function galleryAppend(opts) {
//TODO: add skeleton loading
function appendFrag(media) {
@ -54,8 +80,12 @@ async function loadHomePage() {
homeLoadFunctions[opts.method](opts.page + 1)
}
})
if (!opts.page || opts.page == 1) opts.gallery.textContent = '';
if (!opts.page || opts.page == 1) {
opts.gallery.textContent = '';
browse.classList.remove("loading")
}
appendFrag(opts.media)
opts.gallery.scrollTop = 0
}
for (let item of homePreviewElements) {
@ -66,4 +96,5 @@ async function loadHomePage() {
homeLoadFunctions[this.dataset.function]()
})
}
}
}