literal-life-church / stream-switch Goto Github PK

As a user, when the live stream is offline, I need the video player to automatically poll for whenever it comes online so that I don't have to refresh the page to trigger a retry.

Acceptance Criteria:

• GIVEN the web player

  • WHEN an administrator is setting up the player
    • THEN there is a polling-interval property (default: 0, type: Number)
    • AND the player ignores any polling-interval of less than 15 (seconds) and never polls

• GIVEN both live streams are offline

  • WHEN the page loads
    • THEN the player checks for the status of the live stream
    • AND it displays the standard loading interface while checking
    • AND shows that the stream is offline
  • WHEN the player is configured to poll for changes every polling-interval seconds (where polling-interval >= 15)
    • THEN the player checks for the status of the live stream
    • AND it displays the standard loading interface while checking
    • AND continues to check every polling-interval seconds
    • AND shows the live stream once the video and/or audio stream comes online
  • WHEN the player is NOT configured to poll for changes every polling-interval seconds (where polling-interval < 15)
    • THEN the player only checks on page load with the standard loading interface
    • AND never checks again until a web page reload

• GIVEN one stream is online

  • WHEN the page loads
    • THEN the player checks for the status of the live stream
    • AND it displays the standard loading interface while checking
    • AND shows the live stream
    • AND the switcher buttons are hidden

• GIVEN both streams are online

  • WHEN the page loads
    • THEN the player checks for the status of the live stream
    • AND it displays the standard loading interface while checking
    • AND shows the live stream
    • AND the switcher buttons are visible
    • AND it defaults to the video stream

I've decided to transition this project from a CLI, multi-file implementation to a simpler, single-file JavaScript version. Thus, thus development task needs to:

• Remove all NPM, .vue, .html, etc... files
• Keep Git-related files, but adjust for a non-CLI implementation
• Create one index.html file for testing the implementation
• Create one stream-switch.js file for implementing the VueJS code

Since this repository was moved from oliverspryn/stream-switch to literal-life-church/stream-switch, the hard-coded links to the assets on jsDelivr still point back to the old location. This bug should update the string oliverspryn/stream-switch to literal-life-church/stream-switch in the source code.

By default, the player and pre-loading view are expected to align to the center of its surrounding container. However, since there is a float: left in the pre-loader <div> set, everything aligns to the left. That float should be cleared so that the player and pre-loader can continue to stay in the center.

As a streaming administrator, I need Google Analytics enabled on the JW Player instance so that I can track playback events and errors.

Acceptance Criteria:

• GIVEN a web page
  • WHEN setting up the widget
    • THEN Google Analytics is enabled for both video and audio channels, whichever is currently showing
    • AND the mediaid (case-sensitive) is tracked as the Google Analytics label
  • WHEN an error occurs
    • THEN all errors are tracked
    • AND the errors are tracked under an event category called JW Player Events
    • AND the errors are tracked under an event action called Error
    • AND the error code is tracked under an event label called Code
    • AND the JW Player error code is tracked as the event value

As a user, I need a widget so that I can switch between stream types.

Acceptance Criteria:

• GIVEN the project is not created
  • WHEN setting up the project
    • THEN a skeleton project is created
    • THEN unit testing support is available
    • THEN the version property in the package.json file is set to 0.0.1
    • THEN the project has an MIT LICENSE file

The template code uses a variable called audioUrl, which does not exist and breaks the application. The variable that should be used is audioUrls.

As a user, I need the underlying player to be JW Player instead of the Azure Media Player, so that I can get the features and reliability of a modern, frequently updated video player.

Acceptance Criteria:

