experiments with howl

package-lock.json

@@ -1522,7 +1522,8 @@
     "asap": {
       "version": "2.0.6",
       "resolved": "https://registry.npmjs.org/asap/-/asap-2.0.6.tgz",
-      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY="
+      "integrity": "sha1-5QNHYR1+aQlDIIu9r+vLwvuGbUY=",
+      "optional": true
     },
     "asn1": {
       "version": "0.2.4",
@@ -3371,11 +3372,6 @@
         "supports-color": "5.5.0"
       }
     },
-    "change-emitter": {
-      "version": "0.1.6",
-      "resolved": "https://registry.npmjs.org/change-emitter/-/change-emitter-0.1.6.tgz",
-      "integrity": "sha1-6LL+PX8at9aaMhma/5HqaTFAlRU="
-    },
     "chardet": {
       "version": "0.7.0",
       "resolved": "https://registry.npmjs.org/chardet/-/chardet-0.7.0.tgz",
@@ -3499,6 +3495,9 @@
         }
       }
     },
+    "classie": {
+      "version": "github:eiriklv/classie#da1d3019904433872a8656d3cd69fc41d69c477a"
+    },
     "classnames": {
       "version": "2.2.6",
       "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.2.6.tgz",
@@ -4002,16 +4001,6 @@
         "sha.js": "2.4.11"
       }
     },
-    "create-react-class": {
-      "version": "15.6.3",
-      "resolved": "https://registry.npmjs.org/create-react-class/-/create-react-class-15.6.3.tgz",
-      "integrity": "sha512-M+/3Q6E6DLO6Yx3OwrWjwHBnvfXXYA7W+dFjt/ZDBemHO1DDZhsalX/NUtnTYclN6GfnBDRh4qRHjcDHmlJBJg==",
-      "requires": {
-        "fbjs": "0.8.17",
-        "loose-envify": "1.4.0",
-        "object-assign": "4.1.1"
-      }
-    },
     "cross-spawn": {
       "version": "6.0.5",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-6.0.5.tgz",
@@ -5001,6 +4990,9 @@
         "minimalistic-assert": "1.0.1"
       }
     },
+    "desandro-get-style-property": {
+      "version": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823"
+    },
     "destroy": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/destroy/-/destroy-1.0.4.tgz",
@@ -5068,6 +5060,17 @@
         "buffer-indexof": "1.1.1"
       }
     },
+    "doc-ready": {
+      "version": "github:eiriklv/doc-ready#31c2481101af5dab33311fea4c7fc684b58fa8ad",
+      "requires": {
+        "eventie": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c"
+      },
+      "dependencies": {
+        "eventie": {
+          "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c"
+        }
+      }
+    },
     "doctrine": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-3.0.0.tgz",
@@ -5272,14 +5275,6 @@
       "integrity": "sha1-rT/0yG7C0CkyL1oCw6mmBslbP1k=",
       "dev": true
     },
-    "encoding": {
-      "version": "0.1.12",
-      "resolved": "https://registry.npmjs.org/encoding/-/encoding-0.1.12.tgz",
-      "integrity": "sha1-U4tm8+5izRq1HsMjgp0flIDHS+s=",
-      "requires": {
-        "iconv-lite": "0.4.24"
-      }
-    },
     "end-of-stream": {
       "version": "1.4.4",
       "resolved": "https://registry.npmjs.org/end-of-stream/-/end-of-stream-1.4.4.tgz",
@@ -5781,12 +5776,20 @@
       "resolved": "https://registry.npmjs.org/ev-emitter/-/ev-emitter-1.1.1.tgz",
       "integrity": "sha512-ipiDYhdQSCZ4hSbX4rMW+XzNKMD1prg/sTvoVmSLkuQ1MVlwjJQQA+sW8tMYR3BLUr9KjodFV4pvzunvRhd33Q=="
     },
+    "eventemitter": {
+      "version": "github:braznaavtrav/EventEmitter#7169056a2f8b3b55d78ab1b85bad39277e7e88b2"
+    },
     "eventemitter3": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/eventemitter3/-/eventemitter3-4.0.0.tgz",
       "integrity": "sha512-qerSRB0p+UDEssxTtm6EDKcE7W4OaoisfIMl4CngyEhjpYglocpNg6UEqCvemdGhosAsg4sO2dXJOdyBifPGCg==",
       "dev": true
     },
+    "eventie": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/eventie/-/eventie-1.0.6.tgz",
+      "integrity": "sha1-1P/IsMK15JPCqhsiy+kY067nRDc="
+    },
     "events": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/events/-/events-3.0.0.tgz",
