feat(node-18-upgrade): Node 18 Upgrade

.nvmrc

@@ -1 +1 @@
-lts/fermium
+lts/hydrogen

.travis.yml

@@ -1,6 +1,7 @@
 language: node_js
+dist: 'focal'
 node_js:
-    - '14'
+    - '18'
 addons:
     apt:
         packages:
@@ -13,6 +14,7 @@ cache:
 before_install:
     - curl -o- -L https://yarnpkg.com/install.sh | bash -s -- --version 1.22.5
     - export PATH=$HOME/.yarn/bin:$PATH
+    - export NODE_OPTIONS=--openssl-legacy-provider
 jobs:
     include:
         - name: "Build & Test"

package.json

@@ -36,7 +36,7 @@
         "babel-loader": "^8.0.6",
         "babel-plugin-transform-require-ignore": "^0.1.1",
         "box-annotations": "^2.3.0",
-        "box-ui-elements": "15.1.0-beta.21",
+        "box-ui-elements": "^18.1.0",
         "chai": "^4.2.0",
         "classnames": "^2.2.6",
         "conventional-changelog-cli": "^2.0.28",
@@ -101,15 +101,15 @@
         "webpack-dev-server": "^3.11.2"
     },
     "engines": {
-        "node": ">=10.x",
+        "node": ">=18.x",
         "yarn": ">=1.19.x"
     },
     "scripts": {
         "build": "yarn setup && yarn clean && yarn build:i18n && yarn build:dev",
         "build:ci": "yarn setup && yarn webpack --progress --colors --config build/webpack.config.js",
-        "build:dev": "BABEL_ENV=dev NODE_ENV=dev yarn webpack --progress --colors --config build/webpack.config.js",
+        "build:dev": "BABEL_ENV=dev NODE_ENV=dev NODE_OPTIONS=--openssl-legacy-provider yarn webpack --progress --colors --config build/webpack.config.js",
         "build:i18n": "mojito-rb-gen -s src/i18n -o src/i18n/json -b en-US.properties",
-        "build:prod": "BABEL_ENV=production NODE_ENV=production node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --progress --colors --config build/webpack.config.js",
+        "build:prod": "BABEL_ENV=production NODE_ENV=production NODE_OPTIONS=--openssl-legacy-provider node --max_old_space_size=4096 ./node_modules/webpack/bin/webpack.js --progress --colors --config build/webpack.config.js",
         "clean": "rm -rf dist && rm -rf reports/coverage && rm -rf src/i18n/json",
         "cy:open": "yarn cy:wait; yarn cypress open",
         "cy:run": "yarn cy:wait; yarn cypress run --spec test/integration/**/*.test.js",
@@ -125,7 +125,7 @@
         "setup": "yarn install",
         "start": "yarn setup && yarn build:dev --watch",
         "start:linked": "yarn link box-annotations && IS_LINKED=1 yarn start",
-        "start:dev": "yarn build:i18n && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev yarn webpack-dev-server --config build/webpack.config.js",
+        "start:dev": "yarn build:i18n && LANGUAGE=en-US BABEL_ENV=dev NODE_ENV=dev NODE_OPTIONS=--openssl-legacy-provider yarn webpack-dev-server --config build/webpack.config.js",
         "start:dev:linked": "yarn link box-annotations && IS_LINKED=1 yarn start:dev",
         "test": "yarn setup && NODE_ENV=test yarn jest",
         "test:ci": "yarn test --ci --maxWorkers=4",

src/lib/viewers/controls/media/TimeControls.tsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import isFinite from 'lodash/isFinite';
 import noop from 'lodash/noop';
-import { bdlBoxBlue, bdlGray62, white } from 'box-ui-elements/es/styles/variables';
+import { bdlBoxBlue, bdlGray65, white } from 'box-ui-elements/es/styles/variables';
 import Filmstrip from './Filmstrip';
 import SliderControl from '../slider';
 import './TimeControls.scss';
@@ -75,7 +75,7 @@ export default function TimeControls({
                 onUpdate={onTimeChange}
                 step={5}
                 title={__('media_time_slider')}
-                track={`linear-gradient(to right, ${bdlBoxBlue} ${currentPercentage}%, ${white} ${currentPercentage}%, ${white} ${bufferedPercentage}%, ${bdlGray62} ${bufferedPercentage}%, ${bdlGray62} 100%)`}
+                track={`linear-gradient(to right, ${bdlBoxBlue} ${currentPercentage}%, ${white} ${currentPercentage}%, ${white} ${bufferedPercentage}%, ${bdlGray65} ${bufferedPercentage}%, ${bdlGray65} 100%)`}
                 value={currentValue}
             />
         </div>

src/lib/viewers/controls/media/__tests__/TimeControls-test.tsx

@@ -62,11 +62,11 @@ describe('TimeControls', () => {
 
         test.each`
             currentTime | track
-            ${0}        | ${'linear-gradient(to right, #0061d5 0%, #fff 0%, #fff 10%, #767676 10%, #767676 100%)'}
-            ${50}       | ${'linear-gradient(to right, #0061d5 0.5%, #fff 0.5%, #fff 10%, #767676 10%, #767676 100%)'}
-            ${1000}     | ${'linear-gradient(to right, #0061d5 10%, #fff 10%, #fff 10%, #767676 10%, #767676 100%)'}
-            ${2500}     | ${'linear-gradient(to right, #0061d5 25%, #fff 25%, #fff 10%, #767676 10%, #767676 100%)'}
-            ${10000}    | ${'linear-gradient(to right, #0061d5 100%, #fff 100%, #fff 10%, #767676 10%, #767676 100%)'}
+            ${0}        | ${'linear-gradient(to right, #0061d5 0%, #fff 0%, #fff 10%, #6f6f6f 10%, #6f6f6f 100%)'}
+            ${50}       | ${'linear-gradient(to right, #0061d5 0.5%, #fff 0.5%, #fff 10%, #6f6f6f 10%, #6f6f6f 100%)'}
+            ${1000}     | ${'linear-gradient(to right, #0061d5 10%, #fff 10%, #fff 10%, #6f6f6f 10%, #6f6f6f 100%)'}
+            ${2500}     | ${'linear-gradient(to right, #0061d5 25%, #fff 25%, #fff 10%, #6f6f6f 10%, #6f6f6f 100%)'}
+            ${10000}    | ${'linear-gradient(to right, #0061d5 100%, #fff 100%, #fff 10%, #6f6f6f 10%, #6f6f6f 100%)'}
         `('should render the correct track for currentTime $currentTime', ({ currentTime, track }) => {
             const buffer = getBuffer(1000, 0); // 10% buffered
             const wrapper = getWrapper({ bufferedRange: buffer, currentTime });

yarn.lock

@@ -3079,10 +3079,10 @@ box-annotations@^2.3.0:
   resolved "https://registry.yarnpkg.com/box-annotations/-/box-annotations-2.3.0.tgz#5cac38171f7f8d9283659e2b243310f19d5ab7d3"
   integrity sha512-Ea7tPgyJjX7vcnmZIfCorbzHd6oYx/OHVMPnZVQL/dUHR5vRKhLM0610xqwmVlUpk627sqHw5x/APaa+kt4SXg==
 
-box-ui-elements@15.1.0-beta.21:
-  version "15.1.0-beta.21"
-  resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-15.1.0-beta.21.tgz#4fa34bf6bf3b10d79f95b0e56349c057926573e3"
-  integrity sha512-ey7lwuv+ds9rq3nVfVcneedWaptw3nYdlF32antUxw0IkkuAYft3LX4XxRHDqNQSv5LzUBqxd5wd1caxVpiuWQ==
+box-ui-elements@^18.1.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/box-ui-elements/-/box-ui-elements-18.1.0.tgz#59524c99596b3a9bc39b79eefa8d320dc487c7ad"
+  integrity sha512-D1r1qn0BfzHMHg3qVR+tJfB4jowUtmKtBGjyN1F9oE6dmj/mbp2t12WMpU+x57BRVY/h5COHYwBsYyGjets7tA==
 
 brace-expansion@^1.1.7:
   version "1.1.11"