Merge pull request #2807 from yougotwill/fix/no-ref/selected_message_…

…shadow Fix/no ref/selected message shadow
oxen-io · Jul 10, 2023 · 5e6abcd · 5e6abcd
2 parents de41988 + e232ead
commit 5e6abcd
Show file tree

Hide file tree

Showing 8 changed files with 169 additions and 156 deletions.
diff --git a/stylesheets/_modules.scss b/stylesheets/_modules.scss
@@ -1048,6 +1048,9 @@
 }
 
 // Module H5AudioPlayer
+$rhap_background-color: var(--transparent-color) !default;
+$rhap_font-family: inherit !default;
+
 .module-message__container--outgoing {
   .rhap_container {
     background-color: var(--message-bubbles-sent-background-color);

diff --git a/stylesheets/_session_conversation.scss b/stylesheets/_session_conversation.scss
@@ -254,135 +254,3 @@
     }
   }
 }
-
-/* ************ */
-/* AUDIO PLAYER */
-/* ************ */
-$rhap_background-color: var(--transparent-color) !default;
-$rhap_font-family: inherit !default;
-
-.rhap_container,
-.rhap_container button,
-.rhap_progress-container {
-  outline: none;
-}
-
-.rhap_progress-container {
-  margin: 0 0 0 calc(10px + 1%);
-}
-
-.rhap_container {
-  min-width: 220px;
-  padding: 0px;
-  background-color: transparent;
-  box-shadow: none;
-  padding: var(--padding-message-content);
-  border-radius: var(--border-radius-message-box);
-
-  svg {
-    transition: fill var(--default-duration);
-  }
-}
-
-.rhap_total-time {
-  display: none;
-}
-
-.rhap_current-time {
-  margin: 0 5px 0 4px;
-  flex-shrink: 0;
-}
-
-.rhap_play-pause-button {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-}
-
-.rhap_volume-bar {
-  display: none;
-}
-
-.rhap_volume-button {
-  .module-message__container--incoming & {
-    color: var(--message-bubbles-received-text-color);
-  }
-  .module-message__container--outgoing & {
-    color: var(--message-bubbles-sent-text-color);
-  }
-}
-
-.rhap_volume-container div[role='progressbar'] {
-  display: none;
-}
-
-.rhap_time {
-  .module-message__container--incoming & {
-    color: var(--message-bubbles-received-text-color);
-  }
-  .module-message__container--outgoing & {
-    color: var(--message-bubbles-sent-text-color);
-  }
-
-  font-size: 12px;
-}
-
-.rhap_progress-bar {
-  box-sizing: border-box;
-  position: relative;
-  z-index: 0;
-  width: 100%;
-  height: 5px;
-  border-radius: 2px;
-}
-
-.rhap_progress-filled {
-  padding-left: 5px;
-}
-
-.rhap_download-progress {
-  height: 100%;
-  position: absolute;
-  z-index: 1;
-  border-radius: 2px;
-}
-
-.rhap_progress-indicator {
-  z-index: 3;
-  width: 15px;
-  height: 15px;
-  top: -5px;
-  margin-left: -10px;
-  box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important;
-}
-
-.rhap_controls-section {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.rhap_additional-controls {
-  display: none;
-}
-
-.rhap_play-pause-button {
-  width: unset;
-  height: unset;
-}
-
-.rhap_controls-section {
-  flex: unset;
-  justify-content: flex-start;
-}
-
-.rhap_volume-button {
-  font-size: 20px;
-  width: 20px;
-  height: 20px;
-  margin-right: 0px;
-}
-
-/* **************** */
-/* END AUDIO PLAYER */
-/* **************** */
diff --git a/ts/components/conversation/H5AudioPlayer.tsx b/ts/components/conversation/H5AudioPlayer.tsx
@@ -25,6 +25,128 @@ const StyledSpeedButton = styled.div`
   }
 `;
 
+export const StyledH5AudioPlayer = styled(H5AudioPlayer)`
+  &.rhap_container {
+    min-width: 220px;
+    padding: 0px;
+    outline: none;
+    padding: var(--padding-message-content);
+    border-radius: var(--border-radius-message-box);
+
+    svg {
+      transition: fill var(--default-duration);
+    }
+
+    button {
+      outline: none;
+    }
+  }
+
+  .rhap_progress-container {
+    margin: 0 0 0 calc(10px + 1%);
+    outline: none;
+  }
+
+  .rhap_total-time {
+    display: none;
+  }
+
+  .rhap_current-time {
+    margin: 0 5px 0 4px;
+    flex-shrink: 0;
+  }
+
+  .rhap_play-pause-button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .rhap_volume-bar {
+    display: none;
+  }
+
+  .rhap_volume-button {
+    .module-message__container--incoming & {
+      color: var(--message-bubbles-received-text-color);
+    }
+    .module-message__container--outgoing & {
+      color: var(--message-bubbles-sent-text-color);
+    }
+  }
+
+  .rhap_volume-container div[role='progressbar'] {
+    display: none;
+  }
+
+  .rhap_time {
+    .module-message__container--incoming & {
+      color: var(--message-bubbles-received-text-color);
+    }
+    .module-message__container--outgoing & {
+      color: var(--message-bubbles-sent-text-color);
+    }
+
+    font-size: 12px;
+  }
+
+  .rhap_progress-bar {
+    box-sizing: border-box;
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    height: 5px;
+    border-radius: 2px;
+  }
+
+  .rhap_progress-filled {
+    padding-left: 5px;
+  }
+
+  .rhap_download-progress {
+    height: 100%;
+    position: absolute;
+    z-index: 1;
+    border-radius: 2px;
+  }
+
+  .rhap_progress-indicator {
+    z-index: 3;
+    width: 15px;
+    height: 15px;
+    top: -5px;
+    margin-left: -10px;
+    box-shadow: rgba(0, 0, 0, 0.5) 0 0 5px !important;
+  }
+
+  .rhap_controls-section {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+  }
+
+  .rhap_additional-controls {
+    display: none;
+  }
+
+  .rhap_play-pause-button {
+    width: unset;
+    height: unset;
+  }
+
+  .rhap_controls-section {
+    flex: unset;
+    justify-content: flex-start;
+  }
+
+  .rhap_volume-button {
+    font-size: 20px;
+    width: 20px;
+    height: 20px;
+    margin-right: 0px;
+  }
+`;
+
 export const AudioPlayerWithEncryptedFile = (props: {
   src: string;
   contentType: string;
@@ -98,7 +220,7 @@ export const AudioPlayerWithEncryptedFile = (props: {
   };
 
   return (
-    <H5AudioPlayer
+    <StyledH5AudioPlayer
       src={urlToLoad}
       preload="metadata"
       style={{ pointerEvents: multiSelectMode ? 'none' : 'inherit' }}

diff --git a/ts/components/conversation/message/message-content/MessageAttachment.tsx b/ts/components/conversation/message/message-content/MessageAttachment.tsx
@@ -31,6 +31,7 @@ import { LightBoxOptions } from '../../SessionConversation';
 import { ClickToTrustSender } from './ClickToTrustSender';
 import styled from 'styled-components';
 import classNames from 'classnames';
+import { StyledMessageHighlighter } from './MessageContent';
 
 export type MessageAttachmentSelectorProps = Pick<
   MessageRenderingProps,
@@ -48,10 +49,13 @@ type Props = {
   messageId: string;
   imageBroken: boolean;
   handleImageError: () => void;
+  highlight?: boolean;
 };
 // tslint:disable: use-simple-attributes
 
-const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelType }>`
+const StyledAttachmentContainer = styled.div<{
+  messageDirection: MessageModelType;
+}>`
   text-align: center;
   position: relative;
   overflow: hidden;
@@ -61,10 +65,11 @@ const StyledAttachmentContainer = styled.div<{ messageDirection: MessageModelTyp
 
 // tslint:disable-next-line max-func-body-length cyclomatic-complexity
 export const MessageAttachment = (props: Props) => {
-  const { messageId, imageBroken, handleImageError } = props;
+  const { messageId, imageBroken, handleImageError, highlight = false } = props;
 
   const dispatch = useDispatch();
   const attachmentProps = useSelector(state => getMessageAttachmentProps(state as any, messageId));
+
   const multiSelectMode = useSelector(isMessageSelectionMode);
   const onClickOnImageGrid = useCallback(
     (attachment: AttachmentTypeWithPath | AttachmentType) => {
@@ -116,6 +121,7 @@ export const MessageAttachment = (props: Props) => {
   if (!attachments || !attachments[0]) {
     return null;
   }
+
   const firstAttachment = attachments[0];
   const displayImage = canDisplayImage(attachments);
 
@@ -130,18 +136,22 @@ export const MessageAttachment = (props: Props) => {
       (isVideo(attachments) && hasVideoScreenshot(attachments)))
   ) {
     return (
-      <StyledAttachmentContainer messageDirection={direction}>
-        <ImageGrid
-          attachments={attachments}
-          onError={handleImageError}
-          onClickAttachment={onClickOnImageGrid}
-        />
-      </StyledAttachmentContainer>
+      <StyledMessageHighlighter highlight={highlight}>
+        <StyledAttachmentContainer messageDirection={direction}>
+          <ImageGrid
+            attachments={attachments}
+            onError={handleImageError}
+            onClickAttachment={onClickOnImageGrid}
+          />
+        </StyledAttachmentContainer>
+      </StyledMessageHighlighter>
     );
   }
+
   if (!firstAttachment.pending && !firstAttachment.error && isAudio(attachments)) {
     return (
-      <div
+      <StyledMessageHighlighter
+        highlight={highlight}
         role="main"
         onClick={(e: any) => {
           if (multiSelectMode) {
@@ -150,21 +160,20 @@ export const MessageAttachment = (props: Props) => {
           e.stopPropagation();
           e.preventDefault();
         }}
-        style={{ padding: 'var(--margins-xs) 0px' }}
       >
         <AudioPlayerWithEncryptedFile
           src={firstAttachment.url}
           contentType={firstAttachment.contentType}
           messageId={messageId}
         />
-      </div>
+      </StyledMessageHighlighter>
     );
   }
   const { pending, fileName, fileSize, contentType } = firstAttachment;
   const extension = getExtensionForDisplay({ contentType, fileName });
 
   return (
-    <div className="module-message__generic-attachment">
+    <StyledMessageHighlighter highlight={highlight} className="module-message__generic-attachment">
       {pending ? (
         <div className="module-message__generic-attachment__spinner-container">
           <Spinner size="small" />
@@ -200,7 +209,7 @@ export const MessageAttachment = (props: Props) => {
           {fileSize}
         </div>
       </div>
-    </div>
+    </StyledMessageHighlighter>
   );
 };