Adding cloudinary playList widget in React - reactjs

Question

I have React app running videos from cloudinary. I have managed to edit Video tag but want to also add playlistWidget. Where does this fit into code/Video tag? The example provided on cloudinary is for javascript not React.
https://cloudinary.com/documentation/video_player_customization
Here is ex of my component with cloudinary player.
import React from "react";
import axios from "axios";
import "./VideoPlayer.css"
import { inDev } from "../API";
const devAPI = "http://localhost:8081/api/";
const baseAPI = "api/";
import {Image, Video, Transformation, CloudinaryContext} from 'cloudinary-react';
class Player extends React.Component {
constructor(props) {
super(props);
this.state = {
WelcomeVideo:"https://res.cloudinary.com/Name/video/upload/v1594509086/ab7qqxjexpwfv4j7kzj2x.mp4",
Logo:"https://res.cloudinary.com/example/image/upload/v1599423081/Logo1.png",
};
}
render() {
return ( <div style={{textAlign: "center"}}>
<h1 style={{fontSize:"60px"}}>Video of Week!</h1>
<Video
id="example-player"
cloudName="demo"
src={this.state.WelcomeVideo}
publicId="cat"
controls
autoPlay="true"
preload= "auto"
class="cld-video-player"
poster={this.state.Logo}
width= "400"
height="320"
fallback="Cannot display video"
/>
</div>
);
}
}
export default Player;
Updated recommendations per cloudinary https://cloudinary.com/documentation/video_player_playlists_recommendations#:~:text=playlist%20widget%20%2D%20A%20scrollable%20list,a%20full%20screen%20web%20browser.
import React, { Component } from "react";
import { Cloudinary } from "cloudinary-core";
import "cloudinary-video-player/dist/cld-video-player";
class PlayerCloud extends Component {
componentDidMount() {
// Setting video sources:
var source1 = { publicId: 'elephants', info: { title: 'My main movie',
subtitle: 'Something to know about the main movie' } }
var source2 = { publicId: 'cat', info: { title: 'Another great video',
subtitle: 'A great subtitle',
description: 'An interesting description of this video....' } }
var source3 = { publicId: 'dog', info: { title: 'Another interesting video1',
subtitle: 'Subtitle for video3', description: 'An interesting description of this video....' } }
// Specifying the recommendations for source1 as a fixed array of sources:
source1.recommendations = [source2, source3]
const cld = new Cloudinary({ cloud_name: "demo", secure: true });
const videoName = "elephants";
var demoplayer = cld.videoPlayer("some-video", {
publicId: source1.publicId,
controls: true,
preload: "auto",
muted: true,
autoplay: true,
width: 300,
autoShowRecommendations:true
});
}
render() {
return (
<div>
<video
id="some-video"
/>
</div>
);
}
}
export default PlayerCloud;

Answer 1

See this Codesandbox showing how to bind the video player code to a video tag. Once you are running a video player instead of an HTML 5 video tag, you can add functionality like the playList Widget
https://codesandbox.io/s/em2g0
https://cloudinary.com/documentation/video_player_playlists_recommendations#creating_a_playlist
The video player requires CSS that is in the index.html as well as binding functionality to a video tag.

Answer 2

Here's another react Sandbox which just shows a short video in the video player. [https://codesandbox.io/s/react-cld-video-player-v2-yfgxi?file=/src/VideoPlayerTest.js][1]
You can find more information about video player options and style here: https://cloudinary.com/documentation/cloudinary_video_player