ARC-3815 Timeline component - #386
Open
bertyhell wants to merge 9 commits into
Open
Conversation
https://meemoo.atlassian.net/browse/ARC-3815 Adjusts spacing, padding, and text colors within the `BlockTimeline` component for improved visual appearance and readability. Repositions image captions for better structural hierarchy. Introduces `AudioOrVideoPlayerProps` and registers a placeholder player in `AdminConfig` to facilitate media integration within the timeline for Het Archief. Updates button configurations in the local test app to align with Het Archief button styles.
…g and generic player Optimizes performance by fetching all timeline IE objects in a single batched request. Integrates the generic `AudioOrVideoPlayer` component for media playback, replacing the `FlowPlayerWrapper`. Includes minor styling updates for the year display and UI improvements for the editor's content picker. https://meemoo.atlassian.net/browse/ARC-3815
Separates the media display and metadata/CTA logic for timeline objects into dedicated components (`BlockTimelineObject` and `BlockTimelineObjectMeta`). This improves modularity and maintainability of the `BlockTimeline`. Updates styling for responsive year column widths and refines the object metadata layout for a clearer visual presentation. https://meemoo.atlassian.net/browse/ARC-3815
…edia styling Refines the responsive design of timeline nodes, particularly for items with images and objects. Addresses object title truncation issues on smaller screens and introduces distinct mobile spacing and CTA. Repositions object metadata within the content area to facilitate the new responsive layout. https://meemoo.atlassian.net/browse/ARC-3815
reunefe
requested changes
Aug 14, 2026
| <Spacer margin="top-large" style={{ color: contentColor }}> | ||
| {isString(textBelowButtons) && <Html content={textBelowButtons} type="p"></Html>} | ||
| {isString(textBelowButtons) && <Html content={textBelowButtons} type="p" />} | ||
| {!isString(textBelowButtons) && textBelowButtons} |
Contributor
There was a problem hiding this comment.
Suggested change
| {!isString(textBelowButtons) && textBelowButtons} | |
| {isString(textBelowButtons) ? <Html content={textBelowButtons} type="p" /> : textBelowButtons} |
Comment on lines
+16
to
+25
| export enum IeObjectType { | ||
| VIDEO = 'video', | ||
| VIDEO_FRAGMENT = 'videofragment', | ||
| AUDIO = 'audio', | ||
| AUDIO_FRAGMENT = 'audiofragment', | ||
| FILM = 'film', | ||
| NEWSPAPER = 'newspaper', | ||
| NEWSPAPER_PAGE = 'newspaperpage', // Should never be used, but does seem to pop up some times | ||
| IMAGE = 'image', // Should never be used, but does seem to pop up some times | ||
| } |
Contributor
There was a problem hiding this comment.
Hebben we dit niet ook al ergens in een andere PR en trekken we het hier niet beter gelijk daarmee?
| allowFullScreen?: boolean; | ||
| paused: boolean; | ||
| onPlay: () => void; | ||
| onPause: () => void; |
Contributor
There was a problem hiding this comment.
Ik denk dat we hier ook nog best een onEnd gaan toevoegen 😅
Comment on lines
+202
to
+230
| imageCaptionCopyright: TEXT_FIELD({ | ||
| label: tText( | ||
| 'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___bijschrift-copyright', | ||
| {}, | ||
| [HET_ARCHIEF] | ||
| ), | ||
| validator: undefined, | ||
| isVisible: visualTypeIsImage, | ||
| }), | ||
| imageCaptionCopyrightIconVisible: { | ||
| editorType: ContentBlockEditor.Checkbox, | ||
| editorProps: { | ||
| label: tText( | ||
| 'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___copyright-icoon-toevoegen', | ||
| {}, | ||
| [HET_ARCHIEF] | ||
| ), | ||
| } as CheckboxProps, | ||
| isVisible: visualTypeIsImage, | ||
| }, | ||
| imageCaptionDescription: TEXT_FIELD({ | ||
| label: tText( | ||
| 'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___bijschrift-beschrijving', | ||
| {}, | ||
| [HET_ARCHIEF] | ||
| ), | ||
| validator: undefined, | ||
| isVisible: visualTypeIsImage, | ||
| }), |
Contributor
There was a problem hiding this comment.
Gebruik hier liever COPYRIGHT_FIELDS van de defaults voor. Dat is consistenter
Comment on lines
+136
to
+152
| {(node.imageCaptionCopyright || node.imageCaptionDescription) && ( | ||
| <div className="c-block-timeline__node-image-caption"> | ||
| {node.imageCaptionCopyright && ( | ||
| <p className="c-block-timeline__node-image-copyright"> | ||
| {node.imageCaptionCopyrightIconVisible !== false && ( | ||
| <span aria-hidden="true">© </span> | ||
| )} | ||
| {node.imageCaptionCopyright} | ||
| </p> | ||
| )} | ||
| {node.imageCaptionDescription && ( | ||
| <p className="c-block-timeline__node-image-description"> | ||
| {node.imageCaptionDescription} | ||
| </p> | ||
| )} | ||
| </div> | ||
| )} |
Contributor
There was a problem hiding this comment.
Dan kan je hier gewoon CopyrightAttribution gebruiken die alle rendering hiervoor doet. Dan is het consistent op elke plek
Comment on lines
+62
to
+69
| const formatDate = (date: string): string => | ||
| isValidDate(date) | ||
| ? new Intl.DateTimeFormat(locale, { | ||
| day: 'numeric', | ||
| month: 'long', | ||
| year: 'numeric', | ||
| }).format(new Date(date)) | ||
| : ''; |
Contributor
There was a problem hiding this comment.
Comment on lines
+86
to
+89
| const ieObject = | ||
| node.visualType === 'OBJECT' && node.mediaItem?.value | ||
| ? ieObjectsByPid?.[String(node.mediaItem.value)] | ||
| : undefined; |
Contributor
There was a problem hiding this comment.
Verhuis je dat niet beter onder hasObject en dan kan je hasObject gebruiken voor de check zelf?
Contributor
There was a problem hiding this comment.
Deze gaan we misschien beter naar de shared verhuizen voor hergebruik zoals ook in de hero carousel?
Comment on lines
+24
to
+28
| {tText( | ||
| 'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___bekijk-volledig-fragment', | ||
| {}, | ||
| [HET_ARCHIEF] | ||
| )} |
Contributor
There was a problem hiding this comment.
Gaan we deze label niet beter afhankelijk maken van het object type? Zodat het niet "Fragment" noemt voor kranten? Lijkt me namelijk een vreemde beschrijving
Comment on lines
+31
to
+46
| <SmartLink | ||
| action={{ | ||
| type: AvoCoreContentPickerType.INTERNAL_LINK, | ||
| value: `/pid/${ieObject.schemaIdentifier}`, | ||
| }} | ||
| ariaLabel={tText( | ||
| 'react-admin/modules/content-page/components/blocks/block-timeline/block-timeline___bekijk-volledig-fragment', | ||
| {}, | ||
| [HET_ARCHIEF] | ||
| )} | ||
| className="c-block-timeline__node-object-cta--mobile" | ||
| > | ||
| <Button variants={['block', 'black', 'sm']}> | ||
| <Icon name={'arrow-down-right' as IconName} /> | ||
| </Button> | ||
| </SmartLink> |
Contributor
There was a problem hiding this comment.
2x dezelfde component met dezelfde settings etc?
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://meemoo.atlassian.net/browse/ARC-3815
Still todo:
te bespreken waar we de logica zetten om kranten in high quality thumbnail op te halen
zodat we dit maar 1 keer bouwen