feat(up-next): add Continue Watching smart sort

Author: kevincador

projects/client/i18n/meta/en.json

@@ -4474,6 +4474,14 @@
       "default": "Sort by default order",
       "description": "Aria-label for the button that allows users to sort items by the default sorting method."
     },
+    "button_text_sort_smart": {
+      "default": "Smart",
+      "description": "Text for the button that allows users to sort up next items by the smart sorting method."
+    },
+    "button_label_sort_smart": {
+      "default": "Sort by smart order",
+      "description": "Aria-label for the button that allows users to sort up next items by the smart sorting method."
+    },
     "button_text_sort_added_date": {
       "default": "Date Added",
       "description": "Text for the button that allows users to sort items by the date they were added."
@@ -8003,6 +8011,14 @@
       "default": "Use our next-gen engine to surface recommended movies and shows beyond the obvious.",
       "description": "Description for the Smart Recommendations preview feature."
     },
+    "preview_feature_title_up_next_smart_sort": {
+      "default": "Continue Watching Smart Sort",
+      "description": "Title for the Up Next Smart Sort preview feature."
+    },
+    "preview_feature_description_up_next_smart_sort": {
+      "default": "Test a smarter way to sort your Continue Watching.",
+      "description": "Description for the Up Next Smart Sort preview feature."
+    },
     "preview_feature_title_rewatch": {
       "default": "Rewatch",
       "description": "Title for the Rewatch preview feature."

projects/client/src/lib/features/feature-flag/models/FeatureFlag.ts

@@ -3,6 +3,7 @@ export enum FeatureFlag {
   ScopedFavorites = 'scoped-favorites',
   SmartRelated = 'smart-related',
   SmartRecommendations = 'smart-recommendations',
+  UpNextSmartSort = 'up-next-smart-sort',
   Rewatching = 'rewatching',
   Leaderboard = 'leaderboard',
 }

projects/client/src/lib/features/feature-flag/models/featureFlagDefinitions.ts

@@ -3,6 +3,7 @@ import EditModeIcon from '$lib/components/icons/EditModeIcon.svelte';
 import FastRewindIcon from '$lib/components/icons/FastRewindIcon.svelte';
 import FavoriteIcon from '$lib/components/icons/FavoriteIcon.svelte';
 import PeopleIcon from '$lib/components/icons/PeopleIcon.svelte';
+import SmartListIcon from '$lib/components/icons/SmartListIcon.svelte';
 import { m } from '$lib/features/i18n/messages.ts';
 import { UrlBuilder } from '$lib/utils/url/UrlBuilder.ts';
 import type { Component } from 'svelte';
@@ -56,6 +57,16 @@ export const featureFlagDefinitions: FeatureFlagDefinitions = {
     title: () => m.preview_feature_title_smart_recommendations(),
     description: () => m.preview_feature_description_smart_recommendations(),
   },
+  [FeatureFlag.UpNextSmartSort]: {
+    icon: SmartListIcon,
+    title: () => m.preview_feature_title_up_next_smart_sort(),
+    description: () => m.preview_feature_description_up_next_smart_sort(),
+    featureLink: () =>
+      openFeatureLink(
+        UrlBuilder.progress('me', { sort_by: 'smart' }),
+        m.preview_feature_title_up_next_smart_sort(),
+      ),
+  },
   [FeatureFlag.Rewatching]: {
     icon: FastRewindIcon,
     title: () => m.preview_feature_title_rewatch(),

projects/client/src/lib/features/feature-flag/useFeatureFlag.spec.ts

@@ -39,6 +39,8 @@ describe('store: useFeatureFlag', () => {
     );
     expect(await waitForValue(isEnabled(FeatureFlag.SmartRelated), true))
       .toBe(true);
+    expect(await waitForValue(isEnabled(FeatureFlag.UpNextSmartSort), true))
+      .toBe(true);
   });
 
   it('should default every flag to disabled for non-director accounts', async () => {

projects/client/src/lib/requests/queries/sync/_internal/getMovieProgressSortValue.ts

@@ -0,0 +1,16 @@
+import type { UpNextSortBy } from '$lib/sections/lists/progress/UpNextSortBy.ts';
+import type { MovieProgressEntry } from '../../../models/MovieProgressEntry.ts';
+
+export function getMovieProgressSortValue(
+  entry: MovieProgressEntry,
+  sortBy: UpNextSortBy | undefined,
+): number {
+  switch (sortBy) {
+    case 'released':
+      return entry.effectiveReleaseDate.getTime();
+    case 'remaining':
+      return 0;
+    default:
+      return entry.lastWatchedAt?.getTime() ?? 0;
+  }
+}

projects/client/src/lib/requests/queries/sync/_internal/interleaveMediaProgress.spec.ts

@@ -239,4 +239,46 @@ describe('interleaveMediaProgress', () => {
       expect(result[3]!.key).toBe('episode-2');
     });
   });
+
+  describe('sorting by smart', () => {
+    it('should interleave movies by progress date without reordering smart episodes', () => {
+      const episodes = [
+        createContinueEpisode(
+          'episode-smart-first',
+          new Date('2020-01-01'),
+          new Date('2024-01-05'),
+        ),
+        createContinueEpisode(
+          'episode-smart-second',
+          new Date('2020-01-01'),
+          new Date('2024-01-01'),
+        ),
+      ];
+      const movies = [
+        createContinueMovie(
+          'movie-first',
+          new Date('2020-01-01'),
+          new Date('2024-01-07'),
+        ),
+        createContinueMovie(
+          'movie-second',
+          new Date('2020-01-01'),
+          new Date('2024-01-03'),
+        ),
+      ];
+
+      const result = interleaveMediaProgress({
+        episodes,
+        movies,
+        sortBy: 'smart',
+      });
+
+      expect(result.map((e) => e.key)).toEqual([
+        'movie-first',
+        'episode-smart-first',
+        'movie-second',
+        'episode-smart-second',
+      ]);
+    });
+  });
 });

