media-carousel

media-carousel

The purpose of media-carousel is navigation between a gallery of video and audio files presented in a form of carousel. The media-carousel component at its very naked form has a carousel at the bottom (top) that let the user slide through the files and select one to load the player stacked at the top (bottom).

Each file comes with following meta data information:

file = {
  src: 'url',
  creator:{
    name:'Carla Severe'
  },
  upload_date:11111,
  meta:{
    emotions:[],
    personas:[],
    valence:0, // -1 or 1
    topics:[]
  }
}

Filters

There should be following UIs to filter media files:
1 - Valence Tri-Switch: positive, negative, all
2 - Emotion dropdown: Crave, Happiness, Gratitude, Excitement, Anger, Disappointment, Frustration, Confusion
3 - Persona dropdown: Advocate, Lover, hater, detractors, green_buyer, deal_hunter
4 - Topic selection - there could be many topics and user must be able to select multiple or none

Sorting

There should be sorting by date (increasing and decreasing).

Player

For player please use video.js react library: https://docs.videojs.com/tutorial-react.html

Info

The information for the current video in focus must be shown in appropriate manner:
1 - creator
2 - Upload time
3 - emotions/topics/persona

The Basics

The media carousel has two main components: the window and the carousel. The carousel accepts two props: the outside media data & a method from the parent that sets the state for the selected media item. The window component accepts one prop: the selected media with all the information.