fix(images): page through images with video and audio again

__tests__/models.spec.ts

@@ -41,10 +41,11 @@ function handlerById(id: string): IHandler {
 	return handler
 }
 
-// A folder pages through every file of the opened handler's group, so video
-// and audio share one and images stay on their own
+// A folder pages through every file of the opened handler's group, so
+// images, video and audio share one: a film, its poster and the photos
+// beside it are one folder to page through, as they were before
 describe('handler groups', () => {
-	it('puts video and audio together, images apart', async () => {
+	it('puts images, video and audio together', async () => {
 		const { registerVideoHandler } = await import('../lib/models/videos.ts')
 		const { registerAudioHandler } = await import('../lib/models/audios.ts')
 		const { registerImageHandler } = await import('../lib/models/images.ts')
@@ -53,7 +54,7 @@ describe('handler groups', () => {
 		registerImageHandler()
 		expect(handlerById('videos').group).toBe('media')
 		expect(handlerById('audios').group).toBe('media')
-		expect(handlerById('images').group).toBeUndefined()
+		expect(handlerById('images').group).toBe('media')
 	})
 })
 

e2e/navigation.spec.ts

@@ -6,8 +6,10 @@ import { expect, test } from '@playwright/test'
 import { ViewerPage } from './support/viewer.ts'
 
 // The order the playground lists them in, which is the order the viewer is
-// handed and the order it has to step through
-const IMAGES = [
+// handed and the order it has to step through. Images, video and audio
+// share the 'media' group, so they page into each other, as people keep
+// films, their posters and photos together
+const MEDIA = [
 	'photo.jpg',
 	'gradient.jpg',
 	'portrait.jpg',
@@ -20,11 +22,6 @@ const IMAGES = [
 	'drawing.svg',
 	'animation.gif',
 	'protected.jpg',
-]
-
-// The video and audio handlers share the 'media' group, so these page
-// among themselves and never into the images
-const MEDIA = [
 	'video.mp4',
 	'audio.mp3',
 	'sound.wav',
@@ -38,6 +35,9 @@ const MEDIA = [
 	'clip.webm',
 ]
 
+// No group, so the sheet music only pages among itself
+const SHEET_MUSIC = ['score.musicxml', 'score.mxl']
+
 test.describe('Viewer navigation', () => {
 	test('steps through the list and loops around at both ends', async ({ page }) => {
 		const viewer = new ViewerPage(page)
@@ -49,39 +49,34 @@ test.describe('Viewer navigation', () => {
 		await expect(viewer.nextButton).toBeVisible()
 		await expect(viewer.previousButton).toBeVisible()
 
-		for (const image of IMAGES.slice(1)) {
+		for (const file of MEDIA.slice(1)) {
 			await viewer.next()
 			await viewer.waitForOpen()
-			expect(await viewer.currentName()).toBe(image)
+			expect(await viewer.currentName()).toBe(file)
 		}
 
 		// Past the last file is the first again, and back past it the last
 		await viewer.next()
 		await viewer.waitForOpen()
-		expect(await viewer.currentName()).toBe(IMAGES[0])
+		expect(await viewer.currentName()).toBe(MEDIA[0])
 
 		await viewer.previous()
 		await viewer.waitForOpen()
-		expect(await viewer.currentName()).toBe(IMAGES.at(-1))
+		expect(await viewer.currentName()).toBe(MEDIA.at(-1))
 	})
 
 	test('pages within the handler group and not across it', async ({ page }) => {
 		const viewer = new ViewerPage(page)
-		// Images are on their own, so opening a video pages through the
-		// media and stops there
-		await viewer.open(MEDIA[0]!)
+		await viewer.open(SHEET_MUSIC[0]!)
 		await viewer.waitForOpen()
-		expect(await viewer.currentName()).toBe(MEDIA[0])
 
-		for (const file of MEDIA.slice(1)) {
-			await viewer.next()
-			await viewer.waitForOpen()
-			expect(await viewer.currentName()).toBe(file)
-		}
+		await viewer.next()
+		await viewer.waitForOpen()
+		expect(await viewer.currentName()).toBe(SHEET_MUSIC[1])
 
-		// Round the end of the media, rather than on into the images
+		// Round the end of the sheet music, rather than on into the media
 		await viewer.next()
 		await viewer.waitForOpen()
-		expect(await viewer.currentName()).toBe(MEDIA[0])
+		expect(await viewer.currentName()).toBe(SHEET_MUSIC[0])
 	})
 })

lib/models/images.ts

@@ -98,6 +98,9 @@ export function registerImageHandler() {
 		id: 'images',
 		displayName: t('Images'),
 		tagName,
+		// With video and audio: a folder of photos and films pages through
+		// all of them, and a video finds the poster beside it in its list
+		group: 'media',
 		supportsEndToEndEncryption: true,
 		canEdit: true,