### Manage Download Progress Bars (JavaScript)

Source: https://context7.com/neet-nestor/telegram-media-downloader/llms.txt

This functionality creates, updates, and manages visual progress indicators for ongoing downloads. It supports multiple concurrent downloads and provides visual feedback for completion or abortion. Dependencies include the existence of the `createProgressBar`, `updateProgress`, `completeProgress`, and `AbortProgress` functions, which are assumed to be defined elsewhere.

```javascript
// Create progress bar for a new download
const videoId = 'k7x3m9p2_1672531200000'; // Random ID + timestamp
const fileName = 'vacation_video.mp4';

createProgressBar(videoId, fileName);
// Creates container with:
// - Dark/light mode styling based on HTML class
// - Filename display
// - Close button (×)
// - Progress bar at 0%

// Update progress during download
updateProgress(videoId, fileName, 25);
// Updates: "25%" text and progress bar width to 25%

updateProgress(videoId, fileName, 50);
// Updates: "50%" text and progress bar width to 50%

updateProgress(videoId, fileName, 100);
// Updates: "100%" text and progress bar width to 100%

// Mark as completed (green)
completeProgress(videoId);
// Changes progress bar color to #B6C649 and text to "Completed"

// Mark as aborted (red) on error
AbortProgress(videoId);
// Changes progress bar color to #D16666 and text to "Aborted"

// User can manually close progress bar by clicking × button
// Multiple progress bars can be displayed simultaneously for concurrent downloads
```

--------------------------------

### Inject Download Buttons into Telegram WebK (JavaScript)

Source: https://context7.com/neet-nestor/telegram-media-downloader/llms.txt

This script enhances Telegram WebK by automatically injecting download buttons into various media elements. It monitors the DOM for changes and adds buttons to videos, images, stories, and audio messages. The injection logic is designed to work with specific DOM structures found in Telegram WebK. It also handles unhiding existing download buttons if they are present but hidden.

```javascript
// Automatic injection - runs via setInterval(callback, 500)

// Example 1: Video in media viewer
// When user opens a video in full-screen media viewer:
// - Script detects: .media-viewer-whole > .media-viewer-aspecter > .ckin__player > video
// - Injects button into: .default__controls .bottom-controls .right-controls
// - Button HTML: <button class="btn-icon default__button tgico-download tel-download">
//                  <span class="tgico">⥥</span>
//                </button>
// - onclick triggers: tel_download_video(videoElement.src)

// Example 2: Image in media viewer
// When restricted image is opened:
// - Script detects: .media-viewer-aspecter > img.thumbnail[src]
// - Checks: no existing .tgico-download button
// - Injects button into: .media-viewer-buttons (top bar)
// - onclick triggers: tel_download_image(imageElement.src)

// Example 3: Story with video/image
// When story is opened:
// - Script detects: #stories-viewer
// - Injects button into: [class^='_ViewerStoryHeaderRight'] and [class^='_ViewerStoryFooterRight']
// - onclick checks for video.media-video or img.media-photo
// - Downloads whichever media type is present

// Example 4: Voice message
// When voice message is pinned:
// - Script detects: audio-element[data-mid] in .pinned-audio
// - Creates button: .btn-icon.tgico-download._tel_download_button_pinned_container
// - Injects into: .pinned-container-wrapper-utils
// - onclick triggers: tel_download_audio(audioElement.audio.src)

// The script also unhides official download buttons if they exist but are hidden:
const hiddenButtons = document.querySelectorAll('.media-viewer-buttons button.btn-icon.hide');
for (const btn of hiddenButtons) {
  btn.classList.remove('hide');
  if (btn.textContent === '\uE967') { // DOWNLOAD_ICON
    // Use official download instead of custom implementation
    customDownloadButton.onclick = () => btn.click();
  }
}
```

--------------------------------

### Download Audio from Telegram (JavaScript)

Source: https://context7.com/neet-nestor/telegram-media-downloader/llms.txt

Downloads audio files (voice messages) from Telegram, specifically for the WebK version. It fetches audio in chunks using Range headers and validates the MIME type. It does not display a progress bar for audio files and falls back to blob download if the File System Access API is not supported. Includes error handling for MIME type validation and content-range parsing.

```javascript
// Download audio/voice message from Telegram
const audioUrl = 'https://webk.telegram.org/stream/audio_message_data';

// Called when user clicks download button on audio element
tel_download_audio(audioUrl);

// The function automatically:
// 1. Generates filename: hashCode(url).toString(36) + ".ogg"
// 2. Fetches audio in chunks using Range headers
// 3. No progress bar displayed (audio files typically small)
// 4. Validates MIME type is audio/*
// 5. Uses File System Access API or blob download fallback
// 6. Triggers browser download

// Console output example:
// [Tel Download] a7b3c9d2.ogg: Get response: 32768 bytes data from bytes 0-32767/98304
// [Tel Download] a7b3c9d2.ogg: Get response: 32768 bytes data from bytes 32768-65535/98304
// [Tel Download] a7b3c9d2.ogg: Finish downloading blobs. Concatenating blobs and downloading...
// [Tel Download] a7b3c9d2.ogg: Final blob size in bytes: 98304
// [Tel Download] a7b3c9d2.ogg: Download triggered

// Error handling:
// - Non-audio MIME type validation
// - Content-Range parsing errors caught and logged
// - Continues fetching on recoverable errors
```

--------------------------------

