Give backdrops default background color

entry_types/scrolled/package/src/frontend/Backdrop.module.css

@@ -2,3 +2,7 @@
   width: 100%;
   z-index: 2;
 }
+
+.defaultBackground {
+  background-color: #333;
+}

entry_types/scrolled/package/src/frontend/Backdrop/BackgroundAsset.js

@@ -0,0 +1,69 @@
+import React from 'react';
+
+import Fullscreen from './../Fullscreen';
+import FillColor from './../FillColor';
+import {useBackgroundFile} from './../useBackgroundFile';
+import {useFile} from '../../entryState';
+
+import {BackgroundVideo} from './BackgroundVideo';
+import {OrientationAwareBackgroundImage} from './OrientationAwareBackgroundImage';
+import {BackgroundImage} from './BackgroundImage';
+
+export function BackgroundAsset(props) {
+  const video = useBackgroundFile({
+    file: useFile({collectionName: 'videoFiles', permaId: props.video}),
+    motifArea: props.videoMotifArea,
+    containerDimension: props.containerDimension
+  });
+  const image = useBackgroundFile({
+    file: useFile({collectionName: 'imageFiles', permaId: props.image}),
+    motifArea: props.imageMotifArea,
+    containerDimension: props.containerDimension
+  });
+  const imageMobile = useBackgroundFile({
+    file: useFile({collectionName: 'imageFiles', permaId: props.imageMobile}),
+    motifArea: props.imageMobileMotifArea,
+    containerDimension: props.containerDimension
+  });
+
+  if (video) {
+    return (
+      <Fullscreen ref={props.setContainerRef}>
+        <BackgroundVideo video={video}
+                         onMotifAreaUpdate={props.onMotifAreaUpdate}
+                         containerDimension={props.containerDimension} />
+      </Fullscreen>
+    );
+  }
+  else if (props.color ||
+           (props.image && props.image.toString().startsWith('#'))) {
+    return (
+      <FillColor color={props.color || props.image} />
+    );
+  } else {
+    return (
+      <Fullscreen ref={props.setContainerRef}>
+        {renderBackgroundImage({image, imageMobile, onMotifAreaUpdate: props.onMotifAreaUpdate, containerDimension: props.containerDimension})}
+      </Fullscreen>
+    );
+  }
+}
+
+function renderBackgroundImage({image, imageMobile, onMotifAreaUpdate, containerDimension}) {
+  if (image && imageMobile) {
+    return (
+      <OrientationAwareBackgroundImage image={image}
+                                       imageMobile={imageMobile}
+                                       onMotifAreaUpdate={onMotifAreaUpdate}
+                                       containerDimension={containerDimension} />
+    );
+  }
+  else {
+    return (
+      <BackgroundImage
+          image={image || imageMobile}
+          onMotifAreaUpdate={onMotifAreaUpdate}
+          containerDimension={containerDimension} />
+    );
+  }
+}

entry_types/scrolled/package/src/frontend/Backdrop/BackgroundImage.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import {Image} from './../Image';
+import {MotifArea} from './../MotifArea';
+import {useSectionLifecycle} from './../useSectionLifecycle';
+
+export function BackgroundImage({image, onMotifAreaUpdate, containerDimension}) {
+  const {isPrepared} = useSectionLifecycle();
+
+  return (
+    <>
+      <Image imageFile={image} isPrepared={isPrepared} structuredData={true}/>
+      <MotifArea key={image?.permaId}
+                 onUpdate={onMotifAreaUpdate}
+                 file={image}
+                 containerWidth={containerDimension.width}
+                 containerHeight={containerDimension.height}/>
+    </>
+  );
+}

entry_types/scrolled/package/src/frontend/Backdrop/BackgroundVideo.js

@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+
+import {VideoPlayer} from './../VideoPlayer';
+import {MotifArea} from './../MotifArea';
+import {usePlayerState} from './../MediaPlayer/usePlayerState';
+import {useSectionLifecycle} from './../useSectionLifecycle';
+import {documentHiddenState} from 'pageflow/frontend';
+
+export function BackgroundVideo({video, onMotifAreaUpdate, containerDimension}) {
+  const [playerState, playerActions] = usePlayerState();
+  const {isPrepared} = useSectionLifecycle({
+    onVisible() {
+      playerActions.changeVolumeFactor(0, 0);
+      playerActions.play()
+    },
+
+    onActivate() {
+      playerActions.changeVolumeFactor(1, 1000);
+    },
+
+    onDeactivate() {
+      playerActions.changeVolumeFactor(0, 1000);
+    },
+
+    onInvisible() {
+      playerActions.pause()
+    }
+  });
+
+  useEffect(() => {
+    let documentState = documentHiddenState((visibilityState) => {
+      if (visibilityState === 'hidden') {
+        playerActions.pause();
+      }
+      else{
+        playerActions.play();
+      }
+    });
+    return () => {
+      documentState.removeCallback();
+    }
+  }, [playerActions])
+
+  return (
+    <>
+      <VideoPlayer isPrepared={isPrepared}
+                   playerState={playerState}
+                   playerActions={playerActions}
+                   videoFile={video}
+                   textTracksDisabled={true}
+                   fit="cover"
+                   loop={true}
+                   playsInline={true} />
+      <MotifArea key={video.permaId}
+                 onUpdate={onMotifAreaUpdate}
+                 file={video}
+                 containerWidth={containerDimension.width}
+                 containerHeight={containerDimension.height}/>
+    </>
+  );
+}

entry_types/scrolled/package/src/frontend/Backdrop/OrientationAwareBackgroundImage.js

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {usePortraitOrientation} from './../usePortraitOrientation';
+import {BackgroundImage} from './BackgroundImage';
+
+export function OrientationAwareBackgroundImage({image, onMotifAreaUpdate, imageMobile, containerDimension}) {
+  const mobile = usePortraitOrientation();
+
+  if (mobile) {
+    return (
+      <BackgroundImage image={imageMobile}
+                       onMotifAreaUpdate={onMotifAreaUpdate}
+                       containerDimension={containerDimension} />
+    )
+  }
+  else {
+    return (
+      <BackgroundImage image={image}
+                       onMotifAreaUpdate={onMotifAreaUpdate}
+                       containerDimension={containerDimension} />
+    )
+  }
+}