import * as React from "react";
import * as Url from "url-parse";
import { VideoWebView } from "./video-webview";

export const isMixer = (url: string) => {
  return url.indexOf("mixer.com/") > -1;
};

export const getMixerEmbed = (url: string) => {
  let parsedUrl = new Url(url);
  let pathParts = parsedUrl.pathname.split("/");
  let channel = pathParts[1];

  return `
  <div style="padding-top: 56.25%; position: relative;">
    <iframe style="position: absolute; top: 0; right: 0; bottom: 0; left: 0;"
      src="https://mixer.com/embed/player/${channel}?disableLowLatency=1"
      allowfullscreen="true"
      width="100%"
      height="100%"></iframe>
  <div>
`;
};

export const MixerVideo = ({ url }: { url: string }) => {
  let iframe = React.useMemo(() => getMixerEmbed(url), [url]);
  return <VideoWebView content={iframe} />;
};