Merge pull request #413 from filecoin-project/@tarafanlin/defaultimagepreview

adding default link preview images for files, slates and profiles

components/sidebars/SidebarSingleSlateSettings.js

@@ -8,7 +8,8 @@ import { css } from "@emotion/core";
 import { dispatchCustomEvent } from "~/common/custom-events";
 
 const SIZE_LIMIT = 1000000;
-const DEFAULT_IMAGE = "";
+const DEFAULT_IMAGE =
+  "https://slate.textile.io/ipfs/bafkreiaow45dlq5xaydaeqocdxvffudibrzh2c6qandpqkb6t3ahbvh6re";
 
 const STYLES_GROUP = css`
   display: flex;
@@ -209,21 +210,23 @@ export default class SidebarSingleSlateSettings extends React.Component {
           />
         </div>
 
-        <div css={STYLES_GROUPING}>
-          <System.P css={STYLES_HEADER}>Preview image</System.P>
+        {this.state.public ? (
+          <div css={STYLES_GROUPING}>
+            <System.P css={STYLES_HEADER}>Preview image</System.P>
 
-          <System.P
-            style={{
-              marginTop: 12,
-            }}
-          >
-            This is the image that shows when you share a link to your slate.
-          </System.P>
+            <System.P
+              style={{
+                marginTop: 12,
+              }}
+            >
+              This is the image that shows when you share a link to your slate.
+            </System.P>
 
-          <div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
-            <img src={preview} alt="" style={{ maxWidth: "368px", maxHeight: "368px" }} />
+            <div css={STYLES_IMAGE_BOX} style={{ marginTop: 24 }}>
+              <img src={preview} alt="" style={{ maxWidth: "368px", maxHeight: "368px" }} />
+            </div>
           </div>
-        </div>
+        ) : null}
 
         <div css={STYLES_GROUPING}>
           <System.P css={STYLES_HEADER}>Privacy</System.P>

pages/_/profile.js

@@ -1,5 +1,6 @@
 import * as React from "react";
 import * as Constants from "~/common/constants";
+import * as Strings from "~/common/strings";
 
 import { css } from "@emotion/core";
 import { Alert } from "~/components/core/Alert";
@@ -9,6 +10,9 @@ import WebsitePrototypeWrapper from "~/components/core/WebsitePrototypeWrapper";
 import WebsitePrototypeHeader from "~/components/core/WebsitePrototypeHeader";
 import WebsitePrototypeFooter from "~/components/core/WebsitePrototypeFooter";
 
+const DEFAULT_IMAGE =
+  "https://slate.textile.io/ipfs/bafkreiaow45dlq5xaydaeqocdxvffudibrzh2c6qandpqkb6t3ahbvh6re";
+
 export const getServerSideProps = async (context) => {
   return {
     props: { ...context.query },
@@ -29,14 +33,14 @@ export default class ProfilePage extends React.Component {
     const title = this.props.creator ? `${this.props.creator.username}` : "404";
     const url = `https://slate.host/${title}`;
     const description = this.props.creator.data.body;