@@ -6103,27 +6106,6 @@
         "websocket-driver": "0.7.3"
       }
     },
-    "fbjs": {
-      "version": "0.8.17",
-      "resolved": "https://registry.npmjs.org/fbjs/-/fbjs-0.8.17.tgz",
-      "integrity": "sha1-xNWY6taUkRJlPWWIsBpc3Nn5D90=",
-      "requires": {
-        "core-js": "1.2.7",
-        "isomorphic-fetch": "2.2.1",
-        "loose-envify": "1.4.0",
-        "object-assign": "4.1.1",
-        "promise": "7.3.1",
-        "setimmediate": "1.0.5",
-        "ua-parser-js": "0.7.20"
-      },
-      "dependencies": {
-        "core-js": {
-          "version": "1.2.7",
-          "resolved": "https://registry.npmjs.org/core-js/-/core-js-1.2.7.tgz",
-          "integrity": "sha1-ZSKUwUZR2yj6k70tX/KYOk8IxjY="
-        }
-      }
-    },
     "figgy-pudding": {
       "version": "3.5.1",
       "resolved": "https://registry.npmjs.org/figgy-pudding/-/figgy-pudding-3.5.1.tgz",
@@ -6980,6 +6962,12 @@
       "resolved": "https://registry.npmjs.org/get-caller-file/-/get-caller-file-1.0.3.tgz",
       "integrity": "sha512-3t6rVToeoZfYSGd8YoLFR2DJkiQrIiUrGcjvFX2mDw3bn6k2OtwHN0TNCLbBO+w8qTvimhDkv+LSscbJY1vE6w=="
     },
+    "get-size": {
+      "version": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08",
+      "requires": {
+        "desandro-get-style-property": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823"
+      }
+    },
     "get-stdin": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/get-stdin/-/get-stdin-6.0.0.tgz",
@@ -7343,6 +7331,11 @@
       "resolved": "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.5.tgz",
       "integrity": "sha512-kssjab8CvdXfcXMXVcvsXum4Hwdq9XGtRD3TteMEvEbq0LXyiNQr6AprqKqfeaDXze7SxWvRxdpwE6ku7ikLkg=="
     },
+    "howler": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/howler/-/howler-2.1.2.tgz",
+      "integrity": "sha512-oKrTFaVXsDRoB/jik7cEpWKTj7VieoiuzMYJ7E/EU5ayvmpRhumCv3YQ3823zi9VTJkSWAhbryHnlZAionGAJg=="
+    },
     "hpack.js": {
       "version": "2.1.6",
       "resolved": "https://registry.npmjs.org/hpack.js/-/hpack.js-2.1.6.tgz",
@@ -7622,6 +7615,13 @@
       "integrity": "sha1-Cd/Uq50g4p6xw+gLiZA3jfnjy5w=",
       "optional": true
     },
+    "imagesloaded": {
+      "version": "github:eiriklv/imagesloaded#04535a148206e58790927e133f24ca199163b995",
+      "requires": {
+        "eventie": "1.0.6",
+        "wolfy87-eventemitter": "4.3.0"
+      }
+    },
     "immutable": {
       "version": "3.8.2",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-3.8.2.tgz",
@@ -8125,7 +8125,8 @@
     "is-stream": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-1.1.0.tgz",
-      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ="
+      "integrity": "sha1-EtSj3U5o4Lec6428hBc66A2RykQ=",
+      "dev": true
     },
     "is-svg": {
       "version": "2.1.0",
@@ -8188,15 +8189,6 @@
       "resolved": "https://registry.npmjs.org/isobject/-/isobject-3.0.1.tgz",
       "integrity": "sha1-TkMekrEalzFjaqH5yNHMvP2reN8="
     },
-    "isomorphic-fetch": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/isomorphic-fetch/-/isomorphic-fetch-2.2.1.tgz",
-      "integrity": "sha1-YRrhrPFPXoH3KVB0coGf6XM1WKk=",
-      "requires": {
-        "node-fetch": "1.7.3",
-        "whatwg-fetch": "3.0.0"
-      }
-    },
     "isstream": {
       "version": "0.1.2",
       "resolved": "https://registry.npmjs.org/isstream/-/isstream-0.1.2.tgz",
@@ -8629,11 +8621,6 @@
       "integrity": "sha1-vMbEmkKihA7Zl/Mj6tpezRguC/4=",
       "dev": true
     },
-    "lodash.merge": {
-      "version": "4.6.2",
-      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
-      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ=="
-    },
     "lodash.unescape": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/lodash.unescape/-/lodash.unescape-4.0.1.tgz",
