Skip to content

Commit 84d12f6

Browse files
authored
Update: Let the timeline component get acces to preview's viewer (#58)
1 parent 04c8301 commit 84d12f6

10 files changed

Lines changed: 68 additions & 22 deletions

File tree

src/components/ContentPreview/ContentPreview.js

Lines changed: 26 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -357,6 +357,26 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
357357
this.api.getFileAPI().file(id, this.fetchFileSuccessCallback, this.errorCallback, forceFetch, hasSidebar);
358358
}
359359

360+
/**
361+
* Returns the viewer instance being used by preview.
362+
* This will let child components access the viewers.
363+
*
364+
* @private
365+
* @return {Preview} current instance of preview
366+
*/
367+
getPreviewer = (): any => {
368+
const { file }: State = this.state;
369+
if (!this.preview || !file) {
370+
return null;
371+
}
372+
const viewer = this.preview.getCurrentViewer();
373+
const previewingFile = this.preview.getCurrentFile();
374+
if (!previewingFile || !viewer || previewingFile.id !== file.id) {
375+
return null;
376+
}
377+
return viewer;
378+
};
379+
360380
/**
361381
* Renders the file preview
362382
*
@@ -382,7 +402,12 @@ class ContentPreview extends PureComponent<DefaultProps, Props, State> {
382402
<Measure bounds onResize={this.onResize}>
383403
{({ measureRef }) => <div ref={measureRef} className='bcpr-content' />}
384404
</Measure>
385-
{isSidebarVisible && <Sidebar file={file} getLocalizedMessage={getLocalizedMessage} />}
405+
{isSidebarVisible &&
406+
<Sidebar
407+
file={file}
408+
getPreviewer={this.getPreviewer}
409+
getLocalizedMessage={getLocalizedMessage}
410+
/>}
386411
</div>
387412
</div>
388413
);

src/components/ContentPreview/DetailsSidebar.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,11 +14,12 @@ import './DetailsSidebar.scss';
1414

1515
type Props = {
1616
file: BoxItem,
17+
getPreviewer: Function,
1718
getLocalizedMessage: Function
1819
};
1920

2021
/* eslint-disable jsx-a11y/label-has-for */
21-
const DetailsSidebar = ({ file, getLocalizedMessage }: Props) =>
22+
const DetailsSidebar = ({ file, getPreviewer, getLocalizedMessage }: Props) =>
2223
<SidebarContent title={getLocalizedMessage('buik.preview.sidebar.details.title')}>
2324
<div className='bcpr-sidebar-details-description'>
2425
<label>
@@ -35,7 +36,7 @@ const DetailsSidebar = ({ file, getLocalizedMessage }: Props) =>
3536
<SidebarSection title={getLocalizedMessage('buik.preview.sidebar.details.properties')}>
3637
<FileProperties file={file} getLocalizedMessage={getLocalizedMessage} />
3738
</SidebarSection>
38-
<SidebarSkills metadata={file.metadata} getLocalizedMessage={getLocalizedMessage} />
39+
<SidebarSkills metadata={file.metadata} getPreviewer={getPreviewer} getLocalizedMessage={getLocalizedMessage} />
3940
</SidebarContent>;
4041

4142
export default DetailsSidebar;

src/components/ContentPreview/Sidebar.js

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,13 @@ import './Sidebar.scss';
1111

1212
type Props = {
1313
file?: BoxItem,
14+
getPreviewer: Function,
1415
getLocalizedMessage: Function
1516
};
1617

17-
const Sidebar = ({ file, getLocalizedMessage }: Props) =>
18+
const Sidebar = ({ file, getPreviewer, getLocalizedMessage }: Props) =>
1819
<div className='bcpr-sidebar'>
19-
{!!file && <DetailsSidebar file={file} getLocalizedMessage={getLocalizedMessage} />}
20+
{!!file && <DetailsSidebar file={file} getPreviewer={getPreviewer} getLocalizedMessage={getLocalizedMessage} />}
2021
</div>;
2122

2223
export default Sidebar;

src/components/ContentPreview/SidebarSkills.js

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -13,24 +13,25 @@ import type { SkillData, MetadataType } from '../../flowTypes';
1313

1414
type Props = {
1515
metadata?: MetadataType,
16+
getPreviewer: Function,
1617
getLocalizedMessage: Function
1718
};
1819

19-
function getCard(skill: SkillData) {
20+
function getCard(skill: SkillData, getPreviewer: Function) {
2021
const { skills_data_type } = skill;
2122
switch (skills_data_type) {
2223
case 'keyword':
2324
return <Keywords skill={skill} />;
2425
case 'timeline':
25-
return <Timelines skill={skill} />;
26+
return <Timelines skill={skill} getPreviewer={getPreviewer} />;
2627
case 'transcript':
2728
return <Transcript skill={skill} />;
2829
default:
2930
return null;
3031
}
3132
}
3233

33-
const SidebarSkills = ({ metadata, getLocalizedMessage }: Props) => {
34+
const SidebarSkills = ({ metadata, getPreviewer, getLocalizedMessage }: Props) => {
3435
if (!metadata || !metadata.global) {
3536
return null;
3637
}
@@ -79,7 +80,7 @@ const SidebarSkills = ({ metadata, getLocalizedMessage }: Props) => {
7980
skill.title || getLocalizedMessage(`buik.preview.sidebar.details.${skill.skills_data_type}`)
8081
}
8182
>
82-
{getCard(skill)}
83+
{getCard(skill, getPreviewer)}
8384
</SidebarSection>
8485
/* eslint-enable react/no-array-index-key */
8586
)}

src/components/Keywords/Keywords.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ class FileKeywords extends PureComponent<void, Props, State> {
4141
Array.isArray(keyword.appears) &&
4242
keyword.appears.length > 0 &&
4343
<div className='buik-timelines'>
44-
<Timeline type={keyword.entry_type} timeslices={keyword.appears} duration={duration} />
44+
<Timeline type={keyword.type} timeslices={keyword.appears} duration={duration} />
4545
</div>}
4646
</div>
4747
);

