Update: Hook up preview to transcript and keyword cards (#65)

Author: priyajeet

src/components/ContentExplorer/ContentExplorer.js

@@ -1240,8 +1240,8 @@ class ContentExplorer extends Component<DefaultProps, Props, State> {
         /* eslint-disable jsx-a11y/no-static-element-interactions */
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
-            <div id={this.id} className={styleClassName} ref={measureRef} onKeyDown={this.onKeyDown} tabIndex={0}>
-                <div className='buik-app-element'>
+            <div id={this.id} className={styleClassName} ref={measureRef}>
+                <div className='buik-app-element' onKeyDown={this.onKeyDown} tabIndex={0}>
                     <Header
                         view={view}
                         isSmall={isSmall}

src/components/ContentPicker/ContentPicker.js

@@ -984,8 +984,8 @@ class ContentPicker extends Component<DefaultProps, Props, State> {
         /* eslint-disable jsx-a11y/no-static-element-interactions */
         /* eslint-disable jsx-a11y/no-noninteractive-tabindex */
         return (
-            <div id={this.id} className={styleClassName} ref={measureRef} onKeyDown={this.onKeyDown} tabIndex={0}>
-                <div className='buik-app-element'>
+            <div id={this.id} className={styleClassName} ref={measureRef}>
+                <div className='buik-app-element' onKeyDown={this.onKeyDown} tabIndex={0}>
                     <Header
                         view={view}
                         isSmall={isSmall}

src/components/ContentPreview/Header.js

@@ -26,8 +26,8 @@ const Header = ({ file, showSidebar, onClose, getLocalizedMessage, showSidebarBu
     const name = file ? file.name : '';
     const close = getLocalizedMessage('buik.modal.dialog.share.button.close');
     const sidebar = showSidebar
-        ? getLocalizedMessage('buik.modal.preview.dialog.button.sidebar.show.title')
-        : getLocalizedMessage('buik.modal.preview.dialog.button.sidebar.hide.title');
+        ? getLocalizedMessage('buik.modal.preview.dialog.button.sidebar.hide.title')
+        : getLocalizedMessage('buik.modal.preview.dialog.button.sidebar.show.title');
 
     return (
         <div className='bcpr-header'>

src/components/ContentPreview/SidebarSkills.js

@@ -21,11 +21,11 @@ function getCard(skill: SkillData, getPreviewer: Function) {
     const { skills_data_type } = skill;
     switch (skills_data_type) {
         case 'keyword':
-            return <Keywords skill={skill} />;
+            return <Keywords skill={skill} getPreviewer={getPreviewer} />;
         case 'timeline':
             return <Timelines skill={skill} getPreviewer={getPreviewer} />;
         case 'transcript':
-            return <Transcript skill={skill} />;
+            return <Transcript skill={skill} getPreviewer={getPreviewer} />;
         default:
             return null;
     }

src/components/Keywords/Keywords.js

@@ -10,7 +10,8 @@ import { Timeline } from '../Timeline';
 import type { SkillData, SkillDataEntry } from '../../flowTypes';
 
 type Props = {
-    skill: SkillData
+    skill: SkillData,
+    getPreviewer?: Function
 };
 
 type State = {
@@ -26,7 +27,7 @@ class FileKeywords extends PureComponent<void, Props, State> {
     };
 
     render() {
-        const { skill }: Props = this.props;
+        const { skill, getPreviewer }: Props = this.props;
         const { entries, duration }: SkillData = skill;
         const { keyword }: State = this.state;
         return (
@@ -41,7 +42,12 @@ class FileKeywords extends PureComponent<void, Props, State> {
                     Array.isArray(keyword.appears) &&
                     keyword.appears.length > 0 &&
                     <div className='buik-timelines'>
-                        <Timeline type={keyword.type} timeslices={keyword.appears} duration={duration} />
+                        <Timeline
+                            type={keyword.type}
+                            timeslices={keyword.appears}
+                            duration={duration}
+                            getPreviewer={getPreviewer}
+                        />
                     </div>}
             </div>
         );

src/components/Transcript/Transcript.js

@@ -10,19 +10,23 @@ import AutoSizer from 'react-virtualized/dist/es/AutoSizer';
 import { CellMeasurer, CellMeasurerCache } from 'react-virtualized/dist/es/CellMeasurer';
 import 'react-virtualized/styles.css';
 import { formatTime } from '../../util/datetime';
-import type { SkillData } from '../../flowTypes';
+import type { SkillData, TimeSlice, SkillDataEntry } from '../../flowTypes';
 import './Transcript.scss';
 
 type Props = {
-    skill: SkillData
+    skill: SkillData,
+    getPreviewer?: Function
 };
 
 const cache = new CellMeasurerCache({
     minHeight: 20,
     fixedWidth: true
 });
 
-const Transcript = ({ skill: { entries } }: Props) =>
+const isValidStartTime = (cellData?: TimeSlice[]): boolean =>
+    Array.isArray(cellData) && !!cellData[0] && typeof cellData[0].start === 'number';
+
+const Transcript = ({ skill: { entries }, getPreviewer }: Props) =>
     <AutoSizer disableHeight>
         {({ width }) =>
             <Table
@@ -35,18 +39,29 @@ const Transcript = ({ skill: { entries } }: Props) =>
                 rowGetter={({ index }) => entries[index]}
                 className='buik-transcript'
                 deferredMeasurementCache={cache}
+                onRowClick={({ rowData }: { rowData: SkillDataEntry }): void => {
+                    const viewer = getPreviewer ? getPreviewer() : null;
+                    const cellData = rowData.appears;
+                    if (
+                        isValidStartTime(cellData) &&
+                        viewer &&
+                        viewer.isLoaded() &&
+                        !viewer.isDestroyed() &&
+                        typeof viewer.play === 'function'
+                    ) {
+                        // $FlowFixMe Already checked above
+                        const { start, end } = cellData[0];
+                        viewer.play(start, end);
+                    }
+                }}
             >
                 <Column
                     dataKey='appears'
                     className='buik-transcript-time-column'
                     width={45}
                     flexShrink={0}
-                    cellRenderer={({ cellData }): string => {
-                        if (Array.isArray(cellData) && !!cellData[0] && typeof cellData[0].start === 'number') {
-                            return formatTime(cellData[0].start);
-                        }
-                        return '--';
-                    }}
+                    cellRenderer={({ cellData }): string =>
+                        isValidStartTime(cellData) ? formatTime(cellData[0].start) : '--'}
                 />
                 <Column
                     dataKey='text'

src/components/Transcript/Transcript.scss

@@ -6,7 +6,14 @@
 
     // sass-lint:disable class-name-format
     .ReactVirtualized__Table__Grid {
+        cursor: pointer;
         outline: none;
+
+        .ReactVirtualized__Table__row:focus,
+        .ReactVirtualized__Table__row:active {
+            background-color: $lighter-light-blue;
+            outline: none;
+        }
     }
 }
 

test/preview.html

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