From dbdfa7585ff14fbc5749bdf5f2fb2db8b1b519a2 Mon Sep 17 00:00:00 2001 From: tilt12345678 Date: Wed, 13 Nov 2024 07:34:22 +0100 Subject: [PATCH 1/5] remove debug logging --- src/player.js | 1 - 1 file changed, 1 deletion(-) diff --git a/src/player.js b/src/player.js index 881b595..0039395 100644 --- a/src/player.js +++ b/src/player.js @@ -131,7 +131,6 @@ var MyPlayer = function(_args) { style = styles.join(" "); args.audio = $(``); - console.log("DEBUG: appending audio=", args.audio, " to element=", args.element, " ..."); $(args.element).append(args.audio); }, readId3 = function() { From afad271f227b15c170ca71b152b4243638cae8df Mon Sep 17 00:00:00 2001 From: tilt12345678 Date: Wed, 13 Nov 2024 07:35:05 +0100 Subject: [PATCH 2/5] add patches for playlist/play() exception debugging --- .../mediaelement-plugins/01-playlist.js.diff | 60 ++++++- patches/mediaelement/02-play-promise.diff | 166 ++++++++++++++++++ patches/mediaelement/03-mediaelement.js.diff | 18 ++ 3 files changed, 241 insertions(+), 3 deletions(-) create mode 100644 patches/mediaelement/02-play-promise.diff create mode 100644 patches/mediaelement/03-mediaelement.js.diff diff --git a/patches/mediaelement-plugins/01-playlist.js.diff b/patches/mediaelement-plugins/01-playlist.js.diff index e0aeb61..dbb4769 100644 --- a/patches/mediaelement-plugins/01-playlist.js.diff +++ b/patches/mediaelement-plugins/01-playlist.js.diff @@ -1,8 +1,8 @@ diff --git a/src/playlist/playlist.js b/src/playlist/playlist.js -index 82112fb..fcf4ade 100644 +index 82112fb..bf39681 100644 --- a/src/playlist/playlist.js +++ b/src/playlist/playlist.js -@@ -81,7 +81,7 @@ Object.assign(MediaElementPlayer.prototype, { +@@ -81,10 +81,11 @@ Object.assign(MediaElementPlayer.prototype, { player.endedCallback = () => { if (player.currentPlaylistItem < player.listItems.length) { @@ -10,4 +10,58 @@ index 82112fb..fcf4ade 100644 + player.setSrc(player.playlist[++player.currentPlaylistItem].src); player.load(); setTimeout(() => { - player.play(); +- player.play(); ++ var _promise = player.play(); ++ console.log("play() returned promise at 'player.endedCallback': ", _promise); + }, 200); + } + }; +@@ -172,7 +173,17 @@ Object.assign(MediaElementPlayer.prototype, { + player.currentPlaylistItem = this.getAttribute('data-playlist-index'); + player.setSrc(this.value); + player.load(); +- player.play(); ++ var isPlaying = player.media.currentTime > 0 && !player.media.paused && !player.media.ended && player.media.readyState > player.media.HAVE_CURRENT_DATA; ++ if(isPlaying) { ++ console.log("play() at 'inputs[i].addEventListener' not executed, because media is already playing"); ++ } ++ else { ++ var _promise = player.play(); ++ console.log("play() returned promise at 'inputs[i].addEventListener': ", _promise); ++ _promise.catch((error) => { ++ console.error(error); ++ }); ++ } + + if (player.isVideo && player.options.autoClosePlaylist === true) { + mejs.Utils.toggleClass(player.playlistLayer, `${player.options.classPrefix}playlist-hidden`); +@@ -224,7 +235,8 @@ Object.assign(MediaElementPlayer.prototype, { + if (player.playlist[--player.currentPlaylistItem]) { + player.setSrc(player.playlist[player.currentPlaylistItem].src); + player.load(); +- player.play(); ++ var _promise = player.play(); ++ console.log("play() returned promise at 'player.prevPlaylistCallback': ", _promise); + } else { + ++player.currentPlaylistItem; + } +@@ -249,7 +261,8 @@ Object.assign(MediaElementPlayer.prototype, { + if (player.playlist[++player.currentPlaylistItem]) { + player.setSrc(player.playlist[player.currentPlaylistItem].src); + player.load(); +- player.play(); ++ var _promise = player.play(); ++ console.log("play() returned promise at 'player.nextPlaylistCallback': ", _promise); + } else { + --player.currentPlaylistItem; + } +@@ -312,7 +325,8 @@ Object.assign(MediaElementPlayer.prototype, { + if (playedItems.indexOf(randomItem) === -1) { + player.setSrc(player.playlist[randomItem].src); + player.load(); +- player.play(); ++ var _promise = player.play(); ++ console.log("play() returned promise at 'randomizeCallback': ", _promise); + player.currentPlaylistItem = randomItem; + playedItems.push(randomItem); + diff --git a/patches/mediaelement/02-play-promise.diff b/patches/mediaelement/02-play-promise.diff new file mode 100644 index 0000000..e2dc628 --- /dev/null +++ b/patches/mediaelement/02-play-promise.diff @@ -0,0 +1,166 @@ +diff --git a/src/js/features/playpause.js b/src/js/features/playpause.js +index 28e87a66..88a71abf 100644 +--- a/src/js/features/playpause.js ++++ b/src/js/features/playpause.js +@@ -51,7 +51,8 @@ Object.assign(MediaElementPlayer.prototype, { + play.innerHTML = generateControlButton(t.id, pauseTitle, playTitle, `${t.media.options.iconSprite}`, ['icon-play', 'icon-pause', 'icon-replay'], `${t.options.classPrefix}`); + play.addEventListener('click', () => { + if (t.paused) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 'buildplaypause ... t.paused': ", _promise); + } else { + t.pause(); + } +diff --git a/src/js/features/progress.js b/src/js/features/progress.js +index b9cf2b96..07c400f3 100644 +--- a/src/js/features/progress.js ++++ b/src/js/features/progress.js +@@ -106,7 +106,8 @@ Object.assign(MediaElementPlayer.prototype, { + + // start again to track new time + setTimeout(function() { +- player.play(); ++ var _promise = player.play(); ++ debug("play() returned promise at 'start again to track new time': ", _promise); + }, 0); + } + } +@@ -144,7 +145,8 @@ Object.assign(MediaElementPlayer.prototype, { + + // start again to track new time + setTimeout(function() { +- player.play(); ++ var _promise = player.play(); ++ debug("play() returned promise at 'start again to track new time (#2)': ", _promise); + }, 0); + } + } +@@ -332,7 +334,8 @@ Object.assign(MediaElementPlayer.prototype, { + */ + restartPlayer = () => { + if (new Date() - lastKeyPressTime >= 1000) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 'restartPlayer': ", _promise); + } + }, + handleMouseup = () => { +@@ -343,7 +346,8 @@ Object.assign(MediaElementPlayer.prototype, { + } + if (t.forcedHandlePause) { + t.slider.focus(); +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 't.forcedHandlePause': ", _promise); + } + t.forcedHandlePause = false; + } +@@ -416,7 +420,8 @@ Object.assign(MediaElementPlayer.prototype, { + case 32: // space + if (IS_FIREFOX) { + if (t.paused) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 'IS_FIREFOX ... t.paused': ", _promise); + } else { + t.pause(); + } +diff --git a/src/js/player.js b/src/js/player.js +index 0a2a25b2..9091eaf5 100644 +--- a/src/js/player.js ++++ b/src/js/player.js +@@ -256,7 +256,8 @@ class MediaElementPlayer { + + // override Apple's autoplay override for iPads + if (IS_IPAD && t.node.getAttribute('autoplay')) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 'override Apple's autoplay override for iPads': ", _promise); + } + + } else if ((t.isVideo || (!t.isVideo && (t.options.features.length || t.options.useDefaultControls))) && !(IS_ANDROID && t.options.AndroidUseNativeControls)) { +@@ -577,7 +578,8 @@ class MediaElementPlayer { + if (t.getCurrentTime() > 0 && t.currentMediaTime > 0) { + t.setCurrentTime(t.currentMediaTime); + if (!IS_IOS && !IS_ANDROID) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at '!IS_IOS && !IS_ANDROID': ", _promise); + } + } + }); +@@ -623,7 +625,8 @@ class MediaElementPlayer { + if (!t.isVideo && !t.options.features.length && !t.options.useDefaultControls) { + // force autoplay for HTML5 + if (autoplay && isNative) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 'force autoplay for HTML5': ", _promise); + } + + if (t.options.success) { +@@ -678,7 +681,8 @@ class MediaElementPlayer { + if (t.paused && pressed) { + t.pause(); + } else if (t.paused) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 'else if (t.paused)': ", _promise); + } else { + t.pause(); + } +@@ -810,7 +814,8 @@ class MediaElementPlayer { + } + + if (t.options.loop) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 't.options.loop': ", _promise); + } else if (!t.options.alwaysShowControls && t.controlsEnabled) { + t.showControls(); + } +@@ -904,7 +909,8 @@ class MediaElementPlayer { + + // force autoplay for HTML5 + if (autoplay && isNative) { +- t.play(); ++ _promise = t.play(); ++ debug("play() returned promise at 'autoplay && isNative': ", _promise); + } + + if (t.options.success) { +@@ -1357,7 +1363,8 @@ class MediaElementPlayer { + layer.addEventListener('click', (e) => { + if (t.options.clickToPlayPause) { + if (t.paused) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 't.options.clickToPlayPause ... t.paused': ", _promise); + } else { + t.pause(); + } +@@ -1600,7 +1607,8 @@ class MediaElementPlayer { + ; + + if (t.paused) { +- t.play(); ++ var _promise = t.play(); ++ debug("play() returned promise at 't.paused': ", _promise); + } else { + t.pause(); + } +diff --git a/src/js/renderers/html5.js b/src/js/renderers/html5.js +index a29484c0..d3040193 100644 +--- a/src/js/renderers/html5.js ++++ b/src/js/renderers/html5.js +@@ -142,7 +142,8 @@ const HtmlMediaElement = { + if (index < total && mediaFiles[(index + 1)] !== undefined) { + node.src = mediaFiles[index++].src; + node.load(); +- node.play(); ++ var _promise = node.play(); ++ debug("play() returned promise at 'Reload the source only in case of the renderer is active at the moment': ", _promise); + } else { + mediaElement.generateError('Media error: Format(s) not supported or source(s) not found', mediaFiles); + } diff --git a/patches/mediaelement/03-mediaelement.js.diff b/patches/mediaelement/03-mediaelement.js.diff new file mode 100644 index 0000000..962ac44 --- /dev/null +++ b/patches/mediaelement/03-mediaelement.js.diff @@ -0,0 +1,18 @@ +diff --git a/src/js/core/mediaelement.js b/src/js/core/mediaelement.js +index 20a46b7e..6cc65fd2 100644 +--- a/src/js/core/mediaelement.js ++++ b/src/js/core/mediaelement.js +@@ -362,7 +362,12 @@ class MediaElement { + event = createEvent('pause', t.mediaElement); + t.mediaElement.dispatchEvent(event); + } +- t.mediaElement.originalNode.src = (mediaFiles[0].src || ''); ++ try { ++ t.mediaElement.originalNode.src = (mediaFiles[0].src || ''); ++ } ++ catch(err) { ++ console.log("ERROR: at t.mediaElement.originalNode.src: ", err); ++ } + + // At least there must be a media in the `mediaFiles` since the media tag can come up an + // empty source for starters From cf91bd87e8b4278a9d3bb1f2479b265ec559b1c3 Mon Sep 17 00:00:00 2001 From: tilt12345678 Date: Wed, 13 Nov 2024 07:35:37 +0100 Subject: [PATCH 3/5] add config variables to mae mejs/plugins patching skippable --- Makefile | 17 +++++++++++++---- 1 file changed, 13 insertions(+), 4 deletions(-) diff --git a/Makefile b/Makefile index 52ad49c..8ff9e30 100644 --- a/Makefile +++ b/Makefile @@ -1,3 +1,6 @@ +PATCH_MEDIAELEMENT=true +PATCH_MEDIAELEMENT_PLUGINS=true + .PHONY: \ all \ depend \ @@ -20,14 +23,20 @@ depend: \ depend-mediaelement: @echo "Preparing dependency \"mediaelement\" ..." - git -C mediaelement reset --hard HEAD - patch -d mediaelement -p1 < patches/mediaelement/01-iconsprite.diff + if test "$(PATCH_MEDIAELEMENT)" = "true" ; then \ + git -C mediaelement reset --hard HEAD ; \ + patch -d mediaelement -p1 < patches/mediaelement/01-iconsprite.diff ; \ + patch -d mediaelement -p1 < patches/mediaelement/02-play-promise.diff ; \ + patch -d mediaelement -p1 < patches/mediaelement/03-mediaelement.js.diff ; \ + fi cd mediaelement && grunt depend-mediaelement-plugins: @echo "Preparing dependency \"mediaelement-plugins\" ..." - git -C mediaelement-plugins reset --hard HEAD - patch -d mediaelement-plugins -p1 < patches/mediaelement-plugins/01-playlist.js.diff + if test "$(PATCH_MEDIAELEMENT_PLUGINS)" = "true" ; then \ + git -C mediaelement-plugins reset --hard HEAD ; \ + patch -d mediaelement-plugins -p1 < patches/mediaelement-plugins/01-playlist.js.diff ; \ + fi cd mediaelement-plugins && grunt depend-node: From aaffe70ee7ffda53ba4b0c7a1564365e61a9c342 Mon Sep 17 00:00:00 2001 From: tilt12345678 Date: Wed, 13 Nov 2024 07:41:46 +0100 Subject: [PATCH 4/5] add target "clean" --- Makefile | 23 +++++++++++++++++++++++ 1 file changed, 23 insertions(+) diff --git a/Makefile b/Makefile index 8ff9e30..02dcdfe 100644 --- a/Makefile +++ b/Makefile @@ -3,6 +3,11 @@ PATCH_MEDIAELEMENT_PLUGINS=true .PHONY: \ all \ + clean \ + clean-css \ + clean-js \ + clean-mediaelement \ + clean-mediaelement-plugins \ depend \ depend-mediaelement \ depend-mediaelement-plugins \ @@ -16,6 +21,24 @@ all: \ css \ src +clean: \ + clean-css \ + clean-js \ + clean-mediaelement \ + clean-mediaelement-plugins + +clean-css: + rm -f dist/css/*.css dist/css/*.svg + +clean-js: + rm -f dist/js/*.js + +clean-mediaelement: + git -C mediaelement reset --hard HEAD + +clean-mediaelement-plugins: + git -C mediaelement-plugins reset --hard HEAD + depend: \ depend-node \ depend-mediaelement \ From ad86df44a7a2a1dd699848efc11b47cf1d6aa23c Mon Sep 17 00:00:00 2001 From: tilt12345678 Date: Wed, 13 Nov 2024 07:42:01 +0100 Subject: [PATCH 5/5] documentation updates --- README.md | 6 ++---- demo/autoplay.html | 1 + 2 files changed, 3 insertions(+), 4 deletions(-) diff --git a/README.md b/README.md index d092d2c..2cc5a1c 100644 --- a/README.md +++ b/README.md @@ -32,7 +32,7 @@ Sample inclusions in an HTML document: ``` -Sample instanciation: +Sample instanciation reading playlist entries from a file `./mp3.m3u`: ```html
@@ -41,7 +41,7 @@ Sample instanciation: element: '.player', mode: 'm3u', detachable: false, - m3u: 'mp3.m3u', + m3u: './mp3.m3u', loop: true, shuffle: false })}); @@ -49,8 +49,6 @@ Sample instanciation: ``` -See also [the demo page](demos/index.html) for several examples. - ## Contributing * See subdirectory [src](./src) for javascript sources, specifically [player.js](src/player.js). diff --git a/demo/autoplay.html b/demo/autoplay.html index 9931cfc..bc437b7 100644 --- a/demo/autoplay.html +++ b/demo/autoplay.html @@ -1,3 +1,4 @@ +