Inline gif support for comment section

[loukwn]

Hello there :wave: ! First time opening a PR in this project so sorry if I am not keeping the right etiquette here.

This feature has been something that I thought was missing in this app (tapping links just to see a gif has been a bit of annoyance to me) and it looks like I am not the only one (See https://github.com/Docile-Alligator/Infinity-For-Reddit/discussions/935). So I spent my Saturday hacking together something that looks like it works ok. My Java skills are quite rusty so bear with me on this (and do point me to better ways for doing things).

Design

• I checked how inline gifs look like in the web and it looks like they always have a height of 175 and then as much width as they want so they can keep their aspect ratio. So tried to follow that.
• Looks like Reddit atm only allows for one Giphy gif to be inlined. Might change at some point but thought I would make it easier and just do that.
• I chose to only inline Giphy gifs. It seems like Reddit considers some other sources (like internal websites) as trusted and inlines them but thought that these were quite more rare (most people just tap the gif button when composing a comment) and also required some more investigation. My initial inclination though was to only include the Giphy ones as these are more safe in general (no pornography etc.).

Other decisions

• Upon checking the code I saw that for comments there is a Markdown parser that parses and outputs the Spannables (?) in a list that gets placed inside a RecyclerView. This made it a bit awkward for me as it looks like the gif can be inlined even in between text lines. My proposed solution is:

  1. There are now 2 new views (both default as GONE) in the comment xml. An ImageView that plays the GIF and another RecyclerView below that for the markdown text that should go below the gif (if any).
  2. During the binding of the view the message is parsed, splitted and then the relevant views get hidden or shown etc.

• I had to cater for the case that the gif part of the message ([gif](...)) is inside a code block. It seems like Reddit does not inline those. I thought of two cases for this:

  1. The line with the gif part is indented 4 spaces in (which looks like makes it a code block)
  2. There is an odd number of backticks before the gif part which means we are in a code block as well.

• It is worth noting the performance aspect of the thing. Now all this code sits inside onBindViewHolder so all this parsing might slow down scrolling. Did not want to refactor large parts of the app but could be moved to a structure like a ViewModel or something. Also one thing to consider is whether a setting for this is needed that disables it for people that do not care and/or are on old devices.

Screen captures

(link used in these screen caps: https://www.reddit.com/r/InsanePeopleQuora/comments/kip08x/comment/ggsmzhy/?utm_source=share&utm_medium=ios_app&utm_name=iossmf&context=3)

before.webm

after.webm

[loukwn]

@RSBat Thanks a lot for your comment. I did not want to play with Markwon as I did not understand its internals but I do agree that what I have done is superficial and somewhat hacky. I think it makes sense and I can spend some time investigating it soon.

The topic of inlined gifs and other markdown elements gives me nightmares haha. Hopefully Markwon can sort this out on its own

[Docile-Alligator]

Thank you for your PR. I will look at this after the Reddit API things settle down.

[juliloving]

Can you add support for Tenor GIFs too? They're another trusted company and very popular in the gif space

[jakedemian]

Any updates here? I would love this feature to be merged.

[Docile-Alligator]

Thank you. I have implemented Gif block support (it should be called gif block since Reddit automatically puts gifs in their own block) using Markwon's parsers and plugins and entries. Less hacky.

[loukwn]

Ah good to see @Docile-Alligator ! Sorry I was afk for a while on this but life got in the way. Out of curiosity (and to expand my knowledge) could you show me where (in which file) that change took place?