add wrap-around navigation for media rows

packages/app/src/components/MediaCard/MediaCard.js

@@ -10,7 +10,7 @@ const SpottableDiv = Spottable('div');
 const POSTER_SIZE_MULTIPLIERS = {small: 0.8, default: 1, large: 1.2, xlarge: 1.4};
 const BASE_SIZES = {portrait: [240, 360], landscape: [384, 216], square: [240, 240]};
 
-const MediaCard = ({item, serverUrl, cardType = 'portrait', onSelect, onFocusItem, showServerBadge = false, showOverview = false, eagerLoad = false}) => {
+const MediaCard = ({item, serverUrl, cardType = 'portrait', onSelect, onFocusItem, showServerBadge = false, showOverview = false, eagerLoad = false, spotlightId, onSpotlightLeft, onSpotlightRight}) => {
 	const {settings} = useSettings();
 	const isLandscape = cardType === 'landscape';
 	const isSquare = cardType === 'square' || (cardType === 'portrait' && (item.Type === 'MusicAlbum' || item.Type === 'MusicArtist' || item.Type === 'Audio'));
@@ -132,7 +132,7 @@ const MediaCard = ({item, serverUrl, cardType = 'portrait', onSelect, onFocusIte
 	const imgSizeStyle = sizeMultiplier !== 1 ? {height: cardHeight + 'px'} : undefined;
 
 	return (
-		<SpottableDiv className={cardClass} onClick={handleClick} onFocus={handleFocus} style={sizeStyle}>
+		<SpottableDiv className={cardClass} onClick={handleClick} onFocus={handleFocus} style={sizeStyle} spotlightId={spotlightId} onSpotlightLeft={onSpotlightLeft} onSpotlightRight={onSpotlightRight}>
 			<div className={css.imageContainer}>
 				{imageUrl ? (
 					<img

packages/app/src/components/MediaRow/MediaRow.js

@@ -1,7 +1,9 @@
 import {useCallback, useRef, useEffect, memo} from 'react';
 import SpotlightContainerDecorator from '@enact/spotlight/SpotlightContainerDecorator';
+import Spotlight from '@enact/spotlight';
 import MediaCard from '../MediaCard';
 import {KEYS} from '../../utils/keys';
+import {useSettings} from '../../context/SettingsContext';
 
 import css from './MediaRow.module.less';
 
@@ -26,6 +28,7 @@ const MediaRow = ({
 	className,
 	registerRowRef
 }) => {
+	const {settings} = useSettings();
 	const scrollerRef = useRef(null);
 	const scrollTimeoutRef = useRef(null);
 	const rowElementRef = useRef(null);
@@ -75,6 +78,24 @@ const MediaRow = ({
 		}
 	}, [rowIndex, onNavigateUp, onNavigateDown]);
 
+	const handleWrapLeft = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		if (settings.navbarPosition === 'left') {
+			if (!Spotlight.focus('navbar')) {
+				Spotlight.move('left');
+			}
+		} else {
+			Spotlight.focus(`media-${keyPrefix}-${items[items.length - 1].Id}`);
+		}
+	}, [items, keyPrefix, settings.navbarPosition]);
+
+	const handleWrapRight = useCallback((e) => {
+		e.preventDefault();
+		e.stopPropagation();
+		Spotlight.focus(`media-${keyPrefix}-${items[0].Id}`);
+	}, [items, keyPrefix]);
+
 	if (!items || items.length === 0) return null;
 
 	return (
@@ -88,19 +109,28 @@ const MediaRow = ({
 			<h2 className={css.title}>{title}</h2>
 			<div className={css.scroller} ref={scrollerRef} onFocus={handleFocus}>
 				<div className={css.items}>
-					{items.map((item) => (
-						<MediaCard
-							key={`${keyPrefix}-${item.Id}`}
-							item={item}
-							serverUrl={serverUrl}
-							cardType={cardType}
-							onSelect={handleSelect}
-							onFocusItem={onFocusItem}
-							showServerBadge={showServerBadge}
-							showOverview={showOverview}
-							eagerLoad={rowIndex === 0}
-						/>
-					))}
+						{items.map((item, index) => {
+							const spotlightId = `media-${keyPrefix}-${item.Id}`;
+							const isFirst = index === 0;
+							const isLast = index === items.length - 1;
+
+							return (
+								<MediaCard
+									key={`${keyPrefix}-${item.Id}`}
+									item={item}
+									serverUrl={serverUrl}
+									cardType={cardType}
+									onSelect={handleSelect}
+									onFocusItem={onFocusItem}
+									showServerBadge={showServerBadge}
+									showOverview={showOverview}
+									eagerLoad={rowIndex === 0}
+									spotlightId={spotlightId}
+									onSpotlightLeft={isFirst ? handleWrapLeft : null}
+									onSpotlightRight={isLast ? handleWrapRight : null}
+								/>
+							);
+						})}
 				</div>
 			</div>
 		</RowContainer>