Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Update embedding Reddit preview links to include captions and support i.redd.it embeds #92

Merged
merged 12 commits into from
May 29, 2024
Merged

Update embedding Reddit preview links to include captions and support i.redd.it embeds #92

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
6d83b07
Update embedding Reddit preview links to include captions where appli…
ButteredCats Apr 9, 2024
2c8f5a7
Make figure margins only apply to comments to bring embedded previews…
ButteredCats Apr 9, 2024
e581f43
Use substring instead of .remove and .pop, change image_text to image…
ButteredCats Apr 10, 2024
3f863c8
Prevent panic if image_caption is empty, don't replace <p>'s in case …
ButteredCats Apr 14, 2024
6484ebf
Fix failing check
ButteredCats Apr 14, 2024
50fad93
Fix infinite loop when replacing text that contains dollar signs
ButteredCats May 22, 2024
75b0149
Remove useless replace
ButteredCats May 22, 2024
b22fb7c
Fix embedded preview images having a gap from the top of a comment
ButteredCats May 22, 2024
2f2cded
Make sure new system can handle both normal and external previews
ButteredCats May 22, 2024
e9af28b
Make sure that the extra <p></p> at the bottom of a comment containin…
ButteredCats May 24, 2024
62b791b
Add in support for embedding i.redd.it images and gifs and remove lef…
ButteredCats May 24, 2024
3469235
Merge branch 'redlib-org:main' into fix_preview_captions
ButteredCats May 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 21 additions & 5 deletions src/utils.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -901,14 +901,30 @@ pub fn rewrite_urls(input_text: &str) -> String {
let formatted_url = format_url(REDDIT_PREVIEW_REGEX.find(&text1).map(|x| x.as_str()).unwrap_or_default());

let image_url = REDLIB_PREVIEW_LINK_REGEX.find(&formatted_url).map_or("", |m| m.as_str()).to_string();
let image_text = REDLIB_PREVIEW_TEXT_REGEX.find(&formatted_url).map_or("", |m| m.as_str()).to_string();
let mut image_text = REDLIB_PREVIEW_TEXT_REGEX.find(&formatted_url).map_or("", |m| m.as_str()).to_string();
if !image_text.is_empty() {
image_text.remove(0);
image_text.pop();
image_text.pop();
image_text.pop();
image_text.pop();
}
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sure exactly what this does but it should probably operate on a substring like image_text[1..image_text.len()-4] - if what you intend to do is remove the last 4 and first. Curious why this is done like this - can you think of a better way to do this?

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The first character of image_text is a >, and could stay, but it would require readding the .replace(">>", ">") to image_to_replace's assignment since image_url also contains a > at the end of it meaning we end up with >> in between {image_url} and {image_text} instead of just a single >. I figured just removing the first character is better than theoretically having the potential to replace an intentional >> somewhere else inside of image_text and having the replacement fail.

The last four need to be removed since they'll be an </a>, which we don't want appearing inside of the <figcaption> block. Although now that I think about it that can just be done within the if block since it isn't needed otherwise.

I'll modify it to use the substring instead and only drop the </a> when needed.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just made it use the substring as well as renaming image_text to image_caption and adding comments to make thing's functions and usages clearer.

I didn't make it so that the </a> is only dropped when image_caption is actually used to add a caption to the image as it seemed like an unnecessary extra step when it can be done at the same time as removing the first character.
However I did make it so that the quotes inside image_caption are only replaced when it's actually used as a caption since it wasn't needed otherwise.


let image_to_replace = format!("<p><a href=\"{image_url}{image_text}</a></p>");

image_text = image_text.replace("\\&quot;", "\"");

let image_to_replace = format!("<a href=\"{image_url}{image_text}").replace(">>", ">");
let image_replacement = format!("<a href=\"{image_url}<img src=\"{image_url}</a>");
let mut _image_replacement = String::new();

if REDDIT_PREVIEW_REGEX.find(&image_text).is_none() {
_image_replacement = format!("<figure><a href=\"{image_url}<img loading=\"lazy\" src=\"{image_url}</a><figcaption>{image_text}</figcaption></figure>");
} else {
_image_replacement = format!("<figure><a href=\"{image_url}<img loading=\"lazy\" src=\"{image_url}</a></figure>");
}

text1 = REDDIT_PREVIEW_REGEX
.replace(&text1, formatted_url)
.replace(&image_to_replace, &image_replacement)
.replace(&image_to_replace, &_image_replacement)
.to_string()
}
}
Expand Down Expand Up @@ -1169,6 +1185,6 @@ fn test_rewriting_image_links() {
<p><a href="https://preview.redd.it/bdfdxkjj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=d0fa420ece27605e882e89cb4711d75d774322ac">https://preview.redd.it/bdfdxkjj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=d0fa420ece27605e882e89cb4711d75d774322ac</a></p>
<p><a href="https://preview.redd.it/6awags382xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=9c563aed4f07a91bdd249b5a3cea43a79710dcfc">caption 1</a></p>
<p><a href="https://preview.redd.it/rbu2ca2b2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=afb538cf784d2e339de9a91aba5dc9c92e47988f">caption 2</a></p>"#;
let output = r#"<p><a href="/preview/pre/zq21ggkj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=539d8050628ec1190cac26468fe99cc66b6071ab"><img src="/preview/pre/zq21ggkj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=539d8050628ec1190cac26468fe99cc66b6071ab"></a></p> <p><a href="/preview/pre/vty9ocij2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=fc7c7ef993a5e9ef656d5f5d9cf8290a0a1df877"><img src="/preview/pre/vty9ocij2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=fc7c7ef993a5e9ef656d5f5d9cf8290a0a1df877"></a></p> <p><a href="/preview/pre/bdfdxkjj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=d0fa420ece27605e882e89cb4711d75d774322ac"><img src="/preview/pre/bdfdxkjj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=d0fa420ece27605e882e89cb4711d75d774322ac"></a></p> <p><a href="/preview/pre/6awags382xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=9c563aed4f07a91bdd249b5a3cea43a79710dcfc"><img src="/preview/pre/6awags382xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=9c563aed4f07a91bdd249b5a3cea43a79710dcfc"></a></p> <p><a href="/preview/pre/rbu2ca2b2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=afb538cf784d2e339de9a91aba5dc9c92e47988f"><img src="/preview/pre/rbu2ca2b2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=afb538cf784d2e339de9a91aba5dc9c92e47988f"></a></p>"#;
let output = r#"<figure><a href="/preview/pre/zq21ggkj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=539d8050628ec1190cac26468fe99cc66b6071ab"><img loading="lazy" src="/preview/pre/zq21ggkj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=539d8050628ec1190cac26468fe99cc66b6071ab"></a></figure> <figure><a href="/preview/pre/vty9ocij2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=fc7c7ef993a5e9ef656d5f5d9cf8290a0a1df877"><img loading="lazy" src="/preview/pre/vty9ocij2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=fc7c7ef993a5e9ef656d5f5d9cf8290a0a1df877"></a></figure> <figure><a href="/preview/pre/bdfdxkjj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=d0fa420ece27605e882e89cb4711d75d774322ac"><img loading="lazy" src="/preview/pre/bdfdxkjj2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=d0fa420ece27605e882e89cb4711d75d774322ac"></a></figure> <figure><a href="/preview/pre/6awags382xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=9c563aed4f07a91bdd249b5a3cea43a79710dcfc"><img loading="lazy" src="/preview/pre/6awags382xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=9c563aed4f07a91bdd249b5a3cea43a79710dcfc"></a><figcaption>caption 1</figcaption></figure> <figure><a href="/preview/pre/rbu2ca2b2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=afb538cf784d2e339de9a91aba5dc9c92e47988f"><img loading="lazy" src="/preview/pre/rbu2ca2b2xo31.png?width=2560&amp;format=png&amp;auto=webp&amp;s=afb538cf784d2e339de9a91aba5dc9c92e47988f"></a><figcaption>caption 2</figcaption></figure>"#;
assert_eq!(rewrite_urls(input), output);
}
16 changes: 12 additions & 4 deletions static/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -187,6 +187,11 @@ nav #redlib {
vertical-align: -2px;
}

figcaption {
margin-top: 5px;
text-align: center;
}

#settings_link {
opacity: 0.8;
margin-left: 10px;
Expand Down Expand Up @@ -979,10 +984,6 @@ a.search_subreddit:hover {
vertical-align: bottom;
}

.gallery figcaption {
margin-top: 5px;
}

.gallery .outbound_url {
color: var(--accent);
text-overflow: ellipsis;
Expand Down Expand Up @@ -1010,6 +1011,9 @@ a.search_subreddit:hover {

.post_body img {
max-width: 100%;
display: block;
margin-left: auto;
margin-right: auto;
}

.post_poll {
Expand Down Expand Up @@ -1187,6 +1191,10 @@ a.search_subreddit:hover {
}
}

.comment figure {
margin: 0;
}

.comment_left, .comment_right {
display: flex;
flex-direction: column;
Expand Down
Loading