@@ -8760,6 +8747,9 @@
         "object-visit": "1.0.1"
       }
     },
+    "matches-selector": {
+      "version": "github:desandro/matches-selector#082376f4bbe7ff8c5c6bb258ec43259c9a80a7c3"
+    },
     "math-expression-evaluator": {
       "version": "1.2.17",
       "resolved": "https://registry.npmjs.org/math-expression-evaluator/-/math-expression-evaluator-1.2.17.tgz",
@@ -9177,15 +9167,6 @@
         "lower-case": "1.1.4"
       }
     },
-    "node-fetch": {
-      "version": "1.7.3",
-      "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-1.7.3.tgz",
-      "integrity": "sha512-NhZ4CsKx7cYm2vSrBAr2PvFOe6sWDf0UYLRqA6svUYg7+/TSfVAu49jYC4BvQ4Sms9SZgdqGBgroqfDhJdTyKQ==",
-      "requires": {
-        "encoding": "0.1.12",
-        "is-stream": "1.1.0"
-      }
-    },
     "node-forge": {
       "version": "0.9.0",
       "resolved": "https://registry.npmjs.org/node-forge/-/node-forge-0.9.0.tgz",
@@ -9729,6 +9710,22 @@
         "os-tmpdir": "1.0.2"
       }
     },
+    "outlayer": {
+      "version": "github:eiriklv/outlayer#aea1c8239d30ccc1d3664ca3fff2f6d4b20fb812",
+      "requires": {
+        "desandro-get-style-property": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823",
+        "doc-ready": "github:eiriklv/doc-ready#31c2481101af5dab33311fea4c7fc684b58fa8ad",
+        "eventemitter": "github:braznaavtrav/EventEmitter#7169056a2f8b3b55d78ab1b85bad39277e7e88b2",
+        "eventie": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c",
+        "get-size": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08",
+        "matches-selector": "github:desandro/matches-selector#082376f4bbe7ff8c5c6bb258ec43259c9a80a7c3"
+      },
+      "dependencies": {
+        "eventie": {
+          "version": "github:eiriklv/eventie#c9d290c6aa57712257dc8c0b6bf21c9374190a3c"
+        }
+      }
+    },
     "output-file-sync": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/output-file-sync/-/output-file-sync-2.0.1.tgz",
@@ -9794,6 +9791,15 @@
       "resolved": "https://registry.npmjs.org/p-try/-/p-try-1.0.0.tgz",
       "integrity": "sha1-y8ec26+P1CKOE/Yh8rGiN8GyB7M="
     },
+    "packery": {
+      "version": "github:eiriklv/packery#8e812a0a16575ef923f5e72efcea85aadc6fea67",
+      "requires": {
+        "classie": "github:eiriklv/classie#da1d3019904433872a8656d3cd69fc41d69c477a",
+        "desandro-get-style-property": "github:eiriklv/get-style-property#a5a74ad48d96c7d5ddcf652e9fa5d4283af37823",
+        "get-size": "github:eiriklv/get-size#c1ebd019815fc6247c094c17a41b61d0e8191b08",
+        "outlayer": "github:eiriklv/outlayer#aea1c8239d30ccc1d3664ca3fff2f6d4b20fb812"
+      }
+    },
     "pako": {
       "version": "1.0.10",
       "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.10.tgz",
@@ -10816,6 +10822,7 @@
       "version": "7.3.1",
       "resolved": "https://registry.npmjs.org/promise/-/promise-7.3.1.tgz",
       "integrity": "sha512-nolQXZ/4L+bP/UGlkfaIujX9BKxGwmQ9OT4mOt5yvy8iK1h3wqTEJCijzGANTCCl9nWjY41juyAn2K3Q1hLLTg==",
+      "optional": true,
       "requires": {
         "asap": "2.0.6"
       }
@@ -11119,79 +11126,6 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.10.2.tgz",
       "integrity": "sha512-INBT1QEgtcCCgvccr5/86CfD71fw9EPmDxgiJX4I2Ddr6ZsV6iFXsuby+qWJPtmNuMY0zByTsG4468P7nHuNWA=="
     },
