-
Notifications
You must be signed in to change notification settings - Fork 2.9k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
New preferences page layout #21852
Merged
Merged
New preferences page layout #21852
Changes from 11 commits
Commits
Show all changes
47 commits
Select commit
Hold shift + click to select a range
1dac0bc
Add asset for PreferencesDJ.json
roryabraham 7c9774b
Aggregate LottieAnimations in a single file
roryabraham 0d94495
Extract HeaderWithBackButton propTypes to separate file
roryabraham 7b28fe4
Convert to functional component
roryabraham 122f2c2
Implement useDelayToggleButtonState hook
roryabraham 44ff6c8
Create IllustratedHeaderPageLayout component
roryabraham b8d6631
Implement IllustratedHeaderPageLayout for the PreferencesPage
roryabraham 33c8378
Use useLocalize hook
roryabraham 090ae41
Create useEnvironment hook
roryabraham 9ab59ba
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham ccaaa31
Use canvas renderer instead of svg
roryabraham 4dfd392
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham 11df205
use CONST for accessibilityRoleg
roryabraham 72b663d
Use prop destructuring for IllustratedHeaderPageLayout
roryabraham 7c8f8d0
Use prop destructuring for HeaderWithBackButton
roryabraham 1f59a03
Remove unused defaultProps
roryabraham 74f2c76
alphabetize props
roryabraham e3631d5
Wrap header with ScrollView
roryabraham 81c199e
Fix overscroll bottom issue
roryabraham 91f34ac
Create useOverscrollMeasurement hook
roryabraham 0628574
Remove unused import
roryabraham d0ba9ca
Remove inline style
roryabraham 8ed11f9
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham de3a9ca
Implement layout adjustments
roryabraham d6a5698
Hide scroll indicators (for macOS safari)
roryabraham 32617a0
Fix overscroll issue on iOS
roryabraham 707af5d
Fix header color regression
roryabraham cae0636
Add ivory for icon and title color
roryabraham 4626110
Use opacity 0.8
roryabraham 3a651ba
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham c547243
Create context for environment
roryabraham a5ba02f
Remove shiftUpOnePixel style
roryabraham 8fd8fc0
Add missing useEffect dependency
roryabraham c95d408
Improve clarity of hook, now called useThrottledButtonState
roryabraham 4ce61f7
Remove unused autoReset prop
roryabraham 551e28a
Update PressableWithDelayToggle to use new hook
roryabraham 7f398cd
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham 1cfad23
Use useContext in withEnvironment
roryabraham d6141af
Memoize contextValue
roryabraham 8b4f639
Change propTypes name back to reduce diff
roryabraham 9f12b10
Fix Sidebar tests
roryabraham dff8ab7
Add missing propType comment
roryabraham 7612821
Remove unused useOverscrollMeasurement hook
roryabraham 3be7917
Merge branch 'main' into Rory-PreferencesNewLayout
roryabraham ae9d033
Apply changes from HeaderWithBackButton
roryabraham 377e4e6
Remove outdated localization props from PreferencesPage
roryabraham 1e2a9a3
Remove unused prop
roryabraham File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,21 @@ | ||
diff --git a/node_modules/react-native-web-lottie/dist/index.js b/node_modules/react-native-web-lottie/dist/index.js | ||
index 7cd6b42..d0a405b 100644 | ||
--- a/node_modules/react-native-web-lottie/dist/index.js | ||
+++ b/node_modules/react-native-web-lottie/dist/index.js | ||
@@ -1 +1 @@ | ||
-var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactDom=_interopRequireDefault(require("react-dom"));var _View=_interopRequireDefault(require("react-native-web/dist/exports/View"));var _lottieWeb=_interopRequireDefault(require("lottie-web"));var _jsxFileName="/Users/louislagrange/Documents/Projets/react-native-web-community/react-native-web-lottie/src/index.js";var Animation=function(_PureComponent){(0,_inherits2.default)(Animation,_PureComponent);function Animation(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Animation);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Animation)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.animationDOMNode=null;_this.loadAnimation=function(props){if(_this.anim){_this.anim.destroy();}_this.anim=_lottieWeb.default.loadAnimation({container:_this.animationDOMNode,animationData:props.source,renderer:'svg',loop:props.loop||false,autoplay:props.autoPlay,rendererSettings:props.rendererSettings||{}});if(props.onAnimationFinish){_this.anim.addEventListener('complete',props.onAnimationFinish);}};_this.setAnimationDOMNode=function(ref){return _this.animationDOMNode=_reactDom.default.findDOMNode(ref);};_this.play=function(){if(!_this.anim){return;}for(var _len2=arguments.length,frames=new Array(_len2),_key2=0;_key2<_len2;_key2++){frames[_key2]=arguments[_key2];}_this.anim.playSegments(frames,true);};_this.reset=function(){if(!_this.anim){return;}_this.anim.stop();};return _this;}(0,_createClass2.default)(Animation,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.loadAnimation(this.props);if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.addListener(function(progress){var value=progress.value;var frame=value/(1/_this2.anim.getDuration(true));_this2.anim.goToAndStop(frame,true);});}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.removeAllListeners();}}},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.source&&nextProps.source&&this.props.source.nm!==nextProps.source.nm){this.loadAnimation(nextProps);}}},{key:"render",value:function render(){return _react.default.createElement(_View.default,{style:this.props.style,ref:this.setAnimationDOMNode,__source:{fileName:_jsxFileName,lineNumber:71}});}}]);return Animation;}(_react.PureComponent);var _default=_react.default.forwardRef(function(props,ref){return _react.default.createElement(Animation,(0,_extends2.default)({},props,{ref:typeof ref=='function'?function(c){return ref(c&&c.anim);}:ref,__source:{fileName:_jsxFileName,lineNumber:76}}));});exports.default=_default; | ||
\ No newline at end of file | ||
+var _interopRequireDefault=require("@babel/runtime/helpers/interopRequireDefault");var _interopRequireWildcard=require("@babel/runtime/helpers/interopRequireWildcard");Object.defineProperty(exports,"__esModule",{value:true});exports.default=void 0;var _extends2=_interopRequireDefault(require("@babel/runtime/helpers/extends"));var _classCallCheck2=_interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));var _createClass2=_interopRequireDefault(require("@babel/runtime/helpers/createClass"));var _possibleConstructorReturn2=_interopRequireDefault(require("@babel/runtime/helpers/possibleConstructorReturn"));var _getPrototypeOf3=_interopRequireDefault(require("@babel/runtime/helpers/getPrototypeOf"));var _inherits2=_interopRequireDefault(require("@babel/runtime/helpers/inherits"));var _react=_interopRequireWildcard(require("react"));var _reactDom=_interopRequireDefault(require("react-dom"));var _View=_interopRequireDefault(require("react-native-web/dist/exports/View"));var _lottieWeb=_interopRequireDefault(require("lottie-web"));var _jsxFileName="/Users/louislagrange/Documents/Projets/react-native-web-community/react-native-web-lottie/src/index.js";var Animation=function(_PureComponent){(0,_inherits2.default)(Animation,_PureComponent);function Animation(){var _getPrototypeOf2;var _this;(0,_classCallCheck2.default)(this,Animation);for(var _len=arguments.length,args=new Array(_len),_key=0;_key<_len;_key++){args[_key]=arguments[_key];}_this=(0,_possibleConstructorReturn2.default)(this,(_getPrototypeOf2=(0,_getPrototypeOf3.default)(Animation)).call.apply(_getPrototypeOf2,[this].concat(args)));_this.animationDOMNode=null;_this.loadAnimation=function(props){if(_this.anim){_this.anim.destroy();}_this.anim=_lottieWeb.default.loadAnimation({container:_this.animationDOMNode,animationData:props.source,renderer:'canvas',loop:props.loop||false,autoplay:props.autoPlay,rendererSettings:props.rendererSettings||{}});if(props.onAnimationFinish){_this.anim.addEventListener('complete',props.onAnimationFinish);}};_this.setAnimationDOMNode=function(ref){return _this.animationDOMNode=_reactDom.default.findDOMNode(ref);};_this.play=function(){if(!_this.anim){return;}for(var _len2=arguments.length,frames=new Array(_len2),_key2=0;_key2<_len2;_key2++){frames[_key2]=arguments[_key2];}_this.anim.playSegments(frames,true);};_this.reset=function(){if(!_this.anim){return;}_this.anim.stop();};return _this;}(0,_createClass2.default)(Animation,[{key:"componentDidMount",value:function componentDidMount(){var _this2=this;this.loadAnimation(this.props);if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.addListener(function(progress){var value=progress.value;var frame=value/(1/_this2.anim.getDuration(true));_this2.anim.goToAndStop(frame,true);});}}},{key:"componentWillUnmount",value:function componentWillUnmount(){if(typeof this.props.progress==='object'&&this.props.progress._listeners){this.props.progress.removeAllListeners();}}},{key:"UNSAFE_componentWillReceiveProps",value:function UNSAFE_componentWillReceiveProps(nextProps){if(this.props.source&&nextProps.source&&this.props.source.nm!==nextProps.source.nm){this.loadAnimation(nextProps);}}},{key:"render",value:function render(){return _react.default.createElement(_View.default,{style:this.props.style,ref:this.setAnimationDOMNode,__source:{fileName:_jsxFileName,lineNumber:71}});}}]);return Animation;}(_react.PureComponent);var _default=_react.default.forwardRef(function(props,ref){return _react.default.createElement(Animation,(0,_extends2.default)({},props,{ref:typeof ref=='function'?function(c){return ref(c&&c.anim);}:ref,__source:{fileName:_jsxFileName,lineNumber:76}}));});exports.default=_default; | ||
diff --git a/node_modules/react-native-web-lottie/src/index.js b/node_modules/react-native-web-lottie/src/index.js | ||
index da0e363..f37104a 100644 | ||
--- a/node_modules/react-native-web-lottie/src/index.js | ||
+++ b/node_modules/react-native-web-lottie/src/index.js | ||
@@ -38,7 +38,7 @@ class Animation extends PureComponent { | ||
this.anim = lottie.loadAnimation({ | ||
container: this.animationDOMNode, | ||
animationData: props.source, | ||
- renderer: 'svg', | ||
+ renderer: 'canvas', | ||
loop: props.loop || false, | ||
autoplay: props.autoPlay, | ||
rendererSettings: props.rendererSettings || {}, |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I found this seems to yield better framerates and also fixes a display but on iOS Safari with different animation (not yet included in the app)
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I noticed that on android web, the animation was extremely janky. When running it against localhost, it did not simply load.
Screen.Recording.2023-07-17.at.1.06.53.AM.mov