projects/client/src/lib/requests/queries/sync/_internal/interleaveMediaProgress.ts

@@ -2,6 +2,7 @@ import type { UpNextSortBy } from '$lib/sections/lists/progress/UpNextSortBy.ts'
 import type { SortDirection } from '$lib/sections/lists/user/models/SortDirection.ts';
 import type { MovieProgressEntry } from '../../../models/MovieProgressEntry.ts';
 import type { UpNextEntry } from '../../../models/UpNextEntry.ts';
+import { getMovieProgressSortValue } from './getMovieProgressSortValue.ts';
 import { sortMovieProgress } from './sortMovieProgress.ts';
 
 type SortMediaProgressProps = {
@@ -11,22 +12,31 @@ type SortMediaProgressProps = {
   sortHow?: SortDirection;
 };
 
-function getComparableValues(
-  movie: MovieProgressEntry,
+function getEpisodeSortValue(
   episode: UpNextEntry,
   sortBy: UpNextSortBy,
-): [number, number] {
+): number {
   switch (sortBy) {
     case 'released':
-      return [
-        movie.effectiveReleaseDate.getTime(),
-        episode.effectiveReleaseDate.getTime(),
-      ];
+      return episode.effectiveReleaseDate.getTime();
     case 'remaining':
-      return [0, episode.remaining];
+      return episode.remaining;
+    case 'smart':
+      return episode.lastWatchedAt?.getTime() ?? 0;
   }
 }
 
+function getComparableValues(
+  movie: MovieProgressEntry,
+  episode: UpNextEntry,
+  sortBy: UpNextSortBy,
+): [number, number] {
+  return [
+    getMovieProgressSortValue(movie, sortBy),
+    getEpisodeSortValue(episode, sortBy),
+  ];
+}
+
 function shouldInsertBefore(
   movie: MovieProgressEntry,
   episode: UpNextEntry,

projects/client/src/lib/requests/queries/sync/_internal/sortMovieProgress.spec.ts

@@ -98,4 +98,18 @@ describe('sortMovieProgress', () => {
       expect(result).toHaveLength(2);
     });
   });
+
+  describe('sortBy smart', () => {
+    it('should keep movies on the default progress sort', () => {
+      const entries = [
+        createMovie('a', { lastWatchedAt: new Date('2024-01-01') }),
+        createMovie('b', { lastWatchedAt: new Date('2024-01-03') }),
+        createMovie('c', { lastWatchedAt: new Date('2024-01-02') }),
+      ];
+
+      const result = sortMovieProgress({ entries, sortBy: 'smart' });
+
+      expect(result.map((e) => e.key)).toEqual(['b', 'c', 'a']);
+    });
+  });
 });

