Update: Let the timeline component get acces to preview's viewer (#58)

Author: priyajeet

src/components/ContentPreview/ContentPreview.js

@@ -357,6 +357,26 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
         this.api.getFileAPI().file(id, this.fetchFileSuccessCallback, this.errorCallback, forceFetch, hasSidebar);
     }
 
+    /**
+     * Returns the viewer instance being used by preview.
+     * This will let child components access the viewers.
+     *
+     * @private
+     * @return {Preview} current instance of preview
+     */
+    getPreviewer = (): any => {
+        const { file }: State = this.state;
+        if (!this.preview || !file) {
+            return null;
+        }
+        const viewer = this.preview.getCurrentViewer();
+        const previewingFile = this.preview.getCurrentFile();
+        if (!previewingFile || !viewer || previewingFile.id !== file.id) {
+            return null;
+        }
+        return viewer;
+    };
+
     /**
      * Renders the file preview
      *
@@ -382,7 +402,12 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
                     <Measure bounds onResize={this.onResize}>
                         {({ measureRef }) => <div ref={measureRef} className='bcpr-content' />}
                     </Measure>
-                    {isSidebarVisible && <Sidebar file={file} getLocalizedMessage={getLocalizedMessage} />}
+                    {isSidebarVisible &&
+                        <Sidebar
+                            file={file}
+                            getPreviewer={this.getPreviewer}
+                            getLocalizedMessage={getLocalizedMessage}
+                        />}
                 </div>
             </div>
         );

src/components/ContentPreview/DetailsSidebar.js

@@ -14,11 +14,12 @@ import './DetailsSidebar.scss';
 
 type Props = {
     file: BoxItem,
+    getPreviewer: Function,
     getLocalizedMessage: Function
 };
 
 /* eslint-disable jsx-a11y/label-has-for */
-const DetailsSidebar = ({ file, getLocalizedMessage }: Props) =>
+const DetailsSidebar = ({ file, getPreviewer, getLocalizedMessage }: Props) =>
     <SidebarContent title={getLocalizedMessage('buik.preview.sidebar.details.title')}>
         <div className='bcpr-sidebar-details-description'>
             <label>
@@ -35,7 +36,7 @@ const DetailsSidebar = ({ file, getLocalizedMessage }: Props) =>
         <SidebarSection title={getLocalizedMessage('buik.preview.sidebar.details.properties')}>
             <FileProperties file={file} getLocalizedMessage={getLocalizedMessage} />
         </SidebarSection>
-        <SidebarSkills metadata={file.metadata} getLocalizedMessage={getLocalizedMessage} />
+        <SidebarSkills metadata={file.metadata} getPreviewer={getPreviewer} getLocalizedMessage={getLocalizedMessage} />
     </SidebarContent>;
 
 export default DetailsSidebar;

src/components/ContentPreview/Sidebar.js

@@ -11,12 +11,13 @@ import './Sidebar.scss';
 
 type Props = {
     file?: BoxItem,
+    getPreviewer: Function,
     getLocalizedMessage: Function
 };
 
-const Sidebar = ({ file, getLocalizedMessage }: Props) =>
+const Sidebar = ({ file, getPreviewer, getLocalizedMessage }: Props) =>
     <div className='bcpr-sidebar'>
-        {!!file && <DetailsSidebar file={file} getLocalizedMessage={getLocalizedMessage} />}
+        {!!file && <DetailsSidebar file={file} getPreviewer={getPreviewer} getLocalizedMessage={getLocalizedMessage} />}
     </div>;
 
 export default Sidebar;

src/components/ContentPreview/SidebarSkills.js

@@ -13,24 +13,25 @@ import type { SkillData, MetadataType } from '../../flowTypes';
 
 type Props = {
     metadata?: MetadataType,
+    getPreviewer: Function,
     getLocalizedMessage: Function
 };
 
-function getCard(skill: SkillData) {
+function getCard(skill: SkillData, getPreviewer: Function) {
     const { skills_data_type } = skill;
     switch (skills_data_type) {
         case 'keyword':
             return <Keywords skill={skill} />;
         case 'timeline':
-            return <Timelines skill={skill} />;
+            return <Timelines skill={skill} getPreviewer={getPreviewer} />;
         case 'transcript':
             return <Transcript skill={skill} />;
         default:
             return null;
     }
 }
 
-const SidebarSkills = ({ metadata, getLocalizedMessage }: Props) => {
+const SidebarSkills = ({ metadata, getPreviewer, getLocalizedMessage }: Props) => {
     if (!metadata || !metadata.global) {
         return null;
     }
@@ -79,7 +80,7 @@ const SidebarSkills = ({ metadata, getLocalizedMessage }: Props) => {
                             skill.title || getLocalizedMessage(`buik.preview.sidebar.details.${skill.skills_data_type}`)
                         }
                     >
-                        {getCard(skill)}
+                        {getCard(skill, getPreviewer)}
                     </SidebarSection>
                 /* eslint-enable react/no-array-index-key */
             )}

src/components/Keywords/Keywords.js

@@ -41,7 +41,7 @@ class FileKeywords extends PureComponent<void, Props, State> {
                     Array.isArray(keyword.appears) &&
                     keyword.appears.length > 0 &&
                     <div className='buik-timelines'>
-                        <Timeline type={keyword.entry_type} timeslices={keyword.appears} duration={duration} />
+                        <Timeline type={keyword.type} timeslices={keyword.appears} duration={duration} />
                     </div>}
             </div>
         );

