RanchiMall/flotorrent
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

UI update

Browse Source 
added loader in homepage
This commit is contained in:
sairaj mote 2021-06-26 16:46:31 +05:30
parent 1356acbe3e
commit 51d60ea3c0
1 changed files with 26 additions and 24 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

50
index.html
View File

@ -48,7 +48,16 @@
</label> </label>
</header> </header>
<main> <main>
<section id="homepage" class="page"> <section id="loading_page" class="page">
<svg class="app-icon icon app-icon-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M54.69,14.28l8.83-8.83a1.62,1.62,0,0,0-1.14-2.77H21.15A1.63,1.63,0,0,0,19.53,4.3V59.7a1.62,1.62,0,0,0,2.78,1.13l8.83-9a1.62,1.62,0,0,0,.46-1.14V38.06a1.58,1.58,0,0,1,.48-1.14l8.81-8.83a1.62,1.62,0,0,0-1.15-2.77H33.22A1.62,1.62,0,0,1,31.6,23.7V16.37a1.63,1.63,0,0,1,1.62-1.62H53.55A1.63,1.63,0,0,0,54.69,14.28Z" />
<path
d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z" />
</svg>
<h4 class="app-name">FLO Torrent</h4>
</section>
<section id="homepage" class="page hide-completely">
<section id="search_section" class="page-layout"> <section id="search_section" class="page-layout">
<svg class="app-icon icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"> <svg class="app-icon icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path <path
@ -82,14 +91,7 @@
Browse Browse
</a> </a>
</div> </div>
<section id="torrent_container" class="torrent-container"> <section id="torrent_container" class="torrent-container"></section>
<svg class="app-icon icon app-icon-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64">
<path
d="M54.69,14.28l8.83-8.83a1.62,1.62,0,0,0-1.14-2.77H21.15A1.63,1.63,0,0,0,19.53,4.3V59.7a1.62,1.62,0,0,0,2.78,1.13l8.83-9a1.62,1.62,0,0,0,.46-1.14V38.06a1.58,1.58,0,0,1,.48-1.14l8.81-8.83a1.62,1.62,0,0,0-1.15-2.77H33.22A1.62,1.62,0,0,1,31.6,23.7V16.37a1.63,1.63,0,0,1,1.62-1.62H53.55A1.63,1.63,0,0,0,54.69,14.28Z" />
<path
d="M1.62,14.75H12.36A1.62,1.62,0,0,0,14,13.13V4.3a1.63,1.63,0,0,0-1.62-1.62H7.47a1.6,1.6,0,0,0-1.35.73L.27,12.24A1.62,1.62,0,0,0,1.62,14.75Z" />
</svg>
</section>
</section> </section>
</section> </section>
<section id="torrent" class="page hide-completely page-layout"> <section id="torrent" class="page hide-completely page-layout">
@ -870,6 +872,7 @@
icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M17.998 7l2.31-4h.7c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h3.006l-2.31 4h2.31l2.31-4h3.69l-2.31 4h2.31l2.31-4h3.69l-2.31 4h2.31z"/></svg>` icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M17.998 7l2.31-4h.7c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993A1 1 0 0 1 2.992 3h3.006l-2.31 4h2.31l2.31-4h3.69l-2.31 4h2.31l2.31-4h3.69l-2.31 4h2.31z"/></svg>`
break break
case 'tv series': case 'tv series':
case 'tv_series':
icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993zm8.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"/></svg>` icon = `<svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0h24v24H0z"/><path d="M2 3.993A1 1 0 0 1 2.992 3h18.016c.548 0 .992.445.992.993v16.014a1 1 0 0 1-.992.993H2.992A.993.993 0 0 1 2 20.007V3.993zm8.622 4.422a.4.4 0 0 0-.622.332v6.506a.4.4 0 0 0 .622.332l4.879-3.252a.4.4 0 0 0 0-.666l-4.88-3.252z"/></svg>`
break break
case 'video': case 'video':
@ -903,18 +906,6 @@
}) })
return torrentsFrag return torrentsFrag
} }
function showLatestTorrents() {
// render latest torrent when available
getTorrents().then(allTorrents => {
allTorrents = allTorrents.reverse().slice(0, 8)
getRef('torrent_container').innerHTML = ``
getRef('torrent_container').append(renderTorrents(allTorrents))
})
.catch(err => {
console.log(err)
})
}
function getSearchParams() { function getSearchParams() {
const urlSearchParams = new URLSearchParams(window.location.search); const urlSearchParams = new URLSearchParams(window.location.search);
@ -986,6 +977,8 @@
let params = getSearchParams() let params = getSearchParams()
let page = target.includes('#') ? target.split('#')[1] : target let page = target.includes('#') ? target.split('#')[1] : target
switch (page) { switch (page) {
case 'loading_page':
break;
case 'search': case 'search':
if (params.query) { if (params.query) {
if (params.category) { if (params.category) {
@ -1019,8 +1012,11 @@
break; break;
default: default:
page = 'homepage' page = 'homepage'
history.replaceState(null, null, ' ') history.replaceState(null, null, '#homepage')
showLatestTorrents() let allTorrents = await getDataFromIDB()
allTorrents = allTorrents.reverse().slice(0, 8)
getRef('torrent_container').innerHTML = ``
getRef('torrent_container').append(renderTorrents(allTorrents))
} }
document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely') document.querySelector('.page:not(.hide-completely)')?.classList.add('hide-completely')
getRef(page).classList.remove('hide-completely') getRef(page).classList.remove('hide-completely')
@ -1104,7 +1100,13 @@
// Event listeners // Event listeners
window.addEventListener('load', e => { window.addEventListener('load', e => {
showPage(window.location.hash) showPage('loading_page')
getTorrents().then(allTorrents => {
showPage(window.location.hash)
})
.catch(err => {
console.log(err)
})
}) })
window.addEventListener('hashchange', e => { window.addEventListener('hashchange', e => {
showPage(window.location.hash) showPage(window.location.hash)