@rocketshow/designer 1.71.0 → 1.72.0

package/assets/i18n/de.json

@@ -287,6 +287,7 @@
       "remove-composition": "Komposition entfernen",
       "composition-settings": "Kompositionseinstellungen",
       "no-compositions": "Erstelle eine Komposition, um die Szenen zu synchronisieren",
+      "audio-file-error": "Die Audiodatei dieser Komposition konnte nicht geladen werden. Wähle sie in den Kompositions-Einstellungen erneut aus.",
       "composition-name": "Name",
       "composition-sync-type": "Synchronisierung",
       "composition-sync-type-none": "Keine",

package/assets/i18n/en.json

@@ -286,6 +286,7 @@
       "remove-composition": "Remove composition",
       "composition-settings": "Composition settings",
       "no-compositions": "Create a composition to synchronize the scenes",
+      "audio-file-error": "The audio file of this composition could not be loaded. Pick it again in the composition settings.",
       "composition-name": "Name",
       "composition-sync-type": "Synchronization",
       "composition-sync-type-none": "None",

package/assets/i18n/es.json

@@ -286,6 +286,7 @@
       "remove-composition": "Eliminar composición",
       "composition-settings": "Configuración de composición",
       "no-compositions": "Crea una composición para sincronizar las escenas",
+      "audio-file-error": "No se pudo cargar el archivo de audio de esta composición. Vuelve a seleccionarlo en los ajustes de la composición.",
       "composition-name": "Nombre",
       "composition-sync-type": "Sincronización",
       "composition-sync-type-none": "Ninguna",

package/assets/i18n/fr.json

@@ -286,6 +286,7 @@
       "remove-composition": "Supprimer la composition",
       "composition-settings": "Paramètres de composition",
       "no-compositions": "Créez une composition pour synchroniser les scènes",
+      "audio-file-error": "Le fichier audio de cette composition n'a pas pu être chargé. Sélectionnez-le à nouveau dans les paramètres de la composition.",
       "composition-name": "Nom",
       "composition-sync-type": "Synchronisation",
       "composition-sync-type-none": "Aucune",

package/assets/i18n/it.json

@@ -286,6 +286,7 @@
       "remove-composition": "Rimuovi composizione",
       "composition-settings": "Impostazioni composizione",
       "no-compositions": "Crea una composizione per sincronizzare le scene",
+      "audio-file-error": "Il file audio di questa composizione non è stato caricato. Selezionalo di nuovo nelle impostazioni della composizione.",
       "composition-name": "Nome",
       "composition-sync-type": "Sincronizzazione",
       "composition-sync-type-none": "Nessuna",

package/assets/i18n/pt.json

@@ -286,6 +286,7 @@
       "remove-composition": "Remover composição",
       "composition-settings": "Definições de composição",
       "no-compositions": "Crie uma composição para sincronizar as cenas",
+      "audio-file-error": "O ficheiro de áudio desta composição não pôde ser carregado. Selecione-o novamente nas definições da composição.",
       "composition-name": "Nome",
       "composition-sync-type": "Sincronização",
       "composition-sync-type-none": "Nenhuma",

package/assets/i18n/zh.json

@@ -286,6 +286,7 @@
       "remove-composition": "删除合成",
       "composition-settings": "合成设置",
       "no-compositions": "创建合成以同步场景",
+      "audio-file-error": "无法加载此合成的音频文件。请在合成设置中重新选择该文件。",
       "composition-name": "名称",
       "composition-sync-type": "同步",
       "composition-sync-type-none": "无",

package/fesm2022/rocketshow-designer.mjs

