videogular2/compiled/src/controls/vg-quality-selector/vg-quality-selector.js

Videogular is a video application framework for desktop and mobile powered by Angular

"use strict";
var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
    return c > 3 && r && Object.defineProperty(target, key, r), r;
};
var __metadata = (this && this.__metadata) || function (k, v) {
    if (typeof Reflect === "object" && typeof Reflect.metadata === "function") return Reflect.metadata(k, v);
};
Object.defineProperty(exports, "__esModule", { value: true });
var core_1 = require("@angular/core");
var vg_api_1 = require("../../core/services/vg-api");
var VgQualitySelector = /** @class */ (function () {
    function VgQualitySelector(ref, API) {
        this.API = API;
        this.onBitrateChange = new core_1.EventEmitter();
        this.subscriptions = [];
        this.elem = ref.nativeElement;
    }
    VgQualitySelector.prototype.ngOnInit = function () {
    };
    VgQualitySelector.prototype.ngOnChanges = function (changes) {
        if (changes['bitrates'].currentValue && changes['bitrates'].currentValue.length) {
            this.bitrates.forEach(function (item) { return item.label = item.label || Math.round(item.bitrate / 1000).toString(); });
        }
    };
    VgQualitySelector.prototype.selectBitrate = function (index) {
        this.bitrateSelected = this.bitrates[index];
        this.onBitrateChange.emit(this.bitrates[index]);
    };
    VgQualitySelector.prototype.ngOnDestroy = function () {
        this.subscriptions.forEach(function (s) { return s.unsubscribe(); });
    };
    __decorate([
        core_1.Input(),
        __metadata("design:type", Array)
    ], VgQualitySelector.prototype, "bitrates", void 0);
    __decorate([
        core_1.Output(),
        __metadata("design:type", core_1.EventEmitter)
    ], VgQualitySelector.prototype, "onBitrateChange", void 0);
    VgQualitySelector = __decorate([
        core_1.Component({
            selector: 'vg-quality-selector',
            encapsulation: core_1.ViewEncapsulation.None,
            template: "\n        <div class=\"container\">\n            <div class=\"quality-selected\"\n                 [class.vg-icon-hd]=\"!bitrateSelected\">\n                {{ bitrateSelected?.label }}\n            </div>\n            \n            <select class=\"quality-selector\" \n                    (change)=\"selectBitrate($event.target.value)\"\n                    tabindex=\"0\"\n                    aria-label=\"quality selector\"\n                    [attr.aria-valuetext]=\"ariaValue\">\n                <option \n                    *ngFor=\"let bitrate of bitrates\"\n                    [value]=\"bitrate.qualityIndex\"\n                    [selected]=\"bitrate.qualityIndex === bitrateSelected?.qualityIndex\">\n                    {{ bitrate.label }}\n                </option>\n            </select>\n        </div>\n    ",
            styles: ["\n        vg-quality-selector {\n            -webkit-touch-callout: none;\n            -webkit-user-select: none;\n            -moz-user-select: none;\n            -ms-user-select: none;\n            user-select: none;\n            display: flex;\n            justify-content: center;\n            width: 50px;\n            height: 50px;\n            cursor: pointer;\n            color: white;\n            line-height: 50px;\n        }\n        vg-quality-selector .container {\n            position: relative;\n            display: flex;\n            flex-grow: 1;\n            align-items: center;\n            \n            padding: 0;\n            margin: 5px;\n        }\n        vg-quality-selector select.quality-selector {\n            width: 50px;\n            padding: 5px 8px;\n            border: none;\n            background: none;\n            -webkit-appearance: none;\n            -moz-appearance: none;\n            appearance: none;\n            color: transparent;\n            font-size: 16px;\n        }\n        vg-quality-selector select.quality-selector::-ms-expand {\n            display: none;\n        }\n        vg-quality-selector select.quality-selector option {\n            color: #000;\n        }\n        vg-quality-selector .quality-selected {\n            position: absolute;\n            width: 100%;\n            height: 50px;\n            top: -6px;\n            text-align: center;\n            text-transform: uppercase;\n            font-family: Helvetica Neue, Helvetica, Arial, sans-serif;\n            padding-top: 2px;\n            pointer-events: none;\n        }\n        vg-quality-selector .vg-icon-closed_caption:before {\n            width: 100%;\n        }\n    "]
        }),
        __metadata("design:paramtypes", [core_1.ElementRef, vg_api_1.VgAPI])
    ], VgQualitySelector);
    return VgQualitySelector;
}());
exports.VgQualitySelector = VgQualitySelector;
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoidmctcXVhbGl0eS1zZWxlY3Rvci5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uL3NyYy9jb250cm9scy92Zy1xdWFsaXR5LXNlbGVjdG9yL3ZnLXF1YWxpdHktc2VsZWN0b3IudHMiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6Ijs7Ozs7Ozs7Ozs7QUFBQSxzQ0FTdUI7QUFDdkIscURBQW1EO0FBcUZuRDtJQWNJLDJCQUFZLEdBQWUsRUFBUyxHQUFVO1FBQVYsUUFBRyxHQUFILEdBQUcsQ0FBTztRQVhwQyxvQkFBZSxHQUFnQyxJQUFJLG1CQUFZLEVBQUUsQ0FBQztRQU81RSxrQkFBYSxHQUFtQixFQUFFLENBQUM7UUFLL0IsSUFBSSxDQUFDLElBQUksR0FBRyxHQUFHLENBQUMsYUFBYSxDQUFDO0lBQ2xDLENBQUM7SUFFRCxvQ0FBUSxHQUFSO0lBQ0EsQ0FBQztJQUVELHVDQUFXLEdBQVgsVUFBWSxPQUFzQjtRQUM5QixJQUFJLE9BQU8sQ0FBQyxVQUFVLENBQUMsQ0FBQyxZQUFZLElBQUksT0FBTyxDQUFDLFVBQVUsQ0FBQyxDQUFDLFlBQVksQ0FBQyxNQUFNLEVBQUU7WUFDN0UsSUFBSSxDQUFDLFFBQVEsQ0FBQyxPQUFPLENBQUMsVUFBQSxJQUFJLElBQUksT0FBQSxJQUFJLENBQUMsS0FBSyxHQUFHLElBQUksQ0FBQyxLQUFLLElBQUksSUFBSSxDQUFDLEtBQUssQ0FBQyxJQUFJLENBQUMsT0FBTyxHQUFHLElBQUksQ0FBQyxDQUFDLFFBQVEsRUFBRSxFQUFyRSxDQUFxRSxDQUFDLENBQUM7U0FDeEc7SUFDTCxDQUFDO0lBRUQseUNBQWEsR0FBYixVQUFjLEtBQWE7UUFDdkIsSUFBSSxDQUFDLGVBQWUsR0FBRyxJQUFJLENBQUMsUUFBUSxDQUFDLEtBQUssQ0FBQyxDQUFDO1FBQzVDLElBQUksQ0FBQyxlQUFlLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxRQUFRLENBQUMsS0FBSyxDQUFDLENBQUMsQ0FBQztJQUNwRCxDQUFDO0lBRUQsdUNBQVcsR0FBWDtRQUNJLElBQUksQ0FBQyxhQUFhLENBQUMsT0FBTyxDQUFDLFVBQUEsQ0FBQyxJQUFJLE9BQUEsQ0FBQyxDQUFDLFdBQVcsRUFBRSxFQUFmLENBQWUsQ0FBQyxDQUFDO0lBQ3JELENBQUM7SUFqQ1E7UUFBUixZQUFLLEVBQUU7O3VEQUEyQjtJQUV6QjtRQUFULGFBQU0sRUFBRTtrQ0FBa0IsbUJBQVk7OERBQXFDO0lBSG5FLGlCQUFpQjtRQWpGN0IsZ0JBQVMsQ0FBQztZQUNQLFFBQVEsRUFBRSxxQkFBcUI7WUFDL0IsYUFBYSxFQUFFLHdCQUFpQixDQUFDLElBQUk7WUFDckMsUUFBUSxFQUFFLDJ6QkFvQlQ7WUFDRCxNQUFNLEVBQUUsQ0FBRSx3ckRBdURULENBQUU7U0FDTixDQUFDO3lDQWVtQixpQkFBVSxFQUFjLGNBQUs7T0FkckMsaUJBQWlCLENBbUM3QjtJQUFELHdCQUFDO0NBQUEsQUFuQ0QsSUFtQ0M7QUFuQ1ksOENBQWlCIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHtcbiAgICBDb21wb25lbnQsXG4gICAgRWxlbWVudFJlZixcbiAgICBPbkluaXQsXG4gICAgSW5wdXQsXG4gICAgVmlld0VuY2Fwc3VsYXRpb24sXG4gICAgT25EZXN0cm95LFxuICAgIFNpbXBsZUNoYW5nZXMsXG4gICAgT25DaGFuZ2VzLCBPdXRwdXQsIEV2ZW50RW1pdHRlclxufSBmcm9tICdAYW5ndWxhci9jb3JlJztcbmltcG9ydCB7IFZnQVBJIH0gZnJvbSAnLi4vLi4vY29yZS9zZXJ2aWNlcy92Zy1hcGknO1xuaW1wb3J0IHsgU3Vic2NyaXB0aW9uIH0gZnJvbSAncnhqcyc7XG5pbXBvcnQgeyBCaXRyYXRlT3B0aW9uIH0gZnJvbSAnLi4vLi4vY29yZS9jb3JlJztcblxuQENvbXBvbmVudCh7XG4gICAgc2VsZWN0b3I6ICd2Zy1xdWFsaXR5LXNlbGVjdG9yJyxcbiAgICBlbmNhcHN1bGF0aW9uOiBWaWV3RW5jYXBzdWxhdGlvbi5Ob25lLFxuICAgIHRlbXBsYXRlOiBgXG4gICAgICAgIDxkaXYgY2xhc3M9XCJjb250YWluZXJcIj5cbiAgICAgICAgICAgIDxkaXYgY2xhc3M9XCJxdWFsaXR5LXNlbGVjdGVkXCJcbiAgICAgICAgICAgICAgICAgW2NsYXNzLnZnLWljb24taGRdPVwiIWJpdHJhdGVTZWxlY3RlZFwiPlxuICAgICAgICAgICAgICAgIHt7IGJpdHJhdGVTZWxlY3RlZD8ubGFiZWwgfX1cbiAgICAgICAgICAgIDwvZGl2PlxuICAgICAgICAgICAgXG4gICAgICAgICAgICA8c2VsZWN0IGNsYXNzPVwicXVhbGl0eS1zZWxlY3RvclwiIFxuICAgICAgICAgICAgICAgICAgICAoY2hhbmdlKT1cInNlbGVjdEJpdHJhdGUoJGV2ZW50LnRhcmdldC52YWx1ZSlcIlxuICAgICAgICAgICAgICAgICAgICB0YWJpbmRleD1cIjBcIlxuICAgICAgICAgICAgICAgICAgICBhcmlhLWxhYmVsPVwicXVhbGl0eSBzZWxlY3RvclwiXG4gICAgICAgICAgICAgICAgICAgIFthdHRyLmFyaWEtdmFsdWV0ZXh0XT1cImFyaWFWYWx1ZVwiPlxuICAgICAgICAgICAgICAgIDxvcHRpb24gXG4gICAgICAgICAgICAgICAgICAgICpuZ0Zvcj1cImxldCBiaXRyYXRlIG9mIGJpdHJhdGVzXCJcbiAgICAgICAgICAgICAgICAgICAgW3ZhbHVlXT1cImJpdHJhdGUucXVhbGl0eUluZGV4XCJcbiAgICAgICAgICAgICAgICAgICAgW3NlbGVjdGVkXT1cImJpdHJhdGUucXVhbGl0eUluZGV4ID09PSBiaXRyYXRlU2VsZWN0ZWQ/LnF1YWxpdHlJbmRleFwiPlxuICAgICAgICAgICAgICAgICAgICB7eyBiaXRyYXRlLmxhYmVsIH19XG4gICAgICAgICAgICAgICAgPC9vcHRpb24+XG4gICAgICAgICAgICA8L3NlbGVjdD5cbiAgICAgICAgPC9kaXY+XG4gICAgYCxcbiAgICBzdHlsZXM6IFsgYFxuICAgICAgICB2Zy1xdWFsaXR5LXNlbGVjdG9yIHtcbiAgICAgICAgICAgIC13ZWJraXQtdG91Y2gtY2FsbG91dDogbm9uZTtcbiAgICAgICAgICAgIC13ZWJraXQtdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICAtbW96LXVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgLW1zLXVzZXItc2VsZWN0OiBub25lO1xuICAgICAgICAgICAgdXNlci1zZWxlY3Q6IG5vbmU7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAganVzdGlmeS1jb250ZW50OiBjZW50ZXI7XG4gICAgICAgICAgICB3aWR0aDogNTBweDtcbiAgICAgICAgICAgIGhlaWdodDogNTBweDtcbiAgICAgICAgICAgIGN1cnNvcjogcG9pbnRlcjtcbiAgICAgICAgICAgIGNvbG9yOiB3aGl0ZTtcbiAgICAgICAgICAgIGxpbmUtaGVpZ2h0OiA1MHB4O1xuICAgICAgICB9XG4gICAgICAgIHZnLXF1YWxpdHktc2VsZWN0b3IgLmNvbnRhaW5lciB7XG4gICAgICAgICAgICBwb3NpdGlvbjogcmVsYXRpdmU7XG4gICAgICAgICAgICBkaXNwbGF5OiBmbGV4O1xuICAgICAgICAgICAgZmxleC1ncm93OiAxO1xuICAgICAgICAgICAgYWxpZ24taXRlbXM6IGNlbnRlcjtcbiAgICAgICAgICAgIFxuICAgICAgICAgICAgcGFkZGluZzogMDtcbiAgICAgICAgICAgIG1hcmdpbjogNXB4O1xuICAgICAgICB9XG4gICAgICAgIHZnLXF1YWxpdHktc2VsZWN0b3Igc2VsZWN0LnF1YWxpdHktc2VsZWN0b3Ige1xuICAgICAgICAgICAgd2lkdGg6IDUwcHg7XG4gICAgICAgICAgICBwYWRkaW5nOiA1cHggOHB4O1xuICAgICAgICAgICAgYm9yZGVyOiBub25lO1xuICAgICAgICAgICAgYmFja2dyb3VuZDogbm9uZTtcbiAgICAgICAgICAgIC13ZWJraXQtYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgICAgICAgIC1tb3otYXBwZWFyYW5jZTogbm9uZTtcbiAgICAgICAgICAgIGFwcGVhcmFuY2U6IG5vbmU7XG4gICAgICAgICAgICBjb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgICAgICAgICBmb250LXNpemU6IDE2cHg7XG4gICAgICAgIH1cbiAgICAgICAgdmctcXVhbGl0eS1zZWxlY3RvciBzZWxlY3QucXVhbGl0eS1zZWxlY3Rvcjo6LW1zLWV4cGFuZCB7XG4gICAgICAgICAgICBkaXNwbGF5OiBub25lO1xuICAgICAgICB9XG4gICAgICAgIHZnLXF1YWxpdHktc2VsZWN0b3Igc2VsZWN0LnF1YWxpdHktc2VsZWN0b3Igb3B0aW9uIHtcbiAgICAgICAgICAgIGNvbG9yOiAjMDAwO1xuICAgICAgICB9XG4gICAgICAgIHZnLXF1YWxpdHktc2VsZWN0b3IgLnF1YWxpdHktc2VsZWN0ZWQge1xuICAgICAgICAgICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgICAgICAgICAgd2lkdGg6IDEwMCU7XG4gICAgICAgICAgICBoZWlnaHQ6IDUwcHg7XG4gICAgICAgICAgICB0b3A6IC02cHg7XG4gICAgICAgICAgICB0ZXh0LWFsaWduOiBjZW50ZXI7XG4gICAgICAgICAgICB0ZXh0LXRyYW5zZm9ybTogdXBwZXJjYXNlO1xuICAgICAgICAgICAgZm9udC1mYW1pbHk6IEhlbHZldGljYSBOZXVlLCBIZWx2ZXRpY2EsIEFyaWFsLCBzYW5zLXNlcmlmO1xuICAgICAgICAgICAgcGFkZGluZy10b3A6IDJweDtcbiAgICAgICAgICAgIHBvaW50ZXItZXZlbnRzOiBub25lO1xuICAgICAgICB9XG4gICAgICAgIHZnLXF1YWxpdHktc2VsZWN0b3IgLnZnLWljb24tY2xvc2VkX2NhcHRpb246YmVmb3JlIHtcbiAgICAgICAgICAgIHdpZHRoOiAxMDAlO1xuICAgICAgICB9XG4gICAgYCBdXG59KVxuZXhwb3J0IGNsYXNzIFZnUXVhbGl0eVNlbGVjdG9yIGltcGxlbWVudHMgT25Jbml0LCBPbkNoYW5nZXMsIE9uRGVzdHJveSB7XG4gICAgQElucHV0KCkgYml0cmF0ZXM6IEJpdHJhdGVPcHRpb25bXTtcblxuICAgIEBPdXRwdXQoKSBvbkJpdHJhdGVDaGFuZ2U6IEV2ZW50RW1pdHRlcjxCaXRyYXRlT3B0aW9uPiA9IG5ldyBFdmVudEVtaXR0ZXIoKTtcblxuICAgIGJpdHJhdGVTZWxlY3RlZDogQml0cmF0ZU9wdGlvbjtcblxuICAgIGVsZW06IEhUTUxFbGVtZW50O1xuICAgIHRhcmdldDogYW55O1xuXG4gICAgc3Vic2NyaXB0aW9uczogU3Vic2NyaXB0aW9uW10gPSBbXTtcblxuICAgIGFyaWFWYWx1ZTogc3RyaW5nO1xuXG4gICAgY29uc3RydWN0b3IocmVmOiBFbGVtZW50UmVmLCBwdWJsaWMgQVBJOiBWZ0FQSSkge1xuICAgICAgICB0aGlzLmVsZW0gPSByZWYubmF0aXZlRWxlbWVudDtcbiAgICB9XG5cbiAgICBuZ09uSW5pdCgpIHtcbiAgICB9XG5cbiAgICBuZ09uQ2hhbmdlcyhjaGFuZ2VzOiBTaW1wbGVDaGFuZ2VzKSB7XG4gICAgICAgIGlmIChjaGFuZ2VzWydiaXRyYXRlcyddLmN1cnJlbnRWYWx1ZSAmJiBjaGFuZ2VzWydiaXRyYXRlcyddLmN1cnJlbnRWYWx1ZS5sZW5ndGgpIHtcbiAgICAgICAgICAgIHRoaXMuYml0cmF0ZXMuZm9yRWFjaChpdGVtID0+IGl0ZW0ubGFiZWwgPSBpdGVtLmxhYmVsIHx8IE1hdGgucm91bmQoaXRlbS5iaXRyYXRlIC8gMTAwMCkudG9TdHJpbmcoKSk7XG4gICAgICAgIH1cbiAgICB9XG5cbiAgICBzZWxlY3RCaXRyYXRlKGluZGV4OiBudW1iZXIpIHtcbiAgICAgICAgdGhpcy5iaXRyYXRlU2VsZWN0ZWQgPSB0aGlzLmJpdHJhdGVzW2luZGV4XTtcbiAgICAgICAgdGhpcy5vbkJpdHJhdGVDaGFuZ2UuZW1pdCh0aGlzLmJpdHJhdGVzW2luZGV4XSk7XG4gICAgfVxuXG4gICAgbmdPbkRlc3Ryb3koKSB7XG4gICAgICAgIHRoaXMuc3Vic2NyaXB0aW9ucy5mb3JFYWNoKHMgPT4gcy51bnN1YnNjcmliZSgpKTtcbiAgICB9XG59XG4iXX0=