### Download Video from Telegram (JavaScript)

Source: https://context7.com/neet-nestor/telegram-media-downloader/llms.txt

Downloads video files from Telegram by fetching content in chunks using HTTP range requests and displaying a progress bar. It handles file saving via File System Access API or blob fallback and includes error handling for network issues and incorrect MIME types. Supports WebK version.

```javascript
const videoUrl = 'https://webk.telegram.org/stream/{"dcId":5,"location":{...},"size":12345678,"mimeType":"video/mp4","fileName":"sample.MP4"}';

tel_download_video(videoUrl);

// The function automatically:
// 1. Parses the URL to extract filename from metadata if available
// 2. Creates a progress bar in the bottom-right corner
// 3. Fetches video in chunks using Range headers
// 4. Updates progress bar: "Progress: 25%", "Progress: 50%", etc.
// 5. Uses File System Access API if supported, otherwise falls back to blob download
// 6. Saves file with original filename or generates one: hashCode(url).toString(36) + ".mp4"

// Progress bar updates logged to console:
// [Tel Download] sample.MP4: URL: https://webk.telegram.org/stream/...
// [Tel Download] sample.MP4: Get response: 524288 bytes data from bytes 0-524287/12345678
// [Tel Download] sample.MP4: Progress: 4%
// [Tel Download] sample.MP4: Progress: 8%
// ...
// [Tel Download] sample.MP4: Download finished

// Error handling:
// - Non-200/206 responses: throws "Non 200/206 response was received: [status]"
// - Non-video MIME: throws "Get non video response with MIME type [mime]"
// - Gap in chunks: throws "Gap detected between responses"
// - Progress bar shows "Aborted" with red background on error
```

--------------------------------

### Inject Download Buttons into Telegram WebZ Media

Source: https://context7.com/neet-nestor/telegram-media-downloader/llms.txt

This JavaScript code monitors the DOM for media elements within Telegram WebZ's media viewers and story interfaces. It detects active media (videos, images, stories), extracts media URLs, and injects custom download buttons that blend with the native UI. It handles updates for navigated media, prevents duplicate buttons, and triggers download functions for videos and images.

```javascript
// Automatic injection for WebZ version - runs via setInterval(callback, 500)

// Example 1: Video in MediaViewer
// When user opens video in full screen:
// - Script detects: #MediaViewer .MediaViewerSlide--active .MediaViewerContent > .VideoPlayer
// - Gets video URL from: videoPlayer.querySelector('video').currentSrc
// - Injects button into video controls: .VideoPlayerControls .buttons (after .spacer)
// - Button HTML: <button class="Button smaller translucent-white round tel-download">
//                  <i class="icon icon-download"></i>
//                </button>
// - Also injects into top bar: .MediaViewerActions
// - Handles button updates when sliding between different videos
// - onclick triggers: tel_download_video(currentSrc)

// Example 2: Image in MediaViewer
// When restricted image is opened:
// - Script detects: #MediaViewer .MediaViewerSlide--active .MediaViewerContent > div > img[src]
// - Checks: no existing download button in .MediaViewerActions
// - Injects button with: data-tel-download-url attribute for tracking
// - Updates button onclick when user navigates to different image
// - onclick triggers: tel_download_image(img.src)

// Example 3: Story viewer
// When story is opened:
// - Script detects: #StoryViewer
// - Creates button: <button class="Button TkphaPyQ tiny translucent-white round tel-download">
// - Injects into: .GrsJNw3y or .DropdownMenu parent
// - onclick logic:
const storyDownloadButton = document.createElement('button');
storyDownloadButton.onclick = () => {
  const video = document.querySelector('#StoryViewer video');
  const videoSrc = video?.src || video?.currentSrc || video?.querySelector('source')?.src;
  if (videoSrc) {
    tel_download_video(videoSrc);
  } else {
    const images = document.querySelectorAll('#StoryViewer img.PVZ8TOWS');
    if (images.length > 0) {
      tel_download_image(images[images.length - 1].src);
    }
  }
};

// Button tracking and deduplication:
// - Uses data-tel-download-url attribute to track current media
// - Removes duplicate buttons if official download appears
// - Updates onclick handlers when media changes
// - Prevents button multiplication during rapid navigation

```

--------------------------------

### Download Image from Telegram (JavaScript)

Source: https://context7.com/neet-nestor/telegram-media-downloader/llms.txt

Downloads images from Telegram using a simple anchor-based download trigger. It generates a random filename, creates a temporary anchor element with a download attribute, and programmatically triggers a click to initiate the browser's download process. The anchor element is then removed from the DOM. Assumes JPEG format, but actual format is determined by the server's Content-Type.

```javascript
// Download image from Telegram
const imageUrl = 'https://webk.telegram.org/path/to/image.jpg';

// Called when user clicks download button on images in media viewer or stories
tel_download_image(imageUrl);

// The function automatically:
// 1. Generates random filename: (Math.random() + 1).toString(36).substring(2, 10) + ".jpeg"
// 2. Creates temporary anchor element with download attribute
// 3. Triggers click to initiate browser download
// 4. Removes anchor element from DOM
// 5. Logs download trigger

// Example filename generated: "k7x3m9p2.jpeg"

// Console output:
// [Tel Download] k7x3m9p2.jpeg: Download triggered

// Note: Assumes JPEG format. Actual format determined by server Content-Type.
// No progress tracking as images download instantly via browser.
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.