-    "react-jplayer": {
-      "version": "7.2.0",
-      "resolved": "https://registry.npmjs.org/react-jplayer/-/react-jplayer-7.2.0.tgz",
-      "integrity": "sha512-ic8+2wU75C1ZFgjWFI8Jo1NZHoQo5IlAcUyOiqK2UXix3JIyFjv99pIycJNZfoslzNoReuL0PcBYW508Fz31ng==",
-      "requires": {
-        "classnames": "2.2.6",
-        "lodash.merge": "4.6.2",
-        "prop-types": "15.7.2",
-        "react": "15.6.2",
-        "react-jplayer-utils": "3.1.5",
-        "react-motion": "0.5.2",
-        "recompose": "0.24.0",
-        "screenfull": "3.3.3"
-      },
-      "dependencies": {
-        "react": {
-          "version": "15.6.2",
-          "resolved": "https://registry.npmjs.org/react/-/react-15.6.2.tgz",
-          "integrity": "sha1-26BDSrQ5z+gvEI8PURZjkIF5qnI=",
-          "requires": {
-            "create-react-class": "15.6.3",
-            "fbjs": "0.8.17",
-            "loose-envify": "1.4.0",
-            "object-assign": "4.1.1",
-            "prop-types": "15.7.2"
-          }
-        }
-      }
-    },
-    "react-jplayer-utils": {
-      "version": "3.1.5",
-      "resolved": "https://registry.npmjs.org/react-jplayer-utils/-/react-jplayer-utils-3.1.5.tgz",
-      "integrity": "sha1-L2PI7lW383x+/AkkHS42ZR5Bmnk=",
-      "requires": {
-        "prop-types": "15.7.2",
-        "react-redux": "5.1.2",
-        "recompose": "0.25.1"
-      },
-      "dependencies": {
-        "react-redux": {
-          "version": "5.1.2",
-          "resolved": "https://registry.npmjs.org/react-redux/-/react-redux-5.1.2.tgz",
-          "integrity": "sha512-Ns1G0XXc8hDyH/OcBHOxNgQx9ayH3SPxBnFCOidGKSle8pKihysQw2rG/PmciUQRoclhVBO8HMhiRmGXnDja9Q==",
-          "requires": {
-            "@babel/runtime": "7.6.3",
-            "hoist-non-react-statics": "3.3.0",
-            "invariant": "2.2.4",
-            "loose-envify": "1.4.0",
-            "prop-types": "15.7.2",
-            "react-is": "16.10.2",
-            "react-lifecycles-compat": "3.0.4"
-          }
-        },
-        "recompose": {
-          "version": "0.25.1",
-          "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.25.1.tgz",
-          "integrity": "sha512-EwFAv6UBrHbLIsIKHUZJ+BKdjTmyEsIrRlGO3R7PKu0S7hkgNznVDRvb+1upQUntURtBvxhYnTVQ3AcWOlsmWA==",
-          "requires": {
-            "change-emitter": "0.1.6",
-            "fbjs": "0.8.17",
-            "hoist-non-react-statics": "2.5.5",
-            "symbol-observable": "1.2.0"
-          },
-          "dependencies": {
-            "hoist-non-react-statics": {
-              "version": "2.5.5",
-              "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-2.5.5.tgz",
-              "integrity": "sha512-rqcy4pJo55FTTLWt+bU8ukscqHeE/e9KWvsOW2b/a3afxQZhwkQdT1rPPCJ0rYXdj4vNcasY8zHTH+jF/qStxw=="
-            }
-          }
-        }
-      }
-    },
     "react-layout-pack": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/react-layout-pack/-/react-layout-pack-0.2.3.tgz",
@@ -11225,7 +11159,11 @@
     "react-packery-component": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/react-packery-component/-/react-packery-component-1.0.2.tgz",
-      "integrity": "sha1-FSEiHaSRZ8s87fR9W1UsM0iBgKk="
+      "integrity": "sha1-FSEiHaSRZ8s87fR9W1UsM0iBgKk=",
+      "requires": {
+        "imagesloaded": "github:eiriklv/imagesloaded#04535a148206e58790927e133f24ca199163b995",
+        "packery": "github:eiriklv/packery#8e812a0a16575ef923f5e72efcea85aadc6fea67"
+      }
     },
     "react-redux": {
       "version": "6.0.1",
@@ -11421,24 +11359,6 @@
         "readable-stream": "2.3.6"
       }
     },
