Add support for videos

React-static-tweets doesn’t current support videos. Here’s an example tweet:

On Twitter: https://twitter.com/sassal0x/status/1364207094614749184 Rendered Version: https://react-static-tweets.vercel.app/1364207094614749184

Would love any pointers on how/where one might start to implement this! 🙂

[DaniGuardiola]

@kevcodez I got it working but as mentioned in my last comment, it’d be better imo to do a more global refactor of the AST fetching code, because my current solution duplicates the calls to Twitter’s API and I think there might be a way to avoid it.

Maybe we could ship this under an option so that it’s opt-in for users who don’t mind the cost (extra requests could lead to problems with Twitter’s API rate-limits). Sort of like an experimental feature flag. What do you think @transitive-bullshit?

@kevcodez if you need to use this right now, feel free to build the package from my branch yourself, but be aware of the trade-offs. Also, although it works just fine, it hasn’t been tested thoroughly so it could break. Keep that in mind.

[DaniGuardiola]

Working on this already (as agreed with @iMuzz).

Here’s an update on my progress:

• The static-tweets ast parser is not finding the video media.
• That’s because it’s not there in the HTML in the first place (likely Twitter API change).
• The media URI is available through this URL:

syndication.twimg.com/tweet?id=1378452375296442371

Or, alternatively:

cdn.syndication.twimg.com/tweet?id=1378452375296442371

• Here’s the relevant part of the JSON returned:

{
  "video": {
    "aspectRatio": [
      249,
      220
    ],
    "contentType": "media_entity",
    "durationMs": 9934,
    "mediaAvailability": {
      "status": "available"
    },
    "poster": "https://pbs.twimg.com/ext_tw_video_thumb/1378452274570264576/pu/img/ytz1zFSu4mFOGGI_.jpg",
    "variants": [
      {
        "type": "video/mp4",
        "src": "https://video.twimg.com/ext_tw_video/1378452274570264576/pu/vid/498x440/s2-MGvS6ilwspHei.mp4?tag=12"
      },
      {
        "type": "application/x-mpegURL",
        "src": "https://video.twimg.com/ext_tw_video/1378452274570264576/pu/pl/bScvTVcujd7bUNjO.m3u8?tag=12"
      },
      {
        "type": "video/mp4",
        "src": "https://video.twimg.com/ext_tw_video/1378452274570264576/pu/vid/304x270/0xP7m72L6iuRzaht.mp4?tag=12"
      }
    ],
    "videoId": {
      "type": "tweet",
      "id": "1378452375296442371"
    },
    "viewCount": 473
  },
}

• Currently debugging the static-tweets fetcher and parser to figure out how to fix it. Looks promising though. I’m only worried about CORS-type issues, but maybe there’s still a workaround by using iframes or similar. Will continue this afternoon.

Will keep updating on this issue, and create a draft PR once I start having actual changes to push.