@@ -4394,6 +4394,9 @@ class TimelineService {
         // should new compositions not available in this pool be added there?
         this.externalCompositionsAvailable = false;
         this.loadingAudioFile = false;
+        // could the audio file of the selected composition not be read? (it is missing, the
+        // server did not hand it out or the browser cannot play it)
+        this.audioFileError = false;
         this.presetService.previewSelectionChanged.subscribe(() => {
             this.selectedPlaybackRegion = undefined;
             this.updateRegionSelection();
@@ -4687,9 +4690,21 @@ class TimelineService {
             this.selectCompositionIndex(0);
         }
     }
+    // the audio file of the selected composition could not be read: it is missing, the
+    // server did not hand it out or the browser cannot play it. The composition itself is
+    // kept - it carries the scenes played over the song, which is the work of the show and
+    // not the file's to take with it. Say that the file is the part which is missing, so
+    // that another one can be picked in the composition settings instead.
+    audioFileLoadFailed(error) {
+        console.error('Could not load the audio file of the composition', error);
+        this.audioFileError = true;
+        this.loadingAudioFile = false;
+        this.detectChanges.next();
+    }
     destroyWaveSurfer() {
         this.duration = undefined;
         this.loadingAudioFile = false;
+        this.audioFileError = false;
         if (this.waveSurfer) {
             this.waveSurfer.destroy();
             this.waveSurfer = undefined;
@@ -4824,9 +4839,7 @@ class TimelineService {
                 }, 0);
             });
             this.waveSurfer.on('error', (error) => {
-                // could not load the composition --> delete it
-                // (this may occur, when the composition has been deleted but the project is not saved afterwards)
-                this.deleteSelectedComposition();
+                this.audioFileLoadFailed(error);
             });
             this.waveSurfer.on('seek', () => {
                 this.updateCurrentTime();
@@ -9786,11 +9799,11 @@ class TimelineComponent {
         this.timelineService.updateSelectedRegion();
     }
     static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimelineComponent, deps: [{ token: TimelineService }, { token: i0.ChangeDetectorRef }, { token: i1$1.BsModalService }, { token: UuidService }, { token: ProjectService }, { token: HotkeyTargetExcludeService }, { token: WarningDialogService }, { token: i1.HttpClient }, { token: ConfigService }, { token: IntroService }, { token: LivePreviewService }], target: i0.ɵɵFactoryTarget.Component }); }
