@rocketshow/designer 1.33.0 → 1.35.0

package/fesm2022/rocketshow-designer.mjs

@@ -1,18 +1,18 @@
 import * as i0 from '@angular/core';
-import { Injectable, Component, ViewChild, HostListener, Pipe, Input, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
+import { Injectable, Component, ViewChild, HostListener, Pipe, EventEmitter, Output, Input, ChangeDetectionStrategy, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i2 from '@ngx-translate/core';
 import { TranslateModule } from '@ngx-translate/core';
 import * as i1$1 from 'ngx-bootstrap/modal';
-import * as i3 from 'ngx-toastr';
-import { ToastrModule } from 'ngx-toastr';
-import { map, finalize, mergeMap, catchError } from 'rxjs/operators';
+import { map, mergeMap, finalize, catchError } from 'rxjs/operators';
 import Split from 'split.js';
 import * as THREE from 'three';
 import { OrbitControls } from 'three/examples/jsm/controls/OrbitControls';
 import * as i1 from '@angular/common/http';
-import { HttpHeaders, HttpClientModule } from '@angular/common/http';
+import { HttpHeaders, HttpErrorResponse, HttpClientModule } from '@angular/common/http';
+import * as i3$1 from 'ngx-toastr';
+import { ToastrModule } from 'ngx-toastr';
 import { of, forkJoin, Observable, Subject, timer } from 'rxjs';
-import * as i4 from '@angular/router';
+import * as i3 from '@angular/router';
 import { RouterModule } from '@angular/router';
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
 import WaveSurfer from 'wavesurfer.js';
@@ -23,7 +23,7 @@ import { guess } from 'web-audio-beat-detector';
 import * as i5 from '@angular/common';
 import * as i5$1 from 'ngx-dropzone-wrapper';
 import { DropzoneModule } from 'ngx-dropzone-wrapper';
-import * as i4$1 from '@angular/forms';
+import * as i4 from '@angular/forms';
 import { FormsModule } from '@angular/forms';
 import * as i12 from 'ngx-bootstrap/popover';
 import { PopoverModule } from 'ngx-bootstrap/popover';
@@ -31,7 +31,7 @@ import * as i8 from 'ngx-sortablejs-plus';
 import { SortablejsModule } from 'ngx-sortablejs-plus';
 import * as i11 from 'ngx-bootstrap/typeahead';
 import { TypeaheadModule } from 'ngx-bootstrap/typeahead';
-import * as i4$2 from 'ngx-bootstrap-slider';
+import * as i4$1 from 'ngx-bootstrap-slider';
 import { NgxBootstrapSliderModule } from 'ngx-bootstrap-slider';
 import * as i6 from 'ngx-bootstrap/accordion';
 import { AccordionModule } from 'ngx-bootstrap/accordion';
@@ -157,6 +157,94 @@ class FixtureChannel {
     }
 }
 
+class FixtureMatrixPixelGroupConstraints {
+    constructor(data) {
+        // constraint the pixel keys directly
+        this.keys = [];
+        // constraints by coordinates
+        this.x = [];
+        this.y = [];
+        this.z = [];
+        // a name regexp-constraint
+        this.name = [];
+        if (!data) {
+            return;
+        }
+        if (Array.isArray(data)) {
+            // an array of pixel keys
+            this.keys = data;
+        }
+        else {
+            // an object of constraints
+            this.x = data.x;
+            this.y = data.y;
+            this.z = data.z;
+            this.name = data.name;
+        }
+    }
+}
+
+class FixtureMatrixPixelGroup {
+    constructor(isAll = false, constraints) {
+        this.isAll = false;
+        this.constraints = null;
+        this.isAll = isAll;
+        if (constraints) {
+            this.constraints = new FixtureMatrixPixelGroupConstraints(constraints);
+        }
+    }
+}
+
+class FixtureMatrix {
+    constructor(data) {
+        this.pixelCount = [];
+        this.pixelGroups = {};
+        if (!data) {
+            return;
+        }
+        if (data.pixelKeys) {
+            this.pixelKeys = data.pixelKeys;
+        }
+        if (data.pixelCount) {
+            for (const pixelCountEntry of data.pixelCount) {
+                this.pixelCount.push(pixelCountEntry);
+            }
+        }
+        if (data.pixelGroups) {
+            for (const property of Object.keys(data.pixelGroups)) {
+                const pixelGroup = new FixtureMatrixPixelGroup(data.pixelGroups[property]);
+                this.pixelGroups[property] = pixelGroup;
+            }
+        }
+    }
+}
+
+class FixtureModeChannel {
+    constructor(data) {
+        this.repeatFor = [];
+        this.templateChannels = [];
+        if (!data) {
+            return;
+        }
+        if (typeof data === 'string') {
+            this.name = data;
+        }
+        else if (typeof data === 'object') {
+            // after first saving the project, we have a FixtureModeChannel-object, even if it's just a direct channel with a name
+            this.name = data.name;
+            this.insert = data.insert;
+            if (Array.isArray(data.repeatFor)) {
+                this.repeatFor = data.repeatFor;
+            }
+            else {
+                this.repeatFor.push(data.repeatFor);
+            }
+            this.channelOrder = data.channelOrder;
+            this.templateChannels = data.templateChannels;
+        }
+    }
+}
+
 class FixtureMode {
     constructor(data) {
         this.channels = [];
@@ -166,7 +254,23 @@ class FixtureMode {
         this.name = data.name;
         this.shortName = data.shortName;
         if (data.channels) {
-            this.channels = data.channels;
+            for (const channel of data.channels) {
+                this.channels.push(new FixtureModeChannel(channel));
+            }
+        }
+    }
+}
+
+class FixturePhysical {
+    constructor(data) {
+        this.dimensions = [];
+        if (!data) {
+            return;
+        }
+        if (data.dimensions) {
+            for (const dimension of data.dimensions) {
+                this.dimensions.push(dimension);
+            }
         }
     }
 }
@@ -236,6 +340,7 @@ class FixtureProfile {
         this.createdFromFile = false;
         this.categories = [];
         this.availableChannels = {};
+        this.templateChannels = {};
         this.wheels = {};
         // All available fixture modes
         this.modes = [];
@@ -255,6 +360,12 @@ class FixtureProfile {
         else if (data.mainCategory) {
             this.categories.push(FixtureCategory[data.mainCategory]);
         }
+        if (data.physical) {
+            this.physical = new FixturePhysical(data.physical);
+        }
+        if (data.matrix) {
+            this.matrix = new FixtureMatrix(data.matrix);
+        }
         if (data.wheels) {
             for (const property of Object.keys(data.wheels)) {
                 const wheel = new FixtureWheel(data.wheels[property]);
@@ -272,6 +383,12 @@ class FixtureProfile {
                 this.availableChannels[property] = fixtureChannel;
             }
         }
+        if (data.templateChannels) {
+            for (const property of Object.keys(data.templateChannels)) {
+                const templateChannel = new FixtureChannel(data.templateChannels[property]);
+                this.templateChannels[property] = templateChannel;
+            }
+        }
         if (data.createdFromFile) {
             this.createdFromFile = data.createdFromFile;
         }
@@ -318,7 +435,7 @@ var Positioning;
 })(Positioning || (Positioning = {}));
 class Fixture {
     constructor(data) {
-        this.dmxFirstChannel = 5;
+        this.dmxFirstChannel = 1;
         this.positioning = Positioning.topFront;
         // Only relevant when positioning = manual
         // in CM
@@ -540,10 +657,22 @@ class FixtureChannelValue {
     }
 }
 
+class PresetFixture {
+    constructor(data) {
+        if (!data) {
+            return;
+        }
+        this.fixtureUuid = data.fixtureUuid;
+        this.pixelKey = data.pixelKey;
+    }
+}
+
 class Preset {
     constructor(data) {
         // all related fixtures
+        // OBSOLETE: replaced with fixtures
         this.fixtureUuids = [];
+        this.fixtures = [];
         // the selected values
         this.fixtureChannelValues = [];
         this.fixtureCapabilityValues = [];
@@ -560,7 +689,13 @@ class Preset {
         }
         this.uuid = data.uuid;
         this.name = data.name;
+        // OBSOLETE
         this.fixtureUuids = data.fixtureUuids;
+        if (data.fixtures) {
+            for (const fixture of data.fixtures) {
+                this.fixtures.push(new PresetFixture(fixture));
+            }
+        }
         if (data.fixtureChannelValues) {
             for (const fixtureChannelValue of data.fixtureChannelValues) {
                 this.fixtureChannelValues.push(new FixtureChannelValue(fixtureChannelValue));
@@ -633,13 +768,17 @@ class Project {
         this.previewPreset = true;
         this.compositions = [];
         this.fixtureProfiles = [];
+        // fixtures added to the project in a DMX universe
         this.fixtures = [];
+        // the fixtures and pixel keys in order to be selectable
+        this.presetFixtures = [];
         this.scenes = [];
         this.presets = [];
         if (!data) {
             return;
         }
         this.id = data.id;
+        this.version = data.version;
         this.uuid = data.uuid;
         this.name = data.name;
         this.shareToken = data.shareToken;
@@ -669,6 +808,11 @@ class Project {
                 this.fixtures.push(new Fixture(fixture));
             }
         }
+        if (data.presetFixtures) {
+            for (const presetFixture of data.presetFixtures) {
+                this.presetFixtures.push(new PresetFixture(presetFixture));
+            }
+        }
         if (data.scenes) {
             for (const scene of data.scenes) {
                 this.scenes.push(new Scene(scene));
@@ -766,39 +910,16 @@ class UserService {
             }]
     }], () => [{ type: i1.HttpClient }], null); })();
 
-class UuidService {
-    constructor() { }
-    getUuid() {
-        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
-            // tslint:disable-next-line:no-bitwise
-            const r = (Math.random() * 16) | 0;
-            // tslint:disable-next-line:no-bitwise
-            const v = c === 'x' ? r : (r & 0x3) | 0x8;
-            return v.toString(16);
-        });
-    }
-    static { this.ɵfac = function UuidService_Factory(t) { return new (t || UuidService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: UuidService, factory: UuidService.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UuidService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root',
-            }]
-    }], () => [], null); })();
-
 class ProjectService {
-    constructor(uuidService, http, userService, router, activatedRoute, translateService, toastrService) {
-        this.uuidService = uuidService;
+    constructor(http, userService, router, activatedRoute, translateService, toastrService) {
         this.http = http;
         this.userService = userService;
         this.router = router;
         this.activatedRoute = activatedRoute;
         this.translateService = translateService;
         this.toastrService = toastrService;
-        this.project = new Project();
-        this.project.uuid = this.uuidService.getUuid();
-        this.project.name = 'New Project';
+        // the project-file versions used in this version of the designer (older ones will be migrated, newer ones are not supported)
+        this.currentProjectVersion = 2;
     }
     saveApi(project) {
         return this.http.post('project', JSON.stringify(project), { headers: this.userService.getHeaders() }).pipe(map((response) => {
@@ -858,7 +979,7 @@ class ProjectService {
             return project;
         }));
     }
-    static { this.ɵfac = function ProjectService_Factory(t) { return new (t || ProjectService)(i0.ɵɵinject(UuidService), i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(UserService), i0.ɵɵinject(i4.Router), i0.ɵɵinject(i4.ActivatedRoute), i0.ɵɵinject(i2.TranslateService), i0.ɵɵinject(i3.ToastrService)); }; }
+    static { this.ɵfac = function ProjectService_Factory(t) { return new (t || ProjectService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(UserService), i0.ɵɵinject(i3.Router), i0.ɵɵinject(i3.ActivatedRoute), i0.ɵɵinject(i2.TranslateService), i0.ɵɵinject(i3$1.ToastrService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ProjectService, factory: ProjectService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProjectService, [{
@@ -866,7 +987,28 @@ class ProjectService {
         args: [{
                 providedIn: 'root',
             }]
-    }], () => [{ type: UuidService }, { type: i1.HttpClient }, { type: UserService }, { type: i4.Router }, { type: i4.ActivatedRoute }, { type: i2.TranslateService }, { type: i3.ToastrService }], null); })();
+    }], () => [{ type: i1.HttpClient }, { type: UserService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: i2.TranslateService }, { type: i3$1.ToastrService }], null); })();
+
+class UuidService {
+    constructor() { }
+    getUuid() {
+        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, (c) => {
+            // tslint:disable-next-line:no-bitwise
+            const r = (Math.random() * 16) | 0;
+            // tslint:disable-next-line:no-bitwise
+            const v = c === 'x' ? r : (r & 0x3) | 0x8;
+            return v.toString(16);
+        });
+    }
+    static { this.ɵfac = function UuidService_Factory(t) { return new (t || UuidService)(); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: UuidService, factory: UuidService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UuidService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], () => [], null); })();
 
 class FixtureService {
     constructor(http, projectService, translateService, toastrService, uuidService) {
@@ -887,9 +1029,9 @@ class FixtureService {
             }
         }
     }
