Looping video in article - initial work underway

Author: RikRootsGuardian

dotcom-rendering/src/components/LoopVideoInArticle.importable.tsx

@@ -67,7 +67,7 @@ export const LoopVideoInArticle = ({
 				<Caption
 					captionText={caption}
 					format={format}
-					mediaType="Video"
+					mediaType="SelfHostedVideo"
 					isMainMedia={isMainMedia}
 				/>
 			)}

dotcom-rendering/src/components/LoopVideoPlayer.tsx

@@ -213,11 +213,7 @@ export const LoopVideoPlayer = forwardRef(
 						<source
 							key={source.mimeType}
 							/* The start time is set to 1ms so that Safari will autoplay the video */
-							src={
-								source.src
-									? `${source.src}#t=0.001`
-									: `${source.url}#t=0.001`
-							}
+							src={source.src}
 							type={source.mimeType}
 						/>
 					))}

dotcom-rendering/src/lib/renderElement.tsx

@@ -514,7 +514,13 @@ export const renderElement = ({
 					`2 + 2 === 4` - display in the looping video player
 			*/
 
-			if (2 + 2 === 5) {
+			if (2 + 2 === 4) {
+				console.log('Loop: element.assets', element.assets);
+				const updatedSources = element.assets.map((a) => ({
+					src: a.src || a.url,
+					mimeType: a.mimeType,
+				}));
+				console.log('Loop: updatedSources', updatedSources);
 				return (
 					<>
 						{element.posterImage?.[0]?.url && (
@@ -523,7 +529,7 @@ export const renderElement = ({
 								defer={{ until: 'visible' }}
 							>
 								<LoopVideoInArticle
-									sources={element.assets}
+									sources={updatedSources}
 									atomId={element.id}
 									uniqueId={`${Math.random()}`}
 									height={400}
@@ -546,6 +552,7 @@ export const renderElement = ({
 					</>
 				);
 			} else {
+				console.log('Default: element.assets', element.assets);
 				return (
 					<VideoAtom
 						format={format}

dotcom-rendering/src/types/content.ts

@@ -411,18 +411,18 @@ export interface ListBlockElement {
 	elementId: string;
 }
 
-// interface LoopVideoInArticleElement {
-// 	_type: 'model.dotcomrendering.pageElements.MediaAtomBlockElement';
-// 	elementId: string;
-// 	id: string;
-// 	assets: VideoAssets[];
-// 	posterImage?: {
-// 		url: string;
-// 		width: number;
-// 	}[];
-// 	title?: string;
-// 	duration?: number;
-// }
+interface LoopVideoInArticleElement {
+	_type: 'model.dotcomrendering.pageElements.MediaAtomBlockElement';
+	elementId: string;
+	id: string;
+	assets: VideoAssets[];
+	posterImage?: {
+		url: string;
+		width: number;
+	}[];
+	title?: string;
+	duration?: number;
+}
 
 export interface MapBlockElement extends ThirdPartyEmbeddedContent {
 	_type: 'model.dotcomrendering.pageElements.MapBlockElement';
@@ -482,23 +482,6 @@ export interface InteractiveContentsBlockElement {
 	endDocumentElementId?: string;
 }
 
-export interface ProductBlockElement {
-	_type: 'model.dotcomrendering.pageElements.ProductBlockElement';
-	elementId: string;
-	brandName: string;
-	starRating: ProductStarRating;
-	productName: string;
-	image?: ProductImage;
-	secondaryHeadingHtml: string;
-	primaryHeadingHtml: string;
-	customAttributes: ProductCustomAttribute[];
-	content: FEElement[];
-	h2Id?: string;
-	displayType: ProductDisplayType;
-	productCtas: ProductCta[];
-	lowestPrice?: string;
-}
-
 interface ProfileAtomBlockElement {
 	_type: 'model.dotcomrendering.pageElements.ProfileAtomBlockElement';
 	elementId: string;
@@ -832,6 +815,7 @@ export type FEElement =
 	| KeyTakeawaysBlockElement
 	| LinkBlockElement
 	| ListBlockElement
+	| LoopVideoInArticleElement
 	| MapBlockElement
 	| MediaAtomBlockElement
 	| MiniProfilesBlockElement
@@ -863,8 +847,7 @@ export type FEElement =
 	| VineBlockElement
 	| YoutubeBlockElement
 	| WitnessTypeBlockElement
-	| CrosswordElement
-	| ProductBlockElement;
+	| CrosswordElement;
 
 // -------------------------------------
 // Misc
@@ -896,47 +879,11 @@ export interface ImageSource {
 	srcSet: SrcSetItem[];
 }
 
-export type ProductDisplayType =
-	| 'InlineOnly'
-	| 'ProductCardOnly'
-	| 'InlineWithProductCard';
-
-export type ProductCta = {
-	url: string;
-	text: string;
-	retailer: string;
-	price: string;
-};
-
-export type ProductCustomAttribute = {
-	name: string;
-	value: string;
-};
-
-export type ProductStarRating =
-	| '0'
-	| '1'
-	| '2'
-	| '3'
-	| '4'
-	| '5'
-	| 'none-selected';
-
 export interface SrcSetItem {
 	src: string;
 	width: number;
 }
 
-export interface ProductImage {
-	url: string;
-	caption: string;
-	credit: string;
-	alt: string;
-	displayCredit: boolean;
-	height: number;
-	width: number;
-}
-
 export interface Image {
 	index: number;
 	fields: {