projects/client/src/lib/requests/queries/sync/_internal/sortMovieProgress.ts

@@ -1,33 +1,22 @@
 import type { UpNextSortBy } from '$lib/sections/lists/progress/UpNextSortBy.ts';
 import type { SortDirection } from '$lib/sections/lists/user/models/SortDirection.ts';
 import type { MovieProgressEntry } from '../../../models/MovieProgressEntry.ts';
+import { getMovieProgressSortValue } from './getMovieProgressSortValue.ts';
 
 type SortMovieProgressProps = {
   entries: ReadonlyArray<MovieProgressEntry>;
   sortBy?: UpNextSortBy;
   sortHow?: SortDirection;
 };
 
-function getSortValue(
-  entry: MovieProgressEntry,
-  sortBy: UpNextSortBy | undefined,
-): number {
-  switch (sortBy) {
-    case 'released':
-      return entry.effectiveReleaseDate.getTime();
-    case 'remaining':
-      return 0;
-    default:
-      return entry.lastWatchedAt?.getTime() ?? 0;
-  }
-}
-
 export function sortMovieProgress(
   { entries, sortBy, sortHow = 'desc' }: SortMovieProgressProps,
 ): MovieProgressEntry[] {
   const direction = sortHow === 'asc' ? 1 : -1;
 
   return entries.toSorted(
-    (a, b) => (getSortValue(a, sortBy) - getSortValue(b, sortBy)) * direction,
+    (a, b) =>
+      (getMovieProgressSortValue(a, sortBy) -
+        getMovieProgressSortValue(b, sortBy)) * direction,
   );
 }

projects/client/src/lib/requests/queries/sync/upNextNitroQuery.spec.ts

@@ -1,7 +1,10 @@
 import { UpNextMappedMock } from '$mocks/data/sync/mapped/UpNextMappedMock.ts';
+import { UpNextResponseMock } from '$mocks/data/sync/response/UpNextResponseMock.ts';
+import { server } from '$mocks/server.ts';
 import { createTestBedInfiniteQuery } from '$test/beds/query/createTestBedInfiniteQuery.ts';
 import { runQuery } from '$test/beds/query/runQuery.ts';
 import { mapToEntries } from '$test/utils/mapToEntries.ts';
+import { http, HttpResponse } from 'msw';
 import { describe, expect, it } from 'vitest';
 import { upNextNitroQuery } from './upNextNitroQuery.ts';
 
@@ -17,4 +20,29 @@ describe('upNextNitroQuery', () => {
 
     expect(result).to.deep.equal(UpNextMappedMock);
   });
+
+  it('should request smart sort for up next', async () => {
+    let requestedUrl: URL | undefined;
+
+    server.use(
+      http.get(
+        'http://localhost/sync/progress/up_next_nitro',
+        ({ request }) => {
+          requestedUrl = new URL(request.url);
+          return HttpResponse.json(UpNextResponseMock);
+        },
+      ),
+    );
+
+    await runQuery({
+      factory: () =>
+        createTestBedInfiniteQuery(
+          upNextNitroQuery({ limit: 10, sortBy: 'smart', sortHow: 'desc' }),
+        ),
+      mapper: mapToEntries,
+    });
+
+    expect(requestedUrl?.searchParams.get('sort_by')).toBe('smart');
+    expect(requestedUrl?.searchParams.get('sort_how')).toBe('desc');
+  });
 });