@razorpay/blade
Version:
The Design System that powers Razorpay
8 lines (5 loc) • 6.85 kB
JavaScript
import _classCallCheck from '@babel/runtime/helpers/classCallCheck';
import _createClass from '@babel/runtime/helpers/createClass';
var POTATO_TIER_PATTERNS=[/swiftshader/,/llvmpipe/,/softpipe/,/microsoft basic render/,/virgl/];var LOW_TIER_PATTERNS=[/intel.*hd\s*(graphics)?\s*(2000|3000|4000|400|500|510|520|530)/,/intel.*gma/,/amd.*radeon.*r[2-5]\s/,/amd.*radeon.*hd\s*(6|7)\d{3}/,/nvidia.*geforce\s*(4|5|6|7|8|9)\d{2}[^0]/,/mali-(4|t[0-9]|g5[0-7])\d*/,/adreno\s*(3|4)\d{2}/,/powervr.*sgx/,/vivante/,/gc\d{3}[^0-9]/];var HIGH_TIER_PATTERNS=[/nvidia.*rtx/,/nvidia.*gtx\s*1[0-9]{3}/,/nvidia.*gtx\s*[2-9]\d{3}/,/nvidia.*quadro/,/nvidia.*titan/,/amd.*rx\s*(5|6|7)\d{3}/,/amd.*radeon\s*(pro|rx)\s*(vega|5|6|7)/,/radeon\s*r9/,/apple\s*(m[1-9]|a1[5-9]|a[2-9]\d)/,/adreno\s*(7[3-9]\d|8\d{2})/,/mali-g(7[1-9]|[89]\d|[1-9]\d{2})/,/gpu\s*family\s*(apple\s*[5-9]|apple\s*[1-9]\d)/];function isMobileDevice(){return /android|iphone|ipad|ipod|mobile/i.test(navigator.userAgent);}function getDeviceMemoryGB(){var mem=navigator.deviceMemory;return mem!=null?mem:null;}function getCpuCores(){var _navigator$hardwareCo;return (_navigator$hardwareCo=navigator.hardwareConcurrency)!=null?_navigator$hardwareCo:2;}function getGpuStrings(gl){var ext=gl.getExtension('WEBGL_debug_renderer_info');if(!ext)return {renderer:null,vendor:null};var renderer=gl.getParameter(ext.UNMASKED_RENDERER_WEBGL);var vendor=gl.getParameter(ext.UNMASKED_VENDOR_WEBGL);return {renderer:renderer,vendor:vendor};}function checkMajorPerformanceCaveat(){var canvas=document.createElement('canvas');var gl=canvas.getContext('webgl',{failIfMajorPerformanceCaveat:true});return gl===null;}function classifyByRendererString(renderer,vendor){if(!renderer&&!vendor)return null;var combined=`${renderer!=null?renderer:''} ${vendor!=null?vendor:''}`.toLowerCase();for(var pattern of POTATO_TIER_PATTERNS){if(pattern.test(combined))return 'potato';}for(var _pattern of LOW_TIER_PATTERNS){if(_pattern.test(combined))return 'low';}for(var _pattern2 of HIGH_TIER_PATTERNS){if(_pattern2.test(combined))return 'high';}return null;}function classifyByDeviceSignals(memoryGB,cores,mobile){if(memoryGB!==null&&memoryGB<=2)return 'low';if(cores<=2)return 'low';if(memoryGB!==null&&memoryGB>=8&&cores>=8&&!mobile)return 'high';if(memoryGB!==null&&memoryGB>=6&&cores>=6)return 'high';return 'mid';}var RENDER_SETTINGS={high:{maxPixelCount:1920*1080*4,minPixelRatio:2},mid:{maxPixelCount:1920*1080*2,minPixelRatio:1},low:{maxPixelCount:1280*720,minPixelRatio:1},potato:{maxPixelCount:0,minPixelRatio:1},unknown:{maxPixelCount:1920*1080*2,minPixelRatio:1}};var LEVEL_RENDER_SETTINGS={3:RENDER_SETTINGS.high,2:RENDER_SETTINGS.mid,1:RENDER_SETTINGS.low,0:RENDER_SETTINGS.low};var PerformanceManager=function(){function PerformanceManager(){_classCallCheck(this,PerformanceManager);}return _createClass(PerformanceManager,null,[{key:"detect",value:function detect(gl){var ownedCanvas=false;var ctx=gl!=null?gl:null;if(!ctx){var _canvas$getContext;var canvas=document.createElement('canvas');canvas.width=1;canvas.height=1;ctx=(_canvas$getContext=canvas.getContext('webgl'))!=null?_canvas$getContext:null;ownedCanvas=true;}var mobile=isMobileDevice();var memoryGB=getDeviceMemoryGB();var cores=getCpuCores();var hasMajorPerformanceCaveat=checkMajorPerformanceCaveat();var gpuRenderer=null;var gpuVendor=null;if(ctx){var _getGpuStrings=getGpuStrings(ctx),renderer=_getGpuStrings.renderer,vendor=_getGpuStrings.vendor;gpuRenderer=renderer;gpuVendor=vendor;if(ownedCanvas){ctx=null;}}var tier;if(hasMajorPerformanceCaveat){tier='potato';}else {var _classifyByRendererSt;tier=(_classifyByRendererSt=classifyByRendererString(gpuRenderer,gpuVendor))!=null?_classifyByRendererSt:classifyByDeviceSignals(memoryGB,cores,mobile);}if(tier==='high'&&mobile){tier='mid';}return {tier:tier,gpuRenderer:gpuRenderer,gpuVendor:gpuVendor,deviceMemory:memoryGB,hardwareConcurrency:cores,isMobile:mobile,hasMajorPerformanceCaveat:hasMajorPerformanceCaveat,renderSettings:RENDER_SETTINGS[tier]};}},{key:"getRenderSettings",value:function getRenderSettings(gl){return PerformanceManager.detect(gl).renderSettings;}}]);}();var TIER_INITIAL_STATE={high:3,mid:2,low:1,potato:0,unknown:2};var WebGLPerformanceController=function(){function WebGLPerformanceController(_ref){var _this=this;var gl=_ref.gl,_ref$onLevelChange=_ref.onLevelChange,onLevelChange=_ref$onLevelChange===void 0?null:_ref$onLevelChange;_classCallCheck(this,WebGLPerformanceController);this.cooldown=3000;this.lastChange=0;this.frameCount=0;this.lastTime=performance.now();this.fps=60;this.rafId=null;this.disposed=false;this.handleVisibilityChange=function(){if(document.hidden){if(_this.rafId!==null){cancelAnimationFrame(_this.rafId);_this.rafId=null;}}else {_this.frameCount=0;_this.lastTime=performance.now();_this.fps=60;_this.startMonitoring();}};this.onLevelChange=onLevelChange;var _PerformanceManager$d=PerformanceManager.detect(gl),tier=_PerformanceManager$d.tier;this.level=TIER_INITIAL_STATE[tier];if(this.level===0){this.forceStaticFallback();return;}onLevelChange==null?void 0:onLevelChange(this.level);this.startMonitoring();document.addEventListener('visibilitychange',this.handleVisibilityChange);}return _createClass(WebGLPerformanceController,[{key:"setLevel",value:function setLevel(level){var _this$onLevelChange;if(this.level===level)return;var now=performance.now();if(now-this.lastChange<this.cooldown)return;this.level=level;this.lastChange=now;if(level===0){this.forceStaticFallback();return;}(_this$onLevelChange=this.onLevelChange)==null?void 0:_this$onLevelChange.call(this,level);}},{key:"forceStaticFallback",value:function forceStaticFallback(){var _this$onLevelChange2;this.level=0;(_this$onLevelChange2=this.onLevelChange)==null?void 0:_this$onLevelChange2.call(this,0);}},{key:"evaluatePerformance",value:function evaluatePerformance(){if(this.fps<20){this.setLevel(0);}else if(this.fps<40){this.setLevel(1);}else if(this.fps<55){this.setLevel(2);}else {this.setLevel(3);}}},{key:"startMonitoring",value:function startMonitoring(){var _this2=this;var _loop=function loop(){if(_this2.disposed)return;var now=performance.now();_this2.frameCount++;if(now-_this2.lastTime>=1000){_this2.fps=_this2.frameCount;_this2.frameCount=0;_this2.lastTime=now;_this2.evaluatePerformance();}_this2.rafId=requestAnimationFrame(_loop);};this.rafId=requestAnimationFrame(_loop);}},{key:"isPotato",value:function isPotato(){return this.level===0;}},{key:"getLevel",value:function getLevel(){return this.level;}},{key:"dispose",value:function dispose(){this.disposed=true;if(this.rafId!==null){cancelAnimationFrame(this.rafId);this.rafId=null;}document.removeEventListener('visibilitychange',this.handleVisibilityChange);}}]);}();
export { LEVEL_RENDER_SETTINGS, RENDER_SETTINGS, WebGLPerformanceController };
//# sourceMappingURL=PerformanceManager.js.map