mirror of
https://github.com/qbittorrent/qBittorrent
synced 2025-08-20 13:23:34 -07:00
WebUI: Convert 'Pieces Bar' class to a custom element
Mootools is no longer used to create PiecesBar class (+ I cleaned it up a bit and turned into custom element but everything should work as before). PR #22670.
This commit is contained in:
skomerko
GitHub
parent
2477e13b3f
commit
de767871f1
2 changed files with 173 additions and 204 deletions
|
|
@ -755,19 +755,6 @@ td.generalLabel {
|
|||
}
|
||||
}
|
||||
|
||||
.piecesbarWrapper {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.piecesbarCanvas {
|
||||
height: 100%;
|
||||
image-rendering: pixelated;
|
||||
inset: 0;
|
||||
position: absolute;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
#watched_folders_tab {
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -36,92 +36,81 @@ window.qBittorrent.PiecesBar ??= (() => {
|
|||
};
|
||||
};
|
||||
|
||||
const STATUS_DOWNLOADING = 1;
|
||||
const STATUS_DOWNLOADED = 2;
|
||||
|
||||
class PiecesBar extends HTMLElement {
|
||||
static #STATUS_DOWNLOADING = 1;
|
||||
static #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;
|
||||
static #MAX_CANVAS_WIDTH = 4096;
|
||||
static #piecesBarUniqueId = 0;
|
||||
|
||||
let piecesBarUniqueId = 0;
|
||||
const PiecesBar = new Class({
|
||||
initialize: (pieces, parameters) => {
|
||||
const vals = {
|
||||
id: `piecesbar_${piecesBarUniqueId++}`,
|
||||
width: 0,
|
||||
height: 0,
|
||||
#canvasEl;
|
||||
#ctx;
|
||||
#pieces;
|
||||
#styles;
|
||||
#id = ++PiecesBar.#piecesBarUniqueId;
|
||||
#resizeObserver;
|
||||
|
||||
constructor(pieces, styles = {}) {
|
||||
super();
|
||||
this.setPieces(pieces);
|
||||
this.#styles = {
|
||||
height: 12,
|
||||
downloadingColor: "hsl(110deg 94% 27%)", // @TODO palette vars not supported for this value, apply average
|
||||
haveColor: "hsl(210deg 55% 55%)", // @TODO palette vars not supported for this value, apply average
|
||||
borderSize: 1,
|
||||
borderColor: "var(--color-border-default)"
|
||||
borderColor: "var(--color-border-default)",
|
||||
...styles
|
||||
};
|
||||
|
||||
if (parameters && (typeOf(parameters) === "object"))
|
||||
Object.append(vals, parameters);
|
||||
vals.height = Math.max(vals.height, 12);
|
||||
this.#canvasEl = document.createElement("canvas");
|
||||
this.#canvasEl.style.height = "100%";
|
||||
this.#canvasEl.style.imageRendering = "pixelated";
|
||||
this.#canvasEl.style.width = "100%";
|
||||
this.#ctx = this.#canvasEl.getContext("2d");
|
||||
|
||||
const obj = document.createElement("div");
|
||||
obj.id = vals.id;
|
||||
obj.className = "piecesbarWrapper";
|
||||
obj.style.border = `${vals.borderSize}px solid ${vals.borderColor}`;
|
||||
obj.style.height = `${vals.height}px`;
|
||||
obj.vals = vals;
|
||||
obj.vals.pieces = [pieces, []].pick();
|
||||
this.attachShadow({ mode: "open" });
|
||||
this.shadowRoot.host.id = `piecesbar_${this.#id}`;
|
||||
this.shadowRoot.host.style.display = "block";
|
||||
this.shadowRoot.host.style.height = `${this.#styles.height}px`;
|
||||
this.shadowRoot.host.style.border = `${this.#styles.borderSize}px solid ${this.#styles.borderColor}`;
|
||||
this.shadowRoot.append(this.#canvasEl);
|
||||
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.id = `${vals.id}_canvas`;
|
||||
canvas.className = "piecesbarCanvas";
|
||||
canvas.width = `${vals.width - (2 * vals.borderSize)}`;
|
||||
canvas.height = "1"; // will stretch vertically to take up the height of the parent
|
||||
obj.vals.canvas = canvas;
|
||||
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); });
|
||||
|
||||
return obj;
|
||||
}
|
||||
});
|
||||
|
||||
function setPieces(pieces) {
|
||||
if (!Array.isArray(pieces))
|
||||
pieces = [];
|
||||
|
||||
this.vals.pieces = pieces;
|
||||
this.refresh(true);
|
||||
this.#resizeObserver = new ResizeObserver(window.qBittorrent.Misc.createDebounceHandler(100, () => {
|
||||
this.#refresh();
|
||||
}));
|
||||
}
|
||||
|
||||
function refresh(force) {
|
||||
if (!this.parentNode)
|
||||
connectedCallback() {
|
||||
this.#resizeObserver.observe(this);
|
||||
this.#refresh();
|
||||
}
|
||||
|
||||
clear() {
|
||||
this.setPieces([]);
|
||||
}
|
||||
|
||||
setPieces(pieces) {
|
||||
this.#pieces = !Array.isArray(pieces) ? [] : pieces;
|
||||
this.#refresh();
|
||||
}
|
||||
|
||||
#refresh() {
|
||||
if (!this.isConnected)
|
||||
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;
|
||||
const width = Math.min(this.offsetWidth, this.#pieces.length, PiecesBar.#MAX_CANVAS_WIDTH);
|
||||
|
||||
// change canvas size to fit exactly in the space
|
||||
this.vals.canvas.width = width - (2 * this.vals.borderSize);
|
||||
this.#canvasEl.width = width - (2 * this.#styles.borderSize);
|
||||
|
||||
const canvas = this.vals.canvas;
|
||||
const ctx = canvas.getContext("2d");
|
||||
ctx.clearRect(0, 0, canvas.width, canvas.height);
|
||||
this.#ctx.clearRect(0, 0, this.#canvasEl.width, this.#canvasEl.height);
|
||||
|
||||
const imageWidth = canvas.width;
|
||||
const imageWidth = this.#canvasEl.width;
|
||||
|
||||
if (imageWidth.length === 0)
|
||||
return;
|
||||
|
|
@ -129,7 +118,7 @@ window.qBittorrent.PiecesBar ??= (() => {
|
|||
let minStatus = Infinity;
|
||||
let maxStatus = 0;
|
||||
|
||||
for (const status of pieces) {
|
||||
for (const status of this.#pieces) {
|
||||
if (status > maxStatus)
|
||||
maxStatus = status;
|
||||
if (status < minStatus)
|
||||
|
|
@ -141,9 +130,9 @@ window.qBittorrent.PiecesBar ??= (() => {
|
|||
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);
|
||||
if (minStatus === PiecesBar.#STATUS_DOWNLOADED) {
|
||||
this.#ctx.fillStyle = this.#styles.haveColor;
|
||||
this.#ctx.fillRect(0, 0, this.#canvasEl.width, this.#canvasEl.height);
|
||||
return;
|
||||
}
|
||||
|
||||
|
|
@ -168,7 +157,7 @@ window.qBittorrent.PiecesBar ??= (() => {
|
|||
* +-----+-----+-----+-----+-----+-----+-----+-----+-----+-----+
|
||||
*/
|
||||
|
||||
const ratio = pieces.length / imageWidth;
|
||||
const ratio = this.#pieces.length / imageWidth;
|
||||
|
||||
let lastValue = null;
|
||||
let rectangleStart = 0;
|
||||
|
|
@ -181,8 +170,8 @@ window.qBittorrent.PiecesBar ??= (() => {
|
|||
const piecesToInt = Math.ceil(piecesTo);
|
||||
|
||||
const statusValues = {
|
||||
[STATUS_DOWNLOADING]: 0,
|
||||
[STATUS_DOWNLOADED]: 0
|
||||
[PiecesBar.#STATUS_DOWNLOADING]: 0,
|
||||
[PiecesBar.#STATUS_DOWNLOADED]: 0
|
||||
};
|
||||
|
||||
// aggregate the status of each piece that contributes to this pixel
|
||||
|
|
@ -192,35 +181,35 @@ window.qBittorrent.PiecesBar ??= (() => {
|
|||
const pieceEnd = Math.min(piece + 1, piecesTo);
|
||||
|
||||
const amount = pieceEnd - pieceStart;
|
||||
const status = pieces[piece];
|
||||
const status = this.#pieces[piece];
|
||||
|
||||
if (status in statusValues)
|
||||
statusValues[status] += amount;
|
||||
}
|
||||
|
||||
// normalize to interval [0, 1]
|
||||
statusValues[STATUS_DOWNLOADING] /= ratio;
|
||||
statusValues[STATUS_DOWNLOADED] /= ratio;
|
||||
statusValues[PiecesBar.#STATUS_DOWNLOADING] /= ratio;
|
||||
statusValues[PiecesBar.#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;
|
||||
statusValues[PiecesBar.#STATUS_DOWNLOADING] = Math.round(statusValues[PiecesBar.#STATUS_DOWNLOADING] * 100) / 100;
|
||||
statusValues[PiecesBar.#STATUS_DOWNLOADED] = Math.round(statusValues[PiecesBar.#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);
|
||||
statusValues[PiecesBar.#STATUS_DOWNLOADING] = Math.min(statusValues[PiecesBar.#STATUS_DOWNLOADING], 1);
|
||||
statusValues[PiecesBar.#STATUS_DOWNLOADED] = Math.min(statusValues[PiecesBar.#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]))
|
||||
if ((lastValue[PiecesBar.#STATUS_DOWNLOADING] === statusValues[PiecesBar.#STATUS_DOWNLOADING])
|
||||
&& (lastValue[PiecesBar.#STATUS_DOWNLOADED] === statusValues[PiecesBar.#STATUS_DOWNLOADED]))
|
||||
continue;
|
||||
|
||||
const rectangleWidth = x - rectangleStart;
|
||||
this._drawStatus(ctx, rectangleStart, rectangleWidth, lastValue);
|
||||
this.#drawStatus(rectangleStart, rectangleWidth, lastValue);
|
||||
|
||||
lastValue = statusValues;
|
||||
rectangleStart = x;
|
||||
|
|
@ -229,36 +218,29 @@ window.qBittorrent.PiecesBar ??= (() => {
|
|||
// fill a rect at the end of the canvas
|
||||
if (rectangleStart < imageWidth) {
|
||||
const rectangleWidth = imageWidth - rectangleStart;
|
||||
this._drawStatus(ctx, rectangleStart, rectangleWidth, lastValue);
|
||||
this.#drawStatus(rectangleStart, rectangleWidth, lastValue);
|
||||
}
|
||||
}
|
||||
|
||||
function drawStatus(ctx, start, width, statusValues) {
|
||||
#drawStatus(start, width, statusValues) {
|
||||
// mix the colors by using transparency and a composite mode
|
||||
ctx.globalCompositeOperation = "lighten";
|
||||
this.#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[PiecesBar.#STATUS_DOWNLOADING]) {
|
||||
this.#ctx.globalAlpha = statusValues[PiecesBar.#STATUS_DOWNLOADING];
|
||||
this.#ctx.fillStyle = this.#styles.downloadingColor;
|
||||
this.#ctx.fillRect(start, 0, width, this.#canvasEl.height);
|
||||
}
|
||||
|
||||
if (statusValues[STATUS_DOWNLOADED]) {
|
||||
ctx.globalAlpha = statusValues[STATUS_DOWNLOADED];
|
||||
ctx.fillStyle = this.vals.haveColor;
|
||||
ctx.fillRect(start, 0, width, ctx.canvas.height);
|
||||
if (statusValues[PiecesBar.#STATUS_DOWNLOADED]) {
|
||||
this.#ctx.globalAlpha = statusValues[PiecesBar.#STATUS_DOWNLOADED];
|
||||
this.#ctx.fillStyle = this.#styles.haveColor;
|
||||
this.#ctx.fillRect(start, 0, width, this.#canvasEl.height);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const checkForParent = (id) => {
|
||||
const obj = document.getElementById(id);
|
||||
if (!obj)
|
||||
return;
|
||||
if (!obj.parentNode)
|
||||
return setTimeout(() => { checkForParent(id); }, 100);
|
||||
|
||||
obj.refresh();
|
||||
};
|
||||
customElements.define("pieces-bar", PiecesBar);
|
||||
|
||||
return exports();
|
||||
})();
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue