feat(android): Support Common Media Client Data (CMCD) #4034

uncoolclub · 2024-07-25T05:59:10Z

Summary

This PR adds support for CMCD (Common Media Client Data) in the ExoPlayer implementation of react-native-video. CMCD is a standard that allows clients to communicate QoE metrics and other contextual data to CDN providers and origin servers, enabling better analytics and potentially improved streaming performance.

Motivation

CMCD support is becoming increasingly important for video streaming applications, as it allows for better analytics and potential optimizations on the server side. By implementing CMCD in react-native-video, we enable developers to take advantage of these benefits in their React Native applications.

Changes

Added CMCDConfig class to handle CMCD configuration.
Updated ReactExoplayerView to support setting CMCD configuration.
Modified ReactExoplayerViewManager to handle CMCD prop from React Native.
Updated interface to allow setting CMCD configuration.

Test plan

To test this change:

Set up a React Native project with react-native-video.

Use the following code to enable CMCD:

   <Video
       source={{
           uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
           cmcd: true // or other custom cmcd configuration props...
       }}
    />

Use a network inspector to verify that CMCD data is being sent along with video requests.
If possible, use a server that supports CMCD to verify that the data is being received and processed correctly.

Test

1. CMCD Disabled (Default Behavior)

Test Case

Set cmcd: false or omit the cmcd property

Code

<Video
  source={{
    uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
    cmcd: false // or omit this line
  }}
/>

Result

CMCD was not activated, as confirmed in Android Studio's App Inspection > Network Inspector.

2. Default CMCD Configuration

Test Case

Set cmcd: true

Code

<Video
  source={{
    uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
    cmcd: true
  }}
/>

Result

CMCD was activated with default settings (query parameters), as verified in Android Studio's App Inspection > Network Inspector.

3. Custom CMCD Configuration with Request Header Mode

Test Case

Use custom CMCD configuration
Set mode: CmcdMode.MODE_REQUEST_HEADER

Code

<Video
  source={{
    uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
    cmcd: {
      mode: CmcdMode.MODE_REQUEST_HEADER,
      object: {
        'video-id': '1234',
      },
      session: {
        'session-test-id': 12,
      },
    }
  }}
/>

Result

Custom CMCD configuration was successfully applied using the request header mode.

4. Custom CMCD Configuration with Default Mode

Test Case

Use custom CMCD configuration
Omit the mode property (should default to query parameters)

Code

<Video
  source={{
    uri: 'https://demo.unified-streaming.com/k8s/features/stable/video/tears-of-steel/tears-of-steel-en.ism/.mpd',
    cmcd: {
      object: {
        'video-id': '1234',
      },
      session: {
        'session-test-id': 12,
      },
    }
  }}
/>

Result

Custom CMCD configuration was successfully applied using the default query parameter mode.

…VideoSrc type to enable cmcd feature on android feat(video.ts): introduce CmcdMode enum and CmcdConfiguration type to define cmcd configuration options

…t to handle Content Management and Delivery (CMCD) headers for Android platform.

…ties and parsing logic for React Native module

…n for ExoPlayer with support for custom data and configuration options.

…ion in ReactExoplayerViewManager to enable Content Management and Control Data (CMCD) for better video playback optimization.

…ion.Factory to customize CMCD configuration for media playback

… to enhance functionality and data handling

… the component, including usage examples and default values

KrzysztofMoch

LGTM 👍 left two small comments - Thanks for opening this PR

@YangJonghun cloud you also review this PR? @freeboub is on vacation and I would like also to someone else to review

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java

docs/pages/component/props.mdx

YangJonghun · 2024-07-25T09:59:34Z

@KrzysztofMoch I've already reviewed this PR :)

… prevCmcdConfig variables to clean up code and improve readability

…dability and maintainability

feat(props.mdx): add definitions for CmcdMode enum and CmcdData type to enhance understanding of CMCD data structure and usage

seyedmostafahasani · 2024-07-25T20:19:39Z

I have a suggestion. I think we should change the CMCDProps to a data class for better data representation and automatic generation of equals and hashCode methods.
WDYT? @YangJonghun @KrzysztofMoch

…proved readability and immutability - update CMCDProps class to use List instead of Array for properties

uncoolclub · 2024-07-26T05:12:23Z

