☰

Telegram Media Downloader

Download images, GIFs, videos, and voice messages on the Telegram webapp from private channels that disable downloading and restrict saving content

05.01.2024 itibariyledir. En son verisyonu görün.

  1. // ==UserScript==
  2. // @name         Telegram Media Downloader
  3. // @name:zh-CN   Telegram图片视频下载器
  4. // @version      1.100
  5. // @namespace    https://github.com/Neet-Nestor/Telegram-Media-Downloader
  6. // @description  Download images, GIFs, videos, and voice messages on the Telegram webapp from private channels that disable downloading and restrict saving content
  7. // @description:zh-cn 从禁止下载的Telegram频道中下载图片、视频及语音消息
  8. // @author       Nestor Qin
  9. // @license      GNU GPLv3
  10. // @website      https://github.com/Neet-Nestor/Telegram-Media-Downloader
  11. // @match        https://web.telegram.org/*
  12. // @match        https://webk.telegram.org/*
  13. // @match        https://webz.telegram.org/*
  14. // @icon         https://img.icons8.com/color/452/telegram-app--v5.png
  15. // ==/UserScript==
  16.  
  17. (function () {
  18.   const logger = {
  19.     info: (message, fileName = null) => {
  20.       console.log(
  21.         `[Tel Download] ${fileName ? `${fileName}: ` : ""}${message}`
  22.       );
  23.     },
  24.     error: (message, fileName = null) => {
  25.       console.error(
  26.         `[Tel Download] ${fileName ? `${fileName}: ` : ""}${message}`
  27.       );
  28.     },
  29.   };
  30.   const contentRangeRegex = /^bytes (\d+)-(\d+)\/(\d+)$/;
  31.   const REFRESH_DELAY = 500;
  32.   const hashCode = (s) => {
  33.     var h = 0, l = s.length, i = 0;
  34.     if ( l > 0 ) {
  35.       while (i < l) {
  36.         h = (h << 5) - h + s.charCodeAt(i++) | 0;
  37.       }
  38.     }
  39.     return h >>> 0;
  40.   };
  41.  
  42.   const createProgressBar = (videoId, fileName) => {
  43.     const container = document.getElementById("tel-downloader-progress-bar-container");
  44.     const innerContainer = document.createElement("div");
  45.     innerContainer.id = "tel-downloader-progress-" + videoId;
  46.     innerContainer.style.width = "20rem";
  47.     innerContainer.style.backgroundColor = "#0003";
  48.     innerContainer.style.marginTop = "1rem";
  49.  
  50.     const flexContainer = document.createElement("div");
  51.     flexContainer.style.display = "flex";
  52.     flexContainer.style.justifyContent = "space-between";
  53.  
  54.     const title = document.createElement("p");
  55.     title.className = "filename";
  56.     title.style.margin = 0;
  57.     title.innerText = fileName;
  58.  
  59.     const closeButton = document.createElement("div");
  60.     closeButton.style.color = '#8a8a8a';
  61.     closeButton.style.cursor = 'pointer';
  62.     closeButton.style.fontSize = '1.2rem';
  63.     closeButton.innerHTML = '&times;';
  64.     closeButton.onclick = function() {
  65.       container.removeChild(innerContainer);
  66.     };
  67.  
  68.     const progressBar = document.createElement("div");
  69.     progressBar.className = 'progress';
  70.     progressBar.style.backgroundColor = '#e2e2e2';
  71.     progressBar.style.position = "relative";
  72.     progressBar.style.width = "100%";
  73.     progressBar.style.height = "1.6rem";
  74.     progressBar.style.borderRadius = "2rem";
  75.     progressBar.style.overflow = "hidden";
  76.     
  77.     const counter = document.createElement("p");
  78.     counter.style.position = "absolute";
  79.     counter.style.zIndex = 5;
  80.     counter.style.left = "50%";
  81.     counter.style.top = "50%";
  82.     counter.style.transform = "translate(-50%, -50%)";
  83.     counter.style.margin = 0;
  84.     counter.style.color = "black";
  85.     const progress = document.createElement("div");
  86.     progress.style.position = "absolute";
  87.     progress.style.height = "100%";
  88.     progress.style.width = "0%";
  89.     progress.style.backgroundColor = "#6093B5";
  90.  
  91.     progressBar.appendChild(counter);
  92.     progressBar.appendChild(progress);
  93.     flexContainer.appendChild(title);
  94.     flexContainer.appendChild(closeButton);
  95.     innerContainer.appendChild(flexContainer);
  96.     innerContainer.appendChild(progressBar);
  97.     container.appendChild(innerContainer);
  98.   }
  99.  
  100.   const updateProgress = (videoId, fileName, progress) => {
  101.     const innerContainer = document.getElementById("tel-downloader-progress-" + videoId);
  102.     innerContainer.querySelector("p.filename").innerText = fileName;
  103.     const progressBar = innerContainer.querySelector("div.progress");
  104.     progressBar.querySelector("p").innerText = progress + "%";
  105.     progressBar.querySelector("div").style.width = progress + "%";
  106.   }
  107.  
  108.   const completeProgress = (videoId) => {
  109.     const progressBar = document.getElementById("tel-downloader-progress-" + videoId).querySelector("div.progress");
  110.     progressBar.querySelector("p").innerText = "Completed";
  111.     progressBar.querySelector("div").style.backgroundColor = "#B6C649";
  112.     progressBar.querySelector("div").style.width = "100%";
  113.   }
  114.  
  115.   const AbortProgress = (videoId) => {
  116.     const progressBar = document.getElementById("tel-downloader-progress-" + videoId).querySelector("div.progress");
  117.     progressBar.querySelector("p").innerText = "Aborted";
  118.     progressBar.querySelector("div").style.backgroundColor = "#D16666";
  119.     progressBar.querySelector("div").style.width = "100%";
  120.   }
  121.  
  122.   const tel_download_video = (url) => {
  123.     let _blobs = [];
  124.     let _next_offset = 0;
  125.     let _total_size = null;
  126.     let _file_extension = "mp4";
  127.  
  128.     const videoId = (Math.random() + 1).toString(36).substring(2, 10) + "_" + Date.now().toString();
  129.     let fileName = hashCode(url).toString(36) + "." + _file_extension;
  130.  
  131.     // Some video src is in format:
  132.     // 'stream/{"dcId":5,"location":{...},"size":...,"mimeType":"video/mp4","fileName":"xxxx.MP4"}'
  133.     try {
  134.       const metadata = JSON.parse(
  135.         decodeURIComponent(url.split("/")[url.split("/").length - 1])
  136.       );
  137.       if (metadata.fileName) {
  138.         fileName = metadata.fileName;
  139.       }
  140.     } catch (e) {
  141.       // Invalid JSON string, pass extracting fileName
  142.     }
  143.     logger.info(`URL: ${url}`, fileName);
  144.  
  145.     const fetchNextPart = (_writable) => {
  146.       fetch(url, {
  147.         method: "GET",
  148.         headers: {
  149.           Range: `bytes=${_next_offset}-`,
  150.         },
  151.         "User-Agent":
  152.           "User-Agent Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/117.0",
  153.       })
  154.         .then((res) => {
  155.           if (![200, 206].includes(res.status)) {
  156.             throw new Error("Non 200/206 response was received: " + res.status);
  157.           }
  158.           const mime = res.headers.get("Content-Type").split(";")[0];
  159.           if (!mime.startsWith("video/")) {
  160.             throw new Error("Get non video response with MIME type " + mime);
  161.           }
  162.           _file_extension = mime.split("/")[1];
  163.           fileName =
  164.             fileName.substring(0, fileName.indexOf(".") + 1) + _file_extension;
  165.  
  166.           const match = res.headers
  167.             .get("Content-Range")
  168.             .match(contentRangeRegex);
  169.  
  170.           const startOffset = parseInt(match[1]);
  171.           const endOffset = parseInt(match[2]);
  172.           const totalSize = parseInt(match[3]);
  173.  
  174.           if (startOffset !== _next_offset) {
  175.             logger.error("Gap detected between responses.", fileName);
  176.             logger.info("Last offset: " + _next_offset, fileName);
  177.             logger.info("New start offset " + match[1], fileName);
  178.             throw "Gap detected between responses.";
  179.           }
  180.           if (_total_size && totalSize !== _total_size) {
  181.             logger.error("Total size differs", fileName);
  182.             throw "Total size differs";
  183.           }
  184.  
  185.           _next_offset = endOffset + 1;
  186.           _total_size = totalSize;
  187.  
  188.           logger.info(
  189.             `Get response: ${res.headers.get(
  190.               "Content-Length"
  191.             )} bytes data from ${res.headers.get("Content-Range")}`,
  192.             fileName
  193.           );
  194.           logger.info(
  195.             `Progress: ${((_next_offset * 100) / _total_size).toFixed(0)}%`,
  196.             fileName
  197.           );
  198.           updateProgress(videoId, fileName, ((_next_offset * 100) / _total_size).toFixed(0));
  199.           return res.blob();
  200.         })
  201.         .then((resBlob) => {
  202.           if (_writable !== null) {
  203.             _writable.write(resBlob).then(() => {});
  204.           } else {
  205.             _blobs.push(resBlob);
  206.           }
  207.         })
  208.         .then(() => {
  209.           if (!_total_size) {
  210.             throw new Error("_total_size is NULL");
  211.           }
  212.  
  213.           if (_next_offset < _total_size) {
  214.             fetchNextPart(_writable);
  215.           } else {
  216.             if (_writable !== null) {
  217.               _writable.close().then(() => {
  218.                 logger.info("Download finished", fileName);
  219.               });
  220.             } else {
  221.               save();
  222.             }
  223.             completeProgress(videoId);
  224.           }
  225.         })
  226.         .catch((reason) => {
  227.           logger.error(reason, fileName);
  228.           AbortProgress(videoId);
  229.         });
  230.     };
  231.  
  232.     const save = () => {
  233.       logger.info("Finish downloading blobs", fileName);
  234.       logger.info("Concatenating blobs and downloading...", fileName);
  235.  
  236.       const blob = new Blob(_blobs, { type: "video/mp4" });
  237.       const blobUrl = window.URL.createObjectURL(blob);
  238.  
  239.       logger.info("Final blob size: " + blob.size + " bytes", fileName);
  240.  
  241.       const a = document.createElement("a");
  242.       document.body.appendChild(a);
  243.       a.href = blobUrl;
  244.       a.download = fileName;
  245.       a.click();
  246.       document.body.removeChild(a);
  247.       window.URL.revokeObjectURL(blobUrl);
  248.  
  249.       logger.info("Download triggered", fileName);
  250.     };
  251.  
  252.     const supportsFileSystemAccess =
  253.       'showSaveFilePicker' in unsafeWindow &&
  254.       (() => {
  255.         try {
  256.           return unsafeWindow.self === unsafeWindow.top;
  257.         } catch {
  258.           return false;
  259.         }
  260.       })();
  261.     if (supportsFileSystemAccess) {
  262.       unsafeWindow.showSaveFilePicker({
  263.         suggestedName: fileName,
  264.       }).then((handle) => {
  265.         handle.createWritable().then((writable) => {
  266.           fetchNextPart(writable);
  267.           createProgressBar(videoId);
  268.         }).catch((err) => {
  269.           console.error(err.name, err.message);
  270.         });
  271.       }).catch((err) => {
  272.         if (err.name !== 'AbortError') {
  273.           console.error(err.name, err.message);
  274.         }
  275.       });
  276.     } else {
  277.       fetchNextPart(null);
  278.       createProgressBar(videoId);
  279.     }
  280.   };
  281.  
  282.   const tel_download_audio = (url) => {
  283.     let _blobs = [];
  284.     let _next_offset = 0;
  285.     let _total_size = null;
  286.     const fileName = hashCode(url).toString(36) + ".ogg";
  287.  
  288.     const fetchNextPart = (_writable) => {
  289.       fetch(url, {
  290.         method: "GET",
  291.         headers: {
  292.           Range: `bytes=${_next_offset}-`,
  293.         },
  294.       })
  295.         .then((res) => {
  296.           if (res.status !== 206 && res.status !== 200) {
  297.             logger.error(
  298.               "Non 200/206 response was received: " + res.status,
  299.               fileName
  300.             );
  301.             return;
  302.           }
  303.  
  304.           const mime = res.headers.get("Content-Type").split(";")[0];
  305.           if (!mime.startsWith("audio/")) {
  306.             logger.error(
  307.               "Get non audio response with MIME type " + mime,
  308.               fileName
  309.             );
  310.             throw "Get non audio response with MIME type " + mime;
  311.           }
  312.  
  313.           try {
  314.             const match = res.headers
  315.               .get("Content-Range")
  316.               .match(contentRangeRegex);
  317.  
  318.             const startOffset = parseInt(match[1]);
  319.             const endOffset = parseInt(match[2]);
  320.             const totalSize = parseInt(match[3]);
  321.  
  322.             if (startOffset !== _next_offset) {
  323.               logger.error("Gap detected between responses.");
  324.               logger.info("Last offset: " + _next_offset);
  325.               logger.info("New start offset " + match[1]);
  326.               throw "Gap detected between responses.";
  327.             }
  328.             if (_total_size && totalSize !== _total_size) {
  329.               logger.error("Total size differs");
  330.               throw "Total size differs";
  331.             }
  332.  
  333.             _next_offset = endOffset + 1;
  334.             _total_size = totalSize;
  335.           } finally {
  336.             logger.info(
  337.               `Get response: ${res.headers.get(
  338.                 "Content-Length"
  339.               )} bytes data from ${res.headers.get("Content-Range")}`
  340.             );
  341.             return res.blob();
  342.           }
  343.         })
  344.         .then((resBlob) => {
  345.           if (_writable !== null) {
  346.             _writable.write(resBlob).then(() => {});
  347.           } else {
  348.             _blobs.push(resBlob);
  349.           }
  350.         })
  351.         .then(() => {
  352.           if (_next_offset < _total_size) {
  353.             fetchNextPart(_writable);
  354.           } else {
  355.             if (_writable !== null) {
  356.               _writable.close().then(() => {
  357.                 logger.info("Download finished", fileName);
  358.               });
  359.             } else {
  360.               save();
  361.             }
  362.           }
  363.         })
  364.         .catch((reason) => {
  365.           logger.error(reason, fileName);
  366.         });
  367.     };
  368.  
  369.     const save = () => {
  370.       logger.info(
  371.         "Finish downloading blobs. Concatenating blobs and downloading...",
  372.         fileName
  373.       );
  374.  
  375.       let blob = new Blob(_blobs, { type: "audio/ogg" });
  376.       const blobUrl = window.URL.createObjectURL(blob);
  377.  
  378.       logger.info("Final blob size in bytes: " + blob.size, fileName);
  379.  
  380.       blob = 0;
  381.  
  382.       const a = document.createElement("a");
  383.       document.body.appendChild(a);
  384.       a.href = blobUrl;
  385.       a.download = fileName;
  386.       a.click();
  387.       document.body.removeChild(a);
  388.       window.URL.revokeObjectURL(blobUrl);
  389.  
  390.       logger.info("Download triggered", fileName);
  391.     };
  392.  
  393.     const supportsFileSystemAccess =
  394.       'showSaveFilePicker' in unsafeWindow &&
  395.       (() => {
  396.         try {
  397.           return unsafeWindow.self === unsafeWindow.top;
  398.         } catch {
  399.           return false;
  400.         }
  401.       })();
  402.     if (supportsFileSystemAccess) {
  403.       unsafeWindow.showSaveFilePicker({
  404.         suggestedName: fileName,
  405.       }).then((handle) => {
  406.         handle.createWritable().then((writable) => {
  407.           fetchNextPart(writable);
  408.         }).catch((err) => {
  409.           console.error(err.name, err.message);
  410.         });
  411.       }).catch((err) => {
  412.         if (err.name !== 'AbortError') {
  413.           console.error(err.name, err.message);
  414.         }
  415.       });
  416.     } else {
  417.       fetchNextPart(null);
  418.     }
  419.   };
  420.  
  421.   const tel_download_image = (imageUrl) => {
  422.     const fileName =
  423.       (Math.random() + 1).toString(36).substring(2, 10) + ".jpeg"; // assume jpeg
  424.  
  425.     const a = document.createElement("a");
  426.     document.body.appendChild(a);
  427.     a.href = imageUrl;
  428.     a.download = fileName;
  429.     a.click();
  430.     document.body.removeChild(a);
  431.  
  432.     logger.info("Download triggered", fileName);
  433.   };
  434.  
  435.   logger.info("Initialized");
  436.  
  437.   // For webz /a/ webapp
  438.   setInterval(() => {
  439.     // All media opened are located in .media-viewer-movers > .media-viewer-aspecter
  440.     const mediaContainer = document.querySelector(
  441.       "#MediaViewer .MediaViewerSlide--active"
  442.     );
  443.     if (!mediaContainer) return;
  444.     const mediaViewerActions = document.querySelector(
  445.       "#MediaViewer .MediaViewerActions"
  446.     );
  447.     if (!mediaViewerActions) return;
  448.  
  449.     const videoPlayer = mediaContainer.querySelector(
  450.       ".MediaViewerContent > .VideoPlayer"
  451.     );
  452.     const img = mediaContainer.querySelector(".MediaViewerContent > div > img");
  453.     // 1. Video player detected - Video or GIF
  454.     // container > .MediaViewerSlides > .MediaViewerSlide > .MediaViewerContent > .VideoPlayer > video[src]
  455.     const downloadIcon = document.createElement("i");
  456.     downloadIcon.className = "icon icon-download";
  457.     const downloadButton = document.createElement("button");
  458.     downloadButton.className =
  459.       "Button smaller translucent-white round tel-download";
  460.     downloadButton.setAttribute("type", "button");
  461.     downloadButton.setAttribute("title", "Download");
  462.     downloadButton.setAttribute("aria-label", "Download");
  463.     if (videoPlayer) {
  464.       const videoUrl = videoPlayer.querySelector("video").currentSrc;
  465.       downloadButton.setAttribute("data-tel-download-url", videoUrl);
  466.       downloadButton.appendChild(downloadIcon);
  467.       downloadButton.onclick = () => {
  468.         tel_download_video(videoPlayer.querySelector("video").currentSrc);
  469.       };
  470.  
  471.       // Add download button to video controls
  472.       const controls = videoPlayer.querySelector(".VideoPlayerControls");
  473.       if (controls) {
  474.         const buttons = controls.querySelector(".buttons");
  475.         if (!buttons.querySelector("button.tel-download")) {
  476.           const spacer = buttons.querySelector(".spacer");
  477.           spacer.after(downloadButton);
  478.         }
  479.       }
  480.  
  481.       // Add/Update/Remove download button to topbar
  482.       if (mediaViewerActions.querySelector("button.tel-download")) {
  483.         const telDownloadButton = mediaViewerActions.querySelector(
  484.           "button.tel-download"
  485.         );
  486.         if (
  487.           mediaViewerActions.querySelectorAll('button[title="Download"]')
  488.             .length > 1
  489.         ) {
  490.           // There's existing download button, remove ours
  491.           mediaViewerActions.querySelector("button.tel-download").remove();
  492.         } else if (
  493.           telDownloadButton.getAttribute("data-tel-download-url") !== videoUrl
  494.         ) {
  495.           // Update existing button
  496.           telDownloadButton.onclick = () => {
  497.             tel_download_video(videoPlayer.querySelector("video").currentSrc);
  498.           };
  499.           telDownloadButton.setAttribute("data-tel-download-url", videoUrl);
  500.         }
  501.       } else if (
  502.         !mediaViewerActions.querySelector('button[title="Download"]')
  503.       ) {
  504.         // Add the button if there's no download button at all
  505.         mediaViewerActions.prepend(downloadButton);
  506.       }
  507.     } else if (img && img.src) {
  508.       downloadButton.setAttribute("data-tel-download-url", img.src);
  509.       downloadButton.appendChild(downloadIcon);
  510.       downloadButton.onclick = () => {
  511.         tel_download_image(img.src);
  512.       };
  513.  
  514.       // Add/Update/Remove download button to topbar
  515.       if (mediaViewerActions.querySelector("button.tel-download")) {
  516.         const telDownloadButton = mediaViewerActions.querySelector(
  517.           "button.tel-download"
  518.         );
  519.         if (
  520.           mediaViewerActions.querySelectorAll('button[title="Download"]')
  521.             .length > 1
  522.         ) {
  523.           // There's existing download button, remove ours
  524.           mediaViewerActions.querySelector("button.tel-download").remove();
  525.         } else if (
  526.           telDownloadButton.getAttribute("data-tel-download-url") !== img.src
  527.         ) {
  528.           // Update existing button
  529.           telDownloadButton.onclick = () => {
  530.             tel_download_image(img.src);
  531.           };
  532.           telDownloadButton.setAttribute("data-tel-download-url", img.src);
  533.         }
  534.       } else if (
  535.         !mediaViewerActions.querySelector('button[title="Download"]')
  536.       ) {
  537.         // Add the button if there's no download button at all
  538.         mediaViewerActions.prepend(downloadButton);
  539.       }
  540.     }
  541.   }, REFRESH_DELAY);
  542.  
  543.   // For webk /k/ webapp
  544.   setInterval(() => {
  545.     /* Voice Message */
  546.     const pinnedAudio = document.body.querySelector(".pinned-audio");
  547.     let dataMid;
  548.     let downloadButtonPinnedAudio =
  549.       document.body.querySelector("._tel_download_button_pinned_container") ||
  550.       document.createElement("button");
  551.     if (pinnedAudio) {
  552.       dataMid = pinnedAudio.getAttribute("data-mid");
  553.       downloadButtonPinnedAudio.className =
  554.         "btn-icon tgico-download _tel_download_button_pinned_container";
  555.       downloadButtonPinnedAudio.innerHTML =
  556.         '<span class="tgico button-icon">\uE93E</span>';
  557.     }
  558.     const voiceMessages = document.body.querySelectorAll("audio-element");
  559.     voiceMessages.forEach((voiceMessage) => {
  560.       const bubble = voiceMessage.closest(".bubble");
  561.       if (
  562.         !bubble ||
  563.         bubble.querySelector("._tel_download_button_pinned_container")
  564.       ) {
  565.         return; /* Skip if there's already a download button */
  566.       }
  567.       if (
  568.         dataMid &&
  569.         downloadButtonPinnedAudio.getAttribute("data-mid") !== dataMid &&
  570.         voiceMessage.getAttribute("data-mid") === dataMid
  571.       ) {
  572.         downloadButtonPinnedAudio.onclick = (e) => {
  573.           e.stopPropagation();
  574.           tel_download_audio(link);
  575.         };
  576.         downloadButtonPinnedAudio.setAttribute("data-mid", dataMid);
  577.         const link =
  578.           voiceMessage.audio && voiceMessage.audio.getAttribute("src");
  579.         if (link) {
  580.           pinnedAudio
  581.             .querySelector(".pinned-container-wrapper-utils")
  582.             .appendChild(downloadButtonPinnedAudio);
  583.         }
  584.       }
  585.     });
  586.  
  587.     // All media opened are located in .media-viewer-movers > .media-viewer-aspecter
  588.     const mediaContainer = document.querySelector(".media-viewer-whole");
  589.     if (!mediaContainer) return;
  590.     const mediaAspecter = mediaContainer.querySelector(
  591.       ".media-viewer-movers .media-viewer-aspecter"
  592.     );
  593.     const mediaButtons = mediaContainer.querySelector(
  594.       ".media-viewer-topbar .media-viewer-buttons"
  595.     );
  596.     if (!mediaAspecter || !mediaButtons) return;
  597.  
  598.     // If the download button is hidden, we can simply unhide it
  599.     if (mediaButtons.querySelector(".btn-icon.tgico-download")) {
  600.       const button = mediaButtons.querySelector(
  601.         "button.btn-icon.tgico-download"
  602.       );
  603.       if (button.classList.contains("hide")) {
  604.         button.classList.remove("hide");
  605.       }
  606.     }
  607.     // If forward button is hidden, we can simply unhide it too
  608.     if (mediaButtons.querySelector("button.btn-icon.tgico-forward")) {
  609.       const button = mediaButtons.querySelector(
  610.         "button.btn-icon.tgico-forward"
  611.       );
  612.       if (button.classList.contains("hide")) {
  613.         button.classList.remove("hide");
  614.       }
  615.     }
  616.  
  617.     if (mediaAspecter.querySelector(".ckin__player")) {
  618.       // 1. Video player detected - Video and it has finished initial loading
  619.       // container > .ckin__player > video[src]
  620.  
  621.       // add download button to videos
  622.       const controls = mediaAspecter.querySelector(
  623.         ".default__controls.ckin__controls"
  624.       );
  625.       const videoUrl = mediaAspecter.querySelector("video").src;
  626.  
  627.       if (controls && !controls.querySelector(".tel-download")) {
  628.         const brControls = controls.querySelector(
  629.           ".bottom-controls .right-controls"
  630.         );
  631.         const downloadButton = document.createElement("button");
  632.         downloadButton.className =
  633.           "btn-icon default__button tgico-download tel-download";
  634.         downloadButton.innerHTML =
  635.           '<span class="tgico button-icon">\uE93E</span>';
  636.         downloadButton.setAttribute("type", "button");
  637.         downloadButton.setAttribute("title", "Download");
  638.         downloadButton.setAttribute("aria-label", "Download");
  639.         downloadButton.onclick = () => {
  640.           tel_download_video(mediaAspecter.querySelector("video").src);
  641.         };
  642.         brControls.prepend(downloadButton);
  643.       }
  644.     } else if (
  645.       mediaAspecter.querySelector("video") &&
  646.       mediaAspecter.querySelector("video") &&
  647.       !mediaButtons.querySelector("button.btn-icon.tgico-download")
  648.     ) {
  649.       // 2. Video HTML element detected, could be either GIF or unloaded video
  650.       // container > video[src]
  651.       const videoUrl = mediaAspecter.querySelector("video").src;
  652.       const downloadButton = document.createElement("button");
  653.       downloadButton.className = "btn-icon tgico-download tel-download";
  654.       downloadButton.innerHTML =
  655.         '<span class="tgico button-icon">\uE93E</span>';
  656.       downloadButton.setAttribute("type", "button");
  657.       downloadButton.setAttribute("title", "Download");
  658.       downloadButton.setAttribute("aria-label", "Download");
  659.       downloadButton.onclick = () => {
  660.         tel_download_video(mediaAspecter.querySelector("video").src);
  661.       };
  662.       mediaButtons.prepend(downloadButton);
  663.     } else if (!mediaButtons.querySelector("button.btn-icon.tgico-download")) {
  664.       // 3. Image without download button detected
  665.       // container > img.thumbnail
  666.       if (!mediaAspecter.querySelector("img.thumbnail") || !mediaAspecter.querySelector("img.thumbnail").src) {
  667.         return;
  668.       }
  669.       const downloadButton = document.createElement("button");
  670.       downloadButton.className = "btn-icon tgico-download tel-download";
  671.       downloadButton.innerHTML =
  672.         '<span class="tgico button-icon">\uE93E</span>';
  673.       downloadButton.setAttribute("type", "button");
  674.       downloadButton.setAttribute("title", "Download");
  675.       downloadButton.setAttribute("aria-label", "Download");
  676.       downloadButton.onclick = () => {
  677.         tel_download_image(mediaAspecter.querySelector("img.thumbnail").src);
  678.       };
  679.       mediaButtons.prepend(downloadButton);
  680.     }
  681.   }, REFRESH_DELAY);
  682.  
  683.   // Progress bar container setup
  684.   (function() {
  685.     const body = document.querySelector("body");
  686.     const container = document.createElement("div");
  687.     container.id = "tel-downloader-progress-bar-container";
  688.     container.style.position = "fixed";
  689.     container.style.bottom = 0;
  690.     container.style.right = 0;
  691.     if (location.pathname.startsWith('/k/')) {
  692.       container.style.zIndex = 4;
  693.     } else{
  694.       container.style.zIndex = 1500;
  695.     }
  696.     container.style.padding = '1.6rem';
  697.     container.style.backgroundColor = 'rgba(0, 0, 0, 0.3)';
  698.     body.appendChild(container);
  699.   })();
  700. })();