import React, {useState} from 'react';
import ReactPlayer from 'react-player';
import styles from './VideoEmbed.module.css';

import {
  Figure,
  ViewportDependentPillarBoxes,
  useContentElementLifecycle,
  useContentElementEditorState,
  useAudioFocus
} from 'pageflow-scrolled/frontend';

const aspectRatios = {
  wide: 0.5625,
  narrow: 0.75,
  square: 1,
  portrait: 1.7777
};

export function VideoEmbed({contentElementId, configuration}) {
  const {isEditable, isSelected} = useContentElementEditorState();
  const {shouldLoad} = useContentElementLifecycle();

  return (
    <div className={styles.VideoEmbed}
         style={{pointerEvents: isEditable && !isSelected ? 'none' : undefined}}>
      <Figure caption={configuration.caption}>
        <ViewportDependentPillarBoxes aspectRatio={aspectRatios[configuration.aspectRatio || 'wide']}
                                      position={configuration.position}
                                      opaque={!!configuration.caption}>
          {shouldLoad && <PreparedPlayer contentElementId={contentElementId}
                                         configuration={configuration} />}
        </ViewportDependentPillarBoxes>
      </Figure>
    </div>
  );
}

function PreparedPlayer({contentElementId, configuration}) {
  const [playerState, setPlayerState] = useState('unplayed');

  useAudioFocus({
    key: contentElementId,
    request: playerState === 'playing',

    onLost() {
      setPlayerState('paused');
    }
  });

  // base64-encoded configuration
  // => make component re-render on configuration changes
  function keyFromConfiguration(config) {
    return btoa(JSON.stringify(config))
  }

  return (
    <ReactPlayer className={styles.embedPlayer}
                 key={keyFromConfiguration(configuration)}
                 url={configuration.videoSource}
                 playing={playerState !== 'paused'}
                 onPlay={() => setPlayerState('playing')}
                 onPause={() => setPlayerState('paused')}
                 onEnded={() => setPlayerState('paused')}
                 light={true}
                 width='100%'
                 height='100%'
                 controls={!configuration.hideControls}
                 config={{
                   youtube: {
                     playerVars: {
                       showinfo: !configuration.hideInfo
                     }
                   },
                   vimeo: {
                     playerOptions: {
                       byline: !configuration.hideInfo
                     }
                   }
                 }} />
  );
}

@@ -138,16 +138,37 @@
 Figure,%0A
+  ThirdPartyConsent,%0A
   Viewpo
@@ -1691,24 +1691,215 @@
 %0A  return (%0A
+    %3CThirdPartyConsent providerName='video'%0A                       hideTooltip=%7BplayerState === 'playing'%7D%0A                       optOutPlacement='bottom-25'%3E%0A      %7B(consentedHere) =%3E (%0A    
     %3CReactPl
@@ -1951,16 +1951,20 @@
         
+   
+ 
 key=%7Bkey
@@ -1997,16 +1997,20 @@
 ation)%7D%0A
+    
         
@@ -2063,24 +2063,28 @@
             
+    
 playing=%7Bpla
@@ -2123,16 +2123,20 @@
         
+ 
+   
 onPlay=%7B
@@ -2164,24 +2164,28 @@
 'playing')%7D%0A
+    
             
@@ -2247,16 +2247,20 @@
         
+   
+ 
 onEnded=
@@ -2313,21 +2313,38 @@
     
+    
 light=%7B
-true%7D%0A
+!consentedHere%7D%0A   
     
@@ -2356,16 +2356,17 @@
         
+ 
 width='1
@@ -2362,32 +2362,36 @@
    width='100%25'%0A
+    
                 
@@ -2397,32 +2397,36 @@
   height='100%25'%0A
+    
                 
@@ -2478,24 +2478,28 @@
             
+ 
+   
 config=%7B%7B%0A  
@@ -2496,16 +2496,20 @@
 nfig=%7B%7B%0A
+    
         
@@ -2526,24 +2526,28 @@
  youtube: %7B%0A
+    
             
@@ -2592,16 +2592,20 @@
         
+    
 showinfo
@@ -2643,34 +2643,40 @@
                 
-%7D%0A
+    %7D%0A  
                 
@@ -2682,11 +2682,17 @@
     
+  
 %7D,%0A
+    
     
@@ -2711,24 +2711,28 @@
    vimeo: %7B%0A
+    
             
@@ -2780,16 +2780,20 @@
         
+    
 byline: 
@@ -2829,34 +2829,40 @@
                 
-%7D%0A
+    %7D%0A  
                 
@@ -2856,34 +2856,40 @@
                 
-%7D%0A
+  %7D%0A    
                 
@@ -2895,15 +2895,49 @@
   %7D%7D /%3E%0A
+      )%7D%0A    %3C/ThirdPartyConsent%3E%0A
   );%0A%7D%0A

Add consent functionality to video embed