Skip to content

Switch Between Audio and Video Streams

As a user, I need to switch between an audio and a video stream so that I can listen into a live streaming session most effectively.

Acceptance Criteria:

  • GIVEN a video player
    • WHEN configuring the player
      • THEN there is an azureAudioChannelName prop
      • AND the prop is required
      • AND the prop is of type String
    • WHEN looking below the player
      • THEN there are two buttons
      • THEN the left button is selected by default upon page load
      • THEN the selected button has a background of #CCCCCC
      • THEN the unselected button has a transparent color
      • THEN the left button is a video icon (https://www.iconfinder.com/icons/172629/camera_video_icon)
      • AND the size of the icon is 40px
      • AND the icon has a label is centered below the icon
      • AND the label reads the value associated with the component's azureVideoChannelName prop, with only the first letter capitalized (e.g. video -> Video)
      • THEN the right button is an audio icon (https://www.iconfinder.com/icons/172501/medium_volume_icon)
      • AND the size of the icon is 40px
      • AND the icon has a label is centered below the icon
      • AND the label reads the value associated with the component's azureAudioChannelName prop, with only the first letter capitalized (e.g. audio -> Audio)
      • THEN the top of the icons are padded from the player by 10px
      • THEN the buttons are padded around the edges by an additional 10px
    • WHEN clicking the video player icon or label
      • THEN the video player is reloaded to use the stream associated with the component's azureVideoChannelName prop
    • WHEN clicking the audio player icon or label
      • THEN the video player is reloaded to use the stream associated with the component's azureAudioChannelName prop
  • GIVEN the icons
    • WHEN giving credit to the author

      • THEN there is a credits.txt file with the following context

        Audio Icon (https://www.iconfinder.com/icons/172501/medium_volume_icon) made by Visual Pharm (http://icons8.com/) from www.iconfinder.com is licensed by CC BY-ND 3.0
Video Icon (https://www.iconfinder.com/icons/172629/camera_video_icon) made by Visual Pharm (http://icons8.com/) from www.iconfinder.com is licensed by CC BY-ND 3.0