-    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TimelineComponent, isStandalone: false, selector: "lib-app-timeline", host: { listeners: { "window:resize": "onResize()", "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "waveWrapper", first: true, predicate: ["waveWrapper"], descendants: true }, { propertyName: "waveElement", first: true, predicate: ["waveElement"], descendants: true }], ngImport: i0, template: "<div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('timeline')\">\n  <div class=\"card-body h-100 d-flex\" style=\"flex-flow: column; overflow: unset\">\n    <div class=\"d-flex pb-3\">\n      <div class=\"d-flex mr-3 my-auto\" style=\"float: left\">\n        <a href=\"#\" class=\"btn btn-secondary m-0 p-1 mr-3\" (click)=\"addComposition(); (false)\"\n          ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n        ></a>\n\n        @if (projectService.project.compositions.length > 0) {\n        <select\n          class=\"mr-3\"\n          [ngModel]=\"timelineService.selectedCompositionIndex\"\n          (ngModelChange)=\"selectComposition($event)\"\n          style=\"width: 150px\"\n        >\n          @for (composition of projectService.project.compositions; track composition; let i = $index) {\n          <option [value]=\"i\">\n            {{ composition.name }}\n          </option>\n          }\n        </select>\n        } @if (timelineService.selectedComposition) {\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeComposition(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-composition' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"compositionSettings(); (false)\"\n            popover=\"{{ 'designer.timeline.composition-settings' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-cog\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <div class=\"btn-group\" role=\"group\">\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"rewind(); (false)\"\n            ><i class=\"fa fa-step-backward fa-fw\" aria-hidden=\"true\"></i\n          ></a>\n          @if (timelineService.playState == 'paused') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"play(); (false)\"><i class=\"fa fa-play fa-fw\" aria-hidden=\"true\"></i></a>\n          } @if (timelineService.playState == 'playing') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"pause(); (false)\"><i class=\"fa fa-pause fa-fw\" aria-hidden=\"true\"></i></a>\n          }\n        </div>\n        }\n      </div>\n\n      @if (timelineService.selectedComposition) {\n      <div class=\"d-flex w-100\">\n        @if (timelineService.duration) {\n        <div class=\"my-auto mr-3\">\n          <span style=\"width: 78px; text-align: left; display: inline-block; margin-left: 5px\">{{ timelineService.currentTime }}</span>\n          <span style=\"display: inline-block\"></span>- {{ timelineService.duration }}\n        </div>\n        }\n        <div class=\"my-auto mr-3 ml-auto\" style=\"float: left\">\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom - 20)\" class=\"fa fa-search-minus mr-3\" aria-hidden=\"true\"></i>\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"timelineService.zoom\"\n            [min]=\"0\"\n            [max]=\"200\"\n            [step]=\"20\"\n            (change)=\"timelineService.applyZoom($event.newValue)\"\n          ></mv-slider>\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom + 20)\" class=\"fa fa-search-plus ml-3\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"my-auto mr-3\">\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.startMillis\"\n            (ngModelChange)=\"setRegionStartMillis($event)\"\n          />\n          -\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.endMillis\"\n            (ngModelChange)=\"setRegionEndMillis($event)\"\n          />\n        </div>\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"addRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.add-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-file-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1\"\n          (click)=\"openGridSettings(); (false)\"\n          popover=\"{{ 'designer.timeline.grid' | translate }}\"\n          container=\"body\"\n          placement=\"left\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-th\" aria-hidden=\"true\"></i\n        ></a>\n      </div>\n      }\n    </div>\n\n    @if (timelineService.loadingAudioFile) {\n    <div class=\"w-100 d-flex\">\n      <i class=\"fa fa-circle-o-notch fa-spin m-auto\" style=\"margin-top: -30px\"></i>\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div>\n      <div id=\"waveform-timeline\"></div>\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div #waveWrapper class=\"h-100\" style=\"flex: 2; position: relative\">\n      <div #waveElement id=\"waveform\"></div>\n    </div>\n    } @if (projectService.project.compositions.length == 0) {\n    <div class=\"w-100 d-flex\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"addComposition(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.timeline.no-compositions' | translate }}</a\n      >\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.SliderComponent, selector: "mv-slider", inputs: ["style", "value", "min", "max", "step", "precision", "orientation", "range", "selection", "tooltip", "tooltipSplit", "tooltipPosition", "handle", "reversed", "rtl", "enabled", "naturalArrowKeys", "ticks", "ticksPositions", "ticksLabels", "ticksSnapBounds", "ticksTooltip", "scale", "labelledBy", "rangeHighlights", "formatter", "lockToTicks"], outputs: ["valueChange", "slide", "slideStart", "slideStop", "change"] }, { kind: "directive", type: i10.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "20.3.16", type: TimelineComponent, isStandalone: false, selector: "lib-app-timeline", host: { listeners: { "window:resize": "onResize()", "document:keydown": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "waveWrapper", first: true, predicate: ["waveWrapper"], descendants: true }, { propertyName: "waveElement", first: true, predicate: ["waveElement"], descendants: true }], ngImport: i0, template: "<div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('timeline')\">\n  <div class=\"card-body h-100 d-flex\" style=\"flex-flow: column; overflow: unset\">\n    <div class=\"d-flex pb-3\">\n      <div class=\"d-flex mr-3 my-auto\" style=\"float: left\">\n        <a href=\"#\" class=\"btn btn-secondary m-0 p-1 mr-3\" (click)=\"addComposition(); (false)\"\n          ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n        ></a>\n\n        @if (projectService.project.compositions.length > 0) {\n        <select\n          class=\"mr-3\"\n          [ngModel]=\"timelineService.selectedCompositionIndex\"\n          (ngModelChange)=\"selectComposition($event)\"\n          style=\"width: 150px\"\n        >\n          @for (composition of projectService.project.compositions; track composition; let i = $index) {\n          <option [value]=\"i\">\n            {{ composition.name }}\n          </option>\n          }\n        </select>\n        } @if (timelineService.selectedComposition) {\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeComposition(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-composition' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"compositionSettings(); (false)\"\n            popover=\"{{ 'designer.timeline.composition-settings' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-cog\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <div class=\"btn-group\" role=\"group\">\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"rewind(); (false)\"\n            ><i class=\"fa fa-step-backward fa-fw\" aria-hidden=\"true\"></i\n          ></a>\n          @if (timelineService.playState == 'paused') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"play(); (false)\"><i class=\"fa fa-play fa-fw\" aria-hidden=\"true\"></i></a>\n          } @if (timelineService.playState == 'playing') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"pause(); (false)\"><i class=\"fa fa-pause fa-fw\" aria-hidden=\"true\"></i></a>\n          }\n        </div>\n        }\n      </div>\n\n      @if (timelineService.selectedComposition) {\n      <div class=\"d-flex w-100\">\n        @if (timelineService.duration) {\n        <div class=\"my-auto mr-3\">\n          <span style=\"width: 78px; text-align: left; display: inline-block; margin-left: 5px\">{{ timelineService.currentTime }}</span>\n          <span style=\"display: inline-block\"></span>- {{ timelineService.duration }}\n        </div>\n        }\n        <div class=\"my-auto mr-3 ml-auto\" style=\"float: left\">\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom - 20)\" class=\"fa fa-search-minus mr-3\" aria-hidden=\"true\"></i>\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"timelineService.zoom\"\n            [min]=\"0\"\n            [max]=\"200\"\n            [step]=\"20\"\n            (change)=\"timelineService.applyZoom($event.newValue)\"\n          ></mv-slider>\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom + 20)\" class=\"fa fa-search-plus ml-3\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"my-auto mr-3\">\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.startMillis\"\n            (ngModelChange)=\"setRegionStartMillis($event)\"\n          />\n          -\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.endMillis\"\n            (ngModelChange)=\"setRegionEndMillis($event)\"\n          />\n        </div>\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"addRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.add-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-file-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1\"\n          (click)=\"openGridSettings(); (false)\"\n          popover=\"{{ 'designer.timeline.grid' | translate }}\"\n          container=\"body\"\n          placement=\"left\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-th\" aria-hidden=\"true\"></i\n        ></a>\n      </div>\n      }\n    </div>\n\n    @if (timelineService.loadingAudioFile) {\n    <div class=\"w-100 d-flex\">\n      <i class=\"fa fa-circle-o-notch fa-spin m-auto\" style=\"margin-top: -30px\"></i>\n    </div>\n    } @if (timelineService.audioFileError) {\n    <div class=\"w-100 d-flex\">\n      <a href=\"#\" class=\"m-auto text-warning\" (click)=\"compositionSettings(); (false)\"\n        ><i class=\"fa fa-exclamation-triangle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.timeline.audio-file-error' | translate }}</a\n      >\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div>\n      <div id=\"waveform-timeline\"></div>\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div #waveWrapper class=\"h-100\" style=\"flex: 2; position: relative\">\n      <div #waveElement id=\"waveform\"></div>\n    </div>\n    } @if (projectService.project.compositions.length == 0) {\n    <div class=\"w-100 d-flex\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"addComposition(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.timeline.no-compositions' | translate }}</a\n      >\n    </div>\n    }\n  </div>\n</div>\n", styles: [""], dependencies: [{ kind: "directive", type: i3$2.NgSelectOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.ɵNgSelectMultipleOption, selector: "option", inputs: ["ngValue", "value"] }, { kind: "directive", type: i3$2.DefaultValueAccessor, selector: "input:not([type=checkbox])[formControlName],textarea[formControlName],input:not([type=checkbox])[formControl],textarea[formControl],input:not([type=checkbox])[ngModel],textarea[ngModel],[ngDefaultControl]" }, { kind: "directive", type: i3$2.SelectControlValueAccessor, selector: "select:not([multiple])[formControlName],select:not([multiple])[formControl],select:not([multiple])[ngModel]", inputs: ["compareWith"] }, { kind: "directive", type: i3$2.NgControlStatus, selector: "[formControlName],[ngModel],[formControl]" }, { kind: "directive", type: i3$2.NgModel, selector: "[ngModel]:not([formControlName]):not([formControl])", inputs: ["name", "disabled", "ngModel", "ngModelOptions"], outputs: ["ngModelChange"], exportAs: ["ngModel"] }, { kind: "component", type: i4$1.SliderComponent, selector: "mv-slider", inputs: ["style", "value", "min", "max", "step", "precision", "orientation", "range", "selection", "tooltip", "tooltipSplit", "tooltipPosition", "handle", "reversed", "rtl", "enabled", "naturalArrowKeys", "ticks", "ticksPositions", "ticksLabels", "ticksSnapBounds", "ticksTooltip", "scale", "labelledBy", "rangeHighlights", "formatter", "lockToTicks"], outputs: ["valueChange", "slide", "slideStart", "slideStop", "change"] }, { kind: "directive", type: i10.PopoverDirective, selector: "[popover]", inputs: ["adaptivePosition", "boundariesElement", "popover", "popoverContext", "popoverTitle", "placement", "outsideClick", "triggers", "container", "containerClass", "isOpen", "delay"], outputs: ["onShown", "onHidden"], exportAs: ["bs-popover"] }, { kind: "pipe", type: i4.TranslatePipe, name: "translate" }] }); }
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.16", ngImport: i0, type: TimelineComponent, decorators: [{
             type: Component,
-            args: [{ selector: 'lib-app-timeline', standalone: false, template: "<div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('timeline')\">\n  <div class=\"card-body h-100 d-flex\" style=\"flex-flow: column; overflow: unset\">\n    <div class=\"d-flex pb-3\">\n      <div class=\"d-flex mr-3 my-auto\" style=\"float: left\">\n        <a href=\"#\" class=\"btn btn-secondary m-0 p-1 mr-3\" (click)=\"addComposition(); (false)\"\n          ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n        ></a>\n\n        @if (projectService.project.compositions.length > 0) {\n        <select\n          class=\"mr-3\"\n          [ngModel]=\"timelineService.selectedCompositionIndex\"\n          (ngModelChange)=\"selectComposition($event)\"\n          style=\"width: 150px\"\n        >\n          @for (composition of projectService.project.compositions; track composition; let i = $index) {\n          <option [value]=\"i\">\n            {{ composition.name }}\n          </option>\n          }\n        </select>\n        } @if (timelineService.selectedComposition) {\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeComposition(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-composition' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"compositionSettings(); (false)\"\n            popover=\"{{ 'designer.timeline.composition-settings' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-cog\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <div class=\"btn-group\" role=\"group\">\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"rewind(); (false)\"\n            ><i class=\"fa fa-step-backward fa-fw\" aria-hidden=\"true\"></i\n          ></a>\n          @if (timelineService.playState == 'paused') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"play(); (false)\"><i class=\"fa fa-play fa-fw\" aria-hidden=\"true\"></i></a>\n          } @if (timelineService.playState == 'playing') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"pause(); (false)\"><i class=\"fa fa-pause fa-fw\" aria-hidden=\"true\"></i></a>\n          }\n        </div>\n        }\n      </div>\n\n      @if (timelineService.selectedComposition) {\n      <div class=\"d-flex w-100\">\n        @if (timelineService.duration) {\n        <div class=\"my-auto mr-3\">\n          <span style=\"width: 78px; text-align: left; display: inline-block; margin-left: 5px\">{{ timelineService.currentTime }}</span>\n          <span style=\"display: inline-block\"></span>- {{ timelineService.duration }}\n        </div>\n        }\n        <div class=\"my-auto mr-3 ml-auto\" style=\"float: left\">\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom - 20)\" class=\"fa fa-search-minus mr-3\" aria-hidden=\"true\"></i>\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"timelineService.zoom\"\n            [min]=\"0\"\n            [max]=\"200\"\n            [step]=\"20\"\n            (change)=\"timelineService.applyZoom($event.newValue)\"\n          ></mv-slider>\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom + 20)\" class=\"fa fa-search-plus ml-3\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"my-auto mr-3\">\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.startMillis\"\n            (ngModelChange)=\"setRegionStartMillis($event)\"\n          />\n          -\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.endMillis\"\n            (ngModelChange)=\"setRegionEndMillis($event)\"\n          />\n        </div>\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"addRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.add-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-file-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1\"\n          (click)=\"openGridSettings(); (false)\"\n          popover=\"{{ 'designer.timeline.grid' | translate }}\"\n          container=\"body\"\n          placement=\"left\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-th\" aria-hidden=\"true\"></i\n        ></a>\n      </div>\n      }\n    </div>\n\n    @if (timelineService.loadingAudioFile) {\n    <div class=\"w-100 d-flex\">\n      <i class=\"fa fa-circle-o-notch fa-spin m-auto\" style=\"margin-top: -30px\"></i>\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div>\n      <div id=\"waveform-timeline\"></div>\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div #waveWrapper class=\"h-100\" style=\"flex: 2; position: relative\">\n      <div #waveElement id=\"waveform\"></div>\n    </div>\n    } @if (projectService.project.compositions.length == 0) {\n    <div class=\"w-100 d-flex\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"addComposition(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.timeline.no-compositions' | translate }}</a\n      >\n    </div>\n    }\n  </div>\n</div>\n" }]
+            args: [{ selector: 'lib-app-timeline', standalone: false, template: "<div class=\"card border-secondary h-100\" [class.card-intro-active]=\"introService.showStep('timeline')\">\n  <div class=\"card-body h-100 d-flex\" style=\"flex-flow: column; overflow: unset\">\n    <div class=\"d-flex pb-3\">\n      <div class=\"d-flex mr-3 my-auto\" style=\"float: left\">\n        <a href=\"#\" class=\"btn btn-secondary m-0 p-1 mr-3\" (click)=\"addComposition(); (false)\"\n          ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i\n        ></a>\n\n        @if (projectService.project.compositions.length > 0) {\n        <select\n          class=\"mr-3\"\n          [ngModel]=\"timelineService.selectedCompositionIndex\"\n          (ngModelChange)=\"selectComposition($event)\"\n          style=\"width: 150px\"\n        >\n          @for (composition of projectService.project.compositions; track composition; let i = $index) {\n          <option [value]=\"i\">\n            {{ composition.name }}\n          </option>\n          }\n        </select>\n        } @if (timelineService.selectedComposition) {\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeComposition(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-composition' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"compositionSettings(); (false)\"\n            popover=\"{{ 'designer.timeline.composition-settings' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-cog\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <div class=\"btn-group\" role=\"group\">\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"rewind(); (false)\"\n            ><i class=\"fa fa-step-backward fa-fw\" aria-hidden=\"true\"></i\n          ></a>\n          @if (timelineService.playState == 'paused') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"play(); (false)\"><i class=\"fa fa-play fa-fw\" aria-hidden=\"true\"></i></a>\n          } @if (timelineService.playState == 'playing') {\n          <a href=\"#\" class=\"btn btn-primary m-0 p-1\" (click)=\"pause(); (false)\"><i class=\"fa fa-pause fa-fw\" aria-hidden=\"true\"></i></a>\n          }\n        </div>\n        }\n      </div>\n\n      @if (timelineService.selectedComposition) {\n      <div class=\"d-flex w-100\">\n        @if (timelineService.duration) {\n        <div class=\"my-auto mr-3\">\n          <span style=\"width: 78px; text-align: left; display: inline-block; margin-left: 5px\">{{ timelineService.currentTime }}</span>\n          <span style=\"display: inline-block\"></span>- {{ timelineService.duration }}\n        </div>\n        }\n        <div class=\"my-auto mr-3 ml-auto\" style=\"float: left\">\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom - 20)\" class=\"fa fa-search-minus mr-3\" aria-hidden=\"true\"></i>\n          <mv-slider\n            style=\"width: 80px\"\n            [tooltip]=\"'hide'\"\n            [value]=\"timelineService.zoom\"\n            [min]=\"0\"\n            [max]=\"200\"\n            [step]=\"20\"\n            (change)=\"timelineService.applyZoom($event.newValue)\"\n          ></mv-slider>\n          <i (click)=\"timelineService.applyZoom(timelineService.zoom + 20)\" class=\"fa fa-search-plus ml-3\" aria-hidden=\"true\"></i>\n        </div>\n        <div class=\"my-auto mr-3\">\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.startMillis\"\n            (ngModelChange)=\"setRegionStartMillis($event)\"\n          />\n          -\n          <input\n            type=\"text\"\n            class=\"sd-value-input sd-value-input-time\"\n            [ngModel]=\"timelineService.selectedPlaybackRegion?.endMillis\"\n            (ngModelChange)=\"setRegionEndMillis($event)\"\n          />\n        </div>\n        <div class=\"btn-group mr-3\" role=\"group\">\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"addRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.add-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-file-o\" aria-hidden=\"true\"></i\n          ></a>\n          <a\n            href=\"#\"\n            class=\"btn btn-secondary m-0 py-1\"\n            (click)=\"removeRegion(); (false)\"\n            popover=\"{{ 'designer.timeline.remove-region' | translate }}\"\n            container=\"body\"\n            placement=\"top\"\n            triggers=\"mouseenter:mouseleave\"\n            ><i class=\"fa fa-trash\" aria-hidden=\"true\"></i\n          ></a>\n        </div>\n        <a\n          href=\"#\"\n          class=\"btn btn-secondary m-0 py-1\"\n          (click)=\"openGridSettings(); (false)\"\n          popover=\"{{ 'designer.timeline.grid' | translate }}\"\n          container=\"body\"\n          placement=\"left\"\n          triggers=\"mouseenter:mouseleave\"\n          ><i class=\"fa fa-th\" aria-hidden=\"true\"></i\n        ></a>\n      </div>\n      }\n    </div>\n\n    @if (timelineService.loadingAudioFile) {\n    <div class=\"w-100 d-flex\">\n      <i class=\"fa fa-circle-o-notch fa-spin m-auto\" style=\"margin-top: -30px\"></i>\n    </div>\n    } @if (timelineService.audioFileError) {\n    <div class=\"w-100 d-flex\">\n      <a href=\"#\" class=\"m-auto text-warning\" (click)=\"compositionSettings(); (false)\"\n        ><i class=\"fa fa-exclamation-triangle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.timeline.audio-file-error' | translate }}</a\n      >\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div>\n      <div id=\"waveform-timeline\"></div>\n    </div>\n    } @if (timelineService.selectedComposition) {\n    <div #waveWrapper class=\"h-100\" style=\"flex: 2; position: relative\">\n      <div #waveElement id=\"waveform\"></div>\n    </div>\n    } @if (projectService.project.compositions.length == 0) {\n    <div class=\"w-100 d-flex\">\n      <a href=\"#\" class=\"m-auto\" (click)=\"addComposition(); (false)\"\n        ><i class=\"fa fa-plus-circle fa-fw\" aria-hidden=\"true\"></i> {{ 'designer.timeline.no-compositions' | translate }}</a\n      >\n    </div>\n    }\n  </div>\n</div>\n" }]
         }], ctorParameters: () => [{ type: TimelineService }, { type: i0.ChangeDetectorRef }, { type: i1$1.BsModalService }, { type: UuidService }, { type: ProjectService }, { type: HotkeyTargetExcludeService }, { type: WarningDialogService }, { type: i1.HttpClient }, { type: ConfigService }, { type: IntroService }, { type: LivePreviewService }], propDecorators: { waveWrapper: [{
                 type: ViewChild,
                 args: ['waveWrapper']