Posts containing multiple types of media only show one type

[juanpc2018]

some x posts contain multiple media files,
only the 1st is displayed, the other videos or photos are ignored.

[markcellus]

What's the feed? I may be able to recommend an alternative.

[juanpc2018]

https://twitter.com/Ingenieroypunto/status/1724161665778831513
https://nitter.net/Ingenieroypunto/status/1724161665778831513

[donjoe0]

Can confirm. Every instance I've tried shows only the first image in any multi-image post.

[masstes]

Multiple media types in tweets only partially visible

Current behavior

• When a tweet contains multiple types of media (e.g. photos, videos, GIFs), only one type is shown

Current Fix

1. Added videos field to Tweet type in types.nim:

Tweet* = ref object
  # ... existing fields ...
  video*: Option[Video]    # Keep for backward compatibility
  videos*: seq[Video]      # New field for multiple videos
  # ... rest of fields ...

2. Added renderAlbum overloads in tweet.nim:

# Original for backward compatibility
proc renderAlbum(tweet: Tweet): VNode =
  let groups = if tweet.photos.len < 3: @[tweet.photos]
               else: tweet.photos.distribute(2)
  # ... rendering logic ...

# New overload for direct photo arrays
proc renderAlbum(photos: seq[string]): VNode =
  let groups = if photos.len < 3: @[photos]
               else: photos.distribute(2)
  # ... same rendering logic ...

2. Modified media parsing in parser.nim:

with jsMedia, js{"extended_entities", "media"}:
  var isFirst = true  # Track first video for backward compatibility
  for m in jsMedia:
    case m{"type"}.getStr
    of "photo":
      result.photos.add m{"media_url_https"}.getImageStr
    of "video":
      if isFirst:
        result.video = some(parseVideo(m))  # Keep first video in main field
        isFirst = false
      else:
        result.videos.add parseVideo(m)     # Additional videos in sequence
    of "animated_gif":
      result.gif = some(parseGif(m))

3. Updated video rendering:

if tweet.video.isSome:
  renderVideo(tweet.video.get(), prefs, path)
  views = tweet.video.get().views
  # Render any additional videos
  for video in tweet.videos:
    renderVideo(video, prefs, path)

Current Limitations

• Multiple videos stack vertically in an unstructured way
• Video player UI becomes crowded with multiple players visible
• No grid layout for mixed media types
• Each video requires separate player controls which is suboptimal for UX

Future Improvements Needed

1. Implement proper grid layout for mixed media:

# Potential grid layout approach
proc renderMediaGrid(tweet: Tweet): VNode =
  let mediaCount = tweet.photos.len + tweet.videos.len + 
                  (if tweet.gif.isSome: 1 else: 0)
  buildHtml(tdiv(class="media-grid")):
    # Grid layout logic here

2. Add consolidated video player interface:

# Example of potential consolidated player
proc renderVideoGallery(videos: seq[Video]): VNode =
  buildHtml(tdiv(class="video-gallery")):
    tdiv(class="video-thumbnails"):
      for i, video in videos:
        # Thumbnail grid
    tdiv(class="video-player"):
      # Single player that loads selected video

3. Make video thumbnails expand to player on click
4. Consider carousel-style navigation for multiple videos

The core functionality works now (all media is visible and playable) but the UI/UX needs improvement. Priority was on fixing the functionality first while maintaining backward compatibility.

Technical Notes

• Had to maintain backward compatibility with existing single video field
• Avoided breaking changes to Tweet type structure

@zedeus This is a basic fix to get multiple media types working. You can work upon this draft, especially the UI/UX aspects mentioned above. The current implementation works but could use your expertise to make it more elegant and consistent with the rest of the codebase.