From 9d497edfcf3f45a454b328763a9da520f62e20f2 Mon Sep 17 00:00:00 2001 From: Lei Nelissen Date: Mon, 6 Jul 2020 17:43:49 +0200 Subject: [PATCH] Refactor ProgressBar to React Native Slider --- ios/Podfile.lock | 22 +- package-lock.json | 521 +++++++++++++++--- package.json | 31 +- src/screens/Player/components/ProgressBar.tsx | 107 +--- 4 files changed, 493 insertions(+), 188 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index b93cf5a..3b178f1 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -242,11 +242,13 @@ PODS: - React-cxxreact (= 0.62.2) - React-jsi (= 0.62.2) - React-jsinspector (0.62.2) - - react-native-safe-area-context (3.0.5): + - react-native-safe-area-context (3.0.7): + - React + - react-native-slider (3.0.0): - React - react-native-track-player (1.2.3): - React - - react-native-webview (10.3.1): + - react-native-webview (10.3.2): - React - React-RCTActionSheet (0.62.2): - React-Core/RCTActionSheetHeaders (= 0.62.2) @@ -311,7 +313,7 @@ PODS: - React - RNCMaskedView (0.1.10): - React - - RNCPicker (1.6.3): + - RNCPicker (1.6.5): - React - RNFastImage (8.1.5): - React @@ -321,7 +323,7 @@ PODS: - React - RNReanimated (1.9.0): - React - - RNScreens (2.8.0): + - RNScreens (2.9.0): - React - RNSVG (12.1.0): - React @@ -374,6 +376,7 @@ DEPENDENCIES: - React-jsiexecutor (from `../node_modules/react-native/ReactCommon/jsiexecutor`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) + - "react-native-slider (from `../node_modules/@react-native-community/slider`)" - react-native-track-player (from `../node_modules/react-native-track-player`) - react-native-webview (from `../node_modules/react-native-webview`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`) @@ -447,6 +450,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/jsinspector" react-native-safe-area-context: :path: "../node_modules/react-native-safe-area-context" + react-native-slider: + :path: "../node_modules/@react-native-community/slider" react-native-track-player: :path: "../node_modules/react-native-track-player" react-native-webview: @@ -519,9 +524,10 @@ SPEC CHECKSUMS: React-jsi: b6dc94a6a12ff98e8877287a0b7620d365201161 React-jsiexecutor: 1540d1c01bb493ae3124ed83351b1b6a155db7da React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493 - react-native-safe-area-context: e768fca90207ee68924b3d0877633f2ce9cc9d68 + react-native-safe-area-context: c39fc20a20cd66ebf1d56c6f8b8711142fbfee98 + react-native-slider: 05f11678260cb27c3d00a2dd1558b623be3ec8d2 react-native-track-player: ba2416753b58f3cdf9db5a07daa65876d659f925 - react-native-webview: 40bbeb6d011226f34cb83f845aeb0fdf515cfc5f + react-native-webview: e2c0bce9a1a7c7edd4eb30f0c3016fce216245ce React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0 React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71 @@ -534,11 +540,11 @@ SPEC CHECKSUMS: ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3 RNCAsyncStorage: d059c3ee71738c39834a627476322a5a8cd5bf36 RNCMaskedView: 5a8ec07677aa885546a0d98da336457e2bea557f - RNCPicker: 1c63b084bcbcd33d159a83144543f3bda4cd1793 + RNCPicker: 55b9b4240d0a9eba8733d02616775d4040de2e7d RNFastImage: 35ae972d6727c84ee3f5c6897e07f84d0a3445e9 RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38 RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43 - RNScreens: 62211832af51e0aebcf6e8c36bcf7dd65592f244 + RNScreens: c526239bbe0e957b988dacc8d75ac94ec9cb19da RNSVG: ce9d996113475209013317e48b05c21ee988d42e RNTableView: e8723c30aec3b259222a12e7d05d763566286a46 SDWebImage: e3eae2eda88578db0685a0c88597fdadd9433f05 diff --git a/package-lock.json b/package-lock.json index 7d11264..669e74b 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,18 +13,18 @@ } }, "@babel/core": { - "version": "7.10.2", - "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.2.tgz", - "integrity": "sha512-KQmV9yguEjQsXqyOUGKjS4+3K8/DlOCE2pZcq4augdQmtTy5iv5EHtmMSJ7V4c1BIPjuwtZYqYLCq9Ga+hGBRQ==", + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.10.4.tgz", + "integrity": "sha512-3A0tS0HWpy4XujGc7QtOIHTeNwUgWaZc/WuS5YQrfhU67jnVmsD6OGPc1AKHH0LJHQICGncy3+YUjIhVlfDdcA==", "requires": { - "@babel/code-frame": "^7.10.1", - "@babel/generator": "^7.10.2", - "@babel/helper-module-transforms": "^7.10.1", - "@babel/helpers": "^7.10.1", - "@babel/parser": "^7.10.2", - "@babel/template": "^7.10.1", - "@babel/traverse": "^7.10.1", - "@babel/types": "^7.10.2", + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.10.4", + "@babel/helper-module-transforms": "^7.10.4", + "@babel/helpers": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4", "convert-source-map": "^1.7.0", "debug": "^4.1.0", "gensync": "^1.0.0-beta.1", @@ -35,6 +35,196 @@ "source-map": "^0.5.0" }, "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/generator": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.4.tgz", + "integrity": "sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng==", + "requires": { + "@babel/types": "^7.10.4", + "jsesc": "^2.5.1", + "lodash": "^4.17.13", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz", + "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==", + "requires": { + "@babel/helper-get-function-arity": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz", + "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==", + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-member-expression-to-functions": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-member-expression-to-functions/-/helper-member-expression-to-functions-7.10.4.tgz", + "integrity": "sha512-m5j85pK/KZhuSdM/8cHUABQTAslV47OjfIB9Cc7P+PvlAoBzdb79BGNfw8RhT5Mq3p+xGd0ZfAKixbrUZx0C7A==", + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-module-imports": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.10.4.tgz", + "integrity": "sha512-nEQJHqYavI217oD9+s5MUBzk6x1IlvoS9WTPfgG43CbMEeStE0v+r+TucWdx8KFGowPGvyOkDT9+7DHedIDnVw==", + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-module-transforms": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-module-transforms/-/helper-module-transforms-7.10.4.tgz", + "integrity": "sha512-Er2FQX0oa3nV7eM1o0tNCTx7izmQtwAQsIiaLRWtavAAEcskb0XJ5OjJbVrYXWOTr8om921Scabn4/tzlx7j1Q==", + "requires": { + "@babel/helper-module-imports": "^7.10.4", + "@babel/helper-replace-supers": "^7.10.4", + "@babel/helper-simple-access": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4", + "lodash": "^4.17.13" + } + }, + "@babel/helper-optimise-call-expression": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-optimise-call-expression/-/helper-optimise-call-expression-7.10.4.tgz", + "integrity": "sha512-n3UGKY4VXwXThEiKrgRAoVPBMqeoPgHVqiHZOanAJCG9nQUL2pLRQirUzl0ioKclHGpGqRgIOkgcIJaIWLpygg==", + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-replace-supers": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-replace-supers/-/helper-replace-supers-7.10.4.tgz", + "integrity": "sha512-sPxZfFXocEymYTdVK1UNmFPBN+Hv5mJkLPsYWwGBxZAxaWfFu+xqp7b6qWD0yjNuNL2VKc6L5M18tOXUP7NU0A==", + "requires": { + "@babel/helper-member-expression-to-functions": "^7.10.4", + "@babel/helper-optimise-call-expression": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-simple-access": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-simple-access/-/helper-simple-access-7.10.4.tgz", + "integrity": "sha512-0fMy72ej/VEvF8ULmX6yb5MtHG4uH4Dbd6I/aHDb/JVg0bbivwt9Wg+h3uMvX+QSFtwr5MeItvazbrc4jtRAXw==", + "requires": { + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz", + "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==", + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==" + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz", + "integrity": "sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA==" + }, + "@babel/template": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz", + "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==", + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/traverse": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.4.tgz", + "integrity": "sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q==", + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.10.4", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.13" + } + }, + "@babel/types": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz", + "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==", + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, "debug": { "version": "4.1.1", "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", @@ -43,10 +233,23 @@ "ms": "^2.1.1" } }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + }, "semver": { "version": "5.7.1", "resolved": "https://registry.npmjs.org/semver/-/semver-5.7.1.tgz", "integrity": "sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } } } }, @@ -265,13 +468,168 @@ } }, "@babel/helpers": { - "version": "7.10.1", - "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.1.tgz", - "integrity": "sha512-muQNHF+IdU6wGgkaJyhhEmI54MOZBKsFfsXFhboz1ybwJ1Kl7IHlbm2a++4jwrmY5UYsgitt5lfqo1wMFcHmyw==", + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helpers/-/helpers-7.10.4.tgz", + "integrity": "sha512-L2gX/XeUONeEbI78dXSrJzGdz4GQ+ZTA/aazfUsFaWjSe95kiCuOZ5HsXvkiw3iwF+mFHSRUfJU8t6YavocdXA==", "requires": { - "@babel/template": "^7.10.1", - "@babel/traverse": "^7.10.1", - "@babel/types": "^7.10.1" + "@babel/template": "^7.10.4", + "@babel/traverse": "^7.10.4", + "@babel/types": "^7.10.4" + }, + "dependencies": { + "@babel/code-frame": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.10.4.tgz", + "integrity": "sha512-vG6SvB6oYEhvgisZNFRmRCUkLz11c7rp+tbNTynGqc6mS1d5ATd/sGyV6W0KZZnXRKMTzZDRgQT3Ou9jhpAfUg==", + "requires": { + "@babel/highlight": "^7.10.4" + } + }, + "@babel/generator": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.10.4.tgz", + "integrity": "sha512-toLIHUIAgcQygFZRAQcsLQV3CBuX6yOIru1kJk/qqqvcRmZrYe6WavZTSG+bB8MxhnL9YPf+pKQfuiP161q7ng==", + "requires": { + "@babel/types": "^7.10.4", + "jsesc": "^2.5.1", + "lodash": "^4.17.13", + "source-map": "^0.5.0" + } + }, + "@babel/helper-function-name": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-function-name/-/helper-function-name-7.10.4.tgz", + "integrity": "sha512-YdaSyz1n8gY44EmN7x44zBn9zQ1Ry2Y+3GTA+3vH6Mizke1Vw0aWDM66FOYEPw8//qKkmqOckrGgTYa+6sceqQ==", + "requires": { + "@babel/helper-get-function-arity": "^7.10.4", + "@babel/template": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-get-function-arity": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-get-function-arity/-/helper-get-function-arity-7.10.4.tgz", + "integrity": "sha512-EkN3YDB+SRDgiIUnNgcmiD361ti+AVbL3f3Henf6dqqUyr5dMsorno0lJWJuLhDhkI5sYEpgj6y9kB8AOU1I2A==", + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-split-export-declaration": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.10.4.tgz", + "integrity": "sha512-pySBTeoUff56fL5CBU2hWm9TesA4r/rOkI9DyJLvvgz09MB9YtfIYe3iBriVaYNaPe+Alua0vBIOVOLs2buWhg==", + "requires": { + "@babel/types": "^7.10.4" + } + }, + "@babel/helper-validator-identifier": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.10.4.tgz", + "integrity": "sha512-3U9y+43hz7ZM+rzG24Qe2mufW5KhvFg/NhnNph+i9mgCtdTCtMJuI1TMkrIUiK7Ix4PYlRF9I5dhqaLYA/ADXw==" + }, + "@babel/highlight": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/highlight/-/highlight-7.10.4.tgz", + "integrity": "sha512-i6rgnR/YgPEQzZZnbTHHuZdlE8qyoBNalD6F+q4vAFlcMEcqmkoG+mPqJYJCo63qPf74+Y1UZsl3l6f7/RIkmA==", + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "chalk": "^2.0.0", + "js-tokens": "^4.0.0" + } + }, + "@babel/parser": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.10.4.tgz", + "integrity": "sha512-8jHII4hf+YVDsskTF6WuMB3X4Eh+PsUkC2ljq22so5rHvH+T8BzyL94VOdyFLNR8tBSVXOTbNHOKpR4TfRxVtA==" + }, + "@babel/template": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.10.4.tgz", + "integrity": "sha512-ZCjD27cGJFUB6nmCB1Enki3r+L5kJveX9pq1SvAUKoICy6CZ9yD8xO086YXdYhvNjBdnekm4ZnaP5yC8Cs/1tA==", + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4" + } + }, + "@babel/traverse": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.10.4.tgz", + "integrity": "sha512-aSy7p5THgSYm4YyxNGz6jZpXf+Ok40QF3aA2LyIONkDHpAcJzDUqlCKXv6peqYUs2gmic849C/t2HKw2a2K20Q==", + "requires": { + "@babel/code-frame": "^7.10.4", + "@babel/generator": "^7.10.4", + "@babel/helper-function-name": "^7.10.4", + "@babel/helper-split-export-declaration": "^7.10.4", + "@babel/parser": "^7.10.4", + "@babel/types": "^7.10.4", + "debug": "^4.1.0", + "globals": "^11.1.0", + "lodash": "^4.17.13" + } + }, + "@babel/types": { + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.10.4.tgz", + "integrity": "sha512-UTCFOxC3FsFHb7lkRMVvgLzaRVamXuAs2Tz4wajva4WxtVY82eZeaUBtC2Zt95FU9TiznuC0Zk35tsim8jeVpg==", + "requires": { + "@babel/helper-validator-identifier": "^7.10.4", + "lodash": "^4.17.13", + "to-fast-properties": "^2.0.0" + } + }, + "ansi-styles": { + "version": "3.2.1", + "resolved": "https://registry.npmjs.org/ansi-styles/-/ansi-styles-3.2.1.tgz", + "integrity": "sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==", + "requires": { + "color-convert": "^1.9.0" + } + }, + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "color-convert": { + "version": "1.9.3", + "resolved": "https://registry.npmjs.org/color-convert/-/color-convert-1.9.3.tgz", + "integrity": "sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==", + "requires": { + "color-name": "1.1.3" + } + }, + "color-name": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/color-name/-/color-name-1.1.3.tgz", + "integrity": "sha1-p9BVi9icQveV3UIyj3QIMcpTvCU=" + }, + "debug": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/debug/-/debug-4.1.1.tgz", + "integrity": "sha512-pYAIzeRo8J6KPEaJ0VWOh5Pzkbw/RetuzehGM7QRRX5he4fPHx2rdKMB256ehJCkX+XRQm16eZLqLNS8RSZXZw==", + "requires": { + "ms": "^2.1.1" + } + }, + "has-flag": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/has-flag/-/has-flag-3.0.0.tgz", + "integrity": "sha1-tdRU3CGZriJWmfNGfloH87lVuv0=" + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "requires": { + "has-flag": "^3.0.0" + } + } } }, "@babel/highlight": { @@ -760,9 +1118,9 @@ } }, "@babel/runtime": { - "version": "7.10.2", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.2.tgz", - "integrity": "sha512-6sF3uQw2ivImfVIl62RZ7MXhO2tap69WeWK57vAaimT6AZbE4FbqjdEJIN1UqoD6wI6B+1n9UiagafH1sxjOtg==", + "version": "7.10.4", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.10.4.tgz", + "integrity": "sha512-UpTN5yUJr9b4EX2CnGNWIvER7Ab83ibv0pcvvHc4UOdrBI5jb8bj+32cCwPX6xu0mt2daFNjYhoi+X7beH0RSw==", "requires": { "regenerator-runtime": "^0.13.4" } @@ -864,24 +1222,24 @@ "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==" }, "@fortawesome/fontawesome-common-types": { - "version": "0.2.28", - "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.28/fontawesome-common-types-0.2.28.tgz", - "integrity": "sha512-gtis2/5yLdfI6n0ia0jH7NJs5i/Z/8M/ZbQL6jXQhCthEOe5Cr5NcQPhgTvFxNOtURE03/ZqUcEskdn2M+QaBg==" + "version": "0.2.29", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-common-types/-/0.2.29/fontawesome-common-types-0.2.29.tgz", + "integrity": "sha512-cY+QfDTbZ7XVxzx7jxbC98Oxr/zc7R2QpTLqTxqlfyXDrAJjzi/xUIqAUsygELB62JIrbsWxtSRhayKFkGI7MA==" }, "@fortawesome/fontawesome-svg-core": { - "version": "1.2.28", - "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.28/fontawesome-svg-core-1.2.28.tgz", - "integrity": "sha512-4LeaNHWvrneoU0i8b5RTOJHKx7E+y7jYejplR7uSVB34+mp3Veg7cbKk7NBCLiI4TyoWS1wh9ZdoyLJR8wSAdg==", + "version": "1.2.29", + "resolved": "https://npm.fontawesome.com/@fortawesome/fontawesome-svg-core/-/1.2.29/fontawesome-svg-core-1.2.29.tgz", + "integrity": "sha512-xmPmP2t8qrdo8RyKihTkGb09RnZoc+7HFBCnr0/6ZhStdGDSLeEd7ajV181+2W29NWIFfylO13rU+s3fpy3cnA==", "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.28" + "@fortawesome/fontawesome-common-types": "^0.2.29" } }, "@fortawesome/free-solid-svg-icons": { - "version": "5.13.0", - "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.13.0/free-solid-svg-icons-5.13.0.tgz", - "integrity": "sha512-IHUgDJdomv6YtG4p3zl1B5wWf9ffinHIvebqQOmV3U+3SLw4fC+LUCCgwfETkbTtjy5/Qws2VoVf6z/ETQpFpg==", + "version": "5.13.1", + "resolved": "https://npm.fontawesome.com/@fortawesome/free-solid-svg-icons/-/5.13.1/free-solid-svg-icons-5.13.1.tgz", + "integrity": "sha512-LQH/0L1p4+rqtoSHa9qFYR84hpuRZKqaQ41cfBQx8b68p21zoWSekTAeA54I/2x9VlCHDLFlG74Nmdg4iTPQOg==", "requires": { - "@fortawesome/fontawesome-common-types": "^0.2.28" + "@fortawesome/fontawesome-common-types": "^0.2.29" } }, "@fortawesome/react-native-fontawesome": { @@ -1660,28 +2018,33 @@ "integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==" }, "@react-native-community/picker": { - "version": "1.6.3", - "resolved": "https://registry.npmjs.org/@react-native-community/picker/-/picker-1.6.3.tgz", - "integrity": "sha512-8oPcwimsz14BDu0a8smuqw52uuaXgWrUKAVhv1mXMFvZq3Spt23UVH8Q0Zogi4t7WNlwx4dNXB08iUUP8ltKzg==" + "version": "1.6.5", + "resolved": "https://registry.npmjs.org/@react-native-community/picker/-/picker-1.6.5.tgz", + "integrity": "sha512-mwt0sBaFdURJWkq6wFf2BrYh7fzB1CKK4/gx20zmDYDmahvk3CVUQVlkINDDyXE9m0lYZ9V8rBZBBAJy9W3GkQ==" + }, + "@react-native-community/slider": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/@react-native-community/slider/-/slider-3.0.0.tgz", + "integrity": "sha512-deNc3JHBHz24YN+0DTAocXfrYFIFc1DvsIriMJSsJlR/MvsLzoq2+qwaEN+0/LJ37pstv85wZWY0pNugk4e41g==" }, "@react-navigation/bottom-tabs": { - "version": "5.5.2", - "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.5.2.tgz", - "integrity": "sha512-unopBnv8i3hcjhp2qdhgSwF6GFnhkdtPwGbvJMOG8Na19oPscT8UQDUbHZKs9wiJMk2Q0usEz2PbFh8GQGAf7w==", + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.6.1.tgz", + "integrity": "sha512-aAqA4lCaa1x3cEWwEyUJ5hBPpVuv/TR0Q0Y/hkBgI2+h27Xdv9B/ZemMIjMWTNDZTjbYXTsJ41AJbVQnPSVTrg==", "requires": { "color": "^3.1.2", "react-native-iphone-x-helper": "^1.2.1" } }, "@react-navigation/core": { - "version": "5.10.0", - "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.10.0.tgz", - "integrity": "sha512-cVQTj5FtZHWuymjZMP50RVXYpkQUbo1zQPjxJl+UfBUh7u9nKexknajBhjYbZq61uDE4MmPE8qAqIEJHKeR4Hg==", + "version": "5.11.1", + "resolved": "https://registry.npmjs.org/@react-navigation/core/-/core-5.11.1.tgz", + "integrity": "sha512-zJ/w84msKBhgRR35/tHdY1facxdnN/WP9Ebutnjp/J9ENuv7fHXhYlxX+oIRrMn+/MnbG79RVnYcO/r4lO8OTQ==", "requires": { - "@react-navigation/routers": "^5.4.7", + "@react-navigation/routers": "^5.4.8", "escape-string-regexp": "^4.0.0", - "nanoid": "^3.1.5", - "query-string": "^6.12.1", + "nanoid": "^3.1.9", + "query-string": "^6.13.1", "react-is": "^16.13.0", "use-subscription": "^1.4.0" }, @@ -1694,37 +2057,37 @@ } }, "@react-navigation/native": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.5.1.tgz", - "integrity": "sha512-5pzsfvLdnvqfrWgTMCLDFaGK6Sj30p7tAMhUGneV2oGlx0OIbhgc6/04UUMpKEmAS2PaC/GZa1LQIsSVWDewvw==", + "version": "5.6.1", + "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-5.6.1.tgz", + "integrity": "sha512-jnSNEnuRzqLvG+7QcMthfB8eCZIzAE0Wku7HDgzfjFS2iA7Oa9ugeX/1qdP9heT2Mp0t9BDQ4XX4boJma9Z/xg==", "requires": { - "@react-navigation/core": "^5.10.0", + "@react-navigation/core": "^5.11.1", "nanoid": "^3.1.9" } }, "@react-navigation/routers": { - "version": "5.4.7", - "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.7.tgz", - "integrity": "sha512-J+lQYDbEsyhAjcPpWY6ZJYEkGiZcPX62hNtySruShjbIEnI9gm3rC+BHdcrP/lufeWxWGFhI8CN7NSJGgP/Nmg==", + "version": "5.4.8", + "resolved": "https://registry.npmjs.org/@react-navigation/routers/-/routers-5.4.8.tgz", + "integrity": "sha512-7uxC24fgLQdRquxPfL8SZ8zjle5DXdAB56aYL13tH+HAdhO2YxjKVvulzhGUsfcZthMvZ/9psybhn+m4z71dUg==", "requires": { - "nanoid": "^3.1.5" + "nanoid": "^3.1.9" } }, "@react-navigation/stack": { - "version": "5.5.1", - "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.5.1.tgz", - "integrity": "sha512-oU2FEm+Ba6jMd5VA2WnuNfCO2HlZmGhrEX9yjBCyFj7fFCG1SB7WJdKLhZShtx3KxG/qWKphICeTLlYvkHdSpQ==", + "version": "5.6.2", + "resolved": "https://registry.npmjs.org/@react-navigation/stack/-/stack-5.6.2.tgz", + "integrity": "sha512-51Aasxg8j2eKxz4mhA0ajJXrhAyJQkk2iiNE511zcqJ3tlfxv/h70Eej3PetnbbHFMOwNsEwc2GjB3OnfQcxjQ==", "requires": { "color": "^3.1.2", "react-native-iphone-x-helper": "^1.2.1" } }, "@reduxjs/toolkit": { - "version": "1.3.6", - "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.3.6.tgz", - "integrity": "sha512-eNYURfoJa6mRNU5YtBVbmE5+nDoc4lpjZ181PBwRC6nIFYZdNR3GcoQ4uomFt8eHpXAUAdpCdxBlDsmwyXOt9Q==", + "version": "1.4.0", + "resolved": "https://registry.npmjs.org/@reduxjs/toolkit/-/toolkit-1.4.0.tgz", + "integrity": "sha512-hkxQwVx4BNVRsYdxjNF6cAseRmtrkpSlcgJRr3kLUcHPIAMZAmMJkXmHh/eUEGTMqPzsYpJLM7NN2w9fxQDuGw==", "requires": { - "immer": "^6.0.1", + "immer": "^7.0.3", "redux": "^4.0.0", "redux-thunk": "^2.3.0", "reselect": "^4.0.0" @@ -1834,9 +2197,9 @@ "dev": true }, "@types/lodash": { - "version": "4.14.155", - "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.155.tgz", - "integrity": "sha512-vEcX7S7aPhsBCivxMwAANQburHBtfN9RdyXFk84IJmu2Z4Hkg1tOFgaslRiEqqvoLtbCBi6ika1EMspE+NZ9Lg==" + "version": "4.14.157", + "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.157.tgz", + "integrity": "sha512-Ft5BNFmv2pHDgxV5JDsndOWTRJ+56zte0ZpYLowp03tW+K+t8u8YMOzAnpuqPgzX6WO1XpDIUm7u04M8vdDiVQ==" }, "@types/prop-types": { "version": "15.7.3", @@ -1853,9 +2216,9 @@ } }, "@types/react-native": { - "version": "0.62.13", - "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.13.tgz", - "integrity": "sha512-hs4/tSABhcJx+J8pZhVoXHrOQD89WFmbs8QiDLNSA9zNrD46pityAuBWuwk1aMjPk9I3vC5ewkJroVRHgRIfdg==", + "version": "0.62.17", + "resolved": "https://registry.npmjs.org/@types/react-native/-/react-native-0.62.17.tgz", + "integrity": "sha512-nkWG9oYS0wNiobzY11GOAjG/spV4vCPIbW+u1QIXx+wnQQ4EhkFz6lqqvncO3puXMzwkRhEGawq/bImMReA/vQ==", "requires": { "@types/react": "*" } @@ -4822,9 +5185,9 @@ "integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==" }, "immer": { - "version": "6.0.9", - "resolved": "https://registry.npmjs.org/immer/-/immer-6.0.9.tgz", - "integrity": "sha512-SyCYnAuiRf67Lvk0VkwFvwtDoEiCMjeamnHvRfnVDyc7re1/rQrNxuL+jJ7lA3WvdC4uznrvbmm+clJ9+XXatg==" + "version": "7.0.5", + "resolved": "https://registry.npmjs.org/immer/-/immer-7.0.5.tgz", + "integrity": "sha512-TtRAKZyuqld2eYjvWgXISLJ0ZlOl1OOTzRmrmiY8SlB0dnAhZ1OiykIDL5KDFNaPHDXiLfGQFNJGtet8z8AEmg==" }, "import-fresh": { "version": "2.0.0", @@ -8827,14 +9190,14 @@ } }, "react-native-safe-area-context": { - "version": "3.0.5", - "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.5.tgz", - "integrity": "sha512-cLZtHvzm/tdCTCOCgNRUsnl9ma8MozE9vtxHQVftuY6hRt+esCBdXA5jXcuCaCj+yUe4Akw+c5BPFNUF5vOTjQ==" + "version": "3.0.7", + "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-3.0.7.tgz", + "integrity": "sha512-dqhRTlIFe5+P1yxitj0C9XVUxLqOmjomeqzUSSY8sNOWVjtIhEY/fl4ZKYpAVnktd8dt3zl13XmJTmRmy3d0uA==" }, "react-native-screens": { - "version": "2.8.0", - "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.8.0.tgz", - "integrity": "sha512-fUCIQLZX+5XB0ypWX038P3zso54IFFjTsQUZJWEsjC3pp5rPItAt5SzqtJn+uVjcJaczZ+dpIuvj6IFLqkWLZQ==" + "version": "2.9.0", + "resolved": "https://registry.npmjs.org/react-native-screens/-/react-native-screens-2.9.0.tgz", + "integrity": "sha512-5MaiUD6HA3nzY3JbVI8l3V7pKedtxQF3d8qktTVI0WmWXTI4QzqOU8r8fPVvfKo3MhOXwhWBjr+kQ7DZaIQQeg==" }, "react-native-section-list-get-item-layout": { "version": "2.2.3", @@ -8872,9 +9235,9 @@ "from": "github:leinelissen/react-native-track-player" }, "react-native-webview": { - "version": "10.3.1", - "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.3.1.tgz", - "integrity": "sha512-Ac0v4lFaJl5P/haLook+UIKMW4Ru5xg0+AdxD2oJRB2TPgdqoATziYNU0LBMjntlxDp+DVzdr3fVDuLMdox0tg==", + "version": "10.3.2", + "resolved": "https://registry.npmjs.org/react-native-webview/-/react-native-webview-10.3.2.tgz", + "integrity": "sha512-4A8FKL/puonkqQ1FOKd+iPulqRXCG4inmIK4pQ60zv9Ua+YkBKLxxofQiCvRwIXSSgAXYT+AE3rOHr3bx4A/cw==", "requires": { "escape-string-regexp": "2.0.0", "invariant": "2.2.4" @@ -10171,9 +10534,9 @@ "integrity": "sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c=" }, "typescript": { - "version": "3.9.5", - "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.5.tgz", - "integrity": "sha512-hSAifV3k+i6lEoCJ2k6R2Z/rp/H3+8sdmcn5NrS3/3kE7+RyZXm9aqvxWqjEXHAd8b0pShatpcdMTvEdvAJltQ==", + "version": "3.9.6", + "resolved": "https://registry.npmjs.org/typescript/-/typescript-3.9.6.tgz", + "integrity": "sha512-Pspx3oKAPJtjNwE92YS05HQoY7z2SFyOpHo9MqJor3BXAGNaPUs83CuVp9VISFkSjyRfiTpmKuAYGJB7S7hOxw==", "dev": true }, "ua-parser-js": { diff --git a/package.json b/package.json index 7d190f4..db1ff5c 100644 --- a/package.json +++ b/package.json @@ -12,17 +12,18 @@ "build:ios": "react-native bundle --entry-file='index.ts' --bundle-output='./ios/main.jsbundle' --dev=false --platform='ios'" }, "dependencies": { - "@fortawesome/fontawesome-svg-core": "^1.2.28", - "@fortawesome/free-solid-svg-icons": "^5.13.0", + "@fortawesome/fontawesome-svg-core": "^1.2.29", + "@fortawesome/free-solid-svg-icons": "^5.13.1", "@fortawesome/react-native-fontawesome": "^0.2.5", "@react-native-community/async-storage": "^1.11.0", "@react-native-community/masked-view": "^0.1.10", - "@react-native-community/picker": "^1.6.3", - "@react-navigation/bottom-tabs": "^5.5.2", - "@react-navigation/native": "^5.5.1", - "@react-navigation/stack": "^5.5.1", - "@reduxjs/toolkit": "^1.3.6", - "@types/lodash": "^4.14.155", + "@react-native-community/picker": "^1.6.5", + "@react-native-community/slider": "^3.0.0", + "@react-navigation/bottom-tabs": "^5.6.1", + "@react-navigation/native": "^5.6.1", + "@react-navigation/stack": "^5.6.2", + "@reduxjs/toolkit": "^1.4.0", + "@types/lodash": "^4.14.157", "@types/redux-logger": "^3.0.8", "@types/styled-components": "^5.1.0", "date-fns": "^2.14.0", @@ -33,14 +34,14 @@ "react-native-fast-image": "^8.1.5", "react-native-gesture-handler": "^1.6.1", "react-native-reanimated": "^1.9.0", - "react-native-safe-area-context": "^3.0.5", - "react-native-screens": "^2.8.0", + "react-native-safe-area-context": "^3.0.7", + "react-native-screens": "^2.9.0", "react-native-section-list-get-item-layout": "^2.2.3", "react-native-svg": "^12.1.0", "react-native-swift": "^1.2.3", "react-native-tableview": "^3.0.0", "react-native-track-player": "github:leinelissen/react-native-track-player", - "react-native-webview": "^10.3.1", + "react-native-webview": "^10.3.2", "react-redux": "^7.2.0", "redux": "^4.0.5", "redux-logger": "^3.0.6", @@ -48,11 +49,11 @@ "styled-components": "^5.1.1" }, "devDependencies": { - "@babel/core": "^7.6.2", - "@babel/runtime": "^7.6.2", + "@babel/core": "^7.10.4", + "@babel/runtime": "^7.10.4", "@react-native-community/eslint-config": "^1.0.0", "@types/jest": "^24.0.24", - "@types/react-native": "^0.62.0", + "@types/react-native": "^0.62.17", "@types/react-redux": "^7.1.9", "@types/react-test-renderer": "16.9.2", "@typescript-eslint/eslint-plugin": "^2.27.0", @@ -64,7 +65,7 @@ "jest": "^24.9.0", "metro-react-native-babel-preset": "^0.58.0", "react-test-renderer": "16.11.0", - "typescript": "^3.8.3" + "typescript": "^3.9.6" }, "jest": { "preset": "react-native", diff --git a/src/screens/Player/components/ProgressBar.tsx b/src/screens/Player/components/ProgressBar.tsx index 94be38f..dcecbcd 100644 --- a/src/screens/Player/components/ProgressBar.tsx +++ b/src/screens/Player/components/ProgressBar.tsx @@ -1,42 +1,9 @@ import React, { Component } from 'react'; -import TrackPlayer, { State as PlayerState } from 'react-native-track-player'; +import TrackPlayer from 'react-native-track-player'; import styled from 'styled-components/native'; -import { Text, Dimensions } from 'react-native'; -import { padStart, debounce } from 'lodash'; -import { PanGestureHandler, PanGestureHandlerGestureEvent } from 'react-native-gesture-handler'; - -const Screen = Dimensions.get('screen'); - -const Container = styled.View` - width: 100%; - margin-top: 10px; - background-color: #eeeeee; - position: relative; -`; - -interface ProgressProp { - progress: number; -} - -const Bar = styled.View` - background-color: salmon; - height: 4px; - border-radius: 2px; - width: ${(props: ProgressProp) => props.progress * 100}%; -`; - -const PositionIndicator = styled.View` - width: 20px; - height: 20px; - border-radius: 100px; - border: 1px solid #eee; - background-color: white; - transform: translateX(-10px) translateY(-8.5px); - position: absolute; - top: 0; - left: ${props => props.progress * 100}%; - box-shadow: 0px 4px 8px rgba(0,0,0,0.1); -`; +import { Text } from 'react-native'; +import { padStart } from 'lodash'; +import Slider from '@react-native-community/slider'; const NumberBar = styled.View` flex-direction: row; @@ -56,10 +23,7 @@ function getMinutes(seconds: number): number { interface State { position: number; duration: number; - gesture?: { - previousState?: PlayerState; - translation?: number; - } + gesture?: number; } export default class ProgressBar extends Component<{}, State> { @@ -87,63 +51,34 @@ export default class ProgressBar extends Component<{}, State> { this.setState({ position, duration }); } - handleGesture = async (event: PanGestureHandlerGestureEvent) => { - // Check if the gesture has started, and if it has not, prepare the player - if (!this.state.gesture) { - // Pause the player and store the previous state - TrackPlayer.getState() - .then((previousState) => this.setState({ gesture: { previousState }})) - .then(() => TrackPlayer.pause()); - - } - + handleGesture = async (gesture: number) => { + console.log(gesture); // Set relative translation in state - this.setState({ - gesture: { - previousState: this.state.gesture?.previousState, - translation: event.nativeEvent?.absoluteX, - }, - }); - - // Trigger the end of gesture function - this.handleEndOfGesture(); + this.setState({ gesture }); } - handleEndOfGesture = debounce(() => { + handleEndOfGesture = (position: number) => { // Calculate and set the new position - const { gesture, duration } = this.state; - const progress = Math.min(Math.max((gesture?.translation || 0) / Screen.width, 0), 1); - const position = Math.floor(duration * progress); TrackPlayer.seekTo(position); - - // Restart the player - if (this.state.gesture?.previousState === TrackPlayer.STATE_PLAYING) { - TrackPlayer.play(); - } - this.setState({ gesture: undefined, position }); - }, 500); + } render() { const { position, duration, gesture } = this.state; - const progress = gesture - ? Math.min(Math.max((gesture?.translation || 0) / Screen.width, 0), 1) - : position / duration; - + return ( <> - - - - - - + - 0:00 - {gesture - ? {getMinutes(duration * progress)}:{getSeconds(duration * progress)} - : {getMinutes(position)}:{getSeconds(position)} - } + {getMinutes(gesture || position)}:{getSeconds(gesture || position)} {getMinutes(duration)}:{getSeconds(duration)}