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).

In order to use media-carousel media must be saved in the Decooda S3 bucket:

UPLOAD

export const S3Configs = {
  bucketName: "decooda-media-galleries",
  bucketRegion: "us-east-1",
  IdentityPoolId: "XYZ"
}

Note that media must be saved with the following path structure: <product_name>/<company>/<project_id>/<video_id>/filename

Each media upload must be accompanied by the following HTTP POST

{
   //REQUIRED FIELDS
  s3URL,
  callbackURL:"", // POST HTTP
  modelIds:[123,456,789] // All core models used to analyze media
  //THE REST IS NOT REQUIRED
  date:1234, // UNIX Time stamp number
  user_id:"XYZ",
}

the callbackURL will be sent the HTTP POST with

    s3URL,
    meta:{
        emotions:["anger","happiness"], // list of strings
        valence:0, // -1 or 1
        topics:["drive_thorugh"] // list of strings
  }

SHOWREEL

To create a showreel the media-carousel send a POST to services.decooda.com/media/showreel (tentaive path URL - will change) with the body

{
    S3URLs:['m1','m2'], // the order is preserved in the showreel
    showreelId:'XYZ',
    s3URL:'s3 url for showreel'
    meta:{ // filtering all videos for following meta information
        emotions:[],
        valence:0, // -1 or 1
        topics:[]
  }
  callbackURL:'call back' //
  trigger:true // false to get only the processing time estimate
}

The server will respond with

{
    processingTime:12, //seconds
    numVideos:2, // number of video with the hit
    showreelId:'XYZ'
}

if the trigger is set to true upon the completion of the task the callback url is hit by decooda process informing the from of POST request with the body

{
    showreelId:'XYZ',
}

GALLERY LOAD EVENT

When the media carousel is loaded it sends a GET HTTP request to sample.decooda.com/media/gallery?projectId=x,company=x,productName=x and it expects

{
  files : [{
    src: 'url',
    upload_date:11111,
    meta:{
      emotions:[],
      personas:[],
      valence:0, // -1 or 1
      topics:[]
    }
  }],
  showreels :[{
    src: 'url',
    upload_date:11111,
    meta:{
      emotions:[],
      personas:[],
      valence:0, // -1 or 1
      topics:[]
    }
  }]
}

MEDIA LOAD EVENT

When a media is loaded a GET request is sent to sample.decooda.com/media/gallery?videoId=xxx and a detailed v2t payload for the transcription is sent back as the response.

NOTE

The backend saves all data and metadata for media for future queries...

The rest of the document is for the UI developers not the backend

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.