diff --git a/__tests__/models.spec.ts b/__tests__/models.spec.ts index 1168b4d..1af0d03 100644 --- a/__tests__/models.spec.ts +++ b/__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') }) }) diff --git a/e2e/navigation.spec.ts b/e2e/navigation.spec.ts index 6f2d4cb..d8f90f4 100644 --- a/e2e/navigation.spec.ts +++ b/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]) }) }) diff --git a/lib/models/images.ts b/lib/models/images.ts index 343993c..e0f75fa 100644 --- a/lib/models/images.ts +++ b/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,