fupdec / mediaChips

Manage your videos, add any metadata to them and play them.
https://mediachips.app
GNU General Public License v3.0
152 stars 20 forks source link

Animated Gif support #28

Open mf35 opened 3 years ago

mf35 commented 3 years ago

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:

fupdec commented 3 years ago

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.

mf35 commented 3 years ago

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 commented 3 years ago

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).

fupdec commented 3 years ago

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.

mf35 commented 3 years ago

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.

fupdec commented 3 years ago

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.

mf35 commented 2 years ago

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 ?

fupdec commented 2 years ago

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.

mf35 commented 2 years ago

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:

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.

fupdec commented 2 years ago

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.