Merge branch 'develop' into i18n-translations

cannarocks · web-flow · commit b4b4f501bc6a · 2024-07-04T11:57:34.000+02:00
diff --git a/package.json b/package.json
@@ -3,7 +3,7 @@
   "version": "1.4.0",
   "private": true,
   "dependencies": {
-    "@appquality/unguess-design-system": "3.1.102",
+    "@appquality/unguess-design-system": "3.1.104",
     "@headwayapp/react-widget": "^0.0.4",
     "@reduxjs/toolkit": "^1.8.0",
     "@rtk-query/codegen-openapi": "1.2.0",
diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json
@@ -253,9 +253,9 @@
   "__BUGS_READ_FILTER_ITEM_UNREAD": "Unread",
   "__BUGS_REPLICABILITY_FILTER_ITEM_NO_ITEMS": "All replicabilities",
   "__BUGS_SEARCH_INPUT_PLACEHOLDER": "Search",
-  "__BUGS_SEVERITY_FILTER_ITEM_NO_ITEMS": "Typology",
-  "__BUGS_SEVERITY_FILTER_ITEM_WITH_COUNTER_one": "Typology ({{count}})",
-  "__BUGS_SEVERITY_FILTER_ITEM_WITH_COUNTER_other": "Typology ({{count}})",
+  "__BUGS_SEVERITY_FILTER_ITEM_NO_ITEMS": "Severity",
+  "__BUGS_SEVERITY_FILTER_ITEM_WITH_COUNTER_one": "Severity ({{count}})",
+  "__BUGS_SEVERITY_FILTER_ITEM_WITH_COUNTER_other": "Severities ({{count}})",
   "__BUGS_TABLE_BUG_ID_HEADER_COLUMN": "Bug ID",
   "__BUGS_TABLE_DUPLICATE_HEADER_COLUMN": "Duplicates",
   "__BUGS_TABLE_DUPLICATE_TOOLTIP_TEXT": "This icon indicates unique bugs",
diff --git a/src/pages/Video/Actions.tsx b/src/pages/Video/Actions.tsx
@@ -91,7 +91,6 @@ const Actions = () => {
         )}
       </MetaContainer>
       {observations && observations.length ? (
-        observations &&
         observations.map((observation) => (
           <Observation
             refScroll={refScroll}
diff --git a/src/pages/Video/PageHeader.tsx b/src/pages/Video/PageHeader.tsx
@@ -24,10 +24,22 @@ const SeveritiesMetaContainer = styled.div`
   display: flex;
   flex-direction: row;
 `;
-
 const SeveritiesMetaText = styled.div`
   margin-right: ${({ theme }) => theme.space.sm};
 `;
+const StyledUseCaseName = styled(MD)`
+  color: ${({ theme }) => theme.palette.grey[600]};
+  margin-left: auto;
+`;
+const StyledPageHeaderMeta = styled(PageHeader.Meta)`
+  @media (max-width: ${({ theme }) => theme.breakpoints.lg}) {
+    ${StyledUseCaseName} {
+      display: block;
+      width: 100%;
+      margin-top: ${({ theme }) => theme.space.xs};
+    }
+  }
+`;
 
 const VideoPageHeader = () => {
   const { campaignId, videoId } = useParams();
@@ -90,7 +102,7 @@ const VideoPageHeader = () => {
               T{video.tester.id} | {video.tester.name}
             </Span>
           </PageHeader.Description>
-          <PageHeader.Meta>
+          <StyledPageHeaderMeta>
             {severities && severities.length > 0 && (
               <>
                 <SeveritiesMetaText>
@@ -122,7 +134,11 @@ const VideoPageHeader = () => {
                 </SeveritiesMetaContainer>
               </>
             )}
-          </PageHeader.Meta>
+            <StyledUseCaseName>
+              {capitalizeFirstLetter(video.usecase.name)} -{' '}
+              {capitalizeFirstLetter(video.tester.device.type)}
+            </StyledUseCaseName>
+          </StyledPageHeaderMeta>
         </PageHeader.Main>
       </PageHeader>
     </LayoutWrapper>
diff --git a/src/pages/Video/components/Observation.tsx b/src/pages/Video/components/Observation.tsx
@@ -13,7 +13,7 @@ import {
   GetVideosByVidObservationsApiResponse,
 } from 'src/features/api';
 import { ReactComponent as TagIcon } from 'src/assets/icons/tag-icon.svg';
-import { ReactComponent as ShareIcon } from 'src/assets/icons/share-stroke.svg';
+import { ReactComponent as LinkIcon } from 'src/assets/icons/link-stroke.svg';
 import { useTranslation } from 'react-i18next';
 import { useParams } from 'react-router-dom';
 import { useCallback, useEffect, useState } from 'react';
@@ -209,7 +209,7 @@ const Observation = ({
                       copyLink(`observation-${observation.id}`, event)
                     }
                   >
-                    <ShareIcon />
+                    <LinkIcon />
                   </IconButton>
                 </Tooltip>
               </Container>
diff --git a/src/pages/Video/components/ObservationForm.tsx b/src/pages/Video/components/ObservationForm.tsx
@@ -150,14 +150,19 @@ const ObservationForm = ({
 
   function generateQuotes() {
     if (!paragraphs) return undefined;
-    return paragraphs
+    const wordsWithinRange = paragraphs
       .flatMap((paragraph) =>
         paragraph.words.filter(
-          (w) => w.start >= observation.start && w.end <= observation.end
+          (word) =>
+            Number(word.start.toFixed(8)) >=
+              Number(observation.start.toFixed(8)) &&
+            Number(word.end.toFixed(8)) <= Number(observation.end.toFixed(8))
         )
       )
-      .map((w) => w.word)
+      .map((word) => word.word)
       .join(' ');
+
+    return wordsWithinRange;
   }
 
   const formInitialValues = {
diff --git a/src/pages/Video/components/ObservationTooltip.tsx b/src/pages/Video/components/ObservationTooltip.tsx
@@ -59,8 +59,8 @@ export const ObservationTooltip = ({
       size="large"
       color={color}
       onClick={() => {
-        seekPlayer?.(start);
         setOpenAccordion({ id: observationId });
+        seekPlayer?.(start);
       }}
       isSelecting={isSelecting}
     >
diff --git a/src/pages/Video/components/Player.tsx b/src/pages/Video/components/Player.tsx
@@ -29,9 +29,9 @@ const PlayerContainer = styled.div<{
   width: 100%;
   height: 55vh;
   display: flex;
-  position: sticky;
+  position: relative;
   top: 0;
-  z-index: 101;
+  z-index: 3;
 
   ${({ isFetching }) =>
     isFetching &&
@@ -52,7 +52,7 @@ const CorePlayer = ({ video }: { video: GetVideosByVidApiResponse }) => {
   const [postVideoByVidObservations] = usePostVideosByVidObservationsMutation();
   const [patchObservation] = usePatchVideosByVidObservationsAndOidMutation();
   const [start, setStart] = useState<number | undefined>(undefined);
-  const { context, setIsPlaying } = usePlayerContext();
+  const { context } = usePlayerContext();
   const { currentTime } = context.player || { currentTime: 0 };
   const { addToast } = useToast();
 
@@ -127,8 +127,6 @@ const CorePlayer = ({ video }: { video: GetVideosByVidApiResponse }) => {
     (time: number) => {
       if (videoRef && videoRef.current) {
         videoRef.current.currentTime = time;
-        setIsPlaying(true);
-        videoRef.current.play();
       }
     },
     [videoRef]
@@ -159,8 +157,8 @@ const CorePlayer = ({ video }: { video: GetVideosByVidApiResponse }) => {
           />
         ),
         onClick: () => {
-          seekPlayer(obs.start);
           setOpenAccordion({ id: obs.id });
+          seekPlayer(obs.start);
         },
         tags: obs.tags,
       })),
@@ -188,6 +186,7 @@ const CorePlayer = ({ video }: { video: GetVideosByVidApiResponse }) => {
       <PlayerContainer isFetching={isFetchingObservations}>
         <PlayerProvider.Core
           ref={videoRef}
+          pipMode="auto"
           url={video.streamUrl ?? video.url}
           onCutHandler={handleCut}
           handleBookmarkUpdate={handleBookmarksUpdate}
diff --git a/src/pages/Video/components/TitleDropdown.tsx b/src/pages/Video/components/TitleDropdown.tsx
@@ -137,7 +137,7 @@ export const TitleDropdown = ({
           )}
         </Autocomplete>
       </Field>
-      <Menu style={{ maxHeight: '205px' }}>
+      <Menu style={{ maxHeight: '200px', maxWidth: '290px' }}>
         {matchingOptions && matchingOptions.length ? (
           matchingOptions.map((item) => (
             <Item key={item.id} value={item}>
@@ -164,7 +164,7 @@ export const TitleDropdown = ({
                 name: inputValue,
               }}
             >
-              <MediaFigure>
+              <MediaFigure style={{ flexShrink: 0 }}>
                 <AddIcon />
               </MediaFigure>
               <MediaBody>
diff --git a/src/pages/Video/components/Transcript.tsx b/src/pages/Video/components/Transcript.tsx
@@ -111,6 +111,7 @@ const Transcript = ({
     const body = {
       start: part.from,
       end: part.to,
+      text: part.text,
     };
     await postVideoByVidObservations({
       vid: videoId || '',
diff --git a/src/pages/Videos/Content.tsx b/src/pages/Videos/Content.tsx
@@ -72,17 +72,19 @@ const VideosPageContent = () => {
             <Row>
               <Col>
                 <Wrapper isFetching={isFetching}>
-                  <Accordion level={3} isExpandable isBare>
+                  <Accordion
+                    level={3}
+                    isExpandable
+                    isBare
+                    defaultExpandedSections={[]}
+                  >
                     {usecases.map((uc) => (
                       <Accordion.Section
                         style={{ marginBottom: appTheme.space.lg }}
                       >
                         <StyledAccordionHeader>
                           <StyledAccordionLabel>
-                            <InfoRow
-                              usecase={uc.usecase.title}
-                              videos={uc.videos.total}
-                            />
+                            <InfoRow uc={uc} />
                           </StyledAccordionLabel>
                         </StyledAccordionHeader>
                         <Accordion.Panel style={{ padding: 0 }}>
diff --git a/src/pages/Videos/PageHeader.tsx b/src/pages/Videos/PageHeader.tsx
@@ -2,8 +2,6 @@ import { Anchor, PageHeader } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { Link, useParams } from 'react-router-dom';
 import { LayoutWrapper } from 'src/common/components/LayoutWrapper';
-
-import { PageTitle } from 'src/common/components/PageTitle';
 import { useLocalizeRoute } from 'src/hooks/useLocalizedRoute';
 import { useCampaign } from 'src/pages/Campaign/pageHeader/useCampaign';
 import { Metas } from './Metas';
@@ -32,9 +30,7 @@ const VideosPageHeader = () => {
           </Link>
         </PageHeader.Breadcrumbs>
         <PageHeader.Main mainTitle={t('__VIDEOS_PAGE_TITLE')}>
-          <PageHeader.Title>
-            <PageTitle>{t('__VIDEOS_PAGE_TITLE')}</PageTitle>
-          </PageHeader.Title>
+          <PageHeader.Title>{t('__VIDEOS_PAGE_TITLE')}</PageHeader.Title>
           <PageHeader.Meta>
             <Metas campaign={campaign} />
           </PageHeader.Meta>
diff --git a/src/pages/Videos/parts/InfoRow.tsx b/src/pages/Videos/parts/InfoRow.tsx
@@ -2,40 +2,29 @@ import { MD, SM, Span } from '@appquality/unguess-design-system';
 import { useTranslation } from 'react-i18next';
 import { appTheme } from 'src/app/theme';
 import styled from 'styled-components';
+import { CampaignVideos } from '../useVideos';
 
 export const StyledSM = styled(SM)`
   color: ${(p) => p.theme.palette.grey[600]};
 `;
 
 const StyledDiv = styled.div`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
   padding: ${(p) => p.theme.space.xs} 0;
-  column-gap: ${(p) => p.theme.space.xs};
-  ${StyledSM} {
-    flex-shrink: 0;
-  }
 `;
 
-export const InfoRow = ({
-  videos,
-  usecase,
-}: {
-  videos: number;
-  usecase: string;
-}) => {
+export const InfoRow = ({ uc }: { uc: CampaignVideos[number] }) => {
   const { t } = useTranslation();
+  const { usecase, videos } = uc;
+
   return (
     <StyledDiv>
       <MD>
-        <Span isBold>{usecase} </Span>
-        <Span style={{ color: appTheme.palette.grey[600] }}>{`(${videos} ${t(
-          '__VIDEOS_LIST_USECASE_INFO',
-          {
-            count: videos,
-          }
-        )})`}</Span>
+        <Span isBold>{usecase.title} </Span>
+        <Span style={{ color: appTheme.palette.grey[600] }}>
+          {`(${videos.total} ${t('__VIDEOS_LIST_USECASE_INFO', {
+            count: videos.total,
+          })})`}
+        </Span>
       </MD>
     </StyledDiv>
   );
diff --git a/src/pages/Videos/parts/VideoContainer.tsx b/src/pages/Videos/parts/VideoContainer.tsx
@@ -21,11 +21,11 @@ const StyledSM = styled(SM)`
 const StyledCard = styled(ContainerCard)`
   padding: 0;
   border-radius: ${({ theme }) => theme.borderRadii.lg};
-  border-color: ${({ theme }) => theme.palette.grey[300]};
+  border-color: ${({ theme }) => theme.palette.grey[200]};
 `;
 
 const StyledTitle = styled(Title)`
-  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 1px solid ${({ theme }) => theme.palette.grey[200]};
 `;
 
 export const VideoContainer = ({
diff --git a/src/pages/Videos/parts/VideoItem.tsx b/src/pages/Videos/parts/VideoItem.tsx
@@ -14,7 +14,7 @@ const Container = styled.div`
   padding: ${({ theme }) => `${theme.space.xs} ${theme.space.sm}`};
   display: flex;
   gap: ${({ theme }) => theme.space.md};
-  border-bottom: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-bottom: 2px solid ${({ theme }) => theme.palette.grey[200]};
 
   &:hover {
     box-shadow: ${({ theme }) => theme.shadows.boxShadow(theme)};
@@ -29,11 +29,13 @@ const ThumbnailContainer = styled.div`
   height: 70px;
   width: 110px;
   overflow: hidden;
+  border: 2px solid ${({ theme }) => theme.palette.grey[300]};
+  border-radius: ${({ theme }) => theme.borderRadii.md};
 
   > img,
   svg {
-    width: 100%;
-    height: auto;
+    height: 100%;
+    width: auto;
   }
 `;
 
@@ -97,7 +99,7 @@ const Video = ({
             isBold
             style={{ marginTop: appTheme.space.xxs }}
           >
-            T{video.tester.id}
+            Tester ID: T{video.tester.id}
           </SM>
           <ObservationsTotalContainer>
             <TagsContainer>
diff --git a/src/pages/Videos/useVideos.ts b/src/pages/Videos/useVideos.ts
@@ -16,8 +16,8 @@ enum DeviceTypeEnum {
 type OrderedVideo = Record<DeviceTypeEnum, Video[]>;
 type VideosWithTotal = OrderedVideo & { total: number };
 
-type CampaignVideos = Array<{
-  usecase: GetCampaignsByCidVideosApiResponse['items'][0]['usecase'];
+export type CampaignVideos = Array<{
+  usecase: GetCampaignsByCidVideosApiResponse['items'][number]['usecase'];
   videos: VideosWithTotal;
 }>;
 
diff --git a/yarn.lock b/yarn.lock
@@ -54,10 +54,10 @@
   dependencies:
     hls.js "^1.4.8"
 
-"@appquality/unguess-design-system@3.1.102":
-  version "3.1.102"
-  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-3.1.102.tgz#f0184dc8a17cbf026eb88c7f1edd185428c6533f"
-  integrity sha512-FTN9T6imrj4t4r0Wp39ieq/HVK4KmEKhpBS+en4XPbzNAuWzLJW8SOBYv61GsIDFvUAOi+J6aLGUGnXEWHQLTA==
+"@appquality/unguess-design-system@3.1.104":
+  version "3.1.104"
+  resolved "https://registry.yarnpkg.com/@appquality/unguess-design-system/-/unguess-design-system-3.1.104.tgz#922f7cce38c1073da82c80c12f48808d746a1e24"
+  integrity sha512-BgY+AeYk4N/No6xQtalkA88NZpTjNKaTRLdoJDNlqH67krPaZPC0Ov2R2LxvIPR26plnTppGp9yYUTL5XUHpvg==
   dependencies:
     "@appquality/stream-player" "^1.0.6"
     "@nivo/bar" "^0.80.0"