-    getCachedFixtureByUuid(uuid) {
+    getCachedFixtureByUuid(uuid, pixelKey) {
         for (const fixture of this.cachedFixtures) {
-            if (fixture.fixture.uuid === uuid) {
+            if (fixture.fixture.uuid === uuid && ((!fixture.pixelKey && !pixelKey) || fixture.pixelKey === pixelKey)) {
                 return fixture;
             }
         }
@@ -1099,14 +1241,6 @@ class FixtureService {
         }
         return undefined;
     }
-    // private channelInList(channels: CachedFixtureChannel[], name: string): boolean {
-    //   for (let channel of channels) {
-    //     if (channel.channelName === name) {
-    //       return true;
-    //     }
-    //   }
-    //   return false;
-    // }
     getChannelByName(fixture, channelName) {
         for (const channel of fixture.channels) {
             if ((channel.name && channel.name === channelName) ||
@@ -1116,51 +1250,264 @@ class FixtureService {
         }
         return undefined;
     }
-    getCachedChannels(profile, mode) {
+    addCachedChannel(channels, channel, templateChannelName, pixelKey, profile) {
+        const cachedFixtureChannel = new CachedFixtureChannel();
+        const channelName = templateChannelName.replace('$pixelKey', pixelKey);
+        cachedFixtureChannel.channel = channel;
+        cachedFixtureChannel.name = channelName;
+        cachedFixtureChannel.capabilities = this.getCapabilitiesByChannel(cachedFixtureChannel.channel, channelName, profile);
+        const defaultValue = this.getDefaultValueByChannel(cachedFixtureChannel.channel);
+        if (defaultValue) {
+            cachedFixtureChannel.defaultValue = defaultValue;
+        }
+        cachedFixtureChannel.maxValue = this.getMaxValueByChannel(cachedFixtureChannel.channel);
+        cachedFixtureChannel.colorWheel = this.getColorWheelByChannel(cachedFixtureChannel, profile);
+        channels.push(cachedFixtureChannel);
+    }
+    alphanumericSort(a, b) {
+        return a.localeCompare(b, undefined, { numeric: true, sensitivity: 'base' });
+    }
+    getPixelKeysInOrder(profile, repeatFor) {
+        let result = [];
+        // could contain just a single string (e.g. 'eachPixelABC') or
+        if (repeatFor.length > 1) {
+            // an array of pixel (groups)
+            result = repeatFor;
+        }
+        else if (repeatFor[0] === 'eachPixelABC') {
+            // Gets computed into an alphanumerically sorted list of all pixelKeys
+            if (profile.matrix.pixelCount.length === 3) {
+                for (let x = 0; x < profile.matrix.pixelCount[0]; x++) {
+                    for (let y = 0; y < profile.matrix.pixelCount[1]; y++) {
+                        for (let z = 0; z < profile.matrix.pixelCount[2]; z++) {
+                            result.push('Pixel ' + (x + 1) + '-' + (y + 1) + '-' + (z + 1));
+                        }
+                    }
+                }
+            }
+            else {
+                for (let pixelKeyX of profile.matrix.pixelKeys) {
+                    for (let pixelKeyY of pixelKeyX) {
+                        for (let pixelKeyZ of pixelKeyY) {
+                            if (pixelKeyZ) {
+                                result.push(pixelKeyZ);
+                            }
+                        }
+                    }
+                }
+            }
+            result.sort(this.alphanumericSort);
+        }
+        else if (repeatFor[0] === 'eachPixelGroup') {
+            // Gets computed into an array of all pixel group keys, ordered by appearance in the JSON file
+            for (const property of Object.keys(profile.matrix.pixelGroups)) {
+                result.push(property);
+            }
+        }
+        else if (repeatFor[0] === 'eachPixelXYZ') {
+            for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                    for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                        const pixel = profile.matrix.pixelKeys[x][y][z];
+                        if (pixel) {
+                            result.push(pixel);
+                        }
+                    }
+                }
+            }
+        }
+        else if (repeatFor[0] === 'eachPixelXZY') {
+            for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                for (let z = 0; z < profile.matrix.pixelKeys[x][0].length; z++) {
+                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                        const pixel = profile.matrix.pixelKeys[x][y][z];
+                        if (pixel) {
+                            result.push(pixel);
+                        }
+                    }
+                }
+            }
+        }
+        else if (repeatFor[0] === 'eachPixelYXZ') {
+            for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                    for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                        const pixel = profile.matrix.pixelKeys[x][y][z];
+                        if (pixel) {
+                            result.push(pixel);
+                        }
+                    }
+                }
+            }
+        }
+        else if (repeatFor[0] === 'eachPixelYZX') {
+            for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                for (let z = 0; z < profile.matrix.pixelKeys[0][y].length; z++) {
+                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                        const pixel = profile.matrix.pixelKeys[x][y][z];
+                        if (pixel) {
+                            result.push(pixel);
+                        }
+                    }
+                }
+            }
+        }
+        else if (repeatFor[0] === 'eachPixelZXY') {
+            for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
+                for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                    for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                        const pixel = profile.matrix.pixelKeys[x][y][z];
+                        if (pixel) {
+                            result.push(pixel);
+                        }
+                    }
+                }
+            }
+        }
+        else if (repeatFor[0] === 'eachPixelZYX') {
+            for (let z = 0; z < profile.matrix.pixelKeys[0][0].length; z++) {
+                for (let y = 0; y < profile.matrix.pixelKeys[0].length; y++) {
+                    for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                        const pixel = profile.matrix.pixelKeys[x][y][z];
+                        if (pixel) {
+                            result.push(pixel);
+                        }
+                    }
+                }
+            }
+        }
+        return result;
+    }
+    getModeChannelCount(profile, mode) {
+        let count = 0;
+        // already calculated?
+        if (mode.channelCount) {
+            return mode.channelCount;
+        }
+        for (let channel of mode.channels) {
+            if (channel.insert === 'matrixChannels') {
+                if (channel.repeatFor.length > 1) {
+                    count += channel.repeatFor.length * channel.templateChannels.length;
+                }
+                else if (channel.repeatFor[0] === 'eachPixelGroup') {
+                    count += profile.matrix.pixelGroups.length * channel.templateChannels.length;
+                }
+                else if (channel.repeatFor[0].startsWith('eachPixel')) {
+                    if (profile.matrix.pixelCount.length === 3) {
+                        count +=
+                            profile.matrix.pixelCount[0] * profile.matrix.pixelCount[1] * profile.matrix.pixelCount[2] * channel.templateChannels.length;
+                    }
+                    else {
+                        for (let x = 0; x < profile.matrix.pixelKeys.length; x++) {
+                            for (let y = 0; y < profile.matrix.pixelKeys[x].length; y++) {
+                                for (let z = 0; z < profile.matrix.pixelKeys[x][y].length; z++) {
+                                    const pixel = profile.matrix.pixelKeys[x][y][z];
+                                    if (pixel) {
+                                        count += channel.templateChannels.length;
+                                    }
+                                }
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                count++;
+            }
+        }
+        mode.channelCount = count;
+        return mode.channelCount;
+    }
+    getCachedChannels(profile, mode, pixelKey) {
         const channels = [];
         if (!mode) {
             return channels;
         }
-        for (const availableChannelName of Object.keys(profile.availableChannels)) {
-            const availableChannel = profile.availableChannels[availableChannelName];
-            for (const channel of mode.channels) {
-                // check for string channel. It can get creepy for matrix modes
-                if (typeof channel === 'string') {
-                    const modeChannel = channel;
+        for (const channel of mode.channels) {
+            if (channel.name && !pixelKey) {
+                // direct reference to a channel
+                for (const availableChannelName of Object.keys(profile.availableChannels)) {
                     // don't check the fine channels. only add the coarse channel.
-                    if (modeChannel === availableChannelName) {
-                        const cachedFixtureChannel = new CachedFixtureChannel();
-                        cachedFixtureChannel.channel = availableChannel;
-                        cachedFixtureChannel.name = availableChannelName;
-                        cachedFixtureChannel.capabilities = this.getCapabilitiesByChannel(cachedFixtureChannel.channel, availableChannelName, profile);
-                        const defaultValue = this.getDefaultValueByChannel(cachedFixtureChannel.channel);
-                        if (defaultValue) {
-                            cachedFixtureChannel.defaultValue = defaultValue;
+                    if (channel.name === availableChannelName) {
+                        const availableChannel = profile.availableChannels[availableChannelName];
+                        this.addCachedChannel(channels, availableChannel, availableChannelName, null, profile);
+                    }
+                }
+            }
+            else {
+                // reference a channel through a pixel matrix
+                const availablePixelKeys = this.getPixelKeysInOrder(profile, channel.repeatFor);
+                if (channel.channelOrder === 'perPixel') {
+                    // each channel for each pixel
+                    for (const availablePixelKey of availablePixelKeys) {
+                        if (availablePixelKey === pixelKey) {
+                            for (const modeTemplateChannelName of channel.templateChannels) {
+                                for (const templateChannelName of Object.keys(profile.templateChannels)) {
+                                    // don't check the fine channels. only add the coarse channel.
+                                    if (modeTemplateChannelName === templateChannelName) {
+                                        const templateChannel = profile.templateChannels[templateChannelName];
+                                        this.addCachedChannel(channels, templateChannel, templateChannelName, availablePixelKey, profile);
+                                    }
+                                }
+                            }
                         }
-                        cachedFixtureChannel.maxValue = this.getMaxValueByChannel(cachedFixtureChannel.channel);
-                        cachedFixtureChannel.colorWheel = this.getColorWheelByChannel(cachedFixtureChannel, profile);
-                        channels.push(cachedFixtureChannel);
                     }
                 }
-                else {
-                    // null may be passed as a placeholder for an undefined channel
-                    channels.push(new CachedFixtureChannel());
+                else if (channel.channelOrder === 'perChannel') {
+                    // each pixel for each channel
+                    for (const modeTemplateChannelName of channel.templateChannels) {
+                        for (const availablePixelKey of availablePixelKeys) {
+                            if (availablePixelKey === pixelKey) {
+                                for (const templateChannelName of Object.keys(profile.templateChannels)) {
+                                    // don't check the fine channels. only add the coarse channel.
+                                    if (modeTemplateChannelName === templateChannelName) {
+                                        const templateChannel = profile.templateChannels[templateChannelName];
+                                        this.addCachedChannel(channels, templateChannel, templateChannelName, availablePixelKey, profile);
+                                    }
+                                }
+                            }
+                        }
+                    }
                 }
             }
         }
         return channels;
     }
+    fixtureGetUniquePixelKeys(fixture) {
+        let pixelKeys = new Set();
+        let profile = this.getProfileByUuid(fixture.profileUuid);
+        let mode = this.getModeByFixture(profile, fixture);
+        // add the unique pixel keys
+        for (let channel of mode.channels) {
+            this.getPixelKeysInOrder(profile, channel.repeatFor).forEach((str) => pixelKeys.add(str));
+        }
+        return Array.from(pixelKeys);
+    }
     updateCachedFixtures() {
         // calculate some frequently used values as a cache to save cpu time
         // afterwards
         this.cachedFixtures = [];
         for (const fixture of this.projectService.project.fixtures) {
-            const cachedFixture = new CachedFixture();
-            cachedFixture.fixture = fixture;
-            cachedFixture.profile = this.getProfileByUuid(fixture.profileUuid);
-            cachedFixture.mode = this.getModeByFixture(cachedFixture.profile, fixture);
-            cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode);
-            this.cachedFixtures.push(cachedFixture);
+            const pixelKeys = this.fixtureGetUniquePixelKeys(fixture);
+            if (pixelKeys.length > 0) {
+                for (let pixelKey of pixelKeys) {
+                    const cachedFixture = new CachedFixture();
+                    cachedFixture.fixture = fixture;
+                    cachedFixture.pixelKey = pixelKey;
+                    cachedFixture.profile = this.getProfileByUuid(fixture.profileUuid);
+                    cachedFixture.mode = this.getModeByFixture(cachedFixture.profile, fixture);
+                    cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, pixelKey);
+                    this.cachedFixtures.push(cachedFixture);
+                }
+            }
+            else {
+                const cachedFixture = new CachedFixture();
+                cachedFixture.fixture = fixture;
+                cachedFixture.profile = this.getProfileByUuid(fixture.profileUuid);
+                cachedFixture.mode = this.getModeByFixture(cachedFixture.profile, fixture);
+                cachedFixture.channels = this.getCachedChannels(cachedFixture.profile, cachedFixture.mode, null);
+                this.cachedFixtures.push(cachedFixture);
+            }
         }
     }
     capabilitiesMatch(type1, type2, color1, color2, wheel1, wheel2, profileUuid1, profileUuid2) {
@@ -1207,11 +1554,13 @@ class FixtureService {
         for (let i = 0; i < 512; i++) {
             let occupiedChannels = 0;
             for (const fixture of fixturePool) {
+                const profile = this.getProfileByUuid(fixture.profileUuid);
                 const mode = this.getModeByFixture(this.getProfileByUuid(fixture.profileUuid), fixture);
-                if (i >= fixture.dmxFirstChannel && i < fixture.dmxFirstChannel + mode.channels.length) {
+                const channelCount = this.getModeChannelCount(profile, mode);
+                if (i >= fixture.dmxFirstChannel && i < fixture.dmxFirstChannel + channelCount) {
                     // this channel is already occupied by a fixture -> move forward to the end of the fixture
-                    if (mode.channels.length > occupiedChannels) {
-                        occupiedChannels = mode.channels.length - (i - fixture.dmxFirstChannel);
+                    if (channelCount > occupiedChannels) {
+                        occupiedChannels = channelCount - (i - fixture.dmxFirstChannel);
                     }
                 }
             }
@@ -1252,8 +1601,9 @@ class FixtureService {
         else {
             fixture.modeShortName = profile.modes[0].shortName || profile.modes[0].name;
         }
-        const mode = this.getModeByFixture(this.getProfileByUuid(fixture.profileUuid), fixture);
-        const firstChannel = this.getNextFreeDmxChannel(fixturePool, mode.channels.length);
+        const mode = this.getModeByFixture(profile, fixture);
+        const channelCount = this.getModeChannelCount(profile, mode);
+        const firstChannel = this.getNextFreeDmxChannel(fixturePool, channelCount);
         if (firstChannel >= 0) {
             fixture.dmxFirstChannel = firstChannel;
             fixturePool.push(fixture);
@@ -1268,7 +1618,7 @@ class FixtureService {
             });
         }
     }
-    static { this.ɵfac = function FixtureService_Factory(t) { return new (t || FixtureService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i2.TranslateService), i0.ɵɵinject(i3.ToastrService), i0.ɵɵinject(UuidService)); }; }
+    static { this.ɵfac = function FixtureService_Factory(t) { return new (t || FixtureService)(i0.ɵɵinject(i1.HttpClient), i0.ɵɵinject(ProjectService), i0.ɵɵinject(i2.TranslateService), i0.ɵɵinject(i3$1.ToastrService), i0.ɵɵinject(UuidService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: FixtureService, factory: FixtureService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureService, [{
@@ -1276,7 +1626,7 @@ class FixtureService {
         args: [{
                 providedIn: 'root',
             }]
-    }], () => [{ type: i1.HttpClient }, { type: ProjectService }, { type: i2.TranslateService }, { type: i3.ToastrService }, { type: UuidService }], null); })();
+    }], () => [{ type: i1.HttpClient }, { type: ProjectService }, { type: i2.TranslateService }, { type: i3$1.ToastrService }, { type: UuidService }], null); })();
 
 class PreviewMeshService {
     constructor() {
@@ -1364,6 +1714,7 @@ class ConfigService {
         this.localProfiles = false;
         this.intro = false;
         this.uniqueProjectNames = false;
+        this.dropzoneChunking = true;
         this.menuHeightChanged = new Subject();
     }
     static { this.ɵfac = function ConfigService_Factory(t) { return new (t || ConfigService)(); }; }
@@ -1415,7 +1766,15 @@ class PresetService {
             }
         }
     }
-    fixtureIsSelected(fixture, preset) {
+    getPresetFixture(preset, fixtureUuid, pixelKey) {
+        for (const fixture of preset.fixtures) {
+            if (fixture.fixtureUuid === fixtureUuid && ((!fixture.pixelKey && !pixelKey) || fixture.pixelKey === pixelKey)) {
+                return fixture;
+            }
+        }
+        return null;
+    }
+    fixtureIsSelected(fixture, pixelKey, preset) {
         // is the passed fixture selected in the passed/currently selected preset?
         if (!preset) {
             if (this.selectedPreset) {
@@ -1425,31 +1784,37 @@ class PresetService {
                 return false;
             }
         }
-        for (const selectedFixtureUuid of preset.fixtureUuids) {
-            if (selectedFixtureUuid === fixture.uuid) {
-                return true;
-            }
+        const presetFixture = this.getPresetFixture(preset, fixture.uuid, pixelKey);
+        if (presetFixture) {
+            return true;
         }
         return false;
     }
-    switchFixtureSelection(fixture) {
+    switchFixtureSelection(fixture, pixelKey) {
         if (!this.selectedPreset) {
             return;
         }
         // select all fixtures at the specified start channel or unselect them,
         // if already selected
-        if (this.fixtureIsSelected(fixture)) {
-            for (let i = this.selectedPreset.fixtureUuids.length - 1; i >= 0; i--) {
-                const projectFixture = this.fixtureService.getFixtureByUuid(this.selectedPreset.fixtureUuids[i]);
-                if (projectFixture.dmxFirstChannel === fixture.dmxFirstChannel) {
-                    this.selectedPreset.fixtureUuids.splice(i, 1);
+        if (this.fixtureIsSelected(fixture, pixelKey)) {
+            for (let i = this.selectedPreset.fixtures.length - 1; i >= 0; i--) {
+                const projectFixture = this.fixtureService.getFixtureByUuid(this.selectedPreset.fixtures[i].fixtureUuid);
+                if (projectFixture.dmxFirstChannel === fixture.dmxFirstChannel &&
+                    ((!this.selectedPreset.fixtures[i].pixelKey && !pixelKey) || this.selectedPreset.fixtures[i].pixelKey === pixelKey)) {
+                    this.selectedPreset.fixtures.splice(i, 1);
                 }
             }
         }
         else {
-            for (const projectFixture of this.projectService.project.fixtures) {
-                if (projectFixture.dmxFirstChannel === fixture.dmxFirstChannel) {
-                    this.selectedPreset.fixtureUuids.push(projectFixture.uuid);
+            for (const projectPresetFixture of this.projectService.project.presetFixtures) {
+                if ((!projectPresetFixture.pixelKey && !pixelKey) || projectPresetFixture.pixelKey === pixelKey) {
+                    const projectFixture = this.fixtureService.getFixtureByUuid(projectPresetFixture.fixtureUuid);
+                    if (projectFixture.dmxFirstChannel === fixture.dmxFirstChannel) {
+                        const presetFixture = new PresetFixture();
+                        presetFixture.fixtureUuid = projectPresetFixture.fixtureUuid;
+                        presetFixture.pixelKey = pixelKey;
+                        this.selectedPreset.fixtures.push(presetFixture);
+                    }
                 }
             }
         }
@@ -1459,8 +1824,23 @@ class PresetService {
             return;
         }
         for (const fixture of this.projectService.project.fixtures) {
-            if (!this.fixtureIsSelected(fixture)) {
-                this.selectedPreset.fixtureUuids.push(fixture.uuid);
+            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+            if (pixelKeys.length > 0) {
+                for (const pixelKey of pixelKeys) {
+                    if (!this.fixtureIsSelected(fixture, pixelKey)) {
+                        const presetFixture = new PresetFixture();
+                        presetFixture.fixtureUuid = fixture.uuid;
+                        presetFixture.pixelKey = pixelKey;
+                        this.selectedPreset.fixtures.push(presetFixture);
+                    }
+                }
+            }
+            else {
+                if (!this.fixtureIsSelected(fixture, null)) {
+                    const presetFixture = new PresetFixture();
+                    presetFixture.fixtureUuid = fixture.uuid;
+                    this.selectedPreset.fixtures.push(presetFixture);
+                }
             }
         }
     }
@@ -1468,16 +1848,16 @@ class PresetService {
         if (!this.selectedPreset) {
             return;
         }
-        this.selectedPreset.fixtureUuids = [];
+        this.selectedPreset.fixtures = [];
     }
     removeDeletedFixtures() {
         // after changing the configuration in the fixture pool, we might need to
         // delete some fixtures
         for (const preset of this.projectService.project.presets) {
-            for (let i = preset.fixtureUuids.length - 1; i >= 0; i--) {
-                const presetFixture = this.fixtureService.getFixtureByUuid(preset.fixtureUuids[i]);
+            for (let i = preset.fixtures.length - 1; i >= 0; i--) {
+                const presetFixture = this.fixtureService.getFixtureByUuid(preset.fixtures[i].fixtureUuid);
                 if (!presetFixture) {
-                    preset.fixtureUuids.splice(i, 1);
+                    preset.fixtures.splice(i, 1);
                 }
             }
         }
@@ -1486,11 +1866,15 @@ class PresetService {
         // after changing the configuration in the fixture pool, we might need to
         // select some more fixtures on the same channel as already selected ones
         for (const preset of this.projectService.project.presets) {
-            for (let i = preset.fixtureUuids.length - 1; i >= 0; i--) {
-                const presetFixture = this.fixtureService.getFixtureByUuid(preset.fixtureUuids[i]);
+            for (let presetFixture of preset.fixtures) {
+                const fixture = this.fixtureService.getFixtureByUuid(presetFixture.fixtureUuid);
                 for (const projectFixture of this.projectService.project.fixtures) {
-                    if (projectFixture.dmxFirstChannel === presetFixture.dmxFirstChannel && !this.fixtureIsSelected(projectFixture, preset)) {
-                        preset.fixtureUuids.push(projectFixture.uuid);
+                    if (projectFixture.dmxFirstChannel === fixture.dmxFirstChannel &&
+                        !this.fixtureIsSelected(projectFixture, presetFixture.pixelKey, preset)) {
+                        const newPresetFixture = new PresetFixture();
+                        newPresetFixture.fixtureUuid = projectFixture.uuid;
+                        newPresetFixture.pixelKey = presetFixture.pixelKey;
+                        preset.fixtures.push(newPresetFixture);
                     }
                 }
             }
@@ -1592,8 +1976,8 @@ class PresetService {
     }
     hasCapabilityType(type) {
         // there is at least one channel with at least one intensity capability
-        for (const fixtureUuid of this.selectedPreset.fixtureUuids) {
-            const fixture = this.fixtureService.getCachedFixtureByUuid(fixtureUuid);
+        for (const projectFixture of this.selectedPreset.fixtures) {
+            const fixture = this.fixtureService.getCachedFixtureByUuid(projectFixture.fixtureUuid, projectFixture.pixelKey);
             for (const channel of fixture.channels) {
                 if (channel.channel) {
                     for (const capability of channel.capabilities) {
@@ -1624,8 +2008,8 @@ class PresetService {
             return true;
         }
         // a color wheel is involved
-        for (const fixtureUuid of this.selectedPreset.fixtureUuids) {
-            const fixture = this.fixtureService.getCachedFixtureByUuid(fixtureUuid);
+        for (const projectFixture of this.selectedPreset.fixtures) {
+            const fixture = this.fixtureService.getCachedFixtureByUuid(projectFixture.fixtureUuid, projectFixture.pixelKey);
             for (const channel of fixture.channels) {
                 if (channel.colorWheel) {
                     return true;
@@ -1678,13 +2062,14 @@ class PresetService {
         this.projectService.project.presets.splice(highestSelectedPresetIndex, 0, preset);
         this.selectPreset(highestSelectedPresetIndex);
     }
+    // return all fixture profiles used in the current preset selection
     getSelectedProfiles() {
         const profiles = [];
         if (!this.selectedPreset) {
             return profiles;
         }
-        for (const fixtureUuid of this.selectedPreset.fixtureUuids) {
-            const fixture = this.fixtureService.getFixtureByUuid(fixtureUuid);
+        for (const presetFixture of this.selectedPreset.fixtures) {
+            const fixture = this.fixtureService.getFixtureByUuid(presetFixture.fixtureUuid);
             const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
             if (profiles.indexOf(profile) < 0) {
                 profiles.push(profile);
@@ -1692,24 +2077,38 @@ class PresetService {
         }
         return profiles;
     }
+    // given a list of fixture profiles, return all available channels based on the currently selected fixtures in the preset
     getSelectedProfileChannels(selectedProfiles) {
-        const availableChannels = new Map();
         const calculatedProfileModes = new Map();
+        const availableChannels = new Map();
+        // calculate all modes for each profile
         for (const profile of selectedProfiles) {
-            const modes = [];
-            for (const fixtureUuid of this.selectedPreset.fixtureUuids) {
-                const fixture = this.fixtureService.getCachedFixtureByUuid(fixtureUuid);
-                if (modes.indexOf(fixture.mode) < 0) {
-                    modes.push(fixture.mode);
+            const modeAndPixelKeys = [];
+            // loop over the project fixtures to keep the order
+            for (let projectFixture of this.projectService.project.presetFixtures) {
+                for (const presetFixture of this.selectedPreset.fixtures) {
+                    if (projectFixture.fixtureUuid === presetFixture.fixtureUuid &&
+                        ((!projectFixture.pixelKey && !presetFixture.pixelKey) || projectFixture.pixelKey === presetFixture.pixelKey)) {
+                        const fixture = this.fixtureService.getCachedFixtureByUuid(presetFixture.fixtureUuid, presetFixture.pixelKey);
+                        if (fixture.profile.uuid === profile.uuid) {
+                            const exists = modeAndPixelKeys.some((item) => (item.mode === fixture.mode && !item.pixelKey && !fixture.pixelKey) || item.pixelKey === fixture.pixelKey);
+                            if (!exists) {
+                                modeAndPixelKeys.push({
+                                    mode: fixture.mode,
+                                    pixelKey: presetFixture.pixelKey,
+                                });
+                            }
+                        }
+                    }
                 }
+                calculatedProfileModes.set(profile, modeAndPixelKeys);
             }
-            calculatedProfileModes.set(profile, modes);
         }
-        // calculate all required channels from the modes
-        calculatedProfileModes.forEach((modes, profile) => {
+        // calculate all channels from the modes
+        calculatedProfileModes.forEach((modeAndPixelKeys, profile) => {
             const profileChannels = [];
-            for (const mode of modes) {
-                const channels = this.fixtureService.getCachedChannels(profile, mode);
+            for (const modeAndPixelKey of modeAndPixelKeys) {
+                const channels = this.fixtureService.getCachedChannels(profile, modeAndPixelKey.mode, modeAndPixelKey.pixelKey);
                 for (const channel of channels) {
                     // only add the channel, if no channel with the same name has already been added
                     // (e.g. a fine channel)
@@ -2624,34 +3023,12 @@ class TimelineService {
             }]
     }], () => [{ type: SceneService }, { type: PresetService }, { type: ProjectService }, { type: i1.HttpClient }, { type: ConfigService }], null); })();
 
-class UniverseService {
-    constructor() {
-        this.universes = [];
-    }
-    getUniverseByUuid(uuid) {
-        for (const universe of this.universes) {
-            if (universe.uuid === uuid) {
-                return universe;
-            }
-        }
-    }
-    static { this.ɵfac = function UniverseService_Factory(t) { return new (t || UniverseService)(); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: UniverseService, factory: UniverseService.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UniverseService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root',
-            }]
-    }], () => [], null); })();
-
 class PreviewService {
-    constructor(presetService, fixtureService, sceneService, timelineService, universeService, projectService) {
+    constructor(presetService, fixtureService, sceneService, timelineService, projectService) {
         this.presetService = presetService;
         this.fixtureService = fixtureService;
         this.sceneService = sceneService;
         this.timelineService = timelineService;
-        this.universeService = universeService;
         this.projectService = projectService;
         this.doUpdateFixtureSetup = new Subject();
         this.stageMeshes = [];
@@ -2740,27 +3117,32 @@ class PreviewService {
         existingChannelValues.push(fixtureChannelValue);
     }
     // Get the fixture index inside the passed preset (used for chasing)
-    getFixtureIndex(preset, fixtureUuid) {
+    getFixtureIndex(preset, fixtureUuid, pixelKey) {
         let index = 0;
-        const countedDmxChannels = [];
+        const countedFirstDmxChannelPixelKey = [];
         // Loop over the global fixtures to retain the order
-        for (const fixture of this.projectService.project.fixtures) {
-            for (const presetFixtureUuid of preset.fixtureUuids) {
-                if (presetFixtureUuid === fixture.uuid) {
-                    if (fixture.uuid === fixtureUuid) {
-                        return index;
-                    }
-                    // don't count fixtures on the same channel as already counted ones
-                    if (!countedDmxChannels.includes(fixture.dmxFirstChannel)) {
-                        countedDmxChannels.push(fixture.dmxFirstChannel);
-                        index++;
-                    }
-                    break;
-                }
+        for (const projectFixture of this.projectService.project.presetFixtures) {
+            const presetFixture = this.presetService.getPresetFixture(preset, fixtureUuid, pixelKey);
+            if (!presetFixture) {
+                // Not found in the preset
+                return undefined;
+            }
+            if (projectFixture.fixtureUuid === fixtureUuid && ((!projectFixture.pixelKey && !pixelKey) || projectFixture.pixelKey === pixelKey)) {
+                return index;
+            }
+            const fixture = this.fixtureService.getFixtureByUuid(projectFixture.fixtureUuid);
+            const firstDmxChannelAndFixtureUuid = {
+                firstDmxChannel: fixture.dmxFirstChannel,
+                pixelKey: projectFixture.pixelKey,
+            };
+            const exists = countedFirstDmxChannelPixelKey.some((item) => item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
+                ((!item.pixelKey && !firstDmxChannelAndFixtureUuid.pixelKey) || item.pixelKey === firstDmxChannelAndFixtureUuid.pixelKey));
+            // don't count fixtures on the same channel as already counted ones
+            if (!exists) {
+                index++;
+                countedFirstDmxChannelPixelKey.push(firstDmxChannelAndFixtureUuid);
             }
         }
-        // Not found in the preset
-        return undefined;
     }
     getPresetIntensity(preset, timeMillis) {
         // When fading is in progress (on preset or scene-level), the current preset does not
@@ -2951,7 +3333,7 @@ class PreviewService {
     }
     // return all fixture uuids with their corresponding channel values
     getChannelValues(timeMillis, presets) {
-        // Loop over all relevant presets and calc the property values from the presets (capabilities and effects)
+        // Loop over all relevant presets and calc the property values from the presets (capabilities, channels and effects)
         const calculatedFixtures = new Map();
         for (let i = 0; i < this.fixtureService.cachedFixtures.length; i++) {
             const cachedFixture = this.fixtureService.cachedFixtures[i];
@@ -2977,7 +3359,7 @@ class PreviewService {
                 }
                 for (const preset of presets) {
                     // search for this fixture in the preset and get it's preset-specific index (for chasing effects)
-                    const fixtureIndex = this.getFixtureIndex(preset.preset, cachedFixture.fixture.uuid);
+                    const fixtureIndex = this.getFixtureIndex(preset.preset, cachedFixture.fixture.uuid, cachedFixture.pixelKey);
                     if (fixtureIndex >= 0) {
                         // this fixture is also in the preset -> mix the required values (overwrite existing values,
                         // if set multiple times)
@@ -2996,45 +3378,44 @@ class PreviewService {
     setUniverseValues(fixtures, masterDimmerValue) {
         // TODO only, if monitoring is enabled
         return;
-        // Reset all DMX universes
-        for (const universe of this.universeService.universes) {
-            universe.channelValues = [];
-            for (let i = 0; i < 512; i++) {
-                universe.channelValues.push(0);
-            }
-        }
-        // loop over each fixture
-        fixtures.forEach((channelValues, cachedFixture) => {
-            // TODO Get the correct universe for this fixture
-            const universe = this.universeService.getUniverseByUuid(cachedFixture.fixture.dmxUniverseUuid);
-            // loop over each channel for this fixture
-            for (let channelIndex = 0; channelIndex < cachedFixture.mode.channels.length; channelIndex++) {
-                const channelObj = cachedFixture.mode.channels[channelIndex];
-                if (typeof channelObj === 'string') {
-                    const channelName = channelObj;
-                    // match this mode channel with a channel value
-                    for (const channelValue of channelValues) {
-                        const channel = this.fixtureService.getChannelByName(cachedFixture, channelName);
-                        if (channel && channel.channel) {
-                            const fineIndex = channel.channel.fineChannelAliases.indexOf(channelName);
-                            if (channel.name === channelValue.channelName || fineIndex > -1) {
-                                const universeChannel = cachedFixture.fixture.dmxFirstChannel + channelIndex;
-                                const dmxValue = Math.floor(channelValue.value / Math.pow(256, channel.channel.fineChannelAliases.length - (fineIndex + 1))) % 256;
-                                // TODO
-                                break;
-                            }
-                        }
-                    }
-                }
-            }
-        });
+        // // Reset all DMX universes
+        // for (const universe of this.universeService.universes) {
+        //   universe.channelValues = [];
+        //   for (let i = 0; i < 512; i++) {
+        //     universe.channelValues.push(0);
+        //   }
+        // }
+        // // loop over each fixture
+        // fixtures.forEach((channelValues: FixtureChannelValue[], cachedFixture: CachedFixture) => {
+        //   // TODO Get the correct universe for this fixture
+        //   const universe: Universe = this.universeService.getUniverseByUuid(cachedFixture.fixture.dmxUniverseUuid);
+        //   // loop over each channel for this fixture
+        //   for (let channelIndex = 0; channelIndex < cachedFixture.mode.channels.length; channelIndex++) {
+        //     const channelObj = cachedFixture.mode.channels[channelIndex];
+        //     if (typeof channelObj === 'string') {
+        //       const channelName = channelObj;
+        //       // match this mode channel with a channel value
+        //       for (const channelValue of channelValues) {
+        //         const channel = this.fixtureService.getChannelByName(cachedFixture, channelName);
+        //         if (channel && channel.channel) {
+        //           const fineIndex = channel.channel.fineChannelAliases.indexOf(channelName);
+        //           if (channel.name === channelValue.channelName || fineIndex > -1) {
+        //             const universeChannel = cachedFixture.fixture.dmxFirstChannel + channelIndex;
+        //             const dmxValue =
+        //               Math.floor(channelValue.value / Math.pow(256, channel.channel.fineChannelAliases.length - (fineIndex + 1))) % 256;
+        //             // TODO
+        //             break;
+        //           }
+        //         }
+        //       }
+        //     }
+        //   }
+        // });
     }
-    fixtureIsSelected(uuid, presets) {
+    fixtureIsSelected(uuid, pixelKey, presets) {
         for (const preset of presets) {
-            for (const fixtureUuid of preset.preset.fixtureUuids) {
-                if (fixtureUuid === uuid) {
-                    return true;
-                }
+            if (this.presetService.getPresetFixture(preset.preset, uuid, pixelKey)) {
+                return true;
             }
         }
         return false;
@@ -3111,7 +3492,7 @@ class PreviewService {
         this.scene.add(mesh);
         this.stageMeshes.push(mesh);
     }
-    static { this.ɵfac = function PreviewService_Factory(t) { return new (t || PreviewService)(i0.ɵɵinject(PresetService), i0.ɵɵinject(FixtureService), i0.ɵɵinject(SceneService), i0.ɵɵinject(TimelineService), i0.ɵɵinject(UniverseService), i0.ɵɵinject(ProjectService)); }; }
+    static { this.ɵfac = function PreviewService_Factory(t) { return new (t || PreviewService)(i0.ɵɵinject(PresetService), i0.ɵɵinject(FixtureService), i0.ɵɵinject(SceneService), i0.ɵɵinject(TimelineService), i0.ɵɵinject(ProjectService)); }; }
     static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: PreviewService, factory: PreviewService.ɵfac, providedIn: 'root' }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PreviewService, [{
@@ -3119,11 +3500,13 @@ class PreviewService {
         args: [{
                 providedIn: 'root',
             }]
-    }], () => [{ type: PresetService }, { type: FixtureService }, { type: SceneService }, { type: TimelineService }, { type: UniverseService }, { type: ProjectService }], null); })();
+    }], () => [{ type: PresetService }, { type: FixtureService }, { type: SceneService }, { type: TimelineService }, { type: ProjectService }], null); })();
 
 class Fixture3d {
     constructor(fixtureService, fixture, scene) {
         this.fixtureService = fixtureService;
+        this.pointLightMaxIntensity = 2;
+        this.spotLightLightMaxIntensity = 10;
         this.fixtureHasDimmer = false;
         this.fixtureHasColorWheel = false;
         this.fixtureHasColor = false;
@@ -3156,19 +3539,42 @@ class Fixture3d {
             }
         }
     }
-    getCapabilityInValue(channel, value) {
-        for (const capability of channel.capabilities) {
-            if (capability.capability.dmxRange.length === 0 ||
-                (value >= capability.capability.dmxRange[0] && value <= capability.capability.dmxRange[1])) {
-                return capability;
-            }
-        }
-        return undefined;
-    }
-    // Apply the properties of the base fixture to the preview
-    updatePreview(channelValues, masterDimmerValue) {
-        // Apply default settings
-        if (this.fixtureHasDimmer) {
+    createObjects() {
+        // Add the spotlight
+        this.spotLight = new THREE.SpotLight(0xffffff, 50000);
+        this.spotLight.angle = 2;
+        this.spotLight.penumbra = 1;
+        this.spotLight.decay = 0.01;
+        this.spotLight.distance = 0;
+        this.spotLight.intensity = 1;
+        this.spotLightHelper = new THREE.SpotLightHelper(this.spotLight);
+        this.scene.add(this.spotLightHelper);
+        const spotLightTarget = new THREE.Object3D();
+        this.spotLight.target = spotLightTarget;
+        this.spotlightGroup = new THREE.Object3D();
+        this.spotlightGroup.add(this.spotLight);
+        this.spotlightGroup.add(spotLightTarget);
+        this.spotLight.position.set(0, -1.4, 0);
+        spotLightTarget.position.set(0, -10, 0);
+        this.createSpotLightBeam();
+        // Add the point light for the surrounding light
+        this.pointLight = new THREE.PointLight(0xffffff, 500, 0, 0.1);
+        this.spotlightGroup.add(this.pointLight);
+        this.pointLight.position.set(0, -1.4, 0);
+    }
+    getCapabilityInValue(channel, value) {
+        for (const capability of channel.capabilities) {
+            if (capability.capability.dmxRange.length === 0 ||
+                (value >= capability.capability.dmxRange[0] && value <= capability.capability.dmxRange[1])) {
+                return capability;
+            }
+        }
+        return undefined;
+    }
+    // Apply the properties of the base fixture to the preview
+    updatePreview(channelValues, masterDimmerValue) {
+        // Apply default settings
+        if (this.fixtureHasDimmer) {
             this.dimmer = 0;
         }
         else {
@@ -3230,6 +3636,22 @@ class Fixture3d {
                 }
             }
         }
+        // Apply the colors and intensities
+        // Apply the dimmer value
+        // Take the color into account for the beam (don't show a black beam)
+        const color = new THREE.Color('rgb(' + this.colorRed + ', ' + this.colorGreen + ', ' + this.colorBlue + ')');
+        const intensityColor = Math.max(this.colorRed, this.colorGreen, this.colorBlue);
+        if (this.pointLight) {
+            this.pointLight.color = color;
+            this.pointLight.intensity = this.pointLightMaxIntensity * this.dimmer;
+        }
+        if (this.spotLight) {
+            this.spotLight.color = color;
+            this.spotLightBeam.material.uniforms.lightColor.value = color;
+            this.spotLightBeam.material.uniforms.opacity.value = Math.min(intensityColor, this.dimmer);
+            this.spotLight.intensity = this.spotLightLightMaxIntensity * this.dimmer;
+            this.spotLightBeam.material.uniforms.spotPosition.value = this.spotlightGroup.position;
+        }
     }
     updatePosition(object) {
         // Update the position
@@ -3263,62 +3685,66 @@ class Fixture3d {
             }
         }
     }
-    destroy() {
-        this.selectedMaterial.dispose();
-    }
-}
-
-class ColorChanger3d extends Fixture3d {
     atmosphereMat() {
-        const vertexShader = [
-            'varying vec3	vVertexWorldPosition;',
-            'varying vec3	vVertexNormal;',
-            'void main(){',
-            '	vVertexNormal = normalize(normalMatrix * normal);',
-            '	vVertexWorldPosition = (modelMatrix * vec4(position, 1.0)).xyz;',
-            '	// set gl_Position',
-            '	gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);',
-            '}',
-        ].join('\n');
-        const fragmentShader = [
-            'uniform vec3	glowColor;',
-            'uniform float	coeficient;',
-            'uniform float	power;',
-            'uniform float	opacity;',
-            'varying vec3	vVertexNormal;',
-            'varying vec3	vVertexWorldPosition;',
-            'void main(){',
-            '	vec3 worldCameraToVertex= vVertexWorldPosition - cameraPosition;',
-            '	vec3 viewCameraToVertex	= (viewMatrix * vec4(worldCameraToVertex, 0.0)).xyz;',
-            '	viewCameraToVertex	= normalize(viewCameraToVertex);',
-            '	float intensity		= pow(coeficient + dot(vVertexNormal, viewCameraToVertex), power);',
-            '	gl_FragColor		= vec4(glowColor, intensity * opacity);',
-            '}',
-        ].join('\n');
-        // create custom material from the shader code above
-        // that is within specially labeled script tags
+        const vertexShader = `
+      varying vec3 vNormal;
+      varying vec3 vWorldPosition;
+
+      void main(){
+        vNormal = normalize(normalMatrix * normal);
+
+        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
+        vWorldPosition = worldPosition.xyz;
+
+        gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);
+      }`;
+        const fragmentShader = `
+      varying vec3 vNormal;
+      varying vec3 vWorldPosition;
+
+      uniform vec3 lightColor;
+      uniform float	opacity;
+      uniform vec3 spotPosition;
+      uniform float attenuation;
+      uniform float	anglePower;
+
+      void main(){
+        float intensity;
+
+        intensity	= distance(vWorldPosition, spotPosition) / attenuation;
+        intensity	= 1.0 - clamp(intensity, 0.0, 1.0);
+
+        vec3 normal	= vec3(vNormal.x, vNormal.y, abs(vNormal.z));
+        float angleIntensity	= pow(dot(normal, vec3(0.0, 0.0, 1.0)), anglePower);
+        intensity	= intensity * angleIntensity * opacity;
+
+        gl_FragColor	= vec4(lightColor, intensity);
+      }`;
         const material = new THREE.ShaderMaterial({
             uniforms: {
-                coeficient: {
+                attenuation: {
                     type: 'f',
-                    value: 0.3,
+                    value: 800.0,
                 },
-                power: {
+                anglePower: {
                     type: 'f',
-                    value: 1.3,
+                    value: 2,
                 },
-                opacity: {
-                    type: 'f',
-                    value: 1.0,
+                spotPosition: {
+                    type: 'v3',
+                    value: new THREE.Vector3(0, 0, 0),
                 },
-                glowColor: {
+                lightColor: {
                     type: 'c',
                     value: new THREE.Color('white'),
                 },
+                opacity: {
+                    type: 'f',
+                    value: 1.0,
+                },
             },
             vertexShader,
             fragmentShader,
-            // blending: THREE.AdditiveBlending,
             transparent: true,
             depthWrite: false,
         });
@@ -3328,45 +3754,35 @@ class ColorChanger3d extends Fixture3d {
         if (this.spotLightBeam) {
             this.spotlightGroup.remove(this.spotLightBeam);
         }
-        // TODO update the correct angle from the profile
+        // TODO set the correct angle from the profile
         const beamAngleDegrees = 14;
-        const geometry = new THREE.CylinderGeometry(0.8, beamAngleDegrees * 1.2, 100, 64, 20, false);
+        const geometry = new THREE.CylinderGeometry(0.1, beamAngleDegrees * 1.2, 100, 64, 20, false);
         geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, -geometry.parameters.height / 2, 0));
         geometry.applyMatrix4(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
         this.atmosphereMaterial = this.atmosphereMat();
         this.spotLightBeam = new THREE.Mesh(geometry, this.atmosphereMaterial);
         this.spotLightBeam.position.set(0, -0.02, 0);
+        this.spotLightBeam.receiveShadow = false;
+        this.spotLightBeam.castShadow = false;
         this.spotlightGroup.add(this.spotLightBeam);
         this.spotLightBeam.rotation.x = Math.PI / 2;
     }
+    destroy() {
+        this.selectedMaterial.dispose();
+        this.atmosphereMaterial.dispose();
+    }
+}
+
+class ColorChanger3d extends Fixture3d {
     createObjects() {
+        super.createObjects();
         this.material = new THREE.MeshLambertMaterial({
             color: 0x0d0d0d,
             emissive: 0x0d0d0d,
         });
         this.mesh.material = this.material;
-        // Add the spotlight
-        this.spotLight = new THREE.SpotLight(0xffffff, 1);
-        this.spotLight.angle = 0.244;
-        this.spotLight.penumbra = 0.5;
-        this.spotLight.decay = 2;
-        this.spotLight.distance = 60000;
-        this.spotLight.castShadow = false;
-        this.spotLight.intensity = 10;
         this.spotLightHelper = new THREE.SpotLightHelper(this.spotLight);
         // scene.add(this.spotLightHelper);
-        const spotLightTarget = new THREE.Object3D();
-        this.spotLight.target = spotLightTarget;
-        this.spotlightGroup.add(this.spotLight);
-        this.spotlightGroup.add(spotLightTarget);
-        this.spotLight.position.set(0, -1.4, 0);
-        spotLightTarget.position.set(0, -10, 0);
-        // Add the point light for the surrounding light
-        this.pointLight = new THREE.PointLight(0xffffff, 2, 1000);
-        this.spotlightGroup.add(this.pointLight);
-        this.pointLight.position.set(0, -1.4, 0);
-        // Add the light beam
-        this.createSpotLightBeam();
         this.objectGroup.add(this.spotlightGroup);
         this.objectGroup.add(this.mesh);
         // A moving head has about 32 cm in width
@@ -3376,10 +3792,7 @@ class ColorChanger3d extends Fixture3d {
     }
     constructor(fixtureService, previewMeshService, fixture, scene) {
         super(fixtureService, fixture, scene);
-        this.pointLightMaxIntensity = 2;
-        this.spotLightMaxIntensity = 5;
         this.objectGroup = new THREE.Object3D();
-        this.spotlightGroup = new THREE.Object3D();
         forkJoin([previewMeshService.getMesh('color-changer')])
             .pipe(map(([colorChanger]) => {
             this.mesh = colorChanger;
@@ -3391,10 +3804,10 @@ class ColorChanger3d extends Fixture3d {
         return this.objectGroup;
     }
     updatePreview(channelValues, masterDimmerValue) {
-        super.updatePreview(channelValues, masterDimmerValue);
         if (!this.isLoaded) {
             return;
         }
+        super.updatePreview(channelValues, masterDimmerValue);
         this.updatePosition(this.objectGroup);
         // Update the material
         if (this.lastSelected !== this.isSelected) {
@@ -3411,110 +3824,18 @@ class ColorChanger3d extends Fixture3d {
             this.lastSelected = this.isSelected;
         }
         // Update the light helpers
-        this.spotLightHelper.update();
-        // Apply the colors
-        const color = new THREE.Color('rgb(' + this.colorRed + ', ' + this.colorGreen + ', ' + this.colorBlue + ')');
-        this.pointLight.color = color;
-        this.spotLight.color = color;
-        this.spotLightBeam.material.uniforms.glowColor.value = color;
-        // Apply the dimmer value
-        // Take the color into account for the beam (don't show a black beam)
-        const intensityColor = Math.max(this.colorRed, this.colorGreen, this.colorBlue);
-        this.spotLightBeam.material.uniforms.opacity.value = Math.min(intensityColor, this.dimmer) * 0.5;
-        this.spotLight.intensity = this.spotLightMaxIntensity * this.dimmer;
-        this.pointLight.intensity = this.pointLightMaxIntensity * this.dimmer;
+        // this.spotLightHelper.update();
     }
     destroy() {
         this.scene.remove(this.objectGroup);
         this.material.dispose();
-        this.atmosphereMaterial.dispose();
+        this.spotLightHelper.dispose();
     }
 }
 
 class MovingHead3d extends Fixture3d {
-    atmosphereMat() {
-        const vertexShader = `
-      varying vec3 vNormal;
-      varying vec3 vWorldPosition;
-
-      void main(){
-        vNormal = normalize(normalMatrix * normal);
-
-        vec4 worldPosition = modelMatrix * vec4(position, 1.0);
-        vWorldPosition = worldPosition.xyz;
-
-        gl_Position	= projectionMatrix * modelViewMatrix * vec4(position, 1.0);
-      }`;
-        const fragmentShader = `
-      varying vec3 vNormal;
-      varying vec3 vWorldPosition;
-
-      uniform vec3 lightColor;
-      uniform float	opacity;
-      uniform vec3 spotPosition;
-      uniform float attenuation;
-      uniform float	anglePower;
-
-      void main(){
-        float intensity;
-
-        intensity	= distance(vWorldPosition, spotPosition) / attenuation;
-        intensity	= 1.0 - clamp(intensity, 0.0, 1.0);
-
-        vec3 normal	= vec3(vNormal.x, vNormal.y, abs(vNormal.z));
-        float angleIntensity	= pow(dot(normal, vec3(0.0, 0.0, 1.0)), anglePower);
-        intensity	= intensity * angleIntensity * opacity;
-
-        gl_FragColor	= vec4(lightColor, intensity);
-      }`;
-        const material = new THREE.ShaderMaterial({
-            uniforms: {
-                attenuation: {
-                    type: 'f',
-                    value: 800.0,
-                },
-                anglePower: {
-                    type: 'f',
-                    value: 2,
-                },
-                spotPosition: {
-                    type: 'v3',
-                    value: new THREE.Vector3(0, 0, 0),
-                },
-                lightColor: {
-                    type: 'c',
-                    value: new THREE.Color('white'),
-                },
-                opacity: {
-                    type: 'f',
-                    value: 1.0,
-                },
-            },
-            vertexShader,
-            fragmentShader,
-            transparent: true,
-            depthWrite: false,
-        });
-        return material;
-    }
-    createSpotLightBeam() {
-        if (this.spotLightBeam) {
-            this.spotlightGroup.remove(this.spotLightBeam);
-        }
-        // TODO update the correct angle from the profile
-        const beamAngleDegrees = 14;
-        const geometry = new THREE.CylinderGeometry(0.1, beamAngleDegrees * 1.2, 100, 64, 20, false);
-        geometry.applyMatrix4(new THREE.Matrix4().makeTranslation(0, -geometry.parameters.height / 2, 0));
-        geometry.applyMatrix4(new THREE.Matrix4().makeRotationX(-Math.PI / 2));
-        this.atmosphereMaterial = this.atmosphereMat();
-        this.spotLightBeam = new THREE.Mesh(geometry, this.atmosphereMaterial);
-        this.spotLightBeam.position.set(0, -0.02, 0);
-        this.spotLightBeam.receiveShadow = false;
-        this.spotLightBeam.castShadow = false;
-        this.spotlightGroup.add(this.spotLightBeam);
-        this.spotLightBeam.rotation.x = Math.PI / 2;
-    }
     createObjects() {
+        super.createObjects();
         this.material = new THREE.MeshLambertMaterial({
             color: 0x0d0d0d,
             emissive: 0x0d0d0d,
@@ -3528,27 +3849,6 @@ class MovingHead3d extends Fixture3d {
         const headPivotGroup = new THREE.Object3D();
         headPivotGroup.add(this.head);
         this.headGroup.add(headPivotGroup);
-        // Add the spotlight
-        this.spotLight = new THREE.SpotLight(0xffffff, 50000);
-        this.spotLight.angle = 2;
-        this.spotLight.penumbra = 1;
-        this.spotLight.decay = 0.01;
-        this.spotLight.distance = 0;
-        this.spotLight.intensity = 1;
-        this.spotLightHelper = new THREE.SpotLightHelper(this.spotLight);
-        this.scene.add(this.spotLightHelper);
-        const spotLightTarget = new THREE.Object3D();
-        this.spotLight.target = spotLightTarget;
-        this.spotlightGroup.add(this.spotLight);
-        this.spotlightGroup.add(spotLightTarget);
-        this.spotLight.position.set(0, -1.4, 0);
-        spotLightTarget.position.set(0, -10, 0);
-        // Add the point light for the surrounding light
-        this.pointLight = new THREE.PointLight(0xffffff, 500, 0, 0.1);
-        this.spotlightGroup.add(this.pointLight);
-        this.pointLight.position.set(0, -1.4, 0);
-        // Add the light beam
-        this.createSpotLightBeam();
         this.headGroup.add(this.spotlightGroup);
         // Add the arm
         this.armGroup.add(this.headGroup);
@@ -3565,10 +3865,7 @@ class MovingHead3d extends Fixture3d {
     }
     constructor(fixtureService, previewMeshService, fixture, scene) {
         super(fixtureService, fixture, scene);
-        this.pointLightMaxIntensity = 2;
-        this.spotLightLightMaxIntensity = 10;
         this.headGroup = new THREE.Object3D();
-        this.spotlightGroup = new THREE.Object3D();
         this.armGroup = new THREE.Object3D();
         this.objectGroup = new THREE.Object3D();
         forkJoin([
@@ -3588,10 +3885,10 @@ class MovingHead3d extends Fixture3d {
         return this.objectGroup;
     }
     updatePreview(channelValues, masterDimmerValue) {
-        super.updatePreview(channelValues, masterDimmerValue);
         if (!this.isLoaded) {
             return;
         }
+        super.updatePreview(channelValues, masterDimmerValue);
         // Apply default settings
         let panStart = 0;
         let panEnd = 255;
@@ -3646,25 +3943,11 @@ class MovingHead3d extends Fixture3d {
             }
             this.lastSelected = this.isSelected;
         }
-        // Apply the colors
-        const color = new THREE.Color('rgb(' + this.colorRed + ', ' + this.colorGreen + ', ' + this.colorBlue + ')');
-        this.pointLight.color = color;
-        this.spotLight.color = color;
-        this.spotLightBeam.material.uniforms.lightColor.value = color;
-        // Apply the dimmer value
-        // Take the color into account for the beam (don't show a black beam)
-        const intensityColor = Math.max(this.colorRed, this.colorGreen, this.colorBlue);
-        // console.log(Math.min(intensityColor, this.dimmer));
-        this.spotLightBeam.material.uniforms.opacity.value = Math.min(intensityColor, this.dimmer);
-        this.spotLight.intensity = this.spotLightLightMaxIntensity * this.dimmer;
-        this.pointLight.intensity = this.pointLightMaxIntensity * this.dimmer;
-        this.spotLightBeam.material.uniforms.spotPosition.value = this.objectGroup.position;
         // this.spotLightHelper.update();
     }
     destroy() {
         this.scene.remove(this.objectGroup);
         this.material.dispose();
-        this.atmosphereMaterial.dispose();
         this.spotLightHelper.dispose();
     }
 }
@@ -3680,11 +3963,15 @@ class PreviewComponent {
         this.projectService = projectService;
         this.fixtures3d = [];
         this.previewService.doUpdateFixtureSetup.subscribe(() => {
-            // synchronize the 3d-fixtures to the project fixtures
             this.syncFixtures();
         });
+        this.syncFixtures();
     }
+    // synchronize the 3d-fixtures to the project fixtures
     syncFixtures() {
+        if (!this.previewService.scene) {
+            return;
+        }
         // remove all fixtures
         for (const fixture3d of this.fixtures3d) {
             fixture3d.destroy();
@@ -3714,16 +4001,18 @@ class PreviewComponent {
     updateStagePosition(positioning, xMin, xMax, yMin, yMax, zMin, zMax) {
         let positionCount = 0; // Number of fixtures in the same position
         let positionIndex = 1;
-        this.projectService.project.fixtures.forEach((element, index) => {
-            if (element.positioning === positioning) {
+        this.projectService.project.presetFixtures.forEach((element, index) => {
+            const fixture = this.fixtureService.getFixtureByUuid(element.fixtureUuid);
+            if (fixture.positioning === positioning) {
                 positionCount++;
             }
         });
-        this.projectService.project.fixtures.forEach((element, index) => {
-            if (element.positioning === positioning) {
-                element.positionX = xMin + ((xMax - xMin) / (positionCount + 1)) * positionIndex;
-                element.positionY = yMin + ((yMax - yMin) / (positionCount + 1)) * positionIndex;
-                element.positionZ = zMin + ((zMax - zMin) / (positionCount + 1)) * positionIndex;
+        this.projectService.project.presetFixtures.forEach((element, index) => {
+            const fixture = this.fixtureService.getFixtureByUuid(element.fixtureUuid);
+            if (fixture.positioning === positioning) {
+                fixture.positionX = xMin + ((xMax - xMin) / (positionCount + 1)) * positionIndex;
+                fixture.positionY = yMin + ((yMax - yMin) / (positionCount + 1)) * positionIndex;
+                fixture.positionZ = zMin + ((zMax - zMin) / (positionCount + 1)) * positionIndex;
                 positionIndex++;
             }
         });
@@ -3755,7 +4044,7 @@ class PreviewComponent {
                 fixture3d.isSelected = this.fixtureService.settingsFixtureIsSelected(fixture3d.fixture.fixture);
             }
             else {
-                fixture3d.isSelected = this.previewService.fixtureIsSelected(fixture3d.fixture.fixture.uuid, presets);
+                fixture3d.isSelected = this.previewService.fixtureIsSelected(fixture3d.fixture.fixture.uuid, fixture3d.fixture.pixelKey, presets);
             }
         }
         // TODO enable for monitoring the DMX universes
@@ -3811,14 +4100,14 @@ class PreviewComponent {
         // this.scene.fog	= new THREE.FogExp2( 0x000000, 0.1 );
         this.previewService.scene = this.scene;
         // Add a little bit of ambient light
-        const ambient = new THREE.AmbientLight(0xffffff, 1.5);
+        const ambient = new THREE.AmbientLight(0xffffff, 1.8);
         this.scene.add(ambient);
         // Create the stage dimensions
         this.previewService.updateStage();
         const lights = [];
-        lights[0] = new THREE.PointLight(0xffffff, 1, 0, 0.1);
-        lights[1] = new THREE.PointLight(0xffffff, 1, 0, 0.1);
-        lights[2] = new THREE.PointLight(0xffffff, 1, 0, 0.1);
+        lights[0] = new THREE.PointLight(0xffffff, 2, 0, 0.1);
+        lights[1] = new THREE.PointLight(0xffffff, 2, 0, 0.1);
+        lights[2] = new THREE.PointLight(0xffffff, 2, 0, 0.1);
         lights[0].position.set(0, 2000, 0);
         lights[1].position.set(1000, 2000, 1000);
         lights[2].position.set(-1000, -2000, -1000);
@@ -3828,6 +4117,7 @@ class PreviewComponent {
         this.scene.add(lights[0]);
         this.scene.add(lights[1]);
         this.scene.add(lights[2]);
+        this.previewService.updateFixtureSetup();
     }
     ngAfterViewInit() {
         this.setupRenderer();
@@ -3884,131 +4174,6 @@ class WaitDialogComponent {
     }], () => [], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(WaitDialogComponent, { className: "WaitDialogComponent" }); })();
 
-class ProjectLoadService {
-    constructor(projectService, previewService, fixtureService, presetService, sceneService, modalService, uuidService, timelineService, router, activatedRoute) {
-        this.projectService = projectService;
-        this.previewService = previewService;
-        this.fixtureService = fixtureService;
-        this.presetService = presetService;
-        this.sceneService = sceneService;
-        this.modalService = modalService;
-        this.uuidService = uuidService;
-        this.timelineService = timelineService;
-        this.router = router;
-        this.activatedRoute = activatedRoute;
-    }
-    afterLoad() {
-        this.fixtureService.updateCachedFixtures();
-        this.presetService.removeDeletedFixtures();
-        this.previewService.updateFixtureSetup();
-        this.presetService.fixtureSelectionChanged.next();
-        this.presetService.autoOpenFirstEffect();
-        this.previewService.updateStage();
-        this.presetService.previewLive();
-        this.sceneService.selectPresetFromSelectedScene();
-    }
-    selectScenesPresetComposition() {
-        this.presetService.selectedPreset = this.presetService.getPresetByUuid(this.projectService.project.selectedPresetUuid);
-        this.sceneService.selectedScenes = [];
-        if (this.projectService.project.selectedSceneUuids) {
-            for (const uuid of this.projectService.project.selectedSceneUuids) {
-                this.sceneService.selectedScenes.push(this.sceneService.getSceneByUuid(uuid));
-            }
-        }
-        this.timelineService.selectedComposition = undefined;
-        this.timelineService.selectedCompositionIndex = undefined;
-        this.timelineService.destroyWaveSurfer();
-        for (let i = 0; i < this.projectService.project.compositions.length; i++) {
-            if (this.projectService.project.compositions[i].uuid === this.projectService.project.selectedCompositionUuid) {
-                this.timelineService.selectCompositionIndex(i);
-                break;
-            }
-        }
-    }
-    load(id, name, shareToken) {
-        const ref = this.modalService.show(WaitDialogComponent, { keyboard: false, ignoreBackdropClick: true });
-        return this.projectService.getProject(id, name, shareToken).pipe(map((project) => {
-            this.projectService.project = project;
-            this.selectScenesPresetComposition();
-            this.afterLoad();
-            const queryParams = {
-                id,
-                token: project.shareToken,
-            };
-            this.router.navigate([], {
-                relativeTo: this.activatedRoute,
-                queryParams,
-                queryParamsHandling: 'merge', // remove to replace all query params by provided
-            });
-        }), finalize(() => {
-            // hide the modal again because of:
-            // https://github.com/valor-software/ngx-bootstrap/issues/3711
-            setTimeout(() => {
-                ref.hide();
-            }, 250);
-            setTimeout(() => {
-                ref.hide();
-            }, 500);
-            setTimeout(() => {
-                ref.hide();
-            }, 1500);
-        }));
-    }
-    new() {
-        // create an empty new project
-        const project = new Project();
-        project.uuid = this.uuidService.getUuid();
-        this.projectService.project = project;
-        this.projectService.project.shareToken = this.uuidService.getUuid();
-        // Add a default scene and preset
-        const preset = new Preset();
-        preset.uuid = this.uuidService.getUuid();
-        preset.name = 'New Preset';
-        this.projectService.project.presets.push(preset);
-        this.presetService.selectPreset(0);
-        this.sceneService.addScene();
-        this.projectService.project.scenes[0].presetUuids.push(preset.uuid);
-        this.projectService.project.previewPreset = true;
-        this.sceneService.selectedScenes = [this.projectService.project.scenes[0]];
-        this.presetService.selectedPreset = this.projectService.project.presets[0];
-        this.timelineService.selectedComposition = undefined;
-        this.timelineService.selectedCompositionIndex = undefined;
-        this.timelineService.destroyWaveSurfer();
-        this.afterLoad();
-        const queryParams = {
-            id: '',
-            token: '',
-        };
-        this.router.navigate([], {
-            relativeTo: this.activatedRoute,
-            queryParams,
-            queryParamsHandling: 'merge', // remove to replace all query params by provided
-        });
-    }
-    template() {
-        // load the template project with id 1
-        this.load(1, null).subscribe(() => {
-            this.projectService.project.id = undefined;
-        });
-    }
-    import(data) {
-        // import a project from a string
-        const project = new Project(JSON.parse(data));
-        project.id = undefined;
-        this.projectService.project = project;
-        this.selectScenesPresetComposition();
-        this.afterLoad();
-    }
-    static { this.ɵfac = function ProjectLoadService_Factory(t) { return new (t || ProjectLoadService)(i0.ɵɵinject(ProjectService), i0.ɵɵinject(PreviewService), i0.ɵɵinject(FixtureService), i0.ɵɵinject(PresetService), i0.ɵɵinject(SceneService), i0.ɵɵinject(i1$1.BsModalService), i0.ɵɵinject(UuidService), i0.ɵɵinject(TimelineService), i0.ɵɵinject(i4.Router), i0.ɵɵinject(i4.ActivatedRoute)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ProjectLoadService, factory: ProjectLoadService.ɵfac, providedIn: 'root' }); }
-}
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProjectLoadService, [{
-        type: Injectable,
-        args: [{
-                providedIn: 'root',
-            }]
-    }], () => [{ type: ProjectService }, { type: PreviewService }, { type: FixtureService }, { type: PresetService }, { type: SceneService }, { type: i1$1.BsModalService }, { type: UuidService }, { type: TimelineService }, { type: i4.Router }, { type: i4.ActivatedRoute }], null); })();
-
 class WarningDialogComponent {
     constructor(bsModalRef) {
         this.bsModalRef = bsModalRef;
@@ -4091,15 +4256,197 @@ class WarningDialogService {
             }));
         }));
     }
-    static { this.ɵfac = function WarningDialogService_Factory(t) { return new (t || WarningDialogService)(i0.ɵɵinject(i1$1.BsModalService), i0.ɵɵinject(i2.TranslateService)); }; }
-    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: WarningDialogService, factory: WarningDialogService.ɵfac, providedIn: 'root' }); }
+    static { this.ɵfac = function WarningDialogService_Factory(t) { return new (t || WarningDialogService)(i0.ɵɵinject(i1$1.BsModalService), i0.ɵɵinject(i2.TranslateService)); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: WarningDialogService, factory: WarningDialogService.ɵfac, providedIn: 'root' }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WarningDialogService, [{
+        type: Injectable,
+        args: [{
+                providedIn: 'root',
+            }]
+    }], () => [{ type: i1$1.BsModalService }, { type: i2.TranslateService }], null); })();
+
+class ProjectLoadService {
+    constructor(projectService, previewService, fixtureService, presetService, sceneService, modalService, uuidService, timelineService, router, activatedRoute, warningDialogService) {
+        this.projectService = projectService;
+        this.previewService = previewService;
+        this.fixtureService = fixtureService;
+        this.presetService = presetService;
+        this.sceneService = sceneService;
+        this.modalService = modalService;
+        this.uuidService = uuidService;
+        this.timelineService = timelineService;
+        this.router = router;
+        this.activatedRoute = activatedRoute;
+        this.warningDialogService = warningDialogService;
+    }
+    migrateToVersion2() {
+        for (let fixture of this.projectService.project.fixtures) {
+            const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+            if (pixelKeys.length > 0) {
+                for (let pixelKey of pixelKeys) {
+                    const projectFixture = new PresetFixture();
+                    projectFixture.fixtureUuid = fixture.uuid;
+                    projectFixture.pixelKey = pixelKey;
+                    this.projectService.project.presetFixtures.push(projectFixture);
+                }
+            }
+            else {
+                const projectFixture = new PresetFixture();
+                projectFixture.fixtureUuid = fixture.uuid;
+                this.projectService.project.presetFixtures.push(projectFixture);
+            }
+        }
+        for (let preset of this.projectService.project.presets) {
+            for (let fixtureUuid of preset.fixtureUuids) {
+                const fixture = this.fixtureService.getFixtureByUuid(fixtureUuid);
+                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+                if (pixelKeys.length > 0) {
+                    for (let pixelKey of pixelKeys) {
+                        const presetFixture = new PresetFixture();
+                        presetFixture.fixtureUuid = fixtureUuid;
+                        presetFixture.pixelKey = pixelKey;
+                        preset.fixtures.push(presetFixture);
+                    }
+                }
+                else {
+                    const presetFixture = new PresetFixture();
+                    presetFixture.fixtureUuid = fixtureUuid;
+                    preset.fixtures.push(presetFixture);
+                }
+            }
+        }
+        this.projectService.project.version = 2;
+    }
+    migrateFromOldProject() {
+        let migrated = false;
+        if (!this.projectService.project.version) {
+            // Migrate from version 1
+            this.migrateToVersion2();
+            migrated = true;
+        }
+        if (migrated) {
+            this.warningDialogService.show('designer.project.migrated').subscribe();
+        }
+    }
+    afterLoad() {
+        this.migrateFromOldProject();
+        this.fixtureService.updateCachedFixtures();
+        this.presetService.removeDeletedFixtures();
+        this.previewService.updateFixtureSetup();
+        this.presetService.fixtureSelectionChanged.next();
+        this.presetService.autoOpenFirstEffect();
+        this.previewService.updateStage();
+        this.presetService.previewLive();
+        this.sceneService.selectPresetFromSelectedScene();
+    }
+    selectScenesPresetComposition() {
+        this.presetService.selectedPreset = this.presetService.getPresetByUuid(this.projectService.project.selectedPresetUuid);
+        this.sceneService.selectedScenes = [];
+        if (this.projectService.project.selectedSceneUuids) {
+            for (const uuid of this.projectService.project.selectedSceneUuids) {
+                this.sceneService.selectedScenes.push(this.sceneService.getSceneByUuid(uuid));
+            }
+        }
+        this.timelineService.selectedComposition = undefined;
+        this.timelineService.selectedCompositionIndex = undefined;
+        this.timelineService.destroyWaveSurfer();
+        for (let i = 0; i < this.projectService.project.compositions.length; i++) {
+            if (this.projectService.project.compositions[i].uuid === this.projectService.project.selectedCompositionUuid) {
+                this.timelineService.selectCompositionIndex(i);
+                break;
+            }
+        }
+    }
+    load(id, name, shareToken) {
+        const ref = this.modalService.show(WaitDialogComponent, { keyboard: false, ignoreBackdropClick: true });
+        return this.projectService.getProject(id, name, shareToken).pipe(map((project) => {
+            if (project.version > this.projectService.currentProjectVersion) {
+                throw new Error('The project version ' +
+                    project.version +
+                    ' is created with a newer version of the designer. Please update your Rocket Show version to open this project.');
+            }
+            this.projectService.project = project;
+            this.selectScenesPresetComposition();
+            this.afterLoad();
+            const queryParams = {
+                id,
+                token: project.shareToken,
+            };
+            this.router.navigate([], {
+                relativeTo: this.activatedRoute,
+                queryParams,
+                queryParamsHandling: 'merge', // remove to replace all query params by provided
+            });
+        }), finalize(() => {
+            // hide the modal again because of:
+            // https://github.com/valor-software/ngx-bootstrap/issues/3711
+            setTimeout(() => {
+                ref.hide();
+            }, 250);
+            setTimeout(() => {
+                ref.hide();
+            }, 500);
+            setTimeout(() => {
+                ref.hide();
+            }, 1500);
+        }));
+    }
+    new() {
+        // create an empty new project
+        const project = new Project();
+        project.uuid = this.uuidService.getUuid();
+        project.version = this.projectService.currentProjectVersion;
+        this.projectService.project = project;
+        this.projectService.project.shareToken = this.uuidService.getUuid();
+        // Add a default scene and preset
+        const preset = new Preset();
+        preset.uuid = this.uuidService.getUuid();
+        preset.name = 'New Preset';
+        this.projectService.project.presets.push(preset);
+        this.presetService.selectPreset(0);
+        this.sceneService.addScene();
+        this.projectService.project.scenes[0].presetUuids.push(preset.uuid);
+        this.projectService.project.previewPreset = true;
+        this.sceneService.selectedScenes = [this.projectService.project.scenes[0]];
+        this.presetService.selectedPreset = this.projectService.project.presets[0];
+        this.timelineService.selectedComposition = undefined;
+        this.timelineService.selectedCompositionIndex = undefined;
+        this.timelineService.destroyWaveSurfer();
+        this.afterLoad();
+        const queryParams = {
+            id: '',
+            token: '',
+        };
+        this.router.navigate([], {
+            relativeTo: this.activatedRoute,
+            queryParams,
+            queryParamsHandling: 'merge', // remove to replace all query params by provided
+        });
+    }
+    template() {
+        // load the template project with id 1
+        this.load(1, null).subscribe(() => {
+            this.projectService.project.id = undefined;
+        });
+    }
+    import(data) {
+        // import a project from a string
+        const project = new Project(JSON.parse(data));
+        project.id = undefined;
+        this.projectService.project = project;
+        this.selectScenesPresetComposition();
+        this.afterLoad();
+    }
+    static { this.ɵfac = function ProjectLoadService_Factory(t) { return new (t || ProjectLoadService)(i0.ɵɵinject(ProjectService), i0.ɵɵinject(PreviewService), i0.ɵɵinject(FixtureService), i0.ɵɵinject(PresetService), i0.ɵɵinject(SceneService), i0.ɵɵinject(i1$1.BsModalService), i0.ɵɵinject(UuidService), i0.ɵɵinject(TimelineService), i0.ɵɵinject(i3.Router), i0.ɵɵinject(i3.ActivatedRoute), i0.ɵɵinject(WarningDialogService)); }; }
+    static { this.ɵprov = /*@__PURE__*/ i0.ɵɵdefineInjectable({ token: ProjectLoadService, factory: ProjectLoadService.ɵfac, providedIn: 'root' }); }
 }
-(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(WarningDialogService, [{
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProjectLoadService, [{
         type: Injectable,
         args: [{
                 providedIn: 'root',
             }]
-    }], () => [{ type: i1$1.BsModalService }, { type: i2.TranslateService }], null); })();
+    }], () => [{ type: ProjectService }, { type: PreviewService }, { type: FixtureService }, { type: PresetService }, { type: SceneService }, { type: i1$1.BsModalService }, { type: UuidService }, { type: TimelineService }, { type: i3.Router }, { type: i3.ActivatedRoute }, { type: WarningDialogService }], null); })();
 
 class ArraySortPipe {
     transform(array, field) {
@@ -4310,7 +4657,7 @@ class ProjectImportComponent {
     handleKeyboardEvent(event) {
         this.ok();
     }
-    static { this.ɵfac = function ProjectImportComponent_Factory(t) { return new (t || ProjectImportComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i3.ToastrService), i0.ɵɵdirectiveInject(ProjectLoadService)); }; }
+    static { this.ɵfac = function ProjectImportComponent_Factory(t) { return new (t || ProjectImportComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i3$1.ToastrService), i0.ɵɵdirectiveInject(ProjectLoadService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: ProjectImportComponent, selectors: [["lib-project-import"]], hostBindings: function ProjectImportComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.enter", function ProjectImportComponent_keydown_enter_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, false, i0.ɵɵresolveDocument);
         } }, decls: 13, vars: 9, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [3, "error", "config", "useDropzoneClass", "message"], [1, "modal-footer"], ["type", "button", 1, "btn", "btn-primary", 3, "click"]], template: function ProjectImportComponent_Template(rf, ctx) { if (rf & 1) {
@@ -4343,7 +4690,7 @@ class ProjectImportComponent {
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProjectImportComponent, [{
         type: Component,
         args: [{ selector: 'lib-project-import', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.project.import-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <!-- Dropzone -->\n  <dropzone [config]=\"dropzoneConfig\" [useDropzoneClass]=\"'false'\" [message]=\"uploadMessage\" (error)=\"onUploadError($event)\"></dropzone>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n" }]
-    }], () => [{ type: i1$1.BsModalRef }, { type: i2.TranslateService }, { type: i3.ToastrService }, { type: ProjectLoadService }], { handleKeyboardEvent: [{
+    }], () => [{ type: i1$1.BsModalRef }, { type: i2.TranslateService }, { type: i3$1.ToastrService }, { type: ProjectLoadService }], { handleKeyboardEvent: [{
             type: HostListener,
             args: ['document:keydown.enter', ['$event']]
         }] }); })();
@@ -4501,7 +4848,7 @@ class ProjectSaveComponent {
             i0.ɵɵproperty("disabled", ctx.loading || !ctx.projectName);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(22, 14, "designer.misc.ok"), " ");
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.DefaultValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i2.TranslatePipe, ArraySortPipe] }); }
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i2.TranslatePipe, ArraySortPipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProjectSaveComponent, [{
         type: Component,
@@ -4564,7 +4911,7 @@ class ProjectShareComponent {
             i0.ɵɵproperty("ngModel", ctx.shareLink);
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(17, 8, "designer.misc.ok"));
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i2.TranslatePipe] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(ProjectShareComponent, [{
         type: Component,
@@ -4764,7 +5111,7 @@ class FixturePoolCreateFromFileComponent {
     handleKeyboardEvent(event) {
         this.ok();
     }
-    static { this.ɵfac = function FixturePoolCreateFromFileComponent_Factory(t) { return new (t || FixturePoolCreateFromFileComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i3.ToastrService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(ProjectService)); }; }
+    static { this.ɵfac = function FixturePoolCreateFromFileComponent_Factory(t) { return new (t || FixturePoolCreateFromFileComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i3$1.ToastrService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(ProjectService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FixturePoolCreateFromFileComponent, selectors: [["lib-fixture-pool-create-from-file"]], hostBindings: function FixturePoolCreateFromFileComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.enter", function FixturePoolCreateFromFileComponent_keydown_enter_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, false, i0.ɵɵresolveDocument);
         } }, decls: 13, vars: 9, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [3, "error", "config", "useDropzoneClass", "message"], [1, "modal-footer"], ["type", "button", 1, "btn", "btn-primary", 3, "click"]], template: function FixturePoolCreateFromFileComponent_Template(rf, ctx) { if (rf & 1) {
@@ -4779,12 +5126,12 @@ class FixturePoolCreateFromFileComponent {
             i0.ɵɵelementEnd()()();
             i0.ɵɵelementStart(7, "div", 4)(8, "dropzone", 5);
             i0.ɵɵlistener("error", function FixturePoolCreateFromFileComponent_Template_dropzone_error_8_listener($event) { return ctx.onUploadError($event); });
-            i0.ɵɵelementEnd()();
+            i0.ɵɵelementEnd();
             i0.ɵɵelementStart(9, "div", 6)(10, "button", 7);
             i0.ɵɵlistener("click", function FixturePoolCreateFromFileComponent_Template_button_click_10_listener() { return ctx.ok(); });
             i0.ɵɵtext(11);
             i0.ɵɵpipe(12, "translate");
-            i0.ɵɵelementEnd()();
+            i0.ɵɵelementEnd()()();
         } if (rf & 2) {
             i0.ɵɵadvance(2);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(3, 5, "designer.fixture-pool.create-fixture-from-profile-file-dialog-title"));
@@ -4796,8 +5143,8 @@ class FixturePoolCreateFromFileComponent {
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixturePoolCreateFromFileComponent, [{
         type: Component,
-        args: [{ selector: 'lib-fixture-pool-create-from-file', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.create-fixture-from-profile-file-dialog-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <!-- Dropzone -->\n  <dropzone [config]=\"dropzoneConfig\" [useDropzoneClass]=\"'false'\" [message]=\"uploadMessage\" (error)=\"onUploadError($event)\"></dropzone>\n</div>\n<div class=\"modal-footer\">\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n" }]
-    }], () => [{ type: i1$1.BsModalRef }, { type: i2.TranslateService }, { type: i3.ToastrService }, { type: FixtureService }, { type: ProjectService }], { handleKeyboardEvent: [{
+        args: [{ selector: 'lib-fixture-pool-create-from-file', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.create-fixture-from-profile-file-dialog-title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <!-- Dropzone -->\n  <dropzone [config]=\"dropzoneConfig\" [useDropzoneClass]=\"'false'\" [message]=\"uploadMessage\" (error)=\"onUploadError($event)\"></dropzone>\n  <div class=\"modal-footer\">\n    <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n  </div>\n</div>\n" }]
+    }], () => [{ type: i1$1.BsModalRef }, { type: i2.TranslateService }, { type: i3$1.ToastrService }, { type: FixtureService }, { type: ProjectService }], { handleKeyboardEvent: [{
             type: HostListener,
             args: ['document:keydown.enter', ['$event']]
         }] }); })();
@@ -4902,9 +5249,10 @@ function FixturePoolComponent_div_66_option_13_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const mode_r10 = ctx.$implicit;
+    const ctx_r2 = i0.ɵɵnextContext(2);
     i0.ɵɵproperty("ngValue", mode_r10.shortName || mode_r10.name);
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate3(" ", mode_r10.name, " - ", mode_r10.channels.length, " ", i0.ɵɵpipeBind1(2, 4, "designer.fixture-pool.channels"), " ");
+    i0.ɵɵtextInterpolate3(" ", mode_r10.name, " - ", ctx_r2.fixtureService.getModeChannelCount(ctx_r2.selectedFixtureProfile, mode_r10), " ", i0.ɵɵpipeBind1(2, 4, "designer.fixture-pool.channels"), " ");
 } }
 function FixturePoolComponent_div_66_option_20_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "option", 72);
@@ -5038,7 +5386,9 @@ class FixturePoolComponent {
         this.fixtureService.loadProfileByUuid(searchProfile.uuid).subscribe(() => {
             const profile = this.fixtureService.getProfileByUuid(searchProfile.uuid);
             const newFixture = this.fixtureService.addFixture(profile, this.fixturePool);
-            this.selectFixture(newFixture);
+            if (newFixture) {
+                this.selectFixture(newFixture);
+            }
         });
     }
     addCopy(originalFixture) {
@@ -5081,8 +5431,10 @@ class FixturePoolComponent {
     }
     channelOccupied(index) {
         for (const fixture of this.fixturePool) {
-            const mode = this.fixtureService.getModeByFixture(this.fixtureService.getProfileByUuid(fixture.profileUuid), fixture);
-            if (index >= fixture.dmxFirstChannel && index < fixture.dmxFirstChannel + mode.channels.length) {
+            const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
+            const mode = this.fixtureService.getModeByFixture(profile, fixture);
+            const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
+            if (index >= fixture.dmxFirstChannel && index < fixture.dmxFirstChannel + channelCount) {
                 return true;
             }
         }
@@ -5098,8 +5450,10 @@ class FixturePoolComponent {
     }
     channelOccupiedEnd(index) {
         for (const fixture of this.fixturePool) {
-            const mode = this.fixtureService.getModeByFixture(this.fixtureService.getProfileByUuid(fixture.profileUuid), fixture);
-            if (index === fixture.dmxFirstChannel + mode.channels.length - 1) {
+            const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
+            const mode = this.fixtureService.getModeByFixture(profile, fixture);
+            const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
+            if (index === fixture.dmxFirstChannel + channelCount - 1) {
                 return true;
             }
         }
@@ -5108,8 +5462,10 @@ class FixturePoolComponent {
     channelOverlapped(index) {
         let occupiedFixture;
         for (const fixture of this.fixturePool) {
-            const mode = this.fixtureService.getModeByFixture(this.fixtureService.getProfileByUuid(fixture.profileUuid), fixture);
-            if (index >= fixture.dmxFirstChannel && index < fixture.dmxFirstChannel + mode.channels.length) {
+            const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
+            const mode = this.fixtureService.getModeByFixture(profile, fixture);
+            const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
+            if (index >= fixture.dmxFirstChannel && index < fixture.dmxFirstChannel + channelCount) {
                 if (occupiedFixture) {
                     if (occupiedFixture.dmxFirstChannel !== fixture.dmxFirstChannel || occupiedFixture.modeShortName !== fixture.modeShortName) {
                         // fixtures are allowed to overlap, if they start at the same channel and
@@ -5131,8 +5487,10 @@ class FixturePoolComponent {
         // find a dragging fixture and select it, but don't change the selection, if the
         // currently selected fixture might also be selected (on overlapped fixtures)
         for (const fixture of this.fixturePool) {
-            const mode = this.fixtureService.getModeByFixture(this.fixtureService.getProfileByUuid(fixture.profileUuid), fixture);
-            if (selectedIndex >= fixture.dmxFirstChannel && selectedIndex <= fixture.dmxFirstChannel + mode.channels.length - 1) {
+            const profile = this.fixtureService.getProfileByUuid(fixture.profileUuid);
+            const mode = this.fixtureService.getModeByFixture(profile, fixture);
+            const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
+            if (selectedIndex >= fixture.dmxFirstChannel && selectedIndex <= fixture.dmxFirstChannel + channelCount - 1) {
                 if (this.selectedFixture === fixture) {
                     newSelectedFixture = fixture;
                     break;
@@ -5155,8 +5513,10 @@ class FixturePoolComponent {
             return false;
         }
         if (index >= this.selectedFixture.dmxFirstChannel) {
-            const mode = this.fixtureService.getModeByFixture(this.fixtureService.getProfileByUuid(this.selectedFixture.profileUuid), this.selectedFixture);
-            if (index < this.selectedFixture.dmxFirstChannel + mode.channels.length) {
+            const profile = this.fixtureService.getProfileByUuid(this.selectedFixture.profileUuid);
+            const mode = this.fixtureService.getModeByFixture(profile, this.selectedFixture);
+            const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
+            if (index < this.selectedFixture.dmxFirstChannel + channelCount) {
                 return true;
             }
         }
@@ -5169,15 +5529,15 @@ class FixturePoolComponent {
         this.channelDragOffset = undefined;
     }
     channelMouseOver(event) {
+        if (!this.channelDragFixture) {
+            return;
+        }
         // perform dragging
         const selectedIndex = event.target.dataset.index;
-        if (this.channelDragFixture &&
-            selectedIndex - this.channelDragOffset >= 0 &&
-            selectedIndex -
-                this.channelDragOffset +
-                this.fixtureService.getModeByFixture(this.fixtureService.getProfileByUuid(this.channelDragFixture.profileUuid), this.channelDragFixture).channels.length -
-                1 <=
-                511) {
+        const profile = this.fixtureService.getProfileByUuid(this.channelDragFixture.profileUuid);
+        const mode = this.fixtureService.getModeByFixture(profile, this.selectedFixture);
+        const channelCount = this.fixtureService.getModeChannelCount(profile, mode);
+        if (selectedIndex - this.channelDragOffset >= 0 && selectedIndex - this.channelDragOffset + channelCount - 1 <= 511) {
             this.channelDragFixture.dmxFirstChannel = selectedIndex - this.channelDragOffset;
         }
     }
@@ -5194,6 +5554,46 @@ class FixturePoolComponent {
             }
         }
         this.projectService.project.fixtures = this.fixturePool;
+        // remove deleted fixtures from preset fixtures
+        for (let i = this.projectService.project.presetFixtures.length - 1; i >= 0; i--) {
+            let found = false;
+            const presetFixture = this.projectService.project.presetFixtures[i];
+            for (let fixture of this.projectService.project.fixtures) {
+                if (presetFixture.fixtureUuid === fixture.uuid) {
+                    found = true;
+                    break;
+                }
+            }
+            if (!found) {
+                this.projectService.project.presetFixtures.splice(i, 1);
+            }
+        }
+        // add the new fixtures to the preset fixtures
+        for (let fixture of this.projectService.project.fixtures) {
+            let found = false;
+            for (let presetFixture of this.projectService.project.presetFixtures) {
+                if (presetFixture.fixtureUuid === fixture.uuid) {
+                    found = true;
+                    break;
+                }
+            }
+            if (!found) {
+                const pixelKeys = this.fixtureService.fixtureGetUniquePixelKeys(fixture);
+                if (pixelKeys.length > 0) {
+                    for (let pixelKey of pixelKeys) {
+                        const presetFixture = new PresetFixture();
+                        presetFixture.fixtureUuid = fixture.uuid;
+                        presetFixture.pixelKey = pixelKey;
+                        this.projectService.project.presetFixtures.push(presetFixture);
+                    }
+                }
+                else {
+                    const presetFixture = new PresetFixture();
+                    presetFixture.fixtureUuid = fixture.uuid;
+                    this.projectService.project.presetFixtures.push(presetFixture);
+                }
+            }
+        }
         this.fixtureService.updateCachedFixtures();
         this.presetService.removeDeletedFixtures();
         this.previewService.updateFixtureSetup();
@@ -5241,7 +5641,7 @@ class FixturePoolComponent {
     handleKeyboardEvent(event) {
         this.ok();
     }
-    static { this.ɵfac = function FixturePoolComponent_Factory(t) { return new (t || FixturePoolComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(UuidService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i3.ToastrService), i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(i1$1.BsModalService)); }; }
+    static { this.ɵfac = function FixturePoolComponent_Factory(t) { return new (t || FixturePoolComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(UuidService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(PreviewService), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i3$1.ToastrService), i0.ɵɵdirectiveInject(PresetService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(i1$1.BsModalService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: FixturePoolComponent, selectors: [["lib-app-fixture-pool"]], hostBindings: function FixturePoolComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("mouseup", function FixturePoolComponent_mouseup_HostBindingHandler($event) { return ctx.mouseUp($event); }, false, i0.ɵɵresolveWindow)("keydown.enter", function FixturePoolComponent_keydown_enter_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, false, i0.ɵɵresolveDocument);
         } }, decls: 74, vars: 37, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [1, "row"], [1, "col-6"], ["type", "text", "id", "searchSet", 1, "form-control", "input-block", "mb-3", 3, "input", "placeholder"], [1, "card", "border-secondary", "w-100", 2, "height", "200px"], [1, "card-body", "p-0", "w-100"], [1, "list-group", "list-group-flush", "w-100"], ["class", "list-group-item flex-column align-items-start d-flex", 4, "ngIf"], ["class", "list-group-item", 4, "ngFor", "ngForOf"], [1, "d-inline-block", "mb-0", "mt-2"], ["href", "https://open-fixture-library.org/", "target", "_blank"], ["href", "https://open-fixture-library.org/fixture-editor", "target", "_blank", "role", "button", 1, "mt-2", "btn", "btn-secondary", "btn-sm", "float-right"], ["aria-hidden", "true", 1, "fa", "fa-file-o"], ["type", "button", "class", "mr-2 mt-2 btn btn-secondary btn-sm float-right", "role", "button", 3, "disabled", "click", 4, "ngIf"], ["type", "button", "role", "button", 1, "btn", "btn-secondary", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-plus"], [1, "form-group", "row"], [1, "col-lg-4", "col-form-label"], [1, "col-lg-8"], [1, "custom-select"], [1, "card", "border-secondary", 2, "height", "235px"], [1, "card-body", "p-0"], [1, "list-group", "list-group-flush", 3, "sortablejs"], ["class", "list-group-item", "style", "cursor: pointer", 3, "active", "click", 4, "ngFor", "ngForOf"], [1, "row", "mt-3"], [1, "col"], ["id", "myTab", "role", "tablist", 1, "nav", "nav-tabs", "mb-4"], [1, "nav-item"], ["id", "sets-tab", "data-toggle", "tab", "href", "#dmx", "role", "tab", 1, "nav-link", "active"], ["aria-hidden", "true", 1, "icon-ola"], ["id", "compositions-tab", "data-toggle", "tab", "href", "#settings", "role", "tab", 1, "nav-link"], ["aria-hidden", "true", 1, "fa", "fa-cog"], ["id", "myTabContent", 1, "tab-content"], ["id", "dmx", "role", "tabpanel", 1, "tab-pane", "show", "active"], ["class", "dmx-channel", "placement", "top", "triggers", "mouseenter:mouseleave", 3, "dmx-channel-occupied", "dmx-channel-occupied-start", "dmx-channel-occupied-end", "dmx-channel-selected", "dmx-channel-overlapped", "popover", "mousedown", "mouseover", 4, "ngFor", "ngForOf"], ["id", "settings", "role", "tabpanel", 1, "tab-pane"], [4, "ngIf"], [1, "modal-footer"], ["href", "#", "role", "button", 1, "mr-3", "my-auto", 3, "click"], ["type", "button", 1, "btn", "btn-primary", 3, "click"], [1, "list-group-item", "flex-column", "align-items-start", "d-flex"], [1, "mb-0", "mx-auto"], [1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], [1, "list-group-item"], [1, "col-10", "col-auto", "my-auto", "pl-2"], [1, "mb-0"], [1, "col-2", "my-auto"], ["href", "#", "role", "button", 1, "btn", "btn-primary", "btn-sm", "float-right", 3, "click"], ["type", "button", "role", "button", 1, "mr-2", "mt-2", "btn", "btn-secondary", "btn-sm", "float-right", 3, "click", "disabled"], ["class", "fa fa-spinner fa-pulse fa-fw", "aria-hidden", "true", 4, "ngIf"], ["class", "fa fa-download fa-fw", "aria-hidden", "true", 4, "ngIf"], ["aria-hidden", "true", 1, "fa", "fa-spinner", "fa-pulse", "fa-fw"], ["aria-hidden", "true", 1, "fa", "fa-download", "fa-fw"], [1, "list-group-item", 2, "cursor", "pointer", 3, "click"], [1, "col-auto", "list-sort-handle", "my-auto", 2, "cursor", "move", "cursor", "-webkit-grabbing"], ["aria-hidden", "true", 1, "fa", "fa-bars"], [1, "col-auto", "flex-grow", "pl-0", "my-auto"], [1, "col-auto", "my-auto"], ["aria-hidden", "true", 1, "fa", "fa-minus"], ["placement", "top", "triggers", "mouseenter:mouseleave", 1, "dmx-channel", 3, "mousedown", "mouseover", "popover"], [1, "d-flex", "w-100", "dmx-channel-text"], [1, "m-auto", 2, "font-size", "11px"], ["for", "fixtureName", 1, "col-lg-3", "col-form-label"], [1, "col-lg-9"], ["type", "text", "maxlength", "200", "id", "fixtureName", 1, "form-control", 3, "ngModelChange", "ngModel"], [1, "col-lg-3", "col-form-label"], [1, "custom-select", 3, "ngModelChange", "ngModel"], [3, "ngValue", 4, "ngFor", "ngForOf"], [3, "ngValue"]], template: function FixturePoolComponent_Template(rf, ctx) { if (rf & 1) {
@@ -5349,12 +5749,12 @@ class FixturePoolComponent {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(70, 33, "designer.misc.cancel"), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(73, 35, "designer.misc.ok"));
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.NgSelectOption, i4$1.ɵNgSelectMultipleOption, i4$1.DefaultValueAccessor, i4$1.SelectControlValueAccessor, i4$1.NgControlStatus, i4$1.MaxLengthValidator, i4$1.NgModel, i12.PopoverDirective, i8.SortablejsDirective, i2.TranslatePipe, ArraySortPipe], styles: [".list-group-item[_ngcontent-%COMP%]{padding:.3rem 1.25rem}.dmx-channel[_ngcontent-%COMP%]{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied[_ngcontent-%COMP%]{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start[_ngcontent-%COMP%]{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end[_ngcontent-%COMP%]{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected[_ngcontent-%COMP%]{background-color:#fd7e14}.dmx-channel-overlapped[_ngcontent-%COMP%]{background-color:red;border:1px solid red;cursor:move}.card[_ngcontent-%COMP%]{overflow:auto}"] }); }
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.MaxLengthValidator, i4.NgModel, i12.PopoverDirective, i8.SortablejsDirective, i2.TranslatePipe, ArraySortPipe], styles: [".list-group-item[_ngcontent-%COMP%]{padding:.3rem 1.25rem}.dmx-channel[_ngcontent-%COMP%]{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied[_ngcontent-%COMP%]{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start[_ngcontent-%COMP%]{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end[_ngcontent-%COMP%]{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected[_ngcontent-%COMP%]{background-color:#fd7e14}.dmx-channel-overlapped[_ngcontent-%COMP%]{background-color:red;border:1px solid red;cursor:move}.card[_ngcontent-%COMP%]{overflow:auto}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixturePoolComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-pool', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div class=\"col-6\">\n      <!-- Search for profiles -->\n      <input\n        type=\"text\"\n        class=\"form-control input-block mb-3\"\n        id=\"searchSet\"\n        placeholder=\"{{ 'designer.fixture-pool.search-profiles' | translate }}\"\n        (input)=\"searchExpression = $event.target.value; filterProfiles()\"\n      />\n\n      <!-- Profiles -->\n      <div class=\"card border-secondary w-100\" style=\"height: 200px\">\n        <div class=\"card-body p-0 w-100\">\n          <div class=\"list-group list-group-flush w-100\">\n            <a *ngIf=\"loadingProfiles\" class=\"list-group-item flex-column align-items-start d-flex\">\n              <p class=\"mb-0 mx-auto\">\n                <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\n              </p>\n            </a>\n\n            <div class=\"list-group-item\" *ngFor=\"let profile of filteredProfiles | sort: 'uuid'\">\n              <div class=\"row\">\n                <div class=\"col-10 col-auto my-auto pl-2\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(profile) }} mr-1\"></span> {{ profile.manufacturerName }} -\n                    {{ profile.name }}\n                  </p>\n                </div>\n                <div class=\"col-2 my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"addFixture(profile); (false)\">\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"d-inline-block mb-0 mt-2\">\n          Powered by the <a href=\"https://open-fixture-library.org/\" target=\"_blank\">Open Fixture Library</a>\n        </p>\n        <a\n          class=\"mt-2 btn btn-secondary btn-sm float-right\"\n          href=\"https://open-fixture-library.org/fixture-editor\"\n          target=\"_blank\"\n          role=\"button\"\n        >\n          <i class=\"fa fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.add-profile' | translate }}\n        </a>\n        <button\n          *ngIf=\"configService.localProfiles\"\n          type=\"button\"\n          class=\"mr-2 mt-2 btn btn-secondary btn-sm float-right\"\n          (click)=\"updateProfiles(); (false)\"\n          [disabled]=\"updatingProfiles\"\n          role=\"button\"\n        >\n          <i *ngIf=\"updatingProfiles\" class=\"fa fa-spinner fa-pulse fa-fw\" aria-hidden=\"true\"></i>\n          <i *ngIf=\"!updatingProfiles\" class=\"fa fa-download fa-fw\" aria-hidden=\"true\"></i>\n          {{ 'designer.fixture-pool.update-profiles' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"row\">\n        <!-- Add fixture from local profile -->\n        <div class=\"col-6\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"createFixtureFromProfileFile()\" role=\"button\">\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.create-fixture-from-profile-file' | translate }}\n          </button>\n        </div>\n\n        <!-- Universe -->\n        <div class=\"col-6\">\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <select class=\"custom-select\">\n                <option>Universe 1</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div class=\"card border-secondary\" style=\"height: 235px\">\n        <div class=\"card-body p-0\">\n          <div class=\"list-group list-group-flush\" [sortablejs]=\"fixturePool\">\n            <div\n              class=\"list-group-item\"\n              *ngFor=\"let fixture of fixturePool\"\n              [class.active]=\"fixture == selectedFixture\"\n              (click)=\"selectFixture(fixture)\"\n              style=\"cursor: pointer\"\n            >\n              <div class=\"row\">\n                <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n                  <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n                </div>\n                <div class=\"col-auto flex-grow pl-0 my-auto\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(fixture.profileUuid)) }} mr-1\">\n                    </span\n                    >{{ fixture.name }}\n                  </p>\n                </div>\n                <div class=\"col-auto my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"removeFixture(fixture); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-3\">\n    <div class=\"col\">\n      <!-- Tab navigation -->\n      <ul class=\"nav nav-tabs mb-4\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"sets-tab\" data-toggle=\"tab\" href=\"#dmx\" role=\"tab\">\n            <i class=\"icon-ola\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.dmx' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"compositions-tab\" data-toggle=\"tab\" href=\"#settings\" role=\"tab\">\n            <i class=\"fa fa-cog\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.settings' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <!-- Tab content -->\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- DMX universe overview-->\n        <div class=\"tab-pane show active\" id=\"dmx\" role=\"tabpanel\">\n          <!-- Show all channel numbers -->\n          <!-- <div class=\"form-group row\">\n            <div class=\"col-auto flex-grow\"></div>\n            <div class=\"col-lg-3 d-flex\">\n              <div class=\"form-check my-auto ml-auto\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"showChannelNumbers\" [ngModel]=\"showChannelNumbers\"\n                  (ngModelChange)=\"showChannelNumbers = $event\">\n                <label class=\"form-check-label\" for=\"showChannelNumbers\">Show channels</label>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- List of DMX channels -->\n          <div>\n            <div\n              *ngFor=\"let channel of dmxChannels; let i = index\"\n              class=\"dmx-channel\"\n              [class.dmx-channel-occupied]=\"channelOccupied(i)\"\n              [class.dmx-channel-occupied-start]=\"channelOccupiedStart(i)\"\n              [class.dmx-channel-occupied-end]=\"channelOccupiedEnd(i)\"\n              [class.dmx-channel-selected]=\"channelSelected(i)\"\n              [class.dmx-channel-overlapped]=\"channelOverlapped(i)\"\n              (mousedown)=\"channelMouseDown($event)\"\n              (mouseover)=\"channelMouseOver($event)\"\n              [attr.data-index]=\"i\"\n              popover=\"{{ i + 1 }}\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n            >\n              <div class=\"d-flex w-100 dmx-channel-text\" [attr.data-index]=\"i\" [class.dmx-channel-text-visible]=\"showChannelNumbers\">\n                <div class=\"m-auto\" style=\"font-size: 11px\" [attr.data-index]=\"i\"><small [attr.data-index]=\"i\">&nbsp;</small></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Fixture settings -->\n        <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">\n          <div *ngIf=\"selectedFixture && selectedFixtureProfile\">\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\" for=\"fixtureName\">{{ 'designer.fixture-pool.fixture-name' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"selectedFixture.name\" maxlength=\"200\" id=\"fixtureName\" />\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.mode' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.modeShortName\"\n                  (ngModelChange)=\"selectedFixture.modeShortName = $event\"\n                >\n                  <option *ngFor=\"let mode of selectedFixtureProfile.modes\" [ngValue]=\"mode.shortName || mode.name\">\n                    {{ mode.name }}\n                    - {{ mode.channels.length }}\n                    {{ 'designer.fixture-pool.channels' | translate }}\n                  </option>\n                </select>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.first-channel' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.dmxFirstChannel\"\n                  (ngModelChange)=\"selectedFixture.dmxFirstChannel = $event\"\n                >\n                  <option *ngFor=\"let channel of dmxChannels; let i = index\" [ngValue]=\"i\">\n                    {{ i + 1 }}\n                  </option>\n                </select>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\"></label>\n              <div class=\"col-lg-9\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addCopy(selectedFixture)\">\n                  {{ 'designer.fixture.add-copy' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n", styles: [".list-group-item{padding:.3rem 1.25rem}.dmx-channel{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected{background-color:#fd7e14}.dmx-channel-overlapped{background-color:red;border:1px solid red;cursor:move}.card{overflow:auto}\n"] }]
-    }], () => [{ type: i1$1.BsModalRef }, { type: FixtureService }, { type: UuidService }, { type: ProjectService }, { type: PreviewService }, { type: i2.TranslateService }, { type: i3.ToastrService }, { type: PresetService }, { type: ConfigService }, { type: i1$1.BsModalService }], { mouseUp: [{
+        args: [{ selector: 'lib-app-fixture-pool', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ 'designer.fixture-pool.title' | translate }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"cancel(); (false)\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"row\">\n    <div class=\"col-6\">\n      <!-- Search for profiles -->\n      <input\n        type=\"text\"\n        class=\"form-control input-block mb-3\"\n        id=\"searchSet\"\n        placeholder=\"{{ 'designer.fixture-pool.search-profiles' | translate }}\"\n        (input)=\"searchExpression = $event.target.value; filterProfiles()\"\n      />\n\n      <!-- Profiles -->\n      <div class=\"card border-secondary w-100\" style=\"height: 200px\">\n        <div class=\"card-body p-0 w-100\">\n          <div class=\"list-group list-group-flush w-100\">\n            <a *ngIf=\"loadingProfiles\" class=\"list-group-item flex-column align-items-start d-flex\">\n              <p class=\"mb-0 mx-auto\">\n                <i class=\"fa fa-spinner fa-pulse fa-fw\"></i>\n              </p>\n            </a>\n\n            <div class=\"list-group-item\" *ngFor=\"let profile of filteredProfiles | sort : 'uuid'\">\n              <div class=\"row\">\n                <div class=\"col-10 col-auto my-auto pl-2\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(profile) }} mr-1\"></span> {{ profile.manufacturerName }} -\n                    {{ profile.name }}\n                  </p>\n                </div>\n                <div class=\"col-2 my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"addFixture(profile); (false)\">\n                    <i class=\"fa fa-plus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      <div>\n        <p class=\"d-inline-block mb-0 mt-2\">\n          Powered by the <a href=\"https://open-fixture-library.org/\" target=\"_blank\">Open Fixture Library</a>\n        </p>\n        <a\n          class=\"mt-2 btn btn-secondary btn-sm float-right\"\n          href=\"https://open-fixture-library.org/fixture-editor\"\n          target=\"_blank\"\n          role=\"button\"\n        >\n          <i class=\"fa fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.add-profile' | translate }}\n        </a>\n        <button\n          *ngIf=\"configService.localProfiles\"\n          type=\"button\"\n          class=\"mr-2 mt-2 btn btn-secondary btn-sm float-right\"\n          (click)=\"updateProfiles(); (false)\"\n          [disabled]=\"updatingProfiles\"\n          role=\"button\"\n        >\n          <i *ngIf=\"updatingProfiles\" class=\"fa fa-spinner fa-pulse fa-fw\" aria-hidden=\"true\"></i>\n          <i *ngIf=\"!updatingProfiles\" class=\"fa fa-download fa-fw\" aria-hidden=\"true\"></i>\n          {{ 'designer.fixture-pool.update-profiles' | translate }}\n        </button>\n      </div>\n    </div>\n    <div class=\"col-6\">\n      <div class=\"row\">\n        <!-- Add fixture from local profile -->\n        <div class=\"col-6\">\n          <button type=\"button\" class=\"btn btn-secondary\" (click)=\"createFixtureFromProfileFile()\" role=\"button\">\n            <i class=\"fa fa-plus\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.create-fixture-from-profile-file' | translate }}\n          </button>\n        </div>\n\n        <!-- Universe -->\n        <div class=\"col-6\">\n          <div class=\"form-group row\">\n            <label class=\"col-lg-4 col-form-label\">{{ 'designer.fixture-pool.universe' | translate }}</label>\n            <div class=\"col-lg-8\">\n              <select class=\"custom-select\">\n                <option>Universe 1</option>\n              </select>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div class=\"card border-secondary\" style=\"height: 235px\">\n        <div class=\"card-body p-0\">\n          <div class=\"list-group list-group-flush\" [sortablejs]=\"fixturePool\">\n            <div\n              class=\"list-group-item\"\n              *ngFor=\"let fixture of fixturePool\"\n              [class.active]=\"fixture == selectedFixture\"\n              (click)=\"selectFixture(fixture)\"\n              style=\"cursor: pointer\"\n            >\n              <div class=\"row\">\n                <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n                  <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n                </div>\n                <div class=\"col-auto flex-grow pl-0 my-auto\">\n                  <p class=\"mb-0\">\n                    <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(fixture.profileUuid)) }} mr-1\">\n                    </span\n                    >{{ fixture.name }}\n                  </p>\n                </div>\n                <div class=\"col-auto my-auto\">\n                  <a class=\"btn btn-primary btn-sm float-right\" href=\"#\" role=\"button\" (click)=\"removeFixture(fixture); (false)\">\n                    <i class=\"fa fa-minus\" aria-hidden=\"true\"></i>\n                  </a>\n                </div>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n  <div class=\"row mt-3\">\n    <div class=\"col\">\n      <!-- Tab navigation -->\n      <ul class=\"nav nav-tabs mb-4\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"sets-tab\" data-toggle=\"tab\" href=\"#dmx\" role=\"tab\">\n            <i class=\"icon-ola\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.dmx' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"compositions-tab\" data-toggle=\"tab\" href=\"#settings\" role=\"tab\">\n            <i class=\"fa fa-cog\" aria-hidden=\"true\"></i> {{ 'designer.fixture-pool.settings' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <!-- Tab content -->\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- DMX universe overview-->\n        <div class=\"tab-pane show active\" id=\"dmx\" role=\"tabpanel\">\n          <!-- Show all channel numbers -->\n          <!-- <div class=\"form-group row\">\n            <div class=\"col-auto flex-grow\"></div>\n            <div class=\"col-lg-3 d-flex\">\n              <div class=\"form-check my-auto ml-auto\">\n                <input type=\"checkbox\" class=\"form-check-input\" id=\"showChannelNumbers\" [ngModel]=\"showChannelNumbers\"\n                  (ngModelChange)=\"showChannelNumbers = $event\">\n                <label class=\"form-check-label\" for=\"showChannelNumbers\">Show channels</label>\n              </div>\n            </div>\n          </div> -->\n\n          <!-- List of DMX channels -->\n          <div>\n            <div\n              *ngFor=\"let channel of dmxChannels; let i = index\"\n              class=\"dmx-channel\"\n              [class.dmx-channel-occupied]=\"channelOccupied(i)\"\n              [class.dmx-channel-occupied-start]=\"channelOccupiedStart(i)\"\n              [class.dmx-channel-occupied-end]=\"channelOccupiedEnd(i)\"\n              [class.dmx-channel-selected]=\"channelSelected(i)\"\n              [class.dmx-channel-overlapped]=\"channelOverlapped(i)\"\n              (mousedown)=\"channelMouseDown($event)\"\n              (mouseover)=\"channelMouseOver($event)\"\n              [attr.data-index]=\"i\"\n              popover=\"{{ i + 1 }}\"\n              placement=\"top\"\n              triggers=\"mouseenter:mouseleave\"\n            >\n              <div class=\"d-flex w-100 dmx-channel-text\" [attr.data-index]=\"i\" [class.dmx-channel-text-visible]=\"showChannelNumbers\">\n                <div class=\"m-auto\" style=\"font-size: 11px\" [attr.data-index]=\"i\"><small [attr.data-index]=\"i\">&nbsp;</small></div>\n              </div>\n            </div>\n          </div>\n        </div>\n\n        <!-- Fixture settings -->\n        <div class=\"tab-pane\" id=\"settings\" role=\"tabpanel\">\n          <div *ngIf=\"selectedFixture && selectedFixtureProfile\">\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\" for=\"fixtureName\">{{ 'designer.fixture-pool.fixture-name' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <input type=\"text\" class=\"form-control\" [(ngModel)]=\"selectedFixture.name\" maxlength=\"200\" id=\"fixtureName\" />\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.mode' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.modeShortName\"\n                  (ngModelChange)=\"selectedFixture.modeShortName = $event\"\n                >\n                  <option *ngFor=\"let mode of selectedFixtureProfile.modes\" [ngValue]=\"mode.shortName || mode.name\">\n                    {{ mode.name }}\n                    - {{ fixtureService.getModeChannelCount(selectedFixtureProfile, mode) }}\n                    {{ 'designer.fixture-pool.channels' | translate }}\n                  </option>\n                </select>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\">{{ 'designer.fixture-pool.first-channel' | translate }}</label>\n              <div class=\"col-lg-9\">\n                <select\n                  class=\"custom-select\"\n                  [ngModel]=\"selectedFixture.dmxFirstChannel\"\n                  (ngModelChange)=\"selectedFixture.dmxFirstChannel = $event\"\n                >\n                  <option *ngFor=\"let channel of dmxChannels; let i = index\" [ngValue]=\"i\">\n                    {{ i + 1 }}\n                  </option>\n                </select>\n              </div>\n            </div>\n\n            <div class=\"form-group row\">\n              <label class=\"col-lg-3 col-form-label\"></label>\n              <div class=\"col-lg-9\">\n                <button type=\"button\" class=\"btn btn-primary\" (click)=\"addCopy(selectedFixture)\">\n                  {{ 'designer.fixture.add-copy' | translate }}\n                </button>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n", styles: [".list-group-item{padding:.3rem 1.25rem}.dmx-channel{display:flex;float:left;width:28px;border:1px solid white;margin-left:-1px;margin-bottom:-1px;padding-bottom:2px}.dmx-channel-occupied{background-color:#63462e;border-left:none;border-right:none;cursor:move}.dmx-channel-occupied-start{border-left:1px solid white;border-top-left-radius:8px;border-bottom-left-radius:8px}.dmx-channel-occupied-end{border-right:1px solid white;border-top-right-radius:8px;border-bottom-right-radius:8px}.dmx-channel-selected{background-color:#fd7e14}.dmx-channel-overlapped{background-color:red;border:1px solid red;cursor:move}.card{overflow:auto}\n"] }]
+    }], () => [{ type: i1$1.BsModalRef }, { type: FixtureService }, { type: UuidService }, { type: ProjectService }, { type: PreviewService }, { type: i2.TranslateService }, { type: i3$1.ToastrService }, { type: PresetService }, { type: ConfigService }, { type: i1$1.BsModalService }], { mouseUp: [{
             type: HostListener,
             args: ['window:mouseup', ['$event']]
         }], handleKeyboardEvent: [{
@@ -5669,7 +6069,7 @@ class UserLoginComponent {
             i0.ɵɵproperty("ngIf", ctx.loggingIn);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(38, 23, "designer.user.login"), " ");
-        } }, dependencies: [i5.NgIf, i4$1.ɵNgNoValidate, i4$1.DefaultValueAccessor, i4$1.NgControlStatus, i4$1.NgControlStatusGroup, i4$1.RequiredValidator, i4$1.NgModel, i4$1.NgForm, i2.TranslatePipe] }); }
+        } }, dependencies: [i5.NgIf, i4.ɵNgNoValidate, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.RequiredValidator, i4.NgModel, i4.NgForm, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserLoginComponent, [{
         type: Component,
@@ -5879,7 +6279,7 @@ class UserRegisterComponent {
             i0.ɵɵproperty("ngIf", ctx.registering);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate1("", i0.ɵɵpipeBind1(64, 40, "designer.user.register"), " ");
-        } }, dependencies: [i5.NgIf, i4$1.ɵNgNoValidate, i4$1.DefaultValueAccessor, i4$1.NgControlStatus, i4$1.NgControlStatusGroup, i4$1.RequiredValidator, i4$1.NgModel, i4$1.NgForm, i2.TranslatePipe] }); }
+        } }, dependencies: [i5.NgIf, i4.ɵNgNoValidate, i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgControlStatusGroup, i4.RequiredValidator, i4.NgModel, i4.NgForm, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(UserRegisterComponent, [{
         type: Component,
@@ -5918,6 +6318,91 @@ class UserEnsureLoginService {
             }]
     }], () => [{ type: UserService }, { type: i1$1.BsModalService }, { type: ConfigService }], null); })();
 
+class DropzoneComponent {
+    set url(value) {
+        this._url = value;
+        this.updateConfig();
+    }
+    set acceptedFiles(value) {
+        this._acceptedFiles = value;
+        this.updateConfig();
+    }
+    set maxFiles(value) {
+        this._maxFiles = value;
+        this.updateConfig();
+    }
+    constructor(translateService, configService) {
+        this.translateService = translateService;
+        this.configService = configService;
+        this.error = new EventEmitter();
+        this.success = new EventEmitter();
+        this.addedFile = new EventEmitter();
+        this._maxFiles = undefined;
+        this.translateService
+            .get('designer.misc.dropzone-message')
+            .pipe(map((result) => {
+            this.uploadMessage = '<h3 class="mb-0"><i class="fa fa-cloud-upload"></i></h3>' + result;
+        }))
+            .subscribe();
+        this.updateConfig();
+    }
+    updateConfig() {
+        this.dropzoneConfig = {
+            url: this.configService.restUrl + this._url,
+            paramName: 'file',
+            addRemoveLinks: false,
+            maxFilesize: null /* unlimited */,
+            acceptedFiles: this._acceptedFiles,
+            timeout: 0,
+            chunking: this.configService.dropzoneChunking,
+            forceChunking: this.configService.dropzoneChunking,
+            parallelUploads: 1,
+            maxFiles: this._maxFiles,
+            previewTemplate: `
+      <div class="dz-preview dz-file-preview">
+        <!-- The attachment details -->
+        <div class="dz-details" style="text-align: left">
+          <i class="fa fa-file-o"></i> <span data-dz-name></span> <small><span class="label label-default file-size" data-dz-size></span></small>
+        </div>
+
+        <!--div class="mt-5">
+          <span data-dz-errormessage></span>
+        </div-->
+
+        <div class="progress mt-4 mb-1" style="height: 10px">
+          <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" style="width:0%;" data-dz-uploadprogress></div>
+        </div>
+      </div>
+      `,
+        };
+    }
+    static { this.ɵfac = function DropzoneComponent_Factory(t) { return new (t || DropzoneComponent)(i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(ConfigService)); }; }
+    static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DropzoneComponent, selectors: [["app-dropzone"]], inputs: { url: "url", acceptedFiles: "acceptedFiles", maxFiles: "maxFiles" }, outputs: { error: "error", success: "success", addedFile: "addedFile" }, decls: 1, vars: 3, consts: [[3, "error", "success", "addedFile", "config", "useDropzoneClass", "message"]], template: function DropzoneComponent_Template(rf, ctx) { if (rf & 1) {
+            i0.ɵɵelementStart(0, "dropzone", 0);
+            i0.ɵɵlistener("error", function DropzoneComponent_Template_dropzone_error_0_listener($event) { return ctx.error.emit($event); })("success", function DropzoneComponent_Template_dropzone_success_0_listener($event) { return ctx.success.emit($event); })("addedFile", function DropzoneComponent_Template_dropzone_addedFile_0_listener($event) { return ctx.addedFile.emit($event); });
+            i0.ɵɵelementEnd();
+        } if (rf & 2) {
+            i0.ɵɵproperty("config", ctx.dropzoneConfig)("useDropzoneClass", "false")("message", ctx.uploadMessage);
+        } }, dependencies: [i5$1.DropzoneComponent] }); }
+}
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DropzoneComponent, [{
+        type: Component,
+        args: [{ selector: 'app-dropzone', template: "<dropzone\n  [config]=\"dropzoneConfig\"\n  [useDropzoneClass]=\"'false'\"\n  [message]=\"uploadMessage\"\n  (error)=\"error.emit($event)\"\n  (success)=\"success.emit($event)\"\n  (addedFile)=\"addedFile.emit($event)\"\n></dropzone>\n" }]
+    }], () => [{ type: i2.TranslateService }, { type: ConfigService }], { error: [{
+            type: Output
+        }], success: [{
+            type: Output
+        }], addedFile: [{
+            type: Output
+        }], url: [{
+            type: Input
+        }], acceptedFiles: [{
+            type: Input
+        }], maxFiles: [{
+            type: Input
+        }] }); })();
+(() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(DropzoneComponent, { className: "DropzoneComponent" }); })();
+
 function CompositionSettingsComponent_div_22_div_4_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div");
     i0.ɵɵtext(1);
@@ -5977,8 +6462,8 @@ function CompositionSettingsComponent_div_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtemplate(4, CompositionSettingsComponent_div_22_div_4_Template, 3, 3, "div", 19)(5, CompositionSettingsComponent_div_22_div_5_Template, 2, 1, "div", 19);
     i0.ɵɵelementEnd()();
     i0.ɵɵtemplate(6, CompositionSettingsComponent_div_22_ul_6_Template, 11, 6, "ul", 20);
-    i0.ɵɵelementStart(7, "div", 21)(8, "div", 22)(9, "dropzone", 23);
-    i0.ɵɵlistener("error", function CompositionSettingsComponent_div_22_Template_dropzone_error_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadError($event)); })("success", function CompositionSettingsComponent_div_22_Template_dropzone_success_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadSuccess($event)); })("queuecomplete", function CompositionSettingsComponent_div_22_Template_dropzone_queuecomplete_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onQueueComplete($event)); })("addedfile", function CompositionSettingsComponent_div_22_Template_dropzone_addedfile_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAddedFile($event)); });
+    i0.ɵɵelementStart(7, "div", 21)(8, "div", 22)(9, "app-dropzone", 23);
+    i0.ɵɵlistener("error", function CompositionSettingsComponent_div_22_Template_app_dropzone_error_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadError($event)); })("success", function CompositionSettingsComponent_div_22_Template_app_dropzone_success_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onUploadSuccess($event)); })("queuecomplete", function CompositionSettingsComponent_div_22_Template_app_dropzone_queuecomplete_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onQueueComplete($event)); })("addedfile", function CompositionSettingsComponent_div_22_Template_app_dropzone_addedfile_9_listener($event) { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.onAddedFile($event)); });
     i0.ɵɵelementEnd()();
     i0.ɵɵelementStart(10, "div", 24)(11, "input", 25);
     i0.ɵɵpipe(12, "translate");
@@ -5997,11 +6482,11 @@ function CompositionSettingsComponent_div_22_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance();
     i0.ɵɵproperty("ngIf", ctx_r1.configService.enableMediaLibrary);
     i0.ɵɵadvance(3);
-    i0.ɵɵproperty("config", ctx_r1.dropzoneConfig)("useDropzoneClass", "false")("message", ctx_r1.uploadMessage);
+    i0.ɵɵproperty("url", ctx_r1.getDropzoneUrl())("acceptedFiles", "audio/*");
     i0.ɵɵadvance(2);
-    i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(12, 8, "designer.misc.search"));
+    i0.ɵɵpropertyInterpolate("placeholder", i0.ɵɵpipeBind1(12, 7, "designer.misc.search"));
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(17, 10, ctx_r1.filteredExistingFiles, "name"));
+    i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind2(17, 9, ctx_r1.filteredExistingFiles, "name"));
 } }
 class CompositionSettingsComponent {
     constructor(bsModalRef, timelineService, configService, translateService, http, warningDialogService, toastrService, projectService) {
@@ -6020,40 +6505,6 @@ class CompositionSettingsComponent {
         this.uploading = false;
     }
     ngOnInit() {
-        const projectId = this.projectService.project.id ? this.projectService.project.id : '';
-        this.dropzoneConfig = {
-            url: this.configService.restUrl + 'file/upload?compositionUuid=' + this.composition.uuid + '&projectId=' + projectId,
-            addRemoveLinks: false,
-            maxFilesize: 100 /* 100 MB */,
-            acceptedFiles: 'audio/*',
-            timeout: 0,
-            parallelUploads: 1,
-            previewTemplate: `
-      <div class="dz-preview dz-file-preview">
-        <!-- The attachment details -->
-        <div class="dz-details" style="text-align: left">
-          <i class="fa fa-file-o"></i> <span data-dz-name></span> <small>
-          <span class="label label-default file-size" data-dz-size></span></small>
-        </div>
-
-        <!--div class="mt-5">
-          <span data-dz-errormessage></span>
-        </div-->
-
-        <div class="progress mt-4 mb-1" style="height: 10px">
-          <div class="progress-bar progress-bar-striped progress-bar-animated"
-            role="progressbar" style="width:0%;" data-dz-uploadprogress>
-          </div>
-        </div>
-      </div>
-      `,
-        };
-        this.translateService
-            .get('designer.misc.dropzone-message')
-            .pipe(map((result) => {
-            this.uploadMessage = '<h3 class="mb-0"><i class="fa fa-cloud-upload"></i></h3>' + result;
-        }))
-            .subscribe();
         this.loadFiles();
         if (this.timelineService.externalCompositionsAvailable) {
             this.timelineService.getExternalCompositionNames().subscribe((compositionNames) => {
@@ -6061,6 +6512,10 @@ class CompositionSettingsComponent {
             });
         }
     }
+    getDropzoneUrl() {
+        const projectId = this.projectService.project.id ? this.projectService.project.id : '';
+        return 'file/upload?compositionUuid=' + this.composition.uuid + '&projectId=' + projectId;
+    }
     ok() {
         this.onClose.next(1);
         this.bsModalRef.hide();
@@ -6154,10 +6609,10 @@ class CompositionSettingsComponent {
         }))
             .subscribe();
     }
-    static { this.ɵfac = function CompositionSettingsComponent_Factory(t) { return new (t || CompositionSettingsComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i1.HttpClient), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(i3.ToastrService), i0.ɵɵdirectiveInject(ProjectService)); }; }
+    static { this.ɵfac = function CompositionSettingsComponent_Factory(t) { return new (t || CompositionSettingsComponent)(i0.ɵɵdirectiveInject(i1$1.BsModalRef), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(i1.HttpClient), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(i3$1.ToastrService), i0.ɵɵdirectiveInject(ProjectService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: CompositionSettingsComponent, selectors: [["lib-app-composition-settings"]], hostBindings: function CompositionSettingsComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown.enter", function CompositionSettingsComponent_keydown_enter_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, false, i0.ɵɵresolveDocument);
-        } }, decls: 30, vars: 21, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [1, "form-group", "row"], [1, "col-lg-4", "col-form-label"], [1, "col-lg-8", "d-flex"], ["type", "text", 1, "form-control", 3, "ngModelChange", "ngModel", "typeahead"], [1, "custom-select", 3, "ngModelChange", "ngModel"], ["value", "audio"], ["class", "row", 4, "ngIf"], [1, "modal-footer"], ["href", "#", "role", "button", 1, "mr-3", "my-auto", 3, "click"], ["type", "button", 1, "btn", "btn-primary", 3, "click", "disabled"], [1, "row"], [1, "px-3", "w-100"], [1, "card", "border-secondary", "mb-3"], [1, "card-body"], [4, "ngIf"], ["class", "nav nav-tabs mb-3", "id", "myTab", "role", "tablist", 4, "ngIf"], ["id", "myTabContent", 1, "tab-content"], ["id", "upload", "role", "tabpanel", 1, "tab-pane", "fade", "show", "active"], [3, "error", "success", "queuecomplete", "addedfile", "config", "useDropzoneClass", "message"], ["id", "media-library", "role", "tabpanel", 1, "tab-pane", "fade"], ["type", "text", "id", "searchFileList", 1, "form-control", "input-block", "mb-3", 3, "input", "placeholder"], [1, "card", "border-secondary", 2, "height", "200px", "overflow-y", "scroll"], [1, "card-body", "p-0"], [1, "list-group", "list-group-flush"], ["class", "list-group-item", "href", "#", 3, "active", "click", 4, "ngFor", "ngForOf"], ["id", "myTab", "role", "tablist", 1, "nav", "nav-tabs", "mb-3"], [1, "nav-item"], ["id", "upload-tab", "data-toggle", "tab", "href", "#upload", "role", "tab", 1, "nav-link", "active"], ["aria-hidden", "true", 1, "fa", "fa-upload"], ["id", "media-library-tab", "data-toggle", "tab", "href", "#media-library", "role", "tab", 1, "nav-link"], ["aria-hidden", "true", 1, "fa", "fa-folder-o"], ["href", "#", 1, "list-group-item", 3, "click"], [1, "col-auto", "my-auto", "flex-grow", "text-break-word"], [1, "col-auto", "my-auto", "pl-0", "text-danger", "float-right", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-trash-o"]], template: function CompositionSettingsComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, decls: 30, vars: 21, consts: [[1, "modal-header"], [1, "modal-title", "pull-left"], ["type", "button", "aria-label", "Close", 1, "close", "pull-right", 3, "click"], ["aria-hidden", "true"], [1, "modal-body"], [1, "form-group", "row"], [1, "col-lg-4", "col-form-label"], [1, "col-lg-8", "d-flex"], ["type", "text", 1, "form-control", 3, "ngModelChange", "ngModel", "typeahead"], [1, "custom-select", 3, "ngModelChange", "ngModel"], ["value", "audio"], ["class", "row", 4, "ngIf"], [1, "modal-footer"], ["href", "#", "role", "button", 1, "mr-3", "my-auto", 3, "click"], ["type", "button", 1, "btn", "btn-primary", 3, "click", "disabled"], [1, "row"], [1, "px-3", "w-100"], [1, "card", "border-secondary", "mb-3"], [1, "card-body"], [4, "ngIf"], ["class", "nav nav-tabs mb-3", "id", "myTab", "role", "tablist", 4, "ngIf"], ["id", "myTabContent", 1, "tab-content"], ["id", "upload", "role", "tabpanel", 1, "tab-pane", "fade", "show", "active"], [3, "error", "success", "queuecomplete", "addedfile", "url", "acceptedFiles"], ["id", "media-library", "role", "tabpanel", 1, "tab-pane", "fade"], ["type", "text", "id", "searchFileList", 1, "form-control", "input-block", "mb-3", 3, "input", "placeholder"], [1, "card", "border-secondary", 2, "height", "200px", "overflow-y", "scroll"], [1, "card-body", "p-0"], [1, "list-group", "list-group-flush"], ["class", "list-group-item", "href", "#", 3, "active", "click", 4, "ngFor", "ngForOf"], ["id", "myTab", "role", "tablist", 1, "nav", "nav-tabs", "mb-3"], [1, "nav-item"], ["id", "upload-tab", "data-toggle", "tab", "href", "#upload", "role", "tab", 1, "nav-link", "active"], ["aria-hidden", "true", 1, "fa", "fa-upload"], ["id", "media-library-tab", "data-toggle", "tab", "href", "#media-library", "role", "tab", 1, "nav-link"], ["aria-hidden", "true", 1, "fa", "fa-folder-o"], ["href", "#", 1, "list-group-item", 3, "click"], [1, "col-auto", "my-auto", "flex-grow", "text-break-word"], [1, "col-auto", "my-auto", "pl-0", "text-danger", "float-right", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-trash-o"]], template: function CompositionSettingsComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "h4", 1);
             i0.ɵɵtext(2);
             i0.ɵɵelementEnd();
@@ -6183,7 +6638,7 @@ class CompositionSettingsComponent {
             i0.ɵɵtext(20);
             i0.ɵɵpipe(21, "translate");
             i0.ɵɵelementEnd()()()();
-            i0.ɵɵtemplate(22, CompositionSettingsComponent_div_22_Template, 18, 13, "div", 11);
+            i0.ɵɵtemplate(22, CompositionSettingsComponent_div_22_Template, 18, 12, "div", 11);
             i0.ɵɵelementEnd();
             i0.ɵɵelementStart(23, "div", 12)(24, "a", 13);
             i0.ɵɵlistener("click", function CompositionSettingsComponent_Template_a_click_24_listener() { ctx.cancel(); return false; });
@@ -6216,12 +6671,12 @@ class CompositionSettingsComponent {
             i0.ɵɵproperty("disabled", ctx.uploading);
             i0.ɵɵadvance();
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(29, 19, "designer.misc.ok"));
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.NgSelectOption, i4$1.ɵNgSelectMultipleOption, i4$1.DefaultValueAccessor, i4$1.SelectControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i11.TypeaheadDirective, i5$1.DropzoneComponent, i2.TranslatePipe, ArraySortPipe] }); }
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i11.TypeaheadDirective, DropzoneComponent, i2.TranslatePipe, ArraySortPipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(CompositionSettingsComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-composition-settings', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ composition.name }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.composition-name' | translate }}</label>\n    <div class=\"col-lg-8 d-flex\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        [ngModel]=\"composition.name\"\n        (ngModelChange)=\"composition.name = $event\"\n        [typeahead]=\"existingCompositionNames\"\n      />\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.composition-sync-type' | translate }}</label>\n    <div class=\"col-lg-8 d-flex\">\n      <select class=\"custom-select\" [ngModel]=\"composition.syncType\" (ngModelChange)=\"composition.syncType = $event\">\n        <!-- TODO -->\n        <!-- <option value=\"none\">{{ 'designer.timeline.composition-sync-type-none' | translate }}</option> -->\n        <option value=\"audio\">{{ 'designer.timeline.composition-sync-type-audio' | translate }}</option>\n      </select>\n    </div>\n  </div>\n\n  <div *ngIf=\"composition.syncType == 'audio'\" class=\"row\">\n    <div class=\"px-3 w-100\">\n      <!-- Selected file -->\n      <div class=\"card border-secondary mb-3\">\n        <div class=\"card-body\">\n          <!-- No file selected -->\n          <div *ngIf=\"!composition.audioFileName\">\n            {{ 'designer.timeline.composition-no-file-selected' | translate }}\n          </div>\n\n          <!-- A file is selected -->\n          <div *ngIf=\"composition.audioFileName\">\n            {{ composition.audioFileName }}\n          </div>\n        </div>\n      </div>\n\n      <!-- Choose file -->\n      <ul *ngIf=\"configService.enableMediaLibrary\" class=\"nav nav-tabs mb-3\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"upload-tab\" data-toggle=\"tab\" href=\"#upload\" role=\"tab\">\n            <i class=\"fa fa-upload\" aria-hidden=\"true\"></i>\n            {{ 'designer.timeline.composition-file-upload' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"media-library-tab\" data-toggle=\"tab\" href=\"#media-library\" role=\"tab\">\n            <i class=\"fa fa-folder-o\" aria-hidden=\"true\"></i>\n            {{ 'designer.timeline.composition-file-library' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- Upload -->\n        <div class=\"tab-pane fade show active\" id=\"upload\" role=\"tabpanel\">\n          <!-- Dropzone -->\n          <dropzone\n            [config]=\"dropzoneConfig\"\n            [useDropzoneClass]=\"'false'\"\n            [message]=\"uploadMessage\"\n            (error)=\"onUploadError($event)\"\n            (success)=\"onUploadSuccess($event)\"\n            (queuecomplete)=\"onQueueComplete($event)\"\n            (addedfile)=\"onAddedFile($event)\"\n          ></dropzone>\n        </div>\n\n        <!-- Media library -->\n        <div class=\"tab-pane fade\" id=\"media-library\" role=\"tabpanel\">\n          <input\n            type=\"text\"\n            class=\"form-control input-block mb-3\"\n            id=\"searchFileList\"\n            placeholder=\"{{ 'designer.misc.search' | translate }}\"\n            (input)=\"filterExistingFiles($event.target.value)\"\n          />\n\n          <div class=\"card border-secondary\" style=\"height: 200px; overflow-y: scroll\">\n            <div class=\"card-body p-0\">\n              <div class=\"list-group list-group-flush\">\n                <a\n                  *ngFor=\"let existingFile of filteredExistingFiles | sort: 'name'\"\n                  class=\"list-group-item\"\n                  [class.active]=\"composition.audioFileName == existingFile\"\n                  href=\"#\"\n                  (click)=\"selectExistingFile(existingFile); (false)\"\n                >\n                  <div class=\"row\">\n                    <div class=\"col-auto my-auto flex-grow text-break-word\">\n                      {{ existingFile }}\n                    </div>\n\n                    <div class=\"col-auto my-auto pl-0 text-danger float-right\" (click)=\"deleteFile(existingFile); (false)\">\n                      <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                    </div>\n                  </div>\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button [disabled]=\"uploading\" type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n" }]
-    }], () => [{ type: i1$1.BsModalRef }, { type: TimelineService }, { type: ConfigService }, { type: i2.TranslateService }, { type: i1.HttpClient }, { type: WarningDialogService }, { type: i3.ToastrService }, { type: ProjectService }], { handleKeyboardEvent: [{
+        args: [{ selector: 'lib-app-composition-settings', template: "<div class=\"modal-header\">\n  <h4 class=\"modal-title pull-left\">{{ composition.name }}</h4>\n  <button type=\"button\" class=\"close pull-right\" aria-label=\"Close\" (click)=\"bsModalRef.hide()\">\n    <span aria-hidden=\"true\">&times;</span>\n  </button>\n</div>\n<div class=\"modal-body\">\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.composition-name' | translate }}</label>\n    <div class=\"col-lg-8 d-flex\">\n      <input\n        type=\"text\"\n        class=\"form-control\"\n        [ngModel]=\"composition.name\"\n        (ngModelChange)=\"composition.name = $event\"\n        [typeahead]=\"existingCompositionNames\"\n      />\n    </div>\n  </div>\n\n  <div class=\"form-group row\">\n    <label class=\"col-lg-4 col-form-label\">{{ 'designer.timeline.composition-sync-type' | translate }}</label>\n    <div class=\"col-lg-8 d-flex\">\n      <select class=\"custom-select\" [ngModel]=\"composition.syncType\" (ngModelChange)=\"composition.syncType = $event\">\n        <!-- TODO -->\n        <!-- <option value=\"none\">{{ 'designer.timeline.composition-sync-type-none' | translate }}</option> -->\n        <option value=\"audio\">{{ 'designer.timeline.composition-sync-type-audio' | translate }}</option>\n      </select>\n    </div>\n  </div>\n\n  <div *ngIf=\"composition.syncType == 'audio'\" class=\"row\">\n    <div class=\"px-3 w-100\">\n      <!-- Selected file -->\n      <div class=\"card border-secondary mb-3\">\n        <div class=\"card-body\">\n          <!-- No file selected -->\n          <div *ngIf=\"!composition.audioFileName\">\n            {{ 'designer.timeline.composition-no-file-selected' | translate }}\n          </div>\n\n          <!-- A file is selected -->\n          <div *ngIf=\"composition.audioFileName\">\n            {{ composition.audioFileName }}\n          </div>\n        </div>\n      </div>\n\n      <!-- Choose file -->\n      <ul *ngIf=\"configService.enableMediaLibrary\" class=\"nav nav-tabs mb-3\" id=\"myTab\" role=\"tablist\">\n        <li class=\"nav-item\">\n          <a class=\"nav-link active\" id=\"upload-tab\" data-toggle=\"tab\" href=\"#upload\" role=\"tab\">\n            <i class=\"fa fa-upload\" aria-hidden=\"true\"></i>\n            {{ 'designer.timeline.composition-file-upload' | translate }}\n          </a>\n        </li>\n        <li class=\"nav-item\">\n          <a class=\"nav-link\" id=\"media-library-tab\" data-toggle=\"tab\" href=\"#media-library\" role=\"tab\">\n            <i class=\"fa fa-folder-o\" aria-hidden=\"true\"></i>\n            {{ 'designer.timeline.composition-file-library' | translate }}\n          </a>\n        </li>\n      </ul>\n\n      <div class=\"tab-content\" id=\"myTabContent\">\n        <!-- Upload -->\n        <div class=\"tab-pane fade show active\" id=\"upload\" role=\"tabpanel\">\n          <app-dropzone\n            [url]=\"getDropzoneUrl()\"\n            [acceptedFiles]=\"'audio/*'\"\n            (error)=\"onUploadError($event)\"\n            (success)=\"onUploadSuccess($event)\"\n            (queuecomplete)=\"onQueueComplete($event)\"\n            (addedfile)=\"onAddedFile($event)\"\n          ></app-dropzone>\n        </div>\n\n        <!-- Media library -->\n        <div class=\"tab-pane fade\" id=\"media-library\" role=\"tabpanel\">\n          <input\n            type=\"text\"\n            class=\"form-control input-block mb-3\"\n            id=\"searchFileList\"\n            placeholder=\"{{ 'designer.misc.search' | translate }}\"\n            (input)=\"filterExistingFiles($event.target.value)\"\n          />\n\n          <div class=\"card border-secondary\" style=\"height: 200px; overflow-y: scroll\">\n            <div class=\"card-body p-0\">\n              <div class=\"list-group list-group-flush\">\n                <a\n                  *ngFor=\"let existingFile of filteredExistingFiles | sort : 'name'\"\n                  class=\"list-group-item\"\n                  [class.active]=\"composition.audioFileName == existingFile\"\n                  href=\"#\"\n                  (click)=\"selectExistingFile(existingFile); (false)\"\n                >\n                  <div class=\"row\">\n                    <div class=\"col-auto my-auto flex-grow text-break-word\">\n                      {{ existingFile }}\n                    </div>\n\n                    <div class=\"col-auto my-auto pl-0 text-danger float-right\" (click)=\"deleteFile(existingFile); (false)\">\n                      <i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i>\n                    </div>\n                  </div>\n                </a>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n    </div>\n  </div>\n</div>\n<div class=\"modal-footer\">\n  <a class=\"mr-3 my-auto\" href=\"#\" role=\"button\" (click)=\"cancel(); (false)\">\n    {{ 'designer.misc.cancel' | translate }}\n  </a>\n  <button [disabled]=\"uploading\" type=\"button\" class=\"btn btn-primary\" (click)=\"ok()\">{{ 'designer.misc.ok' | translate }}</button>\n</div>\n" }]
+    }], () => [{ type: i1$1.BsModalRef }, { type: TimelineService }, { type: ConfigService }, { type: i2.TranslateService }, { type: i1.HttpClient }, { type: WarningDialogService }, { type: i3$1.ToastrService }, { type: ProjectService }], { handleKeyboardEvent: [{
             type: HostListener,
             args: ['document:keydown.enter', ['$event']]
         }] }); })();
@@ -6423,7 +6878,7 @@ class TimelineGridComponent {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 23, "designer.misc.cancel"), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(38, 25, "designer.misc.ok"));
-        } }, dependencies: [i5.NgIf, i4$1.NgSelectOption, i4$1.ɵNgSelectMultipleOption, i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.SelectControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i2.TranslatePipe] }); }
+        } }, dependencies: [i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineGridComponent, [{
         type: Component,
@@ -6801,7 +7256,7 @@ class TimelineComponent {
             i0.ɵɵproperty("ngIf", ctx.timelineService.selectedComposition);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.projectService.project.compositions.length == 0);
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.NgSelectOption, i4$1.ɵNgSelectMultipleOption, i4$1.DefaultValueAccessor, i4$1.SelectControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent, i12.PopoverDirective, i2.TranslatePipe] }); }
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i12.PopoverDirective, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(TimelineComponent, [{
         type: Component,
@@ -6950,7 +7405,7 @@ class SceneSettingsComponent {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(52, 29, "designer.misc.cancel"), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(55, 31, "designer.misc.ok"));
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i2.TranslatePipe] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(SceneSettingsComponent, [{
         type: Component,
@@ -7058,7 +7513,7 @@ class SceneComponent {
 function FixtureComponent_div_12_div_1_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "div", 12)(1, "div", 13);
-    i0.ɵɵlistener("click", function FixtureComponent_div_12_div_1_Template_div_click_1_listener($event) { const item_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectFixture($event, item_r2)); });
+    i0.ɵɵlistener("click", function FixtureComponent_div_12_div_1_Template_div_click_1_listener($event) { const presetFixture_r2 = i0.ɵɵrestoreView(_r1).$implicit; const ctx_r2 = i0.ɵɵnextContext(2); return i0.ɵɵresetView(ctx_r2.selectFixture($event, presetFixture_r2)); });
     i0.ɵɵelementStart(2, "div", 14);
     i0.ɵɵelement(3, "i", 15);
     i0.ɵɵelementEnd();
@@ -7070,15 +7525,15 @@ function FixtureComponent_div_12_div_1_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵtext(8);
     i0.ɵɵelementEnd()()();
 } if (rf & 2) {
-    const item_r2 = ctx.$implicit;
+    const presetFixture_r2 = ctx.$implicit;
     const ctx_r2 = i0.ɵɵnextContext(2);
-    i0.ɵɵclassProp("inactive-list-item", !ctx_r2.fixtureIsSelected(item_r2));
+    i0.ɵɵclassProp("inactive-list-item", !ctx_r2.fixtureIsSelected(presetFixture_r2));
     i0.ɵɵadvance(5);
-    i0.ɵɵproperty("ngModel", ctx_r2.fixtureIsSelected(item_r2));
+    i0.ɵɵproperty("ngModel", ctx_r2.fixtureIsSelected(presetFixture_r2));
     i0.ɵɵadvance(2);
-    i0.ɵɵclassMapInterpolate1("icon-", ctx_r2.fixtureService.getFixtureIconClass(ctx_r2.fixtureService.getProfileByUuid(item_r2.profileUuid)), " mr-1");
+    i0.ɵɵclassMapInterpolate1("icon-", ctx_r2.fixtureService.getFixtureIconClass(ctx_r2.fixtureService.getProfileByUuid(ctx_r2.fixtureService.getFixtureByUuid(presetFixture_r2.fixtureUuid).profileUuid)), " mr-1");
     i0.ɵɵadvance();
-    i0.ɵɵtextInterpolate1(" ", item_r2.name, " ");
+    i0.ɵɵtextInterpolate1(" ", ctx_r2.fixtureName(presetFixture_r2), " ");
 } }
 function FixtureComponent_div_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementStart(0, "div", 10);
@@ -7086,9 +7541,9 @@ function FixtureComponent_div_12_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵelementEnd();
 } if (rf & 2) {
     const ctx_r2 = i0.ɵɵnextContext();
-    i0.ɵɵproperty("sortablejs", ctx_r2.projectService.project.fixtures);
+    i0.ɵɵproperty("sortablejs", ctx_r2.projectService.project.presetFixtures);
     i0.ɵɵadvance();
-    i0.ɵɵproperty("ngForOf", ctx_r2.projectService.project.fixtures);
+    i0.ɵɵproperty("ngForOf", ctx_r2.projectService.project.presetFixtures);
 } }
 function FixtureComponent_div_13_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
@@ -7111,15 +7566,25 @@ class FixtureComponent {
         this.introService = introService;
     }
     ngOnInit() { }
-    fixtureIsSelected(fixture) {
+    fixtureName(presetFixture) {
+        let name;
+        name = this.fixtureService.getFixtureByUuid(presetFixture.fixtureUuid).name;
+        if (presetFixture.pixelKey) {
+            name += ' - ' + presetFixture.pixelKey;
+        }
+        return name;
+    }
+    fixtureIsSelected(presetFixture) {
+        const fixture = this.fixtureService.getFixtureByUuid(presetFixture.fixtureUuid);
         if (this.fixtureService.settingsSelection) {
             return this.fixtureService.settingsFixtureIsSelected(fixture);
         }
         else {
-            return this.presetService.fixtureIsSelected(fixture);
+            return this.presetService.fixtureIsSelected(fixture, presetFixture.pixelKey);
         }
     }
-    selectFixture(event, fixture) {
+    selectFixture(event, presetFixture) {
+        const fixture = this.fixtureService.getFixtureByUuid(presetFixture.fixtureUuid);
         if (this.fixtureService.settingsSelection) {
             // select fixtures for the settings
             this.fixtureService.switchSettingsFixtureSelection(fixture);
@@ -7127,7 +7592,7 @@ class FixtureComponent {
         }
         else {
             // select fixtures for the current preset
-            this.presetService.switchFixtureSelection(fixture);
+            this.presetService.switchFixtureSelection(fixture, presetFixture.pixelKey);
             this.presetService.fixtureSelectionChanged.next();
             this.presetService.previewLive();
         }
@@ -7168,12 +7633,12 @@ class FixtureComponent {
             i0.ɵɵadvance(12);
             i0.ɵɵproperty("ngIf", ctx.presetService.selectedPreset);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.projectService.project.fixtures.length == 0);
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i8.SortablejsDirective, i2.TranslatePipe] }); }
+            i0.ɵɵproperty("ngIf", ctx.projectService.project.presetFixtures.length == 0);
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i8.SortablejsDirective, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture', template: "<div class=\"card border-secondary h-100 panel\" [class.card-intro-active]=\"introService.showStep('fixtures')\">\n  <div class=\"card-header d-flex\">\n    <div>Fixtures</div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"selectNone(); (false)\"\n        ><i class=\"fa fa-square-o fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"selectAll(); (false)\"\n        ><i class=\"fa fa-check-square-o fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"openFixturePool(); (false)\"\n        ><i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of fixtures -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"list-group\" [sortablejs]=\"projectService.project.fixtures\">\n      <div\n        class=\"list-group-item\"\n        *ngFor=\"let item of projectService.project.fixtures\"\n        [class.inactive-list-item]=\"!fixtureIsSelected(item)\"\n      >\n        <div class=\"row d-flex\" (click)=\"selectFixture($event, item)\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"active\" [ngModel]=\"fixtureIsSelected(item)\" />\n          </div>\n          <div>\n            <span class=\"icon-{{ fixtureService.getFixtureIconClass(fixtureService.getProfileByUuid(item.profileUuid)) }} mr-1\"></span>\n            {{ item.name }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"w-100 h-100 d-flex p-3 text-center\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"openFixturePool(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.fixture.no-fixtures' | translate }}</a\n      >\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'lib-app-fixture', template: "<div class=\"card border-secondary h-100 panel\" [class.card-intro-active]=\"introService.showStep('fixtures')\">\n  <div class=\"card-header d-flex\">\n    <div>Fixtures</div>\n    <div class=\"ml-auto\">\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"selectNone(); (false)\"\n        ><i class=\"fa fa-square-o fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"selectAll(); (false)\"\n        ><i class=\"fa fa-check-square-o fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n      <a href=\"#\" class=\"btn btn-secondary m-0, p-0\" (click)=\"openFixturePool(); (false)\"\n        ><i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i\n      ></a>\n    </div>\n  </div>\n\n  <div class=\"card-body h-100 p-0\">\n    <!-- List of fixtures -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"list-group\" [sortablejs]=\"projectService.project.presetFixtures\">\n      <div\n        class=\"list-group-item\"\n        *ngFor=\"let presetFixture of projectService.project.presetFixtures\"\n        [class.inactive-list-item]=\"!fixtureIsSelected(presetFixture)\"\n      >\n        <div class=\"row d-flex\" (click)=\"selectFixture($event, presetFixture)\" style=\"cursor: pointer\">\n          <div class=\"col-auto list-sort-handle my-auto\" style=\"cursor: move; cursor: -webkit-grabbing\">\n            <i class=\"fa fa-bars\" aria-hidden=\"true\"></i>\n          </div>\n          <div class=\"form-check\">\n            <input type=\"checkbox\" class=\"form-check-input\" id=\"active\" [ngModel]=\"fixtureIsSelected(presetFixture)\" />\n          </div>\n          <div>\n            <span\n              class=\"icon-{{\n                fixtureService.getFixtureIconClass(\n                  fixtureService.getProfileByUuid(fixtureService.getFixtureByUuid(presetFixture.fixtureUuid).profileUuid)\n                )\n              }} mr-1\"\n            ></span>\n            {{ fixtureName(presetFixture) }}\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div *ngIf=\"projectService.project.presetFixtures.length == 0\" class=\"w-100 h-100 d-flex p-3 text-center\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"openFixturePool(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.fixture.no-fixtures' | translate }}</a\n      >\n    </div>\n  </div>\n</div>\n" }]
     }], () => [{ type: ProjectService }, { type: PresetService }, { type: FixturePoolService }, { type: FixtureService }, { type: IntroService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureComponent, { className: "FixtureComponent" }); })();
 
@@ -7307,7 +7772,7 @@ class FixtureCapabilityColorComponent {
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(7, 5, "designer.fixture.capability-color"));
             i0.ɵɵadvance(3);
             i0.ɵɵtwoWayProperty("ngModel", ctx.color);
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i2.TranslatePipe] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityColorComponent, [{
         type: Component,
@@ -7378,7 +7843,7 @@ class FixtureCapabilityDimmerComponent {
             i0.ɵɵproperty("ngModel", ctx.getValueText() >= 0 ? ctx.getValueText() : 0);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.getValue() >= 0 ? ctx.getValue() : 0)("orientation", "vertical")("reversed", true)("tooltip", "hide")("min", 0)("max", 1)("step", 0.001);
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityDimmerComponent, [{
         type: Component,
@@ -7489,7 +7954,7 @@ class FixtureCapabilityPanTiltComponent {
             i0.ɵɵproperty("ngModel", ctx.getValueTextTilt() >= 0 ? ctx.getValueTextTilt() : 0);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("value", ctx.getValueTilt() >= 0 ? ctx.getValueTilt() : 0)("orientation", "vertical")("reversed", true)("tooltip", "hide")("min", 0)("max", 1)("step", 0.001);
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent, i2.TranslatePipe] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityPanTiltComponent, [{
         type: Component,
@@ -7682,7 +8147,7 @@ class FixtureCapabilityColorWheelComponent {
             i0.ɵɵproperty("ngIf", ctx.showContainer);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.wheel);
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i5.NgStyle, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i2.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected[_ngcontent-%COMP%]{border-width:3px;border-color:#fff}.color-selected-inner[_ngcontent-%COMP%]{border:solid 1px black;height:100%;width:100%}"] }); }
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i5.NgStyle, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i2.TranslatePipe], styles: [".color[_ngcontent-%COMP%]{box-sizing:border-box;width:50px;height:50px;border:solid 1px #ced4da;cursor:pointer}.color-selected[_ngcontent-%COMP%]{border-width:3px;border-color:#fff}.color-selected-inner[_ngcontent-%COMP%]{border:solid 1px black;height:100%;width:100%}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityColorWheelComponent, [{
         type: Component,
@@ -7799,8 +8264,8 @@ class FixtureCapabilityComponent {
         if (!this.presetService.selectedPreset) {
             return;
         }
-        for (const fixtureUuid of this.presetService.selectedPreset.fixtureUuids) {
-            const fixture = this.fixtureService.getCachedFixtureByUuid(fixtureUuid);
+        for (const preserFixture of this.presetService.selectedPreset.fixtures) {
+            const fixture = this.fixtureService.getCachedFixtureByUuid(preserFixture.fixtureUuid, preserFixture.pixelKey);
             for (const channel of fixture.channels) {
                 for (const capability of channel.capabilities) {
                     if (capability.wheel && capability.wheelSlots && capability.wheelSlots.length > 0) {
@@ -7841,12 +8306,12 @@ class FixtureCapabilityComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.projectService.project.fixtures.length == 0);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtureUuids.length == 0);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length == 0);
         } }, dependencies: [i5.NgForOf, i5.NgIf, FixtureCapabilityColorComponent, FixtureCapabilityDimmerComponent, FixtureCapabilityPanTiltComponent, FixtureCapabilityColorWheelComponent, i5.KeyValuePipe, i2.TranslatePipe], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n      in Chrome during sliding -->\n      <div *ngIf=\"presetService.hasCapabilityDimmer()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      <div *ngIf=\"presetService.hasCapabilityColorOrColorWheel()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n\n      <!-- Color wheels -->\n      <div\n        *ngFor=\"let entry of colorWheelChannels | keyvalue; let i = index\"\n        class=\"col col-auto p-0 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem)\"\n      >\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n\n      <!-- Pan/Tilt -->\n      <div *ngIf=\"presetService.hasCapabilityPanTilt()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtureUuids.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'lib-app-fixture-capability', changeDetection: ChangeDetectionStrategy.OnPush, template: "<div class=\"card border-secondary panel h-100\" [class.card-intro-active]=\"introService.showStep('capabilities')\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n    during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n    anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- Dimmer -->\n      <!-- the height attribute is required to avoid performance issues with many layouts (reflows)\n      in Chrome during sliding -->\n      <div *ngIf=\"presetService.hasCapabilityDimmer()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-dimmer></lib-app-fixture-capability-dimmer>\n      </div>\n\n      <!-- Color -->\n      <!-- Also show for color wheel fixtures to approx. the color -->\n      <div *ngIf=\"presetService.hasCapabilityColorOrColorWheel()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-color></lib-app-fixture-capability-color>\n      </div>\n\n      <!-- Color wheels -->\n      <div\n        *ngFor=\"let entry of colorWheelChannels | keyvalue; let i = index\"\n        class=\"col col-auto p-0 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem)\"\n      >\n        <lib-app-fixture-capability-color-wheel\n          [profile]=\"entry.key\"\n          [channel]=\"entry.value\"\n          [wheelIndex]=\"i\"\n          [showContainer]=\"colorWheelChannels.size > 1\"\n        ></lib-app-fixture-capability-color-wheel>\n      </div>\n\n      <!-- Pan/Tilt -->\n      <div *ngIf=\"presetService.hasCapabilityPanTilt()\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n        <lib-app-fixture-capability-pan-tilt></lib-app-fixture-capability-pan-tilt>\n      </div>\n\n      <!-- Fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n" }]
     }], () => [{ type: PresetService }, { type: FixtureService }, { type: i0.ChangeDetectorRef }, { type: ProjectService }, { type: IntroService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureCapabilityComponent, { className: "FixtureCapabilityComponent" }); })();
 
@@ -8196,7 +8661,7 @@ class FixtureSettingsPositionComponent {
             i0.ɵɵproperty("ngIf", ctx.fixtureService.selectedSettingsFixtures.length > 0);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.fixtureService.selectedSettingsFixtures.length == 0);
-        } }, dependencies: [i5.NgIf, i4$1.NgSelectOption, i4$1.ɵNgSelectMultipleOption, i4$1.DefaultValueAccessor, i4$1.SelectControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent, i2.TranslatePipe] }); }
+        } }, dependencies: [i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureSettingsPositionComponent, [{
         type: Component,
@@ -8338,7 +8803,7 @@ class FixtureSettingsStageComponent {
             i0.ɵɵproperty("tooltip", "hide")("value", ctx.projectService.project.stagePillarWidthCm)("min", 1)("max", 200)("step", 5);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngModel", ctx.projectService.project.stagePillarWidthCm);
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent, i2.TranslatePipe] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureSettingsStageComponent, [{
         type: Component,
@@ -8533,12 +8998,20 @@ class EffectCurveComponent {
     }
     getPhasingCount() {
         let count = 0;
-        const countedDmxChannels = [];
-        for (const fixtureUuid of this.presetService.selectedPreset.fixtureUuids) {
-            const fixture = this.fixtureService.getFixtureByUuid(fixtureUuid);
-            if (!countedDmxChannels.includes(fixture.dmxFirstChannel)) {
+        const countedFirstDmxChannelPixelKey = [];
+        for (const presetFixture of this.presetService.selectedPreset.fixtures) {
+            const fixture = this.fixtureService.getFixtureByUuid(presetFixture.fixtureUuid);
+            const firstDmxChannelAndFixtureUuid = {
+                firstDmxChannel: fixture.dmxFirstChannel,
+                pixelKey: presetFixture.pixelKey,
+            };
+            const exists = countedFirstDmxChannelPixelKey.some((item) => item.firstDmxChannel === firstDmxChannelAndFixtureUuid.firstDmxChannel &&
+                ((!item.pixelKey && !firstDmxChannelAndFixtureUuid.pixelKey) || item.pixelKey === firstDmxChannelAndFixtureUuid.pixelKey));
+            // don't count it, if it has the same DMX address and pixel key (if available),
+            // as an already counted one
+            if (!exists) {
                 count++;
-                countedDmxChannels.push(fixture.dmxFirstChannel);
+                countedFirstDmxChannelPixelKey.push(firstDmxChannelAndFixtureUuid);
             }
         }
         return count;
@@ -8919,7 +9392,7 @@ class EffectCurveComponent {
             i0.ɵɵproperty("ngIf", ctx.availableProfiles.length > 1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", i0.ɵɵpipeBind1(77, 81, ctx.availableChannels));
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.NgSelectOption, i4$1.ɵNgSelectMultipleOption, i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.SelectControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent, i12.PopoverDirective, i5.AsyncPipe, i5.KeyValuePipe, i2.TranslatePipe], styles: [".curve-grid[_ngcontent-%COMP%]{background-color:#000;border:1px solid white}.applying-to[_ngcontent-%COMP%]{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to[_ngcontent-%COMP%]   .form-check[_ngcontent-%COMP%]:last-child{margin-bottom:.5rem}"] }); }
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.NgSelectOption, i4.ɵNgSelectMultipleOption, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.SelectControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i12.PopoverDirective, i5.AsyncPipe, i5.KeyValuePipe, i2.TranslatePipe], styles: [".curve-grid[_ngcontent-%COMP%]{background-color:#000;border:1px solid white}.applying-to[_ngcontent-%COMP%]{overflow-y:scroll;height:130px!important;background-color:#222;border:1px solid white;padding:.5rem}.applying-to[_ngcontent-%COMP%]   .form-check[_ngcontent-%COMP%]:last-child{margin-bottom:.5rem}"] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(EffectCurveComponent, [{
         type: Component,
@@ -9301,7 +9774,7 @@ class PresetSettingsComponent {
             i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(72, 43, "designer.misc.cancel"), " ");
             i0.ɵɵadvance(3);
             i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(75, 45, "designer.misc.ok"));
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i2.TranslatePipe] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PresetSettingsComponent, [{
         type: Component,
@@ -9418,7 +9891,7 @@ class PresetComponent {
             i0.ɵɵproperty("sortablejs", ctx.projectService.project.presets);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngForOf", ctx.projectService.project.presets);
-        } }, dependencies: [i5.NgForOf, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i8.SortablejsDirective, i2.TranslatePipe] }); }
+        } }, dependencies: [i5.NgForOf, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, i8.SortablejsDirective, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(PresetComponent, [{
         type: Component,
@@ -9476,7 +9949,7 @@ class MasterDimmerComponent {
             i0.ɵɵproperty("value", ctx.projectService == null ? null : ctx.projectService.project == null ? null : ctx.projectService.project.masterDimmerValue)("orientation", "horizontal")("tooltip", "hide")("min", 0)("max", 1)("step", 0.001);
             i0.ɵɵadvance(2);
             i0.ɵɵproperty("ngModel", ctx.getValue());
-        } }, dependencies: [i4$1.DefaultValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent] }); }
+        } }, dependencies: [i4.DefaultValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(MasterDimmerComponent, [{
         type: Component,
@@ -9679,7 +10152,7 @@ class FixtureCapabilityChannelComponent {
             i0.ɵɵproperty("ngIf", (ctx._channel.capabilities == null ? null : ctx._channel.capabilities.length) > 1);
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.capabilityHasRange());
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.DefaultValueAccessor, i4$1.CheckboxControlValueAccessor, i4$1.RadioControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, i4$2.SliderComponent, i2.TranslatePipe], changeDetection: 0 }); }
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.DefaultValueAccessor, i4.CheckboxControlValueAccessor, i4.RadioControlValueAccessor, i4.NgControlStatus, i4.NgModel, i4$1.SliderComponent, i2.TranslatePipe], changeDetection: 0 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureCapabilityChannelComponent, [{
         type: Component,
@@ -9795,7 +10268,9 @@ class FixtureChannelComponent {
             this.calculateProfiles();
         });
     }
-    ngOnInit() { }
+    ngOnInit() {
+        this.calculateProfiles();
+    }
     ngOnDestroy() {
         this.fixtureSelectionChangedSubscription.unsubscribe();
         this.previewSelectionChangedSubscription.unsubscribe();
@@ -9837,12 +10312,12 @@ class FixtureChannelComponent {
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.projectService.project.fixtures.length == 0);
             i0.ɵɵadvance();
-            i0.ɵɵproperty("ngIf", ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtureUuids.length == 0);
-        } }, dependencies: [i5.NgForOf, i5.NgIf, i4$1.CheckboxControlValueAccessor, i4$1.NgControlStatus, i4$1.NgModel, FixtureCapabilityChannelComponent, i5.KeyValuePipe, i2.TranslatePipe] }); }
+            i0.ɵɵproperty("ngIf", ctx.projectService.project.fixtures.length > 0 && ctx.presetService.selectedPreset && ctx.presetService.selectedPreset.fixtures.length == 0);
+        } }, dependencies: [i5.NgForOf, i5.NgIf, i4.CheckboxControlValueAccessor, i4.NgControlStatus, i4.NgModel, FixtureCapabilityChannelComponent, i5.KeyValuePipe, i2.TranslatePipe] }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(FixtureChannelComponent, [{
         type: Component,
-        args: [{ selector: 'lib-app-fixture-channel', template: "<div class=\"card border-secondary panel h-100\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n      during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n      anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- profile selection -->\n      <div\n        *ngIf=\"profiles.length > 1\"\n        class=\"col col-auto p-3 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem); border: solid 1px #444; border-right: none\"\n      >\n        <div *ngFor=\"let profile of profiles; let i = index\" class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"capabilityFilter{{ i }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (ngModelChange)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"capabilityFilter{{ i }}\">\n            {{ profile.name }}\n          </label>\n        </div>\n      </div>\n\n      <!-- all channel capabilities -->\n      <ng-container *ngFor=\"let entry of channelCapabilities | keyvalue; let i = index\">\n        <div *ngFor=\"let capability of entry.value; let j = index\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n          <lib-app-fixture-capability-channel [profile]=\"entry.key\" [channel]=\"capability\" [capabilityIndex]=\"i * 10000 + j\">\n          </lib-app-fixture-capability-channel>\n        </div>\n      </ng-container>\n\n      <!-- fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtureUuids.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n" }]
+        args: [{ selector: 'lib-app-fixture-channel', template: "<div class=\"card border-secondary panel h-100\">\n  <div class=\"card-body capability-container d-flex h-100\" style=\"overflow-y: hidden\">\n    <!-- h-100 needs to be applied in chrome to avoid performance issues with many layouts (reflows)\n      during sliding. But the class must not be applied e.g. in Safari, because the bottom margin is not correct\n      anymore afterwards. -->\n    <div *ngIf=\"presetService.selectedPreset\" class=\"row m-0 pl-3\" [class.h-100]=\"isChrome()\">\n      <!-- profile selection -->\n      <div\n        *ngIf=\"profiles.length > 1\"\n        class=\"col col-auto p-3 my-3 mr-3\"\n        style=\"height: calc(100% - 2rem); border: solid 1px #444; border-right: none\"\n      >\n        <div *ngFor=\"let profile of profiles; let i = index\" class=\"form-check\">\n          <input\n            type=\"checkbox\"\n            class=\"form-check-input\"\n            id=\"capabilityFilter{{ i }}\"\n            [ngModel]=\"selectedProfiles.indexOf(profile) >= 0\"\n            (ngModelChange)=\"changeProfileSelection($event, profile)\"\n          />\n          <label class=\"form-check-label\" for=\"capabilityFilter{{ i }}\">\n            {{ profile.name }}\n          </label>\n        </div>\n      </div>\n\n      <!-- all channel capabilities -->\n      <ng-container *ngFor=\"let entry of channelCapabilities | keyvalue; let i = index\">\n        <div *ngFor=\"let capability of entry.value; let j = index\" class=\"col col-auto p-0 my-3 mr-3\" style=\"height: calc(100% - 2rem)\">\n          <lib-app-fixture-capability-channel [profile]=\"entry.key\" [channel]=\"capability\" [capabilityIndex]=\"i * 10000 + j\">\n          </lib-app-fixture-capability-channel>\n        </div>\n      </ng-container>\n\n      <!-- fix spacing at the end -->\n      <div class=\"col col-auto p-0 my-3 mr-3\">&nbsp;</div>\n    </div>\n\n    <div *ngIf=\"projectService.project.fixtures.length == 0\" class=\"m-auto\">\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures' | translate }}</p>\n    </div>\n\n    <div\n      *ngIf=\"\n        projectService.project.fixtures.length > 0 && presetService.selectedPreset && presetService.selectedPreset.fixtures.length == 0\n      \"\n      class=\"m-auto\"\n    >\n      <p class=\"m-auto\" style=\"color: #717171\">{{ 'designer.fixture.no-fixtures-selected' | translate }}</p>\n    </div>\n  </div>\n</div>\n" }]
     }], () => [{ type: PresetService }, { type: i0.ChangeDetectorRef }, { type: ProjectService }], null); })();
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassDebugInfo(FixtureChannelComponent, { className: "FixtureChannelComponent" }); })();
 