-    "recompose": {
-      "version": "0.24.0",
-      "resolved": "https://registry.npmjs.org/recompose/-/recompose-0.24.0.tgz",
-      "integrity": "sha512-7+UVym5Mfks/ukIDfcAiasrY61YGki8uIs4CmLTGU7UV2lm2ObbhOl913WrlsZKu8x8uA/sLJUOI5hxVga0dIA==",
-      "requires": {
-        "change-emitter": "0.1.6",
-        "fbjs": "0.8.17",
-        "hoist-non-react-statics": "1.2.0",
-        "symbol-observable": "1.2.0"
-      },
-      "dependencies": {
-        "hoist-non-react-statics": {
-          "version": "1.2.0",
-          "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz",
-          "integrity": "sha1-qkSM8JhtVcxAdzsXF0t90GbLfPs="
-        }
-      }
-    },
     "redent": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/redent/-/redent-1.0.0.tgz",
@@ -12068,11 +11988,6 @@
         "ajv-keywords": "3.4.1"
       }
     },
-    "screenfull": {
-      "version": "3.3.3",
-      "resolved": "https://registry.npmjs.org/screenfull/-/screenfull-3.3.3.tgz",
-      "integrity": "sha512-DzYUuXr+OV2BDvYXaYzlYgJd4WXZZ2CW5NFC7Kw6TUCpzXJAx4MwlVD6CH+Mu6fi8rfAQIQfqdFZ4jtDsEkWig=="
-    },
     "scrypt": {
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/scrypt/-/scrypt-6.0.3.tgz",
@@ -13692,11 +13607,6 @@
         "typescript-compare": "0.0.2"
       }
     },
-    "ua-parser-js": {
-      "version": "0.7.20",
-      "resolved": "https://registry.npmjs.org/ua-parser-js/-/ua-parser-js-0.7.20.tgz",
-      "integrity": "sha512-8OaIKfzL5cpx8eCMAhhvTlft8GYF8b2eQr6JkCyVdrgjcytyOmPCXrqXFcUnhonRpLlh5yxEZVohm6mzaowUOw=="
-    },
     "uglify-js": {
       "version": "3.4.10",
       "resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
@@ -14731,11 +14641,6 @@
       "integrity": "sha512-nqHUnMXmBzT0w570r2JpJxfiSD1IzoI+HGVdd3aZ0yNi3ngvQ4jv1dtHt5VGxfI2yj5yqImPhOK4vmIh2xMbGg==",
       "dev": true
     },
-    "whatwg-fetch": {
-      "version": "3.0.0",
-      "resolved": "https://registry.npmjs.org/whatwg-fetch/-/whatwg-fetch-3.0.0.tgz",
-      "integrity": "sha512-9GSJUgz1D4MfyKU7KRqwOjXCXTqWdFNvEr7eUBYchQiVc744mqK/MzXPNR2WsPkmkOa4ywfg8C2n8h+13Bey1Q=="
-    },
     "whet.extend": {
       "version": "0.9.9",
       "resolved": "https://registry.npmjs.org/whet.extend/-/whet.extend-0.9.9.tgz",
@@ -14763,6 +14668,11 @@
         "string-width": "2.1.1"
       }
     },
+    "wolfy87-eventemitter": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/wolfy87-eventemitter/-/wolfy87-eventemitter-4.3.0.tgz",
+      "integrity": "sha1-ZJc5bJXnQ1nwa241QJM5MY2Nlk8="
+    },
     "wordwrap": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/wordwrap/-/wordwrap-1.0.0.tgz",

package.json

@@ -78,6 +78,7 @@
     "eslint-plugin-react-hooks": "^1.7.0",
     "flexbin": "^0.2.0",
     "history": "^4.10.1",
+    "howler": "^2.1.2",
     "http-errors": "~1.6.2",
     "less": "^3.10.3",
     "less-middleware": "~2.2.1",

src/components/main/Header/index.tsx

@@ -1,8 +1,9 @@
-import React, { FC, useCallback } from 'react';
+import React, { FC, useCallback, useEffect } from 'react';
 import { connect } from 'react-redux';
 import { push as historyPush } from 'connected-react-router';
 import { Link } from 'react-router-dom';
 import { Logo } from '~/components/main/Logo';
+import { Player } from '~/utils/player';
 
 import * as style from './style.scss';
 import { Filler } from '~/components/containers/Filler';
@@ -24,6 +25,10 @@ const HeaderUnconnected: FC<IProps> = ({ username, is_user, showDialog }) => {
   const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]);
   const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]);
 
+  useEffect(() => {
+    console.log({ Player });
+  }, []);
+
   return (
     <div className={style.container}>
       <Logo />

src/utils/player.ts

@@ -0,0 +1,11 @@
+import { Howl } from 'howler';
+
+Howl.prototype.setSrc = function setSrc(src) {
+  this.unload();
+  this._src = src;
+  this.load();
+};
+
+export const Player = new Howl({ src: [''] });
+
+console.log('PLAYER', Player);