refactor(ui/player): fix errors after merge

frontend/app/components/Session_/Player/Controls/Controls.tsx

@@ -95,19 +95,19 @@ function Controls(props: any) {
     skipInterval,
     disabledRedux,
     showStorageRedux,
-    showStackRedux,
+    // showStackRedux,
   } = props;
 
   const storageType = selectStorageType(store.get());
   const disabled = disabledRedux || cssLoading || messagesLoading || inspectorMode || markedTargets;
-  const stackCount = stackList.length;
   const profilesCount = profilesList.length;
   const graphqlCount = graphqlList.length;
   const showGraphql = graphqlCount > 0;
-  const fetchCount = fetchList.length;
   const showProfiler = profilesCount > 0;
   const showExceptions = exceptionsList.length > 0;
   const showStorage = storageType !== STORAGE_TYPES.NONE || showStorageRedux;
+  // const fetchCount = fetchList.length;
+  // const stackCount = stackList.length;
   // const showStack =  stackCount > 0 || showStackRedux UPDATE
   // const showFetch = fetchCount > 0 UPDATE
 
@@ -130,17 +130,17 @@ function Controls(props: any) {
       backTenSeconds();
     }
     if (e.key === 'ArrowDown') {
-      props.speedDown();
+      player.speedDown();
     }
     if (e.key === 'ArrowUp') {
-      props.speedUp();
+      player.speedUp();
     }
   };
 
   React.useEffect(() => {
-    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('keydown', onKeyDown.bind(this));
     return () => {
-      document.removeEventListener('keydown', onKeyDown);
+      document.removeEventListener('keydown', onKeyDown.bind(this));
     };
   }, []);
 
@@ -204,10 +204,10 @@ function Controls(props: any) {
 
   const toggleBottomTools = (blockName: number) => {
     if (blockName === INSPECTOR) {
-      toggleInspectorMode(false);
+      player.toggleInspectorMode(false);
       bottomBlock && toggleBottomBlock();
     } else {
-      toggleInspectorMode(false);
+      player.toggleInspectorMode(false);
       toggleBottomBlock(blockName);
     }
   };

frontend/app/components/Session_/Player/Controls/components/PlayerControls.tsx

@@ -94,11 +94,15 @@ function PlayerControls(props: Props) {
 
       <div className="rounded ml-4 bg-active-blue border border-active-blue-border flex items-stretch">
         {/* @ts-ignore */}
-        <button
-          ref={arrowBackRef}
-          className="h-full hover:border-active-blue-border focus:border focus:border-blue border-borderColor-transparent"
+        <Tooltip
+          anchorClassName="h-full hover:border-active-blue-border hover:bg-active-blue-border focus:border focus:border-blue border-borderColor-transparent"
+          title={`Rewind ${currentInterval}s`}
+          placement="top"
         >
-          <Tooltip anchorClassName="h-full" title={`Rewind ${currentInterval}s`} placement="top">
+          <button
+            ref={arrowBackRef}
+            className="h-full  bg-transparent"
+          >
             {controlIcon(
               'skip-forward-fill',
               18,
@@ -106,8 +110,8 @@ function PlayerControls(props: Props) {
               true,
               'hover:bg-active-blue-border color-main h-full flex items-center'
             )}
-          </Tooltip>
-        </button>
+          </button>
+        </Tooltip>
 
         <div className="p-1 border-l border-r bg-active-blue-border border-active-blue-border flex items-center">
           <Popover
@@ -144,19 +148,23 @@ function PlayerControls(props: Props) {
             )}
           >
             <div onClick={toggleTooltip} ref={skipRef} className="cursor-pointer select-none">
-              {/* @ts-ignore */}
               <Tooltip disabled={showTooltip} title="Set default skip duration">
+                {/* @ts-ignore */}
                 {currentInterval}s
               </Tooltip>
             </div>
           </Popover>
         </div>
 
-        <button
-          ref={arrowForwardRef}
-          className="h-full hover:border-active-blue-border focus:border focus:border-blue  border-borderColor-transparent"
+        <Tooltip
+          anchorClassName="h-full hover:border-active-blue-border hover:bg-active-blue-border focus:border focus:border-blue  border-borderColor-transparent"
+          title={`Rewind ${currentInterval}s`}
+          placement="top"
         >
-          <Tooltip anchorClassName="h-full" title={`Rewind ${currentInterval}s`} placement="top">
+          <button
+            ref={arrowForwardRef}
+            className="h-full bg-transparent"
+          >
             {controlIcon(
               'skip-forward-fill',
               18,
@@ -164,8 +172,8 @@ function PlayerControls(props: Props) {
               false,
               'hover:bg-active-blue-border color-main h-full flex items-center'
             )}
-          </Tooltip>
-        </button>
+          </button>
+        </Tooltip>
       </div>
 
       {!live && (

frontend/package.json

@@ -98,7 +98,6 @@
     "babel-loader": "^8.2.4",
     "babel-plugin-recharts": "^1.2.1",
     "babel-plugin-transform-decorators-legacy": "^1.3.5",
-    "circular-dependency-plugin": "^5.2.0",
     "compression-webpack-plugin": "^10.0.0",
     "copy-webpack-plugin": "^11.0.0",
     "country-data": "0.0.31",

frontend/webpack.config.ts

@@ -123,7 +123,7 @@ const config: Configuration = {
         { from: "./app/assets", to: "assets" },
       ],
     }),
-    new MiniCssExtractPlugin(),
+    new MiniCssExtractPlugin({ ignoreOrder: true }),
   ],
   devtool: isDevelopment ? "inline-source-map" : false,
   performance: {