@@ -9938,9 +10413,9 @@ class IntroComponent {
 const _c0 = a0 => ({ height: a0 });
 function DesignerComponent_li_52_Template(rf, ctx) { if (rf & 1) {
     const _r1 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 54)(1, "a", 55);
+    i0.ɵɵelementStart(0, "li", 38)(1, "a", 39);
     i0.ɵɵlistener("click", function DesignerComponent_li_52_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r1); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.projectShare(); return i0.ɵɵresetView(false); });
-    i0.ɵɵelement(2, "i", 56);
+    i0.ɵɵelement(2, "i", 40);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "translate");
     i0.ɵɵelementEnd()();
@@ -9951,15 +10426,15 @@ function DesignerComponent_li_52_Template(rf, ctx) { if (rf & 1) {
 function DesignerComponent_li_53_Template(rf, ctx) { if (rf & 1) {
     const _r3 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 3)(1, "a", 14);
-    i0.ɵɵelement(2, "i", 57);
+    i0.ɵɵelement(2, "i", 41);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "translate");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(5, "div", 58)(6, "a", 59);
+    i0.ɵɵelementStart(5, "div", 42)(6, "a", 43);
     i0.ɵɵlistener("click", function DesignerComponent_li_53_Template_a_click_6_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.switchLanguage("en"); return i0.ɵɵresetView(false); });
     i0.ɵɵtext(7, "English");
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(8, "a", 59);
+    i0.ɵɵelementStart(8, "a", 43);
     i0.ɵɵlistener("click", function DesignerComponent_li_53_Template_a_click_8_listener() { i0.ɵɵrestoreView(_r3); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.switchLanguage("de"); return i0.ɵɵresetView(false); });
     i0.ɵɵtext(9, "Deutsch");
     i0.ɵɵelementEnd()()();
@@ -9969,9 +10444,9 @@ function DesignerComponent_li_53_Template(rf, ctx) { if (rf & 1) {
 } }
 function DesignerComponent_li_54_Template(rf, ctx) { if (rf & 1) {
     const _r4 = i0.ɵɵgetCurrentView();
-    i0.ɵɵelementStart(0, "li", 60)(1, "a", 61);
+    i0.ɵɵelementStart(0, "li", 44)(1, "a", 45);
     i0.ɵɵlistener("click", function DesignerComponent_li_54_Template_a_click_1_listener() { i0.ɵɵrestoreView(_r4); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.userRegister(); return i0.ɵɵresetView(false); });
-    i0.ɵɵelement(2, "i", 62);
+    i0.ɵɵelement(2, "i", 46);
     i0.ɵɵtext(3);
     i0.ɵɵpipe(4, "translate");
     i0.ɵɵelementEnd()();
@@ -9982,12 +10457,12 @@ function DesignerComponent_li_54_Template(rf, ctx) { if (rf & 1) {
 function DesignerComponent_li_55_Template(rf, ctx) { if (rf & 1) {
     const _r5 = i0.ɵɵgetCurrentView();
     i0.ɵɵelementStart(0, "li", 3)(1, "a", 14);
-    i0.ɵɵelement(2, "i", 62);
+    i0.ɵɵelement(2, "i", 46);
     i0.ɵɵtext(3);
     i0.ɵɵelementEnd();
-    i0.ɵɵelementStart(4, "div", 58)(5, "a", 59);
+    i0.ɵɵelementStart(4, "div", 42)(5, "a", 43);
     i0.ɵɵlistener("click", function DesignerComponent_li_55_Template_a_click_5_listener() { i0.ɵɵrestoreView(_r5); const ctx_r1 = i0.ɵɵnextContext(); ctx_r1.userService.logout(); return i0.ɵɵresetView(false); });
-    i0.ɵɵelement(6, "i", 63);
+    i0.ɵɵelement(6, "i", 47);
     i0.ɵɵtext(7);
     i0.ɵɵpipe(8, "translate");
     i0.ɵɵelementEnd()()();
@@ -9998,6 +10473,81 @@ function DesignerComponent_li_55_Template(rf, ctx) { if (rf & 1) {
     i0.ɵɵadvance(4);
     i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(8, 2, "designer.navigation.logout"), "");
 } }
+function DesignerComponent_lib_app_scene_59_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-app-scene");
+} }
+function DesignerComponent_lib_app_preset_61_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-app-preset");
+} }
+function DesignerComponent_div_63_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 48)(1, "div", 49);
+    i0.ɵɵelement(2, "lib-app-preview", 50);
+    i0.ɵɵelementEnd()();
+} if (rf & 2) {
+    const ctx_r1 = i0.ɵɵnextContext();
+    i0.ɵɵclassProp("card-intro-active", ctx_r1.introService.showStep("preview"));
+} }
+function DesignerComponent_div_65_Template(rf, ctx) { if (rf & 1) {
+    const _r6 = i0.ɵɵgetCurrentView();
+    i0.ɵɵelementStart(0, "div", 51)(1, "div", 52)(2, "a", 53);
+    i0.ɵɵpipe(3, "translate");
+    i0.ɵɵlistener("click", function DesignerComponent_div_65_Template_a_click_2_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openTab("capabilities")); });
+    i0.ɵɵelement(4, "i", 54);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "a", 55);
+    i0.ɵɵpipe(6, "translate");
+    i0.ɵɵlistener("click", function DesignerComponent_div_65_Template_a_click_5_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openTab("channels")); });
+    i0.ɵɵelement(7, "i", 56);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(8, "a", 57);
+    i0.ɵɵpipe(9, "translate");
+    i0.ɵɵlistener("click", function DesignerComponent_div_65_Template_a_click_8_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openTab("effects")); });
+    i0.ɵɵelement(10, "i", 58);
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(11, "a", 59);
+    i0.ɵɵpipe(12, "translate");
+    i0.ɵɵlistener("click", function DesignerComponent_div_65_Template_a_click_11_listener() { i0.ɵɵrestoreView(_r6); const ctx_r1 = i0.ɵɵnextContext(); return i0.ɵɵresetView(ctx_r1.openTab("settings")); });
+    i0.ɵɵelement(13, "i", 60);
+    i0.ɵɵelementEnd()()();
+} if (rf & 2) {
+    i0.ɵɵadvance(2);
+    i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(3, 4, "designer.misc.capabilities"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(6, 6, "designer.misc.channels"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(9, 8, "designer.misc.effects"));
+    i0.ɵɵadvance(3);
+    i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(12, 10, "designer.misc.settings"));
+} }
+function DesignerComponent_div_67_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelementStart(0, "div", 61)(1, "div", 62)(2, "div", 63)(3, "div", 64);
+    i0.ɵɵelement(4, "lib-app-fixture-capability");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(5, "div", 65);
+    i0.ɵɵelement(6, "lib-app-fixture-channel");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(7, "div", 66);
+    i0.ɵɵelement(8, "lib-app-effect");
+    i0.ɵɵelementEnd();
+    i0.ɵɵelementStart(9, "div", 67);
+    i0.ɵɵelement(10, "lib-app-fixture-settings");
+    i0.ɵɵelementEnd()()()();
+} }
+function DesignerComponent_lib_app_fixture_69_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-app-fixture");
+} }
+function DesignerComponent_lib_app_master_dimmer_71_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-app-master-dimmer");
+} }
+function DesignerComponent_lib_app_timeline_73_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-app-timeline");
+} }
+function DesignerComponent_lib_app_master_dimmer_76_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-app-master-dimmer");
+} }
+function DesignerComponent_lib_app_scene_78_Template(rf, ctx) { if (rf & 1) {
+    i0.ɵɵelement(0, "lib-app-scene");
+} }
 class DesignerComponent {
     set menuHeightPx(value) {
         this.configService.menuHeightPx = value;
@@ -10037,7 +10587,10 @@ class DesignerComponent {
     set uniqueProjectNames(value) {
         this.configService.uniqueProjectNames = value;
     }
-    constructor(translateService, projectService, configService, fixturePoolService, hotkeyTargetExcludeService, modalService, userService, userEnsureLoginService, toastrService, projectLoadService, warningDialogService, errorDialogService, fixtureService, timelineService, introService) {
+    set dropzoneChunking(value) {
+        this.configService.dropzoneChunking = value;
+    }
+    constructor(translateService, projectService, configService, fixturePoolService, hotkeyTargetExcludeService, modalService, userService, userEnsureLoginService, projectLoadService, warningDialogService, errorDialogService, fixtureService, timelineService, introService) {
         this.translateService = translateService;
         this.projectService = projectService;
         this.configService = configService;
@@ -10046,7 +10599,6 @@ class DesignerComponent {
         this.modalService = modalService;
         this.userService = userService;
         this.userEnsureLoginService = userEnsureLoginService;
-        this.toastrService = toastrService;
         this.projectLoadService = projectLoadService;
         this.warningDialogService = warningDialogService;
         this.errorDialogService = errorDialogService;
@@ -10062,6 +10614,27 @@ class DesignerComponent {
             this.calcTotalMenuHeight();
         });
     }
+    loadError(response) {
+        console.error(response);
+        let msg = 'designer.project.open-error';
+        let error;
+        if (response instanceof HttpErrorResponse) {
+            error = response && response.error ? response.error.error : 'unknown';
+            if (error === 'no-permission') {
+                msg = 'designer.project.open-no-permission-error';
+                error = undefined;
+            }
+            else {
+                msg = 'designer.project.open-error';
+            }
+        }
+        else {
+            error = response && response.message ? response.message : 'unknown';
+        }
+        this.errorDialogService.show(msg, error).subscribe(() => {
+            this.projectLoadService.new();
+        });
+    }
     ngOnInit() {
         if (localStorage.getItem('language')) {
             this.translateService.use(localStorage.getItem('language'));
@@ -10080,29 +10653,14 @@ class DesignerComponent {
                 shareToken = '';
             }
             this.projectLoadService.load(Number.parseInt(projectId, 10), projectName, shareToken).subscribe(() => { }, (response) => {
-                let error = response && response.error ? response.error.error : 'unknown';
-                let msg = '';
-                if (error === 'no-permission') {
-                    msg = 'designer.project.open-no-permission-error';
-                    error = undefined;
-                }
-                else {
-                    msg = 'designer.project.open-error';
-                }
-                this.errorDialogService.show(msg, error).subscribe(() => {
-                    this.projectLoadService.new();
-                });
+                this.loadError(response);
             });
         }
         else if ((this.userService.isLoggedIn() || !this.configService.loginAvailable) &&
             (this.userService.getAutoLoadProjectId() || this.userService.getAutoLoadProjectName())) {
             // restore the last saved project
             this.projectLoadService.load(this.userService.getAutoLoadProjectId(), this.userService.getAutoLoadProjectName()).subscribe(() => { }, (response) => {
-                const msg = 'designer.project.open-error';
-                const error = response && response.error ? response.error.error : 'unknown';
-                this.errorDialogService.show(msg, error).subscribe(() => {
-                    this.projectLoadService.new();
-                });
+                this.loadError(response);
             });
         }
         else {
@@ -10130,7 +10688,7 @@ class DesignerComponent {
         // Set up the splitter
         setTimeout(() => {
             Split(['#row1', '#row2', '#row3'], {
-                sizes: [42, 38, 20],
+                sizes: [42, 40, 18],
                 direction: 'vertical',
                 cursor: 'row-resize',
                 snapOffset: 0,
@@ -10138,13 +10696,13 @@ class DesignerComponent {
                 onDrag: this.onResize.bind(this),
             });
             Split(['#scenes', '#presets', '#preview'], {
-                sizes: [15, 15, 70],
+                sizes: [20, 20, 60],
                 snapOffset: 0,
                 gutterSize: this.splitGutterSizePx,
                 onDrag: this.onResize.bind(this),
             });
             Split(['#capabilities', '#fixtures', '#masterDimmer'], {
-                sizes: [74, 18, 8],
+                sizes: [70, 24, 6],
                 snapOffset: 0,
                 gutterSize: this.splitGutterSizePx,
                 onDrag: this.onResize.bind(this),
@@ -10267,7 +10825,7 @@ class DesignerComponent {
         this.translateService.use(language);
         localStorage.setItem('language', language);
     }
-    static { this.ɵfac = function DesignerComponent_Factory(t) { return new (t || DesignerComponent)(i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(FixturePoolService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(UserEnsureLoginService), i0.ɵɵdirectiveInject(i3.ToastrService), i0.ɵɵdirectiveInject(ProjectLoadService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(ErrorDialogService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(IntroService)); }; }
+    static { this.ɵfac = function DesignerComponent_Factory(t) { return new (t || DesignerComponent)(i0.ɵɵdirectiveInject(i2.TranslateService), i0.ɵɵdirectiveInject(ProjectService), i0.ɵɵdirectiveInject(ConfigService), i0.ɵɵdirectiveInject(FixturePoolService), i0.ɵɵdirectiveInject(HotkeyTargetExcludeService), i0.ɵɵdirectiveInject(i1$1.BsModalService), i0.ɵɵdirectiveInject(UserService), i0.ɵɵdirectiveInject(UserEnsureLoginService), i0.ɵɵdirectiveInject(ProjectLoadService), i0.ɵɵdirectiveInject(WarningDialogService), i0.ɵɵdirectiveInject(ErrorDialogService), i0.ɵɵdirectiveInject(FixtureService), i0.ɵɵdirectiveInject(TimelineService), i0.ɵɵdirectiveInject(IntroService)); }; }
     static { this.ɵcmp = /*@__PURE__*/ i0.ɵɵdefineComponent({ type: DesignerComponent, selectors: [["lib-designer"]], viewQuery: function DesignerComponent_Query(rf, ctx) { if (rf & 1) {
             i0.ɵɵviewQuery(PreviewComponent, 5);
             i0.ɵɵviewQuery(TimelineComponent, 5);
@@ -10277,7 +10835,7 @@ class DesignerComponent {
             i0.ɵɵqueryRefresh(_t = i0.ɵɵloadQuery()) && (ctx.timelineComponent = _t.first);
         } }, hostBindings: function DesignerComponent_HostBindings(rf, ctx) { if (rf & 1) {
             i0.ɵɵlistener("keydown", function DesignerComponent_keydown_HostBindingHandler($event) { return ctx.handleKeyboardEvent($event); }, false, i0.ɵɵresolveDocument);
-        } }, inputs: { menuHeightPx: "menuHeightPx", externalCompositionsAvailable: "externalCompositionsAvailable", restUrl: "restUrl", enableMediaLibrary: "enableMediaLibrary", loginAvailable: "loginAvailable", shareAvailable: "shareAvailable", languageSwitch: "languageSwitch", newProjectTemplate: "newProjectTemplate", livePreview: "livePreview", localProfiles: "localProfiles", intro: "intro", uniqueProjectNames: "uniqueProjectNames" }, decls: 105, vars: 57, consts: [["id", "designer", 3, "ngStyle"], [1, "navbar", "navbar-expand-lg", "navbar-light", "bg-light", "border-secondary", 2, "border-bottom", "1px solid #444", "height", "20px", "z-index", "9999"], [1, "navbar-nav", "mr-auto"], [1, "nav-item", "dropdown"], ["href", "#", "id", "fileDropdown", "data-toggle", "dropdown", "aria-haspopup", "true", "aria-expanded", "false", 1, "nav-link", "dropdown-toggle"], ["aria-labelledby", "fileDropdown", 1, "dropdown-menu"], ["href", "#", 1, "dropdown-item", "d-none", "d-md-block", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-file-o"], ["href", "#", 1, "dropdown-item", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-folder-open-o"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-floppy-o"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-download"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-external-link"], [1, "nav-item", "dropdown", "d-none", "d-md-block"], ["href", "#", "id", "settingsDropdown", "data-toggle", "dropdown", "aria-haspopup", "true", "aria-expanded", "false", 1, "nav-link", "dropdown-toggle"], ["aria-labelledby", "settingsDropdown", 1, "dropdown-menu"], ["href", "https://rocketshow.net/support/", "target", "_blank", 1, "dropdown-item"], [1, "navbar-nav"], ["class", "nav-item d-none d-md-flex", "data-toggle", "collapse", 4, "ngIf"], ["class", "nav-item dropdown", 4, "ngIf"], ["class", "nav-item", "data-toggle", "collapse", 4, "ngIf"], [1, "h-100", "d-none", "d-md-block"], ["id", "row1", 1, "split", "split-vertical", "clearfix", "pt-3", "pl-3"], ["id", "scenes", 1, "split", "split-horizontal", "h-100"], ["id", "presets", 1, "split", "split-horizontal", "h-100"], ["id", "preview", 1, "split", "split-horizontal", "h-100", "pr-3"], [1, "card", "border-secondary", "h-100"], [1, "card-body", "p-0", "h-100"], [1, "h-100"], ["id", "row2", 1, "split", "split-vertical", "clearfix", "px-3", "d-flex", 2, "flex-direction", "row"], [1, "col", "col-auto", "p-0", 2, "margin-right", "-1px"], ["id", "v-pills-tab", "role", "tablist", "aria-orientation", "vertical", 1, "nav", "flex-column", "nav-pills"], ["id", "v-pills-capabilities-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-capabilities", "role", "tab", "aria-controls", "v-pills-capabilities", "aria-selected", "true", 1, "nav-link", "px-3", "active", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-bolt", "fa-fw"], ["id", "v-pills-channels-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-channels", "role", "tab", "aria-controls", "v-pills-channels", "aria-selected", "false", 1, "nav-link", "px-3", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-sliders", "fa-fw"], ["id", "v-pills-effects-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-effects", "role", "tab", "aria-controls", "v-pills-effects", "aria-selected", "false", 1, "nav-link", "px-3", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-magic", "fa-fw"], ["id", "v-pills-settings-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-settings", "role", "tab", "aria-controls", "v-pills-settings", "aria-selected", "false", 1, "nav-link", "px-3", 2, "border-top", "1px solid #444", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-cog", "fa-fw"], ["id", "capabilities", 1, "split", "split-horizontal", "h-100", 2, "padding-left", "1rem"], [1, "row", "h-100"], [1, "col", "pl-0", "h-100"], ["id", "v-pills-tabContent", 1, "tab-content", "h-100"], ["id", "v-pills-capabilities", "role", "tabpanel", 1, "tab-pane", "h-100", "show", "active"], ["id", "v-pills-channels", "role", "tabpanel", 1, "tab-pane", "h-100", "show"], ["id", "v-pills-effects", "role", "tabpanel", "aria-labelledby", "v-pills-profile-tab", 1, "tab-pane", "h-100"], ["id", "v-pills-settings", "role", "tabpanel", "aria-labelledby", "v-pills-home-tab", 1, "tab-pane", "h-100"], ["id", "fixtures", 1, "split", "split-horizontal", "h-100"], ["id", "masterDimmer", 1, "split", "split-horizontal", "h-100"], ["id", "row3", 1, "split", "split-vertical", "clearfix", "px-3", "pb-3", 2, "padding-bottom", "20px"], [1, "d-md-none", "p-3"], [1, "mt-3"], [1, "d-none", "d-md-flex"], ["data-toggle", "collapse", 1, "nav-item", "d-none", "d-md-flex"], ["routerLinkActive", "active", 1, "nav-link", "text-primary", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-share-alt"], ["aria-hidden", "true", 1, "fa", "fa-globe"], ["aria-labelledby", "settingsDropdown", 1, "dropdown-menu", "dropdown-menu-right"], ["href", "#", "target", "_blank", 1, "dropdown-item", 3, "click"], ["data-toggle", "collapse", 1, "nav-item"], ["routerLinkActive", "active", 1, "nav-link", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-user"], ["aria-hidden", "true", 1, "fa", "fa-sign-out"]], template: function DesignerComponent_Template(rf, ctx) { if (rf & 1) {
+        } }, inputs: { menuHeightPx: "menuHeightPx", externalCompositionsAvailable: "externalCompositionsAvailable", restUrl: "restUrl", enableMediaLibrary: "enableMediaLibrary", loginAvailable: "loginAvailable", shareAvailable: "shareAvailable", languageSwitch: "languageSwitch", newProjectTemplate: "newProjectTemplate", livePreview: "livePreview", localProfiles: "localProfiles", intro: "intro", uniqueProjectNames: "uniqueProjectNames", dropzoneChunking: "dropzoneChunking" }, decls: 80, vars: 53, consts: [["id", "designer", 3, "ngStyle"], [1, "navbar", "navbar-expand-lg", "navbar-light", "bg-light", "border-secondary", 2, "border-bottom", "1px solid #444", "height", "20px", "z-index", "9999"], [1, "navbar-nav", "mr-auto"], [1, "nav-item", "dropdown"], ["href", "#", "id", "fileDropdown", "data-toggle", "dropdown", "aria-haspopup", "true", "aria-expanded", "false", 1, "nav-link", "dropdown-toggle"], ["aria-labelledby", "fileDropdown", 1, "dropdown-menu"], ["href", "#", 1, "dropdown-item", "d-none", "d-md-block", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-file-o"], ["href", "#", 1, "dropdown-item", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-folder-open-o"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-floppy-o"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-download"], ["aria-hidden", "true", 1, "fa", "fa-fw", "fa-external-link"], [1, "nav-item", "dropdown", "d-none", "d-md-block"], ["href", "#", "id", "settingsDropdown", "data-toggle", "dropdown", "aria-haspopup", "true", "aria-expanded", "false", 1, "nav-link", "dropdown-toggle"], ["aria-labelledby", "settingsDropdown", 1, "dropdown-menu"], ["href", "https://rocketshow.net/support/", "target", "_blank", 1, "dropdown-item"], [1, "navbar-nav"], ["class", "nav-item d-none d-md-flex", "data-toggle", "collapse", 4, "ngIf"], ["class", "nav-item dropdown", 4, "ngIf"], ["class", "nav-item", "data-toggle", "collapse", 4, "ngIf"], [1, "h-100", "d-none", "d-md-block"], ["id", "row1", 1, "split", "split-vertical", "clearfix", "pt-3", "pl-3"], ["id", "scenes", 1, "split", "split-horizontal", "h-100"], [4, "ngIf"], ["id", "presets", 1, "split", "split-horizontal", "h-100"], ["id", "preview", 1, "split", "split-horizontal", "h-100", "pr-3"], ["class", "card border-secondary h-100", 3, "card-intro-active", 4, "ngIf"], ["id", "row2", 1, "split", "split-vertical", "clearfix", "px-3", "d-flex", 2, "flex-direction", "row"], ["class", "col col-auto p-0", "style", "margin-right: -1px", 4, "ngIf"], ["id", "capabilities", 1, "split", "split-horizontal", "h-100", 2, "padding-left", "1rem"], ["class", "row h-100", 4, "ngIf"], ["id", "fixtures", 1, "split", "split-horizontal", "h-100"], ["id", "masterDimmer", 1, "split", "split-horizontal", "h-100"], ["id", "row3", 1, "split", "split-vertical", "clearfix", "px-3", "pb-3", 2, "padding-bottom", "20px"], [1, "d-md-none", "p-3"], [1, "mt-3"], [1, "d-none", "d-md-flex"], ["data-toggle", "collapse", 1, "nav-item", "d-none", "d-md-flex"], ["routerLinkActive", "active", 1, "nav-link", "text-primary", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-share-alt"], ["aria-hidden", "true", 1, "fa", "fa-globe"], ["aria-labelledby", "settingsDropdown", 1, "dropdown-menu", "dropdown-menu-right"], ["href", "#", "target", "_blank", 1, "dropdown-item", 3, "click"], ["data-toggle", "collapse", 1, "nav-item"], ["routerLinkActive", "active", 1, "nav-link", 3, "click"], ["aria-hidden", "true", 1, "fa", "fa-user"], ["aria-hidden", "true", 1, "fa", "fa-sign-out"], [1, "card", "border-secondary", "h-100"], [1, "card-body", "p-0", "h-100"], [1, "h-100"], [1, "col", "col-auto", "p-0", 2, "margin-right", "-1px"], ["id", "v-pills-tab", "role", "tablist", "aria-orientation", "vertical", 1, "nav", "flex-column", "nav-pills"], ["id", "v-pills-capabilities-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-capabilities", "role", "tab", "aria-controls", "v-pills-capabilities", "aria-selected", "true", 1, "nav-link", "px-3", "active", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-bolt", "fa-fw"], ["id", "v-pills-channels-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-channels", "role", "tab", "aria-controls", "v-pills-channels", "aria-selected", "false", 1, "nav-link", "px-3", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-sliders", "fa-fw"], ["id", "v-pills-effects-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-effects", "role", "tab", "aria-controls", "v-pills-effects", "aria-selected", "false", 1, "nav-link", "px-3", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-magic", "fa-fw"], ["id", "v-pills-settings-tab", "container", "body", "placement", "right", "triggers", "mouseenter:mouseleave", "data-toggle", "pill", "href", "#v-pills-settings", "role", "tab", "aria-controls", "v-pills-settings", "aria-selected", "false", 1, "nav-link", "px-3", 2, "border-top", "1px solid #444", 3, "click", "popover"], ["aria-hidden", "true", 1, "fa", "fa-cog", "fa-fw"], [1, "row", "h-100"], [1, "col", "pl-0", "h-100"], ["id", "v-pills-tabContent", 1, "tab-content", "h-100"], ["id", "v-pills-capabilities", "role", "tabpanel", 1, "tab-pane", "h-100", "show", "active"], ["id", "v-pills-channels", "role", "tabpanel", 1, "tab-pane", "h-100", "show"], ["id", "v-pills-effects", "role", "tabpanel", "aria-labelledby", "v-pills-profile-tab", 1, "tab-pane", "h-100"], ["id", "v-pills-settings", "role", "tabpanel", "aria-labelledby", "v-pills-home-tab", 1, "tab-pane", "h-100"]], template: function DesignerComponent_Template(rf, ctx) { if (rf & 1) {
             i0.ɵɵelementStart(0, "div", 0)(1, "nav", 1)(2, "ul", 2)(3, "li", 3)(4, "a", 4);
             i0.ɵɵtext(5);
             i0.ɵɵpipe(6, "translate");
@@ -10344,88 +10902,61 @@ class DesignerComponent {
             i0.ɵɵtemplate(52, DesignerComponent_li_52_Template, 5, 3, "li", 18)(53, DesignerComponent_li_53_Template, 10, 3, "li", 19)(54, DesignerComponent_li_54_Template, 5, 3, "li", 20)(55, DesignerComponent_li_55_Template, 9, 4, "li", 19);
             i0.ɵɵelementEnd()();
             i0.ɵɵelementStart(56, "div", 21)(57, "div", 22)(58, "div", 23);
-            i0.ɵɵelement(59, "lib-app-scene");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(60, "div", 24);
-            i0.ɵɵelement(61, "lib-app-preset");
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(62, "div", 25)(63, "div", 26)(64, "div", 27);
-            i0.ɵɵelement(65, "lib-app-preview", 28);
-            i0.ɵɵelementEnd()()()();
-            i0.ɵɵelementStart(66, "div", 29)(67, "div", 30)(68, "div", 31)(69, "a", 32);
-            i0.ɵɵpipe(70, "translate");
-            i0.ɵɵlistener("click", function DesignerComponent_Template_a_click_69_listener() { return ctx.openTab("capabilities"); });
-            i0.ɵɵelement(71, "i", 33);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(72, "a", 34);
-            i0.ɵɵpipe(73, "translate");
-            i0.ɵɵlistener("click", function DesignerComponent_Template_a_click_72_listener() { return ctx.openTab("channels"); });
-            i0.ɵɵelement(74, "i", 35);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(75, "a", 36);
-            i0.ɵɵpipe(76, "translate");
-            i0.ɵɵlistener("click", function DesignerComponent_Template_a_click_75_listener() { return ctx.openTab("effects"); });
-            i0.ɵɵelement(77, "i", 37);
-            i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(78, "a", 38);
-            i0.ɵɵpipe(79, "translate");
-            i0.ɵɵlistener("click", function DesignerComponent_Template_a_click_78_listener() { return ctx.openTab("settings"); });
-            i0.ɵɵelement(80, "i", 39);
-            i0.ɵɵelementEnd()()();
-            i0.ɵɵelementStart(81, "div", 40)(82, "div", 41)(83, "div", 42)(84, "div", 43)(85, "div", 44);
-            i0.ɵɵelement(86, "lib-app-fixture-capability");
+            i0.ɵɵtemplate(59, DesignerComponent_lib_app_scene_59_Template, 1, 0, "lib-app-scene", 24);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(87, "div", 45);
-            i0.ɵɵelement(88, "lib-app-fixture-channel");
+            i0.ɵɵelementStart(60, "div", 25);
+            i0.ɵɵtemplate(61, DesignerComponent_lib_app_preset_61_Template, 1, 0, "lib-app-preset", 24);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(89, "div", 46);
-            i0.ɵɵelement(90, "lib-app-effect");
+            i0.ɵɵelementStart(62, "div", 26);
+            i0.ɵɵtemplate(63, DesignerComponent_div_63_Template, 3, 2, "div", 27);
+            i0.ɵɵelementEnd()();
+            i0.ɵɵelementStart(64, "div", 28);
+            i0.ɵɵtemplate(65, DesignerComponent_div_65_Template, 14, 12, "div", 29);
+            i0.ɵɵelementStart(66, "div", 30);
+            i0.ɵɵtemplate(67, DesignerComponent_div_67_Template, 11, 0, "div", 31);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(91, "div", 47);
-            i0.ɵɵelement(92, "lib-app-fixture-settings");
-            i0.ɵɵelementEnd()()()()();
-            i0.ɵɵelementStart(93, "div", 48);
-            i0.ɵɵelement(94, "lib-app-fixture");
+            i0.ɵɵelementStart(68, "div", 32);
+            i0.ɵɵtemplate(69, DesignerComponent_lib_app_fixture_69_Template, 1, 0, "lib-app-fixture", 24);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(95, "div", 49);
-            i0.ɵɵelement(96, "lib-app-master-dimmer");
+            i0.ɵɵelementStart(70, "div", 33);
+            i0.ɵɵtemplate(71, DesignerComponent_lib_app_master_dimmer_71_Template, 1, 0, "lib-app-master-dimmer", 24);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(97, "div", 50);
-            i0.ɵɵelement(98, "lib-app-timeline");
+            i0.ɵɵelementStart(72, "div", 34);
+            i0.ɵɵtemplate(73, DesignerComponent_lib_app_timeline_73_Template, 1, 0, "lib-app-timeline", 24);
             i0.ɵɵelementEnd()();
-            i0.ɵɵelementStart(99, "div", 51)(100, "div");
-            i0.ɵɵelement(101, "lib-app-master-dimmer");
+            i0.ɵɵelementStart(74, "div", 35)(75, "div");
+            i0.ɵɵtemplate(76, DesignerComponent_lib_app_master_dimmer_76_Template, 1, 0, "lib-app-master-dimmer", 24);
             i0.ɵɵelementEnd();
-            i0.ɵɵelementStart(102, "div", 52);
-            i0.ɵɵelement(103, "lib-app-scene");
+            i0.ɵɵelementStart(77, "div", 36);
+            i0.ɵɵtemplate(78, DesignerComponent_lib_app_scene_78_Template, 1, 0, "lib-app-scene", 24);
             i0.ɵɵelementEnd()()();
-            i0.ɵɵelement(104, "lib-app-intro", 53);
+            i0.ɵɵelement(79, "lib-app-intro", 37);
         } if (rf & 2) {
-            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(55, _c0, "calc(100% - " + ctx.totalMenuHeightPx + "px)"));
+            i0.ɵɵproperty("ngStyle", i0.ɵɵpureFunction1(51, _c0, "calc(100% - " + ctx.totalMenuHeightPx + "px)"));
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 23, "designer.navigation.project"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(6, 27, "designer.navigation.project"), " ");
             i0.ɵɵadvance(5);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 25, "designer.navigation.project-new"), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(11, 29, "designer.navigation.project-new"), "");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 27, "designer.navigation.project-open"), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(15, 31, "designer.navigation.project-open"), "");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(19, 29, "designer.navigation.project-save"), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(19, 33, "designer.navigation.project-save"), "");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 31, "designer.navigation.project-save-as"), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(23, 35, "designer.navigation.project-save-as"), "");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 33, "designer.navigation.project-import"), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(27, 37, "designer.navigation.project-import"), "");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(31, 35, "designer.navigation.project-export"), "");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(31, 39, "designer.navigation.project-export"), "");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 37, "designer.navigation.settings"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(35, 41, "designer.navigation.settings"), " ");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(39, 39, "designer.navigation.fixture-pool"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(39, 43, "designer.navigation.fixture-pool"));
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(43, 41, "designer.navigation.help"), " ");
+            i0.ɵɵtextInterpolate1(" ", i0.ɵɵpipeBind1(43, 45, "designer.navigation.help"), " ");
             i0.ɵɵadvance(4);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(47, 43, "designer.navigation.reset-intro"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(47, 47, "designer.navigation.reset-intro"));
             i0.ɵɵadvance(3);
-            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(50, 45, "designer.navigation.support"));
+            i0.ɵɵtextInterpolate(i0.ɵɵpipeBind1(50, 49, "designer.navigation.support"));
             i0.ɵɵadvance(3);
             i0.ɵɵproperty("ngIf", ctx.configService.shareAvailable);
             i0.ɵɵadvance();
@@ -10434,22 +10965,32 @@ class DesignerComponent {
             i0.ɵɵproperty("ngIf", ctx.configService.loginAvailable && !ctx.userService.isLoggedIn());
             i0.ɵɵadvance();
             i0.ɵɵproperty("ngIf", ctx.configService.loginAvailable && ctx.userService.isLoggedIn());
-            i0.ɵɵadvance(8);
-            i0.ɵɵclassProp("card-intro-active", ctx.introService.showStep("preview"));
-            i0.ɵɵadvance(6);
-            i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(70, 47, "designer.misc.capabilities"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(73, 49, "designer.misc.channels"));
-            i0.ɵɵadvance(3);
-            i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(76, 51, "designer.misc.effects"));
+            i0.ɵɵadvance(4);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
             i0.ɵɵadvance(3);
-            i0.ɵɵpropertyInterpolate("popover", i0.ɵɵpipeBind1(79, 53, "designer.misc.settings"));
-        } }, dependencies: [i4.RouterLinkActive, i5.NgIf, i5.NgStyle, i12.PopoverDirective, PreviewComponent, SceneComponent, TimelineComponent, FixtureComponent, FixtureCapabilityComponent, FixtureSettingsComponent, EffectComponent, PresetComponent, MasterDimmerComponent, FixtureChannelComponent, IntroComponent, i2.TranslatePipe], styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}\n"], encapsulation: 2 }); }
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+            i0.ɵɵadvance(2);
+            i0.ɵɵproperty("ngIf", ctx.projectService.project);
+        } }, dependencies: [i3.RouterLinkActive, i5.NgIf, i5.NgStyle, i12.PopoverDirective, PreviewComponent, SceneComponent, TimelineComponent, FixtureComponent, FixtureCapabilityComponent, FixtureSettingsComponent, EffectComponent, PresetComponent, MasterDimmerComponent, FixtureChannelComponent, IntroComponent, i2.TranslatePipe], styles: ["body{font-size:14px}.modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}\n"], encapsulation: 2 }); }
 }
 (() => { (typeof ngDevMode === "undefined" || ngDevMode) && i0.ɵsetClassMetadata(DesignerComponent, [{
         type: Component,
-        args: [{ selector: 'lib-designer', encapsulation: ViewEncapsulation.None, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      <li *ngIf=\"configService.shareAvailable\" class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n\n      <li *ngIf=\"configService.languageSwitch\" class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n        </div>\n      </li>\n\n      <li *ngIf=\"configService.loginAvailable && !userService.isLoggedIn()\" class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n\n      <li *ngIf=\"configService.loginAvailable && userService.isLoggedIn()\" class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        <lib-app-scene></lib-app-scene>\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        <lib-app-preset></lib-app-preset>\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        <div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('preview')\">\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      <div class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        <div class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        <lib-app-fixture></lib-app-fixture>\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        <lib-app-master-dimmer></lib-app-master-dimmer>\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      <lib-app-timeline></lib-app-timeline>\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      <lib-app-master-dimmer></lib-app-master-dimmer>\n    </div>\n\n    <div class=\"mt-3\">\n      <lib-app-scene></lib-app-scene>\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n", styles: [".modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}\n"] }]
-    }], () => [{ type: i2.TranslateService }, { type: ProjectService }, { type: ConfigService }, { type: FixturePoolService }, { type: HotkeyTargetExcludeService }, { type: i1$1.BsModalService }, { type: UserService }, { type: UserEnsureLoginService }, { type: i3.ToastrService }, { type: ProjectLoadService }, { type: WarningDialogService }, { type: ErrorDialogService }, { type: FixtureService }, { type: TimelineService }, { type: IntroService }], { menuHeightPx: [{
+        args: [{ selector: 'lib-designer', encapsulation: ViewEncapsulation.None, template: "<!-- Wrap the whole component inside a div to encapsulate the CSS -->\n\n<!-- 100 % height minus the menu bar above and the gutter size of 13 px -->\n<!-- <div style=\"height: calc(100% - 33px)\"> -->\n<div id=\"designer\" [ngStyle]=\"{ height: 'calc(100% - ' + totalMenuHeightPx + 'px)' }\">\n  <!-- Navigation -->\n  <nav\n    class=\"navbar navbar-expand-lg navbar-light bg-light border-secondary\"\n    style=\"border-bottom: 1px solid #444; height: 20px; z-index: 9999\"\n  >\n    <!-- Menu buttons -->\n    <ul class=\"navbar-nav mr-auto\">\n      <li class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"fileDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\">\n          {{ 'designer.navigation.project' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"fileDropdown\">\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectNew(); (false)\"\n            ><i class=\"fa fa-fw fa-file-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-new' | translate }}</a\n          >\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"projectOpen(); (false)\"\n            ><i class=\"fa fa-fw fa-folder-open-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-open' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSave(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectSaveAs(); (false)\"\n            ><i class=\"fa fa-fw fa-floppy-o\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-save-as' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectImport(); (false)\"\n            ><i class=\"fa fa-fw fa-download\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-import' | translate }}</a\n          >\n          <a class=\"dropdown-item d-none d-md-block\" href=\"#\" (click)=\"projectExport(); (false)\"\n            ><i class=\"fa fa-fw fa-external-link\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-export' | translate }}</a\n          >\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.settings' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"openFixturePool(); (false)\">{{ 'designer.navigation.fixture-pool' | translate }}</a>\n          <!-- <a class=\"dropdown-item\" href=\"#\">{{ 'designer.navigation.stage' | translate }}</a> -->\n        </div>\n      </li>\n      <li class=\"nav-item dropdown d-none d-md-block\">\n        <a\n          class=\"nav-link dropdown-toggle\"\n          href=\"#\"\n          id=\"settingsDropdown\"\n          data-toggle=\"dropdown\"\n          aria-haspopup=\"true\"\n          aria-expanded=\"false\"\n        >\n          {{ 'designer.navigation.help' | translate }}\n        </a>\n        <div class=\"dropdown-menu\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"introService.reset(); (false)\">{{ 'designer.navigation.reset-intro' | translate }}</a>\n          <a class=\"dropdown-item\" href=\"https://rocketshow.net/support/\" target=\"_blank\">{{\n            'designer.navigation.support' | translate\n          }}</a>\n        </div>\n      </li>\n    </ul>\n\n    <ul class=\"navbar-nav\">\n      <li *ngIf=\"configService.shareAvailable\" class=\"nav-item d-none d-md-flex\" data-toggle=\"collapse\">\n        <a class=\"nav-link text-primary\" (click)=\"projectShare(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-share-alt\" aria-hidden=\"true\"></i> {{ 'designer.navigation.project-share' | translate }}</a\n        >\n      </li>\n\n      <li *ngIf=\"configService.languageSwitch\" class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-globe\" aria-hidden=\"true\"></i>\n          {{ 'designer.misc.language' | translate }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('en'); (false)\" target=\"_blank\">English</a>\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"switchLanguage('de'); (false)\" target=\"_blank\">Deutsch</a>\n        </div>\n      </li>\n\n      <li *ngIf=\"configService.loginAvailable && !userService.isLoggedIn()\" class=\"nav-item\" data-toggle=\"collapse\">\n        <a class=\"nav-link\" (click)=\"userRegister(); (false)\" routerLinkActive=\"active\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i> {{ 'designer.navigation.login' | translate }}</a\n        >\n      </li>\n\n      <li *ngIf=\"configService.loginAvailable && userService.isLoggedIn()\" class=\"nav-item dropdown\">\n        <a class=\"nav-link dropdown-toggle\" href=\"#\" id=\"settingsDropdown\" data-toggle=\"dropdown\" aria-haspopup=\"true\" aria-expanded=\"false\"\n          ><i class=\"fa fa-user\" aria-hidden=\"true\"></i>\n          {{ userService.username }}\n        </a>\n        <div class=\"dropdown-menu dropdown-menu-right\" aria-labelledby=\"settingsDropdown\">\n          <a class=\"dropdown-item\" href=\"#\" (click)=\"userService.logout(); (false)\" target=\"_blank\"\n            ><i class=\"fa fa-sign-out\" aria-hidden=\"true\"></i> {{ 'designer.navigation.logout' | translate }}</a\n          >\n        </div>\n      </li>\n    </ul>\n  </nav>\n\n  <!-- The main content for larger screens -->\n  <div class=\"h-100 d-none d-md-block\">\n    <div id=\"row1\" class=\"split split-vertical clearfix pt-3 pl-3\">\n      <!-- Scenes -->\n      <div id=\"scenes\" class=\"split split-horizontal h-100\">\n        <lib-app-scene *ngIf=\"projectService.project\"></lib-app-scene>\n      </div>\n\n      <!-- Presets -->\n      <div id=\"presets\" class=\"split split-horizontal h-100\">\n        <lib-app-preset *ngIf=\"projectService.project\"></lib-app-preset>\n      </div>\n\n      <!-- 3D preview -->\n      <div id=\"preview\" class=\"split split-horizontal h-100 pr-3\">\n        <div\n          *ngIf=\"projectService.project\"\n          class=\"card border-secondary h-100\"\n          [class.card-intro-active]=\"introService.showStep('preview')\"\n        >\n          <div class=\"card-body p-0 h-100\">\n            <lib-app-preview class=\"h-100\"></lib-app-preview>\n          </div>\n        </div>\n      </div>\n    </div>\n\n    <div id=\"row2\" class=\"split split-vertical clearfix px-3 d-flex\" style=\"flex-direction: row\">\n      <!-- Menu for the capabilities, channels, effects and settings -->\n      <div *ngIf=\"projectService.project\" class=\"col col-auto p-0\" style=\"margin-right: -1px\">\n        <div class=\"nav flex-column nav-pills\" id=\"v-pills-tab\" role=\"tablist\" aria-orientation=\"vertical\">\n          <a\n            class=\"nav-link px-3 active\"\n            (click)=\"openTab('capabilities')\"\n            id=\"v-pills-capabilities-tab\"\n            popover=\"{{ 'designer.misc.capabilities' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-capabilities\"\n            role=\"tab\"\n            aria-controls=\"v-pills-capabilities\"\n            aria-selected=\"true\"\n          >\n            <i class=\"fa fa-bolt fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('channels')\"\n            id=\"v-pills-channels-tab\"\n            popover=\"{{ 'designer.misc.channels' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-channels\"\n            role=\"tab\"\n            aria-controls=\"v-pills-channels\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-sliders fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('effects')\"\n            id=\"v-pills-effects-tab\"\n            popover=\"{{ 'designer.misc.effects' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-effects\"\n            role=\"tab\"\n            aria-controls=\"v-pills-effects\"\n            aria-selected=\"false\"\n          >\n            <i class=\"fa fa-magic fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n          <a\n            class=\"nav-link px-3\"\n            (click)=\"openTab('settings')\"\n            id=\"v-pills-settings-tab\"\n            popover=\"{{ 'designer.misc.settings' | translate }}\"\n            container=\"body\"\n            placement=\"right\"\n            triggers=\"mouseenter:mouseleave\"\n            data-toggle=\"pill\"\n            href=\"#v-pills-settings\"\n            role=\"tab\"\n            aria-controls=\"v-pills-settings\"\n            aria-selected=\"false\"\n            style=\"border-top: 1px solid #444\"\n          >\n            <i class=\"fa fa-cog fa-fw\" aria-hidden=\"true\"></i>\n          </a>\n        </div>\n      </div>\n\n      <div id=\"capabilities\" class=\"split split-horizontal h-100\" style=\"padding-left: 1rem\">\n        <div *ngIf=\"projectService.project\" class=\"row h-100\">\n          <!-- Content for the capabilities, channels, effects and settings -->\n          <div class=\"col pl-0 h-100\">\n            <div class=\"tab-content h-100\" id=\"v-pills-tabContent\">\n              <div class=\"tab-pane h-100 show active\" id=\"v-pills-capabilities\" role=\"tabpanel\">\n                <lib-app-fixture-capability></lib-app-fixture-capability>\n              </div>\n              <div class=\"tab-pane h-100 show\" id=\"v-pills-channels\" role=\"tabpanel\">\n                <lib-app-fixture-channel></lib-app-fixture-channel>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-effects\" role=\"tabpanel\" aria-labelledby=\"v-pills-profile-tab\">\n                <lib-app-effect></lib-app-effect>\n              </div>\n              <div class=\"tab-pane h-100\" id=\"v-pills-settings\" role=\"tabpanel\" aria-labelledby=\"v-pills-home-tab\">\n                <lib-app-fixture-settings></lib-app-fixture-settings>\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n\n      <!-- Fixtures -->\n      <div id=\"fixtures\" class=\"split split-horizontal h-100\">\n        <lib-app-fixture *ngIf=\"projectService.project\"></lib-app-fixture>\n      </div>\n\n      <!-- Master dimmer -->\n      <div id=\"masterDimmer\" class=\"split split-horizontal h-100\">\n        <lib-app-master-dimmer *ngIf=\"projectService.project\"></lib-app-master-dimmer>\n      </div>\n    </div>\n\n    <!-- Timeline -->\n    <div id=\"row3\" class=\"split split-vertical clearfix px-3 pb-3\" style=\"padding-bottom: 20px\">\n      <lib-app-timeline *ngIf=\"projectService.project\"></lib-app-timeline>\n    </div>\n  </div>\n\n  <!-- The components for small screens -->\n  <div class=\"d-md-none p-3\">\n    <div>\n      <lib-app-master-dimmer *ngIf=\"projectService.project\"></lib-app-master-dimmer>\n    </div>\n\n    <div class=\"mt-3\">\n      <lib-app-scene *ngIf=\"projectService.project\"></lib-app-scene>\n    </div>\n  </div>\n</div>\n\n<lib-app-intro class=\"d-none d-md-flex\"></lib-app-intro>\n", styles: ["body{font-size:14px}.modal-full{max-width:unset!important;margin:1.75rem!important}.modal{z-index:10001}#designer .nav-link{cursor:pointer}#designer .dropdown-menu{z-index:100000}#designer .row{flex-wrap:unset}#designer .navbar-nav{flex-direction:row!important}#designer .navbar-expand-lg{flex-flow:row nowrap!important;justify-content:flex-start!important}#designer .navbar-expand-lg .navbar-nav .nav-link{padding-right:.5rem!important;padding-left:.5rem!important}#designer .list-group-item.active{color:#fff!important;background-color:#fd7e14!important;border-color:#fd7e14!important}#designer *:focus{outline:none}#designer select{font-size:.8rem;cursor:pointer}#designer input{font-size:.7rem;background-color:transparent;color:#fff;border:1px solid}#designer input,#designer select{border-color:#dee2e6}#designer .list-group-item{padding:.3rem 1.25rem;border-left:none;border-right:none}#designer .nav-pills .nav-link.active,#designer .nav-pills .show>.nav-link{background-color:#444}#designer .nav a,#designer .panel-title .btn-link{color:#fff!important}#designer .accordion-toggle .btn,#designer .accordion-toggle button{padding:0}#designer .card-body{overflow:auto;padding:.8rem}#designer .card-header{margin-bottom:0}#designer .card-header{padding:.4rem}#designer .panel-body{background-color:#303030}#designer .list-group-item.active-light{background-color:#906542;border-color:#906542}#designer .inactive-list-item{opacity:.3}#designer span.bigcheck-target{font-family:FontAwesome}#designer input[type=checkbox].bigcheck{position:relative;left:-999em}#designer input[type=checkbox].bigcheck+span.bigcheck-target:after{content:\"\\f096\"}#designer input[type=checkbox].bigcheck:checked+span.bigcheck-target:after{content:\"\\f046\"}#designer .gutter.gutter-horizontal{cursor:ew-resize}#designer .gutter.gutter-vertical{cursor:ns-resize}#designer .split-horizontal,#designer .gutter.gutter-horizontal{float:left}#designer .split-vertical,#designer .gutter.gutter-horizontal{height:100%}#designer .split{overflow-y:hidden;overflow-x:hidden}#designer .panel{background-color:transparent}#designer .slider{cursor:pointer}#designer .slider-horizontal .slider-track{height:2px!important;margin-top:-2px!important}#designer .slider-vertical .slider-track{width:2px!important;margin-left:4px!important}#designer .slider-track,#designer .slider-track-low,#designer .slider-track-high,#designer .slider-selection{background-color:#fff!important;border-radius:0!important;background-image:none!important;box-shadow:none!important}#designer .slider-handle{width:13px!important;height:13px!important;background-color:#fff!important;background-image:none!important;border:1px solid #303030}#designer .slider-vertical .slider-handle{margin-left:4px!important}#designer .slider-horizontal .slider-handle{margin-top:2px!important}#designer .slider-input{width:35px;margin-left:8px;text-align:center}#designer .slider-input-readonly{width:35px;margin-left:8px;text-align:center;color:#a9a9a9;border-color:gray}#designer .capability-container{padding:0;height:0}#designer accordion-group>div{border:none!important}#designer .popover{background-color:#fff}#designer .popover-body{color:#000}#designer .bs-popover-right .arrow:after,#designer .bs-popover-auto[x-placement^=right] .arrow:after{border-right-color:#fff}#designer .bs-popover-left .arrow:after,#designer .bs-popover-auto[x-placement^=left] .arrow:after{border-left-color:#fff}#designer .bs-popover-bottom .arrow:after,#designer .bs-popover-auto[x-placement^=bottom] .arrow:after{border-bottom-color:#fff}#designer .bs-popover-top .arrow:after,#designer .bs-popover-auto[x-placement^=top] .arrow:after{border-top-color:#fff}#designer .iro__wheel,#designer .iro__slider{cursor:pointer}#designer .pan-tilt-grid path{fill:none;stroke:#fff;stroke-width:10px}#designer .pan-tilt-grid circle{fill:#4682b4;stroke:#fff;stroke-width:3px}#designer .capability{overflow:visible}#designer .capability-deactivated{opacity:.4}#designer .wavesurfer-region{z-index:5!important}#designer .wavesurfer-region[data-region-selected=true]{z-index:6!important}#designer .wavesurfer-region[data-region-preset=true]{height:50%!important;top:50%!important}#designer .wavesurfer-region[data-region-name]:after{content:attr(data-region-name);margin-left:20px}#designer .wavesurfer-handle{width:10px!important;max-width:10px!important;border:1px solid #ddd;background:#0000001a;box-sizing:border-box;opacity:0;cursor:unset!important}#designer .wavesurfer-handle-end{margin-left:-10px}#designer .wavesurfer-region[data-region-selectable=true] .wavesurfer-handle{opacity:1;cursor:col-resize!important}#designer .wavesurfer-handle:before,#designer .wavesurfer-handle:after{content:\"\";display:block;position:absolute;z-index:1;border-top:1px solid #fff;border-bottom:1px solid #fff;height:4px;left:5%;right:5%;top:50%;transform:translateY(-50%)}#designer .wavesurfer-handle:before{margin-top:-3px}#designer timeline{overflow:scroll!important;overflow:-moz-scrollbars-none;-ms-overflow-style:none;scrollbar-width:none;cursor:s-resize}#designer timeline::-webkit-scrollbar{height:0!important}#designer cursor{top:-20px!important}#designer wave{border-right-color:#fd7e14!important;cursor:col-resize}\n"] }]
+    }], () => [{ type: i2.TranslateService }, { type: ProjectService }, { type: ConfigService }, { type: FixturePoolService }, { type: HotkeyTargetExcludeService }, { type: i1$1.BsModalService }, { type: UserService }, { type: UserEnsureLoginService }, { type: ProjectLoadService }, { type: WarningDialogService }, { type: ErrorDialogService }, { type: FixtureService }, { type: TimelineService }, { type: IntroService }], { menuHeightPx: [{
             type: Input
         }], externalCompositionsAvailable: [{
             type: Input
@@ -10473,6 +11014,8 @@ class DesignerComponent {
             type: Input
         }], uniqueProjectNames: [{
             type: Input
+        }], dropzoneChunking: [{
+            type: Input
         }], previewComponent: [{
             type: ViewChild,
             args: [PreviewComponent]
@@ -10545,6 +11088,7 @@ class DesignerModule {
                     SceneSettingsComponent,
                     ProjectSaveComponent,
                     FixturePoolCreateFromFileComponent,
+                    DropzoneComponent,
                 ],
                 imports: [
                     RouterModule.forRoot([], {}),
@@ -10602,7 +11146,8 @@ class DesignerModule {
         PresetSettingsComponent,
         SceneSettingsComponent,
         ProjectSaveComponent,
-        FixturePoolCreateFromFileComponent], imports: [i4.RouterModule, BrowserModule,
+        FixturePoolCreateFromFileComponent,
+        DropzoneComponent], imports: [i3.RouterModule, BrowserModule,
         BrowserAnimationsModule,
         HttpClientModule,
         FormsModule,
@@ -10612,7 +11157,7 @@ class DesignerModule {
         PopoverModule,
         TypeaheadModule,
         SortablejsModule,
-        DropzoneModule, i3.ToastrModule], exports: [DesignerComponent] }); })();
+        DropzoneModule, i3$1.ToastrModule], exports: [DesignerComponent] }); })();
 
 /*
  * Public API Surface of designer