File block+download in static renderer

seed-hypermedia · Oct 17, 2023 · cd1353c · cd1353c
1 parent 54e8340
commit cd1353c
Show file tree

Hide file tree

Showing 4 changed files with 89 additions and 69 deletions.
diff --git a/frontend/apps/site/publication-page.tsx b/frontend/apps/site/publication-page.tsx
@@ -140,6 +140,10 @@ export default function PublicationPage({
                   e.stopPropagation()
                   router.push(href)
                 }}
+                saveCidAsFile={async () => {
+                  alert('Not implemented yet.')
+                }}
+                ipfsBlobPrefix="/"
               >
                 <StaticPublication publication={pub} />
               </StaticPublicationProvider>

diff --git a/frontend/packages/app/pages/group.tsx b/frontend/packages/app/pages/group.tsx
@@ -72,6 +72,7 @@ import {useOpenDraft} from '../utils/open-draft'
 import {pathNameify} from '../utils/path'
 import {hostnameStripProtocol} from '../utils/site-hostname'
 import {useNavigate} from '../utils/useNavigate'
+import {AppStaticPublicationProvider} from './publication'
 
 export function RenamePubDialog({
   input: {groupId, pathName, docTitle},
@@ -271,20 +272,9 @@ function PublicationDisplay({urlWithVersion}: {urlWithVersion: string}) {
       paddingHorizontal="$5"
       alignSelf="center"
     >
-      <StaticPublicationProvider
-        entityComponents={{
-          StaticAccount: StaticBlockAccount,
-          StaticGroup: StaticBlockGroup,
-          StaticPublication: StaticBlockPublication,
-        }}
-        onLinkClick={(href, e) => {
-          e.preventDefault()
-          e.stopPropagation()
-          openUrl(href)
-        }}
-      >
+      <AppStaticPublicationProvider>
         <StaticPublication publication={pub.data} />
-      </StaticPublicationProvider>
+      </AppStaticPublicationProvider>
     </YStack>
   ) : null
 }

diff --git a/frontend/packages/app/pages/publication.tsx b/frontend/packages/app/pages/publication.tsx
@@ -30,6 +30,32 @@ import {VersionChangesInfo} from '../components/version-changes-info'
 import {usePublicationInContext} from '../models/publication'
 import {useOpenUrl} from '../open-url'
 import {DocumentPlaceholder} from './document-placeholder'
+import {useAppContext} from '../app-context'
+
+export function AppStaticPublicationProvider({
+  children,
+}: React.PropsWithChildren<{}>) {
+  const {saveCidAsFile} = useAppContext()
+  const openUrl = useOpenUrl()
+  return (
+    <StaticPublicationProvider
+      entityComponents={{
+        StaticAccount: StaticBlockAccount,
+        StaticGroup: StaticBlockGroup,
+        StaticPublication: StaticBlockPublication,
+      }}
+      onLinkClick={(href, e) => {
+        e.preventDefault()
+        e.stopPropagation()
+        openUrl(href)
+      }}
+      ipfsBlobPrefix={`${BACKEND_FILE_URL}/`}
+      saveCidAsFile={saveCidAsFile}
+    >
+      {children}
+    </StaticPublicationProvider>
+  )
+}
 
 export default function PublicationPage() {
   const route = useNavRoute()
@@ -85,21 +111,9 @@ export default function PublicationPage() {
                     paddingHorizontal="10vw"
                     alignSelf="center"
                   >
-                    <StaticPublicationProvider
-                      entityComponents={{
-                        StaticAccount: StaticBlockAccount,
-                        StaticGroup: StaticBlockGroup,
-                        StaticPublication: StaticBlockPublication,
-                      }}
-                      onLinkClick={(href, e) => {
-                        e.preventDefault()
-                        e.stopPropagation()
-                        openUrl(href)
-                      }}
-                      ipfsBlobPrefix={`${BACKEND_FILE_URL}/`}
-                    >
+                    <AppStaticPublicationProvider>
                       <StaticPublication publication={publication.data} />
-                    </StaticPublicationProvider>
+                    </AppStaticPublicationProvider>
                   </YStack>
                   {route.versionId && (
                     <OutOfDateBanner docId={docId} version={route.versionId} />

diff --git a/frontend/packages/shared/src/static/static-renderer.tsx b/frontend/packages/shared/src/static/static-renderer.tsx
@@ -16,6 +16,7 @@ import {
   unpackHmId,
 } from '@mintter/shared'
 import {
+  Button,
   ColorProp,
   File,
   FontSizeTokens,
@@ -50,6 +51,7 @@ export type StaticPublicationContextValue = {
   entityComponents: EntityComponentsRecord
   onLinkClick: (dest: string, e: any) => void
   ipfsBlobPrefix: string
+  saveCidAsFile: (cid: string, name: string) => Promise<void>
 }
 
 export const staticPublicationContext =
@@ -309,6 +311,10 @@ function StaticBlock(props: StaticBlockProps) {
     return <StaticBlockVideo {...props} depth={props.depth} />
   }
 
+  if (props.block.type == 'file') {
+    return <StaticFileBlock block={props.block} />
+  }
+
   if (props.block.type == 'embed') {
     return (
       <StaticBlockEmbed
@@ -489,7 +495,7 @@ function StaticBlockVideo({block, depth}: StaticBlockProps) {
             preload="metadata"
           >
             <source
-              src={`${ipfsBlobPrefix}${block.ref.replace('ipfs://', '')}`}
+              src={`${ipfsBlobPrefix}${getCIDFromIPFSUrl(block.ref)}`}
               type={getSourceType(block.attributes.name)}
             />
             Something is wrong with the video file.
@@ -704,53 +710,59 @@ export function getBlockNodeById(
 }
 
 export function StaticFileBlock({block}: {block: HMBlockFile}) {
-  let cid = useMemo(() => getCIDFromIPFSUrl(block.ref), [block.ref])
+  const {saveCidAsFile} = useStaticPublicationContext()
   return (
-    <Tooltip content={`Download ${block.attributes.name}`}>
-      <YStack
-        backgroundColor="$color3"
-        borderColor="$color4"
-        borderWidth={1}
-        borderRadius={blockBorderRadius as any}
-        // marginRight={blockHorizontalPadding}
-        overflow="hidden"
-        hoverStyle={{
-          backgroundColor: '$color4',
-        }}
-        onPress={() => console.log('OPEN FILE', cid)}
+    <YStack
+      backgroundColor="$color3"
+      borderColor="$color4"
+      borderWidth={1}
+      borderRadius={blockBorderRadius as any}
+      // marginRight={blockHorizontalPadding}
+      overflow="hidden"
+      // hoverStyle={{
+      //   backgroundColor: '$color4',
+      // }}
+    >
+      <XStack
+        borderWidth={0}
+        outlineWidth={0}
+        padding="$4"
+        alignItems="center"
+        space
       >
-        <XStack
-          borderWidth={0}
-          outlineWidth={0}
-          padding="$4"
-          alignItems="center"
-          space
+        <File size={18} />
+
+        <SizableText
+          size="$5"
+          maxWidth="17em"
+          overflow="hidden"
+          textOverflow="ellipsis"
+          whiteSpace="nowrap"
+          userSelect="text"
         >
-          <File size={18} />
-
+          {block.attributes.name}
+        </SizableText>
+        {block.attributes.size && (
           <SizableText
-            size="$5"
-            maxWidth="17em"
-            overflow="hidden"
-            textOverflow="ellipsis"
-            whiteSpace="nowrap"
-            userSelect="text"
+            paddingTop="$1"
+            color="$color10"
+            size="$2"
+            minWidth="4.5em"
           >
-            {block.attributes.name}
+            {formatBytes(parseInt(block.attributes.size))}
           </SizableText>
-          {block.attributes.size && (
-            <SizableText
-              paddingTop="$1"
-              color="$color10"
-              size="$2"
-              minWidth="4.5em"
-            >
-              {formatBytes(parseInt(block.attributes.size))}
-            </SizableText>
-          )}
-        </XStack>
-      </YStack>
-    </Tooltip>
+        )}
+        <Tooltip content={`Download ${block.attributes.name}`}>
+          <Button
+            onPress={() => {
+              saveCidAsFile(getCIDFromIPFSUrl(block.ref), block.attributes.name)
+            }}
+          >
+            Download
+          </Button>
+        </Tooltip>
+      </XStack>
+    </YStack>
   )
 }