• GIVEN a web page
  • WHEN setting up the widget
    • THEN there is a property called placeholder-image which accepts a URL string to an image
    • THEN there is a property called offline-image which accepts a URL string to an image
    • THEN there is a property called organization-name which accepts a string
  • WHEN loading the page for the video player
    • THEN the video player uses JW Player
    • AND the aspect ratio is set to 16x9
    • AND the autoplay feature is set from the autoplay property
    • AND it shows the player controls
    • AND it loads the media as a playlist
      • AND the image of the player is set to the placeholder-image
      • AND the mediaId is the name of the video channel on azure
      • AND the title is (Azure video channel name [uppercase first letter] + " Stream from " + organization name)
      • AND the sources are loaded as an array
      • AND the first source is the DASH stream (including the file extension .mpd)
      • AND the second source is the HLS stream (including the file extension .m3u8)
    • AND it preloads the metadata
    • AND the primary technology is html5
  • WHEN loading the page for the audio player
    • THEN the video player uses JW Player
    • AND the aspect ratio is set to 16x9
    • AND the autoplay feature is set from the autoplay property
    • AND it shows the player controls
    • AND it loads the media as a playlist
      • AND the image of the player is set to the placeholder-image
      • AND the mediaId is the name of the audio channel on azure
      • AND the title is (Azure audio channel name [uppercase first letter] + " Stream from " + organization name)
      • AND the sources are loaded as an array
      • AND the first source is the DASH stream (including the file extension .mpd)
      • AND the second source is the HLS stream (including the file extension .m3u8)
    • AND it preloads the metadata
    • AND the primary technology is html5
  • WHEN both the video and audio streams are not running
    • THEN the offline-image image shows instead of the video player
    • AND the video player itself is hidden and does not initialize
    • AND the channel switcher buttons are both hidden
  • WHEN an error occurs while fetching the streaming manifest files
    • THEN the offline-image image shows instead of the video player
    • AND the video player itself is hidden and does not initialize
    • AND the channel switcher buttons are both hidden

Developer notes:
Please remove all references to Azure Media Player or AMP, in the project. Microsoft Application Insights can also be removed since JW Player ships with its own analytics reporting.

As a webmaster, I need a simple component so that I can embed the media switcher on my website.

Acceptance Criteria:

• GIVEN a webpage
  • WHEN including the Stream Switch library a page
    • THEN a reference to VueJS is required
    • THEN a reference to the library is required
    • THEN the Azure Media Player is embedded into the site with a VueJS component
  • WHEN using the VueJS component
    • THEN the component's name is <stream-switch />
    • THEN the height of the player is configurable
    • THEN the width of the player is configurable
    • THEN the src of the player is configurable

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
      

Whenever the preloader finishes and transitions to the player, the player completely disappears. This is likely related to the clearfix issue fixed in #22. Most likely, the clearing of the float should occur in a lower-level <div> tag to not affect the player.

As a user, I need a better way of understanding what the player is doing so that I can either wait for the stream to load, or see that it is offline.

Acceptance Criteria:

• GIVEN the video player

  • WHEN an administrator is installing it on the site
    • THEN there is no offline-image property
    • AND there is a loading-text property (default: "Loading the live stream", type: string)
    • AND there is an offline-text property (default: "Live stream is currently offline", type: string)
  • WHEN it is loading the stream manifest URLs from the Live Streaming API
    • THEN it displays the placeholder-image background instead of the player
    • AND there is a Font Awesome spinner using the fa-spinner class
    • AND the spinner is spinning using the fa-pulse fa-3x fa-fw classes
    • AND the spinner is the default size from Font Awesome
    • AND below the spinner is a dynamic text view
    • AND the text view has a font-size of 18px, bold
    • AND the spinner and text are centered in the bottom 1/2 of the placeholder-image
    • AND the dynamic text shows the loading-text
  • WHEN both streams are offline
    • THEN it displays the placeholder-image background instead of the player
    • AND the dynamic text shows the offline-text
    • AND the spinner is hidden
    • AND the dynamic text is centered in the bottom 1/2 of the placeholder-image
  • WHEN only one stream is online
    • THEN it displays the player
    • AND it switches to the stream which is online
    • AND it hides the switcher controls
  • WHEN both streams are online
    • THEN it displays the player
    • AND it switches to the video stream

• GIVEN the switcher controls

  • WHEN both streams are offline
    • THEN it hides the switcher controls
  • WHEN only one stream is online
    • THEN it hides the switcher controls
  • WHEN both streams are online
    • THEN it shows the switcher controls
    • AND the video stream button label uses the azure-video-channel-label
    • AND the video stream button icon uses the Font Awesome fa-film icon with a font size of 2em and 8px of padding on the bottom
    • AND the audio stream button label uses the azure-audio-channel-label
    • AND the audio stream button icon uses the Font Awesome fa-volume-up icon with a font size of 2em and 8px of padding on the bottom

As an administrator, I need a way of telling how the player is performing on the user's devices so that I can gain insight into how the video is used and adjust the settings if something is going wrong.

Acceptance Criteria:

• GIVEN the video player
  • WHEN the client is configuring the player
    • THEN there is an option called application-insights-instrumentation-key for the user to provide a key to send data to Azure Application Insights
  • WHEN the player sends data to Azure Application Insights
    • THEN the following metrics are tracked: playbackSummary, loaded, viewed, ended, playTime, percentsPlayed, play, pause, seek, fullscreen, error, buffering, bitrateQuality, and downloadInfo
    • AND the streamId is captured as either audio for the Audio stream, or video for the video stream

