Skip to content

Commit

Permalink
Added preview screen button. Updated name Reddit Download Buttons
Browse files Browse the repository at this point in the history
  • Loading branch information
@956MB
956MB committed Nov 25, 2024
1 parent 7291207 commit 8f13c9b
Show file tree
Hide file tree
Showing 7 changed files with 82 additions and 32 deletions.
8 changes: 7 additions & 1 deletion CHANGELOG.md
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
# Changelog

All notable changes to the Reddit Image Downloader extension will be documented in this file.
All notable changes to the `Reddit Download Buttons` extension will be documented in this file.

## 1.3.2 - 2024-11-25

##### Added

- Added download button to the bottom bar of image preview screen. (Reached by clicking 'Open * in new tab' on an image post)

## 1.3.1 - 2024-11-23

Expand Down
16 changes: 9 additions & 7 deletions README.md
View file
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
<div align="center">

# Reddit Download Button
# Reddit Download Buttons

[![Greasy Fork Version](https://img.shields.io/greasyfork/v/501718?style=for-the-badge&logo=tampermonkey&logoColor=white&labelColor=4c4c4c&color=D93A00&borderRadius=8)](https://greasyfork.org/en/scripts/501718-reddit-image-downloader) [![Greasy Fork Total](https://img.shields.io/greasyfork/dt/501718?style=for-the-badge&logo=docusign&logoColor=white&label=installs&labelColor=4c4c4c&color=D93A00&borderRadius=8)](https://greasyfork.org/en/scripts/501718-reddit-image-downloader) [![Greasy Fork Daily](https://img.shields.io/greasyfork/dd/501718?style=for-the-badge&logo=addthis&logoColor=white&label=daily&labelColor=4c4c4c&color=D93A00&borderRadius=8)](https://greasyfork.org/en/scripts/501718-reddit-image-downloader) [![MIT License](https://img.shields.io/badge/License-MIT-D93A00.svg?style=for-the-badge&borderRadius=8)](https://opensource.org/licenses/MIT)
[![Greasy Fork Version](https://img.shields.io/greasyfork/v/501718?style=for-the-badge&logo=tampermonkey&logoColor=white&labelColor=4c4c4c&color=FF2700&borderRadius=8)](https://greasyfork.org/en/scripts/501718-reddit-image-downloader) [![Greasy Fork Total](https://img.shields.io/greasyfork/dt/501718?style=for-the-badge&logo=docusign&logoColor=white&label=installs&labelColor=4c4c4c&color=FF2700&borderRadius=8)](https://greasyfork.org/en/scripts/501718-reddit-image-downloader) [![Greasy Fork Daily](https://img.shields.io/greasyfork/dd/501718?style=for-the-badge&logo=addthis&logoColor=white&label=daily&labelColor=4c4c4c&color=FF2700&borderRadius=8)](https://greasyfork.org/en/scripts/501718-reddit-image-downloader) [![MIT License](https://img.shields.io/badge/License-MIT-FF2700.svg?style=for-the-badge&borderRadius=8)](https://opensource.org/licenses/MIT)

The browser extension that I've always wanted for Reddit... download buttons for easily saving images within posts. It's exactly what a data hoarder needs! *Does not require Reddit login.*

![Reddit Image and Video Downloader](./img/screenshot.png)
![Reddit Download Buttons Post](./img/post.png)

![Reddit Download Buttons Preview](./img/preview.png)

</div>

Expand All @@ -19,15 +21,15 @@ The browser extension that I've always wanted for Reddit... download buttons for
- Detects the highest resolution version of images for download

>[!WARNING]
> Currently the extension doesn't work on videos due to some `m3u8` shenanigins I couldn't get to work. Please feel free to help with an [issue](https://github.com/956MB/reddit-download-button/issues) or [pull request](https://github.com/956MB/reddit-download-button/pulls).
> Currently the extension doesn't work on inline videos due to some `m3u8` thing I couldn't get to work. Please feel free to help with an [issue](https://github.com/956MB/reddit-download-button/issues) or [pull request](https://github.com/956MB/reddit-download-button/pulls).
## Supported Browsers:

##### *Chromium-based*

| Browser | Last Tested Version (Chromium Engine) |
|:--------|:--------------------------------------|
| [Arc](https://arc.net/download) | 1.63.1 (129.0.6668.90) |
| [Arc](https://arc.net/download) | 1.70.0 (131.0.6778.86) |
| [Brave](https://brave.com/download/) | 1.67.123 (126.0.6478.126) |
| [Chrome](https://www.google.com/chrome/browser-tools/) | 126.0.6478.127 (126.0.0.0) |
| [Chromium](https://download-chromium.appspot.com/) | 128.0.6580.0 (128.0.0.0) |
Expand Down Expand Up @@ -75,11 +77,11 @@ The browser extension that I've always wanted for Reddit... download buttons for

## Changelog

[1.3.1](./CHANGELOG.md#131---2024-11-23) - 2024-11-23
[1.3.2](./CHANGELOG.md#132---2024-11-25) - 2024-11-25

##### Added

- Added visual indication images have downloaded in post button. Button goes from image icon and "Download Images (9)", to a checkmark and "Downloaded". The button state goes back to original when hovered and can still be used again. Right now the post download states are not saved in LocalStorage.
- Added download button to the bottom bar of image preview screen. (Reached by clicking 'Open * in new tab' on an image post)

For a full list of changes and past versions, please see the [CHANGELOG.md](CHANGELOG.md)

Expand Down
84 changes: 63 additions & 21 deletions content.js
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
// ==UserScript==
// @name Reddit Image Download Button
// @description Adds buttons to easily download images from Reddit
// @version 1.3.1
// @name Reddit Download Buttons
// @description Adds buttons to easily download images/videos from Reddit
// @version 1.3.2
// @author Alexander Bays (956MB)
// @namespace https://github.com/956MB/reddit-download-button
// @match https://*.reddit.com/*
Expand All @@ -18,29 +18,31 @@
count = 1,
type = 'Image',
isZip = false,
isLightbox = false
isLightbox = false,
isPreview = false
} = options;

const btn = document.createElement("button");
let buttonContent;

const previewIcon = `<svg rpl="" fill="currentColor" stroke="currentColor" stroke-width="0.5" height="20" width="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.97 11.03a.75.75 0 111.06-1.06L11 14.94V2.75a.75.75 0 011.5 0v12.19l4.97-4.97a.75.75 0 111.06 1.06l-6.25 6.25a.75.75 0 01-1.06 0l-6.25-6.25zm-.22 9.47a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H4.75z"/></svg>`
const lightboxIcon = `<svg rpl="" fill="currentColor" stroke="currentColor" stroke-width="1" height="26" width="22" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M4.97 11.03a.75.75 0 111.06-1.06L11 14.94V2.75a.75.75 0 011.5 0v12.19l4.97-4.97a.75.75 0 111.06 1.06l-6.25 6.25a.75.75 0 01-1.06 0l-6.25-6.25zm-.22 9.47a.75.75 0 000 1.5h14.5a.75.75 0 000-1.5H4.75z"/></svg>`;
const zipIcon = `<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="currentColor">
<path d="M17.005 2.73l-1.726-.999.996-1.731 1.725.999-.995 1.731zm-.87 1.669l-1.809-.678-.681 1.88 1.808.677.682-1.879zm-1.148 3.601h-1.987v2h1.987v-2zm-8.987-7.001l1.725-.999.996 1.731-1.726.999-.995-1.731zm2.547 5.28l1.808-.677-.681-1.88-1.809.677.682 1.88zm.466 3.721h1.987v-2h-1.987v2zm7.837 9l-1.852-7h-5.996l-1.852 7c-.786 3.156 1.602 5 4.85 5 3.252 0 5.635-1.848 4.85-5zm-7.848 1.125c0-2.627 5.992-2.688 5.992-.007 0 2.555-5.992 2.536-5.992.007z"/></svg>`;
const downloadIcon = `<svg rpl="" aria-hidden="true" class="icon-download" fill="currentColor" height="20" width="20" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg"><path d="M30 2.497h-28c-1.099 0-2 0.901-2 2v23.006c0 1.099 0.9 2 2 2h28c1.099 0 2-0.901 2-2v-23.006c0-1.099-0.901-2-2-2zM30 27.503l-28-0v-5.892l8.027-7.779 8.275 8.265c0.341 0.414 0.948 0.361 1.379 0.035l3.652-3.306 6.587 6.762c0.025 0.025 0.053 0.044 0.080 0.065v1.85zM30 22.806l-5.876-6.013c-0.357-0.352-0.915-0.387-1.311-0.086l-3.768 3.282-8.28-8.19c-0.177-0.214-0.432-0.344-0.709-0.363-0.275-0.010-0.547 0.080-0.749 0.27l-7.309 7.112v-14.322h28v18.309zM23 12.504c1.102 0 1.995-0.894 1.995-1.995s-0.892-1.995-1.995-1.995-1.995 0.894-1.995 1.995c0 1.101 0.892 1.995 1.995 1.995z"></path></svg>`;
const checkIcon = `<svg rpl="" aria-hidden="true" class="icon-check" fill="currentColor" height="20" width="20" viewBox="0 0 48 48" xmlns="http://www.w3.org/2000/svg"><polygon points="41.6,11.1 17,35.7 6.4,25.1 3.6,28 17,42.3 44.4,13.9"/></svg>`;

if (isLightbox) {
if (isPreview) {
btn.className = "reddit-image-downloader-button-bottom-bar button border-md flex flex-row justify-center items-center h-xl font-semibold relative hidden s:block text-12 button-secondary inline-flex items-center px-sm";
btn.setAttribute("style", "height: var(--size-button-md-h); font: var(--font-button-sm);");
} else if (isLightbox) {
btn.className = "reddit-image-downloader-button-lightbox absolute top-sm left-sm duration-300 opacity-100 button-large px-[var(--rem14)] button-media items-center justify-center button inline-flex";
btn.setAttribute("aria-label", "Download image");
btn.setAttribute("data-testid", "download-button");
} else {
btn.className = `reddit-image-downloader-button-${isZip ? 'zip' : 'post'} button border-md flex flex-row justify-center items-center h-xl font-semibold relative text-12 button-secondary inline-flex items-center px-sm hover:text-secondary hover:bg-secondary-background-hover hover:border-secondary-background-hover`;
btn.setAttribute("style", "height: var(--size-button-sm-h); font: var(--font-button-sm)");
}

btn.setAttribute("rpl", "");
btn.setAttribute("data-post-click-location", `download-${isZip ? 'zip-' : ''}button`);
btn.setAttribute("data-post-id", postId);
btn.setAttribute("type", "button");

Expand All @@ -58,6 +60,14 @@
${zipIcon}
</span>
`;
} else if (isPreview) {
buttonContent = `
<span class="flex items-center">
<span class="flex text-20">
${previewIcon}
</span>
</span>
`;
} else {
const text = `Download ${type}${count > 1 ? `s (${count})` : ""}`;
buttonContent = `
Expand All @@ -73,7 +83,7 @@

btn.innerHTML = buttonContent;

if (!isLightbox && !isZip) {
if (!isLightbox && !isZip && !isPreview) {
const originalText = `Download ${type}${count > 1 ? `s (${count})` : ""}`;

btn.updateText = (text, completed = false) => {
Expand All @@ -87,19 +97,14 @@
if (iconSpan) iconSpan.innerHTML = checkIcon;
const downloadedText = count > 1 ? `Downloaded (${count})` : 'Downloaded';

const showDownloadState = () => {
textSpan.textContent = originalText;
iconSpan.innerHTML = downloadIcon;
screenReaderContent.textContent = originalText;
};
const showDownloadedState = () => {
textSpan.textContent = downloadedText;
iconSpan.innerHTML = checkIcon;
screenReaderContent.textContent = downloadedText;
const showState = (text, icon) => {
textSpan.textContent = text;
iconSpan.innerHTML = icon;
screenReaderContent.textContent = text;
};

btn.addEventListener('mouseenter', showDownloadState);
btn.addEventListener('mouseleave', showDownloadedState);
btn.addEventListener('mouseenter', () => showState(originalText, downloadIcon));
btn.addEventListener('mouseleave', () => showState(downloadedText, checkIcon));
}
};
}
Expand Down Expand Up @@ -181,9 +186,31 @@
closeButton.parentNode.insertBefore(lightboxButton, closeButton);
};

const addPreviewButton = () => {
const bottomBar = document.querySelector("post-bottom-bar");
if (!bottomBar) return;
const shadowRoot = bottomBar.shadowRoot;
if (!shadowRoot) return;

const buttonContainer = shadowRoot.querySelector('div.flex.flex-row.gap-\\[1rem\\].items-center');
if (!buttonContainer) return;
if (buttonContainer.querySelector(".reddit-image-downloader-button-bottom-bar")) return;

const downloadButton = createDownloadButton(bottomBar.getAttribute("permalink"), {
count: 1,
type: 'Image',
isPreview: true
});
const firstLink = buttonContainer.querySelector('a');
if (firstLink) {
buttonContainer.insertBefore(downloadButton, firstLink);
}
};

const addButtons = () => {
addPostButtons();
addLightboxButton();
addPreviewButton();
};

const getPostTitle = (post) => {
Expand Down Expand Up @@ -228,6 +255,21 @@
};

const downloadMedia = async (postId, isLightbox, asZip = false, btn = null) => {
if (postId.startsWith('/r/')) {
const content = document.querySelector('faceplate-tracker zoomable-img img') ||
document.querySelector('faceplate-tracker zoomable-img video');

if (content) {
const urls = [content.src];
const titleMatch = postId.match(/\/([^/]+)\/$/);
const postTitle = titleMatch ? titleMatch[1] : "untitled";
const extension = (content.tagName === 'VIDEO') ? '.mp4' : '.png';

await downloadQueue(urls, [], postTitle, extension, false, false, btn);
return;
}
}

const post = document.getElementById(postId);
if (!post) return alert("Error: Could not find post content");
const mediaContainer = post.querySelector('div[slot="post-media-container"]');
Expand Down Expand Up @@ -380,7 +422,7 @@
};

const init = () => {
console.log(`Reddit Image Downloader v1.3.1 Init`);
console.log(`Reddit Image Downloader v1.3.2 Init`);
console.log("- https://github.com/956MB/reddit-download-button");
addButtons();
new MutationObserver(() => addButtons()).observe(document.body, { childList: true, subtree: true });
Expand Down
Binary file added img/post.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/preview.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file removed img/screenshot.png
View file
Binary file not shown.
6 changes: 3 additions & 3 deletions manifest.json
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
{
"manifest_version": 3,
"name": "Reddit Download Button",
"version": "1.3.1",
"description": "Adds buttons to easily download images from Reddit",
"name": "Reddit Download Buttons",
"version": "1.3.2",
"description": "Adds buttons to easily download images/videos from Reddit",
"permissions": [
"activeTab",
"downloads",
Expand Down

0 comments on commit 8f13c9b

Please sign in to comment.