Canvas: Show base color / blurhash while resource is loading (#11849)

Co-authored-by: Pascal Birchler <pascalb@google.com>
GoogleForCreators · Jul 11, 2022 · 7029aeb · 7029aeb
1 parent 079afb2
commit 7029aeb
Show file tree

Hide file tree

Showing 7 changed files with 75 additions and 1 deletion.
diff --git a/packages/element-library/src/gif/display.js b/packages/element-library/src/gif/display.js
@@ -46,7 +46,12 @@ const Image = styled.img`
   max-width: ${({ isBackground }) => (isBackground ? 'initial' : null)};
 `;
 
-function VideoDisplay({ previewMode, box: { width, height }, element }) {
+function VideoDisplay({
+  previewMode,
+  box: { width, height },
+  element,
+  renderResourcePlaceholder,
+}) {
   const { id, poster, resource, isBackground, scale, focalX, focalY } = element;
   const ref = useRef();
   let style = {};
@@ -75,6 +80,7 @@ function VideoDisplay({ previewMode, box: { width, height }, element }) {
       mediaRef={ref}
       showPlaceholder
       previewMode={previewMode}
+      renderResourcePlaceholder={renderResourcePlaceholder}
     >
       {previewMode ? (
         (poster || resource.poster) && (
@@ -113,6 +119,7 @@ VideoDisplay.propTypes = {
   previewMode: PropTypes.bool,
   element: StoryPropTypes.elements.video.isRequired,
   box: StoryPropTypes.box.isRequired,
+  renderResourcePlaceholder: PropTypes.func,
 };
 
 export default VideoDisplay;
diff --git a/packages/element-library/src/media/display.js b/packages/element-library/src/media/display.js
@@ -59,6 +59,7 @@ function MediaDisplay({
   children,
   previewMode,
   showPlaceholder = false,
+  renderResourcePlaceholder,
 }) {
   const {
     id,
@@ -123,6 +124,9 @@ function MediaDisplay({
       mask={mask}
       showPlaceholder={showPlaceholder}
     >
+      {showPlaceholder &&
+        renderResourcePlaceholder &&
+        renderResourcePlaceholder(resource)}
       {children}
       {overlay && <Overlay backgroundColor={overlay} />}
     </Element>
@@ -135,6 +139,7 @@ MediaDisplay.propTypes = {
   children: PropTypes.node,
   showPlaceholder: PropTypes.bool,
   previewMode: PropTypes.bool,
+  renderResourcePlaceholder: PropTypes.func,
 };
 
 export default MediaDisplay;
diff --git a/packages/element-library/src/media/imageDisplay.js b/packages/element-library/src/media/imageDisplay.js
@@ -48,6 +48,7 @@ function ImageDisplay({
   getProxiedUrl,
   isCurrentResourceProcessing = noop,
   isCurrentResourceUploading = noop,
+  renderResourcePlaceholder,
 }) {
   const { resource, scale, focalX, focalY } = element;
   const { id: resourceId, alt } = resource;
@@ -124,6 +125,7 @@ function ImageDisplay({
       mediaRef={ref}
       showPlaceholder={showPlaceholder}
       previewMode={previewMode}
+      renderResourcePlaceholder={renderResourcePlaceholder}
     >
       <Img
         ref={ref}
@@ -147,6 +149,7 @@ ImageDisplay.propTypes = {
   getProxiedUrl: PropTypes.func.isRequired,
   isCurrentResourceProcessing: PropTypes.func,
   isCurrentResourceUploading: PropTypes.func,
+  renderResourcePlaceholder: PropTypes.func,
 };
 
 export default ImageDisplay;
diff --git a/packages/element-library/src/video/display.js b/packages/element-library/src/video/display.js
@@ -52,6 +52,7 @@ function VideoDisplay({
   box: { width, height },
   element,
   getProxiedUrl,
+  renderResourcePlaceholder,
 }) {
   const {
     id,
@@ -103,6 +104,7 @@ function VideoDisplay({
       mediaRef={ref}
       showPlaceholder
       previewMode={previewMode}
+      renderResourcePlaceholder={renderResourcePlaceholder}
     >
       {previewMode ? (
         (poster || resource.poster) && (
@@ -145,6 +147,7 @@ VideoDisplay.propTypes = {
   element: StoryPropTypes.elements.video.isRequired,
   box: StoryPropTypes.box.isRequired,
   getProxiedUrl: PropTypes.func.isRequired,
+  renderResourcePlaceholder: PropTypes.func,
 };
 
 export default VideoDisplay;
diff --git a/packages/element-library/src/video/trim.js b/packages/element-library/src/video/trim.js
@@ -64,6 +64,7 @@ function VideoTrim({
   resource,
   setVideoNode,
   getProxiedUrl,
+  renderResourcePlaceholder,
 }) {
   const { width, height } = box;
   const { poster, tracks, isBackground, scale, flip, focalX, focalY } = element;
@@ -131,6 +132,7 @@ function VideoTrim({
           mediaRef={videoRef}
           showPlaceholder
           previewMode={false}
+          renderResourcePlaceholder={renderResourcePlaceholder}
         >
           {/* eslint-disable-next-line styled-components-a11y/media-has-caption,jsx-a11y/media-has-caption -- False positive. */}
           <Video
@@ -171,6 +173,7 @@ VideoTrim.propTypes = {
   resource: PropTypes.object,
   setVideoNode: PropTypes.func,
   getProxiedUrl: PropTypes.func,
+  renderResourcePlaceholder: PropTypes.func,
 };
 
 export default VideoTrim;
diff --git a/packages/story-editor/src/components/canvas/displayElement.js b/packages/story-editor/src/components/canvas/displayElement.js
@@ -47,6 +47,7 @@ import {
 import StoryPropTypes from '../../types';
 import useCORSProxy from '../../utils/useCORSProxy';
 import { useLocalMedia, useFont } from '../../app';
+import renderResourcePlaceholder from './renderResourcePlaceholder';
 
 // Using attributes to avoid creation of hundreds of classes by styled components for previewMode.
 const Wrapper = styled.div.attrs(
@@ -240,6 +241,7 @@ function DisplayElement({
             isCurrentResourceUploading={isCurrentResourceUploading}
             maybeEnqueueFontStyle={maybeEnqueueFontStyle}
             siblingCount={siblingCount}
+            renderResourcePlaceholder={renderResourcePlaceholder}
           />
         </WithMask>
         {!previewMode && (

diff --git a/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js b/packages/story-editor/src/components/canvas/renderResourcePlaceholder.js
@@ -0,0 +1,51 @@
+/*
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * External dependencies
+ */
+import styled, { css } from 'styled-components';
+import { Blurhash } from 'react-blurhash';
+
+const placeholderStyles = css`
+  position: absolute !important;
+  top: 0;
+  left: 0;
+  min-height: 100%;
+  min-width: 100%;
+`;
+
+const BlurhashContainer = styled(Blurhash)`
+  ${placeholderStyles}
+`;
+
+const BaseColorContainer = styled.div`
+  ${placeholderStyles}
+  background-color: ${({ $baseColor }) => $baseColor};
+`;
+
+function renderResourcePlaceholder({ blurHash, baseColor }) {
+  if (blurHash) {
+    return <BlurhashContainer hash={blurHash} punch={1} />;
+  }
+
+  if (baseColor) {
+    return <BaseColorContainer $baseColor={baseColor} />;
+  }
+
+  return null;
+}
+export default renderResourcePlaceholder;