From 3d4b4901bb7c8939d77c64b3c76d22163843f31b Mon Sep 17 00:00:00 2001
From: Liam Fitzgerald <liam.fitzgerald@tlon.io>
Date: Tue, 22 Jun 2021 04:26:39 +1000
Subject: [PATCH] RemoteContent: fix graphcontent embedding

---
 .../src/stories/RemoteContent.stories.tsx     |  6 ++++
 .../apps/links/components/LinkBlockItem.tsx   |  2 +-
 .../views/components/RemoteContent/embed.tsx  | 30 +++++++------------
 .../views/components/RemoteContent/index.tsx  | 11 ++-----
 .../components/RemoteContent/wrapper.tsx      |  2 +-
 5 files changed, 20 insertions(+), 31 deletions(-)

diff --git a/pkg/interface/src/stories/RemoteContent.stories.tsx b/pkg/interface/src/stories/RemoteContent.stories.tsx
index 80fb8b3ff..98be35b2d 100644
--- a/pkg/interface/src/stories/RemoteContent.stories.tsx
+++ b/pkg/interface/src/stories/RemoteContent.stories.tsx
@@ -38,3 +38,9 @@ Twitter.args = {
   // massive test flake
   unfold: false
 };
+
+export const Fallback = Template.bind({});
+
+Fallback.args = {
+  url: 'https://www.are.na/edouard-urcades/edouard'
+};
diff --git a/pkg/interface/src/views/apps/links/components/LinkBlockItem.tsx b/pkg/interface/src/views/apps/links/components/LinkBlockItem.tsx
index 1f3169b54..4e2033516 100644
--- a/pkg/interface/src/views/apps/links/components/LinkBlockItem.tsx
+++ b/pkg/interface/src/views/apps/links/components/LinkBlockItem.tsx
@@ -92,7 +92,7 @@ export function LinkBlockItem(props: LinkBlockItemProps & CenterProps) {
       ) : isAudio ? (
         <AudioPlayer title={title} url={url} />
       ) : isOembed ? (
-        <RemoteContentOembed renderUrl url={url} thumbnail={summary} />
+        <RemoteContentOembed tall={!summary} renderUrl url={url} thumbnail={summary} />
       ) : (
         <RemoteContentEmbedFallback url={url} />
       )}
diff --git a/pkg/interface/src/views/components/RemoteContent/embed.tsx b/pkg/interface/src/views/components/RemoteContent/embed.tsx
index 56e9a6114..dbfd8de9c 100644
--- a/pkg/interface/src/views/components/RemoteContent/embed.tsx
+++ b/pkg/interface/src/views/components/RemoteContent/embed.tsx
@@ -22,11 +22,11 @@ import { TruncatedText } from '~/views/components/TruncatedText';
 import { getModuleIcon, useHovering } from '~/logic/lib/util';
 import { IconRef, PropFunc } from '~/types';
 import { system } from 'styled-system';
-import { extract } from 'oembed-parser';
 import { Association, GraphConfig, ReferenceContent } from '@urbit/api';
 import { Link } from 'react-router-dom';
 import { referenceToPermalink } from '~/logic/lib/permalinks';
 import useMetadataState from '~/logic/state/metadata';
+import { RemoteContentWrapper } from './wrapper';
 
 interface RemoteContentEmbedProps {
   url: string;
@@ -235,9 +235,7 @@ export const RemoteContentOembed = React.forwardRef<
   useEffect(() => {
     const getEmbed = async () => {
       try {
-        // const { width, height } = ourRef.current.getBoundingClientRect();
-
-        const oembed = await extract(url);
+        const oembed = await (await fetch(`https://noembed.com/embed?url=${encodeURIComponent(url)}`)).json();
         setEmbed(oembed);
       } catch (e) {
         console.error(e);
@@ -251,11 +249,8 @@ export const RemoteContentOembed = React.forwardRef<
   if (!renderUrl && !embed) {
     return null;
   }
-  if (!embed) {
-    return <RemoteContentEmbedFallback url={url} />;
-  }
 
-  return (
+  const detail = (
     <Col
       ref={ourRef}
       mb={2}
@@ -266,17 +261,6 @@ export const RemoteContentOembed = React.forwardRef<
       alignItems="center"
       {...rest}
     >
-      <TruncatedText
-        display={
-          renderUrl && embed?.title && embed.title !== url
-            ? 'inline-block'
-            : 'none'
-        }
-        fontWeight="bold"
-        width="100%"
-      >
-        {embed?.title}
-      </TruncatedText>
       {thumbnail && embed?.['thumbnail_url'] ? (
         <BaseImage
           height="100%"
@@ -285,13 +269,19 @@ export const RemoteContentOembed = React.forwardRef<
         />
       ) : !thumbnail && embed?.html ? (
         <EmbedContainer markup={embed.html}>
-          <EmbedBox dangerouslySetInnerHTML={{ __html: embed.html }}></EmbedBox>
+          <EmbedBox ref={ref} dangerouslySetInnerHTML={{ __html: embed.html }}></EmbedBox>
         </EmbedContainer>
       ) : renderUrl ? (
         <RemoteContentEmbedFallback url={url} />
       ) : null}
     </Col>
   );
+
+  return (
+    <RemoteContentWrapper url={url} detail={detail}>
+      <TruncatedText>{embed?.title ?? url}</TruncatedText>
+    </RemoteContentWrapper>
+  );
 });
 
 export function RemoteContentEmbedFallback(props: RemoteContentEmbedProps) {
diff --git a/pkg/interface/src/views/components/RemoteContent/index.tsx b/pkg/interface/src/views/components/RemoteContent/index.tsx
index 019ddf368..4487bdb70 100644
--- a/pkg/interface/src/views/components/RemoteContent/index.tsx
+++ b/pkg/interface/src/views/components/RemoteContent/index.tsx
@@ -58,7 +58,7 @@ export function RemoteContent(props: RemoteContentProps) {
   const wrapperProps = {
     url,
     tall,
-    embedOnly: !renderUrl
+    embedOnly: (!renderUrl || tall)
   };
 
   if (isImage && remoteContentPolicy.imageShown) {
@@ -89,14 +89,7 @@ export function RemoteContent(props: RemoteContentProps) {
     );
   } else if (isOembed && remoteContentPolicy.oembedShown) {
     return (
-      <RemoteContentWrapper
-        {...wrapperProps}
-        detail={(
-          <RemoteContentOembed ref={embedRef} url={url} renderUrl={renderUrl} />
-        )}
-      >
-        <TruncatedText {...textProps}>{url}</TruncatedText>
-      </RemoteContentWrapper>
+      <RemoteContentOembed ref={embedRef} url={url} renderUrl={renderUrl} />
     );
   } else if(renderUrl) {
     return (
diff --git a/pkg/interface/src/views/components/RemoteContent/wrapper.tsx b/pkg/interface/src/views/components/RemoteContent/wrapper.tsx
index b211dba93..b74fcf7ed 100644
--- a/pkg/interface/src/views/components/RemoteContent/wrapper.tsx
+++ b/pkg/interface/src/views/components/RemoteContent/wrapper.tsx
@@ -72,7 +72,7 @@ export function RemoteContentWrapper(props: RemoteContentWrapperProps) {
           {children}
         </BaseAnchor>
       </Row>
-      {detail}
+      {unfold ? detail : null}
     </Box>
   );
 }