javier/jellyfin-audio-player
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Refactor ProgressBar to React Native Slider

Browse Source
This commit is contained in:
Lei Nelissen
2020-07-06 17:43:49 +02:00
parent 4476ac8e54
commit 9d497edfcf
4 changed files with 493 additions and 188 deletions
Download Patch File Download Diff File Expand all files Collapse all files

22
ios/Podfile.lock
View File

@@ -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

521
package-lock.json generated
View File

@@ -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": {

31
package.json
View File

@@ -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",

105
src/screens/Player/components/ProgressBar.tsx
View File

@@ -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<ProgressProp>`
background-color: salmon;
height: 4px;
border-radius: 2px;
width: ${(props: ProgressProp) => props.progress * 100}%;
`;
const PositionIndicator = styled.View<ProgressProp>`
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 (
<>
<PanGestureHandler onGestureEvent={this.handleGesture}>
<Container>
<Bar progress={progress} />
<PositionIndicator progress={progress} />
</Container>
</PanGestureHandler>
<Slider
value={gesture || position}
minimumValue={0}
maximumValue={duration || 0}
onValueChange={this.handleGesture}
onSlidingComplete={this.handleEndOfGesture}
minimumTrackTintColor={'#ff8c69'}
disabled={!duration}
/>
<NumberBar>
<Text>0:00</Text>
{gesture
? <Text>{getMinutes(duration * progress)}:{getSeconds(duration * progress)}</Text>
: <Text>{getMinutes(position)}:{getSeconds(position)}</Text>
}
<Text>{getMinutes(gesture || position)}:{getSeconds(gesture || position)}</Text>
<Text>{getMinutes(duration)}:{getSeconds(duration)}</Text>
</NumberBar>
</>