src/components/Timeline/Line.js

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,14 @@ type Props = {
1414
start: number,
1515
duration: number,
1616
color?: string,
17-
end?: number
17+
end?: number,
18+
getPreviewer?: Function
1819
};
1920

2021
const LENGTH_IMAGE_ITEMLINE = 250;
2122
const LENGTH_TEXT_ITEMLINE = 290;
2223

23-
const Line = ({ type, start, end = 0, duration, color = '#777' }: Props) => {
24+
const Line = ({ type, start, end = 0, duration, color = '#777', getPreviewer }: Props) => {
2425
if (typeof start !== 'number' || !duration) {
2526
return null;
2627
}
@@ -32,7 +33,13 @@ const Line = ({ type, start, end = 0, duration, color = '#777' }: Props) => {
3233
left: `${startPercent}px`,
3334
width: `${endPercent - startPercent}px`
3435
};
35-
return <PlainButton className='buik-timeline-time' style={styles} />;
36+
const onClick = () => {
37+
const viewer = getPreviewer ? getPreviewer() : null;
38+
if (viewer && viewer.isLoaded() && !viewer.isDestroyed() && typeof viewer.play === 'function') {
39+
viewer.play(start, end);
40+
}
41+
};
42+
return <PlainButton className='buik-timeline-time' style={styles} onClick={onClick} />;
3643
};
3744

3845
export default Line;

src/components/Timeline/Timeline.js

Lines changed: 12 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@ type Props = {
1515
text?: string,
1616
url?: string,
1717
timeslices?: TimeSlice[],
18-
duration?: number
18+
duration?: number,
19+
getPreviewer?: Function
1920
};
2021

21-
const Timeline = ({ type = 'text', color, text = '', url = '', duration = 0, timeslices = [] }: Props) =>
22+
const Timeline = ({ type = 'text', color, text = '', url = '', duration = 0, timeslices = [], getPreviewer }: Props) =>
2223
<div className={`buik-timeline buik-timeline-${type}`}>
2324
{(text || url) &&
2425
<div className='buik-timeline-label'>
@@ -33,7 +34,15 @@ const Timeline = ({ type = 'text', color, text = '', url = '', duration = 0, tim
3334
{timeslices.map(
3435
({ start, end }: TimeSlice, index) =>
3536
/* eslint-disable react/no-array-index-key */
36-
<Line key={index} color={color} type={type} start={start} end={end} duration={duration} />
37+
<Line
38+
key={index}
39+
color={color}
40+
type={type}
41+
start={start}
42+
end={end}
43+
duration={duration}
44+
getPreviewer={getPreviewer}
45+
/>
3746
/* eslint-enable react/no-array-index-key */
3847
)}
3948
</div>

src/components/Timeline/Timelines.js

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,24 +10,26 @@ import Timeline from './Timeline';
1010
import type { SkillData, SkillDataEntry } from '../../flowTypes';
1111

1212
type Props = {
13-
skill: SkillData
13+
skill: SkillData,
14+
getPreviewer?: Function
1415
};
1516

16-
const Timelines = ({ skill: { entries, duration } }: Props) => {
17+
const Timelines = ({ skill: { entries, duration }, getPreviewer }: Props) => {
1718
const colors = randomcolor({ count: entries.length, luminosity: 'dark' });
1819
return (
1920
<div className='buik-timelines'>
2021
{entries.map(
21-
({ entry_type, text, url, appears }: SkillDataEntry, index) =>
22+
({ type, text, url, appears }: SkillDataEntry, index) =>
2223
/* eslint-disable react/no-array-index-key */
2324
<Timeline
2425
key={index}
25-
type={entry_type}
26+
type={type}
2627
text={text}
2728
url={url}
2829
color={colors[index]}
2930
timeslices={appears}
3031
duration={duration}
32+
getPreviewer={getPreviewer}
3133
/>
3234
/* eslint-enable react/no-array-index-key */
3335
)}

src/flowTypes.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -261,7 +261,7 @@ export type TimeSlice = {
261261
};
262262

263263
export type SkillDataEntry = {
264-
entry_type?: SkillDataEntryType,
264+
type?: SkillDataEntryType,
265265
text?: string,
266266
url?: string,
267267
appears?: TimeSlice[]

test/preview.html

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
window.onload = function() {
2323
const { ContentExplorer } = Box;
2424
const explorer = new ContentExplorer();
25-
explorer.show('0', 'O3DR5QPI7noCabreEvm539UtdEfhugBq', {
25+
explorer.show('0', '5088KsQuysua9izy8KQahDVR1yyO63p7', {
2626
hasPreviewSidebar: true
2727
});
2828
}

0 commit comments

Comments
 (0)