Update frontend packages

Fixes: #5115
Fixes: #5116
Fixes: #5117
Fixes: #5118
Fixes: #5119
Fixes: #5120
Fixes: #5121
Fixes: #5122
Fixes: #5123
Fixes: #5124
Fixes: #5125
Fixes: #5126
Fixes: #5127
Fixes: #5128
Fixes: #5129
Fixes: #5130
Fixes: #5131
Fixes: #5132
Fixes: #5133
Fixes: #5134
Fixes: #5139
Fixes: #5140

frontend/.stylelintrc

@@ -75,7 +75,7 @@
     "function-parentheses-newline-inside": "never-multi-line",
     "function-parentheses-space-inside": "never",
     "function-url-quotes": "always",
-    "function-url-scheme-blacklist": [
+    "function-url-scheme-disallowed-list": [
       "data"
     ],
     "function-whitespace-after": "always",

frontend/gulp/webpack.js

@@ -7,6 +7,7 @@ const errorHandler = require('./helpers/errorHandler');
 const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
 const MiniCssExtractPlugin = require('mini-css-extract-plugin');
 const HtmlWebpackPlugin = require('html-webpack-plugin');
+const HtmlWebpackPluginHtmlTags = require('html-webpack-plugin/lib/html-tags');
 const TerserPlugin = require('terser-webpack-plugin');
 
 const uiFolder = 'UI';
@@ -14,7 +15,7 @@ const frontendFolder = path.join(__dirname, '..');
 const srcFolder = path.join(frontendFolder, 'src');
 const isProduction = process.argv.indexOf('--production') > -1;
 const isProfiling = isProduction && process.argv.indexOf('--profile') > -1;
-const inlineWebWorkers = true;
+const inlineWebWorkers = 'no-fallback';
 
 const distFolder = path.resolve(frontendFolder, '..', '_output', uiFolder);
 
@@ -32,14 +33,19 @@ const cssVarsFiles = [
 ].map(require.resolve);
 
 // Override the way HtmlWebpackPlugin injects the scripts
+// TODO: Find a better way to get these paths without
 HtmlWebpackPlugin.prototype.injectAssetsIntoHtml = function(html, assets, assetTags) {
-  const head = assetTags.head.map((v) => {
-    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${v.attributes.href.replace('\\', '/')}` };
-    return this.createHtmlTag(v);
+  const head = assetTags.headTags.map((v) => {
+    const href = v.attributes.href
+      .replace('\\', '/')
+      .replace('%5C', '/');
+
+    v.attributes = { rel: 'stylesheet', type: 'text/css', href: `/${href}` };
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
   });
-  const body = assetTags.body.map((v) => {
+  const body = assetTags.bodyTags.map((v) => {
     v.attributes = { src: `/${v.attributes.src}` };
-    return this.createHtmlTag(v);
+    return HtmlWebpackPluginHtmlTags.htmlTagObjectToString(v, this.options.xhtml);
   });
 
   return html
@@ -125,9 +131,8 @@ const config = {
         use: {
           loader: 'worker-loader',
           options: {
-            name: '[name].js',
-            inline: inlineWebWorkers,
-            fallback: !inlineWebWorkers
+            filename: '[name].js',
+            inline: inlineWebWorkers
           }
         }
       },

frontend/src/Components/Table/TableOptions/TableOptionsModal.js

@@ -2,7 +2,7 @@ import _ from 'lodash';
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import Form from 'Components/Form/Form';
 import FormGroup from 'Components/Form/FormGroup';
 import FormInputGroup from 'Components/Form/FormInputGroup';

frontend/src/Movie/Details/MovieDetails.js

@@ -239,6 +239,10 @@ class MovieDetails extends Component {
     }
   }
 
+  onTabSelect = (index, lastIndex) => {
+    this.setState({ selectedTabIndex: index });
+  }
+
   //
   // Render
 
@@ -616,7 +620,7 @@ class MovieDetails extends Component {
                 </div>
             }
 
-            <Tabs selectedIndex={this.state.tabIndex} onSelect={(tabIndex) => this.setState({ selectedTabIndex: tabIndex })}>
+            <Tabs selectedIndex={this.state.tabIndex} onSelect={this.onTabSelect}>
               <TabList
                 className={styles.tabList}
               >

frontend/src/Settings/CustomFormats/CustomFormatSettingsConnector.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';
 import SettingsToolbarConnector from 'Settings/SettingsToolbarConnector';

frontend/src/Settings/Profiles/Profiles.js

@@ -1,6 +1,6 @@
 import React, { Component } from 'react';
 import { DndProvider } from 'react-dnd';
-import HTML5Backend from 'react-dnd-html5-backend';
+import { HTML5Backend } from 'react-dnd-html5-backend';
 import Link from 'Components/Link/Link';
 import PageContent from 'Components/Page/PageContent';
 import PageContentBody from 'Components/Page/PageContentBody';