Developer Notes:
This repository has a plugin for recording this information with the Azure Media Player: https://github.com/Azure-Samples/media-services-javascript-azure-media-player-application-insights-plugin

As a user, I need to have the video player pull the correct streaming URLs so that I can watch a live stream.

Acceptance Criteria:

• GIVEN the webmaster is installing the video player

  • WHEN configuring the options
    • THEN there is an azure-audio-channel-label property (type: String, required: true) for use as the human-readable name of the channel to show under the audio switcher button
    • AND there is an azure-audio-channel-name (type: String, required: true) property to select the name of the audio channel on Azure Media Services
    • AND there is an azure-streaming-endpoint-name (type: String, required: true) property to select the name of the streaming endpoint on Azure Media Services
    • AND there is an azure-video-channel-label (type: String, required: true) property for use as the human-readable name of the channel to show under the video switcher button
    • AND there is an azure-video-channel-name (type: String, required: true) property to select the name of the video channel on Azure Media Services
    • AND there is an live-streaming-api-host (type: String, required: true) property to configure the domain name where the Live Streaming API instance is reachable
    • AND the firebase-project-id property is no longer available

• GIVEN the player on a webpage

  • WHEN it is initializing
    • THEN it reaches out to the configured Live Streaming API instance for the configuration information
    • AND uses the respective audio or video channel label to construct the name of the event, as follows: <channel label> Stream from <organization name>
    • AND it first adds the DASH URL to the playlist, and second, it adds the HLS URL
  • WHEN deciding which stream to play
    • THEN it defaults to showing the video stream if it is available
    • AND it shows the audio stream if the video stream is not available
    • AND it shows the event offline message if no stream is available
  • WHEN configuring the stream switch buttons
    • THEN it hides the stream switcher buttons if only one stream is available
    • AND it shows the stream switcher buttons if both streams are available
    • AND the video switch button's label uses the value from the azure-video-channel-label property
    • AND the audio switch button's label uses the value from the azure-audio-channel-label property

As a user, I need a VueJS component so that I can embed a live video stream on my website

Acceptance Criteria:

• GIVEN a webpage
  • WHEN embedding the VueJS component onto the page
    • THEN the component tag is <stream-switch />
    • THEN the autoplay prop is available
      • AND it is a Boolean
      • AND it defaults to true
    • THEN the controls prop is available
      • AND it is a Boolean
      • AND it defaults to true
    • THEN the error-message prop is available
      • AND it is a String
      • AND it defaults to Please check back during our regular service hours to view our live streaming
    • THEN the native-controls-for-touch prop is available
      • AND it is a Boolean
      • AND it defaults to false
    • THEN the height prop is available
      • AND its type is not specified (i.e. null type)
      • AND it defaults to auto
    • THEN the width prop is available
      • AND its type is not specified (i.e. null type)
      • AND it defaults to 100%
    • THEN the firebase-project-id prop is available
      • AND it is a String
      • AND it is required
    • THEN the firebase-database-name prop is available
      • AND it is a String
      • AND it defaults to (default)
    • THEN the azure-video-channel-name prop is available
      • AND it is a String
      • AND it is required
  • WHEN setting up the Azure Media Player
    • THEN the autoplay prop maps to the Azure autoplay property
    • THEN the controls prop maps to the Azure controls property
    • THEN the native-controls-for-touch prop maps to the Azure nativeControlsForTouch property
    • THEN the height prop maps to the Azure height property
    • THEN the width prop maps to the Azure width property
    • THEN the Azure fluid property is always set to true
    • THEN the Azure logo.enabled property is always set to false
    • THEN all other Azure properties are left to their default values
  • WHEN fetching the source for the player
    • THEN it uses the firebase-project-id prop and the firebase-database-name prop to make a RPC call to https://firestore.googleapis.com/v1/projects/<firebase-project-id>/databases/<firebase-database-name>/documents/media
    • THEN it parses the url associated with a name matching the azure-video-channel-name prop
    • THEN it gives the url to the player as its source
  • WHEN the source for the video player does not contain a name that matches the azure-video-channel-name prop
    • THEN do not set the source for the video to a blank string
  • WHEN the video player shows an error
    • THEN set the message to the text given in the error-message prop

The README should be updated to give other potential users a full picture of how the Stream Switch library works and how to use it.

It's nice to see how many times a project's README is hit. Add one to the footer of this project's main README to get an idea of the traffic it receives.

The properties on the stream switch interface still use Azure Media Services v2 wording. Channels have been renamed to Live Events. For clarity, the interface of this widget should be updated to reflect the new wording.