UI update
added torrent download indicator
This commit is contained in:
sairaj mote
parent
e9733961e1
commit
787ff4c8c0
47
css/main.css
47
css/main.css
@ -358,7 +358,7 @@ ul {
|
||||
#search_section {
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
padding: 4rem 0;
|
||||
justify-items: center;
|
||||
}
|
||||
@ -371,6 +371,7 @@ ul {
|
||||
.app-name {
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
|
||||
@ -396,7 +397,6 @@ ul {
|
||||
gap: 0 1rem;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: "icon title button" "icon tags button";
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -406,20 +406,16 @@ ul {
|
||||
.torrent-card .torrent-type-icon {
|
||||
padding: 0.8rem;
|
||||
}
|
||||
.torrent-card__icon {
|
||||
grid-area: icon;
|
||||
}
|
||||
.torrent-card__icon .icon {
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
}
|
||||
.torrent-card__title {
|
||||
font-weight: 600;
|
||||
grid-area: title;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
.torrent-card__tags, .torrent-card__uploader {
|
||||
grid-area: tags;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -438,7 +434,6 @@ ul {
|
||||
font-weight: 500;
|
||||
}
|
||||
.torrent-card__download-button {
|
||||
grid-area: button;
|
||||
justify-self: flex-end;
|
||||
align-self: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
@ -448,6 +443,34 @@ ul {
|
||||
margin-right: 0.5rem;
|
||||
}
|
||||
|
||||
.progress-indicator {
|
||||
justify-self: flex-end;
|
||||
height: 2.3rem;
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
|
||||
.progress-percent {
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
min-width: 6rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
|
||||
.progress-loader {
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
padding: 0.1rem;
|
||||
stroke-width: 12;
|
||||
overflow: visible;
|
||||
margin-right: 0.5rem;
|
||||
stroke-dasharray: 201;
|
||||
stroke-dashoffset: 201;
|
||||
transform: rotate(-90deg);
|
||||
stroke: var(--accent-color);
|
||||
transition: stroke-dashoffset 0.3s;
|
||||
}
|
||||
|
||||
#torrent_popup {
|
||||
--width: min(56rem, 100%);
|
||||
}
|
||||
@ -544,23 +567,23 @@ ul {
|
||||
|
||||
.torrent-card {
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: "icon title" "icon tags" "icon button";
|
||||
}
|
||||
.torrent-card__icon {
|
||||
margin: 0;
|
||||
}
|
||||
.torrent-card__title {
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
.torrent-card__tags, .torrent-card__uploader {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
.torrent-card__description {
|
||||
display: none;
|
||||
}
|
||||
.torrent-card__download-button {
|
||||
.torrent-card__download-button,
|
||||
.torrent-card .progress-indicator {
|
||||
margin-top: 1rem;
|
||||
grid-column: 2/3;
|
||||
}
|
||||
|
||||
#torrent_type_icon {
|
||||
|
||||
2
css/main.min.css
vendored
2
css/main.min.css
vendored
File diff suppressed because one or more lines are too long
@ -307,7 +307,7 @@ ul{
|
||||
#search_section{
|
||||
position: relative;
|
||||
display: grid;
|
||||
gap: 1rem;
|
||||
gap: 0.5rem;
|
||||
padding: 4rem 0;
|
||||
justify-items: center;
|
||||
}
|
||||
@ -318,6 +318,7 @@ ul{
|
||||
.app-name{
|
||||
font-weight: 500;
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.9rem;
|
||||
color: rgba(var(--text-color), 0.7);
|
||||
}
|
||||
#search_torrent{
|
||||
@ -342,7 +343,6 @@ ul{
|
||||
gap: 0 1rem;
|
||||
align-items: center;
|
||||
grid-template-columns: auto 1fr auto;
|
||||
grid-template-areas: 'icon title button' 'icon tags button';
|
||||
cursor: pointer;
|
||||
padding: 1rem;
|
||||
border-radius: 0.3rem;
|
||||
@ -352,7 +352,6 @@ ul{
|
||||
padding: 0.8rem;
|
||||
}
|
||||
&__icon{
|
||||
grid-area: icon;
|
||||
.icon{
|
||||
height: 1.4rem;
|
||||
width: 1.4rem;
|
||||
@ -360,12 +359,11 @@ ul{
|
||||
}
|
||||
&__title{
|
||||
font-weight: 600;
|
||||
grid-area: title;
|
||||
font-size: 1.1rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
&__tags,
|
||||
&__uploader{
|
||||
grid-area: tags;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
@ -384,7 +382,6 @@ ul{
|
||||
font-weight: 500;
|
||||
}
|
||||
&__download-button{
|
||||
grid-area: button;
|
||||
justify-self: flex-end;
|
||||
align-self: flex-start;
|
||||
background-color: rgba(var(--text-color), 0.1);
|
||||
@ -394,6 +391,31 @@ ul{
|
||||
}
|
||||
}
|
||||
}
|
||||
.progress-indicator{
|
||||
justify-self: flex-end;
|
||||
height: 2.3rem;
|
||||
padding: 0 0.6rem;
|
||||
}
|
||||
.progress-percent{
|
||||
font-size: 0.9rem;
|
||||
font-weight: 500;
|
||||
min-width: 6rem;
|
||||
color: rgba(var(--text-color), 0.8);
|
||||
}
|
||||
.progress-loader{
|
||||
height: 1.2rem;
|
||||
width: 1.2rem;
|
||||
fill: none;
|
||||
padding: 0.1rem;
|
||||
stroke-width: 12;
|
||||
overflow: visible;
|
||||
margin-right: 0.5rem;
|
||||
stroke-dasharray: 201;
|
||||
stroke-dashoffset: 201;
|
||||
transform: rotate(-90deg);
|
||||
stroke: var(--accent-color);
|
||||
transition: stroke-dashoffset 0.3s;
|
||||
}
|
||||
#torrent_popup{
|
||||
--width: min(56rem, 100%);
|
||||
}
|
||||
@ -478,23 +500,23 @@ ul{
|
||||
}
|
||||
.torrent-card{
|
||||
grid-template-columns: auto 1fr;
|
||||
grid-template-areas: 'icon title' 'icon tags' 'icon button';
|
||||
&__icon{
|
||||
margin: 0;
|
||||
}
|
||||
&__title{
|
||||
font-size: 1rem;
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
&__tags,
|
||||
&__uploader{
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.8rem;
|
||||
}
|
||||
&__description{
|
||||
display: none;
|
||||
}
|
||||
&__download-button{
|
||||
&__download-button,
|
||||
.progress-indicator{
|
||||
margin-top: 1rem;
|
||||
grid-column: 2/3;
|
||||
}
|
||||
}
|
||||
#torrent_type_icon{
|
||||
|
||||
62
index.html
62
index.html
@ -56,15 +56,15 @@
|
||||
<svg class="icon sun-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="M12 18a6 6 0 1 1 0-12 6 6 0 0 1 0 12zm0-2a4 4 0 1 0 0-8 4 4 0 0 0 0 8zM11 1h2v3h-2V1zm0 19h2v3h-2v-3zM3.515 4.929l1.414-1.414L7.05 5.636 5.636 7.05 3.515 4.93zM16.95 18.364l1.414-1.414 2.121 2.121-1.414 1.414-2.121-2.121zm2.121-14.85l1.414 1.415-2.121 2.121-1.414-1.414 2.121-2.121zM5.636 16.95l1.414 1.414-2.121 2.121-1.414-1.414 2.121-2.121zM23 11v2h-3v-2h3zM4 11v2H1v-2h3z"/></svg>
|
||||
</label>
|
||||
</header>
|
||||
<main class="page-layout">
|
||||
<section id="search_section">
|
||||
<main>
|
||||
<section id="search_section" class="page-layout">
|
||||
<svg class="app-icon icon" 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>
|
||||
<sm-input id="search_torrent" placeholder="Search">
|
||||
<svg class="icon" slot="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="M18.031 16.617l4.283 4.282-1.415 1.415-4.282-4.283A8.96 8.96 0 0 1 11 20c-4.968 0-9-4.032-9-9s4.032-9 9-9 9 4.032 9 9a8.96 8.96 0 0 1-1.969 5.617zm-2.006-.742A6.977 6.977 0 0 0 18 11c0-3.868-3.133-7-7-7-3.868 0-7 3.132-7 7 0 3.867 3.132 7 7 7a6.977 6.977 0 0 0 4.875-1.975l.15-.15z"/></svg>
|
||||
</sm-input>
|
||||
</section>
|
||||
<section>
|
||||
<section class="page-layout">
|
||||
<h4>Recent</h4>
|
||||
<ul id="torrent_container"></ul>
|
||||
</section>
|
||||
@ -75,11 +75,10 @@
|
||||
<template id="torrent_card_template">
|
||||
<li class="torrent-card interact">
|
||||
<div class="torrent-card__icon torrent-type-icon"></div>
|
||||
<h3 class="torrent-card__title"></h3>
|
||||
<span class="torrent-card__uploader"></span>
|
||||
<!-- <span class="torrent-card__tags"></span> -->
|
||||
<!-- <p class="torrent-card__description"></p> -->
|
||||
<!-- <h5 class="torrent-card__size">1.2GB</h5> -->
|
||||
<div class="grid">
|
||||
<h3 class="torrent-card__title"></h3>
|
||||
<span class="torrent-card__uploader"></span>
|
||||
</div>
|
||||
<button class="torrent-card__download-button">
|
||||
<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="M16 2l5 5v14.008a.993.993 0 0 1-.993.992H3.993A1 1 0 0 1 3 21.008V2.992C3 2.444 3.445 2 3.993 2H16zm-3 10V8h-2v4H8l4 4 4-4h-3z"/></svg>
|
||||
Get torrent
|
||||
@ -396,18 +395,20 @@
|
||||
);
|
||||
}
|
||||
|
||||
function getTorrentMetafromAPI(txid, i, N) {
|
||||
function getTorrentMetafromAPI(txid, i, N, torrentId) {
|
||||
return new Promise(async (resolve, reject) => {
|
||||
try {
|
||||
let response = await getResponce(`/api/tx/${txid}`)
|
||||
var floData = JSON.parse(response.floData);
|
||||
var percent = Math.round((i / N) * 100);
|
||||
console.log(percent)
|
||||
console.log(i, N, percent, floData.next);
|
||||
let floData = JSON.parse(response.floData);
|
||||
let percent = Math.round((i / N) * 100);
|
||||
console.log(torrentId)
|
||||
getRef(torrentId).querySelector('.progress-loader').setAttribute('style', `stroke-dashoffset: ${201 - (2.01 * percent)}`)
|
||||
getRef(torrentId).querySelector('.progress-percent').textContent = `${percent}% done`
|
||||
// console.log(i, N, percent, floData.next);
|
||||
if (!floData.next)
|
||||
resolve([floData.data]);
|
||||
else {
|
||||
getTorrentMetafromAPI(floData.next, i + 1, N).then(chunks => {
|
||||
getTorrentMetafromAPI(floData.next, i + 1, N, torrentId).then(chunks => {
|
||||
resolve([floData.data].concat(chunks))
|
||||
}).catch(error => {
|
||||
reject(error);
|
||||
@ -419,21 +420,27 @@
|
||||
}
|
||||
});
|
||||
}
|
||||
async function downloadTorrent(filename, txid, totalChunks) {
|
||||
/* document.getElementById('downloadBar').style.display = "block";
|
||||
document.getElementById('progressBar').setAttribute("class", "progress-circle p0");
|
||||
document.getElementById('progressValue').innerHTML = `0%`; */
|
||||
async function downloadTorrent(filename, txid, totalChunks, torrentId) {
|
||||
console.log(txid);
|
||||
getTorrentMetafromAPI(txid, 1, totalChunks).then(chunks => {
|
||||
var filedata = chunks.join("");
|
||||
getRef(torrentId).querySelector('.torrent-card__download-button').classList.add('hide-completely')
|
||||
const progressIndicator = create('div', {
|
||||
className: 'progress-indicator flex align-center',
|
||||
innerHTML: `
|
||||
<svg class="progress-loader" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32"/></svg>
|
||||
<span class="progress-percent"></span>
|
||||
`
|
||||
})
|
||||
getRef(torrentId).append(progressIndicator)
|
||||
getTorrentMetafromAPI(txid, 1, totalChunks, torrentId).then(chunks => {
|
||||
let filedata = chunks.join("");
|
||||
// console.log(filedata);
|
||||
download(filename, filedata);
|
||||
progressIndicator.remove()
|
||||
getRef(torrentId).querySelector('.torrent-card__download-button').classList.remove('hide-completely')
|
||||
}).catch(error => {
|
||||
alert(error);
|
||||
console.error(error);
|
||||
}).finally(_ => {
|
||||
// document.getElementById('downloadBar').style.display = "none";
|
||||
});
|
||||
})
|
||||
}
|
||||
|
||||
function download(filename, data) {
|
||||
@ -513,10 +520,11 @@
|
||||
}
|
||||
|
||||
function create(tagName, obj) {
|
||||
const { className, text } = obj
|
||||
const { className, text, innerHTML } = obj
|
||||
const elem = document.createElement(tagName)
|
||||
elem.className = className
|
||||
elem.textContent = text
|
||||
elem.innerHTML = innerHTML
|
||||
return elem
|
||||
}
|
||||
|
||||
@ -747,7 +755,7 @@
|
||||
const card = _target.closest('.torrent-card')
|
||||
const cardId = parseInt(card.id)
|
||||
const {id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks} = await getDataFromIDB(cardId)
|
||||
downloadTorrent(filename, startTx, chunks)
|
||||
downloadTorrent(filename, startTx, chunks, cardId)
|
||||
}
|
||||
else if(e.target.closest('.torrent-card')){
|
||||
const card = e.target.closest('.torrent-card')
|
||||
@ -767,7 +775,7 @@
|
||||
const {id, name, description, tags, type = 'misc', size, uploader, startTx, filename, chunks} = obj
|
||||
const card = getRef('torrent_card_template').content.cloneNode(true).firstElementChild
|
||||
card.id = id
|
||||
card.querySelector('.torrent-card__title').textContent = filename
|
||||
card.querySelector('.torrent-card__title').textContent = name
|
||||
card.querySelector('.torrent-card__uploader').textContent = `by ${uploader}`
|
||||
// card.querySelector('.torrent-card__tags').textContent = tags.split('/').join('•')
|
||||
// card.querySelector('.torrent-card__description').textContent = description
|
||||
@ -819,7 +827,7 @@
|
||||
async function showLatestTorrents(){
|
||||
getRef('torrent_container').innerHTML = ``
|
||||
let allTorrents = await getTorrents()
|
||||
allTorrents = allTorrents.reverse().slice(0, 20)
|
||||
allTorrents = allTorrents.reverse().slice(0, 12)
|
||||
getRef('torrent_container').append(renderTorrents(allTorrents))
|
||||
}
|
||||
|
||||
|
||||
1
loader-ring.svg
Normal file
1
loader-ring.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64"><circle cx="32" cy="32" r="32"/></svg>
|
||||
|
After Width: | Height: | Size: 98 B |
Loading…
Reference in New Issue
Block a user