From b68f21132aebf6ba67e51f0e3cbbc295a00031c2 Mon Sep 17 00:00:00 2001
From: yisusans <susan@frame.io>
Date: Thu, 9 Nov 2017 10:23:50 -0500
Subject: [PATCH] Find video by id instead of by tagname Defaults to find the
 first video on the dom if no videoId prop is passed

---
 src/video/video.js      |  8 ++++++--
 src/video/video.test.js | 25 ++++++++++++++++++++++---
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/video/video.js b/src/video/video.js
index 962daee..a7b3421 100644
--- a/src/video/video.js
+++ b/src/video/video.js
@@ -31,7 +31,8 @@ export default (
     BaseComponent,
     mapStateToProps = defaultMapStateToProps,
     mapVideoElToProps = defaultMapVideoElToProps,
-    mergeProps = defaultMergeProps
+    mergeProps = defaultMergeProps,
+    videoId
 ) => class Video extends Component {
         constructor(props) {
             super(props);
@@ -102,7 +103,10 @@ export default (
         }
 
         componentDidMount() {
-            this.videoEl = this.el.getElementsByTagName('video')[0];
+            const videoEls = this.el.getElementsByTagName('video');
+            this.videoEl = videoId
+              ? videoEls.namedItem(videoId)
+              : videoEls[0];
             this.bindEventsToUpdateState();
         }
 
diff --git a/src/video/video.test.js b/src/video/video.test.js
index d0ed24f..1ffa3f3 100644
--- a/src/video/video.test.js
+++ b/src/video/video.test.js
@@ -20,6 +20,12 @@ const TestVideo = ({ video, ...restProps }) => {
             <video {...restProps}>
                 <source src="1" />
             </video>
+            <video
+              id="video2"
+              {...restProps}
+            >
+                <source src="2" />
+            </video>
             <TestControl {...video} />
         </div>
     );
@@ -228,7 +234,20 @@ describe('video', () => {
             expect(component.find(TestVideo).prop('duplicateKey')).toBe('mapVideoElToProps');
         });
     });
-});
-
-
 
+    describe('when passing in a video id as the fourth argument to the HOC', () => {
+      const videoEl = { id: 'video2' };
+      beforeEach(() => {
+        component = shallow(
+          <Component />
+        );
+
+        // Emulate videoEl being present
+        // e.g. componentDidMount
+        component.instance().videoEl = videoEl;
+      });
+      it('should find the video by id', () => {
+        expect(videoEl.id).toEqual('video2');
+      });
+    });
+});