feat(client): Improve image rendering, transitions, color-handling, o…

…verrides.

packages/client/package.json

@@ -23,7 +23,7 @@
     "ow": "^0.15.1",
     "polished": "^4.0.3",
     "popper.js": "^1.16.1",
-    "pretty-ms": "^5.1.0",
+    "pretty-ms": "^7.0.1",
     "query-string": "^6.9.0",
     "ramda": "^0.27.0",
     "react": "^16.12.0",
@@ -32,7 +32,8 @@
     "react-icons": "^3.11.0",
     "shuffle-seed": "^1.1.6",
     "url-parse-lax": "^4.0.0",
-    "use-async-effect": "^2.2.2"
+    "use-async-effect": "^2.2.2",
+    "uuid": "^8.3.1"
   },
   "devDependencies": {
     "@babel/register": "^7.10.1",
@@ -56,6 +57,7 @@
     "@types/react-dom": "^16.9.4",
     "@types/semver": "^7.1.0",
     "@types/shuffle-seed": "^1.1.0",
+    "@types/uuid": "^8.3.0",
     "@types/webpack": "^4.41.0",
     "@types/webpack-dev-server": "^3.9.0",
     "archiver": "^5.0.0",

packages/client/src/components/BackgroundImage.tsx

@@ -0,0 +1,85 @@
+import { styled } from 'linaria/react';
+
+import { BackgroundImageOverrides } from 'etc/types';
+
+
+// ----- Props -----------------------------------------------------------------
+
+/**
+ * Props for the BackgroundImage component.
+ */
+interface BackgroundImageProps extends BackgroundImageOverrides {
+  backgroundImage: string;
+  // backgroundPosition?: string;
+  // transform?: string;
+  // opacity?: number;
+  // transitionDuration?: string;
+  // transitionTimingFunction?: string;
+  // backdropBlurRadius?: string;
+}
+
+
+// ----- Background Image ------------------------------------------------------
+
+/**
+ * Set to a truthy value to debug the blur backdrop element.
+ */
+const DEBUG_BLUR = 0;
+
+
+/**
+ * Renders a full-screen background image
+ */
+const BackgroundImage = styled.div<BackgroundImageProps>`
+  /**
+    * We can't use an outer url() here due to an idiosyncrasy in how Linaria
+    * handles quotes in url() expressions.
+    *
+    * See: https://github.com/callstack/linaria/issues/368
+    */
+  background-image: ${props => props.backgroundImage && `url(${props.backgroundImage})`};
+  background-position: ${props => props.backgroundPosition ?? 'center center'};
+  background-attachment: fixed;
+  background-repeat: no-repeat;
+  background-size: cover;
+
+  /**
+   * If we don't have a background-image prop, use a default opacity of 0.
+   * Otherwise, if we have an explicit opacity prop, use it. Otherwise, use an
+   * opacity of 1.
+   */
+  opacity: ${props => (props.backgroundImage ? props.opacity ?? 1 : 0)};
+  transition-duration: ${props => props.transitionDuration ?? 'initial'};
+  transition-timing-function: ${props => props.transitionTimingFunction ?? 'initial'};
+  transition-property: opacity;
+
+  bottom: 0;
+  display: block;
+  left: 0;
+  pointer-events: none;
+  position: fixed;
+  right: 0;
+  top: 0;
+  transform: ${props => props.transform ?? 'initial'};
+  z-index: 0;
+
+  &::after {
+    content: ' ';
+    width: 100%;
+    height: 48em;
+    position: absolute;
+    top: calc(50vh - 24em - 64px);
+    left: 0;
+    right: 0;
+    bottom: 0;
+    /* background-color: ${!DEBUG_BLUR ? 'none' : 'rgba(255, 0, 0, 1)'}; */
+    background-color: ${props => (DEBUG_BLUR ? 'rgba(255, 0, 0, 1)' : `rgba(0, 0, 0, ${props.backdrop?.backgroundOpacity ?? 0.2})`)};
+    backdrop-filter: ${props => (DEBUG_BLUR ? 'none' : `blur(${props.backdrop?.blurRadius ?? '0px'})`)};
+    mask-image: radial-gradient(ellipse at center, black 20%, transparent 70%);
+    mask-size: contain;
+    mask-repeat: no-repeat;
+  }
+`;
+
+
+export default BackgroundImage;