src/components/Timeline/Line.js

@@ -14,13 +14,14 @@ type Props = {
     start: number,
     duration: number,
     color?: string,
-    end?: number
+    end?: number,
+    getPreviewer?: Function
 };
 
 const LENGTH_IMAGE_ITEMLINE = 250;
 const LENGTH_TEXT_ITEMLINE = 290;
 
-const Line = ({ type, start, end = 0, duration, color = '#777' }: Props) => {
+const Line = ({ type, start, end = 0, duration, color = '#777', getPreviewer }: Props) => {
     if (typeof start !== 'number' || !duration) {
         return null;
     }
@@ -32,7 +33,13 @@ const Line = ({ type, start, end = 0, duration, color = '#777' }: Props) => {
         left: `${startPercent}px`,
         width: `${endPercent - startPercent}px`
     };
-    return <PlainButton className='buik-timeline-time' style={styles} />;
+    const onClick = () => {
+        const viewer = getPreviewer ? getPreviewer() : null;
+        if (viewer && viewer.isLoaded() && !viewer.isDestroyed() && typeof viewer.play === 'function') {
+            viewer.play(start, end);
+        }
+    };
+    return <PlainButton className='buik-timeline-time' style={styles} onClick={onClick} />;
 };
 
 export default Line;

src/components/Timeline/Timeline.js

@@ -15,10 +15,11 @@ type Props = {
     text?: string,
     url?: string,
     timeslices?: TimeSlice[],
-    duration?: number
+    duration?: number,
+    getPreviewer?: Function
 };
 
-const Timeline = ({ type = 'text', color, text = '', url = '', duration = 0, timeslices = [] }: Props) =>
+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'>
@@ -33,7 +34,15 @@ const Timeline = ({ type = 'text', color, text = '', url = '', duration = 0, tim
             {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} />
+                    <Line
+                        key={index}
+                        color={color}
+                        type={type}
+                        start={start}
+                        end={end}
+                        duration={duration}
+                        getPreviewer={getPreviewer}
+                    />
                 /* eslint-enable react/no-array-index-key */
             )}
         </div>

src/components/Timeline/Timelines.js

@@ -10,24 +10,26 @@ import Timeline from './Timeline';
 import type { SkillData, SkillDataEntry } from '../../flowTypes';
 
 type Props = {
-    skill: SkillData
+    skill: SkillData,
+    getPreviewer?: Function
 };
 
-const Timelines = ({ skill: { entries, duration } }: Props) => {
+const Timelines = ({ skill: { entries, duration }, getPreviewer }: Props) => {
     const colors = randomcolor({ count: entries.length, luminosity: 'dark' });
     return (
         <div className='buik-timelines'>
             {entries.map(
-                ({ entry_type, text, url, appears }: SkillDataEntry, index) =>
+                ({ type, text, url, appears }: SkillDataEntry, index) =>
                     /* eslint-disable react/no-array-index-key */
                     <Timeline
                         key={index}
-                        type={entry_type}
+                        type={type}
                         text={text}
                         url={url}
                         color={colors[index]}
                         timeslices={appears}
                         duration={duration}
+                        getPreviewer={getPreviewer}
                     />
                 /* eslint-enable react/no-array-index-key */
             )}

src/flowTypes.js

@@ -261,7 +261,7 @@ export type TimeSlice = {
 };
 
 export type SkillDataEntry = {
-    entry_type?: SkillDataEntryType,
+    type?: SkillDataEntryType,
     text?: string,
     url?: string,
     appears?: TimeSlice[]

test/preview.html

@@ -22,7 +22,7 @@
             window.onload = function() {
                 const { ContentExplorer } = Box;
                 const explorer = new ContentExplorer();
-                explorer.show('0', 'O3DR5QPI7noCabreEvm539UtdEfhugBq', {
+                explorer.show('0', '5088KsQuysua9izy8KQahDVR1yyO63p7', {
                     hasPreviewSidebar: true
                 });
             }