Fixed bad cache keys for channelIds; Added systemFileType to support …

…media in threads; Extended OdinVideo to support systemFileType as well; (#371)
homebase-id · Nov 7, 2024 · 4f05a2a · 4f05a2a
1 parent 57362de
commit 4f05a2a
Show file tree

Hide file tree

Showing 25 changed files with 225 additions and 78 deletions.
diff --git a/packages/common-app/src/hooks/file/useFile.ts b/packages/common-app/src/hooks/file/useFile.ts
@@ -1,8 +1,14 @@
-import { TargetDrive, getPayloadBytes } from '@homebase-id/js-lib/core';
+import { SystemFileType, TargetDrive, getPayloadBytes } from '@homebase-id/js-lib/core';
 import { useDotYouClient } from '../auth/useDotYouClient';
 import { getPayloadBytesOverPeerByGlobalTransitId } from '@homebase-id/js-lib/peer';
 
-export const useFile = ({ targetDrive }: { targetDrive: TargetDrive }) => {
+export const useFile = ({
+  targetDrive,
+  systemFileType,
+}: {
+  targetDrive: TargetDrive;
+  systemFileType?: SystemFileType;
+}) => {
   const dotYouClient = useDotYouClient().getDotYouClient();
   const identity = dotYouClient.getIdentity();
 
@@ -25,6 +31,7 @@ export const useFile = ({ targetDrive }: { targetDrive: TargetDrive }) => {
             globalTransitId,
             payloadKey,
             {
+              systemFileType,
               decrypt: true,
             }
           )
@@ -35,10 +42,14 @@ export const useFile = ({ targetDrive }: { targetDrive: TargetDrive }) => {
             fileId,
             payloadKey,
             {
+              systemFileType,
               decrypt: true,
             }
           )
-      : await getPayloadBytes(dotYouClient, targetDrive, fileId, payloadKey, { decrypt: true });
+      : await getPayloadBytes(dotYouClient, targetDrive, fileId, payloadKey, {
+          systemFileType,
+          decrypt: true,
+        });
     if (!payload) return null;
 
     return window.URL.createObjectURL(

diff --git a/packages/common-app/src/hooks/links/useLinkMetadata.ts b/packages/common-app/src/hooks/links/useLinkMetadata.ts
@@ -1,4 +1,4 @@
-import { TargetDrive, getPayloadAsJson } from '@homebase-id/js-lib/core';
+import { SystemFileType, TargetDrive, getPayloadAsJson } from '@homebase-id/js-lib/core';
 import { LinkPreview } from '@homebase-id/js-lib/media';
 import { getPayloadAsJsonOverPeerByGlobalTransitId } from '@homebase-id/js-lib/peer';
 import { useDotYouClient } from '../auth/useDotYouClient';
@@ -10,12 +10,14 @@ export const useLinkMetadata = ({
   targetDrive,
   fileId,
   payloadKey,
+  systemFileType,
 }: {
   odinId?: string;
   globalTransitId?: string;
   targetDrive: TargetDrive;
   fileId?: string;
   payloadKey: string;
+  systemFileType?: SystemFileType;
 }) => {
   const dotYouClient = useDotYouClient().getDotYouClient();
 
@@ -28,12 +30,17 @@ export const useLinkMetadata = ({
           odinId,
           targetDrive,
           globalTransitId,
-          payloadKey
+          payloadKey,
+          {
+            systemFileType,
+          }
         );
       }
 
       if (!fileId) return [];
-      return getPayloadAsJson<LinkPreview[]>(dotYouClient, targetDrive, fileId, payloadKey);
+      return getPayloadAsJson<LinkPreview[]>(dotYouClient, targetDrive, fileId, payloadKey, {
+        systemFileType,
+      });
     },
     refetchOnWindowFocus: false,
     refetchOnMount: false,

diff --git a/packages/common-app/src/media/Link.tsx b/packages/common-app/src/media/Link.tsx
@@ -1,7 +1,12 @@
 import { getHostFromUrl, tryJsonParse } from '@homebase-id/js-lib/helpers';
 import { LinkPreview, LinkPreviewDescriptor } from '@homebase-id/js-lib/media';
 import { ellipsisAtMaxChar } from '../helpers';
-import { EmbeddedThumb, PayloadDescriptor, TargetDrive } from '@homebase-id/js-lib/core';
+import {
+  EmbeddedThumb,
+  PayloadDescriptor,
+  SystemFileType,
+  TargetDrive,
+} from '@homebase-id/js-lib/core';
 import { useLinkMetadata } from '../hooks';
 import { LoadingBlock } from '../ui';
 import { useMemo } from 'react';
@@ -132,6 +137,7 @@ export const LinkPreviewItem = ({
   targetDrive,
   odinId,
   globalTransitId,
+  systemFileType,
   fileId,
   payload,
   className,
@@ -140,6 +146,7 @@ export const LinkPreviewItem = ({
   odinId?: string;
   fileId: string | undefined;
   globalTransitId?: string | undefined;
+  systemFileType?: SystemFileType;
   payload: PayloadDescriptor;
   className?: string;
 }) => {
@@ -149,6 +156,7 @@ export const LinkPreviewItem = ({
     fileId,
     payloadKey: payload.key,
     targetDrive,
+    systemFileType,
   });
 
   const descriptorInfo = payload.descriptorContent

diff --git a/packages/common-app/src/media/Video.tsx b/packages/common-app/src/media/Video.tsx
@@ -5,7 +5,7 @@ import {
   OdinVideoProps,
   useImage,
 } from '@homebase-id/ui-lib';
-import { EmbeddedThumb } from '@homebase-id/js-lib/core';
+import { EmbeddedThumb, SystemFileType } from '@homebase-id/js-lib/core';
 import { useMemo, useState } from 'react';
 import { useDotYouClient } from '../hooks';
 import { Triangle } from '../ui/Icons';
@@ -36,6 +36,7 @@ export interface VideoClickToLoadProps extends Omit<OdinVideoProps, 'dotYouClien
   fit?: 'cover' | 'contain';
   preload?: boolean;
   previewThumbnail?: EmbeddedThumb;
+  systemFileType?: SystemFileType;
 }
 
 export const VideoClickToLoad = ({
@@ -67,6 +68,7 @@ export const VideoClickToLoad = ({
           {...props}
           className={`${props.className || ''} ${previewLoaded || preload || loadVideo ? 'opacity-0' : 'opacity-100'} blur-sm`}
           previewThumbnail={previewThumbnail}
+          systemFileType={props.systemFileType}
           onError={() => setImageHasError(true)}
         />
       ) : null}

diff --git a/packages/common-app/src/socialFeed/Blocks/Media/PrimaryMedia.tsx b/packages/common-app/src/socialFeed/Blocks/Media/PrimaryMedia.tsx
@@ -1,5 +1,10 @@
 import { getChannelDrive, POST_LINKS_PAYLOAD_KEY } from '@homebase-id/js-lib/public';
-import { EmbeddedThumb, PayloadDescriptor, TargetDrive } from '@homebase-id/js-lib/core';
+import {
+  EmbeddedThumb,
+  PayloadDescriptor,
+  SystemFileType,
+  TargetDrive,
+} from '@homebase-id/js-lib/core';
 import { Image } from '../../../media/Image';
 import { Video, VideoClickToLoad } from '../../../media/Video';
 import { ExtensionThumbnail } from '../../../form/files/ExtensionThumbnail';
@@ -118,6 +123,7 @@ export const BoringFile = ({
   targetDrive,
   fileId,
   globalTransitId,
+  systemFileType,
   file,
   canDownload,
   className,
@@ -126,11 +132,12 @@ export const BoringFile = ({
   targetDrive: TargetDrive;
   fileId: string;
   globalTransitId: string | undefined;
+  systemFileType?: SystemFileType;
   file: PayloadDescriptor;
   canDownload?: boolean;
   className?: string;
 }) => {
-  const fetchFile = useFile({ targetDrive }).fetchFile;
+  const fetchFile = useFile({ targetDrive, systemFileType }).fetchFile;
   const doDownload = (url: string) => {
     // Dirty hack for easy download
     const link = document.createElement('a');

diff --git a/packages/community-app/src/components/Community/Message/CommunityMedia.tsx b/packages/community-app/src/components/Community/Message/CommunityMedia.tsx
@@ -4,6 +4,7 @@ import {
   PayloadDescriptor,
   NewHomebaseFile,
   NewPayloadDescriptor,
+  SystemFileType,
 } from '@homebase-id/js-lib/core';
 import { OdinImage, OdinThumbnailImage, OdinAudio, OdinAudioWaveForm } from '@homebase-id/ui-lib';
 
@@ -44,6 +45,7 @@ export const CommunityMedia = ({
         odinId={odinId}
         communityId={communityId}
         fileId={msg.fileId}
+        systemFileType={msg.fileSystemType}
         fileLastModified={msg.fileMetadata.updated}
         payload={payloads[0]}
         onClick={() => navigate(`${msg.fileMetadata.appData.uniqueId}/${payloads[0].key}`)}
@@ -57,6 +59,7 @@ const MediaItem = ({
   odinId,
   communityId,
   fileId,
+  systemFileType,
   fileLastModified,
   payload,
   fit,
@@ -68,6 +71,7 @@ const MediaItem = ({
   odinId: string;
   communityId: string;
   fileId: string | undefined;
+  systemFileType?: SystemFileType;
   fileLastModified: number | undefined;
   payload: PayloadDescriptor | NewPayloadDescriptor;
   fit?: 'contain' | 'cover';
@@ -104,6 +108,7 @@ const MediaItem = ({
                 odinId={odinId}
                 fileId={fileId}
                 fileKey={payload.key}
+                systemFileType={systemFileType}
                 lastModified={payload.lastModified || fileLastModified}
                 targetDrive={targetDrive}
                 className={`w-full blur-sm`}
@@ -120,6 +125,7 @@ const MediaItem = ({
                 odinId={odinId}
                 fileId={fileId}
                 fileKey={payload.key}
+                systemFileType={systemFileType}
                 lastModified={payload.lastModified || fileLastModified}
                 targetDrive={targetDrive}
                 onLoad={onLoad}
@@ -130,6 +136,7 @@ const MediaItem = ({
                 odinId={odinId}
                 fileId={fileId}
                 fileKey={payload.key}
+                systemFileType={systemFileType}
                 lastModified={payload.lastModified || fileLastModified}
                 targetDrive={targetDrive}
                 onLoad={onLoad}
@@ -143,6 +150,7 @@ const MediaItem = ({
               odinId={odinId}
               fileId={fileId}
               fileKey={payload.key}
+              systemFileType={systemFileType}
               lastModified={payload.lastModified || fileLastModified}
               targetDrive={targetDrive}
               avoidPayload={isVideo}
@@ -156,13 +164,15 @@ const MediaItem = ({
               targetDrive={targetDrive}
               odinId={odinId}
               fileId={fileId}
+              systemFileType={systemFileType}
               payload={payload as PayloadDescriptor}
               className="p-1"
             />
           ) : (
             <BoringFile
               odinId={odinId}
               fileId={fileId}
+              systemFileType={systemFileType}
               targetDrive={targetDrive}
               file={payload as PayloadDescriptor}
               globalTransitId={undefined}

diff --git a/packages/community-app/src/components/Community/Message/detail/CommunityMediaGallery.tsx b/packages/community-app/src/components/Community/Message/detail/CommunityMediaGallery.tsx
@@ -101,6 +101,7 @@ export const CommunityMediaGallery = ({
               fileId={msg.fileId}
               fileKey={mediaKey}
               targetDrive={targetDrive}
+              systemFileType={msg.fileSystemType}
               lastModified={msg.fileMetadata.updated}
               probablyEncrypted={true}
               className="h-full max-h-[100dvh] w-full object-contain"
@@ -113,6 +114,7 @@ export const CommunityMediaGallery = ({
               fileId={msg.fileId}
               fileKey={mediaKey}
               targetDrive={targetDrive}
+              systemFileType={msg.fileSystemType}
               alt="post"
               fit="contain"
               lastModified={msg.fileMetadata.updated}
@@ -121,6 +123,7 @@ export const CommunityMediaGallery = ({
             <BoringFile
               odinId={odinId}
               targetDrive={targetDrive}
+              systemFileType={msg.fileSystemType}
               fileId={msg.fileId}
               globalTransitId={msg.fileMetadata.globalTransitId}
               file={payload}

diff --git a/packages/community-app/src/components/Community/channel/CommunityHistory.tsx b/packages/community-app/src/components/Community/channel/CommunityHistory.tsx
@@ -5,7 +5,7 @@ import {
   COMMUNITY_MESSAGE_FILE_TYPE,
   CommunityMessage,
 } from '../../../providers/CommunityMessageProvider';
-import { useEffect, useMemo, useRef } from 'react';
+import { ReactNode, useEffect, useMemo, useRef } from 'react';
 import { useVirtualizer } from '@tanstack/react-virtual';
 import {
   ErrorNotification,
@@ -26,6 +26,7 @@ export const CommunityHistory = ({
   setIsEmptyChat,
   alignTop,
   onlyNew,
+  emptyPlaceholder,
 }: {
   community: HomebaseFile<CommunityDefinition> | undefined;
   channel: HomebaseFile<CommunityChannel> | undefined;
@@ -34,6 +35,7 @@ export const CommunityHistory = ({
   setIsEmptyChat?: (isEmpty: boolean) => void;
   alignTop?: boolean;
   onlyNew?: boolean;
+  emptyPlaceholder?: ReactNode;
 }) => {
   const identity = useDotYouClient().getIdentity();
   const scrollRef = useRef<HTMLDivElement>(null);
@@ -141,6 +143,10 @@ export const CommunityHistory = ({
     virtualizer.getVirtualItems(),
   ]);
 
+  if (emptyPlaceholder && isFetched && (!flattenedMsgs || flattenedMsgs.length === 0)) {
+    return <>{emptyPlaceholder}</>;
+  }
+
   return (
     <>
       <ErrorNotification error={deleteMessagesError} />
@@ -186,13 +192,7 @@ export const CommunityHistory = ({
               const isLoaderRow = item.index > flattenedMsgs?.length - 1;
               if (isLoaderRow) {
                 return (
-                  <div
-                    key={item.key}
-                    data-index={item.index}
-                    ref={virtualizer.measureElement}
-                    className={alignTop ? '' : 'sm:min-h-[22rem]'}
-                    // h-22rem keeps space for the context menu/emoji selector of the first item; otherwise the context menu would be cut off by the overflow-hidden
-                  >
+                  <div key={item.key} data-index={item.index} ref={virtualizer.measureElement}>
                     {hasMoreMessages || isFetchingNextPage ? (
                       <div className="animate-pulse" key={'loading'}>
                         {t('Loading...')}

diff --git a/packages/community-app/src/hooks/community/channels/useCommunityChannels.ts b/packages/community-app/src/hooks/community/channels/useCommunityChannels.ts
@@ -1,7 +1,7 @@
 import { QueryClient, useQuery } from '@tanstack/react-query';
 import { useDotYouClientContext } from '@homebase-id/common-app';
 import { CommunityChannel, getCommunityChannels } from '../../../providers/CommunityProvider';
-import { HomebaseFile } from '@homebase-id/js-lib/core';
+import { DeletedHomebaseFile, HomebaseFile } from '@homebase-id/js-lib/core';
 import { stringGuidsEqual } from '@homebase-id/js-lib/helpers';
 
 export const useCommunityChannels = (props: { odinId?: string; communityId?: string }) => {
@@ -24,7 +24,7 @@ export const useCommunityChannels = (props: { odinId?: string; communityId?: str
 
 export const insertNewCommunityChannel = (
   queryClient: QueryClient,
-  updatedChannel: HomebaseFile<CommunityChannel>,
+  updatedChannel: HomebaseFile<CommunityChannel> | DeletedHomebaseFile<unknown>,
   communityId: string
 ) => {
   const existingChannels = queryClient.getQueryData<HomebaseFile<CommunityChannel>[]>([
@@ -38,9 +38,12 @@ export const insertNewCommunityChannel = (
       !stringGuidsEqual(
         channel.fileMetadata.appData.uniqueId,
         updatedChannel.fileMetadata.appData.uniqueId
-      )
+      ) && !stringGuidsEqual(channel.fileId, updatedChannel.fileId)
   );
-  queryClient.setQueryData(['community-channels', communityId], [...allButThisOne, updatedChannel]);
+
+  const newChannels =
+    updatedChannel.fileState === 'active' ? [...allButThisOne, updatedChannel] : allButThisOne;
+  queryClient.setQueryData(['community-channels', communityId], newChannels);
 };
 
 export const removeCommunityChannel = (

diff --git a/...ages/community-app/src/hooks/community/channels/useCommunityChannelsWithRecentMessages.ts b/...ages/community-app/src/hooks/community/channels/useCommunityChannelsWithRecentMessages.ts
@@ -22,7 +22,7 @@ export const useCommunityChannelsWithRecentMessages = (props: {
   const queryClient = useQueryClient();
 
   const { data: channels } = useCommunityChannels(props).fetch;
-  const { lastUpdate } = useLastUpdatedChatMessages();
+  const { lastUpdate } = useLastUpdatedChatMessages({ communityId: props.communityId });
 
   useEffect(() => {
     if (lastUpdate === null || !channels || !channels.length) return;

diff --git a/packages/community-app/src/hooks/community/live/useCommunityPeerWebsocket.ts b/packages/community-app/src/hooks/community/live/useCommunityPeerWebsocket.ts
@@ -62,7 +62,7 @@ export const useCommunityPeerWebsocket = (
             // Something is up with the message, invalidate all messages for this conversation
             console.warn('[CommunityWebsocket] Invalid message received', notification, channelId);
             queryClient.invalidateQueries({
-              queryKey: ['community-messages', formatGuidId(channelId)],
+              queryKey: ['community-messages', formatGuidId(communityId), formatGuidId(channelId)],
             });
             return;
           }