feat(FEC-13318): UI updates in cuepoints on timeline (#16)

### Description of the Changes UI updates for cue-points on timeline, per new design. Solves [FEC-13318](https://kaltura.atlassian.net/browse/FEC-13318)
kaltura · Aug 23, 2023 · ad254fd · ad254fd
1 parent a445a81
commit ad254fd
Show file tree

Hide file tree

Showing 7 changed files with 180 additions and 120 deletions.
diff --git a/cypress/e2e/timeline.cy.ts b/cypress/e2e/timeline.cy.ts
@@ -224,27 +224,6 @@ describe('Timeline plugin', () => {
       });
     });
 
-    it('Should render the arrow button in the marker preview if navigation plugin is visible', () => {
-      mockKalturaBe();
-      loadPlayer().then(player => {
-        const timelineService = player.getService('timeline');
-        cy.stub(timelineService, '_isNavigationPluginVisible', () => {
-          return true;
-        });
-        timelineService.addKalturaCuePoint(10, 'Hotspot', '1');
-        cy.get('[data-testid="previewArrowButton"]').should('exist');
-      });
-    });
-
-    it('Should not render arrow button in marker preview if navigation service is unavailable', () => {
-      mockKalturaBe();
-      loadPlayer().then(player => {
-        const timelineService = player.getService('timeline');
-        timelineService.addKalturaCuePoint(10, 'Hotspot', '1');
-        cy.get('[data-testid="previewArrowButton"]').should('not.exist');
-      });
-    });
-
     it('Should display the marker preview if focusing on the marker', () => {
       mockKalturaBe();
       loadPlayer().then(player => {

diff --git a/src/components/chapters/segments-wrapper.js b/src/components/chapters/segments-wrapper.js
@@ -87,8 +87,6 @@ class SegmentsWrapper extends Component {
               isHovered={chapter.isHovered}
               isDummy={chapter.isDummy}
               getThumbnailInfo={props.getThumbnailInfo}
-              isNavigationPluginOpen={props.isNavigationPluginOpen}
-              shouldRenderArrowButton={props.shouldRenderArrowButton}
             />
           );
         })}

diff --git a/src/components/marker/timeline-marker.tsx b/src/components/marker/timeline-marker.tsx
@@ -3,7 +3,7 @@ import * as KalturaPlayer from '@playkit-js/kaltura-player-js';
 import * as styles from './timeline-marker.scss';
 import type {TimelineMarkerProps} from '../../types/timelineTypes';
 import {A11yWrapper} from '@playkit-js/common/dist/hoc/a11y-wrapper';
-import {useMemo} from 'preact/hooks';
+import {useMemo, useRef, useEffect} from 'preact/hooks';
 import {Chapter} from "../../../flow-typed/types/cue-point-option";
 
 const {
@@ -18,6 +18,8 @@ export const TimelineMarker = (({isDisabled, onMarkerClick, getSeekBarNode, useQ
   const isSeekbarSegmented = !!segment;
   useSelector((state: any) => state.seekbar); // trigger update of marker component
   const disabled = typeof isDisabled === 'boolean' ? isDisabled : isDisabled();
+  const markerRef = useRef<HTMLDivElement>(null);
+  useEffect(() => setMarkerRef(markerRef?.current), []);
   const renderMarker = useMemo(() => {
     const handleFocus = () => {
       const seekBarNode = getSeekBarNode();
@@ -43,12 +45,21 @@ export const TimelineMarker = (({isDisabled, onMarkerClick, getSeekBarNode, useQ
       return 0;
     };
 
+    const onMouseOver = () => {
+      if(markerRef?.current && !useQuizQuestionMarkerSize && isSeekbarSegmented) {
+        markerRef.current.style.width = '12px';
+        markerRef.current.style.height = '12px';
+        markerRef.current.style.transform = 'translateY(-4px)';
+      }
+    }
+
     return (
       <A11yWrapper onClick={onMarkerClick}>
         <div
-          ref={setMarkerRef}
+          ref={markerRef}
           onFocus={handleFocus}
           onBlur={handleBlur}
+          onMouseOver={onMouseOver}
           tabIndex={disabled ? -1 : 0}
           data-testid="cuePointMarkerContainer"
           className={`${useQuizQuestionMarkerSize ? styles.quizQuestionMarkerSize : styles.smallMarker} ${hoverActive ? styles.hover : ''}`}

diff --git a/src/components/marker/timeline-preview.scss b/src/components/marker/timeline-preview.scss
@@ -1,42 +1,52 @@
 @import '../../theme.scss';
 
 .container {
-  background: rgba(0, 0, 0, 0.7);
-  background-clip: content-box;
-  border: 2px solid rgba(255, 255, 255, 0.2);
-  border-radius: $roundness-1;
-  width: auto;
-  height: auto;
+  display: flex;
+  flex-direction: column;
   cursor: default;
+  position: relative;
+  padding-top: 40px;
   .header {
     display: flex;
     align-items: center;
     padding: 7px;
-    height: 100%;
     min-height: 32px;
     color: #ffffff;
     font-size: 14px;
-    &.small-player {
+    text-shadow: 0 0 2px rgba(0, 0, 0, 0.25);
+    margin-bottom: 2px;
+    position: absolute;
+    top: 5px;
+    max-width: 320px;
+    &:hover:not(.xs-player) {
+      background: rgba(0, 0, 0, 0.6);
+      cursor: pointer;
+      border-radius: $roundness-1;
+    }
+    &.xs-player {
       position: absolute;
       align-items: flex-start;
       padding: 0;
       height: auto;
       width: 100%;
+      top: 40px;
+      left: 4px;
+      .items-wrapper {
+        padding-top: 4px;
+        .title-wrapper {
+          margin-right: 4px;
+        }
+      }
+
     }
     .items-wrapper {
       display: flex;
       flex-direction: row;
-      flex-wrap: wrap;
+      flex-wrap: nowrap;
       flex-grow: 1;
-      &.small-player {
-        padding-top: 4px;
-      }
       .title-wrapper {
         display: flex;
         align-items: center;
-        &.small-player {
-          margin-right: 4px;
-        }
         i {
           width: 16px;
           height: 16px;
@@ -52,7 +62,7 @@
       }
     }
   }
-  .title-wrapper &.small-player {
+  .title-wrapper.xs-player {
     margin-right: 4px;
   }
   .markerLink {
@@ -66,8 +76,14 @@
       width: 24px;
       height: 24px;
     }
-    &.small-player {
+    &.xs-player {
       padding-right: 4px;
     }
   }
+  .image-container {
+    background: rgba(0, 0, 0, 0.7);
+    background-clip: content-box;
+    border: 2px solid rgba(255, 255, 255, 0.2);
+    border-radius: $roundness-1;
+  }
 }