1
0
Fork 0
mirror of https://github.com/jellyfin/jellyfin-web synced 2025-03-30 19:56:21 +00:00

Fixed event handling

This commit is contained in:
Cromefire_ 2020-05-27 00:38:01 +02:00
parent 06eb790abb
commit a1b2ed2c4a
No known key found for this signature in database
GPG key ID: D3D3DB179F435F0C

View file

@ -349,7 +349,7 @@ function supportsTextTracks() {
hls.loadSource(url); hls.loadSource(url);
hls.attachMedia(elem); hls.attachMedia(elem);
htmlMediaHelper.bindEventsToHlsPlayer(this, hls, elem, this.onError.bind(this), resolve, reject); htmlMediaHelper.bindEventsToHlsPlayer(this, hls, elem, this.onError, resolve, reject);
this._hlsPlayer = hls; this._hlsPlayer = hls;
@ -362,8 +362,7 @@ function supportsTextTracks() {
/** /**
* @private * @private
*/ */
onShakaError(event) { onShakaError = (event) => {
const error = event.detail; const error = event.detail;
console.error('Error code', error.code, 'object', error); console.error('Error code', error.code, 'object', error);
} }
@ -392,7 +391,7 @@ function supportsTextTracks() {
//shaka.log.setLevel(6); //shaka.log.setLevel(6);
// Listen for error events. // Listen for error events.
player.addEventListener('error', this.onShakaError.bind(this)); player.addEventListener('error', this.onShakaError);
this._shakaPlayer = player; this._shakaPlayer = player;
@ -441,8 +440,7 @@ function supportsTextTracks() {
* Adapted from : https://github.com/googlecast/CastReferencePlayer/blob/master/player.js * Adapted from : https://github.com/googlecast/CastReferencePlayer/blob/master/player.js
* @private * @private
*/ */
onMediaManagerLoadMedia(event) { onMediaManagerLoadMedia = (event) => {
if (this._castPlayer) { if (this._castPlayer) {
this._castPlayer.unload(); // Must unload before starting again. this._castPlayer.unload(); // Must unload before starting again.
} }
@ -498,7 +496,7 @@ function supportsTextTracks() {
*/ */
initMediaManager() { initMediaManager() {
mediaManager.defaultOnLoad = mediaManager.onLoad.bind(mediaManager); mediaManager.defaultOnLoad = mediaManager.onLoad.bind(mediaManager);
mediaManager.onLoad = this.onMediaManagerLoadMedia.bind(this); mediaManager.onLoad = this.onMediaManagerLoadMedia;
//mediaManager.defaultOnPlay = mediaManager.onPlay.bind(mediaManager); //mediaManager.defaultOnPlay = mediaManager.onPlay.bind(mediaManager);
//mediaManager.onPlay = function (event) { //mediaManager.onPlay = function (event) {
@ -517,7 +515,7 @@ function supportsTextTracks() {
* @private * @private
*/ */
setCurrentSrc(elem, options) { setCurrentSrc(elem, options) {
elem.removeEventListener('error', this.onError.bind(this)); elem.removeEventListener('error', this.onError);
let val = options.url; let val = options.url;
console.debug('playing url: ' + val); console.debug('playing url: ' + val);
@ -574,7 +572,7 @@ function supportsTextTracks() {
return htmlMediaHelper.applySrc(elem, val, options).then(() => { return htmlMediaHelper.applySrc(elem, val, options).then(() => {
this._currentSrc = val; this._currentSrc = val;
return htmlMediaHelper.playWithPromise(elem, this.onError.bind(this)); return htmlMediaHelper.playWithPromise(elem, this.onError);
}); });
} }
} }
@ -783,7 +781,7 @@ function supportsTextTracks() {
elem.pause(); elem.pause();
} }
htmlMediaHelper.onEndedInternal(this, elem, this.onError.bind(this)); htmlMediaHelper.onEndedInternal(this, elem, this.onError);
if (destroyPlayer) { if (destroyPlayer) {
this.destroy(); this.destroy();
@ -807,15 +805,15 @@ function supportsTextTracks() {
this._mediaElement = null; this._mediaElement = null;
this.destroyCustomTrack(videoElement); this.destroyCustomTrack(videoElement);
videoElement.removeEventListener('timeupdate', this.onTimeUpdate.bind(this)); videoElement.removeEventListener('timeupdate', this.onTimeUpdate);
videoElement.removeEventListener('ended', this.onEnded.bind(this)); videoElement.removeEventListener('ended', this.onEnded);
videoElement.removeEventListener('volumechange', this.onVolumeChange.bind(this)); videoElement.removeEventListener('volumechange', this.onVolumeChange);
videoElement.removeEventListener('pause', this.onPause.bind(this)); videoElement.removeEventListener('pause', this.onPause);
videoElement.removeEventListener('playing', this.onPlaying.bind(this)); videoElement.removeEventListener('playing', this.onPlaying);
videoElement.removeEventListener('play', this.onPlay.bind(this)); videoElement.removeEventListener('play', this.onPlay);
videoElement.removeEventListener('click', this.onClick.bind(this)); videoElement.removeEventListener('click', this.onClick);
videoElement.removeEventListener('dblclick', this.onDblClick.bind(this)); videoElement.removeEventListener('dblclick', this.onDblClick);
videoElement.removeEventListener('waiting', this.onWaiting.bind(this)); videoElement.removeEventListener('waiting', this.onWaiting);
videoElement.parentNode.removeChild(videoElement); videoElement.parentNode.removeChild(videoElement);
} }
@ -833,22 +831,32 @@ function supportsTextTracks() {
/** /**
* @private * @private
* @param e {Event} The event received from the `<video>` element
*/ */
onEnded() { onEnded = (e) => {
this.destroyCustomTrack(this); /**
htmlMediaHelper.onEndedInternal(this, this.onEnded.bind(this), this.onError.bind(this)); * @type {HTMLMediaElement}
*/
const elem = e.target;
this.destroyCustomTrack(elem);
htmlMediaHelper.onEndedInternal(this, elem, this.onError);
} }
/** /**
* @private * @private
* @param e {Event} The event received from the `<video>` element
*/ */
onTimeUpdate(e) { onTimeUpdate = (e) => {
/**
* @type {HTMLMediaElement}
*/
const elem = e.target;
// get the player position and the transcoding offset // get the player position and the transcoding offset
const time = this.currentTime; const time = elem.currentTime;
if (time && !this._timeUpdated) { if (time && !this._timeUpdated) {
this._timeUpdated = true; this._timeUpdated = true;
this.ensureValidVideo(this); this.ensureValidVideo(elem);
} }
this._currentTime = time; this._currentTime = time;
@ -866,16 +874,21 @@ function supportsTextTracks() {
/** /**
* @private * @private
* @param e {Event} The event received from the `<video>` element
*/ */
onVolumeChange() { onVolumeChange = (e) => {
htmlMediaHelper.saveVolume(this.volume); /**
* @type {HTMLMediaElement}
*/
const elem = e.target;
htmlMediaHelper.saveVolume(elem.volume);
events.trigger(this, 'volumechange'); events.trigger(this, 'volumechange');
} }
/** /**
* @private * @private
*/ */
onNavigatedToOsd() { onNavigatedToOsd = () => {
const dlg = this.videoDialog; const dlg = this.videoDialog;
if (dlg) { if (dlg) {
dlg.classList.remove('videoPlayerContainer-onTop'); dlg.classList.remove('videoPlayerContainer-onTop');
@ -898,11 +911,16 @@ function supportsTextTracks() {
/** /**
* @private * @private
* @param e {Event} The event received from the `<video>` element
*/ */
onPlaying(e) { onPlaying = (e) => {
/**
* @type {HTMLMediaElement}
*/
const elem = e.target;
if (!this._started) { if (!this._started) {
this._started = true; this._started = true;
this._mediaElement.removeAttribute('controls'); elem.removeAttribute('controls');
loading.hide(); loading.hide();
@ -916,7 +934,7 @@ function supportsTextTracks() {
if (this._currentPlayOptions.fullscreen) { if (this._currentPlayOptions.fullscreen) {
appRouter.showVideoOsd().then(this.onNavigatedToOsd.bind(this)); appRouter.showVideoOsd().then(this.onNavigatedToOsd);
} else { } else {
appRouter.setTransparency('backdrop'); appRouter.setTransparency('backdrop');
@ -931,7 +949,7 @@ function supportsTextTracks() {
/** /**
* @private * @private
*/ */
onPlay(e) { onPlay = () => {
events.trigger(this, 'unpause'); events.trigger(this, 'unpause');
} }
@ -957,21 +975,21 @@ function supportsTextTracks() {
/** /**
* @private * @private
*/ */
onClick() { onClick = () => {
events.trigger(this, 'click'); events.trigger(this, 'click');
} }
/** /**
* @private * @private
*/ */
onDblClick() { onDblClick = () => {
events.trigger(this, 'dblclick'); events.trigger(this, 'dblclick');
} }
/** /**
* @private * @private
*/ */
onPause() { onPause = () => {
events.trigger(this, 'pause'); events.trigger(this, 'pause');
} }
@ -981,10 +999,15 @@ function supportsTextTracks() {
/** /**
* @private * @private
* @param e {Event} The event received from the `<video>` element
*/ */
onError() { onError = (e) => {
const errorCode = this.onError.error ? (this.onError.error.code || 0) : 0; /**
const errorMessage = this.onError.error ? (this.onError.error.message || "") : ""; * @type {HTMLMediaElement}
*/
const elem = e.target
const errorCode = elem.error ? (elem.error.code || 0) : 0;
const errorMessage = elem.error ? (elem.error.message || "") : "";
console.error('media element error: ' + errorCode.toString() + ' ' + errorMessage); console.error('media element error: ' + errorCode.toString() + ' ' + errorMessage);
let type; let type;