From b278476214af9bef57d97590803c7970e8ed9d1e Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 23 Oct 2020 17:25:54 +0200
Subject: [PATCH 1/2] Split Backdrop into multiple files

File started to become too long.
---
 .../scrolled/package/src/frontend/Backdrop.js | 189 ------------------
 .../src/frontend/Backdrop/BackgroundAsset.js  |  69 +++++++
 .../src/frontend/Backdrop/BackgroundImage.js  |  20 ++
 .../src/frontend/Backdrop/BackgroundVideo.js  |  61 ++++++
 .../OrientationAwareBackgroundImage.js        |  23 +++
 .../package/src/frontend/Backdrop/index.js    |  33 +++
 6 files changed, 206 insertions(+), 189 deletions(-)
 delete mode 100644 entry_types/scrolled/package/src/frontend/Backdrop.js
 create mode 100644 entry_types/scrolled/package/src/frontend/Backdrop/BackgroundAsset.js
 create mode 100644 entry_types/scrolled/package/src/frontend/Backdrop/BackgroundImage.js
 create mode 100644 entry_types/scrolled/package/src/frontend/Backdrop/BackgroundVideo.js
 create mode 100644 entry_types/scrolled/package/src/frontend/Backdrop/OrientationAwareBackgroundImage.js
 create mode 100644 entry_types/scrolled/package/src/frontend/Backdrop/index.js

diff --git a/entry_types/scrolled/package/src/frontend/Backdrop.js b/entry_types/scrolled/package/src/frontend/Backdrop.js
deleted file mode 100644
index 271c017421..0000000000
--- a/entry_types/scrolled/package/src/frontend/Backdrop.js
+++ /dev/null
@@ -1,189 +0,0 @@
-import React, { useEffect } from 'react';
-import classNames from 'classnames';
-
-import Fullscreen from './Fullscreen';
-import {Image} from './Image';
-import {VideoPlayer} from './VideoPlayer';
-import FillColor from './FillColor';
-import {MotifArea} from './MotifArea';
-import useDimension from './useDimension';
-import {usePlayerState} from './MediaPlayer/usePlayerState';
-import {usePortraitOrientation} from './usePortraitOrientation';
-import {useSectionLifecycle} from './useSectionLifecycle';
-import {useBackgroundFile} from './useBackgroundFile';
-import {documentHiddenState} from 'pageflow/frontend';
-import {useFile} from '../entryState';
-
-import styles from './Backdrop.module.css';
-
-export function Backdrop(props) {
-  const [containerDimension, setContainerRef] = useDimension();
-
-  return (
-    <div className={classNames(styles.Backdrop,
-                               props.transitionStyles.backdrop,
-                               props.transitionStyles[`backdrop-${props.state}`])}>
-      <div className={props.transitionStyles.backdropInner}>
-        <div className={props.transitionStyles.backdropInner2}>
-          {props.children(
-             <BackgroundAsset {...props}
-                              containerDimension={containerDimension}
-                              setContainerRef={setContainerRef} />
-           )}
-        </div>
-      </div>
-    </div>
-  );
-}
-
-Backdrop.defaultProps = {
-  children: children => children,
-  transitionStyles: {}
-};
-
-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} />
-    );
-  }
-}
-
-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} />
-    )
-  }
-}
-
-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}/>
-    </>
-  );
-}
-
-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}/>
-    </>
-  );
-}
diff --git a/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundAsset.js b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundAsset.js
new file mode 100644
index 0000000000..e469b4bc59
--- /dev/null
+++ b/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} />
+    );
+  }
+}
diff --git a/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundImage.js b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundImage.js
new file mode 100644
index 0000000000..c01984548a
--- /dev/null
+++ b/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}/>
+    </>
+  );
+}
diff --git a/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundVideo.js b/entry_types/scrolled/package/src/frontend/Backdrop/BackgroundVideo.js
new file mode 100644
index 0000000000..c0abe391ac
--- /dev/null
+++ b/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}/>
+    </>
+  );
+}
diff --git a/entry_types/scrolled/package/src/frontend/Backdrop/OrientationAwareBackgroundImage.js b/entry_types/scrolled/package/src/frontend/Backdrop/OrientationAwareBackgroundImage.js
new file mode 100644
index 0000000000..28c0f2862c
--- /dev/null
+++ b/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} />
+    )
+  }
+}
diff --git a/entry_types/scrolled/package/src/frontend/Backdrop/index.js b/entry_types/scrolled/package/src/frontend/Backdrop/index.js
new file mode 100644
index 0000000000..a843378a2d
--- /dev/null
+++ b/entry_types/scrolled/package/src/frontend/Backdrop/index.js
@@ -0,0 +1,33 @@
+import React from 'react';
+import classNames from 'classnames';
+
+import useDimension from './../useDimension';
+
+import {BackgroundAsset} from './BackgroundAsset';
+
+import styles from '../Backdrop.module.css';
+
+export function Backdrop(props) {
+  const [containerDimension, setContainerRef] = useDimension();
+
+  return (
+    <div className={classNames(styles.Backdrop,
+                               props.transitionStyles.backdrop,
+                               props.transitionStyles[`backdrop-${props.state}`])}>
+      <div className={props.transitionStyles.backdropInner}>
+        <div className={props.transitionStyles.backdropInner2}>
+          {props.children(
+             <BackgroundAsset {...props}
+                              containerDimension={containerDimension}
+                              setContainerRef={setContainerRef} />
+           )}
+        </div>
+      </div>
+    </div>
+  );
+}
+
+Backdrop.defaultProps = {
+  children: children => children,
+  transitionStyles: {}
+};

From 818c2fff704f5bc34352591b4c816c0e40ed02eb Mon Sep 17 00:00:00 2001
From: Tim Fischbach <tfischbach@codevise.de>
Date: Fri, 23 Oct 2020 17:27:48 +0200
Subject: [PATCH 2/2] Give backdrops default background color

Prevent sections from looking broken when no background has been
configured yet.

REDMINE-18016
---
 entry_types/scrolled/package/src/frontend/Backdrop.module.css | 4 ++++
 entry_types/scrolled/package/src/frontend/Backdrop/index.js   | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/entry_types/scrolled/package/src/frontend/Backdrop.module.css b/entry_types/scrolled/package/src/frontend/Backdrop.module.css
index abbda2ae3b..40003c7755 100644
--- a/entry_types/scrolled/package/src/frontend/Backdrop.module.css
+++ b/entry_types/scrolled/package/src/frontend/Backdrop.module.css
@@ -2,3 +2,7 @@
   width: 100%;
   z-index: 2;
 }
+
+.defaultBackground {
+  background-color: #333;
+}
diff --git a/entry_types/scrolled/package/src/frontend/Backdrop/index.js b/entry_types/scrolled/package/src/frontend/Backdrop/index.js
index a843378a2d..925643f383 100644
--- a/entry_types/scrolled/package/src/frontend/Backdrop/index.js
+++ b/entry_types/scrolled/package/src/frontend/Backdrop/index.js
@@ -15,7 +15,8 @@ export function Backdrop(props) {
                                props.transitionStyles.backdrop,
                                props.transitionStyles[`backdrop-${props.state}`])}>
       <div className={props.transitionStyles.backdropInner}>
-        <div className={props.transitionStyles.backdropInner2}>
+        <div className={classNames(styles.defaultBackground,
+                                   props.transitionStyles.backdropInner2)}>
           {props.children(
              <BackgroundAsset {...props}
                               containerDimension={containerDimension}