vjs-playlist-now-playing class not added when selecting playlist item

[oshihirii]

When I change a playlist, the first thumbnail gets the vjs-playlist-now-playing class applied, eg:

<picture class="vjs-playlist-thumbnail vjs-playlist-now-playing">

And this means the "Now Playing" text appears in the center of the thumbnail, which is great.

When I subsequently click on another playlist item, the text does not appear in the center of the thumbnail and the vjs-playlist-now-playing class is not added to:

<picture class="vjs-playlist-thumbnail">

JS version 3.0.2 and I'm not entirely sure which CSS version I am using :/ (It might be the one used in the advanced videojs example as that was the only way I could locate the CSS file and not the LESS file).

[oshihirii]

Ok, sort of resolved, I made sure I was using the matching css and js from here:

https://unpkg.com/[email protected]/dist/videojs-playlist-ui.js
https://unpkg.com/[email protected]/dist/videojs-playlist-ui.vertical.css

And the class is being correctly applied now, but the interface seems "broken", ie the 'description', 'nameand 'up next' text are squished above each other (and thename` text appears twice).

Is there a demo somewhere of what the interface should look like?

[oshihirii]

If it helps anyone, these are the styles that I added to my own stylesheet that enabled me to "control" the playlist layout more - it's not pretty and !important is used a lot, but it might help someone.

I used the 3.0.2 files linked above exactly as is.

.vjs-playlist-item {
    border: 1px solid #777;
    height: 100px;
    background: #eee;
    padding: 5px !important;
    margin: 15px 10px !important;
}

.vjs-selected .vjs-playlist-thumbnail {
    margin-right: 15px !important;
}

.vjs-playlist-thumbnail {
    float: left !important;
    width: 150px !important;
    margin-right: 15px !important;
    background: rgba(0, 111, 190, 0.4) !important;
}

.vjs-playlist-thumbnail img {
    height: 100px;
}

.vjs-mouse.vjs-playlist .vjs-selected {
    background-color: rgb(5, 33, 56);
    border-radius: 0px;
}

.vjs-playlist-now-playing {
    color: #ffffff;
    left: 15px !important;
    top: 60px !important;
    margin: 0px !important;
    text-transform: lowercase;
}

.vjs-playlist-title-container .vjs-playlist-name {
    color: white !important;
    text-shadow: none;
    display: none;
}

.vjs-selected .vjs-playlist-name {
    color: white;
    margin-top: 10px !important;
    font-size: 18px;
    font-family: arial;
    padding: 0px !important;
    max-height: none !important;
    margin-bottom: 5px;
}

.vjs-playlist-name {
    color: #4b4b4b;
    margin-top: 10px !important;
    font-size: 18px;
    font-family: arial;
    padding: 0px !important;
    max-height: none !important;
    margin-bottom: 5px;
}

.vjs-selected .vjs-playlist-description {
    color: white;
    margin-top: 10px !important;
    font-size: 16px;
    font-family: arial;
    padding: 0px !important;
    max-height: none !important;
    margin-bottom: 5px;
}

.vjs-playlist-description {
    color: #4b4b4b;
    margin-top: 10px !important;
    font-size: 16px;
    font-family: arial;
    padding: 0px !important;
    max-height: none !important;
    margin-bottom: 5px;
}

.vjs-up-next-text {
    text-shadow: none;
    margin: 0px !important;
    padding: 0px !important;
    text-transform: lowercase !important;
    margin-bottom: 10px !important;
    font-family: arial;
    font-size: 16px !important;
}

.vjs-playlist img {
    height: 88px !important;
}

.vjs-playlist-duration {
    font-size: 12px !important;
    margin: 0px !important;
}