Upgrade rc-slider and lift React.StrictMode

rc-slider was preventing us from enabling this more broadly. With https://github.com/react-component/slider/pull/591 merged and released, we can make more of the app strict

js/components/App.tsx

@@ -145,6 +145,7 @@ class App extends React.Component<Props> {
       return null;
     }
     return ReactDOM.createPortal(
+      <React.StrictMode>
         <div onBlur={this._handleBlur}>
           <Skin />
           <ContextMenuWrapper
@@ -155,7 +156,8 @@ class App extends React.Component<Props> {
               container={container}
             />
           </ContextMenuWrapper>
-      </div>,
+        </div>
+      </React.StrictMode>,
       this._webampNode
     );
   }

js/components/EqualizerWindow/index.tsx

@@ -58,12 +58,9 @@ const EqualizerWindow = (props: StateProps & DispatchProps) => {
     <div id="equalizer-window" className={className}>
       <FocusTarget windowId={WINDOWS.EQUALIZER}>
         {props.shade ? (
-          <React.StrictMode>
           <EqualizerShade />
-          </React.StrictMode>
         ) : (
           <div>
-            <React.StrictMode>
             <div
               className="equalizer-top title-bar draggable"
               onDoubleClick={props.toggleEqualizerShadeMode}
@@ -72,16 +69,12 @@ const EqualizerWindow = (props: StateProps & DispatchProps) => {
                 id="equalizer-shade"
                 onClick={props.toggleEqualizerShadeMode}
               />
-                <div
-                  id="equalizer-close"
-                  onClick={props.closeEqualizerWindow}
-                />
+              <div id="equalizer-close" onClick={props.closeEqualizerWindow} />
             </div>
             <EqOn />
             <EqAuto />
             <EqGraph />
             <PresetsContextMenu />
-            </React.StrictMode>
             <Band id="preamp" band="preamp" onChange={props.setPreampValue} />
             <div id="plus12db" onClick={props.setEqToMax} />
             <div id="zerodb" onClick={props.setEqToMid} />

js/components/MainWindow/index.tsx

@@ -73,7 +73,6 @@ const MainWindow = React.memo(({ analyser, filePickers }: Props) => {
   const loadMedia = useActionCreator(loadMediaAndPlay);
 
   return (
-    <React.StrictMode>
     <DropTarget
       id="main-window"
       className={className}
@@ -138,7 +137,6 @@ const MainWindow = React.memo(({ analyser, filePickers }: Props) => {
         />
       </FocusTarget>
     </DropTarget>
-    </React.StrictMode>
   );
 });
 

js/components/MediaLibraryWindow/index.tsx

@@ -9,14 +9,12 @@ import LibraryLayout from "./LibraryLayout";
 export default class MediaLibraryWindow extends React.Component<{}> {
   render() {
     return (
-      <React.StrictMode>
       <LibraryLayout
         sidebar={<Sidebar />}
         artists={<ArtistsTable />}
         albums={<AlbumsTable />}
         tracks={<TracksTable />}
       />
-      </React.StrictMode>
     );
   }
 }

js/components/MilkdropWindow/index.tsx

@@ -137,7 +137,6 @@ function Milkdrop(props: Props) {
   }
 
   return (
-    <React.StrictMode>
     <GenWindow
       title={"Milkdrop"}
       windowId={WINDOWS.MILKDROP}
@@ -164,7 +163,6 @@ function Milkdrop(props: Props) {
         );
       }}
     </GenWindow>
-    </React.StrictMode>
   );
 }
 

js/components/PlaylistWindow/index.tsx

@@ -111,7 +111,6 @@ class PlaylistWindow extends React.Component<Props> {
           handleDrop={this._handleDrop}
           onWheel={this.props.scrollVolume}
         >
-          <React.StrictMode>
           <div className="playlist-top draggable" onDoubleClick={toggleShade}>
             <div className="playlist-top-left draggable" />
             {showSpacers && (
@@ -128,19 +127,15 @@ class PlaylistWindow extends React.Component<Props> {
               <div id="playlist-close-button" onClick={close} />
             </div>
           </div>
-          </React.StrictMode>
           <div className="playlist-middle draggable">
-            <React.StrictMode>
             <div className="playlist-middle-left draggable" />
             <div className="playlist-middle-center">
               <TrackList />
             </div>
-            </React.StrictMode>
             <div className="playlist-middle-right draggable">
               <ScrollBar />
             </div>
           </div>
-          <React.StrictMode>
           <div className="playlist-bottom draggable">
             <div className="playlist-bottom-left draggable">
               <AddMenu />
@@ -175,7 +170,6 @@ class PlaylistWindow extends React.Component<Props> {
               <PlaylistResizeTarget />
             </div>
           </div>
-          </React.StrictMode>
         </DropTarget>
       </FocusTarget>
     );

package.json

@@ -117,7 +117,7 @@
     "puppeteer": "^1.15.0",
     "raven-for-redux": "^1.3.1",
     "raven-js": "^3.19.1",
-    "rc-slider": "^8.6.9",
+    "rc-slider": "^8.7.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6",
     "react-redux": "^7.1.0",

yarn.lock

@@ -8731,17 +8731,18 @@ rc-animate@2.x:
     css-animation "^1.3.2"
     prop-types "15.x"
 
-rc-slider@^8.6.9:
-  version "8.6.9"
-  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-8.6.9.tgz#b32148a498c927c93f20dc1f95e8682c4924bf8e"
-  integrity sha512-v5XwSARCyKGkalV7c54jwiuPNh8pGUg0i1opVD8YJVd8zQqbxepRoGmEE4xwRTxjR7Goao6/ARc7l2dGoPwZsg==
+rc-slider@^8.7.1:
+  version "8.7.1"
+  resolved "https://registry.yarnpkg.com/rc-slider/-/rc-slider-8.7.1.tgz#9ed07362dc93489a38e654b21b8122ad70fd3c42"
+  integrity sha512-WMT5mRFUEcrLWwTxsyS8jYmlaMsTVCZIGENLikHsNv+tE8ThU2lCoPfi/xFNUfJFNFSBFP3MwPez9ZsJmNp13g==
   dependencies:
     babel-runtime "6.x"
     classnames "^2.2.5"
     prop-types "^15.5.4"
     rc-tooltip "^3.7.0"
     rc-util "^4.0.4"
-    shallowequal "^1.0.1"
+    react-lifecycles-compat "^3.0.4"
+    shallowequal "^1.1.0"
     warning "^4.0.3"
 
 rc-tooltip@^3.7.0:
@@ -8808,6 +8809,11 @@ react-is@^16.8.4, react-is@^16.8.6:
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.8.6.tgz#5bbc1e2d29141c9fbdfed456343fe2bc430a6a16"
   integrity sha512-aUk3bHfZ2bRSVFFbbeVS4i+lNPZr3/WM5jT2J5omUVV1zzcs1nAaf3l51ctA5FFvCRbhrH0bdAsRRQddFJZPtA==
 
+react-lifecycles-compat@^3.0.4:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
 react-redux@^7.1.0:
   version "7.1.0"
   resolved "https://registry.yarnpkg.com/react-redux/-/react-redux-7.1.0.tgz#72af7cf490a74acdc516ea9c1dd80e25af9ea0b2"
@@ -9613,9 +9619,10 @@ shallowequal@^0.2.2:
   dependencies:
     lodash.keys "^3.1.2"
 
-shallowequal@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.0.2.tgz#1561dbdefb8c01408100319085764da3fcf83f8f"
+shallowequal@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/shallowequal/-/shallowequal-1.1.0.tgz#188d521de95b9087404fd4dcb68b13df0ae4e7f8"
+  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
 
 shebang-command@^1.2.0:
   version "1.2.0"