YoutubePlayer.jsx

import styled from 'styled-components';
import {
  string, bool, oneOf, number,
} from 'prop-types';

function filterObject (f, obj) {
  return Object.fromEntries(Object.entries(obj).filter(f));
}

function not (f) {
  return e => !f(e);
}

function isEmptyValue ([, v]) {
  return v === undefined || v === null;
}

function removeEmptyValues (obj) {
  return filterObject(not(isEmptyValue), obj);
}

function toBoolParam (v = false) {
  return v ? 1 : 0;
}

/**
 * https://developers.google.com/youtube/player_parameters#Parameters
 */
const YoutubePlayer = styled.iframe.attrs(
  ({
    videoId,
    autoplay,
    ccLangPref,
    ccLoadPolicy,
    color,
    controls,
    disableKb,
    enableJsApi,
    end,
    fs,
    hl,
    ivLoadPolicy,
    list,
    listType,
    loop,
    modestBranding,
    origin,
    playlist,
    playsInline,
    start,
    widgetReferrer,
  }) => {
    const url = new URL(videoId, 'https://www.youtube.com/embed/');
    new URLSearchParams(
      removeEmptyValues({
        autoplay: toBoolParam(autoplay),
        cc_lang_pref: toBoolParam(ccLangPref),
        cc_load_policy: toBoolParam(ccLoadPolicy),
        color,
        controls: toBoolParam(controls),
        disablekb: toBoolParam(disableKb),
        enablejsapi: toBoolParam(enableJsApi),
        end,
        fs: toBoolParam(fs),
        hl,
        iv_load_policy: ivLoadPolicy,
        list,
        listType,
        loop: toBoolParam(loop),
        modestbranding: toBoolParam(modestBranding),
        origin,
        playlist,
        playsinline: toBoolParam(playsInline),
        start,
        widget_referrer: widgetReferrer,
      }),
    ).forEach(([k, v]) => {
      url.searchParams.set(k, v);
    });

    return {
      src: url.toString(),

      videoId: undefined,
      autoplay: undefined,
      ccLangPref: undefined,
      ccLoadPolicy: undefined,
      color: undefined,
      controls: undefined,
      disableKb: undefined,
      enableJsApi: undefined,
      end: undefined,
      fs: undefined,
      hl: undefined,
      ivLoadPolicy: undefined,
      list: undefined,
      listType: undefined,
      loop: undefined,
      modestBranding: undefined,
      origin: undefined,
      playlist: undefined,
      playsInline: undefined,
      start: undefined,
      widgetReferrer: undefined,
    };
  },
)`
  width: 100%;
  height: 100%;
  border: 0;
`;

YoutubePlayer.propTypes = {
  videoId: string.isRequired,
  autoplay: bool,
  ccLangPref: bool,
  ccLoadPolicy: bool,
  color: oneOf(['red', 'white']),
  controls: bool,
  disableKb: bool,
  enableJsApi: bool,
  end: number,
  fs: bool,
  hl: string,
  ivLoadPolicy: oneOf([1, 3]),
  list: string,
  listType: oneOf(['playlist', 'search', 'user_uploads']),
  loop: bool,
  modestBranding: bool,
  origin: string,
  playlist: string,
  playsInline: bool,
  start: number,
  widgetReferrer: string,
};

YoutubePlayer.defaultProps = {
  autoplay: false,
  ccLangPref: false,
  ccLoadPolicy: false,
  color: 'white',
  controls: true,
  disableKb: false,
  enableJsApi: false,
  end: undefined,
  fs: true,
  hl: undefined,
  ivLoadPolicy: 1,
  list: undefined,
  listType: undefined,
  loop: false,
  modestBranding: true,
  origin: undefined,
  playlist: undefined,
  playsInline: false,
  start: undefined,
  widgetReferrer: undefined,
};

export default YoutubePlayer;