Merge pull request #64 from prabhuignoto/media-fix

Fixing an issue where the media overflows out of the container
prabhuignoto · Oct 29, 2020 · 15a9954 · 15a9954
2 parents 7565761 + 28a87f2
commit 15a9954
Show file tree

Hide file tree

Showing 13 changed files with 205 additions and 85 deletions.
diff --git a/cypress/integration/react-chrono/horizontal_spec.js b/cypress/integration/react-chrono/horizontal_spec.js
@@ -0,0 +1,105 @@
+/// <reference types="cypress" />
+
+context('Chrono.Vertical.Basic', () => {
+  beforeEach(() => {
+    cy.visit('http://localhost:8080/horizontal');
+  });
+
+  // it('check length', () => {
+  //   cy.get('.timeline-horz-item-container').should("have.length", 13);
+  // })
+
+  // it('check card contents', () => {
+  //   cy.get(".timeline-card-content").children().should("have.length", 4)
+  // });
+
+  // it("check timeline controls", () => {
+  //   cy.get(".timeline-controls").children().should("have.length", 5)
+  // });
+
+  // it('check read more', () => {
+  //   cy.get('.timeline-card-content').within(() => {
+  //     cy.get('.card-description').should('have.class', 'show-less');
+  //     cy.get('.show-more').click();
+  //     cy.wait(400);
+  //     cy.get('.card-description').should('not.have.class', 'show-less');
+  //   });
+  // });
+
+  // it('interact with timeline point', () => {
+  //   const pick = 12;
+  //   cy.get('.timeline-main-wrapper').scrollTo('right');
+  //   cy.wait(1500);
+
+  //   cy.get('.timeline-horz-item-container')
+  //     .eq(pick)
+  //     .find('.timeline-circle')
+  //     .click();
+  //   cy.wait(400);
+
+  //   cy.get('.timeline-card-content').within(() => {
+  //     cy.get('.card-title').should('contain', 'Nagasaki');
+  //     cy.get('.card-sub-title').should(
+  //       'contain',
+  //       'Atomic bomb mushroom cloud over the Japanese city of Nagasaki',
+  //     );
+  //   });
+
+  //   cy.get('.timeline-main-wrapper').scrollTo('left');
+  //   cy.wait(1500);
+  //   cy.get('.timeline-horz-item-container')
+  //     .eq(0)
+  //     .find('.timeline-circle')
+  //     .click();
+  //   cy.wait(400);
+  //   cy.get('.timeline-card-content').within(() => {
+  //     cy.get('.card-title').should('contain', 'Dunkirk');
+  //   });
+  // });
+
+  it('check navigation controls', () => {
+    cy.get('.timeline-controls').within(() => {
+      cy.get('li').eq(3).click();
+      cy.wait(1500);
+      cy.get('li')
+        .eq(3)
+        .find('button')
+        .should('have.css', 'pointer-events', 'none');
+
+      cy.get('li').eq(0).click();
+      cy.wait(1500);
+      cy.get('li')
+        .eq(0)
+        .find('button')
+        .should('have.css', 'pointer-events', 'none');
+
+      cy.get('li')
+        .eq(2)
+        .within((ele) => {
+          cy.get(ele).click();
+          cy.get(ele).click();
+        });
+    });
+    cy.wait(1500);
+
+    cy.get('.timeline-card-content').within(() => {
+      cy.get('.card-title').should('contain', 'Operation Barbarossa');
+      cy.get('.card-sub-title').should(
+        'contain',
+        'A column of Red Army prisoners taken during the first days of the German invasion',
+      );
+    });
+
+    cy.get('.timeline-controls').within(() => {
+      cy.get('li').eq(1).click();
+    });
+    cy.wait(1000);
+    cy.get('.timeline-card-content').within(() => {
+      cy.get('.card-title').should('contain', 'The Battle of Britain');
+      cy.get('.card-sub-title').should(
+        'contain',
+        'RAF Spitfire pilots scramble for their planes',
+      );
+    });
+  });
+});
diff --git a/cypress/integration/react-chrono/vertical_alternating_spec.js b/cypress/integration/react-chrono/vertical_alternating_spec.js
@@ -22,7 +22,7 @@ context('Chrono.Vertical.Alternating.Mixed', () => {
       .eq(3)
       .find('.timeline-card-content')
       .children()
-      .should('have.length', 3);
+      .should('have.length', 4);
   });
 
   it('check card title', () => {

diff --git a/package.json b/package.json
@@ -58,8 +58,8 @@
     "@testing-library/user-event": "^12.1.10",
     "@types/jest": "^26.0.15",
     "@types/nanoid": "^2.1.0",
-    "@types/node": "^14.14.5",
-    "@types/react": "^16.9.54",
+    "@types/node": "^14.14.6",
+    "@types/react": "^16.9.55",
     "@types/react-dom": "^16.9.9",
     "@types/react-router-dom": "^5.1.6",
     "@types/snowpack-env": "^2.3.0",

diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts b/src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts
@@ -16,17 +16,10 @@ export const TimelineItemContentWrapper = styled.div<{
   justify-content: flex-start;
   line-height: 1.5rem;
   margin: ${(p) => (p.mode !== 'VERTICAL_ALTERNATING' ? '1rem 0' : '')};
-  min-height: ${(p) => (!p.noMedia ? p.minHeight : '150')}px;
   position: relative;
   text-align: left;
   width: 100%;
 
-  height: ${(p) => {
-    if (!p.noMedia && p.mode === 'HORIZONTAL') {
-      return 0;
-    }
-  }};
-
   ${(p) =>
     p.noMedia
       ? `

diff --git a/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx b/src/components/timeline-elements/timeline-card-content/timeline-card-content.tsx
@@ -197,6 +197,7 @@ const TimelineItemContent: React.FunctionComponent<TimelineContentModel> = ({
           theme={theme}
           slideshowActive={slideShowActive}
           hideMedia={showMore}
+          cardHeight={cardHeight}
         />
       )}
 

diff --git a/src/components/timeline-elements/timeline-card-media/timeline-card-media.styles.ts b/src/components/timeline-elements/timeline-card-media/timeline-card-media.styles.ts
@@ -8,8 +8,9 @@ export const MediaWrapper = styled.div<{
   mode?: TimelineMode;
   dir?: string;
   slideShowActive?: boolean;
+  cardHeight?: number;
 }>`
-  height: 100%;
+  height: 0;
   flex-direction: row;
   align-items: center;
   width: 100%;
@@ -20,6 +21,7 @@ export const MediaWrapper = styled.div<{
   border-radius: 4px;
   pointer-events: ${(p) => (!p.active && p.slideShowActive ? 'none' : '')};
   text-align: center;
+  ${(p) => (p.cardHeight ? `min-height: ${p.cardHeight}px;` : '')}
 
   ${(p) => {
     if (p.mode === 'HORIZONTAL') {
@@ -52,11 +54,11 @@ export const CardImage = styled.img<{
   visibility: ${(p) => (p.visible ? 'visible' : 'hidden')};
   margin-right: auto;
   object-fit: contain;
-  max-height: 70%;
+  max-height: 100%;
   margin-left: auto;
 `;
 
-export const CardVideo = styled.video`
+export const CardVideo = styled.video<{ height?: number }>`
   max-width: 100%;
   max-height: 100%;
   margin-left: auto;

diff --git a/src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx b/src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx
@@ -24,6 +24,7 @@ const CardMedia: React.FunctionComponent<CardMediaModel> = ({
   media,
   slideshowActive,
   hideMedia = false,
+  cardHeight,
 }: CardMediaModel) => {
   const videoRef = useRef<HTMLVideoElement>(null);
   const [loadFailed, setLoadFailed] = useState(false);
@@ -64,66 +65,69 @@ const CardMedia: React.FunctionComponent<CardMediaModel> = ({
   ErrorMessageMem.displayName = 'Error Message';
 
   return (
-    <MediaWrapper
-      theme={theme}
-      active={active}
-      mode={mode}
-      slideShowActive={slideshowActive}
-      className="card-media-wrapper"
-    >
-      {media.type === 'VIDEO' &&
-        (!loadFailed ? (
-          <CardVideo
-            controls
-            autoPlay={active}
-            ref={videoRef}
-            onLoadedData={handleMediaLoaded}
-            onPlay={() =>
-              onMediaStateChange({
-                id,
-                paused: false,
-                playing: true,
-              })
-            }
-            onPause={() =>
-              onMediaStateChange({
-                id,
-                paused: true,
-                playing: false,
-              })
-            }
-            onEnded={() =>
-              onMediaStateChange({
-                id,
-                paused: false,
-                playing: false,
-              })
-            }
-            onError={handleError}
-          >
-            <source src={media.source.url}></source>
-          </CardVideo>
-        ) : (
-          <ErrorMessageMem message="Failed to load the video" />
-        ))}
-      {media.type === 'IMAGE' &&
-        (!loadFailed ? (
-          <CardImage
-            src={media.source.url}
-            mode={mode}
-            onLoad={handleMediaLoaded}
-            onError={handleError}
-            visible={mediaLoaded}
-            active={active}
-          />
-        ) : (
-          <ErrorMessageMem message="Failed to load the image." />
-        ))}
+    <>
+      <MediaWrapper
+        theme={theme}
+        active={active}
+        mode={mode}
+        slideShowActive={slideshowActive}
+        className="card-media-wrapper"
+        cardHeight={cardHeight}
+      >
+        {media.type === 'VIDEO' &&
+          (!loadFailed ? (
+            <CardVideo
+              controls
+              autoPlay={active}
+              ref={videoRef}
+              onLoadedData={handleMediaLoaded}
+              onPlay={() =>
+                onMediaStateChange({
+                  id,
+                  paused: false,
+                  playing: true,
+                })
+              }
+              onPause={() =>
+                onMediaStateChange({
+                  id,
+                  paused: true,
+                  playing: false,
+                })
+              }
+              onEnded={() =>
+                onMediaStateChange({
+                  id,
+                  paused: false,
+                  playing: false,
+                })
+              }
+              onError={handleError}
+            >
+              <source src={media.source.url}></source>
+            </CardVideo>
+          ) : (
+            <ErrorMessageMem message="Failed to load the video" />
+          ))}
+        {media.type === 'IMAGE' &&
+          (!loadFailed ? (
+            <CardImage
+              src={media.source.url}
+              mode={mode}
+              onLoad={handleMediaLoaded}
+              onError={handleError}
+              visible={mediaLoaded}
+              active={active}
+            />
+          ) : (
+            <ErrorMessageMem message="Failed to load the image." />
+          ))}
+      </MediaWrapper>
       <MediaDetailsWrapper mode={mode}>
         <MemoTitle title={title} theme={theme} active={active} />
         <MemoContentText content={content} />
       </MediaDetailsWrapper>
-    </MediaWrapper>
+    </>
   );
 };
 

diff --git a/src/components/timeline-elements/timeline-card/timeline-card.tsx b/src/components/timeline-elements/timeline-card/timeline-card.tsx
@@ -81,7 +81,10 @@ const TimelineItem: React.FunctionComponent<TimelineCardModel> = ({
     }
 
     return (
-      <TimelineContentContainer className={className} ref={contentRef}>
+      <TimelineContentContainer
+        className={`${className} timeline-horz-card-wrapper`}
+        ref={contentRef}
+      >
         {mode === 'VERTICAL' && (
           <TimelineTitleContainer
             data-testid="timeline-title"
@@ -127,7 +130,9 @@ const TimelineItem: React.FunctionComponent<TimelineCardModel> = ({
 
       <TimelinePointWrapper>
         <TimelinePoint
-          className={`${mode.toLowerCase()} ${active ? 'active' : 'in-active'}`}
+          className={`timeline-circle ${mode.toLowerCase()} ${
+            active ? 'active' : 'in-active'
+          }`}
           onClick={handleClick}
           ref={circleRef}
           data-testid="timeline-circle"

diff --git a/src/components/timeline-horizontal/timeline-horizontal.tsx b/src/components/timeline-horizontal/timeline-horizontal.tsx
@@ -21,14 +21,16 @@ const TimelineCollection: React.FunctionComponent<TimelineCollectionModel> = ({
 }: TimelineCollectionModel) => {
   return (
     <TimelineCollectionWrapper
-      className={mode.toLowerCase()}
+      className={`${mode.toLowerCase()} timeline-horz-container`}
       data-testid="timeline-collection"
     >
       {items.map((item) => (
         <TimelineItemWrapper
           key={item.id}
           width={itemWidth}
-          className={`${mode.toLowerCase()} ${item.visible ? 'visible' : ''}`}
+          className={`${
+            item.visible ? 'visible' : ''
+          } timeline-horz-item-container`}
         >
           <TimelineItem
             {...item}

diff --git a/src/components/timeline/timeline.style.ts b/src/components/timeline/timeline.style.ts
@@ -36,7 +36,6 @@ export const TimelineMainWrapper = styled.div<{
   align-items: flex-start;
   display: flex;
   justify-content: center;
-  overflow-x: hidden;
   overflow-y: ${(p) => (p.scrollable ? 'auto' : 'hidden')};
   overscroll-behavior: contain;
   padding: ${(p) => (p.scrollable ? '1rem 2rem 1rem 0' : '1rem 0')};
@@ -48,6 +47,7 @@ export const TimelineMainWrapper = styled.div<{
 
   &::-webkit-scrollbar {
     width: 0.5em;
+    height: 0;
   }
 
   &::-webkit-scrollbar-track {