Add ability to pass sources prop to support multiple video qualities (fixes #67)

src/helpers/get-player-opts.js

@@ -9,6 +9,7 @@ function getPlayerOpts(opts) {
     isMuted,
     licenseKey,
     playlist,
+    sources,
   } = opts;
 
   const hasAdvertising = !!generatePrerollUrl;
@@ -23,6 +24,8 @@ function getPlayerOpts(opts) {
     playerOpts.playlist = playlist;
   } else if (file) {
     playerOpts.file = file;
+  } else if (sources) {
+    playerOpts.sources = sources;
   }
 
   if (aspectRatio && aspectRatio !== 'inherit') {

src/player-prop-types.js

@@ -5,6 +5,14 @@ const propTypes = {
   className: PropTypes.string,
   customProps: PropTypes.object,
   file: PropTypes.string,
+  sources: PropTypes.arrayOf(
+    PropTypes.shape({
+      file: PropTypes.string,
+      label: PropTypes.string,
+      default: PropTypes.bool,
+      type: PropTypes.string,
+    }),
+  ),
   generatePrerollUrl: PropTypes.func,
   image: PropTypes.string,
   isAutoPlay: PropTypes.bool,

src/react-jw-player.jsx

@@ -62,8 +62,9 @@ class ReactJWPlayer extends Component {
   shouldComponentUpdate(nextProps) {
     const hasFileChanged = this.props.file !== nextProps.file;
     const hasPlaylistChanged = !isEqual(this.props.playlist, nextProps.playlist);
+    const hasSourcesChanged = !isEqual(this.props.sources, nextProps.sources);
 
-    return hasFileChanged || hasPlaylistChanged;
+    return hasFileChanged || hasPlaylistChanged || hasSourcesChanged;
   }
   componentDidUpdate() {
     if (window.jwplayer && window.jwplayer(this.videoRef)) {

test/get-player-opts.test.js

@@ -118,6 +118,19 @@ test('getPlayerOpts() with both only a file', (t) => {
   t.end();
 });
 
+test('getPlayerOpts() with sources', (t) => {
+  const mockSources = [
+    { file: 'mock file hd', label: 'HD' },
+    { file: 'mock file sd', label: 'SD' },
+  ];
+
+  const actual = getPlayerOpts({ sources: mockSources });
+
+  t.equal(actual.sources, mockSources, 'it sets the sources properly');
+
+  t.end();
+});
+
 test('getPlayerOpts() with image', (t) => {
   const mockImage = 'mock image';
 

test/react-jw-player.test.jsx

@@ -118,3 +118,30 @@ test('ReactJWPlayer().shouldComponentUpdate() with file change', (t) => {
 
   t.end();
 });
+
+test('ReactJWPlayer().shouldComponentUpdate() with sources change', (t) => {
+  const propsOne = {
+    sources: [
+      { file: 'mock file hd 1', label: 'HD' },
+      { file: 'mock file sd 1', label: 'SD' },
+    ],
+  };
+
+  const propsTwo = {
+    sources: [
+      { file: 'mock file hd 2', label: 'HD' },
+      { file: 'mock file sd 2', label: 'SD' },
+    ],
+  };
+
+  const shouldComponentUpdate = new ReactJWPlayer({}).shouldComponentUpdate.bind({
+    props: propsOne,
+  });
+
+  t.ok(
+    shouldComponentUpdate(propsTwo),
+    'it returns true when the file prop changes',
+  );
+
+  t.end();
+});