Playlist (or category.load) missing playlist container div?

[brandonburkett]

Hello,

When using with the following config (including playstListId and embedOptions.playlist: true). EX:

        const player = await brightcovePlayerLoader({
          refNode: this.$refs.videoEmbed,
          refNodeInsert: 'append',
          accountId: this.videoPlayer.accountId,
          playerId: this.videoPlayer.playerId,
          embedId: 'default',
          playlistId,
          embedType: brightcovePlayerLoader.EMBED_TYPE_IN_PAGE,
          embedOptions: {
            responsive: true,
            playlist: true,
          },
        })

It seems to load div.vjs-playlist as expected, but looks like it is missing the container div for div.vjs-playlist. For example, if using the vertical playlist setting for the player and the advance embed, it looks like vjs-playlist should be the first child of div.vjs-playlist-sidebar vjs-playlist-sidebar-vertical vjs-playlist-show-hide-hidden... but this div wrapping vjs-playlist is missing, so styling is pretty off.

Unsure if I am missing a config setting, but the ending playlist markup is not matching the advance embed.

Thanks, Brandon

[AndrewStobie]

I am also having the same issue as brandon you can see the difference between the playlists implemented on brightcovepage here

[CynderR]

Ran into the same issue. i wanted the vertical playlist using react-player-loader. The solution i ended with is a hack and once this is finally fixed it should be removed... but maybe it will help someone.

i added a state for the side panel button

 const [hackit, sethackit] = useState("");
 const togglePlaylist = () => {
    sethackit(!hackit);
 };

then in my jsx return i added a wrapper, the close btn and an event handler

   <div className={hackit ? "player-playlist player-showing-playlist" : "player-playlist"}>
        <ReactPlayerLoader
          accountId={account_id}
          embedId="default"
          playlistId={playlist_id}
          onSuccess={success => {
            success.ref.on("play", () => {
              sethackit(false);
            });
          }}
          embedType="in-page"
          embedOptions={{ responsive: true, playlist: true }}
          playerId={player_id}
        />
        <div className="show-playlist" onClick={togglePlaylist}>
          <div onClick={togglePlaylist}></div>
        </div>
      </div>

and finally the scss for it

.player-playlist {
  position: relative;
  .vjs-playlist-vertical {
    position: absolute;
    background-color: transparent;
    right: 0;
    top: 0;
    min-width: 0;
    height: 100%;
    width: 40%;
    transition: width 0.1s;
    .vjs-playlist-item {
      display: none;
    }
  }

  &.player-showing-playlist {
    .vjs-playlist-item {
      display: block;
    }
    .show-playlist {
      div::after {
        content: ">";
      }
      div {
        padding: 5px 5px 10px 10px;
      }
      right: 40%;
    }
  }

  .show-playlist {
    div::after {
      content: "<";
    }
    div {
      opacity: 0.4;
      box-shadow: 0px 4px 40px 0px #000;
      border-color: white;
      border-style: solid;
      border-width: 2px 0px 2px 2px;

      border-radius: 10px 0 0 10px;
      padding: 5px 5px 10px 2px;
      color: white;
      background-color: #000;
      top: 40%;
      height: 50px;
      position: relative;
      font-size: 52px;
      cursor: pointer;
      font-weight: 800;
      user-select: none;
    }

    height: 100%;
    width: 40px;
    position: absolute;
    right: 0px;
    top: 0px;
  }
}

Ill likely add a bit of work to get some css animations, but this should work as a base

[vimal1083]

Hello,

When using with the following config (including playstListId and embedOptions.playlist: true). EX:

        const player = await brightcovePlayerLoader({
          refNode: this.$refs.videoEmbed,
          refNodeInsert: 'append',
          accountId: this.videoPlayer.accountId,
          playerId: this.videoPlayer.playerId,
          embedId: 'default',
          playlistId,
          embedType: brightcovePlayerLoader.EMBED_TYPE_IN_PAGE,
          embedOptions: {
            responsive: true,
            playlist: true,
          },
        })

It seems to load div.vjs-playlist as expected, but looks like it is missing the container div for div.vjs-playlist. For example, if using the vertical playlist setting for the player and the advance embed, it looks like vjs-playlist should be the first child of div.vjs-playlist-sidebar vjs-playlist-sidebar-vertical vjs-playlist-show-hide-hidden... but this div wrapping vjs-playlist is missing, so styling is pretty off.

Unsure if I am missing a config setting, but the ending playlist markup is not matching the advance embed.

Thanks, Brandon

@brandonburkett Have you got the solution?

[brandonburkett]

I did not and we ended up back-logging the feature for now. With brightcove player 7 on the horizon, I am sure the DOM / classes will be changing up some more.

Hopefully brightcove updates this library.