From 75815d1622d5129a5a357d902197f19a23d9d771 Mon Sep 17 00:00:00 2001
From: Aminejv <elouartinra@hotmail.com>
Date: Tue, 26 Oct 2021 16:58:19 +0100
Subject: [PATCH] feat(ObjectBoxPreview): add ObjectBoxPreview

---
 components/core/ObjectBoxPreview.js | 48 +++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 components/core/ObjectBoxPreview.js

diff --git a/components/core/ObjectBoxPreview.js b/components/core/ObjectBoxPreview.js
new file mode 100644
index 00000000..12921340
--- /dev/null
+++ b/components/core/ObjectBoxPreview.js
@@ -0,0 +1,48 @@
+import * as React from "react";
+import * as Validations from "~/common/validations";
+import * as Strings from "~/common/strings";
+
+import { css } from "@emotion/react";
+
+import ObjectPlaceholder from "~/components/core/ObjectPreview/placeholders";
+
+const STYLES_PLACEHOLDER_CONTAINER = css`
+  height: 100%;
+  width: 100%;
+  min-width: auto;
+`;
+
+const STYLES_PREVIEW = css`
+  height: 100%;
+  width: 100%;
+  background-size: cover;
+  overflow: hidden;
+  img {
+    height: 100%;
+    width: 100%;
+    object-fit: cover;
+  }
+`;
+
+export default function BlobObjectPreview({ file, css, placeholderRatio = 1, ...props }) {
+  const isImage = Validations.isPreviewableImage(file.type);
+  const url = Strings.getURLfromCID(file.cid);
+
+  if (isImage) {
+    return (
+      <div css={[STYLES_PREVIEW, css]} {...props}>
+        <img src={url} alt="File preview" />
+      </div>
+    );
+  }
+
+  return (
+    <div css={[STYLES_PREVIEW, css]} {...props}>
+      <ObjectPlaceholder
+        ratio={placeholderRatio}
+        containerCss={STYLES_PLACEHOLDER_CONTAINER}
+        file={file}
+      />
+    </div>
+  );
+}