Youtube Livestream Progress Bar Elapsed Time

Youtube livestream progress bar displays time only relative to current live time. This script will add time at mouse position on progress bar displayed in elapsed time.

  1. // ==UserScript==
  2. // @name Youtube Livestream Progress Bar Elapsed Time
  3. // @namespace http://tampermonkey.net/
  4. // @version 0.1
  5. // @description Youtube livestream progress bar displays time only relative to current live time. This script will add time at mouse position on progress bar displayed in elapsed time.
  6. // @author MrQianHuZi
  7. // @match https://www.youtube.com/watch?v=*
  8. // @icon https://www.google.com/s2/favicons?sz=64&domain=youtube.com
  9. // @grant none
  10. // @run-at document-idle
  11. // @license MIT
  12. // ==/UserScript==
  13.  
  14. (function() {
  15. 'use strict';
  16.  
  17. // Convenience function to execute your callback only after an element matching readySelector has been added to the page.
  18. // Example: runWhenReady('.search-result', augmentSearchResults);
  19. // Gives up after 1 minute.
  20. function runWhenReady(readySelector, callback) {
  21. var numAttempts = 0;
  22. var tryNow = function() {
  23. var elem = document.querySelector(readySelector);
  24. if (elem) {
  25. callback(elem);
  26. } else {
  27. numAttempts++;
  28. if (numAttempts >= 34) {
  29. console.warn('Giving up after 34 attempts. Could not find: ' + readySelector);
  30. } else {
  31. setTimeout(tryNow, 250 * Math.pow(1.1, numAttempts));
  32. }
  33. }
  34. };
  35. tryNow();
  36. }
  37. // Your code here...
  38.  
  39. runWhenReady(".ytp-tooltip-text.ytp-tooltip-text-no-title", () => {
  40. console.log("testing");
  41. const player = document.getElementById("ytd-player").player_;
  42. const timetext = document.getElementsByClassName("ytp-tooltip-text ytp-tooltip-text-no-title")[0];
  43. const newtime = document.createElement("span");
  44. newtime.setAttribute("class", "ytp-tooltip-text ytp-tooltip-text-no-title");
  45. timetext.parentElement.appendChild(newtime);
  46. const progressBar = document.getElementsByClassName("ytp-progress-bar")[0];
  47. progressBar.addEventListener("mousemove", () => {
  48. const timevalues = timetext.innerText.substring(1).split(":");
  49. let timeFromLiveTime = 0;
  50. for (let i = 0; i < timevalues.length; i++) {
  51. const multiplier = Math.pow(60, timevalues.length - 1 - i);
  52. timeFromLiveTime += multiplier * timevalues[i];
  53. }
  54. const timeElapsed = player.getProgressState().seekableEnd - timeFromLiveTime;
  55. newtime.innerText = new Date(1000 * timeElapsed).toISOString().substr(11, 8);
  56. });
  57. });
  58. })();