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.

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

Conversation

ButteredCats
Copy link
Contributor

Fixes the caption part of #91

Also makes the embedded images lazy load as a bonus.

Using the post in #91 it was kind of hard to tell what was a caption and what wasn't, but it was very clear in something like /r/test/comments/d9hta9/test_multiple_images/. Maybe the captions need tweaking CSS wise to stand out some more but I wasn't sure what the best way to do that was.

The code itself also isn't pretty. Especially removing the extra stuff from the image's caption. I couldn't find a better way to do that or to get the variable in scope for the if else where it determines whether it'll have a figcaption block or not. If there's a better way to go about any of it I heavily encourage you to just go ahead and change it.

@ButteredCats
Copy link
Contributor Author

Sorry for the constant fixes I swear I test this stuff 😅

src/utils.rs Outdated
Comment on lines 905 to 911
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.

…_caption to better reflect its usage, only replace quotes in image_caption when needed, and add comments for what some of the code does
@grandpa1946
Copy link

how do i go about and run this locally (https://github.com/ButteredCats/redlib/tree/fix_preview_captions)

@sigaloid
Copy link
Member

You can run:

git clone https://github.com/ButteredCats/redlib
cd redlib/
git checkout fix_preview_captions
cargo run

to test it out.

…text is inside them with the image, update test to reflect change in image replacing
@ButteredCats
Copy link
Contributor Author

ButteredCats commented Apr 14, 2024

Just ran into an issue with /r/australian/comments/1c3jn4x/australia_right_now/ where image_caption would be empty, and Redlib would panic. Now it checks if it's empty before trying to mess with it.

Also problems with specifically this comment /r/australian/comments/1c3jn4x/australia_right_now/kzioqh7/?context=3 where there's text inside of the paragraph before the image link, which is something I haven't seen till now. It would fail to embed because image_to_replace doesn't account for this. It seems Reddit refuses to embed things like that as well.

I updated the image replacement not to replace the <p>'s around the image so it would match again, however this makes it so there's extra space at the top and bottom of comments that are only an image and I can't find a fix for it. Check something like /r/travisscott/comments/135ev4e/travis_scott_getting_kicked_out_of_his_own/ if you want to see what that looks like now. It isn't awful, but I wonder if just failing to replace a weird formatting I've never seen before is better than causing that effect on all comments like that which I see pretty often.

@ButteredCats
Copy link
Contributor Author

It looks like there might still be issues with this getting stuck in an infinite loop for some reason. I've been running this branch in order to test and a couple times over the past two weeks I've had my instance die after Redlib starts using a lot of CPU and RAM and stops responding. I'll look into it and comment back with what I find.

@ButteredCats
Copy link
Contributor Author

Not sure what's up with the failed warnings check, I can't recreate those on my machine and they also don't seem to relate to anything I was touching?

Anyways, turns out the infinite loop had nothing to do with the image replacements themselves, but was instead caused by things like $0, $1, $2, etc to be interpreted as a regex capture group when doing the replace in REDDIT_PREVIEW_REGEX which usually led to a link being inserted over and over and forever replacing itself.

I opted to basically just make it ignore it by directly using a capture group, $2, which has everything after https://preview.redd.it. Since we're not just using the formatted URL anymore, it handles differentiating between normal and external previews by looking at the first capture group of REDDIT_PREVIEW_REGEX and using /preview/pre or /preview/external-pre it based on that.

@ButteredCats
Copy link
Contributor Author

ButteredCats commented May 24, 2024

After updating rust I see those warnings on my machine, however they happen on the main branch which was previously fine so I assume this is just the rust update itself.

I've added a little prettying for embed only comments, reducing weird gaps they had before. I've also added support for embedding i.redd.it links after realizing it'd be really easy to add in by just changing the regex and making it use /img for them.

@ButteredCats ButteredCats changed the title Update embedding Reddit preview links to include captions Update embedding Reddit preview links to include captions and support i.redd.it embeds May 24, 2024
@sigaloid sigaloid merged commit 6b2aab2 into redlib-org:main May 29, 2024
2 of 3 checks passed
@sigaloid
Copy link
Member

Thanks!

@ButteredCats ButteredCats deleted the fix_preview_captions branch July 26, 2024 15:03
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants