diff options
| author | Jules Laplace <julescarbon@gmail.com> | 2020-07-24 22:26:07 +0200 |
|---|---|---|
| committer | Jules Laplace <julescarbon@gmail.com> | 2020-07-24 22:26:07 +0200 |
| commit | f2d612de04da968a74efe94d0b448b465869d6e0 (patch) | |
| tree | 4594409298eb1a0453a5714f539ee0ee8696efad /animism-align/frontend/app/views/viewer/checklist/checklist.content.js | |
| parent | 0f4d8d0d9601f6f2794c28e67ef8b0d4aad9fc86 (diff) | |
navigate to media
Diffstat (limited to 'animism-align/frontend/app/views/viewer/checklist/checklist.content.js')
| -rw-r--r-- | animism-align/frontend/app/views/viewer/checklist/checklist.content.js | 31 |
1 files changed, 20 insertions, 11 deletions
diff --git a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js index 3eadaca..842947f 100644 --- a/animism-align/frontend/app/views/viewer/checklist/checklist.content.js +++ b/animism-align/frontend/app/views/viewer/checklist/checklist.content.js @@ -8,6 +8,11 @@ import { thumbnailURL } from 'app/views/align/align.util' import { PlayIcon } from '../nav/viewer.icons' class ChecklistContent extends Component { + handleMediaSelection(mediaItem) { + actions.audio.seek(mediaItem.start_ts) + actions.viewer.hideSection('nav') + actions.viewer.hideSection('checklist') + } render() { const { sections, currentSection } = this.props return ( @@ -19,8 +24,12 @@ class ChecklistContent extends Component { } return ( <div className="checklist-section" key={section.index}> - {section.media.map((media, i) => ( - <div className="checklist-row" key={section.index + "_" + i}> + {section.media.map((mediaItem, i) => ( + <div + className="checklist-row" + key={section.index + "_" + i} + onClick={() => this.handleMediaSelection(mediaItem)} + > <div className="media-id"> {pad(section.mediaIndex + i + 1, 2)} </div> @@ -30,22 +39,22 @@ class ChecklistContent extends Component { {section.title} </div> <div className="media-about"> - {media.author} + {mediaItem.media.author} <br /> - {media.pre_title && (media.pre_title + ' ')} - <i>{media.title}</i> - {media.post_title && (' ' + media.post_title)} + {mediaItem.media.pre_title && (mediaItem.media.pre_title + ' ')} + <i>{mediaItem.media.title}</i> + {mediaItem.media.post_title && (' ' + mediaItem.media.post_title)} <br /> - {media.year} + {mediaItem.media.year} <div className='media-type'> - {media.medium} - {media.settings.duration && (', ' + media.settings.duration)} + {mediaItem.media.medium} + {mediaItem.media.settings.duration && (', ' + mediaItem.media.settings.duration)} </div> </div> <div className="media-image"> <div className="media-thumbnail"> - <img src={thumbnailURL(media)} alt={media.title} /> - {media.type === 'video' && + <img src={thumbnailURL(mediaItem.media)} alt={mediaItem.media.title} /> + {mediaItem.type === 'video' && <span className='play-button'> {PlayIcon} </span> |