Supporting Safari on iOS

scottrepreneur commented 2 years ago

We're not having luck with the NFTPreview component working in Safari on iOS for rabbithole.gg. It is working on desktop.

<MediaConfiguration
  networkId={networkId}
  style={styleOverride(true)}
>
  <NFTPreview
    id={id}
    showBids={false}
    refreshInterval={5000}
    href={`https://zora.co/${data?.nft?.creator}/${data?.nft?.tokenId}`}
  />
</MediaConfiguration>

pulse-image-1638393222838

iainnash commented 2 years ago

Since Zora doesn't re-encode media and re-host it (yet) for components it renders the NFT file directly.

This NFT is minted on fleek, and it looks like fleek doesn't support the range header.

Safari on both desktop and mobile refuses to render video from servers that don't support the range header.

The fix here, would be to use content-agnostic addressing for the NFT such as ipfs://CID or choose another gateway for the token URI that supports the range header.

In the very latest version of nft-components, we actually re-write all IPFS gateways to use a preferred gateway which by default is ipfs.io/ipfs but you can use pinata or any provider you prefer.

https://github.com/ourzora/nft-components/commit/f8b4225cb4b411331b5ec7d921b11632896459d2

If you install the latest version of nft-components this should be fixed.

SouravInsights commented 2 years ago

Hey, @iainnash So after I updated to the latest version, it looks good for safari but is now not working in Firefox and Chrome-based browsers.

ourzora / nft-components

Supporting Safari on iOS #108