rgrasso2

Ok, the standard wordpress playlist is not showing up either : must be our old style.

You can close this ticket.

Robert

Hi Mike,

Thanks for the very quick answer.
It is checked.

Robert

Hello,

Thank you for looking into this : the button is this one :

<div id=”pp-change-media-file-showarchive” style=”display: none;”>
<div id=”save-media-showarchive” class=”pp-blue-button”
onclick=”powerpress_saveMediaFile(this)”>VERIFY</div>
</div>

It is located below the entry field, the text is white with a blue background. When I bring the pointer above it, it changes into a hand with a pointing finger. But when I click on it, its shape or color does not change at all, just plain nothing happens, and no red message or anything else appears anywhere. I am accessing WordPress administration on Ubuntu Linux 19.10, using Google Chrome version 80.0.3987.132. In Google Chrome, I have AdBlock Plus which is disabled for this website WordPress administration site.
And the Verify button has been working perfectly until recently.

sorry – publishing the code again :

</script>
<script type="text/html" id="tmpl-wp-playlist-item">
        <div class="wp-playlist-item">
           <a href="{{ data.src }}?dl=1" class="wppp-download" download="" onclick='event.stopPropagation();'><i class="fa fa-download" title="Download" aria-hidden="true"></i></a>
                <a class="wp-playlist-caption" href="{{ data.src }}">
                                <!-- <span class="wp-playlist-item-title">“{{{ data.title }}}”</span> -->

Ok, I figured it out : it is in Chrome/Developer tools/Event listeners/click:

wp-includes/js/mediaelement/wp-playlist.min.js

line 72, function “clickTrack”

I discovered the “Pretty Print” feature : and there, I don’t understand what I read; in Javascript, I just learned how to display “Hello World” a long time ago …

Robert

Hi Angelo,

Here is the link to my test playlist :

https://wordpress-65751-1111518.cloudwaysapps.com/new-podcast-playlist/

This morning I was about to say : there is worse. But first things first :

in the previous css which I borrowed :

.wppp-download {
margin-top: -22px;
padding-left:5px;
position: absolute;
}

I figured it out : “margin-top: -22px;” : this is “cheating” : actually, the whole

<div class=”wp-playlist-item”>

element is CLICKABLE; but when you click on it, it is the main item which provides the target links; so if I add my download HTML code inside this element, clicking on the download button won’t work : this is why the guys from the post above added the download code OUTSIDE the item element, and then, through styling (-22px !), they bring graphically the download icon at the right place ABOVE : but this is a trick. And this does not work with my long lines, because it will be mixed up with the wrapped text on the second line of the item title.

Now, this morning, in the web inspector, I saw “something”, and tonight I have lost it : it was not in the “layout” tab : it was on top of another “pane”, I saw a couple of Javascript files, from mediaelement, with a “remove” button to remove them : removing them one at a time, I figured that making that whole “div” clickable was done in the second Javascript file; but then I was in a hurry, left quickly – and tonight I am not able to find this again.

So meanwhile, here is what I did :

I added this code OUTSIDE the wp-playlist-item :
<i class=”fa fa-download” title=”Download” aria-hidden=”true”></i>

then, I am removing the separation line between items :
.wp-playlist-item {
…
border-bottom-style: none !important;
}

and moving it below the download icon :
.wppp-download {
padding-left:5px;https://wordpress-65751-1111518.cloudwaysapps.com/new-podcast-playlist/
border-bottom: 1px solid #ccc;
display: block;
}

This is working – but I am not fully satisfied : I would like to have the download button on the same line as the item’s title. But for this, I must first find the disappeared place where I found those Javascript files mentioned.

Any comment ? Any hint ?

Robert

`<a href=”{{ data.src }}” class=”wpse-download” download=””><i class=”fa fa-download” title=”Download” aria-hidden=”true”></i></a>