What is the best way to implement Youku on React Native?

116 Views Asked by At

I've done some research and I didn't find anything related to the Youku implementation that is updated (a lot of posts from 2016 and 2017). I didn't find any official SDK (React Native and neither iOS and Android) provided by Youku itself, it looks like there is nothing about it (or I can't find it).

At the moment my implementation is a WebView inside the page with a custom loader and an error message when something goes wrong.

Another problem is that from some videos an error compare and say

[Fail] The params of {vid,target,client_id} are necessary

How can I solve that error that sometimes appears? Again, I cannot find something about it.

Do you guys have something to suggest about it? There is some lost documentation that I can't find?

My implementation at the moment:

export const YouKuPlayer: React.FC<YouKuPlayerProps> = ({ url, videoId }) => {
  const [showLoader, setShowLoader] = useState(true);
  const localizedStrings = useLocalizedStrings();

  const renderError = useCallback(() => {
    return <Loader noDataAvailable title={localizedStrings.errorCheckInternetConnection} />;
  }, [localizedStrings.errorCheckInternetConnection]);

  const youKuUrl = useMemo(() => {
    if (url) return url;
    return `https://player.youku.com/embed/${videoId}`;
  }, [url, videoId]);

  return (
    <View style={styles.container}>
      <WebView
        source={{
          html: `
          <!DOCTYPE html>
          <html>
            <head>
              <meta name="viewport" content="width=device-width, initial-scale=1.0">
              <style>
                iframe {
                  position:absolute;
                  top:0;
                  left:0;
                  width:100%;
                  height:100%;
                }
              </style>
            </head>
            <body>
              <iframe src="${youKuUrl}" frameborder="0" allowfullscreen></iframe>
            </body>
          </html>
          `,
        }}
        onLoadEnd={() => setShowLoader(false)}
        renderError={renderError}
        automaticallyAdjustContentInsets={false}
        showsVerticalScrollIndicator={false}
        bounces
        decelerationRate="normal"
        allowsFullscreenVideo
        mediaPlaybackRequiresUserAction={false}
      />
      {showLoader && (
        <ActivityIndicator style={styles.spinnerBackground} size="large" color={COLORS.white} />
      )}
    </View>
  );
};
0

There are 0 best solutions below