I have added a 'videoPlaying' property to our state on the the individualCourses page .
This property will take the ID of the current video selected/played but for now the index of the video from the list is being stored here as it is same as the key for the component as of now .
Initial value of the 'videoPlaying' property is set to -1 for now , indicating no video selected but later this can be changed to the last video being played by the user.
Pressing/Clicking on a video from the List on the individualCourses page triggers a playVideo function which takes the key/index of the video which has been selected and resets the state by setting the 'videoPlaying' property equal to the selected videos key/index.
At the time of rendering of Videos List items in the List , if the video list item being rendered is the one which is being played , then a separate 'playVideo' class and style is added to it using ternary operator and conditional rendering .
Describe if there is any unusual behavior (Any Warning) of your code(Write NA if there isn't)
Unusual Behaviour : NA
Additional context (OPTIONAL)
Page after adding the highlight feature .
Here the first video is selected .
Checklist
[x] My code follows the code style of this project.
[ ] My change requires a change to the documentation.
[ ] I have updated the documentation accordingly.
[x] All new and existing tests passed.
[x] The title of my pull request is a short description of the requested changes.
ISSUE 252
fixes #252
Describe the changes you've made
Describe if there is any unusual behavior (Any Warning) of your code(Write
NAif there isn't)Unusual Behaviour :
NAAdditional context (OPTIONAL)
Page after adding the highlight feature . Here the first video is selected .
Checklist
Provide a Deployed link of route/page that needs to review Preview: http://localhost:3000/mycourses/:coursename