# Preparation Videos

[SylvieDoumet]

Value proposition

As a user of the homemade remedies app,

I want to be able to view preparation videos for each remedy directly on the remedy detail page,

So that I can better understand how to prepare the remedies with visual guidance.

Description

Acceptance criteria

• [ ] With a Preparation Video users should see an embedded YouTube video player in a clearly defined VideoContainer below the remedy details. The video should be playable directly on the page.
• [ ] When a remedy has a preparation video entry, the app should display an embedded youtube video player within a styled container on the remedy details page. The video should be properly centered and should be responsive to different screen sizes.
• [ ] The configuration should allow the app to fetch and display Youtube videos without issues.
• [ ] If a video cannot be displayed a placeholder should indicate the place of the video within RemedyDetailsPage alongside with a short error message informing the user of the problems concerning the video display.

Tasks

• [ ] Update the array of objects of assets/remedies.json with a youtube-url of a preparation video for each homemade remedy recipe. Use "videoUrlPreparation": as key and embed the video IDs into the structure https://www.youtube.com/embed/videoID
• [ ] Update the pages/remedy/[id]/index.js so that it contains a const currentVideo = currentRemedy.videoUrlPreparation and in the return a video container with an iframe sourced by currentVideo. Style the videocontainer as a styled component (styled.div).
• [ ] Update the next.config.js so that the reactStrictMode accepts images and videos from the youtube domain
• [ ] Update _app.js with a useEffect hook that re-renderes the initialRemedies when loading so that the newly added content appears - and there is no need to delete the local storage state every time the site is opend

  useEffect(() => {
  setRemedies(initialRemedies);
  }, []);

• [ ] Add an if-else-statement to the code of pages/remedy/[id]/index.js so that a placeholder is displayed when a video can not be loaded

  
  {currentVideo ? (
  <VideoContainer>
  <iframe
  ....
  />
  </VideoContainer>
  ) : (
  <PlaceholderContainer>
  <p>Sorry, the video is not available at the moment.</p>
  </PlaceholderContainer>
  )}

[ahohnsen]

Hey there,

Please include in the acceptance criteria, what happens if the movie cannot be loaded. Will there be a placeholder instead of the embedded video or an error message for the user?

[SylvieDoumet]

We embedded an error handling functionality within the acceptance criteria & tasks