Soundgasm Progress Bar

Adds a progress bar when uploading a file to Soundgasm. Also displays an estimated time of completion.

Κάντε μια ερώτηση, δημοσιεύστε μια ανασκόπηση, ή αναφέρετε τον κώδικα.

Αναδίπλωση γραμμών

// ==UserScript==
// @name         Soundgasm Progress Bar
// @description  Adds a progress bar when uploading a file to Soundgasm. Also displays an estimated time of completion.
// @namespace    RoundPension
// @include      https://soundgasm.net/upload
// @version      1.0
// @license      MIT-0
// ==/UserScript==

var form = document.querySelector("form");

var req = new XMLHttpRequest();
var progbar;
var eta;
var starttime;
var lasttime;

form.addEventListener("submit", function(e) {
  e.preventDefault();
  
  req.upload.addEventListener("progress", prog);
  req.upload.addEventListener("loadstart", start);
  req.addEventListener("load", end);
  req.open("POST", "https://soundgasm.net/upload");
  req.send(new FormData(form));
});

function start() {
  starttime = Date.now();
  lasttime = starttime;
  var div = document.createElement("div");
  document.querySelector("body").append(div);
  div.innerHTML += `
<label>
  Uploading File: <progress id="prog" value="0"></progress>
</label>
<p>Estimated time remaining: <span id="eta"></span></p>`;
  progBar = document.getElementById("prog");
  eta = document.getElementById("eta");
}

function prog(e) {
  var ratio = e.loaded/e.total
  progBar.value = ratio;
  if (Date.now() - lasttime > 1000) {
    updateETA(ratio);
  }
}

function end() {
  document.querySelector("body").innerHTML = `
<p>Upload completed!</p>
<p><a href="https://soundgasm.net/upload">Upload another</a></p>`
}

function updateETA(ratio) {
  lasttime = Date.now();
  var totalTime = (Date.now() - starttime)/ratio;
  var etaTime = totalTime*(1-ratio);
  eta.innerHTML = msToTime(etaTime);
}

//modified from https://stackoverflow.com/a/19700358
function msToTime(duration) {
  var seconds = Math.floor((duration / 1000) % 60),
    minutes = Math.floor((duration / (1000 * 60)) % 60),
    hours = Math.floor(duration / (1000 * 60 * 60));
  
  minutes = (minutes < 10) ? "0" + minutes : minutes;
  seconds = (seconds < 10) ? "0" + seconds : seconds;

  return hours + ":" + minutes + ":" + seconds;
}