Provide an extensible mechanism for thumbnail configuration and customization

Created on 11 January 2024, 11 months ago
Updated 1 March 2024, 10 months ago

Problem/Motivation

OEmbed allows to use playlist on the remote videos media types.
The valid URL are:

  1. https://www.youtube.com/watch?v=MrNYIbGIkac&list=PLtaXuX0nEZk9MKY_ClWcPk...
  2. https://www.youtube.com/playlist?list=PLtaXuX0nEZk9MKY_ClWcPkGtOEGyLTyCO

The Youtube Enhancer can add the thumbnail on the first case because the thumbnail or the video is on the URL "watch?v=MrNYIbGIkac" but on the second case, the thumbnail can not be generated because the list does not have a thumbnail itself.

Steps to reproduce

  1. Apply the patch from https://www.drupal.org/i/3397558 β†’ , this patch will allow to embed the second case correctly.
  2. Create media remote video using YouTube and a playlist URL like "https://www.youtube.com/playlist?list=PLtaXuX0nEZk9MKY_ClWcPkGtOEGyLTyCO".
  3. Add the media to a content to visualize it.
  4. The result will be a default thumbnail:

Proposed resolution

Add an API to the ProviderEnhancer plugin that allows enhancers to alter oembed metadata when assets are created. This will allow provider-specific implementation details to be added predictably and performantly.

For example: Use the YouTube API to get the playlist thumbnail.
Example: "https://www.youtube.com/oembed?url=youtube.com/playlist?list=PLtaXuX0nEZ...".
The URL will return a JSON with the thumbnail:

{
  "title": "Drupal Training - Site Building",
  "author_name": "Acquia",
  "author_url": "/@AcquiaTV",
  "type": "video",
  "height": 113,
  "width": 200,
  "version": "1.0",
  "provider_name": "YouTube",
  "provider_url": "https://www.youtube.com/",
  "thumbnail_height": 360,
  "thumbnail_width": 480,
  "thumbnail_url": "https://i.ytimg.com/vi/rAR1QDAS7og/hqdefault.jpg",
  "html": "<iframe width=\"200\" height=\"113\" src=\"https://www.youtube.com/embed/videoseries?list=PLpVC00PAQQxGFC06mLqoPT4hHaA1Ykn2Z\" frameborder=\"0\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen></iframe>"
}
✨ Feature request
Status

Fixed

Version

2.1

Component

Code

Created by

πŸ‡ͺπŸ‡ΈSpain eduardo morales alberti Spain, πŸ‡ͺπŸ‡Ί

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

  • πŸ‡ͺπŸ‡ΈSpain eduardo morales alberti Spain, πŸ‡ͺπŸ‡Ί
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.2.x + Environment: PHP 8.1 & MySQL 8
    last update 11 months ago
    48 pass
  • Open in Jenkins β†’ Open on Drupal.org β†’
    Core: 10.2.x + Environment: PHP 8.1 & MySQL 8
    last update 11 months ago
    48 pass
  • Status changed to Needs review 11 months ago
  • πŸ‡ͺπŸ‡ΈSpain eduardo morales alberti Spain, πŸ‡ͺπŸ‡Ί

    Ready to QA

  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    Added a related issue. This one is really tricky.

    I really feel that making blocking web requests on the server side in the formatter isn't the direction that should be taken, as it opens up the potential for denial of service security concerns.

    Ideally this information would be captured when the oembed resource is created and then able to be referenced from the formatter. Obviously that's a much wider scope issue, but it's the only safe way I can see to accomplish this.

    Thoughts?

  • Status changed to Needs work 11 months ago
  • πŸ‡ͺπŸ‡ΈSpain eduardo morales alberti Spain, πŸ‡ͺπŸ‡Ί
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    I'd be happy to discuss this further. I have some ideas, but am sadly short on time due to #dayjob.

    If you're on slack, feel free to hop into #oembed-lazyload and we can chat :-). I'm drafting up a quick and dirty of what I feel might be the most holistic approach to making thumbnails the most useful to the most users, hopefully finishing up within the next 12 mins or so.

  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    I've pushed out a branch called flexible-metadata-alter-architecture that scaffolds in some API additions such that...

    1. Users may opt into customizing oEmbed metadata altering (it won't be activated by default)
    2. If enabled, all ProviderEnhancer plugin types will get a chance to customize metadata through a new method: public function alterOembedMetadata(array &$data, $url)
      For example, the YouTube provider enhancer can download thumbnails of various resolutions based on what's available on the remote end
    3. Speaking of YouTube...the stock enhancer now ships with a setting that allows end-users to opt into downloading the "highest resolution thumbnail available"

    Work yet to be done:

    1. Continue adding test coverage -- there are now significant gaps.
    2. Figure out how to plumb this into the front-end while retaining API backwards-compatibility
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    I've just pushed a minimal viable product for the front-end bits. It's still not 100% useful, as the front-end still coerces everything to use a 16:9 aspect ratio.

    Additional formatter settings are still required to make this a 100% turn-key solution. Luckily though, I think we can do all of this while still retaining backwards compatibility. It looks like we'll need a conditional container sizing mechanism that lets users choose between rendering things with...

    • An aspect ratio (has to be the default option, for b/c purposes
    • A maximum width / height (the options are already in the formatter settings, but are presently ignored!)

    I'll take a peek at how the off-the-shelf oembed formatter does the CSS bits for the max width/height rendering strategy, but as the branch now stands, an end-to-end test should be possible after sprinkling some custom CSS on things.

  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    I'm satisfied with the functional pieces and test coverage here. The only remaining task is an upgrade path + upgrade path testing.

  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    Retargeting to 2.1.x.

  • Pipeline finished with Skipped
    10 months ago
    #97012
  • Status changed to Fixed 10 months ago
  • πŸ‡ΊπŸ‡ΈUnited States luke.leber Pennsylvania

    Committed and pushed to 2.1.x! Thanks for everything, Eduardo.

    I'll be cutting a 2.1.0 feature release in the near future. Take care.

  • Automatically closed - issue fixed for 2 weeks with no activity.

Production build 0.71.5 2024