Find video by id instead of by tagname

Defaults to find the first video on the dom if no videoId prop is passed
mderrick · Nov 9, 2017 · ce8e43e · ce8e43e
1 parent 91bc945
commit ce8e43e
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 6 deletions.
diff --git 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);
@@ -95,14 +96,17 @@ export default (
             this.unbindEvents();
         }
 
-        // Stop `this.el` from being null briefly on every render,
+        // Stop `this.el` from being null briefly on every rendxwxer,
         // see: https://github.com/mderrick/react-html5video/pull/65
         setRef(el) {
             this.el = findDOMNode(el);
         }
 
         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
@@ -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');
+      });
+    });
+});