From f89a04e644cf9e491f8fae2f9751639b7ec609df Mon Sep 17 00:00:00 2001 From: Fedor Katurov Date: Fri, 11 Oct 2019 12:04:14 +0700 Subject: [PATCH] experiments with howl --- package-lock.json | 262 +++++++++------------------ package.json | 1 + src/components/main/Header/index.tsx | 7 +- src/utils/player.ts | 11 ++ 4 files changed, 104 insertions(+), 177 deletions(-) create mode 100644 src/utils/player.ts diff --git a/package-lock.json b/package-lock.json index 53821a87..1debfa58 100644 --- a/package-lock.json +++ b/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", diff --git a/package.json b/package.json index 76600f7f..d31bef63 100644 --- a/package.json +++ b/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", diff --git a/src/components/main/Header/index.tsx b/src/components/main/Header/index.tsx index 9a27c582..496bff7a 100644 --- a/src/components/main/Header/index.tsx +++ b/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 = ({ username, is_user, showDialog }) => { const onLogin = useCallback(() => showDialog(DIALOGS.LOGIN), [showDialog]); const onOpenEditor = useCallback(() => showDialog(DIALOGS.EDITOR), [showDialog]); + useEffect(() => { + console.log({ Player }); + }, []); + return (
diff --git a/src/utils/player.ts b/src/utils/player.ts new file mode 100644 index 00000000..6371b575 --- /dev/null +++ b/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);