mediaChips icon indicating copy to clipboard operation
mediaChips copied to clipboard

Animated Gif support

Open mf35 opened this issue 3 years ago • 10 comments

So i tried an interresting thing.

I wanted to have animated gif instead of fixed pictures for my tag cards, so i tried this but as it was expected with the "forced" crop system; when i crop and save a gif it only takes the first frame of it ands nothing is animated.

So i tried to simply replace the generated files in AVDB\userfiles\media\tags with animated gifs, and it worked fine. But i also had to change the .gif extension for a .jpg one. After that gifs all loaded and played.

In this regard i propose 2 things:

  • Make the uploaded picture cropping system an option so you can use animated gif without altering the imported file.
  • Be aware and make user aware of the ressource consumming problem that displaying multiple animated gifs can be, especially when they are heavy. If gifs are displayed when mouse hovering the card #27, it shouldn't cause cpu overload.

mf35 avatar Mar 06 '21 15:03 mf35

When you crop an image, the application converts it to jpeg format and also compresses it, makes it a little sharper, etc. I would not like to directly save the image to the database because some of them are too big. the same goes for gif animation. too large files will make the tag grid slow. and it will also be difficult to use the GIF at the same time as the second image that is displayed on hover #27. But there is an alternative solution.

I can add a feature with the creation of gifs from several pictures that the user adds. 3-5 pictures for example. there is one more complication. in the application, on hovering over the tag, the tag image appears. I don't know how it will work, but I think bad. it would be possible to leave a static image for the hover, and a gif for the tag grid.

could you test the tag grid with gifs? 20, 40, 60, etc.

the problem with hovering on a tag is that the hover event is fired multiple times. and GIF animation will probably be buggy and will start when the cursor moves for each pixel above the tag.

fupdec avatar Mar 06 '21 19:03 fupdec

I'm not saying that you should get rid of your crop system, because what you're saying makes sense: the app optimize the pictures so they are not too big and too heavy. No this is nice, you should keep it. I'm just suggesting to add an additional option to put a gif instead of a jpg, because currently the app support the animated gif displaying but there is no option for that. (just a non elegant workaround)

Then i'm suggesting to warn the user that the gif file will not be changed or optimized by the app, and that it could slow the app down if too many gifs displayed. Maybe add an option in settings to activate this gif import option. But you do not need to add a gif creator feature for that.

Currently i can have like 20's animated gifs running on tags page, displayed at the same time, and the app is not slowed down, but i can see my cpu usage goes up. So from one's computer to another, things can be a lot different. For information, i have some gif displayed which are kinda heavy: more than 300 mo.

Then, when i'm hovering on a "tag word" (like on the videos page) it is working too and it displays an animated gif on the cursor. But this does not slow down the app on my side, even if i goes from one tag word to another. It only takes more cpu power when multiple gifs are displayed at the same time. So no problem when i hover on a tag word with an animated gif.

But maybe you're talking about the hovering on a "tag's card", displaying an alternate picture which could be an animated gif. #27

mf35 avatar Mar 06 '21 19:03 mf35

Hi. I don't know if i have to open an issue for that, since it's not linked to a natural use of the app, but it is linked to this request.

I'm using the workaround to display animated gifs (instead of jpeg) in a lot of places, but i encounter performances issues: When too much animated gifs are displayed simultaneously on screen, the app becomes very laggy, almost unresponsive, scrolling becomes very jerky. It is clearly linked to the number of animated gifs appearing on screen, because the problem is slightly more solved when i increase the cards size (so there are less on screen simultaneously)

So i tried to scatter animated gifs on different meta pages and assigned them only to alternate or custom pictures, so they are only displayed when i hover the mouse on the cards.

But still, everything seems to be loaded on background everytime i go on a page, even i already came earlier on it. (each time i go on a page, every pictures are loaded once again and again, like there was no cache)