@seyedmostafahasani

✅ 488f498

Hi, Thank you for the great review. As you suggested, I have changed it to a data class.

seyedmostafahasani · 2024-07-26T07:00:10Z

@uncoolclub thanks for applying my suggestion.
I had another suggestion. Did you see it, and what do you think about it?

YangJonghun · 2024-07-26T07:19:30Z

@seyedmostafahasani
Agree your suggestion that change to data class.
But I can't see any other suggestions, could you explain again what is it?

freeboub

2 small comments, but it looks great 👍

android/src/main/java/com/brentvatne/common/api/CMCDProps.kt

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java

seyedmostafahasani · 2024-07-26T08:54:14Z

@seyedmostafahasani Agree your suggestion that change to data class. But I can't see any other suggestions, could you explain again what is it?

My suggestion is regarding _cmcd in Video.tsx.
@uncoolclub @YangJonghun

uncoolclub · 2024-07-26T09:39:09Z

My suggestion is regarding _cmcd in Video.tsx.
@uncoolclub @YangJonghun

@seyedmostafahasani
I can't see the suggestion you left about _cmcd in Video.tsx in the comments. It seems like it might not have been sent. Could you check again?

If it's in the comments, I can't find it, so could you please provide the suggestion again?

src/Video.tsx

…de readability and reduce duplication

…ReactExoplayerView component feat(ReactExoplayerViewManager.java): remove redundant CMCD configuration logic from ReactExoplayerViewManager to simplify code and improve maintainability

src/Video.tsx

freeboub

One remaining comment, can you please check it. After that It will be ok for me !
Thank you for the PR !

seyedmostafahasani · 2024-08-05T07:51:15Z

@uncoolclub,
There are conflicts that need to be resolved.

uncoolclub · 2024-08-05T09:03:04Z

@seyedmostafahasani ✅ 1e9c258
Resolved conflicts with the master branch

freeboub · 2024-08-22T08:40:01Z

@KrzysztofMoch this PR can also be merged I think

uncoolclub added 8 commits July 25, 2024 13:36

feat(VideoNativeComponent.ts): add support for cmcd configuration in …

2723bc7

…VideoSrc type to enable cmcd feature on android feat(video.ts): introduce CmcdMode enum and CmcdConfiguration type to define cmcd configuration options

feat(Video.tsx): add support for CMCD configuration in Video componen…

ebd6081

…t to handle Content Management and Delivery (CMCD) headers for Android platform.

feat(CMCDProps.kt): add CMCDProps class to handle CMCD related proper…

7d3cd84

…ties and parsing logic for React Native module

feat(CMCDConfig.kt): add CMCDConfig class to handle CMCD configuratio…

3d49cce

…n for ExoPlayer with support for custom data and configuration options.

feat(ReactExoplayerViewManager.java): add support for CMCD configurat…

2548b5a

…ion in ReactExoplayerViewManager to enable Content Management and Control Data (CMCD) for better video playback optimization.

feat(ReactExoplayerView.java): add support for setting CmcdConfigurat…

e0e105c

…ion.Factory to customize CMCD configuration for media playback

feat(Source.kt): add support for CMCD properties linked to the source…

747c7aa

… to enhance functionality and data handling

docs(props.mdx): add documentation for configuring CMCD parameters in…

741b6e5

… the component, including usage examples and default values

uncoolclub marked this pull request as ready for review July 25, 2024 07:31

KrzysztofMoch requested a review from YangJonghun July 25, 2024 07:54

KrzysztofMoch approved these changes Jul 25, 2024

View reviewed changes

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java Outdated Show resolved Hide resolved

docs/pages/component/props.mdx Outdated Show resolved Hide resolved

YangJonghun approved these changes Jul 25, 2024

View reviewed changes

uncoolclub added 3 commits July 25, 2024 21:02

refactor(ReactExoplayerViewManager.java): remove unused PROP_CMCD and…

876b3aa

… prevCmcdConfig variables to clean up code and improve readability

refactor(Video.tsx): simplify cmcd configuration logic for better rea…

7f36c17

…dability and maintainability

docs(props.mdx): improve props documentation for clarity and consistency

1c36726

feat(props.mdx): add definitions for CmcdMode enum and CmcdData type to enhance understanding of CMCD data structure and usage

