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

Port to Redux and add settings

Browse Source
This commit is contained in:
Lei Nelissen
2020-06-17 14:58:04 +02:00
parent cffc7567c1
commit 2369ef68ae
22 changed files with 730 additions and 158 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
.eslintrc.js
View File

@@ -46,6 +46,7 @@ module.exports = {
'always' 'always'
], ],
"no-unused-vars": "off", "no-unused-vars": "off",
"react/prop-types": "off",
"@typescript-eslint/no-unused-vars": [ "@typescript-eslint/no-unused-vars": [
"error" "error"
] ]

18
ios/Podfile.lock
View File

@@ -237,6 +237,8 @@ PODS:
- React - React
- react-native-track-player (1.2.3): - react-native-track-player (1.2.3):
- React - React
- react-native-webview (10.3.1):
- React
- React-RCTActionSheet (0.62.2): - React-RCTActionSheet (0.62.2):
- React-Core/RCTActionSheetHeaders (= 0.62.2) - React-Core/RCTActionSheetHeaders (= 0.62.2)
- React-RCTAnimation (0.62.2): - React-RCTAnimation (0.62.2):
@@ -296,8 +298,12 @@ PODS:
- React-cxxreact (= 0.62.2) - React-cxxreact (= 0.62.2)
- React-jsi (= 0.62.2) - React-jsi (= 0.62.2)
- ReactCommon/callinvoker (= 0.62.2) - ReactCommon/callinvoker (= 0.62.2)
- RNCAsyncStorage (1.11.0):
- React
- RNCMaskedView (0.1.10): - RNCMaskedView (0.1.10):
- React - React
- RNCPicker (1.6.3):
- React
- RNGestureHandler (1.6.1): - RNGestureHandler (1.6.1):
- React - React
- RNReanimated (1.9.0): - RNReanimated (1.9.0):
@@ -348,6 +354,7 @@ DEPENDENCIES:
- React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`) - React-jsinspector (from `../node_modules/react-native/ReactCommon/jsinspector`)
- react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`) - react-native-safe-area-context (from `../node_modules/react-native-safe-area-context`)
- react-native-track-player (from `../node_modules/react-native-track-player`) - 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`) - React-RCTActionSheet (from `../node_modules/react-native/Libraries/ActionSheetIOS`)
- React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`) - React-RCTAnimation (from `../node_modules/react-native/Libraries/NativeAnimation`)
- React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`) - React-RCTBlob (from `../node_modules/react-native/Libraries/Blob`)
@@ -359,7 +366,9 @@ DEPENDENCIES:
- React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`)
- ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`) - ReactCommon/callinvoker (from `../node_modules/react-native/ReactCommon`)
- ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
- "RNCAsyncStorage (from `../node_modules/@react-native-community/async-storage`)"
- "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)" - "RNCMaskedView (from `../node_modules/@react-native-community/masked-view`)"
- "RNCPicker (from `../node_modules/@react-native-community/picker`)"
- RNGestureHandler (from `../node_modules/react-native-gesture-handler`) - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
- RNReanimated (from `../node_modules/react-native-reanimated`) - RNReanimated (from `../node_modules/react-native-reanimated`)
- RNScreens (from `../node_modules/react-native-screens`) - RNScreens (from `../node_modules/react-native-screens`)
@@ -414,6 +423,8 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native-safe-area-context" :path: "../node_modules/react-native-safe-area-context"
react-native-track-player: react-native-track-player:
:path: "../node_modules/react-native-track-player" :path: "../node_modules/react-native-track-player"
react-native-webview:
:path: "../node_modules/react-native-webview"
React-RCTActionSheet: React-RCTActionSheet:
:path: "../node_modules/react-native/Libraries/ActionSheetIOS" :path: "../node_modules/react-native/Libraries/ActionSheetIOS"
React-RCTAnimation: React-RCTAnimation:
@@ -434,8 +445,12 @@ EXTERNAL SOURCES:
:path: "../node_modules/react-native/Libraries/Vibration" :path: "../node_modules/react-native/Libraries/Vibration"
ReactCommon: ReactCommon:
:path: "../node_modules/react-native/ReactCommon" :path: "../node_modules/react-native/ReactCommon"
RNCAsyncStorage:
:path: "../node_modules/@react-native-community/async-storage"
RNCMaskedView: RNCMaskedView:
:path: "../node_modules/@react-native-community/masked-view" :path: "../node_modules/@react-native-community/masked-view"
RNCPicker:
:path: "../node_modules/@react-native-community/picker"
RNGestureHandler: RNGestureHandler:
:path: "../node_modules/react-native-gesture-handler" :path: "../node_modules/react-native-gesture-handler"
RNReanimated: RNReanimated:
@@ -475,6 +490,7 @@ SPEC CHECKSUMS:
React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493 React-jsinspector: 512e560d0e985d0e8c479a54a4e5c147a9c83493
react-native-safe-area-context: e9a863c2dbbc0d42d2b12209d63fa79dfbc9662c react-native-safe-area-context: e9a863c2dbbc0d42d2b12209d63fa79dfbc9662c
react-native-track-player: ba2416753b58f3cdf9db5a07daa65876d659f925 react-native-track-player: ba2416753b58f3cdf9db5a07daa65876d659f925
react-native-webview: 938d49de66f0d5c95134f19682243cbe53294f51
React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c React-RCTActionSheet: f41ea8a811aac770e0cc6e0ad6b270c644ea8b7c
React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0 React-RCTAnimation: 49ab98b1c1ff4445148b72a3d61554138565bad0
React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71 React-RCTBlob: a332773f0ebc413a0ce85942a55b064471587a71
@@ -485,7 +501,9 @@ SPEC CHECKSUMS:
React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d React-RCTText: fae545b10cfdb3d247c36c56f61a94cfd6dba41d
React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256 React-RCTVibration: 4356114dbcba4ce66991096e51a66e61eda51256
ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3 ReactCommon: ed4e11d27609d571e7eee8b65548efc191116eb3
RNCAsyncStorage: db711e29e5e0500d9bd21aa0c2e397efa45302b1
RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459 RNCMaskedView: f5c7d14d6847b7b44853f7acb6284c1da30a3459
RNCPicker: 1c63b084bcbcd33d159a83144543f3bda4cd1793
RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38 RNGestureHandler: 8f09cd560f8d533eb36da5a6c5a843af9f056b38
RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43 RNReanimated: b5ccb50650ba06f6e749c7c329a1bc3ae0c88b43
RNScreens: 62211832af51e0aebcf6e8c36bcf7dd65592f244 RNScreens: 62211832af51e0aebcf6e8c36bcf7dd65592f244

132
package-lock.json generated
View File

@@ -1512,6 +1512,14 @@
} }
} }
}, },
"@react-native-community/async-storage": {
"version": "1.11.0",
"resolved": "https://registry.npmjs.org/@react-native-community/async-storage/-/async-storage-1.11.0.tgz",
"integrity": "sha512-Pq9LlmvtCEKAGdkyrgTcRxNh2fnHFykEj2qnRYijOl1pDIl2MkD5IxaXu5eOL0wgOtAl4U//ff4z40Td6XR5rw==",
"requires": {
"deep-assign": "^3.0.0"
}
},
"@react-native-community/cli-debugger-ui": { "@react-native-community/cli-debugger-ui": {
"version": "4.9.0", "version": "4.9.0",
"resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.9.0.tgz", "resolved": "https://registry.npmjs.org/@react-native-community/cli-debugger-ui/-/cli-debugger-ui-4.9.0.tgz",
@@ -1643,6 +1651,11 @@
"resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz", "resolved": "https://registry.npmjs.org/@react-native-community/masked-view/-/masked-view-0.1.10.tgz",
"integrity": "sha512-rk4sWFsmtOw8oyx8SD3KSvawwaK7gRBSEIy2TAwURyGt+3TizssXP1r8nx3zY+R7v2vYYHXZ+k2/GULAT/bcaQ==" "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=="
},
"@react-navigation/bottom-tabs": { "@react-navigation/bottom-tabs": {
"version": "5.5.2", "version": "5.5.2",
"resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.5.2.tgz", "resolved": "https://registry.npmjs.org/@react-navigation/bottom-tabs/-/bottom-tabs-5.5.2.tgz",
@@ -1698,6 +1711,17 @@
"react-native-iphone-x-helper": "^1.2.1" "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==",
"requires": {
"immer": "^6.0.1",
"redux": "^4.0.0",
"redux-thunk": "^2.3.0",
"reselect": "^4.0.0"
}
},
"@types/babel__core": { "@types/babel__core": {
"version": "7.1.8", "version": "7.1.8",
"resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.8.tgz", "resolved": "https://registry.npmjs.org/@types/babel__core/-/babel__core-7.1.8.tgz",
@@ -1828,6 +1852,18 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/react-redux": {
"version": "7.1.9",
"resolved": "https://registry.npmjs.org/@types/react-redux/-/react-redux-7.1.9.tgz",
"integrity": "sha512-mpC0jqxhP4mhmOl3P4ipRsgTgbNofMRXJb08Ms6gekViLj61v1hOZEKWDCyWsdONr6EjEA6ZHXC446wdywDe0w==",
"dev": true,
"requires": {
"@types/hoist-non-react-statics": "^3.3.0",
"@types/react": "*",
"hoist-non-react-statics": "^3.3.0",
"redux": "^4.0.0"
}
},
"@types/react-test-renderer": { "@types/react-test-renderer": {
"version": "16.9.2", "version": "16.9.2",
"resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz", "resolved": "https://registry.npmjs.org/@types/react-test-renderer/-/react-test-renderer-16.9.2.tgz",
@@ -1837,6 +1873,14 @@
"@types/react": "*" "@types/react": "*"
} }
}, },
"@types/redux-logger": {
"version": "3.0.8",
"resolved": "https://registry.npmjs.org/@types/redux-logger/-/redux-logger-3.0.8.tgz",
"integrity": "sha512-zM+cxiSw6nZtRbxpVp9SE3x/X77Z7e7YAfHD1NkxJyJbAGSXJGF0E9aqajZfPOa/sTYnuwutmlCldveExuCeLw==",
"requires": {
"redux": "^4.0.0"
}
},
"@types/stack-utils": { "@types/stack-utils": {
"version": "1.0.1", "version": "1.0.1",
"resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz", "resolved": "https://registry.npmjs.org/@types/stack-utils/-/stack-utils-1.0.1.tgz",
@@ -3154,6 +3198,19 @@
"resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz", "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
"integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU=" "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
}, },
"deep-assign": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/deep-assign/-/deep-assign-3.0.0.tgz",
"integrity": "sha512-YX2i9XjJ7h5q/aQ/IM9PEwEnDqETAIYbggmdDB3HLTlSgo1CxPsj6pvhPG68rq6SVE0+p+6Ywsm5fTYNrYtBWw==",
"requires": {
"is-obj": "^1.0.0"
}
},
"deep-diff": {
"version": "0.3.8",
"resolved": "https://registry.npmjs.org/deep-diff/-/deep-diff-0.3.8.tgz",
"integrity": "sha1-wB3mPvsO7JeYgB1Ax+Da4ltYLIQ="
},
"deep-is": { "deep-is": {
"version": "0.1.3", "version": "0.1.3",
"resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz", "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.3.tgz",
@@ -4709,6 +4766,11 @@
"resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz", "resolved": "https://registry.npmjs.org/image-size/-/image-size-0.6.3.tgz",
"integrity": "sha512-47xSUiQioGaB96nqtp5/q55m0aBQSQdyIloMOc/x+QVTDZLNmXE892IIDrJ0hM1A5vcNUDD5tDffkSP5lCaIIA==" "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=="
},
"import-fresh": { "import-fresh": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz", "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-2.0.0.tgz",
@@ -4983,6 +5045,11 @@
} }
} }
}, },
"is-obj": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/is-obj/-/is-obj-1.0.1.tgz",
"integrity": "sha1-PkcprB9f3gJc19g6iW2rn09n2w8="
},
"is-plain-object": { "is-plain-object": {
"version": "2.0.4", "version": "2.0.4",
"resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz", "resolved": "https://registry.npmjs.org/is-plain-object/-/is-plain-object-2.0.4.tgz",
@@ -8686,6 +8753,34 @@
"version": "github:react-native-kit/react-native-track-player#d6e26a4b27f4bb6a5a1dbfb67407d165a809439a", "version": "github:react-native-kit/react-native-track-player#d6e26a4b27f4bb6a5a1dbfb67407d165a809439a",
"from": "github:react-native-kit/react-native-track-player" "from": "github:react-native-kit/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==",
"requires": {
"escape-string-regexp": "2.0.0",
"invariant": "2.2.4"
},
"dependencies": {
"escape-string-regexp": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-2.0.0.tgz",
"integrity": "sha512-UpzcLCXolUWcNu5HtVMHYdXJjArjsF9C0aNnquZYY4uW/Vu0miy5YoWvbV345HauVvcAUnpRuhMMcqTcGOY2+w=="
}
}
},
"react-redux": {
"version": "7.2.0",
"resolved": "https://registry.npmjs.org/react-redux/-/react-redux-7.2.0.tgz",
"integrity": "sha512-EvCAZYGfOLqwV7gh849xy9/pt55rJXPwmYvI4lilPM5rUT/1NxuuN59ipdBksRVSvz0KInbPnp4IfoXJXCqiDA==",
"requires": {
"@babel/runtime": "^7.5.5",
"hoist-non-react-statics": "^3.3.0",
"loose-envify": "^1.4.0",
"prop-types": "^15.7.2",
"react-is": "^16.9.0"
}
},
"react-refresh": { "react-refresh": {
"version": "0.4.3", "version": "0.4.3",
"resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.4.3.tgz",
@@ -8783,6 +8878,33 @@
"util.promisify": "^1.0.0" "util.promisify": "^1.0.0"
} }
}, },
"redux": {
"version": "4.0.5",
"resolved": "https://registry.npmjs.org/redux/-/redux-4.0.5.tgz",
"integrity": "sha512-VSz1uMAH24DM6MF72vcojpYPtrTUu3ByVWfPL1nPfVRb5mZVTve5GnNCUV53QM/BZ66xfWrm0CTWoM+Xlz8V1w==",
"requires": {
"loose-envify": "^1.4.0",
"symbol-observable": "^1.2.0"
}
},
"redux-logger": {
"version": "3.0.6",
"resolved": "https://registry.npmjs.org/redux-logger/-/redux-logger-3.0.6.tgz",
"integrity": "sha1-91VZZvMJjzyIYExEnPC69XeCdL8=",
"requires": {
"deep-diff": "^0.3.5"
}
},
"redux-persist": {
"version": "6.0.0",
"resolved": "https://registry.npmjs.org/redux-persist/-/redux-persist-6.0.0.tgz",
"integrity": "sha512-71LLMbUq2r02ng2We9S215LtPu3fY0KgaGE0k8WRgl6RkqxtGfl7HUozz1Dftwsb0D/5mZ8dwAaPbtnzfvbEwQ=="
},
"redux-thunk": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/redux-thunk/-/redux-thunk-2.3.0.tgz",
"integrity": "sha512-km6dclyFnmcvxhAcrQV2AkZmPQjzPDjgVlQtR0EQjxZPyJ0BnMf3in1ryuR8A2qU0HldVRfxYXbFSKlI3N7Slw=="
},
"regenerate": { "regenerate": {
"version": "1.4.1", "version": "1.4.1",
"resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz", "resolved": "https://registry.npmjs.org/regenerate/-/regenerate-1.4.1.tgz",
@@ -8941,6 +9063,11 @@
"resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz", "resolved": "https://registry.npmjs.org/require-main-filename/-/require-main-filename-2.0.0.tgz",
"integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg==" "integrity": "sha512-NKN5kMDylKuldxYLSUfrbo5Tuzh4hd+2E8NPPX02mZtn1VuREQToYe/ZdlJy+J3uCpfaiGF05e7B8W0iXbQHmg=="
}, },
"reselect": {
"version": "4.0.0",
"resolved": "https://registry.npmjs.org/reselect/-/reselect-4.0.0.tgz",
"integrity": "sha512-qUgANli03jjAyGlnbYVAV5vvnOmJnODyABz51RdBN7M4WaVu8mecZWgyQNkG8Yqe3KRGRt0l4K4B3XVEULC4CA=="
},
"resolve": { "resolve": {
"version": "1.17.0", "version": "1.17.0",
"resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz", "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.17.0.tgz",
@@ -9702,6 +9829,11 @@
"has-flag": "^4.0.0" "has-flag": "^4.0.0"
} }
}, },
"symbol-observable": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz",
"integrity": "sha512-e900nM8RRtGhlV36KGEU9k65K3mPb1WV70OdjfxlG2EAuM1noi/E/BaW/uMhL7bPEssK8QV57vN3esixjUvcXQ=="
},
"symbol-tree": { "symbol-tree": {
"version": "3.2.4", "version": "3.2.4",
"resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz", "resolved": "https://registry.npmjs.org/symbol-tree/-/symbol-tree-3.2.4.tgz",

10
package.json
View File

@@ -14,11 +14,15 @@
"@fortawesome/fontawesome-svg-core": "^1.2.28", "@fortawesome/fontawesome-svg-core": "^1.2.28",
"@fortawesome/free-solid-svg-icons": "^5.13.0", "@fortawesome/free-solid-svg-icons": "^5.13.0",
"@fortawesome/react-native-fontawesome": "^0.2.5", "@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/masked-view": "^0.1.10",
"@react-native-community/picker": "^1.6.3",
"@react-navigation/bottom-tabs": "^5.5.2", "@react-navigation/bottom-tabs": "^5.5.2",
"@react-navigation/native": "^5.5.1", "@react-navigation/native": "^5.5.1",
"@react-navigation/stack": "^5.5.1", "@react-navigation/stack": "^5.5.1",
"@reduxjs/toolkit": "^1.3.6",
"@types/lodash": "^4.14.155", "@types/lodash": "^4.14.155",
"@types/redux-logger": "^3.0.8",
"@types/styled-components": "^5.1.0", "@types/styled-components": "^5.1.0",
"lodash": "^4.17.15", "lodash": "^4.17.15",
"react": "16.11.0", "react": "16.11.0",
@@ -30,6 +34,11 @@
"react-native-svg": "^12.1.0", "react-native-svg": "^12.1.0",
"react-native-swift": "^1.2.3", "react-native-swift": "^1.2.3",
"react-native-track-player": "github:react-native-kit/react-native-track-player", "react-native-track-player": "github:react-native-kit/react-native-track-player",
"react-native-webview": "^10.3.1",
"react-redux": "^7.2.0",
"redux": "^4.0.5",
"redux-logger": "^3.0.6",
"redux-persist": "^6.0.0",
"styled-components": "^5.1.1" "styled-components": "^5.1.1"
}, },
"devDependencies": { "devDependencies": {
@@ -38,6 +47,7 @@
"@react-native-community/eslint-config": "^1.0.0", "@react-native-community/eslint-config": "^1.0.0",
"@types/jest": "^24.0.24", "@types/jest": "^24.0.24",
"@types/react-native": "^0.62.0", "@types/react-native": "^0.62.0",
"@types/react-redux": "^7.1.9",
"@types/react-test-renderer": "16.9.2", "@types/react-test-renderer": "16.9.2",
"@typescript-eslint/eslint-plugin": "^2.27.0", "@typescript-eslint/eslint-plugin": "^2.27.0",
"@typescript-eslint/parser": "^2.27.0", "@typescript-eslint/parser": "^2.27.0",

13
src/components/App.tsx
View File

@@ -1,7 +1,10 @@
import React, { Component } from 'react'; import React, { Component } from 'react';
import { Provider } from 'react-redux';
import TrackPlayer from 'react-native-track-player'; import TrackPlayer from 'react-native-track-player';
import { PersistGate } from 'redux-persist/integration/react';
import { NavigationContainer } from '@react-navigation/native'; import { NavigationContainer } from '@react-navigation/native';
import Routes from '../screens'; import Routes from '../screens';
import store, { persistedStore } from '../store';
interface State { interface State {
isReady: boolean; isReady: boolean;
@@ -34,9 +37,13 @@ export default class App extends Component<State> {
} }
return ( return (
<NavigationContainer> <Provider store={store}>
<Routes /> <PersistGate loading={null} persistor={persistedStore}>
</NavigationContainer> <NavigationContainer>
<Routes />
</NavigationContainer>
</PersistGate>
</Provider>
); );
} }
} }

10
src/components/Input.tsx Normal file
View File

@@ -0,0 +1,10 @@
import styled from 'styled-components/native';
const Input = styled.TextInput`
margin: 10px 0;
background-color: #f6f6f6;
border-radius: 5px;
padding: 15px;
`;
export default Input;

29
src/components/Modal.tsx Normal file
View File

@@ -0,0 +1,29 @@
import React from 'react';
import styled from 'styled-components/native';
import { SafeAreaView } from 'react-native';
const Background = styled.View`
background-color: #eeeeeeee;
padding: 100px 25px;
flex: 1;
`;
const Container = styled.View`
background-color: white;
border-radius: 20px;
flex: 1;
`;
const Modal: React.FC = ({ children }) => {
return (
<Background>
<SafeAreaView style={{ flex: 1}}>
<Container>
{children}
</Container>
</SafeAreaView>
</Background>
);
};
export default Modal;

99
src/screens/Albums/components/Album.tsx
View File

@@ -1,18 +1,15 @@
import React, { Component, useCallback } from 'react'; import React, { useCallback, useEffect } from 'react';
import TrackPlayer from 'react-native-track-player'; import TrackPlayer from 'react-native-track-player';
import { StackScreenProps } from '@react-navigation/stack'; import { StackParams } from '../types';
import { RootStackParamList, AlbumTrack } from '../types'; import { Text, ScrollView, Dimensions, Button, TouchableOpacity } from 'react-native';
import { Text, ScrollView, Dimensions, FlatList, Button, TouchableOpacity } from 'react-native'; import { generateTrack, useGetImage } from '../../../utility/JellyfinApi';
import { retrieveAlbumTracks, getImage, generateTrack } from '../../../utility/JellyfinApi';
import styled from 'styled-components/native'; import styled from 'styled-components/native';
import { useRoute, RouteProp } from '@react-navigation/native';
import { useDispatch } from 'react-redux';
import { useTypedSelector } from '../../../store';
import { fetchTracksByAlbum } from '../../../store/music/actions';
interface Props extends StackScreenProps<RootStackParamList, 'Album'> { type Route = RouteProp<StackParams, 'Album'>;
//
}
interface State {
tracks: AlbumTrack[];
}
const Screen = Dimensions.get('screen'); const Screen = Dimensions.get('screen');
@@ -49,48 +46,50 @@ const TouchableTrack: React.FC<TouchableTrackProps> = ({ id, onPress, children
); );
}; };
export default class Album extends Component<Props, State> { const Album: React.FC = () => {
state: State = { // Retrieve state
tracks: [], const { params: { id } } = useRoute<Route>();
} const tracks = useTypedSelector((state) => state.music.tracks.entities);
const album = useTypedSelector((state) => state.music.albums.entities[id]);
const credentials = useTypedSelector((state) => state.settings.jellyfin);
async componentDidMount() { // Retrieve helpers
const tracks = await retrieveAlbumTracks(this.props.route.params.id); const dispatch = useDispatch();
this.setState({ tracks }); const getImage = useGetImage();
}
selectTrack = async (id: string) => { // Set callbacks
const track = await generateTrack(id); const selectTrack = useCallback(async (trackId) => {
await TrackPlayer.add([ track ]); const newTrack = generateTrack(tracks[trackId], credentials);
await TrackPlayer.skip(id); console.log(newTrack);
await TrackPlayer.add([ newTrack ]);
await TrackPlayer.skip(trackId);
TrackPlayer.play(); TrackPlayer.play();
} }, [tracks, credentials]);
const playAlbum = useCallback(async () => {
playAlbum = async () => { const newTracks = album.Tracks.map((trackId) => generateTrack(tracks[trackId], credentials));
const tracks = await Promise.all(this.state.tracks.map(track => generateTrack(track.Id)));
await TrackPlayer.removeUpcomingTracks(); await TrackPlayer.removeUpcomingTracks();
await TrackPlayer.add(tracks); await TrackPlayer.add(newTracks);
await TrackPlayer.skip(tracks[0].id); await TrackPlayer.skip(album.Tracks[0]);
TrackPlayer.play(); TrackPlayer.play();
} }, [tracks, credentials]);
render() { // Retrieve album tracks on load
const { tracks } = this.state; useEffect(() => { dispatch(fetchTracksByAlbum(id)); }, []);
const { album } = this.props.route.params;
return ( return (
<ScrollView style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}> <ScrollView style={{ backgroundColor: '#f6f6f6', padding: 20, paddingBottom: 50 }}>
<AlbumImage source={{ uri: getImage(album.Id) }} /> <AlbumImage source={{ uri: getImage(album.Id) }} />
<Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album.Name}</Text> <Text style={{ fontSize: 36, fontWeight: 'bold' }} >{album?.Name}</Text>
<Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{album.AlbumArtist}</Text> <Text style={{ fontSize: 24, opacity: 0.5, marginBottom: 24 }}>{album?.AlbumArtist}</Text>
<Button title="Play Album" onPress={this.playAlbum} /> <Button title="Play Album" onPress={playAlbum} />
{tracks.length ? tracks.map((track) => {album?.Tracks?.length ? album.Tracks.map((trackId) =>
<TouchableTrack key={track.Id} id={track.Id} onPress={this.selectTrack}> <TouchableTrack key={trackId} id={trackId} onPress={selectTrack}>
<Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{track.IndexNumber}</Text> <Text style={{ width: 20, opacity: 0.5, marginRight: 5 }}>{tracks[trackId]?.IndexNumber}</Text>
<Text>{track.Name}</Text> <Text>{tracks[trackId]?.Name}</Text>
</TouchableTrack> </TouchableTrack>
) : undefined} ) : undefined}
</ScrollView> </ScrollView>
); );
} };
}
export default Album;

99
src/screens/Albums/components/Albums.tsx
View File

@@ -1,19 +1,13 @@
import React, { Component, useCallback } from 'react'; import React, { useCallback, useEffect } from 'react';
import { retrieveAlbums, getImage } from '../../../utility/JellyfinApi'; import { useGetImage } from '../../../utility/JellyfinApi';
import { Album, RootStackParamList } from '../types'; import { Album, NavigationProp } from '../types';
import { Text, SafeAreaView, FlatList, Dimensions } from 'react-native'; import { Text, SafeAreaView, FlatList, Dimensions } from 'react-native';
import styled from 'styled-components/native'; import styled from 'styled-components/native';
import { TouchableOpacity } from 'react-native-gesture-handler'; import { TouchableOpacity } from 'react-native-gesture-handler';
import { StackNavigationProp } from '@react-navigation/stack'; import { useDispatch } from 'react-redux';
import { useTypedSelector } from '../../../store';
interface Props { import { fetchAllAlbums } from '../../../store/music/actions';
navigation: StackNavigationProp<RootStackParamList, 'Albums'>; import { useNavigation } from '@react-navigation/native';
}
interface State {
albums: Album[];
refreshing: boolean;
}
const Screen = Dimensions.get('screen'); const Screen = Dimensions.get('screen');
@@ -57,51 +51,44 @@ const TouchableAlbumItem: React.FC<TouchableAlbumItemProps> = ({ id, onPress, c
); );
}; };
class Albums extends Component<Props, State> { const Albums: React.FC = () => {
state: State = { // Retrieve data from store
albums: [], const { ids, entities: albums } = useTypedSelector((state) => state.music.albums);
refreshing: false, const isLoading = useTypedSelector((state) => state.music.albums.isLoading);
}
componentDidMount() {
this.retrieveData();
}
retrieveData = async () => {
this.setState({ refreshing: true });
const albums = await retrieveAlbums() as Album[];
this.setState({ albums, refreshing: false });
}
selectAlbum = (id: string) => { // Initialise helpers
const album = this.state.albums.find((d) => d.Id === id) as Album; const dispatch = useDispatch();
this.props.navigation.navigate('Album', { id, album }); const navigation = useNavigation<NavigationProp>();
} const getImage = useGetImage();
render() { // Set callbacks
const { albums, refreshing } = this.state; const retrieveData = useCallback(() => dispatch(fetchAllAlbums()), [dispatch]);
const selectAlbum = useCallback((id: string) => navigation.navigate('Album', { id, album: albums[id] as Album }), [navigation, albums]);
// Retrieve data on mount
useEffect(() => { retrieveData(); }, []);
return (
<SafeAreaView>
<Container>
<FlatList
data={ids as string[]}
refreshing={isLoading}
onRefresh={retrieveData}
numColumns={2}
keyExtractor={d => d}
renderItem={({ item }) => (
<TouchableAlbumItem id={item} onPress={selectAlbum}>
<AlbumImage source={{ uri: getImage(item) }} />
<Text>{albums[item]?.Name}</Text>
<Text style={{ opacity: 0.5 }}>{albums[item]?.AlbumArtist}</Text>
</TouchableAlbumItem>
)}
/>
</Container>
</SafeAreaView>
);
};
return (
<SafeAreaView>
<Container>
<FlatList
data={albums}
keyExtractor={(item: Album) => item.Id}
refreshing={refreshing}
onRefresh={this.retrieveData}
numColumns={2}
renderItem={({ item }: { item: Album }) => (
<TouchableAlbumItem id={item.Id} onPress={this.selectAlbum}>
<AlbumImage source={{ uri: getImage(item.Id) }} />
<Text>{item.Name}</Text>
<Text style={{ opacity: 0.5 }}>{item.AlbumArtist}</Text>
</TouchableAlbumItem>
)}
/>
</Container>
</SafeAreaView>
);
}
}
export default Albums; export default Albums;

5
src/screens/Albums/types.ts
View File

@@ -1,3 +1,5 @@
import { StackNavigationProp } from '@react-navigation/stack';
export interface UserData { export interface UserData {
PlaybackPositionTicks: number; PlaybackPositionTicks: number;
PlayCount: number; PlayCount: number;
@@ -63,8 +65,9 @@ export interface AlbumTrack {
MediaType: string; MediaType: string;
} }
export type RootStackParamList = { export type StackParams = {
Albums: undefined; Albums: undefined;
Album: { id: string, album: Album }; Album: { id: string, album: Album };
}; };
export type NavigationProp = StackNavigationProp<StackParams>;

28
src/screens/Settings/index.tsx
View File

@@ -1,7 +1,12 @@
import React from 'react'; import React, { useCallback } from 'react';
import { View, Text, SafeAreaView } from 'react-native'; import { View, Text, SafeAreaView, Button } from 'react-native';
import { Picker } from '@react-native-community/picker';
import { ScrollView } from 'react-native-gesture-handler'; import { ScrollView } from 'react-native-gesture-handler';
import styled from 'styled-components/native'; import styled from 'styled-components/native';
import { useSelector } from 'react-redux';
import { AppState } from '../../store';
import { useNavigation } from '@react-navigation/native';
import { NavigationProp } from '..';
const InputContainer = styled.View` const InputContainer = styled.View`
margin: 10px 0; margin: 10px 0;
@@ -15,7 +20,9 @@ const Input = styled.TextInput`
`; `;
export default function Settings() { export default function Settings() {
const { jellyfin, bitrate } = useSelector((state: AppState) => state.settings);
const navigation = useNavigation<NavigationProp>();
const handleClick = useCallback(() => navigation.navigate('SetJellyfinServer'), []);
return ( return (
<ScrollView> <ScrollView>
@@ -24,15 +31,22 @@ export default function Settings() {
<Text style={{ fontSize: 36, marginBottom: 24, fontWeight: 'bold' }}>Settings</Text> <Text style={{ fontSize: 36, marginBottom: 24, fontWeight: 'bold' }}>Settings</Text>
<InputContainer> <InputContainer>
<Text>Jellyfin Server URL</Text> <Text>Jellyfin Server URL</Text>
<Input placeholder="https://jellyfin.yourserver.com/" /> <Input placeholder="https://jellyfin.yourserver.com/" value={jellyfin?.uri} editable={false} />
</InputContainer> </InputContainer>
<InputContainer> <InputContainer>
<Text>Jellyfin API Key</Text> <Text>Jellyfin Access Token</Text>
<Input placeholder="deadbeefdeadbeefdeadbeef" /> <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.access_token} editable={false} />
</InputContainer> </InputContainer>
<InputContainer> <InputContainer>
<Text>Jellyfin User ID</Text> <Text>Jellyfin User ID</Text>
<Input placeholder="deadbeefdeadbeefdeadbeef" /> <Input placeholder="deadbeefdeadbeefdeadbeef" value={jellyfin?.user_id} editable={false} />
</InputContainer>
<Button title="Set Jellyfin server" onPress={handleClick} />
<InputContainer>
<Text>Bitrate</Text>
<Picker selectedValue={bitrate}>
<Picker.Item label="320kbps" value={140000000} />
</Picker>
</InputContainer> </InputContainer>
</View> </View>
</SafeAreaView> </SafeAreaView>

42
src/screens/index.tsx
View File

@@ -1,17 +1,51 @@
import React from 'react'; import React from 'react';
import { createBottomTabNavigator, BottomTabNavigationOptions } from '@react-navigation/bottom-tabs'; import { createBottomTabNavigator, BottomTabNavigationProp } from '@react-navigation/bottom-tabs';
import Player from './Player'; import Player from './Player';
import Albums from './Albums'; import Albums from './Albums';
import Settings from './Settings'; import Settings from './Settings';
import { createStackNavigator, StackNavigationProp } from '@react-navigation/stack';
import SetJellyfinServer from './modals/SetJellyfinServer';
import { CompositeNavigationProp } from '@react-navigation/native';
const Stack = createStackNavigator();
const Tab = createBottomTabNavigator(); const Tab = createBottomTabNavigator();
export default function Routes() { type Screens = {
NowPlaying: undefined;
Albums: undefined;
Settings: undefined;
}
function Screens() {
return ( return (
<Tab.Navigator> <Tab.Navigator>
<Tab.Screen name="Now Playing" component={Player} /> <Tab.Screen name="NowPlaying" component={Player} />
<Tab.Screen name="Albums" component={Albums} /> <Tab.Screen name="Albums" component={Albums} />
<Tab.Screen name="Settings" component={Settings} /> <Tab.Screen name="Settings" component={Settings} />
</Tab.Navigator> </Tab.Navigator>
); );
} }
type Routes = {
Screens: undefined;
SetJellyfinServer: undefined;
}
export default function Routes() {
return (
<Stack.Navigator mode="modal" headerMode="none" screenOptions={{
cardStyle: {
backgroundColor: 'transparent'
}
}}>
<Stack.Screen name="Screens" component={Screens} />
<Stack.Screen name="SetJellyfinServer" component={SetJellyfinServer} />
</Stack.Navigator>
);
}
export type NavigationProp = CompositeNavigationProp<
StackNavigationProp<Routes>,
BottomTabNavigationProp<Screens>
>;

63
src/screens/modals/SetJellyfinServer/components/CredentialGenerator.tsx Normal file
View File

@@ -0,0 +1,63 @@
import React, { Component, createRef } from 'react';
import { WebView, WebViewMessageEvent } from 'react-native-webview';
import { debounce } from 'lodash';
import { AppState } from '../../../../store';
interface Props {
serverUrl: string;
onCredentialsRetrieved: (credentials: AppState['settings']['jellyfin']) => void;
}
class CredentialGenerator extends Component<Props> {
ref = createRef<WebView>();
handleStateChange = () => {
// Call a debounced version to check if the credentials are there
this.checkIfCredentialsAreThere();
}
checkIfCredentialsAreThere = debounce(() => {
// Inject some javascript to check if the credentials can be extracted
// from localstore
this.ref.current?.injectJavaScript(`
try {
let credentials = JSON.parse(window.localStorage.getItem('jellyfin_credentials'));
let deviceId = window.localStorage.getItem('_deviceId2');
window.ReactNativeWebView.postMessage(JSON.stringify({ credentials, deviceId }))
} catch(e) { }; true;
`);
}, 500);
handleMessage = (event: WebViewMessageEvent) => {
// GUARD: Something must be returned for this thing to work
if (!event.nativeEvent.data) {
return;
}
// If a message is received, the credentials should be there
const { credentials: { Servers: [ credentials ] }, deviceId } = JSON.parse(event.nativeEvent.data);
this.props.onCredentialsRetrieved({
uri: credentials.ManualAddress,
user_id: credentials.UserId,
access_token: credentials.AccessToken,
device_id: deviceId,
});
}
render() {
const { serverUrl } = this.props;
return (
<WebView
source={{ uri: serverUrl as string }}
style={{ borderRadius: 20 }}
onNavigationStateChange={this.handleStateChange}
onMessage={this.handleMessage}
ref={this.ref}
startInLoadingState={true}
/>
);
}
}
export default CredentialGenerator;

48
src/screens/modals/SetJellyfinServer/index.tsx Normal file
View File

@@ -0,0 +1,48 @@
import React, { useState, useCallback } from 'react';
import { Text, Button, View } from 'react-native';
import Modal from '../../../components/Modal';
import Input from '../../../components/Input';
import { setJellyfinCredentials } from '../../../store/settings/actions';
import { useDispatch } from 'react-redux';
import { useNavigation, StackActions } from '@react-navigation/native';
import CredentialGenerator from './components/CredentialGenerator';
export default function SetJellyfinServer() {
// State for first screen
const [serverUrl, setServerUrl] = useState<string>();
const [isLogginIn, setIsLogginIn] = useState<boolean>(false);
// Handlers needed for dispatching stuff
const dispatch = useDispatch();
const navigation = useNavigation();
// Save creedentials to store and close the modal
const saveCredentials = useCallback((credentials) => {
dispatch(setJellyfinCredentials(credentials));
navigation.dispatch(StackActions.popToTop());
}, [navigation, dispatch]);
return (
<Modal>
{isLogginIn ? (
<CredentialGenerator
serverUrl={serverUrl as string}
onCredentialsRetrieved={saveCredentials}
/>
) : (
<View style={{ padding: 20}}>
<Text>Please enter your Jellyfin server URL first. Make sure to include the protocol and port</Text>
<Input
placeholder="https://jellyfin.yourserver.io/"
onChangeText={setServerUrl}
value={serverUrl}
keyboardType="url"
autoCapitalize="none"
autoCorrect={false}
/>
<Button title="Set server" onPress={() => setIsLogginIn(true)} disabled={!serverUrl?.length} />
</View>
)}
</Modal>
);
}

0
src/screens/types.ts Normal file
View File

34
src/store/index.ts Normal file
View File

@@ -0,0 +1,34 @@
import { configureStore, getDefaultMiddleware, combineReducers } from '@reduxjs/toolkit';
import { useSelector, TypedUseSelectorHook } from 'react-redux';
import AsyncStorage from '@react-native-community/async-storage';
import { persistStore, persistReducer } from 'redux-persist';
import logger from 'redux-logger';
const persistConfig = {
key: 'root',
storage: AsyncStorage,
};
import settings from './settings';
import music from './music';
const reducers = combineReducers({
settings,
music: music.reducer,
});
const persistedReducer = persistReducer(persistConfig, reducers);
const store = configureStore({
reducer: persistedReducer,
middleware: getDefaultMiddleware({ serializableCheck: false }).concat(logger, ),
});
export type AppState = ReturnType<typeof store.getState>;
export type AppDispatch = typeof store.dispatch;
export type AsyncThunkAPI = { state: AppState, dispatch: AppDispatch };
export const useTypedSelector: TypedUseSelectorHook<AppState> = useSelector;
export const persistedStore = persistStore(store);
export default store;

32
src/store/music/actions.ts Normal file
View File

@@ -0,0 +1,32 @@
import { createAsyncThunk, createEntityAdapter } from '@reduxjs/toolkit';
import { Album, AlbumTrack } from './types';
import { AsyncThunkAPI } from '..';
import { retrieveAlbums, retrieveAlbumTracks } from '../../utility/JellyfinApi';
export const albumAdapter = createEntityAdapter<Album>({
selectId: album => album.Id,
sortComparer: (a, b) => a.Name.localeCompare(b.Name),
});
export const fetchAllAlbums = createAsyncThunk<Album[], undefined, AsyncThunkAPI>(
'/albums/all',
async (empty, thunkAPI) => {
console.log('RETRIEVING ALBUMS');
const credentials = thunkAPI.getState().settings.jellyfin;
return retrieveAlbums(credentials) as Promise<Album[]>;
}
);
export const trackAdapter = createEntityAdapter<AlbumTrack>({
selectId: track => track.Id,
sortComparer: (a, b) => a.IndexNumber - b.IndexNumber,
});
export const fetchTracksByAlbum = createAsyncThunk<AlbumTrack[], string, AsyncThunkAPI>(
'/tracks/byAlbum',
async (ItemId, thunkAPI) => {
console.log('RETRIEVING ALBUMS');
const credentials = thunkAPI.getState().settings.jellyfin;
return retrieveAlbumTracks(ItemId, credentials) as Promise<AlbumTrack[]>;
}
);

41
src/store/music/index.ts Normal file
View File

@@ -0,0 +1,41 @@
import { fetchAllAlbums, albumAdapter, fetchTracksByAlbum, trackAdapter } from './actions';
import { createSlice } from '@reduxjs/toolkit';
const initialState = {
albums: {
...albumAdapter.getInitialState(),
isLoading: false,
},
tracks: {
...trackAdapter.getInitialState(),
isLoading: false,
},
};
const music = createSlice({
name: 'music',
initialState,
reducers: {},
extraReducers: builder => {
builder.addCase(fetchAllAlbums.fulfilled, (state, { payload }) => {
albumAdapter.setAll(state.albums, payload);
state.albums.isLoading = false;
});
builder.addCase(fetchAllAlbums.pending, (state) => { state.albums.isLoading = true; });
builder.addCase(fetchAllAlbums.rejected, (state) => { state.albums.isLoading = false; });
builder.addCase(fetchTracksByAlbum.fulfilled, (state, { payload }) => {
trackAdapter.setAll(state.tracks, payload);
// Also store all the track ids in the album
const album = state.albums.entities[payload[0].AlbumId];
if (album) {
album.Tracks = payload.map(d => d.Id);
}
state.tracks.isLoading = false;
});
builder.addCase(fetchTracksByAlbum.pending, (state) => { state.tracks.isLoading = true; });
builder.addCase(fetchTracksByAlbum.rejected, (state) => { state.tracks.isLoading = false; });
}
});
export default music;

75
src/store/music/types.ts Normal file
View File

@@ -0,0 +1,75 @@
import { Dictionary } from 'lodash';
export interface UserData {
PlaybackPositionTicks: number;
PlayCount: number;
IsFavorite: boolean;
Played: boolean;
Key: string;
}
export interface ArtistItem {
Name: string;
Id: string;
}
export interface AlbumArtist {
Name: string;
Id: string;
}
export interface ImageTags {
Primary: string;
}
export interface Album {
Name: string;
ServerId: string;
Id: string;
SortName: string;
RunTimeTicks: number;
ProductionYear: number;
IsFolder: boolean;
Type: string;
UserData: UserData;
PrimaryImageAspectRatio: number;
Artists: string[];
ArtistItems: ArtistItem[];
AlbumArtist: string;
AlbumArtists: AlbumArtist[];
ImageTags: ImageTags;
BackdropImageTags: any[];
LocationType: string;
Tracks?: string[];
}
export interface AlbumTrack {
Name: string;
ServerId: string;
Id: string;
RunTimeTicks: number;
ProductionYear: number;
IndexNumber: number;
IsFolder: boolean;
Type: string;
UserData: UserData;
Artists: string[];
ArtistItems: ArtistItem[];
Album: string;
AlbumId: string;
AlbumPrimaryImageTag: string;
AlbumArtist: string;
AlbumArtists: AlbumArtist[];
ImageTags: ImageTags;
BackdropImageTags: any[];
LocationType: string;
MediaType: string;
}
export interface State {
albums: {
ids: string[];
entities: Dictionary<Album>;
isLoading: boolean;
}
}

4
src/store/settings/actions.ts Normal file
View File

@@ -0,0 +1,4 @@
import { createAction } from '@reduxjs/toolkit';
export const setJellyfinCredentials = createAction<{ access_token: string, user_id: string, uri: string, deviced_id: string; }>('SET_JELLYFIN_CREDENTIALS');
export const setBitrate = createAction<number>('SET_BITRATE');

29
src/store/settings/index.ts Normal file
View File

@@ -0,0 +1,29 @@
import { createReducer } from '@reduxjs/toolkit';
import { setBitrate, setJellyfinCredentials } from './actions';
interface State {
jellyfin?: {
uri: string;
user_id: string;
access_token: string;
device_id: string;
}
bitrate: number;
}
const initialState: State = {
bitrate: 140000000
};
const settings = createReducer(initialState, {
[setJellyfinCredentials.type]: (state, action) => ({
...state,
jellyfin: action.payload,
}),
[setBitrate.type]: (state, action) => ({
...state,
bitrate: action.payload,
}),
});
export default settings;

76
src/utility/JellyfinApi.ts
View File

@@ -1,15 +1,18 @@
import { Track } from 'react-native-track-player'; import { Track } from 'react-native-track-player';
import { AppState, useTypedSelector } from '../store';
import { AlbumTrack } from '../store/music/types';
const JELLYFIN_SERVER = '***REMOVED***'; type Credentials = AppState['settings']['jellyfin'];
const API_KEY = '***REMOVED***';
const DEVICE_ID =
'***REMOVED***';
const USER_ID = '***REMOVED***';
const trackOptions: Record<string, string> = { function generateConfig(credentials: Credentials): RequestInit {
DeviceId: DEVICE_ID, return {
UserId: USER_ID, headers: {
api_key: API_KEY, 'X-Emby-Authorization': `MediaBrowser Client="", Device="", DeviceId="", Version="", Token="${credentials?.access_token}"`
}
};
}
const baseTrackOptions: Record<string, string> = {
// Not sure where this number refers to, but setting it to 140000000 appears // Not sure where this number refers to, but setting it to 140000000 appears
// to do wonders for making stuff work // to do wonders for making stuff work
MaxStreamingBitrate: '140000000', MaxStreamingBitrate: '140000000',
@@ -24,37 +27,33 @@ const trackOptions: Record<string, string> = {
Container: 'mp3,aac,m4a,m4b|aac,alac,m4a,m4b|alac', Container: 'mp3,aac,m4a,m4b|aac,alac,m4a,m4b|alac',
AudioCodec: 'aac', AudioCodec: 'aac',
static: 'true', static: 'true',
// These last few options appear to be redundant
// EnableRedirection: 'true',
// EnableRemoteMedia: 'false',
// // this should be generated client-side and is intended to be a unique value per stream URL
// PlaySessionId: Math.floor(Math.random() * 10000000).toString(),
// StartTimeTicks: '0',
}; };
const trackParams = new URLSearchParams(trackOptions).toString();
/** /**
* Generate a track object from a Jellyfin ItemId so that * Generate a track object from a Jellyfin ItemId so that
* react-native-track-player can easily consume it. * react-native-track-player can easily consume it.
*/ */
export async function generateTrack(ItemId: string): Promise<Track> { export function generateTrack(track: AlbumTrack, credentials: Credentials): Track {
// First off, fetch all the metadata for this particular track from the
// Jellyfin server
const track = await fetch(`${JELLYFIN_SERVER}/Users/${USER_ID}/Items/${ItemId}?api_key=${API_KEY}`)
.then(response => response.json());
// Also construct the URL for the stream // Also construct the URL for the stream
const url = encodeURI(`${JELLYFIN_SERVER}/Audio/${ItemId}/universal.mp3?${trackParams}`); const trackOptions = {
...baseTrackOptions,
UserId: credentials?.user_id || '',
api_key: credentials?.access_token || '',
DeviceId: credentials?.device_id || '',
};
const trackParams = new URLSearchParams(trackOptions).toString();
const url = encodeURI(`${credentials?.uri}/Audio/${track.Id}/universal.mp3?${trackParams}`);
return { return {
id: ItemId, id: track.Id,
url, url,
title: track.Name, title: track.Name,
artist: track.Artists.join(', '), artist: track.Artists.join(', '),
album: track.Album, album: track.Album,
genre: Array.isArray(track.Genres) ? track.Genres[0] : undefined, // genre: Array.isArray(track.Genres) ? track.Genres[0] : undefined,
artwork: getImage(ItemId), artwork: getImage(track.Id, credentials),
...generateConfig(credentials),
}; };
} }
@@ -66,10 +65,6 @@ const albumOptions = {
Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo', Fields: 'PrimaryImageAspectRatio,SortName,BasicSyncInfo',
ImageTypeLimit: '1', ImageTypeLimit: '1',
EnableImageTypes: 'Primary,Backdrop,Banner,Thumb', EnableImageTypes: 'Primary,Backdrop,Banner,Thumb',
api_key: API_KEY,
// StartIndex: '0',
// Limit: '100',
// ParentId: '7e64e319657a9516ec78490da03edccb',
}; };
const albumParams = new URLSearchParams(albumOptions).toString(); const albumParams = new URLSearchParams(albumOptions).toString();
@@ -77,8 +72,10 @@ const albumParams = new URLSearchParams(albumOptions).toString();
/** /**
* Retrieve all albums that are available on the Jellyfin server * Retrieve all albums that are available on the Jellyfin server
*/ */
export async function retrieveAlbums() { export async function retrieveAlbums(credentials: Credentials) {
const albums = await fetch(`${JELLYFIN_SERVER}/Users/${USER_ID}/Items?${albumParams}`) const config = generateConfig(credentials);
console.log(`${credentials?.uri}/Users/${credentials?.user_id}/Items?${albumParams}`);
const albums = await fetch(`${credentials?.uri}/Users/${credentials?.user_id}/Items?${albumParams}`, config)
.then(response => response.json()); .then(response => response.json());
return albums.Items; return albums.Items;
@@ -87,20 +84,25 @@ export async function retrieveAlbums() {
/** /**
* Retrieve a single album from the Emby server * Retrieve a single album from the Emby server
*/ */
export async function retrieveAlbumTracks(ItemId: string) { export async function retrieveAlbumTracks(ItemId: string, credentials: Credentials) {
const singleAlbumOptions = { const singleAlbumOptions = {
ParentId: ItemId, ParentId: ItemId,
SortBy: 'SortName', SortBy: 'SortName',
api_key: API_KEY,
}; };
const singleAlbumParams = new URLSearchParams(singleAlbumOptions).toString(); const singleAlbumParams = new URLSearchParams(singleAlbumOptions).toString();
const album = await fetch(`${JELLYFIN_SERVER}/Users/${USER_ID}/Items?${singleAlbumParams}`) const config = generateConfig(credentials);
const album = await fetch(`${credentials?.uri}/Users/${credentials?.user_id}/Items?${singleAlbumParams}`, config)
.then(response => response.json()); .then(response => response.json());
return album.Items; return album.Items;
} }
export function getImage(ItemId: string): string { export function getImage(ItemId: string, credentials: Credentials): string {
return encodeURI(`${JELLYFIN_SERVER}/Items/${ItemId}/Images/Primary?format=jpeg`); return encodeURI(`${credentials?.uri}/Items/${ItemId}/Images/Primary?format=jpeg`);
}
export function useGetImage() {
const credentials = useTypedSelector((state) => state.settings.jellyfin);
return (ItemId: string) => getImage(ItemId, credentials);
} }