@cuby-ui/core 0.0.301 → 0.0.302
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -27,15 +27,15 @@ export class EditorVideoToolComponent extends EditorToolComponent {
|
|
|
27
27
|
return (event.key !== 'Backspace' && event.key !== 'Enter') || event.shiftKey;
|
|
28
28
|
}
|
|
29
29
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorVideoToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
30
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorVideoToolComponent, isStandalone: true, selector: "ng-component", inputs: { video: "video" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: i1.CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
30
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorVideoToolComponent, isStandalone: true, selector: "ng-component", inputs: { video: "video" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n muted\r\n playsinline\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: i1.CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
31
31
|
}
|
|
32
32
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorVideoToolComponent, decorators: [{
|
|
33
33
|
type: Component,
|
|
34
34
|
args: [{ standalone: true, imports: [CuiSvgModule, FormsModule, NgIf, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
35
35
|
'[class._hidden]': 'isShowLoadButton'
|
|
36
|
-
}, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
|
|
36
|
+
}, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n muted\r\n playsinline\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
|
|
37
37
|
}], propDecorators: { video: [{
|
|
38
38
|
type: Input,
|
|
39
39
|
args: [{ required: true }]
|
|
40
40
|
}] } });
|
|
41
|
-
//# sourceMappingURL=data:application/json;base64,
|
|
41
|
+
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiZWRpdG9yLXZpZGVvLXRvb2wuY29tcG9uZW50LmpzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vLi4vLi4vLi4vLi4vcHJvamVjdHMvY29yZS9lZGl0b3IvY29tcG9uZW50cy9lZGl0b3ItdmlkZW8tdG9vbC9lZGl0b3ItdmlkZW8tdG9vbC5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9jb3JlL2VkaXRvci9jb21wb25lbnRzL2VkaXRvci12aWRlby10b29sL2VkaXRvci12aWRlby10b29sLmNvbXBvbmVudC5odG1sIl0sIm5hbWVzIjpbXSwibWFwcGluZ3MiOiJBQUFBLE9BQU8sRUFBRSx1QkFBdUIsRUFBRSxTQUFTLEVBQUUsS0FBSyxFQUFFLE1BQU0sRUFBRSxNQUFNLGVBQWUsQ0FBQztBQUNsRixPQUFPLEVBQUUsV0FBVyxFQUFFLE1BQU0sZ0JBQWdCLENBQUM7QUFDN0MsT0FBTyxFQUFFLElBQUksRUFBRSxNQUFNLGlCQUFpQixDQUFDO0FBQ3ZDLE9BQU8sRUFBRSxrQkFBa0IsRUFBRSxNQUFNLG9CQUFvQixDQUFDO0FBRXhELE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxxQkFBcUIsQ0FBQztBQUNuRCxPQUFPLEVBQUUsbUJBQW1CLEVBQUUsTUFBTSxzQ0FBc0MsQ0FBQzs7O0FBWTNFLE1BQU0sT0FBTyx3QkFBeUIsU0FBUSxtQkFBbUI7SUFWakU7O1FBV2MsYUFBUSxHQUFHLE1BQU0sQ0FBQyxLQUFLLENBQUMsQ0FBQztLQXdCdEM7SUFuQkcsSUFBYyxnQkFBZ0I7UUFDMUIsT0FBTyxDQUFDLElBQUksQ0FBQyxLQUFLLElBQUksQ0FBQyxJQUFJLENBQUMsY0FBYyxJQUFJLENBQUMsSUFBSSxDQUFDLFNBQVMsQ0FBQztJQUNsRSxDQUFDO0lBRVMsTUFBTTtRQUNaLElBQUksQ0FBQyxRQUFRLENBQUMsR0FBRyxDQUFDLElBQUksQ0FBQyxDQUFDO0lBQzVCLENBQUM7SUFFUyxjQUFjLENBQUMsS0FBb0I7UUFDekMsSUFBSSxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxFQUFFLENBQUM7WUFDdkIsT0FBTztRQUNYLENBQUM7UUFFRCxLQUFLLENBQUMsZUFBZSxFQUFFLENBQUM7SUFDNUIsQ0FBQztJQUVPLFFBQVEsQ0FBQyxLQUFvQjtRQUNqQyxPQUFPLENBQUMsS0FBSyxDQUFDLEdBQUcsS0FBSyxXQUFXLElBQUksS0FBSyxDQUFDLEdBQUcsS0FBSyxPQUFPLENBQUMsSUFBSSxLQUFLLENBQUMsUUFBUSxDQUFDO0lBQ2xGLENBQUM7K0dBeEJRLHdCQUF3QjttR0FBeEIsd0JBQXdCLDBMQ2xCckMsaWtFQTBFQSwrN0NEaEVjLFlBQVksdUtBQUUsV0FBVywrQkFBRSxJQUFJLDZGQUFFLGtCQUFrQjs7NEZBUXBELHdCQUF3QjtrQkFWcEMsU0FBUztpQ0FDTSxJQUFJLFdBQ1AsQ0FBQyxZQUFZLEVBQUUsV0FBVyxFQUFFLElBQUksRUFBRSxrQkFBa0IsQ0FBQyxtQkFHN0MsdUJBQXVCLENBQUMsTUFBTSxRQUN6Qzt3QkFDRixpQkFBaUIsRUFBRSxrQkFBa0I7cUJBQ3hDOzhCQU1NLEtBQUs7c0JBRFgsS0FBSzt1QkFBQyxFQUFFLFFBQVEsRUFBRSxJQUFJLEVBQUUiLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgeyBDaGFuZ2VEZXRlY3Rpb25TdHJhdGVneSwgQ29tcG9uZW50LCBJbnB1dCwgc2lnbmFsIH0gZnJvbSAnQGFuZ3VsYXIvY29yZSc7XHJcbmltcG9ydCB7IEZvcm1zTW9kdWxlIH0gZnJvbSAnQGFuZ3VsYXIvZm9ybXMnO1xyXG5pbXBvcnQgeyBOZ0lmIH0gZnJvbSAnQGFuZ3VsYXIvY29tbW9uJztcclxuaW1wb3J0IHsgVHJhbnNsb2NvRGlyZWN0aXZlIH0gZnJvbSAnQGpzdmVyc2UvdHJhbnNsb2NvJztcclxuXHJcbmltcG9ydCB7IEN1aVN2Z01vZHVsZSB9IGZyb20gJy4uLy4uLy4uL2NvbXBvbmVudHMnO1xyXG5pbXBvcnQgeyBFZGl0b3JUb29sQ29tcG9uZW50IH0gZnJvbSAnLi4vZWRpdG9yLXRvb2wvZWRpdG9yLXRvb2wuY29tcG9uZW50JztcclxuXHJcbkBDb21wb25lbnQoe1xyXG4gICAgc3RhbmRhbG9uZTogdHJ1ZSxcclxuICAgIGltcG9ydHM6IFtDdWlTdmdNb2R1bGUsIEZvcm1zTW9kdWxlLCBOZ0lmLCBUcmFuc2xvY29EaXJlY3RpdmVdLFxyXG4gICAgdGVtcGxhdGVVcmw6ICcuL2VkaXRvci12aWRlby10b29sLmNvbXBvbmVudC5odG1sJyxcclxuICAgIHN0eWxlVXJsczogWycuL2VkaXRvci12aWRlby10b29sLmNvbXBvbmVudC5zY3NzJ10sXHJcbiAgICBjaGFuZ2VEZXRlY3Rpb246IENoYW5nZURldGVjdGlvblN0cmF0ZWd5Lk9uUHVzaCxcclxuICAgIGhvc3Q6IHtcclxuICAgICAgICAnW2NsYXNzLl9oaWRkZW5dJzogJ2lzU2hvd0xvYWRCdXR0b24nXHJcbiAgICB9XHJcbn0pXHJcbmV4cG9ydCBjbGFzcyBFZGl0b3JWaWRlb1Rvb2xDb21wb25lbnQgZXh0ZW5kcyBFZGl0b3JUb29sQ29tcG9uZW50IHtcclxuICAgIHByb3RlY3RlZCBpc0xvYWRlZCA9IHNpZ25hbChmYWxzZSk7XHJcblxyXG4gICAgQElucHV0KHsgcmVxdWlyZWQ6IHRydWUgfSlcclxuICAgIHB1YmxpYyB2aWRlbyE6IHN0cmluZztcclxuXHJcbiAgICBwcm90ZWN0ZWQgZ2V0IGlzU2hvd0xvYWRCdXR0b24oKTogYm9vbGVhbiB7XHJcbiAgICAgICAgcmV0dXJuICF0aGlzLnZpZGVvICYmICF0aGlzLmlzQ2FwdGlvblNob3duICYmICF0aGlzLmlzTG9hZGluZztcclxuICAgIH1cclxuXHJcbiAgICBwcm90ZWN0ZWQgb25QbGF5KCk6IHZvaWQge1xyXG4gICAgICAgIHRoaXMuaXNMb2FkZWQuc2V0KHRydWUpO1xyXG4gICAgfVxyXG5cclxuICAgIHByb3RlY3RlZCBvblByZXZlbnRFbnRlcihldmVudDogS2V5Ym9hcmRFdmVudCk6IHZvaWQge1xyXG4gICAgICAgIGlmICh0aGlzLmNoZWNrS2V5KGV2ZW50KSkge1xyXG4gICAgICAgICAgICByZXR1cm47XHJcbiAgICAgICAgfVxyXG5cclxuICAgICAgICBldmVudC5zdG9wUHJvcGFnYXRpb24oKTtcclxuICAgIH1cclxuXHJcbiAgICBwcml2YXRlIGNoZWNrS2V5KGV2ZW50OiBLZXlib2FyZEV2ZW50KTogYm9vbGVhbiB7XHJcbiAgICAgICAgcmV0dXJuIChldmVudC5rZXkgIT09ICdCYWNrc3BhY2UnICYmIGV2ZW50LmtleSAhPT0gJ0VudGVyJykgfHwgZXZlbnQuc2hpZnRLZXk7XHJcbiAgICB9XHJcbn1cclxuIiwiPG5nLWNvbnRhaW5lciAqdHJhbnNsb2NvPVwibGV0IHRcIj5cclxuICA8bmctY29udGFpbmVyICpuZ0lmPVwiIWlzTG9hZGluZzsgZWxzZSBwcmVsb2FkZXJcIj5cclxuICAgIDxuZy1jb250YWluZXIgKm5nSWY9XCJ2aWRlbzsgZWxzZSBidXR0b25UZW1wbGF0ZVwiPlxyXG4gICAgICA8ZGl2XHJcbiAgICAgICAgICBjbGFzcz1cIndyYXBwZXJcIlxyXG4gICAgICAgICAgW2NsYXNzLl9sb2FkZWRdPVwiaXNMb2FkZWQoKVwiXHJcbiAgICAgID5cclxuICAgICAgICA8dmlkZW9cclxuICAgICAgICAgICAgKm5nSWY9XCJpc0xvYWRlZCgpOyBlbHNlIHBsYXlCdXR0b25UZW1wbGF0ZVwiXHJcbiAgICAgICAgICAgIGNsYXNzPVwidmlkZW9cIlxyXG4gICAgICAgICAgICBbc3JjXT1cInZpZGVvXCJcclxuICAgICAgICAgICAgY29udHJvbHNcclxuICAgICAgICAgICAgYXV0b3BsYXlcclxuICAgICAgICAgICAgbXV0ZWRcclxuICAgICAgICAgICAgcGxheXNpbmxpbmVcclxuICAgICAgICA+PC92aWRlbz5cclxuXHJcbiAgICAgICAgPG5nLXRlbXBsYXRlICNwbGF5QnV0dG9uVGVtcGxhdGU+XHJcbiAgICAgICAgICA8YnV0dG9uXHJcbiAgICAgICAgICAgICAgdHlwZT1cImJ1dHRvblwiXHJcbiAgICAgICAgICAgICAgY2xhc3M9XCJwbGF5XCJcclxuICAgICAgICAgICAgICAoY2xpY2spPVwib25QbGF5KClcIlxyXG4gICAgICAgICAgPlxyXG4gICAgICAgICAgICA8Y3VpLXN2Z1xyXG4gICAgICAgICAgICAgICAgY2xhc3M9XCJwbGF5XCJcclxuICAgICAgICAgICAgICAgIGljb249XCJjdWlJY29uUGxheUNpcmNsZVNtXCJcclxuICAgICAgICAgICAgICAgIFtoZWlnaHRdPVwiNzJcIlxyXG4gICAgICAgICAgICAgICAgW3dpZHRoXT1cIjcyXCJcclxuICAgICAgICAgICAgICAgIFtzdHJva2VXaWR0aF09XCIwLjVcIlxyXG4gICAgICAgICAgICAvPlxyXG4gICAgICAgICAgPC9idXR0b24+XHJcbiAgICAgICAgPC9uZy10ZW1wbGF0ZT5cclxuICAgICAgPC9kaXY+XHJcblxyXG4gICAgICA8ZGl2XHJcbiAgICAgICAgICAqbmdJZj1cImlzQ2FwdGlvblNob3duXCJcclxuICAgICAgICAgIGNsYXNzPVwiY2FwdGlvbiBjZHgtaW5wdXRcIlxyXG4gICAgICAgICAgW2F0dHIuY29udGVudGVkaXRhYmxlXT1cIiFyZWFkT25seVwiXHJcbiAgICAgICAgICBhdHRyLmRhdGEtcGxhY2Vob2xkZXI9XCJ7eyB0KCdDQVBUSU9OJykgfX0uLi5cIlxyXG4gICAgICAgICAgKHBhc3RlKT1cIm9uVGl0bGVQYXN0ZSgkZXZlbnQpXCJcclxuICAgICAgICAgIChrZXlkb3duKT1cIm9uUHJldmVudEVudGVyKCRldmVudClcIlxyXG4gICAgICAgICAgKGtleXVwKT1cIm9uVGl0bGVDaGFuZ2UoJGV2ZW50KVwiXHJcbiAgICAgICAgICBbaW5uZXJIVE1MXT1cImNhcHRpb25cIlxyXG4gICAgICA+PC9kaXY+XHJcbiAgICA8L25nLWNvbnRhaW5lcj5cclxuXHJcbiAgICA8bmctdGVtcGxhdGUgI2J1dHRvblRlbXBsYXRlPlxyXG4gICAgICA8YnV0dG9uXHJcbiAgICAgICAgICB0eXBlPVwiYnV0dG9uXCJcclxuICAgICAgICAgIFtjbGFzc109XCJbJ3NlbGVjdC1idG4nLCB0aGlzLmFwaS5zdHlsZXMuYnV0dG9uXVwiXHJcbiAgICAgICAgICAoY2xpY2spPVwib25TZWxlY3RGaWxlKClcIlxyXG4gICAgICA+XHJcbiAgICAgICAgICA8Y3VpLXN2ZyBpY29uPVwiY3VpSWNvblBsYXlDaXJjbGVcIiAvPlxyXG4gICAgICAgICAgJm5ic3A7e3sgYnV0dG9uQ29udGVudCB9fVxyXG4gICAgICA8L2J1dHRvbj5cclxuICAgIDwvbmctdGVtcGxhdGU+XHJcbiAgPC9uZy1jb250YWluZXI+XHJcbjwvbmctY29udGFpbmVyPlxyXG5cclxuXHJcbjxuZy10ZW1wbGF0ZSAjcHJlbG9hZGVyPlxyXG4gIDxkaXYgY2xhc3M9XCJ3cmFwcGVyXCI+XHJcbiAgICA8ZGl2IGNsYXNzPVwicHJlbG9hZGVyXCI+XHJcbiAgICAgIDxpbWdcclxuICAgICAgICAgICpuZ0lmPVwicHJldmlld1wiXHJcbiAgICAgICAgICBjbGFzcz1cInByZWxvYWRlcl9faW1hZ2VcIlxyXG4gICAgICAgICAgW3NyY109XCJwcmV2aWV3XCJcclxuICAgICAgICAgIGFsdD1cIlByZWxvYWRlclwiXHJcbiAgICAgIC8+XHJcbiAgICA8L2Rpdj5cclxuICA8L2Rpdj5cclxuPC9uZy10ZW1wbGF0ZT5cclxuXHJcblxyXG4iXX0=
|
|
@@ -5433,13 +5433,13 @@ class EditorVideoToolComponent extends EditorToolComponent {
|
|
|
5433
5433
|
return (event.key !== 'Backspace' && event.key !== 'Enter') || event.shiftKey;
|
|
5434
5434
|
}
|
|
5435
5435
|
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorVideoToolComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
|
|
5436
|
-
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorVideoToolComponent, isStandalone: true, selector: "ng-component", inputs: { video: "video" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5436
|
+
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "18.2.13", type: EditorVideoToolComponent, isStandalone: true, selector: "ng-component", inputs: { video: "video" }, host: { properties: { "class._hidden": "isShowLoadButton" } }, usesInheritance: true, ngImport: i0, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n muted\r\n playsinline\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"], dependencies: [{ kind: "ngmodule", type: CuiSvgModule }, { kind: "component", type: CuiSvgComponent, selector: "cui-svg[icon]", inputs: ["width", "height", "strokeWidth", "color", "icon"] }, { kind: "ngmodule", type: FormsModule }, { kind: "directive", type: NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "directive", type: TranslocoDirective, selector: "[transloco]", inputs: ["transloco", "translocoParams", "translocoScope", "translocoRead", "translocoPrefix", "translocoLang", "translocoLoadingTpl"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
|
|
5437
5437
|
}
|
|
5438
5438
|
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "18.2.13", ngImport: i0, type: EditorVideoToolComponent, decorators: [{
|
|
5439
5439
|
type: Component,
|
|
5440
5440
|
args: [{ standalone: true, imports: [CuiSvgModule, FormsModule, NgIf, TranslocoDirective], changeDetection: ChangeDetectionStrategy.OnPush, host: {
|
|
5441
5441
|
'[class._hidden]': 'isShowLoadButton'
|
|
5442
|
-
}, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
|
|
5442
|
+
}, template: "<ng-container *transloco=\"let t\">\r\n <ng-container *ngIf=\"!isLoading; else preloader\">\r\n <ng-container *ngIf=\"video; else buttonTemplate\">\r\n <div\r\n class=\"wrapper\"\r\n [class._loaded]=\"isLoaded()\"\r\n >\r\n <video\r\n *ngIf=\"isLoaded(); else playButtonTemplate\"\r\n class=\"video\"\r\n [src]=\"video\"\r\n controls\r\n autoplay\r\n muted\r\n playsinline\r\n ></video>\r\n\r\n <ng-template #playButtonTemplate>\r\n <button\r\n type=\"button\"\r\n class=\"play\"\r\n (click)=\"onPlay()\"\r\n >\r\n <cui-svg\r\n class=\"play\"\r\n icon=\"cuiIconPlayCircleSm\"\r\n [height]=\"72\"\r\n [width]=\"72\"\r\n [strokeWidth]=\"0.5\"\r\n />\r\n </button>\r\n </ng-template>\r\n </div>\r\n\r\n <div\r\n *ngIf=\"isCaptionShown\"\r\n class=\"caption cdx-input\"\r\n [attr.contenteditable]=\"!readOnly\"\r\n attr.data-placeholder=\"{{ t('CAPTION') }}...\"\r\n (paste)=\"onTitlePaste($event)\"\r\n (keydown)=\"onPreventEnter($event)\"\r\n (keyup)=\"onTitleChange($event)\"\r\n [innerHTML]=\"caption\"\r\n ></div>\r\n </ng-container>\r\n\r\n <ng-template #buttonTemplate>\r\n <button\r\n type=\"button\"\r\n [class]=\"['select-btn', this.api.styles.button]\"\r\n (click)=\"onSelectFile()\"\r\n >\r\n <cui-svg icon=\"cuiIconPlayCircle\" />\r\n {{ buttonContent }}\r\n </button>\r\n </ng-template>\r\n </ng-container>\r\n</ng-container>\r\n\r\n\r\n<ng-template #preloader>\r\n <div class=\"wrapper\">\r\n <div class=\"preloader\">\r\n <img\r\n *ngIf=\"preview\"\r\n class=\"preloader__image\"\r\n [src]=\"preview\"\r\n alt=\"Preloader\"\r\n />\r\n </div>\r\n </div>\r\n</ng-template>\r\n\r\n\r\n", styles: [":host{font-weight:400;font-size:14px;line-height:20px;padding-top:6px;padding-bottom:6px;font-family:var(--cui-main-font);display:block}:host ::ng-deep .cdx-input{border:1px solid var(--cui-base-200);background:transparent;box-shadow:none}:host ::ng-deep .play{margin:auto}:host ::ng-deep .play path{fill:var(--cui-base-0);stroke:var(--cui-base-300)}:host._hidden{display:none}.wrapper{display:flex;flex-direction:column;margin-bottom:10px;border:1px solid var(--cui-base-200);border-radius:3px;min-height:200px;background-color:var(--cui-base-0)}.wrapper._loaded{min-height:auto}.video{display:block;max-width:100%}.preloader{width:50px;height:50px;border-radius:50%;background-size:cover;margin:auto;position:relative;background-color:var(--cui-base-200);background-position:center center}@keyframes preloader-spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.preloader__image{width:50px;height:50px;border-radius:50%}.preloader:after{content:\"\";position:absolute;z-index:3;width:60px;height:60px;border-radius:50%;border:2px solid var(--cui-base-200);border-top-color:var(--cui-blue-600);left:50%;top:50%;margin-top:-30px;margin-left:-30px;animation:preloader-spin 2s infinite linear;box-sizing:border-box}.caption[data-placeholder]:empty:before{content:attr(data-placeholder);position:absolute;color:var(--cui-base-400)}.select-btn{display:flex;align-items:center;justify-content:center;width:100%}\n"] }]
|
|
5443
5443
|
}], propDecorators: { video: [{
|
|
5444
5444
|
type: Input,
|
|
5445
5445
|
args: [{ required: true }]
|