Use reducer over sort for findOptimalSource function

Author: domlander

dotcom-rendering/src/lib/video.ts

@@ -90,35 +90,22 @@ export const getSubtitleAsset = (assets: VideoAssets[]): string | undefined =>
 	assets.find((asset) => asset.mimeType === 'text/vtt')?.url;
 
 /**
- * Returns the smallest source that is larger than or equal to the screen width.
- * If all sources are smaller than the screen width, take the largest.
+ * Returns the smallest source that is larger than or equal to the screen width, unless
+ * all sources are smaller than the screen width, in which case it returns the largest source.
  */
 const findOptimalSource = (
 	sources: Source[],
 	screenWidth: number,
 ): Source | undefined => {
 	if (sources.length === 0) return undefined;
 
-	const orderedSources = sources.sort((a, b) => {
-		const bothLargerThanScreenWidth =
-			a.width >= screenWidth && b.width >= screenWidth;
-		const bothSmallerThanScreenWidth =
-			a.width <= screenWidth && b.width <= screenWidth;
-
-		if (bothLargerThanScreenWidth) {
-			return a.width > b.width ? 1 : -1; // take the smaller source
-		}
-
-		if (bothSmallerThanScreenWidth) {
-			return a.width < b.width ? 1 : -1; // take the larger source
+	return sources.reduce((a, b) => {
+		if (a.width < screenWidth || b.width < screenWidth) {
+			return a.width > b.width ? a : b; // take the larger source
 		}
 
-		// If we have reached this point, we know that one source is larger than the screen width
-		// and the other is smaller. We take the source that is larger than the screen width.
-		return a.width <= screenWidth ? 1 : -1;
+		return a.width < b.width ? a : b; // take the smaller source
 	});
-
-	return orderedSources[0];
 };
 
 export const findOptimisedSourcePerMimeType = (