Remove Videos from feed on desktop

[SeenLenz]

Currently there is a way to block reels and to disable loading videos for data saving purposes. The problem is that as of now videos ( basically reels but on desktop ) still appear in the feed but without any content making the feed itself akward and spotty since the video to image ration is around 4:1 meaning only every 5th post is an actual image. I would be willing to implement this however i need feedback if this would be something other people might find interesting, or is inline with the intentions of IGPlus.

[gerwld]

Hello, @SeenLenz! Yes, it will definitely be beneficial for this project if you have an idea of how to implement it without breaking the Observer API-based posts loading scroll. Any pull request are highly appreciated here, and many people have asked about implementing that feature correctly. Just let me know if you need some help with it, or anything. (You can contact me directly here or via email at pjaworski.dev@gmail.com)

[SeenLenz]

@gerwld Hi!, I did a quick test, and on the home page all posts containing videos conveniently have a "video" tag, simply setting their height to 0 basically does the job. Unlike display, it's in the DOM and unlike visibility hidden, it still has a position and dimension so intersection can be calculated.

One slight issue I have found with this is that because of the reduced "buffer zone" Instagram has to load images since now the images have a height of 0, and one can easily scroll past them. I have not found this problematic but if it is I really will have to outplay the Observable API somehow but that's up to you to decide.

I have never developed an extension before so I'm not familiar with the standards one needs to follow when developing them, however, if this solution suffices then the main issue is fixed, my next question is:

Should I go on to implement a similar feature to the discover and profile pages as well?

From what I can tell this is a bit more problematic and the best way to determine if they are reels or images is through the content of their href tag. However, on the discover page they are loaded in chunks of 6 cubes, while on profile pages they are loaded in chunks of 3. Although we can remove any reel or video, and lazy loading still works because the wrappers are the elements being checked, the feed will now have holes.

Solving this seems to be the most complex task and I don't have a solution for this right now, but if you think my previous ideas are sound I would start developing a solution along these lines.

[SeenLenz]

Also, a quick thought you are more familiar with their infrastructure, and there probably is some detectable difference between the videos and images they receive from the network, could the extension act as a sort of firewall and block any type of video from even reaching the frontend preventing the need to handle it with the dom and improving performance since they are not even loaded... now that I think of it, is this what the "block all videos to reduce traffic usage" does?

[gerwld]

Unlike display, it's in the DOM, and unlike visibility: hidden, it still has a position and dimension, so intersection can be calculated.

Okay, I understand. I had a CSS snippet that could hide only the posts containing videos, and if I remember correctly, it was implemented using the :has() feature. But the Observer API part tracks the relation between the bottom of a second parent div (parent of all the posts combined, single div) and the bottom of the window viewport. Most likely, it can be implemented by somehow adding an extra space at the bottom of that div (padding, for example), but it might also confuse users, as it would create an empty scrollable space.
A better solution would be to find that observer part (which fetches new posts when user reaches the certain point on scroll) and override it with the same exact scenario but with proper calculation (by excluding each hidden post’s height from it). Or, some form of a UI changes, that will make it at least less appealing

Solving this seems to be the most complex task, and I don't have a solution for it right now. But if you think my previous ideas are sound, I would start developing a solution along these lines.

Sadly, it's true. That's the main reason I simply hide the videos from the posts and applied the pseudo-class on top of it—so it doesn't confuse end users while still doing the job, somehow.

[gerwld]

Also, a quick thought you are more familiar with their infrastructure, and there probably is some detectable difference between the videos and images they receive from the network, could the extension act as a sort of firewall and block any type of video from even reaching the frontend preventing the need to handle it with the dom and improving performance since they are not even loaded... now that I think of it, is this what the "block all videos to reduce traffic usage" does?

Good idea, I see what you are asking. I actually tried implementing it that way, but all it causes is a broken video sign, as they map the posts without checking if the video is corrupted or cannot be loaded on the frontend side.

For now, the "block all videos to reduce traffic usage" option is added in the easiest and most convenient way- by adding global CSS overrides that exclude videos or images from the DOM. On mobile and low-end devices, even a simple event loop can cause significant trouble. So for now I prefer to keep it as is, unless I've got an extra time to implement it properly