Merge pull request #2382 from tf/file-display-name-media-event

Include file display names in media event context data

Author: tf

entry_types/scrolled/package/spec/frontend/AudioPlayer-spec.js

@@ -110,6 +110,36 @@ describe('AudioPlayer', () => {
     );
   });
 
+  it('passes displayName from audio file as media events context data', () => {
+    const spyMedia = jest.spyOn(media, 'getPlayer');
+
+    renderInEntry(
+      () => <AudioPlayer {...requiredProps()}
+                         audioFile={useFile({collectionName: 'audioFiles', permaId: 100})} />,
+      {
+        seed: {
+          fileUrlTemplates: {
+            audioFiles: {
+              mp3: ':id_partition/:basename.mp3'
+            }
+          },
+          audioFiles: [
+            {id: 1, permaId: 100, isReady: true, displayName: 'Podcast.mp3'}
+          ]
+        }
+      }
+    );
+
+    expect(spyMedia).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        mediaEventsContextData: expect.objectContaining({
+          fileDisplayName: 'Podcast.mp3'
+        })
+      })
+    );
+  });
+
   it('without id no media player is requested', () => {
     const spyMedia = jest.spyOn(media, 'getPlayer');
 

entry_types/scrolled/package/spec/frontend/MediaPlayer-spec.js

@@ -277,6 +277,26 @@ describe('MediaPlayer', () => {
     ));
   });
 
+  it('merges mediaEventsContextData prop into EventContext data for getPlayer', () => {
+    const eventContextData = {some: 'data'};
+
+    render(<MediaPlayer {...requiredProps()}
+                        type={'video'}
+                        mediaEventsContextData={{fileDisplayName: 'my-video.mp4'}}
+                        sources={getVideoSources()} />,
+           {
+             wrapper: ({children}) =>
+               <EventContext.Provider value={eventContextData}>{children}</EventContext.Provider>
+           });
+
+    expect(media.getPlayer).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        mediaEventsContextData: {some: 'data', fileDisplayName: 'my-video.mp4'}
+      })
+    );
+  });
+
   it('does not request new Player for same sources', () => {
     const {rerender} =
       render(<MediaPlayer {...requiredProps()}

entry_types/scrolled/package/spec/frontend/VideoPlayer-spec.js

@@ -161,6 +161,36 @@ describe('VideoPlayer', () => {
     );
   });
 
+  it('passes displayName from video file as media events context data', () => {
+    const spyMedia = jest.spyOn(media, 'getPlayer');
+
+    renderInEntry(
+      () => <VideoPlayer {...requiredProps()}
+                         videoFile={useFile({collectionName: 'videoFiles', permaId: 100})} />,
+      {
+        seed: {
+          fileUrlTemplates: {
+            videoFiles: {
+              high: ':id_partition/high/:basename.mp4'
+            }
+          },
+          videoFiles: [
+            {id: 1, permaId: 100, isReady: true, displayName: 'Interview.mp4'}
+          ]
+        }
+      }
+    );
+
+    expect(spyMedia).toHaveBeenCalledWith(
+      expect.anything(),
+      expect.objectContaining({
+        mediaEventsContextData: expect.objectContaining({
+          fileDisplayName: 'Interview.mp4'
+        })
+      })
+    );
+  });
+
   it('without id no media player is request', () => {
     const spyMedia = jest.spyOn(media, 'getPlayer');
     renderInEntry(<VideoPlayer {...requiredProps()} />);

entry_types/scrolled/package/src/frontend/AudioPlayer/index.js

@@ -38,6 +38,7 @@ export function AudioPlayer({audioFile, posterImageFile, ...props}) {
                        posterImageUrl={posterImageFile && posterImageFile.isReady ?
                                        posterImageFile.urls.large : undefined}
                        altText={audioFile.configuration.alt}
+                       mediaEventsContextData={{fileDisplayName: audioFile.displayName}}
                        {...props} />
           <AudioStructuredData file={audioFile} />
         </div>

entry_types/scrolled/package/src/frontend/MediaPlayer/index.js

@@ -108,7 +108,7 @@ function PreparedMediaPlayer(props){
                      loop={props.loop}
                      controls={props.controls}
                      playsInline={props.playsInline}
-                     mediaEventsContextData={eventContextData}
+                     mediaEventsContextData={{...eventContextData, ...props.mediaEventsContextData}}
                      atmoDuringPlayback={props.atmoDuringPlayback}
                      onSetup={onSetup}
                      altText={props.altText} />

entry_types/scrolled/package/src/frontend/VideoPlayer/index.js

@@ -40,6 +40,7 @@ export function VideoPlayer({videoFile, posterImageFile, adaptiveMinQuality, ...
                                      posterImageFile.urls.large : videoFile.urls.posterLarge}
                      altText={videoFile.configuration.alt}
                      objectPosition={props.fit === 'cover' ? videoFile.cropPosition : undefined}
+                     mediaEventsContextData={{fileDisplayName: videoFile.displayName}}
                      {...props} />
         <VideoStructuredData file={videoFile} />
       </>