Merge pull request #822 from AppQuality/fix-transcript-obs-button

Fix-transcript-obs-button

Author: marcbon

src/pages/Video/components/ObservationTooltip.tsx

@@ -4,10 +4,18 @@ import { getColorWithAlpha } from 'src/common/utils';
 import styled from 'styled-components';
 import { useVideoContext } from '../context/VideoContext';
 
-const StyledTag = styled(Tag)`
+const StyledTag = styled(Tag)<{
+  isSelecting?: boolean;
+}>`
+  ${({ isSelecting }) =>
+    isSelecting &&
+    `
+    display: none;
+  `}
   box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
   background: white;
   position: relative;
+  user-select: none;
 
   &:hover {
     cursor: pointer;
@@ -35,17 +43,20 @@ export const ObservationTooltip = ({
   observationId,
   color,
   label,
+  isSelecting,
 }: {
   observationId: number;
   color?: string;
   label?: string;
+  isSelecting?: boolean;
 }) => {
   const { setOpenAccordion } = useVideoContext();
   return (
     <StyledTag
       size="large"
       color={color}
       onClick={() => setOpenAccordion({ id: observationId })}
+      isSelecting={isSelecting}
     >
       <TagIcon />
       {label}

src/pages/Video/components/Transcript.tsx

@@ -49,11 +49,6 @@ const HighlightContainer = styled.div``;
 const ChipsWrap = styled.div`
   line-height: ${({ theme }) => theme.lineHeights.xxl};
   position: relative;
-
-  [observation] {
-    display: inline-block;
-    padding: 0 2px;
-  }
 `;
 
 export const TitleWrapper = styled.div`
@@ -63,6 +58,20 @@ export const TitleWrapper = styled.div`
   gap: ${({ theme }) => theme.space.xs};
 `;
 
+const CreateObservationButton = styled(Button)<{
+  position: {
+    x: number;
+    y: number;
+  };
+}>`
+  user-select: none;
+  position: absolute;
+  left: ${({ position }) => position.x}px;
+  top: ${({ position }) => position.y}px;
+  transform: translate(-50%, 0);
+  z-index: ${({ theme }) => theme.levels.front};
+`;
+
 const Transcript = ({
   currentTime,
   isSearchable,
@@ -179,10 +188,11 @@ const Transcript = ({
           lastRect.right - containerRect.left + wrapperRef.current.scrollLeft;
 
         setPosition({
-          x: relativeX + 30,
-          y: relativeY - 60,
+          x: relativeX,
+          y: relativeY + 15,
         });
       } else {
+        setPosition(undefined);
         setIsSelecting(false);
       }
     };
@@ -263,29 +273,25 @@ const Transcript = ({
                         color={observation.color}
                         observationId={observation.id}
                         label={observation.label}
+                        isSelecting={isSelecting}
                       />
                     )}
                   />
                 ))}
                 {isSelecting && (
-                  <Button
+                  <CreateObservationButton
                     size="small"
                     id="add-observation-button"
                     isAccent
                     isPrimary
                     onClick={handleAddObservation}
-                    style={{
-                      position: 'absolute',
-                      left: position?.x,
-                      top: position?.y,
-                      transform: 'translate(-50%, 0)',
-                    }}
+                    position={position || { x: 0, y: 0 }}
                   >
                     <Button.StartIcon>
                       <TagIcon />
                     </Button.StartIcon>
                     {t('__VIDEO_PAGE_ADD_OBSERVATION')}
-                  </Button>
+                  </CreateObservationButton>
                 )}
               </ChipsWrap>
             </Highlight>