search

mediaelement / mediaelement-plugins

Plugins for the main mediaelement project
406 stars 138 forks source link

Playlist toggle not displaying #97

Closed NedHenry closed 7 years ago

NedHenry commented 7 years ago

I am using mediaelement-and-player.js with the playlist plugin for playlists of hls streams. All of it works exactly as expected and is awesome, except that I do not see any button to toggle the display of the playlist. In the playlist readme it says that this toggle button should display depending on the value of the showPlaylist config option. Setting showPlaylist in my code successfully shows and hides the playlist, but in no case is a toggle button displayed. Is this a repeatable problem, or is it somehow specific to my installation? Many thanks!

rafa8626 commented 7 years ago

@NedHenry The toggle button is the second icon from right to left

screen shot 2017-10-22 at 1 09 30 pm

If you are not seeing it, maybe it's your configuration. Please star the project to support it

NedHenry commented 7 years ago

It is certainly possible that it is a problem with my configuration, but based on the documentation it seemed that the button should be displaying. Apologies if I am missing something. I am including my configuration below. The playlist displays correctly depending on the value of "showPlaylist" (set to true below) but the toggle button shown in your screencap does not display on my player regardless. Would you mind posting the configuration for the screencap you included above? I'd be happy to track down the problem from there. I may have missed this somewhere in the documentation.

<audio controls="controls" class="mejs__player" preload="auto" data-mejsoptions='{"pluginPath": "/mejs/", "alwaysShowControls": "true", "audioWidth": "100%", "showPlaylist": true, "currentMessage": "now playing: ", "features": ["playpause", "current", "progress", "duration", "tracks", "volume", "fullscreen", "playlist", "prevtrack", "nexttrack", "shuffle", "loop"]}'> <source src="https://digitalcollections.library.ucsc.edu/file_set/zk51vg795/hls.m3u8" title="Track 01" type="application/x-mpegurl">" /> <source src="https://digitalcollections.library.ucsc.edu/file_set/d504rk360/hls.m3u8" title="Track 02" type="application/x-mpegurl">" /> <source src="https://digitalcollections.library.ucsc.edu/file_set/g445cd15v/hls.m3u8" title="Track 03" type="application/x-mpegurl">" /> </audio>

rafa8626 commented 7 years ago

The screenshot I took comes from demo/index.html in this project. The JS code used is posted there as well

NedHenry commented 7 years ago

Thanks! That does seem the obvious place to look for example code. Running the demo code on my computer, the playlist toggle button displays correctly for video but still does not display for the audio player. I'm attaching a screencap. Is the playlist toggle button a video-only feature? Thanks a ton for your help & fast responses!

screen shot 2017-10-23 at 2 23 10 pm
rafa8626 commented 7 years ago

Oh, I got you now. Sorry for not seeing this before. This plugin was built to only toggle the playlist on the video; in audio always remains since the animation to toggle it will be very disruptive in my opinion. Let me know if you have any other questions/comments, and please star the project to support it

NedHenry commented 7 years ago

Gotcha! That makes sense, now that I see how the animation looks for the video playlists.

It seems like a small adjustment to the documentation to make this clear is all that's necessary. I'll make a pull request for that if I find time in the next few days.

My designers specifically wanted an audio player with a hideable playlist, so I hacked it up this way for a quick fix, which seems to work for me for now (in case anyone is interested):

` <button id="playlist-toggle" class="mejsbutton" onclick="jQuery('.hls_media').toggleClass('playlist_hidden')">▲▼ `

rafa8626 commented 7 years ago

Glad I could help. Once you have the PR ready I'll review it. Thanks. Closing this issue now