Something went wrong. Try again.
Bluesky app fork with some witchin' additions 💫 forked from jollywhoppers.com/witchsky.app
Something went wrong. Try again.
11 kB · 389 lines
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390diff --git a/lib/module/component/PerformanceMonitor.js b/lib/module/component/PerformanceMonitor.jsindex 9c98d6c..70ada9f 100644--- a/lib/module/component/PerformanceMonitor.js+++ b/lib/module/component/PerformanceMonitor.js@@ -1,125 +1,5 @@ 'use strict'; -import React, { useEffect, useRef } from 'react';-import { StyleSheet, TextInput, View } from 'react-native';-import { addWhitelistedNativeProps } from "../ConfigHelper.js";-import { createAnimatedComponent } from "../createAnimatedComponent/index.js";-import { useAnimatedProps, useFrameCallback, useSharedValue } from "../hook/index.js";-function createCircularDoublesBuffer(size) {- 'worklet';-- return {- next: 0,- buffer: new Float32Array(size),- size,- count: 0,- push(value) {- const oldValue = this.buffer[this.next];- const oldCount = this.count;- this.buffer[this.next] = value;- this.next = (this.next + 1) % this.size;- this.count = Math.min(this.size, this.count + 1);- return oldCount === this.size ? oldValue : null;- },- front() {- const notEmpty = this.count > 0;- if (notEmpty) {- const current = this.next - 1;- const index = current < 0 ? this.size - 1 : current;- return this.buffer[index];- }- return null;- },- back() {- const notEmpty = this.count > 0;- return notEmpty ? this.buffer[this.next] : null;- }- };-}-const DEFAULT_BUFFER_SIZE = 20;-addWhitelistedNativeProps({- text: true-});-const AnimatedTextInput = createAnimatedComponent(TextInput);-function loopAnimationFrame(fn) {- let lastTime = 0;- function loop() {- requestAnimationFrame(time => {- if (lastTime > 0) {- fn(lastTime, time);- }- lastTime = time;- requestAnimationFrame(loop);- });- }- loop();-}-function getFps(renderTimeInMs) {- 'worklet';-- return 1000 / renderTimeInMs;-}-function completeBufferRoutine(buffer, timestamp) {- 'worklet';-- timestamp = Math.round(timestamp);- const droppedTimestamp = buffer.push(timestamp) ?? timestamp;- const measuredRangeDuration = timestamp - droppedTimestamp;- return getFps(measuredRangeDuration / buffer.count);-}-function JsPerformance({- smoothingFrames-}) {- const jsFps = useSharedValue(null);- const totalRenderTime = useSharedValue(0);- const circularBuffer = useRef(createCircularDoublesBuffer(smoothingFrames));- useEffect(() => {- loopAnimationFrame((_, timestamp) => {- timestamp = Math.round(timestamp);- const currentFps = completeBufferRoutine(circularBuffer.current, timestamp);-- // JS fps have to be measured every 2nd frame,- // thus 2x multiplication has to occur here- jsFps.value = (currentFps * 2).toFixed(0);- });- }, [jsFps, totalRenderTime]);- const animatedProps = useAnimatedProps(() => {- const text = 'JS: ' + (jsFps.value ?? 'N/A') + ' ';- return {- text,- defaultValue: text- };- });- return <View style={styles.container}>- <AnimatedTextInput style={styles.text} animatedProps={animatedProps} editable={false} />- </View>;-}-function UiPerformance({- smoothingFrames-}) {- const uiFps = useSharedValue(null);- const circularBuffer = useSharedValue(null);- useFrameCallback(({- timestamp- }) => {- if (circularBuffer.value === null) {- circularBuffer.value = createCircularDoublesBuffer(smoothingFrames);- }- timestamp = Math.round(timestamp);- const currentFps = completeBufferRoutine(circularBuffer.value, timestamp);- uiFps.value = currentFps.toFixed(0);- });- const animatedProps = useAnimatedProps(() => {- const text = 'UI: ' + (uiFps.value ?? 'N/A') + ' ';- return {- text,- defaultValue: text- };- });- return <View style={styles.container}>- <AnimatedTextInput style={styles.text} animatedProps={animatedProps} editable={false} />- </View>;-} /** * A component that lets you measure fps values on JS and UI threads on both the * Paper and Fabric architectures.@@ -127,38 +7,7 @@ function UiPerformance({ * @param smoothingFrames - Determines amount of saved frames which will be used * for fps value smoothing. */-export function PerformanceMonitor({- smoothingFrames = DEFAULT_BUFFER_SIZE-}) {- return <View style={styles.monitor}>- <JsPerformance smoothingFrames={smoothingFrames} />- <UiPerformance smoothingFrames={smoothingFrames} />- </View>;+export function PerformanceMonitor() {+ return null; }-const styles = StyleSheet.create({- monitor: {- flexDirection: 'row',- position: 'absolute',- backgroundColor: '#0006',- zIndex: 1000- },- header: {- fontSize: 14,- color: '#ffff',- paddingHorizontal: 5- },- text: {- fontSize: 13,- fontVariant: ['tabular-nums'],- color: '#ffff',- fontFamily: 'monospace',- paddingHorizontal: 3- },- container: {- alignItems: 'center',- justifyContent: 'center',- flexDirection: 'row',- flexWrap: 'wrap'- }-}); //# sourceMappingURL=PerformanceMonitor.js.mapdiff --git a/src/component/PerformanceMonitor.tsx b/src/component/PerformanceMonitor.tsxindex ff8fc8a..34dde79 100644--- a/src/component/PerformanceMonitor.tsx+++ b/src/component/PerformanceMonitor.tsx@@ -1,170 +1,5 @@ 'use strict'; -import React, { useEffect, useRef } from 'react';-import { StyleSheet, TextInput, View } from 'react-native';--import { addWhitelistedNativeProps } from '../ConfigHelper';-import { createAnimatedComponent } from '../createAnimatedComponent';-import type { FrameInfo } from '../frameCallback';-import { useAnimatedProps, useFrameCallback, useSharedValue } from '../hook';--type CircularBuffer = ReturnType<typeof createCircularDoublesBuffer>;-function createCircularDoublesBuffer(size: number) {- 'worklet';-- return {- next: 0 as number,- buffer: new Float32Array(size),- size,- count: 0 as number,-- push(value: number): number | null {- const oldValue = this.buffer[this.next];- const oldCount = this.count;- this.buffer[this.next] = value;-- this.next = (this.next + 1) % this.size;- this.count = Math.min(this.size, this.count + 1);- return oldCount === this.size ? oldValue : null;- },-- front(): number | null {- const notEmpty = this.count > 0;- if (notEmpty) {- const current = this.next - 1;- const index = current < 0 ? this.size - 1 : current;- return this.buffer[index];- }- return null;- },-- back(): number | null {- const notEmpty = this.count > 0;- return notEmpty ? this.buffer[this.next] : null;- },- };-}--const DEFAULT_BUFFER_SIZE = 20;-addWhitelistedNativeProps({ text: true });-const AnimatedTextInput = createAnimatedComponent(TextInput);--function loopAnimationFrame(fn: (lastTime: number, time: number) => void) {- let lastTime = 0;-- function loop() {- requestAnimationFrame((time) => {- if (lastTime > 0) {- fn(lastTime, time);- }- lastTime = time;- requestAnimationFrame(loop);- });- }-- loop();-}--function getFps(renderTimeInMs: number): number {- 'worklet';- return 1000 / renderTimeInMs;-}--function completeBufferRoutine(- buffer: CircularBuffer,- timestamp: number-): number {- 'worklet';- timestamp = Math.round(timestamp);-- const droppedTimestamp = buffer.push(timestamp) ?? timestamp;-- const measuredRangeDuration = timestamp - droppedTimestamp;-- return getFps(measuredRangeDuration / buffer.count);-}--function JsPerformance({ smoothingFrames }: { smoothingFrames: number }) {- const jsFps = useSharedValue<string | null>(null);- const totalRenderTime = useSharedValue(0);- const circularBuffer = useRef<CircularBuffer>(- createCircularDoublesBuffer(smoothingFrames)- );-- useEffect(() => {- loopAnimationFrame((_, timestamp) => {- timestamp = Math.round(timestamp);-- const currentFps = completeBufferRoutine(- circularBuffer.current,- timestamp- );-- // JS fps have to be measured every 2nd frame,- // thus 2x multiplication has to occur here- jsFps.value = (currentFps * 2).toFixed(0);- });- }, [jsFps, totalRenderTime]);-- const animatedProps = useAnimatedProps(() => {- const text = 'JS: ' + (jsFps.value ?? 'N/A') + ' ';- return { text, defaultValue: text };- });-- return (- <View style={styles.container}>- <AnimatedTextInput- style={styles.text}- animatedProps={animatedProps}- editable={false}- />- </View>- );-}--function UiPerformance({ smoothingFrames }: { smoothingFrames: number }) {- const uiFps = useSharedValue<string | null>(null);- const circularBuffer = useSharedValue<CircularBuffer | null>(null);-- useFrameCallback(({ timestamp }: FrameInfo) => {- if (circularBuffer.value === null) {- circularBuffer.value = createCircularDoublesBuffer(smoothingFrames);- }-- timestamp = Math.round(timestamp);-- const currentFps = completeBufferRoutine(circularBuffer.value, timestamp);-- uiFps.value = currentFps.toFixed(0);- });-- const animatedProps = useAnimatedProps(() => {- const text = 'UI: ' + (uiFps.value ?? 'N/A') + ' ';- return { text, defaultValue: text };- });-- return (- <View style={styles.container}>- <AnimatedTextInput- style={styles.text}- animatedProps={animatedProps}- editable={false}- />- </View>- );-}--export type PerformanceMonitorProps = {- /**- * Sets amount of previous frames used for smoothing at highest expectedFps.- *- * Automatically scales down at lower frame rates.- *- * Affects jumpiness of the FPS measurements value.- */- smoothingFrames?: number;-};- /** * A component that lets you measure fps values on JS and UI threads on both the * Paper and Fabric architectures.@@ -172,40 +7,6 @@ export type PerformanceMonitorProps = { * @param smoothingFrames - Determines amount of saved frames which will be used * for fps value smoothing. */-export function PerformanceMonitor({- smoothingFrames = DEFAULT_BUFFER_SIZE,-}: PerformanceMonitorProps) {- return (- <View style={styles.monitor}>- <JsPerformance smoothingFrames={smoothingFrames} />- <UiPerformance smoothingFrames={smoothingFrames} />- </View>- );+export function PerformanceMonitor() {+ return null; }--const styles = StyleSheet.create({- monitor: {- flexDirection: 'row',- position: 'absolute',- backgroundColor: '#0006',- zIndex: 1000,- },- header: {- fontSize: 14,- color: '#ffff',- paddingHorizontal: 5,- },- text: {- fontSize: 13,- fontVariant: ['tabular-nums'],- color: '#ffff',- fontFamily: 'monospace',- paddingHorizontal: 3,- },- container: {- alignItems: 'center',- justifyContent: 'center',- flexDirection: 'row',- flexWrap: 'wrap',- },-});