Add canvas size disable controls

test/playlist-form-view-model.test.js

@@ -83,4 +83,20 @@ test('playlist rows use the longest video region duration', () => {
   assert.equal(model.playlistSlides[0].showVideoDurationButton, true);
   assert.equal(model.playlistSlides[0].videoDurationSeconds, 27.75);
   assert.equal(model.playlistSlides[0].durationSeconds, 27.75);
+});
+
+test('disabled canvas sizes are hidden for new playlists but retained for existing assignments', () => {
+  const canvasSizes = [
+    { id: 1, name: 'Full HD', width: 1920, height: 1080, enabled: 1 },
+    { id: 2, name: 'Legacy', width: 1280, height: 720, enabled: 0 }
+  ];
+  const data = { playlistSlides: [], slides: [], canvasSizes: canvasSizes };
+
+  const createModel = buildPlaylistFormViewModel({}, data, '', null, {});
+  assert.deepEqual(createModel.canvasSizes.map((size) => size.id), [1]);
+
+  const editModel = buildPlaylistFormViewModel({ id: 12, canvas_id: 2 }, data, '', null, { isEdit: true });
+  assert.deepEqual(editModel.canvasSizes.map((size) => size.id), [1, 2]);
+  assert.match(editModel.canvasSizes[1].label, /Disabled/);
+  assert.equal(editModel.canvasSizes[1].selected, true);
 });