queen-raae / gatsby-remark-oembed

A GatsbyJS Plugin that transforms oembed links into its corresponding embed code.
https://gatsby-remark-oembed.netlify.com/
MIT License
162 stars 25 forks source link

oEmbed cannot override given parameters from returned embeded URL #41

Open rayriffy opened 5 years ago

rayriffy commented 5 years ago

Analysis

For an example, I want to add this SoundCloud song to the site

https://soundcloud.com/r4yr1ffy/secret-garden-remix

With no configuration, SoundCloud oEmbed will return embed URL with attached visible=true and show_artwork=true property, too.

(I formatted it for easier readability)

<iframe 
  width="100%" 
  height="400" 
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F592369218&amp;show_artwork=true"
></iframe>

Encounter Problem

With following configuration

{
  resolve: `@raae/gatsby-remark-oembed`,
  options: {
    providers: {
      include: ['SoundCloud', 'Instagram', 'Spotify', 'Twitter'],
      settings: {
        SoundCloud: {
          color: '#1976d2',
          show_comments: false,
          visual: false,
          hide_related: true,
          auto_play: false,
          show_user: false,
          show_reposts: false,
          show_teaser: false,
        },
        Instagram: {hidecaption: true},
      },
    },
  },
},

Every configuration is working just fine except for visble property which make SoundCloud embed player to a classic player.

What I got

<iframe
  width="100%"
  height="400"
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?visual=true&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F592369218&amp;show_artwork=true&amp;color=%231976d2&amp;show_comments=false&amp;visual=false&amp;hide_related=true&amp;auto_play=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
></iframe>

This plugin just simply add configuration to the end of URLs without checking any duplicates parameters

Expectation

<iframe
  width="100%"
  height="400"
  scrolling="no"
  frameborder="no"
  src="https://w.soundcloud.com/player/?visual=false&amp;url=https%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F592369218&amp;show_artwork=true&amp;color=%231976d2&amp;show_comments=false&amp;hide_related=true&amp;auto_play=false&amp;show_user=false&amp;show_reposts=false&amp;show_teaser=false"
></iframe>

Recomendation

Before sending all oEmbed, I reccomended to check existing link parameters first and override them if exists.

raae commented 5 years ago

Yes, that is the logical next step.

Would you like to have a go and create a PR on this as well? Otherwise, I will probably have some time next weekend.