refactor(CMCDProps.kt): refactor CMCDProps class to data class for im…

488f498

…proved readability and immutability - update CMCDProps class to use List instead of Array for properties

uncoolclub force-pushed the feat/android-cmcd branch from 397edc4 to 488f498 Compare July 26, 2024 05:20

freeboub reviewed Jul 26, 2024

View reviewed changes

android/src/main/java/com/brentvatne/common/api/CMCDProps.kt Outdated Show resolved Hide resolved

android/src/main/java/com/brentvatne/exoplayer/ReactExoplayerViewManager.java Outdated Show resolved Hide resolved

seyedmostafahasani reviewed Jul 26, 2024

View reviewed changes

src/Video.tsx Outdated Show resolved Hide resolved

uncoolclub added 3 commits July 29, 2024 14:25

refactor(Video.tsx): refactor createCmcdHeader function to improve co…

df678c4

…de readability and reduce duplication

fix(CMCDProps.kt): remove import statement for CmcdConfiguration

d7f787c

feat(ReactExoplayerView.java): add support for CMCD configuration in …

76aaa6c

…ReactExoplayerView component feat(ReactExoplayerViewManager.java): remove redundant CMCD configuration logic from ReactExoplayerViewManager to simplify code and improve maintainability

seyedmostafahasani approved these changes Jul 29, 2024

View reviewed changes

freeboub reviewed Aug 1, 2024

View reviewed changes

src/Video.tsx Outdated Show resolved Hide resolved

freeboub requested changes Aug 1, 2024

View reviewed changes

fix(Video.tsx): merge _cmcd memo into src memo for optimization

9ded21b

freeboub approved these changes Aug 5, 2024

View reviewed changes

Merge branch 'master' into feat/android-cmcd

1e9c258

KrzysztofMoch merged commit ca795f2 into TheWidlarzGroup:master Aug 22, 2024
6 checks passed

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(android): Support Common Media Client Data (CMCD) #4034

feat(android): Support Common Media Client Data (CMCD) #4034

uncoolclub commented Jul 25, 2024

KrzysztofMoch left a comment

YangJonghun commented Jul 25, 2024

seyedmostafahasani commented Jul 25, 2024 •

edited

Loading

uncoolclub commented Jul 26, 2024

seyedmostafahasani commented Jul 26, 2024 •

edited

Loading

YangJonghun commented Jul 26, 2024 •

edited

Loading

freeboub left a comment

seyedmostafahasani commented Jul 26, 2024

uncoolclub commented Jul 26, 2024 •

edited

Loading

freeboub left a comment

seyedmostafahasani commented Aug 5, 2024

uncoolclub commented Aug 5, 2024

freeboub commented Aug 22, 2024

feat(android): Support Common Media Client Data (CMCD) #4034

feat(android): Support Common Media Client Data (CMCD) #4034

Conversation

uncoolclub commented Jul 25, 2024

Summary

Motivation

Changes

Test plan

Test

1. CMCD Disabled (Default Behavior)

Test Case

Code

Result

2. Default CMCD Configuration

Test Case

Code

Result

3. Custom CMCD Configuration with Request Header Mode

Test Case

Code

Result

4. Custom CMCD Configuration with Default Mode

Test Case

Code

Result

KrzysztofMoch left a comment

Choose a reason for hiding this comment

YangJonghun commented Jul 25, 2024

seyedmostafahasani commented Jul 25, 2024 • edited Loading

uncoolclub commented Jul 26, 2024

seyedmostafahasani commented Jul 26, 2024 • edited Loading

YangJonghun commented Jul 26, 2024 • edited Loading

freeboub left a comment

Choose a reason for hiding this comment

seyedmostafahasani commented Jul 26, 2024

uncoolclub commented Jul 26, 2024 • edited Loading

freeboub left a comment

Choose a reason for hiding this comment

seyedmostafahasani commented Aug 5, 2024

uncoolclub commented Aug 5, 2024

freeboub commented Aug 22, 2024

seyedmostafahasani commented Jul 25, 2024 •

edited

Loading

seyedmostafahasani commented Jul 26, 2024 •

edited

Loading

YangJonghun commented Jul 26, 2024 •

edited

Loading

uncoolclub commented Jul 26, 2024 •

edited

Loading