Feature/arc 3904 video player

ui/package.json

@@ -76,7 +76,7 @@
     "@emotion/react": "11.14.0",
     "@floating-ui/react": "0.27.18",
     "@hookform/resolvers": "2.9.11",
-    "@meemoo/react-components": "6.0.15",
+    "@meemoo/react-components": "6.0.16",
     "@studiohyperdrive/pagination": "1.0.0",
     "@tanstack/react-query": "5.99.0",
     "@viaa/avo2-components": "7.0.10",

ui/src/react-admin/modules/content-page/components/IeObjectFlowPlayerWrapper/IeObjectFlowPlayerWrapper.tsx

@@ -1,14 +1,17 @@
 import { FlowPlayer, type FlowPlayerProps } from '@meemoo/react-components';
 import type { HetArchiefPlayableDisplayIeObject } from '@viaa/avo2-types';
-import React, { type FunctionComponent, type ReactNode } from 'react';
+import React, {type FunctionComponent, type ReactNode, useState} from 'react';
 import { AdminConfigManager } from '~core/config';
+import { getRandomTertiaryBackgroundColor } from '~modules/content-page/helpers/get-random-tertiary-background-color.ts';
 import { Color } from '~modules/content-page/types/content-block.types.ts';
 import type { DefaultComponentProps } from '~modules/shared/types/components';
+import { Locale } from '~modules/translations/translations.core.types.ts';
 import {
 	isAudioFormat,
 	isAudioVideoFormat,
 	isVideoFormat,
 } from '~shared/helpers/is-audio-video-format.ts';
