fix: techOrder names can be camelCased. (#4277)

In the new middleware work, the way that new sources were loaded was refactored. We also recently made techs and components work either TitleCased or camelcased. There was one comparison that didn't do the proper check and cause the tech to be reloaded, even if the two techs were the same.

src/js/player.js

@@ -14,7 +14,7 @@ import * as Fn from './utils/fn.js';
 import * as Guid from './utils/guid.js';
 import * as browser from './utils/browser.js';
 import log from './utils/log.js';
-import toTitleCase from './utils/to-title-case.js';
+import toTitleCase, { titleCaseEquals } from './utils/to-title-case.js';
 import { createTimeRange } from './utils/time-ranges.js';
 import { bufferedPercent } from './utils/buffer.js';
 import * as stylesheet from './utils/stylesheet.js';
@@ -2326,7 +2326,7 @@ class Player extends Component {
       return true;
     }
 
-    if (sourceTech.tech !== this.techName_) {
+    if (!titleCaseEquals(sourceTech.tech, this.techName_)) {
       this.changingSrc_ = true;
 
       // load this technology with the chosen source

src/js/utils/to-title-case.js

@@ -21,3 +21,19 @@ function toTitleCase(string) {
 }
 
 export default toTitleCase;
+
+/**
+ * Compares the TitleCase versions of the two strings for equality.
+ *
+ * @param {string} str1
+ *        The first string to compare
+ *
+ * @param {string} str2
+ *        The second string to compare
+ *
+ * @return {boolean}
+ *         Whether the TitleCase versions of the strings are equal
+ */
+export function titleCaseEquals(str1, str2) {
+  return toTitleCase(str1) === toTitleCase(str2);
+}

test/unit/player.test.js

@@ -1564,6 +1564,26 @@ QUnit.test('src selects tech based on middleware', function(assert) {
 
 });
 
+QUnit.test('src_ does not call loadTech is name is titleCaseEquals', function(assert) {
+  let loadTechCalled = 0;
+  const playerProxy = {
+    selectSource() {
+      return {
+        tech: 'html5'
+      };
+    },
+    techName_: 'Html5',
+    ready() {},
+    loadTech_() {
+      loadTechCalled++;
+    }
+  };
+
+  Player.prototype.src_.call(playerProxy);
+
+  assert.equal(loadTechCalled, 0, 'loadTech was not called');
+});
+
 QUnit.test('options: plugins', function(assert) {
   const optionsSpy = sinon.spy();
 

test/unit/utils/to-title-case.test.js

@@ -1,5 +1,5 @@
 /* eslint-env qunit */
-import toTitleCase from '../../../src/js/utils/to-title-case.js';
+import toTitleCase, { titleCaseEquals } from '../../../src/js/utils/to-title-case.js';
 
 QUnit.module('to-title-case');
 
@@ -8,3 +8,15 @@ QUnit.test('should make a string start with an uppercase letter', function(asser
 
   assert.ok(foo === 'Bar');
 });
+
+QUnit.test('titleCaseEquals compares whether the TitleCase of two strings is equal', function(assert) {
+  assert.ok(titleCaseEquals('foo', 'foo'), 'foo equals foo');
+  assert.ok(titleCaseEquals('foo', 'Foo'), 'foo equals Foo');
+  assert.ok(titleCaseEquals('Foo', 'foo'), 'Foo equals foo');
+  assert.ok(titleCaseEquals('Foo', 'Foo'), 'Foo equals Foo');
+
+  assert.ok(titleCaseEquals('fooBar', 'fooBar'), 'fooBar equals fooBar');
+  assert.notOk(titleCaseEquals('fooBAR', 'fooBar'), 'fooBAR does not equal fooBar');
+  assert.notOk(titleCaseEquals('foobar', 'fooBar'), 'foobar does not equal fooBar');
+  assert.notOk(titleCaseEquals('fooBar', 'FOOBAR'), 'fooBar does not equal fooBAR');
+});