+    const image = this.props.creator.data.photo;
+
+    if (Strings.isEmpty(image)) {
+      image = DEFAULT_IMAGE;
+    }
 
     return (
-      <WebsitePrototypeWrapper
-        title={title}
-        description={description}
-        url={url}
-        image={this.props.creator.data.photo}
-      >
+      <WebsitePrototypeWrapper title={title} description={description} url={url} image={image}>
         <WebsitePrototypeHeader />
         <div css={STYLES_ROOT}>
           <Profile {...this.props} />

pages/_/slate.js

@@ -17,7 +17,18 @@ import { SlateLayoutMobile } from "~/components/core/SlateLayoutMobile";
 import SlateMediaObject from "~/components/core/SlateMediaObject";
 
 const SIZE_LIMIT = 1000000; //NOTE(martina): 1mb limit for twitter preview images
-const DEFAULT_IMAGE = "";
+const DEFAULT_IMAGE =
+  "https://slate.textile.io/ipfs/bafkreiaow45dlq5xaydaeqocdxvffudibrzh2c6qandpqkb6t3ahbvh6re";
+const DEFAULT_BOOK =
+  "https://slate.textile.io/ipfs/bafkreibk32sw7arspy5kw3p5gkuidfcwjbwqyjdktd5wkqqxahvkm2qlyi";
+const DEFAULT_DATA =
+  "https://slate.textile.io/ipfs/bafkreid6bnjxz6fq2deuhehtxkcesjnjsa2itcdgyn754fddc7u72oks2m";
+const DEFAULT_DOCUMENT =
+  "https://slate.textile.io/ipfs/bafkreiecdiepww52i5q3luvp4ki2n34o6z3qkjmbk7pfhx4q654a4wxeam";
+const DEFAULT_VIDEO =
+  "https://slate.textile.io/ipfs/bafkreibesdtut4j5arclrxd2hmkfrv4js4cile7ajnndn3dcn5va6wzoaa";
+const DEFAULT_AUDIO =
+  "https://slate.textile.io/ipfs/bafkreig2hijckpamesp4nawrhd6vlfvrtzt7yau5wad4mzpm3kie5omv4e";
 
 const STYLES_ROOT = css`
   display: block;
@@ -152,6 +163,22 @@ export const getServerSideProps = async (context) => {
   };
 };
 
+export const FileTypeDefaultPreview = () => {
+  if (props.type && props.type.startsWith("video/")) {
+    return DEFAULT_VIDEO;
+  }
+  if (props.type && props.type.startsWith("audio/")) {
+    return DEFAULT_AUDIO;
+  }
+  if (props.type && props.type.startsWith("application/epub")) {
+    return DEFAULT_BOOK;
+  }
+  if (props.type && props.type.startsWith("application/pdf")) {
+    return DEFAULT_DOCUMENT;
+  }
+  return DEFAULT_DATA;
+};
+
 export default class SlatePage extends React.Component {
   componentDidMount() {
     if (!this.props.slate) {
@@ -220,24 +247,22 @@ export default class SlatePage extends React.Component {
 
     let { objects, layouts, body, preview } = this.props.slate.data;
 
-    let image = preview;
-    if (!image) {
-      for (let i = 0; i < objects.length; i++) {
-        if (
-          objects[i].type &&
-          objects[i].type.startsWith("image/") &&
-          (!objects[i].size || objects[i].size < SIZE_LIMIT)
-        ) {
-          image = objects[i].url.replace("https://undefined", "https://");
-          break;
+    let image;
+    if (Strings.isEmpty(this.props.cid)) {
+      image = preview;
+      if (Strings.isEmpty(image)) {
+        for (let i = 0; i < objects.length; i++) {
+          if (
+            objects[i].type &&
+            objects[i].type.startsWith("image/") &&
+            (!objects[i].size || objects[i].size < SIZE_LIMIT)
+          ) {
+            image = objects[i].url.replace("https://undefined", "https://");
+            break;
+          }
         }
       }
-    }
-    if (!image) {
-      image = DEFAULT_IMAGE;
-    }
-
-    if (!Strings.isEmpty(this.props.cid)) {
+    } else {
       let object = objects.find((each) => {
         const url = each.url.replace("https://undefined", "https://");
         const cid = Strings.getCIDFromIPFS(url);
@@ -247,10 +272,17 @@ export default class SlatePage extends React.Component {
       if (object) {
         title = !Strings.isEmpty(object.title) ? object.title : this.props.cid;
         body = !Strings.isEmpty(object.body) ? Strings.elide(object.body) : `An object on ${url}`;
-        image = object.type.includes("image/") ? object.url : image;
+        image = object.type.includes("image/") ? (
+          object.url
+        ) : (
+          <FileTypeDefaultPreview type={object.type} />
+        );
         url = `${url}/cid:${this.props.cid}`;
       }
     }
+    if (Strings.isEmpty(image)) {
+      image = DEFAULT_IMAGE;
+    }
 
     const slateCreator = `${this.props.creator.username} / `;
     const slateTitle = `${this.props.slate.slatename}`;