playable
Version:
Video player based on HTML5Video
181 lines • 8.37 kB
JavaScript
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var tslib_1 = require("tslib");
var view_1 = (0, tslib_1.__importDefault)(require("../core/view"));
var templates_1 = require("./templates");
var htmlToElement_1 = (0, tslib_1.__importDefault)(require("../core/htmlToElement"));
var getElementByHook_1 = (0, tslib_1.__importDefault)(require("../core/getElementByHook"));
var toggleElementClass_1 = (0, tslib_1.__importDefault)(require("../core/toggleElementClass"));
var types_1 = require("./types");
var screen_scss_1 = (0, tslib_1.__importDefault)(require("./screen.scss"));
var ScreenView = /** @class */ (function (_super) {
(0, tslib_1.__extends)(ScreenView, _super);
function ScreenView(config) {
var _a;
var _this = _super.call(this) || this;
var callbacks = config.callbacks, nativeControls = config.nativeControls, playbackViewElement = config.playbackViewElement;
_this._callbacks = callbacks;
_this._styleNamesByViewMode = (_a = {},
_a[types_1.VideoViewMode.REGULAR] = _this.styleNames.regularMode,
_a[types_1.VideoViewMode.BLUR] = _this.styleNames.blurMode,
_a[types_1.VideoViewMode.FILL] = _this.styleNames.fillMode,
_a);
_this._bindCallbacks();
if (nativeControls) {
playbackViewElement.setAttribute('controls', 'true');
}
_this._initDOM(playbackViewElement);
_this._bindEvents();
_this.setViewMode(types_1.VideoViewMode.REGULAR);
return _this;
}
ScreenView.prototype._bindCallbacks = function () {
this._updateBackground = this._updateBackground.bind(this);
};
ScreenView.prototype._initDOM = function (playbackViewElement) {
this._$rootElement = (0, htmlToElement_1.default)((0, templates_1.screenTemplate)({
styles: this.styleNames,
}));
this._$playbackElement = playbackViewElement;
this._$rootElement.appendChild(playbackViewElement);
this._$canvas = (0, getElementByHook_1.default)(this._$rootElement, 'background-canvas');
};
ScreenView.prototype._bindEvents = function () {
this._$rootElement.addEventListener('click', this._callbacks.onWrapperMouseClick);
this._$rootElement.addEventListener('dblclick', this._callbacks.onWrapperMouseDblClick);
};
ScreenView.prototype._unbindEvents = function () {
this._$rootElement.removeEventListener('click', this._callbacks.onWrapperMouseClick);
this._$rootElement.removeEventListener('dblclick', this._callbacks.onWrapperMouseDblClick);
};
ScreenView.prototype.focusOnNode = function () {
this._$rootElement.focus();
};
ScreenView.prototype.show = function () {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.hidden, false);
};
ScreenView.prototype.hide = function () {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.hidden, true);
};
ScreenView.prototype.getElement = function () {
return this._$rootElement;
};
ScreenView.prototype.hideCursor = function () {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.hiddenCursor, true);
};
ScreenView.prototype.showCursor = function () {
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.hiddenCursor, false);
};
ScreenView.prototype.setViewMode = function (viewMode) {
var _this = this;
if (this._styleNamesByViewMode[viewMode]) {
this.resetBackground();
Object.keys(this._styleNamesByViewMode).forEach(function (mode) {
(0, toggleElementClass_1.default)(_this._$rootElement, _this._styleNamesByViewMode[mode], false);
});
(0, toggleElementClass_1.default)(this._$rootElement, this._styleNamesByViewMode[viewMode], true);
if (viewMode === types_1.VideoViewMode.BLUR) {
this._startUpdatingBackground();
}
else {
this._stopUpdatingBackground();
}
this._currentMode = viewMode;
}
};
ScreenView.prototype.setBackgroundSize = function (width, height) {
this.setBackgroundWidth(width);
this.setBackgroundHeight(height);
};
ScreenView.prototype.setBackgroundWidth = function (width) {
this._$canvas.width = width;
};
ScreenView.prototype.setBackgroundHeight = function (height) {
this._$canvas.height = height;
};
ScreenView.prototype._startUpdatingBackground = function () {
if (!this._requestAnimationFrameID) {
this._updateBackground();
}
};
ScreenView.prototype._stopUpdatingBackground = function () {
if (this._requestAnimationFrameID) {
cancelAnimationFrame(this._requestAnimationFrameID);
this._requestAnimationFrameID = null;
}
};
ScreenView.prototype.resetAspectRatio = function () {
var _a = this._$playbackElement, videoWidth = _a.videoWidth, videoHeight = _a.videoHeight;
var _b = this._$rootElement.getBoundingClientRect(), width = _b.width, height = _b.height;
this._isHorizontalStripes =
width / height < (videoHeight ? videoWidth / videoHeight : 0);
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.horizontalStripes, this._isHorizontalStripes);
(0, toggleElementClass_1.default)(this._$rootElement, this.styleNames.verticalStripes, !this._isHorizontalStripes);
};
ScreenView.prototype.resetBackground = function () {
if (this._currentMode === types_1.VideoViewMode.BLUR) {
this._clearBackground();
}
};
ScreenView.prototype._getSourceAreas = function (width, height) {
if (this._isHorizontalStripes) {
return [
[0, 0, width, 1],
[0, height - 1, width, 1],
];
}
return [
[0, 0, 1, height],
[width - 1, 0, 1, height],
];
};
ScreenView.prototype._getCanvasAreas = function (width, height) {
if (this._isHorizontalStripes) {
return [
[0, 0, width, height / 2],
[0, height / 2, width, height / 2],
];
}
return [
[0, 0, width / 2, height],
[width / 2, 0, width / 2, height],
];
};
ScreenView.prototype._drawAreaFromSource = function (source, area) {
var sourceX = source[0], sourceY = source[1], sourceWidth = source[2], sourceHeight = source[3];
var areaX = area[0], areaY = area[1], areaWidth = area[2], areaHeight = area[3];
var ctx = this._$canvas.getContext('2d');
ctx.drawImage(this._$playbackElement, sourceX, sourceY, sourceWidth, sourceHeight, areaX, areaY, areaWidth, areaHeight);
};
ScreenView.prototype._drawBackground = function () {
var _a = this._$playbackElement, videoWidth = _a.videoWidth, videoHeight = _a.videoHeight;
var canvasWidth = this._$canvas.width;
var canvasHeight = this._$canvas.height;
var sourceAreas = this._getSourceAreas(videoWidth, videoHeight);
var canvasAreas = this._getCanvasAreas(canvasWidth, canvasHeight);
this._drawAreaFromSource(sourceAreas[0], canvasAreas[0]);
this._drawAreaFromSource(sourceAreas[1], canvasAreas[1]);
};
ScreenView.prototype._updateBackground = function () {
this._drawBackground();
this._requestAnimationFrameID = requestAnimationFrame(this._updateBackground);
};
ScreenView.prototype._clearBackground = function () {
var ctx = this._$canvas.getContext('2d');
ctx.clearRect(0, 0, this._$canvas.width, this._$canvas.height);
};
ScreenView.prototype.destroy = function () {
this._stopUpdatingBackground();
this._unbindEvents();
if (this._$rootElement.parentNode) {
this._$rootElement.parentNode.removeChild(this._$rootElement);
}
this._$rootElement = null;
this._$playbackElement = null;
this._$canvas = null;
};
return ScreenView;
}(view_1.default));
ScreenView.extendStyleNames(screen_scss_1.default);
exports.default = ScreenView;
//# sourceMappingURL=screen.view.js.map