UI enhancements

[hemantjadon]

There are many places in the application where the UI breaks down.

• The home page is nice and responsive

• But the feed page is the place where the design is not responsive enough.

• The UI breaks down and the app feels less sophisticated.

• This is the umbrella issue for the UI enhancement in feed component

• [X] Fix the responsiveness of feed cards

• [ ] Make separate button to show statistics on mobile, Make the info box UI better

• [x] The Image and video grids can be improved in design, Not including borders, and gracefully handling the 404 error for them

• [x] Improving the design of the header

[Achint08]

@hemantjadon Look out for these enhancements

• Displaying only one .m3u8 formatted videos. (This can be skipped currently).

• Tweets have either video or images linked to it. So if there is a tweet containing both video & images. The image will be the thumbnail for the video. Taking advantage of this, till the time video loads, we can show up the thumbnail.

• Also, use in-viewport directive, wherever possible, to avoid many parallel requests for videos/images. Otherwise, it will take a long time to load the videos. ( Even youtube does this)

• Add a feature to display image in overlay format. Much like how Twitter does. It will be like clicking on the image would display image on the full screen.

• If there are 1+ images linked to the tweets, due to the difference in size of images, uniformity is lost. To regain uniformity, either it can be implemented in twitter's way or look out some other alternative design.

• Even lookout for info-box UI enhancement. Instead of displaying info-box at the bottom for smaller screens. We can make a toggle to display aggregation data as an overlay lightbox.

@singhpratyush @hemantjadon Your views?

[singhpratyush]

a tweet containing both video & images.

I think that we can't have both video and image in the same Tweet. But loklak may be discovering images out of the raw HTML (which probably IS the thumb to the video). So yes, this can be done.

Other things look good.

[hemantjadon]

@Achint08 instead of inviewport directive I will switch the implementation to IntersectionObserver and implement the Loading of media content using the Observer API to detect changes and loading the media only when necessary

[Aaryan-kapur]

can i take this up and try to improve this further??