+import { useIsMobileWidth } from '~shared/helpers/media-query.ts';
 
 export interface IeObjectFlowPlayerWrapperProps extends DefaultComponentProps {
 	ieObject: HetArchiefPlayableDisplayIeObject;
@@ -19,6 +22,8 @@ export interface IeObjectFlowPlayerWrapperProps extends DefaultComponentProps {
 	onEnded?: () => void;
 	isMuted?: boolean;
 	onMutedChange?: (muted: boolean) => void;
+	backgroundColor?: string;
+	hideTimestampsOnMobile?: boolean;
 }
 
 export const IeObjectFlowPlayerWrapper: FunctionComponent<IeObjectFlowPlayerWrapperProps> = ({
@@ -29,8 +34,13 @@ export const IeObjectFlowPlayerWrapper: FunctionComponent<IeObjectFlowPlayerWrap
 	onEnded,
 	isMuted,
 	onMutedChange,
+	backgroundColor,
+	hideTimestampsOnMobile,
 	className,
 }): ReactNode => {
+	const [fallbackBackgroundColor] = useState(getRandomTertiaryBackgroundColor());
+	const isMobile = useIsMobileWidth();
+
 	if (!isAudioVideoFormat(ieObject.dctermsFormat)) {
 		return null;
 	}
@@ -54,6 +64,8 @@ export const IeObjectFlowPlayerWrapper: FunctionComponent<IeObjectFlowPlayerWrap
 	// The active slide is the only one big enough to warrant the full-size newspaper image, so
 	// it's the only slide that prefers it over the (lower-res) thumbnail.
 	const imageSrc = ieObject.thumbnailUrl || '';
+	const isAudio = isAudioFormat(ieObject.dctermsFormat);
+	const locale = AdminConfigManager.getConfig().locale || Locale.Nl;
 
 	const shared: Partial<FlowPlayerProps> = {
 		poster: poster ?? imageSrc,
@@ -68,14 +80,28 @@ export const IeObjectFlowPlayerWrapper: FunctionComponent<IeObjectFlowPlayerWrap
 		token: AdminConfigManager.getConfig().flowplayer.FLOW_PLAYER_TOKEN,
 		dataPlayerId: AdminConfigManager.getConfig().flowplayer.FLOW_PLAYER_ID,
 		ui: isVideoFormat(ieObject.dctermsFormat) ? undefined : 1, // 1 = NO_FULLSCREEN
-		plugins: ['subtitles', 'audio'],
+		plugins: ['subtitles', 'audio', 'keyboard'],
 		peakColorBackground: Color.Gray800,
 		peakColorInactive: Color.Zinc,
 		peakColorActive: Color.SeaGreen,
 		peakHeightFactor: 0.6,
 		preload: 'metadata',
 		className,
-		// Not passing start and end times, since they are already in the snippet video url: browse.mp4?t=x,y&token=token-containing-x-y
+		controlsVariant: 'custom',
+		customControlsConfig: {
+			showFullscreen: !isAudio,
+			showTitleOverlay: true,
+			showTimestamps: hideTimestampsOnMobile ? !isMobile : true,
+			peakMode: 'generic',
+			peakColorActive: Color.Teal40,
+			peakColorInactive: Color.White,
+			peakColorBackground: backgroundColor || fallbackBackgroundColor,
+			locale,
+			colors: {
+				progressColor: '#00CCA9',
+				accentColor: '#009991',
+			},
+		},
 	};
 
 	if (isAudioFormat(ieObject.dctermsFormat)) {

ui/src/react-admin/modules/content-page/components/ImageOrAudioWaveForm/ImageOrAudioWaveForm.tsx

@@ -1,11 +1,12 @@
+import {
+	AudioWaveFormDisplay,
+	type AudioWaveFormDisplayProps,
+	AudioWaveFormDisplaySize,
+} from '@meemoo/react-components';
 import { Image } from '@viaa/avo2-components';
 import type { FunctionComponent, ReactElement } from 'react';
 import React from 'react';
 import { AdminConfigManager } from '~core/config';
-import {
-	AudioWaveFormDisplay,
-	type AudioWaveFormDisplayProps,
-} from './AudioWaveFormDisplay/AudioWaveFormDisplay.tsx';
 
 export interface ImageOrAudioWaveFormProps extends Omit<AudioWaveFormDisplayProps, 'ariaLabel'> {
 	imageSrc?: string;
@@ -18,7 +19,7 @@ export const ImageOrAudioWaveForm: FunctionComponent<ImageOrAudioWaveFormProps>
 	imageAlt,
 	waveColor,
 	backgroundColor,
-	size = 'small',
+	size = AudioWaveFormDisplaySize.Small,
 }): ReactElement => {
 	if (!imageSrc) {
 		return <></>;

ui/src/react-admin/modules/content-page/components/blocks/BlockHeroCarousel/BlockHeroCarouselActiveSlide.tsx

@@ -107,6 +107,8 @@ export const BlockHeroCarouselActiveSlide: FunctionComponent<BlockHeroCarouselAc
 				onMutedChange={onMutedChange}
 				onEnded={onEnded}
 				poster={imageSrc}
+				backgroundColor={item?.backgroundColor}
+				hideTimestampsOnMobile={true}
 			/>
 		);
 	}

ui/src/react-admin/modules/content-page/components/blocks/BlockObjectsGrid/BlockObjectsGrid.tsx

@@ -1,4 +1,4 @@
-import { Button } from '@meemoo/react-components';
+import { AudioWaveFormDisplaySize, Button } from '@meemoo/react-components';
 import { Spinner } from '@viaa/avo2-components';
 import { AvoCoreContentPickerType } from '@viaa/avo2-types';
 import clsx from 'clsx';
@@ -232,7 +232,7 @@ export const BlockObjectsGrid: FunctionComponent<BlockObjectsGridProps> = ({
 								imageSrc={item.thumbnailUrl}
 								imageAlt={item.name}
 								backgroundColor={tileBackgroundColor}
-								size={isFixed ? 'large' : 'small'}
+								size={isFixed ? AudioWaveFormDisplaySize.Large : AudioWaveFormDisplaySize.Small}
 								className="c-block-objects-grid__tile-image"
 							/>
 						) : (