Furthermore, it seems that when i cycle through all my pages and have displayed a certain amount of gifs, the app become fully "blank" and nothing appears anymore. (nothing like really nothing, only the background color). Looks like a saturated memory problem or something like that.

I know i saw some things going red on the performance tab in the dev panel, but i can't verify that anymore (Ctrl + Shift + L doesn't open dev panel anymore).

mf35 avatar Jul 19 '21 15:07 mf35

yes, it looks like there is a certain limit on the size of cached objects. the whole application is one huge page, which is always open in the same tab of the Chrome browser. when you go to different pages of the application, the browser cache is not cleared and all pictures are most likely stored in RAM. I found mention that Chrome has a 2GB cache limit. I don't think you could exceed it. Have you tried to find a page with a lot of GIFs on the Internet? wondering how well it works. To be honest, I was not interested in the work of the browser cache and how exactly it loads objects.

fupdec avatar Jul 19 '21 16:07 fupdec

I don't have any problems on web pages with a lot of animated gifs. But i don't understand, you're saying that the browser cache is not cleared, though every pictures / animated gifs seem to be reloaded everytime i come back on a page, like there is no cache at all.

Is it normal that the dev panel is not available anymore ? I remember there were some clues in performances tab there.

mf35 avatar Jul 20 '21 14:07 mf35

in recent versions, developer tools cannot be opened. I will be able to open them back soon. pictures appear slowly because the entire page is rendered again and the browser first looks for pictures in the cache and then on disk. you can track all pictures in sources, in development tools.

fupdec avatar Jul 20 '21 14:07 fupdec

Allright. Now that we can show up the developper tools panel again, i tried to use animated gifs again. I opened up the "Memory" tab, while displaying gifs more and more.

Here is a screenshot of the panel. I really don't know what it means or if i'm watching the right thing.

mediachips

So as you can see, suddenly the app turns to "blank" and nothing else can be done. Do you think this issue will be resolved when you'll integrate pictures support ?

mf35 avatar Sep 13 '21 15:09 mf35

I have not worked with application memory before. The application is one tab from the Chrome browser. Therefore, all restrictions for the browser tab are equal to the restrictions of the application.

As you wrote earlier, I also tried to visit sites with a lot of animated images and everything works well, even if you scroll down the page far. These were pages with endless loading.

But cards are a complex structure in themselves, so it is not correct to compare them with images.

So, back to the developer tools. To be honest, I use the Console and Elements tabs a lot, but I rarely use the others. Therefore, I cannot say for sure where you can track the activity associated with the application's memory.

You should search the internet for guides. If you don’t want to wait for me to take care of this issue myself.

I am currently working on adding images and other media to the application. Perhaps when I am faced with the problem of displaying a large number of images, then I will tackle this issue.

Sorry for not helping in any way with this problem, it's just a specific task that doesn't have a high priority. Again, perhaps it will be solved when adding pictures. And then all that remains is to add the ability to attach gifs to cards.

fupdec avatar Sep 14 '21 13:09 fupdec

Thank you for your reply. And that's ok, we're only talking about it :)

The problem is wierd at first because, to give you a more precise painting of what i'm using:

  • I have 8 complex meta pages.
  • Each have separatly 34, 29, 6, 5, 6, 18, 61 and 6 cards.
  • Each cards have a non animated main picture + an animated alt picture (when hovering) + an animated custom picture (number 1 on the right side of the card).

So all the pictures displayed are non-animated pictures, but whenever i hover over a card, it seems to load every animated pictures from every cards. Like it was displaying and rendering all animated pictures at once.

The weird thing being the failure of the "render process" in my screenshot. So i don't know if it's a memory problem (numbers i see seem to not reach very high heights), or if it's a rendering "graphic" problem.

I'll Google that when i have time.

mf35 avatar Sep 14 '21 22:09 mf35

The only thing I can say is that I agree with you, it is strange if this is really the case. I have not worked with GIF images, maybe they are really activated after hovering, but I doubt it.

fupdec avatar Sep 15 '21 12:09 fupdec