Tussi.tsx

import {render} from 'react-dom'
import {renderToString} from 'react-dom/server'
import {IconHide, IconYoutube} from '@veikkaus/tandem'
import {textFactory} from 'common/text-factory'
import {localization} from './localization'

const text = textFactory(localization)

const openVideo = (videoId: string): void => {
  if (!videoId) {
    return
  }
  window.open(
    `https://www.youtube-nocookie.com/embed/${videoId}?showinfo=0&modestbranding=1`,
    '_blank'
  )
}

const NoYoutube = ({videoId}: {videoId?: string}): JSX.Element | null => {
  return (
    <div
      className="video__player-container video-container"
      style={{color: 'white'}}
    >
      <div
        className="no-youtube"
        style={{
          background: '#26282b',
          color: '#ffffff',
          display: 'flex',
          alignItems: 'center',
          flexDirection: 'column',
          padding: '2vw 0'
        }}
      >
        <IconHide iconSize={30} />
        <div style={{padding: '0.5rem 1rem 0.5rem 1rem'}}>
          <span
            style={{textAlign: 'center'}}
            dangerouslySetInnerHTML={{__html: text('bodyText')}}
          />
        </div>
        {videoId && (
          <div style={{padding: '0.5rem 1rem 0.5rem 1rem'}}>
            <button
              id={`watchVideo-${videoId}`}
              className="button dls2 action-button"
              style={{
                background: '#070708',
                color: '#ffffff',
                border: '1px solid #ffffff',
                paddingTop: '1rem'
              }}
              onClick={() => {
                openVideo(videoId)
              }}
            >
              <IconYoutube iconSize={30} style={{marginTop: '-0.3rem'}} />
              <span style={{paddingLeft: '0.5rem'}}>
                {text('button.watchInYoutube')}
              </span>
            </button>
          </div>
        )}
      </div>
    </div>
  )
}

export function init({
  videoId,
  container
}: {
  videoId?: string
  container: HTMLElement
}): void {
  render(<NoYoutube videoId={videoId} />, container)
}

export function noYoutubeVideoHtml(videoId?: string): string {
  const ret = renderToString(<NoYoutube videoId={videoId} />)

  /*
  Doesn't take into account the potential cleaning up of this listener at
   all. Should it happen? Who is responsible for that? Also, can there be just one embed showing a certain video? This assumes it to be true.
  */
  if (videoId) {
    $('body').on('click', `#watchVideo-${videoId}`, () =>
      window.open(
        `https://www.youtube-nocookie.com/embed/${videoId}?showinfo=0&modestbranding=1`,
        '_blank'
      )
    )
  }

  return ret
}

export default NoYoutube