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