Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

fix: remove detached elements and remove not needed DOM refs #485

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

fix: remove detached elements and remove not needed DOM refs #485

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
75af6dd
fix: remove detached elements and remove not needed refs
Yuvalke Sep 27, 2020
b0c98bb
Update html5-autoplay.js
Yuvalke Sep 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 12 additions & 2 deletions src/engines/html5/capabilities/html5-autoplay.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import * as EncodingSources from '../../../assets/encoding-sources.json';
const WAIT_TIME: number = 500;

const Html5AutoPlayCapability: ICapability = class Html5AutoPlayCapability {
static _vid: HTMLVideoElement;
static _vid: ?HTMLVideoElement;
static _playPromiseResult: Promise<*>;
static _logger: any = getLogger('Html5AutoPlayCapability');
static _capabilities: Object = {};
Expand Down Expand Up @@ -92,7 +92,9 @@ const Html5AutoPlayCapability: ICapability = class Html5AutoPlayCapability {
* @private
*/
static _getPlayPromise(): Promise<*> {
return Html5AutoPlayCapability._vid.play() || Html5AutoPlayCapability._forcePromiseReturnValue();
const playResult = (Html5AutoPlayCapability._vid && Html5AutoPlayCapability._vid.play()) || Html5AutoPlayCapability._forcePromiseReturnValue();
Html5AutoPlayCapability._vid = null;
return playResult;
}

/**
Expand All @@ -103,6 +105,9 @@ const Html5AutoPlayCapability: ICapability = class Html5AutoPlayCapability {
* @static
*/
static _setMuted(muted: boolean): void {
if (!Html5AutoPlayCapability._vid) {
return;
}
if (muted) {
Html5AutoPlayCapability._vid.muted = true;
Html5AutoPlayCapability._vid.setAttribute('muted', '');
Expand All @@ -121,13 +126,18 @@ const Html5AutoPlayCapability: ICapability = class Html5AutoPlayCapability {
*/
static _forcePromiseReturnValue(): Promise<*> {
return new Promise((resolve, reject) => {
if (!Html5AutoPlayCapability._vid) {
reject();
}
//$FlowFixMe
Html5AutoPlayCapability._vid.addEventListener(Html5EventType.ERROR, () => {
reject();
});
const supported = setTimeout(() => {
Html5AutoPlayCapability._logger.debug(`Timeout ${WAIT_TIME} ms has been reached`);
reject();
}, WAIT_TIME);
//$FlowFixMe
if (Html5AutoPlayCapability._vid.paused === true) {
clearTimeout(supported);
reject();
Expand Down
9 changes: 1 addition & 8 deletions src/engines/html5/media-source/adapters/native-adapter.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -40,13 +40,6 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
* @static
*/
static _logger = BaseMediaSourceAdapter.getLogger(NativeAdapter.id);
/**
* static video element for canPlayType testing
* @member {} TEST_VIDEO
* @type {HTMLVideoElement}
* @static
*/
static TEST_VIDEO: HTMLVideoElement = Utils.Dom.createElement('video');
/**
* The DRM protocols implementations for native adapter.
* @type {Array<Function>}
Expand Down Expand Up @@ -141,7 +134,7 @@ export default class NativeAdapter extends BaseMediaSourceAdapter {
static canPlayType(mimeType: string): boolean {
let canPlayType = false;
if (typeof mimeType === 'string') {
canPlayType = !!NativeAdapter.TEST_VIDEO.canPlayType(mimeType.toLowerCase());
canPlayType = !!Utils.Dom.createElement('video').canPlayType(mimeType.toLowerCase());
}
NativeAdapter._logger.debug('canPlayType result for mimeType:' + mimeType + ' is ' + canPlayType.toString());
return canPlayType;
Expand Down
44 changes: 19 additions & 25 deletions src/player.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -249,18 +249,6 @@ export default class Player extends FakeEventTarget {
* @private
*/
_el: HTMLDivElement;
/**
* The player text DOM element container.
* @type {HTMLDivElement}
* @private
*/
_textDisplayEl: HTMLDivElement;
/**
* The player black cover div.
* @type {HTMLDivElement}
* @private
*/
_blackCoverEl: HTMLDivElement;
/**
* The player DOM id.
* @type {string}
Expand Down Expand Up @@ -633,14 +621,18 @@ export default class Player extends FakeEventTarget {
this._eventManager.destroy();
}

_getBlackCover(): HTMLDivElement {
return Utils.Dom.getElementBySelector(`#${this._playerId} .${BLACK_COVER_CLASS_NAME}`);
}
/**
* Hides the black cover div.
* @public
* @returns {void}
*/
hideBlackCover(): void {
if (this._blackCoverEl) {
this._blackCoverEl.style.visibility = 'hidden';
const blackCover = this._getBlackCover();
if (blackCover) {
blackCover.style.visibility = 'hidden';
}
}

Expand All @@ -650,8 +642,9 @@ export default class Player extends FakeEventTarget {
* @returns {void}
*/
showBlackCover(): void {
if (this._blackCoverEl) {
this._blackCoverEl.style.visibility = 'visible';
const blackCover = this._getBlackCover();
if (blackCover) {
blackCover.style.visibility = 'visible';
}
}

Expand Down Expand Up @@ -1246,7 +1239,7 @@ export default class Player extends FakeEventTarget {
if (!(style instanceof TextStyle)) {
throw new Error('Style must be instance of TextStyle');
}
let element = Utils.Dom.getElementBySelector(`.${this._playerId}.${SUBTITLES_STYLE_CLASS_NAME}`);
let element = Utils.Dom.getElementBySelector(`#${this._playerId}.${SUBTITLES_STYLE_CLASS_NAME}`);
if (!element) {
element = Utils.Dom.createElement('style');
Utils.Dom.addClassName(element, this._playerId);
Expand Down Expand Up @@ -1512,14 +1505,14 @@ export default class Player extends FakeEventTarget {
*/
_appendDomElements(): void {
// Append playkit-subtitles
this._textDisplayEl = Utils.Dom.createElement('div');
Utils.Dom.setAttribute(this._textDisplayEl, 'aria-live', 'polite');
Utils.Dom.addClassName(this._textDisplayEl, SUBTITLES_CLASS_NAME);
Utils.Dom.appendChild(this._el, this._textDisplayEl);
const textDisplayEl = Utils.Dom.createElement('div');
Utils.Dom.setAttribute(textDisplayEl, 'aria-live', 'polite');
Utils.Dom.addClassName(textDisplayEl, SUBTITLES_CLASS_NAME);
Utils.Dom.appendChild(this._el, textDisplayEl);
// Append playkit-black-cover
this._blackCoverEl = Utils.Dom.createElement('div');
Utils.Dom.addClassName(this._blackCoverEl, BLACK_COVER_CLASS_NAME);
Utils.Dom.appendChild(this._el, this._blackCoverEl);
const blackCoverEl = Utils.Dom.createElement('div');
Utils.Dom.addClassName(blackCoverEl, BLACK_COVER_CLASS_NAME);
Utils.Dom.appendChild(this._el, blackCoverEl);
// Append playkit-poster
const el = this._posterManager.getElement();
Utils.Dom.addClassName(el, POSTER_CLASS_NAME);
Expand Down Expand Up @@ -2184,7 +2177,8 @@ export default class Player extends FakeEventTarget {
*/
_updateTextDisplay(cues: Array<Cue>): void {
if (!this._config.playback.useNativeTextTrack) {
processCues(window, cues, this._textDisplayEl, this._textStyle);
const textDisplayEl = Utils.Dom.getElementBySelector(`#${this._playerId} .${SUBTITLES_CLASS_NAME}`);
processCues(window, cues, textDisplayEl, this._textStyle);
}
}

Expand Down