New: Add functionality to navigate timeline on image click (#75)

Author: manishPh

src/components/Timeline/Timeline.js

@@ -5,6 +5,7 @@
  */
 
 import React from 'react';
+import { PlainButton } from '../Button';
 import Line from './Line';
 import type { TimeSlice, SkillDataEntryType } from '../../flowTypes';
 import './Timeline.scss';
@@ -19,33 +20,61 @@ type Props = {
     getPreviewer?: Function
 };
 
-const Timeline = ({ type = 'text', color, text = '', url = '', duration = 0, timeslices = [], getPreviewer }: Props) =>
-    <div className={`buik-timeline buik-timeline-${type}`}>
-        {(text || url) &&
-            <div className='buik-timeline-label'>
-                {type === 'image'
-                    ? <img alt={text} title={text} src={url} />
-                    : <span>
-                        {text}
-                    </span>}
-            </div>}
-        <div className='buik-timeline-wrapper'>
-            <div className='buik-timeline-line' />
-            {timeslices.map(
-                ({ start, end }: TimeSlice, index) =>
-                    /* eslint-disable react/no-array-index-key */
-                    <Line
-                        key={index}
-                        color={color}
-                        type={type}
-                        start={start}
-                        end={end}
-                        duration={duration}
-                        getPreviewer={getPreviewer}
-                    />
-                /* eslint-enable react/no-array-index-key */
-            )}
+const Timeline = ({
+    type = 'text',
+    color,
+    text = '',
+    url = '',
+    duration = 0,
+    timeslices = [],
+    getPreviewer
+}: Props) => {
+    let nextTimeSliceIndex = 0;
+    const startNextSegment = () => {
+        const viewer = getPreviewer ? getPreviewer() : null;
+        if (
+            viewer &&
+            viewer.isLoaded() &&
+            !viewer.isDestroyed() &&
+            typeof viewer.play === 'function' &&
+            timeslices[nextTimeSliceIndex]
+        ) {
+            viewer.play(timeslices[nextTimeSliceIndex].start);
+            nextTimeSliceIndex = (nextTimeSliceIndex + 1) % timeslices.length;
+        }
+    };
+
+    return (
+        <div className={`buik-timeline buik-timeline-${type}`}>
+            {(text || url) &&
+                <div className='buik-timeline-label'>
+                    {type === 'image'
+                        ? <PlainButton onClick={startNextSegment}>
+                            <img alt={text} title={text} src={url} />
+                        </PlainButton>
+                        : <span>
+                            {text}
+                        </span>}
+                </div>}
+            <div className='buik-timeline-wrapper'>
+                <div className='buik-timeline-line' />
+                {timeslices.map(
+                    ({ start, end }: TimeSlice, index) =>
+                        /* eslint-disable react/no-array-index-key */
+                        <Line
+                            key={index}
+                            color={color}
+                            type={type}
+                            start={start}
+                            end={end}
+                            duration={duration}
+                            getPreviewer={getPreviewer}
+                        />
+                    /* eslint-enable react/no-array-index-key */
+                )}
+            </div>
         </div>
-    </div>;
+    );
+};
 
 export default Timeline;