From f6bc505597463cc8f593e00d74b421175a69f7f3 Mon Sep 17 00:00:00 2001 From: Jules Laplace Date: Tue, 28 Jul 2020 00:20:51 +0200 Subject: some fullscreen elements fading in... --- .../player/components.inline/elementTypes.image.js | 46 ---------------------- .../player/components.inline/elementTypes.text.js | 37 ----------------- .../player/components.inline/elementTypes.video.js | 21 ---------- .../views/viewer/player/components.inline/index.js | 6 +-- .../player/components.inline/inline.image.js | 46 ++++++++++++++++++++++ .../viewer/player/components.inline/inline.text.js | 37 +++++++++++++++++ .../player/components.inline/inline.video.js | 21 ++++++++++ 7 files changed, 107 insertions(+), 107 deletions(-) delete mode 100644 animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js delete mode 100644 animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js delete mode 100644 animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js create mode 100644 animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js create mode 100644 animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js create mode 100644 animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js (limited to 'animism-align/frontend/app/views/viewer/player/components.inline') diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js deleted file mode 100644 index f005fc0..0000000 --- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.image.js +++ /dev/null @@ -1,46 +0,0 @@ -import React, { Component } from 'react' - -export const MediaCitation = ({ media }) => { - if (media.citation) { - return ( - - ) - } - return ( - - {media.author} - {', '} - {media.pre_title} - {media.title} - {media.post_title} - {'. '} - {media.date && ( - ' ' + media.date + '.' - )} - {media.medium && ( - ' ' + media.medium + '.' - )} - {media.source && ( - ' ' + media.source.trim() - )} - - ) -} - -export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - if (!media.lookup) return
- const className = currentParagraph ? 'media image current' : 'media image' - const annotation = paragraph.annotations[0] - const item = media.lookup[annotation.settings.media_id] - if (!item) return
Media not found: {annotation.settings.media_id}
- return ( -
onDoubleClick(e, paragraph)} - > - {"["} - - {"]"} -
- ) -} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js deleted file mode 100644 index 8825479..0000000 --- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.text.js +++ /dev/null @@ -1,37 +0,0 @@ -import React, { Component } from 'react' - -import { ROMAN_NUMERALS } from 'app/constants' - -export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - let className = paragraph.type - if (className !== 'paragraph') className += ' paragraph' - if (currentParagraph) className += ' current' - return ( -
onDoubleClick(e, paragraph)} - > - {paragraph.annotations.map(annotation => ( - onAnnotationClick(e, paragraph, annotation)} - dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} - /> - ))} -
- ) -} - -export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - let className = currentParagraph ? 'header current' : 'header' - const text = paragraph.annotations.map(annotation => annotation.text).join(' ') - return ( -
onDoubleClick(e, paragraph)} - > - {ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text} -
- ) -} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js deleted file mode 100644 index fe821eb..0000000 --- a/animism-align/frontend/app/views/viewer/player/components.inline/elementTypes.video.js +++ /dev/null @@ -1,21 +0,0 @@ -import React, { Component } from 'react' - -import { MediaCitation } from './elementTypes.image' - -export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { - if (!media.lookup) return
- const className = currentParagraph ? 'media current' : 'media' - const annotation = paragraph.annotations[0] - const item = media.lookup[annotation.settings.media_id] - if (!item) return
Media not found: {annotation.settings.media_id}
- return ( -
onDoubleClick(e, paragraph)} - > - {"["} - - {"]"} -
- ) -} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/index.js b/animism-align/frontend/app/views/viewer/player/components.inline/index.js index ee65641..89d1d42 100644 --- a/animism-align/frontend/app/views/viewer/player/components.inline/index.js +++ b/animism-align/frontend/app/views/viewer/player/components.inline/index.js @@ -2,15 +2,15 @@ import React from 'react' import { Paragraph, ParagraphHeading -} from './elementTypes.text' +} from './inline.text' import { MediaVideo -} from './elementTypes.video' +} from './inline.video' import { MediaImage -} from './elementTypes.image' +} from './inline.image' export const transcriptElementLookup = { paragraph: React.memo(Paragraph), diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js new file mode 100644 index 0000000..f005fc0 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.image.js @@ -0,0 +1,46 @@ +import React, { Component } from 'react' + +export const MediaCitation = ({ media }) => { + if (media.citation) { + return ( + + ) + } + return ( + + {media.author} + {', '} + {media.pre_title} + {media.title} + {media.post_title} + {'. '} + {media.date && ( + ' ' + media.date + '.' + )} + {media.medium && ( + ' ' + media.medium + '.' + )} + {media.source && ( + ' ' + media.source.trim() + )} + + ) +} + +export const MediaImage = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + if (!media.lookup) return
+ const className = currentParagraph ? 'media image current' : 'media image' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + if (!item) return
Media not found: {annotation.settings.media_id}
+ return ( +
onDoubleClick(e, paragraph)} + > + {"["} + + {"]"} +
+ ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js new file mode 100644 index 0000000..8825479 --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.text.js @@ -0,0 +1,37 @@ +import React, { Component } from 'react' + +import { ROMAN_NUMERALS } from 'app/constants' + +export const Paragraph = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + let className = paragraph.type + if (className !== 'paragraph') className += ' paragraph' + if (currentParagraph) className += ' current' + return ( +
onDoubleClick(e, paragraph)} + > + {paragraph.annotations.map(annotation => ( + onAnnotationClick(e, paragraph, annotation)} + dangerouslySetInnerHTML={{ __html: ' ' + annotation.text + ' ' }} + /> + ))} +
+ ) +} + +export const ParagraphHeading = ({ paragraph, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + let className = currentParagraph ? 'header current' : 'header' + const text = paragraph.annotations.map(annotation => annotation.text).join(' ') + return ( +
onDoubleClick(e, paragraph)} + > + {ROMAN_NUMERALS[paragraph.sectionIndex]}{'. '}{text} +
+ ) +} diff --git a/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js new file mode 100644 index 0000000..fe821eb --- /dev/null +++ b/animism-align/frontend/app/views/viewer/player/components.inline/inline.video.js @@ -0,0 +1,21 @@ +import React, { Component } from 'react' + +import { MediaCitation } from './elementTypes.image' + +export const MediaVideo = ({ paragraph, media, currentParagraph, currentAnnotation, onAnnotationClick, onDoubleClick }) => { + if (!media.lookup) return
+ const className = currentParagraph ? 'media current' : 'media' + const annotation = paragraph.annotations[0] + const item = media.lookup[annotation.settings.media_id] + if (!item) return
Media not found: {annotation.settings.media_id}
+ return ( +
onDoubleClick(e, paragraph)} + > + {"["} + + {"]"} +
+ ) +} -- cgit v1.2.3-70-g09d2