Popout Chat bug fixes

app/src/main/helpers/cursorSettings.ts

@@ -41,6 +41,106 @@ const hideSystemCursorCss = `
   *:focus:not(:focus-visible) {
     cursor: none !important;
   }
+
+  .react-player-hide-cursor {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-panel {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-play-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-volume-slider-container {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-volume-slider {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-mute-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-timeline {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-current-time-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-full-page-media::-webkit-media-controls-panel {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-panel {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-start-playback-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-overlay-play-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-toggle-closed-captions-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-status-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-mouse-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-timeline-container {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-time-remaining-display {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-seek-back-button {
+    cursor: none !important;
+  }
+
+  video {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-seek-forward-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-fullscreen-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-enclosure {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-rewind-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-return-to-realtime-button {
+    cursor: none !important;
+  }
+
+  video::-webkit-media-controls-toggle-closed-captions-button {
+    cursor: none !important;
+  }
 `;
 
 const showSystemCursorCss = `

app/src/main/windows.ts

@@ -181,5 +181,11 @@ export const createStandaloneChatWindow = () => {
     newStandaloneChatWindow.show();
   });
 
+  // Open standalone URLs in the user's default browser.
+  newStandaloneChatWindow.webContents.setWindowOpenHandler((edata) => {
+    shell.openExternal(edata.url);
+    return { action: 'deny' };
+  });
+
   return newStandaloneChatWindow;
 };

app/src/renderer/apps/Courier/components/ChatMessage.tsx

@@ -8,6 +8,7 @@ import {
   MenuItemProps,
   OnReactionPayload,
 } from '@holium/design-system';
+import { useToggle } from '@holium/design-system/util';
 
 import { useContextMenu } from 'renderer/components';
 import { useAppState } from 'renderer/stores/app.store';
@@ -39,6 +40,8 @@ export const ChatMessagePresenter = ({
   const isOur = message.sender === ourShip;
   const { getOptions, setOptions, defaultOptions } = useContextMenu();
 
+  const deleting = useToggle(false);
+
   const messageRowId = useMemo(() => `message-row-${message.id}`, [message.id]);
   const isPinned = selectedChat?.isMessagePinned(message.id);
   const { color: authorColor, nickname: authorNickname } = useMemo(() => {
@@ -233,9 +236,11 @@ export const ChatMessagePresenter = ({
         icon: 'Trash',
         iconColor: '#ff6240',
         labelColor: '#ff6240',
-        onClick: (evt: React.MouseEvent<HTMLDivElement>) => {
+        onClick: async (evt: React.MouseEvent<HTMLDivElement>) => {
           evt.stopPropagation();
-          selectedChat.deleteMessage(message.id);
+          deleting.toggleOn();
+          await selectedChat.deleteMessage(message.id);
+          deleting.toggleOff();
         },
       });
     }
@@ -312,6 +317,7 @@ export const ChatMessagePresenter = ({
       ourShip={ourShip}
       ourColor={ourColor}
       isEditing={selectedChat?.isEditing(message.id)}
+      isDeleting={deleting.isOn}
       updatedAt={message.updatedAt}
       isEdited={hasEdited}
       author={message.sender}

app/src/renderer/apps/Courier/views/ChatLog/ChatLog.tsx

@@ -101,7 +101,7 @@ export const ChatLogPresenter = ({ isStandaloneChat = false }: Props) => {
   const showPin =
     selectedChat.pinnedMessageId !== null && !selectedChat.hidePinned;
 
-  const containerWidth = dimensions.width - 24;
+  const containerWidth = isStandaloneChat ? 434 : dimensions.width - 24;
 
   const onMessageSend = async (fragments: any[]) => {
     if (!selectedChat) return;

app/src/renderer/apps/Courier/views/ChatLog/ChatLogBody.tsx

@@ -1,7 +1,7 @@
-import { RefObject, useMemo, useState } from 'react';
+import { RefObject } from 'react';
 import { observer } from 'mobx-react';
 
-import { Flex, Text, WindowedListRef } from '@holium/design-system/general';
+import { Flex, WindowedListRef } from '@holium/design-system/general';
 
 import {
   ChatFragmentMobxType,
@@ -11,13 +11,8 @@ import { useShipStore } from 'renderer/stores/ship.store';
 
 import { ChatInputBox } from '../../components/ChatInputBox';
 import { ChatLogHeader } from '../../components/ChatLogHeader';
-import { PinnedContainer } from '../../components/PinnedMessage';
-import {
-  ChatInputContainer,
-  ChatLogListContainer,
-  FullWidthAnimatePresence,
-} from './ChatLogBody.styles';
-import { ChatLogList } from './ChatLogList';
+import { ChatInputContainer } from './ChatLogBody.styles';
+import { ChatLogBodyList } from './ChatLogBodyList';
 
 type Props = {
   path: string;
@@ -57,90 +52,20 @@ const ChatLogBodyPresenter = ({
   const { chatStore } = useShipStore();
   const { selectedChat, setSubroute, inboxLoader } = chatStore;
 
-  const [showAttachments, setShowAttachments] = useState(false);
-
   const messages = selectedChat?.messages ?? [];
 
   let topPadding = 0;
-  let endPadding = 0;
   if (showPin) {
     topPadding = 50;
   }
-  if (showAttachments) {
-    endPadding = 136;
-  }
-  if (selectedChat?.replyingMsg) {
-    endPadding = 56;
-  }
 
-  const onAttachmentChange = (attachmentCount: number) => {
-    if (attachmentCount > 0) {
-      setShowAttachments(true);
-    } else {
-      setShowAttachments(false);
-    }
+  const onAttachmentChange = () => {
     // Wait for transition to finish, then scroll to bottom.
     setTimeout(() => {
       listRef.current?.scrollToIndex(messages.length - 1);
     }, 250);
   };
 
-  const lastMessageIndex = useMemo(
-    () =>
-      messages[messages.length - 1]?.createdAt +
-      messages[messages.length - 1]?.updatedAt,
-    [
-      messages[messages.length - 1]?.createdAt,
-      messages[messages.length - 1]?.updatedAt,
-    ]
-  );
-
-  const messageList = useMemo(() => {
-    if (messages.length === 0 && inboxLoader.isLoaded) {
-      return (
-        <Text.Custom textAlign="center" width={300} fontSize={3} opacity={0.5}>
-          You haven't sent or received any messages in this chat yet.
-        </Text.Custom>
-      );
-    }
-
-    return (
-      <ChatLogListContainer isStandaloneChat={isStandaloneChat}>
-        {showPin && pinnedChatMessage && (
-          <FullWidthAnimatePresence>
-            <PinnedContainer
-              message={pinnedChatMessage}
-              onClick={() => {
-                const index = messages.findIndex(
-                  (msg) => msg.id === pinnedChatMessage.id
-                );
-                listRef?.current?.scrollToIndex({
-                  index,
-                  align: 'start',
-                  behavior: 'smooth',
-                });
-              }}
-            />
-          </FullWidthAnimatePresence>
-        )}
-        <ChatLogList
-          listRef={listRef}
-          messages={messages}
-          topOfListPadding={topPadding}
-          endOfListPadding={endPadding}
-          ourColor={ourColor}
-          isStandaloneChat={isStandaloneChat}
-        />
-      </ChatLogListContainer>
-    );
-  }, [
-    lastMessageIndex,
-    inboxLoader.isLoaded,
-    pinnedChatMessage,
-    showPin,
-    ourColor,
-  ]);
-
   return (
     <Flex flex={1} height="100%" width="100%" flexDirection="column">
       <ChatLogHeader
@@ -159,7 +84,17 @@ const ChatLogBodyPresenter = ({
         alignItems="center"
         justifyContent="center"
       >
-        {messageList}
+        <ChatLogBodyList
+          messages={messages}
+          listRef={listRef}
+          topPadding={topPadding}
+          ourColor={ourColor}
+          showPin={showPin}
+          pinnedChatMessage={pinnedChatMessage}
+          isStandaloneChat={isStandaloneChat}
+          isEmpty={messages.length === 0}
+          isLoaded={inboxLoader.isLoaded}
+        />
       </Flex>
       <ChatInputContainer isStandaloneChat={isStandaloneChat}>
         {selectedChat && (

app/src/renderer/apps/Courier/views/ChatLog/ChatLogBodyList.tsx

@@ -0,0 +1,73 @@
+import { RefObject } from 'react';
+
+import { Text, WindowedListRef } from '@holium/design-system/general';
+
+import { ChatMessageType } from 'renderer/stores/models/chat.model';
+
+import { PinnedContainer } from '../../components/PinnedMessage';
+import {
+  ChatLogListContainer,
+  FullWidthAnimatePresence,
+} from './ChatLogBody.styles';
+import { ChatLogList } from './ChatLogList';
+
+type Props = {
+  messages: ChatMessageType[];
+  listRef: RefObject<WindowedListRef>;
+  topPadding: number;
+  ourColor: string;
+  showPin: boolean;
+  pinnedChatMessage: ChatMessageType | null | undefined;
+  isStandaloneChat: boolean;
+  isEmpty: boolean;
+  isLoaded: boolean;
+};
+
+export const ChatLogBodyList = ({
+  messages,
+  listRef,
+  topPadding,
+  ourColor,
+  showPin,
+  isEmpty,
+  isLoaded,
+  isStandaloneChat,
+  pinnedChatMessage,
+}: Props) => {
+  if (isEmpty && isLoaded) {
+    return (
+      <Text.Custom textAlign="center" width={300} fontSize={3} opacity={0.5}>
+        You haven't sent or received any messages in this chat yet.
+      </Text.Custom>
+    );
+  }
+
+  return (
+    <ChatLogListContainer isStandaloneChat={isStandaloneChat}>
+      {showPin && pinnedChatMessage && (
+        <FullWidthAnimatePresence>
+          <PinnedContainer
+            message={pinnedChatMessage}
+            onClick={() => {
+              const index = messages.findIndex(
+                (msg) => msg.id === pinnedChatMessage.id
+              );
+              listRef?.current?.scrollToIndex({
+                index,
+                align: 'start',
+                behavior: 'smooth',
+              });
+            }}
+          />
+        </FullWidthAnimatePresence>
+      )}
+      <ChatLogList
+        listRef={listRef}
+        messages={messages}
+        topOfListPadding={topPadding}
+        ourColor={ourColor}
+        isStandaloneChat={isStandaloneChat}
+      />
+    </ChatLogListContainer>
+  );
+};