Play button display bug

[Gabriel Morin]

As you can see here:
https://wap.live/0052/summary/edit/-LBW995oBs_Is3XMQi4r
Or on this screenshot:

The play button does not display properly.

import React, { Component } from 'react'

import MicrolinkCard from 'react-microlink'

class RichLinkPreview extends Component {
  state = {}

  componentWillMount() {
    this.onPropsChanged(this.props)
  }

  componentWillUpdate(nextProps) {
    this.onPropsChanged(nextProps)
  }

  onPropsChanged = props => {
    const { text } = props
    if (this.text !== text) {
      this.text = text
      const links = []
      if (text) {
        const matches = text.match(/(\b(https?|ftp|file):\/\/[-A-Z0-9+&@#\/%?=~_|!:,.;]*[-A-Z0-9+&@#\/%=~_|])/ig)
        if (matches && matches.length > 0)
          matches.forEach(link => {
            if (link && link.length > 3 && links.indexOf(link) === -1)
              links.push(link)
          })
      }
      this.setState({ links })
    }
  }

  render() {
    const { links } = this.state
    if (links != null && links.length > 0)
      return (
        <div style={styles.viewMain}>
          {links.map(link => {
            const isVideo = link.indexOf('youtube') !== -1
            return (
              <MicrolinkCard
                key={link}
                style={styles.microlinkCard}
                url={link}
                autoPlay={false}
                size={isVideo ? "large" : "normal"}
              />
            )
          })}
        </div>
      )

    return null
  }
}



const styles = {
  viewMain: {
    display: 'flex',
    flexDirection: 'column',
    justifyContent: 'stretch',
    alignItems: 'stretch',
  },
  microlinkCard: {
    margin: 8,
    flex: 1,
    width: 'auto',
    maxWidth: '100%',
    borderRadius: 0,
  },
}

export default RichLinkPreview

[Kiko Beats]

Are you using the last version of react-microlink?

Also, what node version?

Try to render if without passing custom style

[Kiko Beats]

I'm sure @breadadams can provide a good feedback of what is hapenning 🙂

[Brad Adams]

I'll inspect tonight and let y'all know!

[Brad Adams]

Thanks for reporting @graphee-gabriel, it should be fixed with #104!

[Gabriel Morin]

Thank you :-)
Let me know when the update is live on npm!
Have a great day

[Kiko Beats]

@graphee-gabriel released at v2.0.3, can you test it? 🙂

[Gabriel Morin]

It is fixed, thank you!

[Kiko Beats]

Perfect!

PS: If you are building something using microlink, consider enter at https://chat.microlink.io/ if you need feedback or help 🙂