Jesse Smick
2 years ago
committed by
GitHub
6 changed files with 291 additions and 49 deletions
@ -0,0 +1,278 @@ |
|||||||
|
/* |
||||||
|
* Bittorrent Client using Qt and libtorrent. |
||||||
|
* Copyright (C) 2022 Jesse Smick <jesse.smick@gmail.com> |
||||||
|
* |
||||||
|
* This program is free software; you can redistribute it and/or |
||||||
|
* modify it under the terms of the GNU General Public License |
||||||
|
* as published by the Free Software Foundation; either version 2 |
||||||
|
* of the License, or (at your option) any later version. |
||||||
|
* |
||||||
|
* This program is distributed in the hope that it will be useful, |
||||||
|
* but WITHOUT ANY WARRANTY; without even the implied warranty of |
||||||
|
* MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the |
||||||
|
* GNU General Public License for more details. |
||||||
|
* |
||||||
|
* You should have received a copy of the GNU General Public License |
||||||
|
* along with this program; if not, write to the Free Software |
||||||
|
* Foundation, Inc., 51 Franklin Street, Fifth Floor, Boston, MA 02110-1301, USA. |
||||||
|
* |
||||||
|
* In addition, as a special exception, the copyright holders give permission to |
||||||
|
* link this program with the OpenSSL project's "OpenSSL" library (or with |
||||||
|
* modified versions of it that use the same license as the "OpenSSL" library), |
||||||
|
* and distribute the linked executables. You must obey the GNU General Public |
||||||
|
* License in all respects for all of the code used other than "OpenSSL". If you |
||||||
|
* modify file(s), you may extend this exception to your version of the file(s), |
||||||
|
* but you are not obligated to do so. If you do not wish to do so, delete this |
||||||
|
* exception statement from your version. |
||||||
|
*/ |
||||||
|
|
||||||
|
'use strict'; |
||||||
|
|
||||||
|
if (window.qBittorrent === undefined) { |
||||||
|
window.qBittorrent = {}; |
||||||
|
} |
||||||
|
|
||||||
|
window.qBittorrent.PiecesBar = (() => { |
||||||
|
const exports = () => { |
||||||
|
return { |
||||||
|
PiecesBar: PiecesBar |
||||||
|
}; |
||||||
|
}; |
||||||
|
|
||||||
|
const STATUS_DOWNLOADING = 1; |
||||||
|
const STATUS_DOWNLOADED = 2; |
||||||
|
|
||||||
|
// absolute max width of 4096
|
||||||
|
// this is to support all browsers for size of canvas elements
|
||||||
|
// see https://github.com/jhildenbiddle/canvas-size#test-results
|
||||||
|
const MAX_CANVAS_WIDTH = 4096; |
||||||
|
|
||||||
|
let piecesBarUniqueId = 0; |
||||||
|
const PiecesBar = new Class({ |
||||||
|
initialize(pieces, parameters) { |
||||||
|
const vals = { |
||||||
|
'id': 'piecesbar_' + (piecesBarUniqueId++), |
||||||
|
'width': 0, |
||||||
|
'height': 0, |
||||||
|
'downloadingColor': 'green', |
||||||
|
'haveColor': 'blue', |
||||||
|
'borderSize': 1, |
||||||
|
'borderColor': '#999' |
||||||
|
}; |
||||||
|
|
||||||
|
if (parameters && ($type(parameters) === 'object')) |
||||||
|
$extend(vals, parameters); |
||||||
|
vals.height = Math.max(vals.height, 12); |
||||||
|
|
||||||
|
const obj = new Element('div', { |
||||||
|
'id': vals.id, |
||||||
|
'class': 'piecesbarWrapper', |
||||||
|
'styles': { |
||||||
|
'border': vals.borderSize.toString() + 'px solid ' + vals.borderColor, |
||||||
|
'height': vals.height.toString() + 'px', |
||||||
|
} |
||||||
|
}); |
||||||
|
obj.vals = vals; |
||||||
|
obj.vals.pieces = $pick(pieces, []); |
||||||
|
|
||||||
|
obj.vals.canvas = new Element('canvas', { |
||||||
|
'id': vals.id + '_canvas', |
||||||
|
'class': 'piecesbarCanvas', |
||||||
|
'width': (vals.width - (2 * vals.borderSize)).toString(), |
||||||
|
'height': '1' // will stretch vertically to take up the height of the parent
|
||||||
|
}); |
||||||
|
obj.appendChild(obj.vals.canvas); |
||||||
|
|
||||||
|
obj.setPieces = setPieces; |
||||||
|
obj.refresh = refresh; |
||||||
|
obj.clear = setPieces.bind(obj, []); |
||||||
|
obj._drawStatus = drawStatus; |
||||||
|
|
||||||
|
if (vals.width > 0) |
||||||
|
obj.setPieces(vals.pieces); |
||||||
|
else |
||||||
|
setTimeout(() => { checkForParent(obj.id); }, 1); |
||||||
|
|
||||||
|
return obj; |
||||||
|
} |
||||||
|
}); |
||||||
|
|
||||||
|
function setPieces(pieces) { |
||||||
|
if (!Array.isArray(pieces)) |
||||||
|
pieces = []; |
||||||
|
|
||||||
|
this.vals.pieces = pieces; |
||||||
|
this.refresh(true); |
||||||
|
} |
||||||
|
|
||||||
|
function refresh(force) { |
||||||
|
const start = Date.now(); |
||||||
|
if (!this.parentNode) |
||||||
|
return; |
||||||
|
|
||||||
|
const pieces = this.vals.pieces; |
||||||
|
|
||||||
|
// if the number of pieces is small, use that for the width,
|
||||||
|
// and have it stretch horizontally.
|
||||||
|
// this also limits the ratio below to >= 1
|
||||||
|
const width = Math.min(this.offsetWidth, pieces.length, MAX_CANVAS_WIDTH); |
||||||
|
if ((this.vals.width === width) && !force) |
||||||
|
return; |
||||||
|
|
||||||
|
this.vals.width = width; |
||||||
|
|
||||||
|
// change canvas size to fit exactly in the space
|
||||||
|
this.vals.canvas.width = width - (2 * this.vals.borderSize); |
||||||
|
|
||||||
|
const canvas = this.vals.canvas; |
||||||
|
const ctx = canvas.getContext('2d'); |
||||||
|
ctx.clearRect(0, 0, canvas.width, canvas.height); |
||||||
|
|
||||||
|
const imageWidth = canvas.width; |
||||||
|
|
||||||
|
if (imageWidth.length === 0) |
||||||
|
return; |
||||||
|
|
||||||
|
let minStatus = Infinity; |
||||||
|
let maxStatus = 0; |
||||||
|
|
||||||
|
for (const status of pieces) { |
||||||
|
if (status > maxStatus) { |
||||||
|
maxStatus = status; |
||||||
|
} |
||||||
|
|
||||||
|
if (status < minStatus) { |
||||||
|
minStatus = status; |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
// if no progress then don't do anything
|
||||||
|
if (maxStatus === 0) |
||||||
|
return; |
||||||
|
|
||||||
|
// if all pieces are downloaded, fill entire image at once
|
||||||
|
if (minStatus === STATUS_DOWNLOADED) { |
||||||
|
ctx.fillStyle = this.vals.haveColor; |
||||||
|
ctx.fillRect(0, 0, canvas.width, canvas.height); |
||||||
|
return; |
||||||
|
} |
||||||
|
|
||||||
|
/* Linear transformation from pieces to pixels. |
||||||
|
* |
||||||
|
* The canvas size can vary in width so this figures out what to draw at each pixel. |
||||||
|
* Inspired by the GUI code here https://github.com/qbittorrent/qBittorrent/blob/25b3f2d1a6b14f0fe098fb79a3d034607e52deae/src/gui/properties/downloadedpiecesbar.cpp#L54
|
||||||
|
* |
||||||
|
* example ratio > 1 (at least 2 pieces per pixel) |
||||||
|
* +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+ |
||||||
|
* pieces | 2 | 1 | 2 | 0 | 2 | 0 | 1 | 0 | 1 | 2 | |
||||||
|
* +---------+---------+---------+---------+---------+---------+ |
||||||
|
* pixels | | | | | | | |
||||||
|
* +---------+---------+---------+---------+---------+---------+ |
||||||
|
* |
||||||
|
* example ratio < 1 (at most 2 pieces per pixel) |
||||||
|
* This case shouldn't happen since the max pixels are limited to the number of pieces |
||||||
|
* +---------+---------+---------+---------+----------+--------+ |
||||||
|
* pieces | 2 | 1 | 1 | 0 | 2 | 2 | |
||||||
|
* +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+ |
||||||
|
* pixels | | | | | | | | | | | |
||||||
|
* +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+ |
||||||
|
*/ |
||||||
|
|
||||||
|
const ratio = pieces.length / imageWidth; |
||||||
|
|
||||||
|
let lastValue = null; |
||||||
|
let rectangleStart = 0; |
||||||
|
|
||||||
|
// for each pixel compute its status based on the pieces
|
||||||
|
for (let x = 0; x < imageWidth; ++x) { |
||||||
|
// find positions in the pieces array
|
||||||
|
const piecesFrom = x * ratio; |
||||||
|
const piecesTo = (x + 1) * ratio; |
||||||
|
const piecesToInt = Math.ceil(piecesTo); |
||||||
|
|
||||||
|
const statusValues = { |
||||||
|
[STATUS_DOWNLOADING]: 0, |
||||||
|
[STATUS_DOWNLOADED]: 0 |
||||||
|
}; |
||||||
|
|
||||||
|
// aggregate the status of each piece that contributes to this pixel
|
||||||
|
for (let p = piecesFrom; p < piecesToInt; ++p) { |
||||||
|
const piece = Math.floor(p); |
||||||
|
const pieceStart = Math.max(piecesFrom, piece); |
||||||
|
const pieceEnd = Math.min(piece + 1, piecesTo); |
||||||
|
|
||||||
|
const amount = pieceEnd - pieceStart; |
||||||
|
const status = pieces[piece]; |
||||||
|
|
||||||
|
if (status in statusValues) |
||||||
|
statusValues[status] += amount; |
||||||
|
} |
||||||
|
|
||||||
|
// normalize to interval [0, 1]
|
||||||
|
statusValues[STATUS_DOWNLOADING] /= ratio; |
||||||
|
statusValues[STATUS_DOWNLOADED] /= ratio; |
||||||
|
|
||||||
|
// floats accumulate small errors, so smooth it out by rounding to hundredths place
|
||||||
|
// this effectively limits each status to a value 1 in 100
|
||||||
|
statusValues[STATUS_DOWNLOADING] = Math.round(statusValues[STATUS_DOWNLOADING] * 100) / 100; |
||||||
|
statusValues[STATUS_DOWNLOADED] = Math.round(statusValues[STATUS_DOWNLOADED] * 100) / 100; |
||||||
|
|
||||||
|
// float precision sometimes _still_ gives > 1
|
||||||
|
statusValues[STATUS_DOWNLOADING] = Math.min(statusValues[STATUS_DOWNLOADING], 1); |
||||||
|
statusValues[STATUS_DOWNLOADED] = Math.min(statusValues[STATUS_DOWNLOADED], 1); |
||||||
|
|
||||||
|
if (!lastValue) { |
||||||
|
lastValue = statusValues; |
||||||
|
} |
||||||
|
|
||||||
|
// group contiguous colors together and draw as a single rectangle
|
||||||
|
if ((lastValue[STATUS_DOWNLOADING] === statusValues[STATUS_DOWNLOADING]) |
||||||
|
&& (lastValue[STATUS_DOWNLOADED] === statusValues[STATUS_DOWNLOADED])) { |
||||||
|
continue; |
||||||
|
} |
||||||
|
|
||||||
|
const rectangleWidth = x - rectangleStart; |
||||||
|
this._drawStatus(ctx, rectangleStart, rectangleWidth, lastValue); |
||||||
|
|
||||||
|
lastValue = statusValues; |
||||||
|
rectangleStart = x; |
||||||
|
} |
||||||
|
|
||||||
|
// fill a rect at the end of the canvas
|
||||||
|
if (rectangleStart < imageWidth) { |
||||||
|
const rectangleWidth = imageWidth - rectangleStart; |
||||||
|
this._drawStatus(ctx, rectangleStart, rectangleWidth, lastValue); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function drawStatus(ctx, start, width, statusValues) { |
||||||
|
// mix the colors by using transparency and a composite mode
|
||||||
|
ctx.globalCompositeOperation = 'lighten'; |
||||||
|
|
||||||
|
if (statusValues[STATUS_DOWNLOADING]) { |
||||||
|
ctx.globalAlpha = statusValues[STATUS_DOWNLOADING]; |
||||||
|
ctx.fillStyle = this.vals.downloadingColor; |
||||||
|
ctx.fillRect(start, 0, width, ctx.canvas.height); |
||||||
|
} |
||||||
|
|
||||||
|
if (statusValues[STATUS_DOWNLOADED]) { |
||||||
|
ctx.globalAlpha = statusValues[STATUS_DOWNLOADED]; |
||||||
|
ctx.fillStyle = this.vals.haveColor; |
||||||
|
ctx.fillRect(start, 0, width, ctx.canvas.height); |
||||||
|
} |
||||||
|
} |
||||||
|
|
||||||
|
function checkForParent(id) { |
||||||
|
const obj = $(id); |
||||||
|
if (!obj) |
||||||
|
return; |
||||||
|
if (!obj.parentNode) |
||||||
|
return setTimeout(function() { checkForParent(id); }, 1); |
||||||
|
|
||||||
|
obj.refresh(); |
||||||
|
} |
||||||
|
|
||||||
|
return exports(); |
||||||
|
})(); |
||||||
|
|
||||||
|
Object.freeze(window.qBittorrent.PiecesBar); |
||||||
Loading…
Reference in new issue