@multiplayer-app/session-recorder-react-native 1.0.1-beta.3 → 1.0.1-beta.5

package/android/src/main/java/com/multiplayer/sessionrecordernative/SessionRecorderNativePackage.kt

@@ -0,0 +1,33 @@
+package com.multiplayer.sessionrecordernative
+
+import com.facebook.react.BaseReactPackage
+import com.facebook.react.bridge.NativeModule
+import com.facebook.react.bridge.ReactApplicationContext
+import com.facebook.react.module.model.ReactModuleInfo
+import com.facebook.react.module.model.ReactModuleInfoProvider
+import java.util.HashMap
+
+class SessionRecorderNativePackage : BaseReactPackage() {
+  override fun getModule(name: String, reactContext: ReactApplicationContext): NativeModule? {
+    return if (name == SessionRecorderNativeModule.NAME) {
+      SessionRecorderNativeModule(reactContext)
+    } else {
+      null
+    }
+  }
+
+  override fun getReactModuleInfoProvider(): ReactModuleInfoProvider {
+    return ReactModuleInfoProvider {
+      val moduleInfos: MutableMap<String, ReactModuleInfo> = HashMap()
+      moduleInfos[SessionRecorderNativeModule.NAME] = ReactModuleInfo(
+        SessionRecorderNativeModule.NAME,
+        SessionRecorderNativeModule.NAME,
+        false,  // canOverrideExistingModule
+        false,  // needsEagerInit
+        false,  // isCxxModule
+        true // isTurboModule
+      )
+      moduleInfos
+    }
+  }
+}

package/android/src/main/java/com/multiplayer/sessionrecordernative/model/TargetInfo.kt

@@ -0,0 +1,9 @@
+package com.multiplayer.sessionrecordernative.model
+
+data class TargetInfo(
+        val identifier: String,
+        val label: String?,
+        val role: String?,
+        val testId: String?,
+        val text: String?
+)

package/android/src/main/java/com/multiplayer/sessionrecordernative/util/ViewUtils.kt

@@ -0,0 +1,72 @@
+package com.multiplayer.sessionrecordernative.util
+
+import android.graphics.PointF
+import android.view.View
+import android.view.ViewGroup
+import android.widget.*
+import com.multiplayer.sessionrecordernative.model.TargetInfo
+
+object ViewUtils {
+  fun findTargetView(point: PointF, rootView: ViewGroup?): TargetInfo {
+    if (rootView == null) {
+      return TargetInfo("unknown", null, null, null, null)
+    }
+
+    val targetView =
+            findViewAtPoint(point, rootView) ?: return TargetInfo("unknown", null, null, null, null)
+
+    val identifier =
+            targetView.contentDescription?.toString()
+                    ?: targetView.tag?.toString() ?: "view-${targetView.hashCode()}"
+
+    val label = targetView.contentDescription?.toString()
+    val role = getAccessibilityRole(targetView)
+    val testId = targetView.tag?.toString()
+
+    val text =
+            when (targetView) {
+              is TextView -> targetView.text?.toString()
+              is Button -> targetView.text?.toString()
+              is EditText -> targetView.text?.toString() ?: targetView.hint?.toString()
+              else -> null
+            }
+
+    return TargetInfo(identifier, label, role, testId, text)
+  }
+
+  private fun findViewAtPoint(point: PointF, viewGroup: ViewGroup): View? {
+    for (i in viewGroup.childCount - 1 downTo 0) {
+      val child = viewGroup.getChildAt(i)
+      if (child.visibility == View.VISIBLE && child.alpha > 0.01f) {
+        val location = IntArray(2)
+        child.getLocationOnScreen(location)
+        val childRect =
+                android.graphics.Rect(
+                        location[0],
+                        location[1],
+                        location[0] + child.width,
+                        location[1] + child.height
+                )
+
+        if (childRect.contains(point.x.toInt(), point.y.toInt())) {
+          return if (child is ViewGroup) {
+            findViewAtPoint(point, child) ?: child
+          } else {
+            child
+          }
+        }
+      }
+    }
+    return null
+  }
+
+  private fun getAccessibilityRole(view: View): String? {
+    return when (view) {
+      is Button -> "button"
+      is EditText -> "textbox"
+      is ImageView -> "image"
+      is TextView -> "text"
+      else -> null
+    }
+  }
+}

package/ios/SessionRecorderNative.podspec

@@ -18,9 +18,11 @@ Pod::Spec.new do |s|
 
   s.dependency "React-Core"
   s.dependency "React"
+  s.dependency "React-Codegen"
 
-  # Ensure proper linking for Expo
+  # Turbo Module support
   s.pod_target_xcconfig = {
-    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/React-Core/React\""
+    "HEADER_SEARCH_PATHS" => "\"$(PODS_ROOT)/React-Core/React\"",
+    "DEFINES_MODULE" => "YES"
   }
 end

package/ios/SessionRecorderNative.swift

@@ -3,7 +3,7 @@ import React
 import WebKit
 
 @objc(SessionRecorderNative)
-class SessionRecorderNative: RCTEventEmitter, UIGestureRecognizerDelegate {
+class SessionRecorderNative: RCTEventEmitter, UIGestureRecognizerDelegate, SessionRecorderNativeSpec {
 
   // Configuration options
   private var maskTextInputs: Bool = true

package/ios/SessionRecorderNativeSpec.swift

@@ -2,13 +2,13 @@ import Foundation
 import React
 
 @objc(SessionRecorderNativeSpec)
-class SessionRecorderNativeSpec: NSObject, RCTBridgeModule {
+class SessionRecorderNativeSpec: NSObject, RCTTurboModule {
 
-  static func moduleName() -> String! {
+  @objc static func moduleName() -> String! {
     return "SessionRecorderNative"
   }
 
-  static func requiresMainQueueSetup() -> Bool {
+  @objc static func requiresMainQueueSetup() -> Bool {
     return true
   }
 

package/lib/module/components/ScreenRecorderView/ScreenRecorderView.js

@@ -0,0 +1,23 @@
+"use strict";
+
+import SessionRecorder from '@multiplayer-app/session-recorder-react-native';
+import { View } from 'react-native';
+import { jsx as _jsx } from "react/jsx-runtime";
+export const ScreenRecorderView = ({
+  children
+}) => {
+  // Callback ref to set the viewshot ref immediately when available
+  const setViewShotRef = ref => {
+    if (ref) {
+      SessionRecorder.setViewShotRef?.(ref);
+    }
+  };
+  return /*#__PURE__*/_jsx(View, {
+    ref: setViewShotRef,
+    style: {
+      flex: 1
+    },
+    children: children
+  });
+};
+//# sourceMappingURL=ScreenRecorderView.js.map

package/lib/module/components/ScreenRecorderView/ScreenRecorderView.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["SessionRecorder","View","jsx","_jsx","ScreenRecorderView","children","setViewShotRef","ref","style","flex"],"sourceRoot":"../../../../src","sources":["components/ScreenRecorderView/ScreenRecorderView.tsx"],"mappings":";;AAAA,OAAOA,eAAe,MAAM,gDAAgD;AAE5E,SAASC,IAAI,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA;AAIpC,OAAO,MAAMC,kBAAkB,GAAGA,CAAC;EAAEC;AAAkC,CAAC,KAAK;EAC3E;EACA,MAAMC,cAAc,GAAIC,GAAoB,IAAK;IAC/C,IAAIA,GAAG,EAAE;MACPP,eAAe,CAACM,cAAc,GAAGC,GAAG,CAAC;IACvC;EACF,CAAC;EAED,oBACEJ,IAAA,CAACF,IAAI;IAACM,GAAG,EAAED,cAAe;IAACE,KAAK,EAAE;MAAEC,IAAI,EAAE;IAAE,CAAE;IAAAJ,QAAA,EAC3CA;EAAQ,CACL,CAAC;AAEX,CAAC","ignoreList":[]}

package/lib/module/components/ScreenRecorderView/index.js

@@ -0,0 +1,4 @@
+"use strict";
+
+export * from "./ScreenRecorderView.js";
+//# sourceMappingURL=index.js.map

package/lib/module/components/ScreenRecorderView/index.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sourceRoot":"../../../../src","sources":["components/ScreenRecorderView/index.ts"],"mappings":";;AAAA,cAAc,yBAAsB","ignoreList":[]}

package/lib/module/components/SessionRecorderWidget/ErrorBanner.js

@@ -0,0 +1,64 @@
+"use strict";
+
+import React from 'react';
+import { View, Text, Pressable, StyleSheet } from 'react-native';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const ErrorBanner = ({
+  error,
+  onDismiss
+}) => {
+  return /*#__PURE__*/_jsx(View, {
+    style: styles.container,
+    children: /*#__PURE__*/_jsxs(View, {
+      style: styles.content,
+      children: [/*#__PURE__*/_jsx(Text, {
+        style: styles.errorText,
+        children: error
+      }), /*#__PURE__*/_jsx(Pressable, {
+        onPress: onDismiss,
+        style: styles.dismissButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: styles.dismissText,
+          children: "\u2715"
+        })
+      })]
+    })
+  });
+};
+const styles = StyleSheet.create({
+  container: {
+    backgroundColor: '#ff4444',
+    paddingHorizontal: 16,
+    paddingVertical: 12,
+    marginHorizontal: 16,
+    marginTop: 8,
+    borderRadius: 8
+  },
+  content: {
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between'
+  },
+  errorText: {
+    color: 'white',
+    fontSize: 14,
+    flex: 1,
+    marginRight: 8
+  },
+  dismissButton: {
+    padding: 4,
+    borderRadius: 12,
+    backgroundColor: 'rgba(255, 255, 255, 0.2)',
+    width: 24,
+    height: 24,
+    alignItems: 'center',
+    justifyContent: 'center'
+  },
+  dismissText: {
+    color: 'white',
+    fontSize: 12,
+    fontWeight: 'bold'
+  }
+});
+export default ErrorBanner;
+//# sourceMappingURL=ErrorBanner.js.map

package/lib/module/components/SessionRecorderWidget/ErrorBanner.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","View","Text","Pressable","StyleSheet","jsx","_jsx","jsxs","_jsxs","ErrorBanner","error","onDismiss","style","styles","container","children","content","errorText","onPress","dismissButton","dismissText","create","backgroundColor","paddingHorizontal","paddingVertical","marginHorizontal","marginTop","borderRadius","flexDirection","alignItems","justifyContent","color","fontSize","flex","marginRight","padding","width","height","fontWeight"],"sourceRoot":"../../../../src","sources":["components/SessionRecorderWidget/ErrorBanner.tsx"],"mappings":";;AAAA,OAAOA,KAAK,MAAM,OAAO;AACzB,SAASC,IAAI,EAAEC,IAAI,EAAEC,SAAS,EAAEC,UAAU,QAAQ,cAAc;AAAC,SAAAC,GAAA,IAAAC,IAAA,EAAAC,IAAA,IAAAC,KAAA;AAOjE,MAAMC,WAAuC,GAAGA,CAAC;EAAEC,KAAK;EAAEC;AAAU,CAAC,KAAK;EACxE,oBACEL,IAAA,CAACL,IAAI;IAACW,KAAK,EAAEC,MAAM,CAACC,SAAU;IAAAC,QAAA,eAC5BP,KAAA,CAACP,IAAI;MAACW,KAAK,EAAEC,MAAM,CAACG,OAAQ;MAAAD,QAAA,gBAC1BT,IAAA,CAACJ,IAAI;QAACU,KAAK,EAAEC,MAAM,CAACI,SAAU;QAAAF,QAAA,EAAEL;MAAK,CAAO,CAAC,eAC7CJ,IAAA,CAACH,SAAS;QAACe,OAAO,EAAEP,SAAU;QAACC,KAAK,EAAEC,MAAM,CAACM,aAAc;QAAAJ,QAAA,eACzDT,IAAA,CAACJ,IAAI;UAACU,KAAK,EAAEC,MAAM,CAACO,WAAY;UAAAL,QAAA,EAAC;QAAC,CAAM;MAAC,CAChC,CAAC;IAAA,CACR;EAAC,CACH,CAAC;AAEX,CAAC;AAED,MAAMF,MAAM,GAAGT,UAAU,CAACiB,MAAM,CAAC;EAC/BP,SAAS,EAAE;IACTQ,eAAe,EAAE,SAAS;IAC1BC,iBAAiB,EAAE,EAAE;IACrBC,eAAe,EAAE,EAAE;IACnBC,gBAAgB,EAAE,EAAE;IACpBC,SAAS,EAAE,CAAC;IACZC,YAAY,EAAE;EAChB,CAAC;EACDX,OAAO,EAAE;IACPY,aAAa,EAAE,KAAK;IACpBC,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDb,SAAS,EAAE;IACTc,KAAK,EAAE,OAAO;IACdC,QAAQ,EAAE,EAAE;IACZC,IAAI,EAAE,CAAC;IACPC,WAAW,EAAE;EACf,CAAC;EACDf,aAAa,EAAE;IACbgB,OAAO,EAAE,CAAC;IACVR,YAAY,EAAE,EAAE;IAChBL,eAAe,EAAE,0BAA0B;IAC3Cc,KAAK,EAAE,EAAE;IACTC,MAAM,EAAE,EAAE;IACVR,UAAU,EAAE,QAAQ;IACpBC,cAAc,EAAE;EAClB,CAAC;EACDV,WAAW,EAAE;IACXW,KAAK,EAAE,OAAO;IACdC,QAAQ,EAAE,EAAE;IACZM,UAAU,EAAE;EACd;AACF,CAAC,CAAC;AAEF,eAAe7B,WAAW","ignoreList":[]}

package/lib/module/components/SessionRecorderWidget/FinalPopover.js

@@ -0,0 +1,74 @@
+"use strict";
+
+import React, { useState } from 'react';
+import { View, Text, Pressable, TextInput, ScrollView, Keyboard } from 'react-native';
+import { sharedStyles } from "./styles.js";
+import ModalHeader from "./ModalHeader.js";
+import { logger } from "../../utils/index.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+const FinalPopover = ({
+  isOnline,
+  textOverrides,
+  onStopRecording,
+  onCancelSession,
+  isSubmitting,
+  children
+}) => {
+  const [comment, setComment] = useState('');
+  const handleStopRecording = async () => {
+    try {
+      await onStopRecording(comment);
+    } catch (error) {
+      logger.error('FinalPopover', 'Failed to save session', error);
+    }
+  };
+  return /*#__PURE__*/_jsxs(View, {
+    style: sharedStyles.popoverContent,
+    children: [/*#__PURE__*/_jsx(ModalHeader, {
+      children: /*#__PURE__*/_jsx(Pressable, {
+        onPress: onCancelSession,
+        disabled: !isOnline,
+        style: sharedStyles.cancelButton,
+        children: /*#__PURE__*/_jsx(Text, {
+          style: sharedStyles.cancelButtonText,
+          children: textOverrides.cancelButtonText
+        })
+      })
+    }), /*#__PURE__*/_jsxs(ScrollView, {
+      style: sharedStyles.popoverBody,
+      keyboardShouldPersistTaps: "handled",
+      contentInsetAdjustmentBehavior: "automatic",
+      children: [children, /*#__PURE__*/_jsx(Text, {
+        style: sharedStyles.title,
+        children: textOverrides.finalTitle
+      }), /*#__PURE__*/_jsx(Text, {
+        style: sharedStyles.description,
+        children: textOverrides.finalDescription
+      }), /*#__PURE__*/_jsx(TextInput, {
+        style: sharedStyles.commentInput,
+        placeholder: textOverrides.commentPlaceholder,
+        placeholderTextColor: '#9CA3AF',
+        value: comment,
+        onChangeText: setComment,
+        multiline: true,
+        numberOfLines: 3,
+        returnKeyType: "done",
+        blurOnSubmit: true,
+        onSubmitEditing: () => Keyboard.dismiss()
+      }), /*#__PURE__*/_jsx(View, {
+        style: sharedStyles.popoverFooter,
+        children: /*#__PURE__*/_jsx(Pressable, {
+          disabled: isSubmitting || !isOnline,
+          style: [sharedStyles.actionButton, sharedStyles.stopButton],
+          onPress: handleStopRecording,
+          children: /*#__PURE__*/_jsx(Text, {
+            style: sharedStyles.actionButtonText,
+            children: isSubmitting ? 'Saving...' : textOverrides.saveButtonText
+          })
+        })
+      })]
+    })]
+  });
+};
+export default FinalPopover;
+//# sourceMappingURL=FinalPopover.js.map

package/lib/module/components/SessionRecorderWidget/FinalPopover.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useState","View","Text","Pressable","TextInput","ScrollView","Keyboard","sharedStyles","ModalHeader","logger","jsx","_jsx","jsxs","_jsxs","FinalPopover","isOnline","textOverrides","onStopRecording","onCancelSession","isSubmitting","children","comment","setComment","handleStopRecording","error","style","popoverContent","onPress","disabled","cancelButton","cancelButtonText","popoverBody","keyboardShouldPersistTaps","contentInsetAdjustmentBehavior","title","finalTitle","description","finalDescription","commentInput","placeholder","commentPlaceholder","placeholderTextColor","value","onChangeText","multiline","numberOfLines","returnKeyType","blurOnSubmit","onSubmitEditing","dismiss","popoverFooter","actionButton","stopButton","actionButtonText","saveButtonText"],"sourceRoot":"../../../../src","sources":["components/SessionRecorderWidget/FinalPopover.tsx"],"mappings":"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","ignoreList":[]}

package/lib/module/components/SessionRecorderWidget/FloatingButton.js

@@ -0,0 +1,191 @@
+"use strict";
+
+import React, { useRef, useEffect, useMemo } from 'react';
+import { StyleSheet, Platform, Animated, PanResponder, View, Dimensions } from 'react-native';
+import { SessionState } from "../../types/index.js";
+import { StorageService } from "../../services/storage.service.js";
+import { RecordIcon, CapturingIcon, PausedIcon } from "./icons.js";
+import { jsx as _jsx } from "react/jsx-runtime";
+const buttonSize = 52;
+const rightOffset = 20;
+const topOffset = Platform.OS === 'ios' ? 60 : 40;
+const FloatingButton = ({
+  sessionState,
+  onPress
+}) => {
+  const position = useRef(new Animated.ValueXY({
+    x: 0,
+    y: 0
+  })).current;
+  const lastPosition = useRef({
+    top: topOffset,
+    right: rightOffset
+  });
+  const storageService = useRef(StorageService.getInstance()).current;
+  const screenBounds = useMemo(() => {
+    const {
+      width,
+      height
+    } = Dimensions.get('window');
+    return {
+      minTop: topOffset,
+      maxTop: height - buttonSize,
+      minRight: 0,
+      maxRight: width - buttonSize
+    };
+  }, []);
+
+  // Load saved position on component mount
+  useEffect(() => {
+    const savedPosition = storageService.getFloatingButtonPosition();
+    if (savedPosition) {
+      const {
+        width
+      } = Dimensions.get('window');
+      const top = savedPosition.y;
+      const right = width - savedPosition.x - buttonSize;
+      lastPosition.current = {
+        top,
+        right
+      };
+      position.setValue({
+        x: right,
+        y: top
+      });
+    } else {
+      position.setValue({
+        x: lastPosition.current.right,
+        y: lastPosition.current.top
+      });
+    }
+  }, []);
+  const panResponder = useRef(PanResponder.create({
+    onStartShouldSetPanResponder: () => true,
+    onMoveShouldSetPanResponder: (_, gestureState) => {
+      const distance = Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy);
+      return distance > 5;
+    },
+    onPanResponderGrant: () => {
+      // Set the initial position for this gesture
+      position.setValue({
+        x: lastPosition.current.right,
+        y: lastPosition.current.top
+      });
+    },
+    onPanResponderMove: (_, gestureState) => {
+      // Calculate new position based on gesture movement
+      const newTop = lastPosition.current.top + gestureState.dy;
+      const newRight = lastPosition.current.right - gestureState.dx;
+
+      // Update position during drag
+      position.setValue({
+        x: newRight,
+        y: newTop
+      });
+    },
+    onPanResponderRelease: (_, gestureState) => {
+      // Check if this was actually a drag (significant movement)
+      const distance = Math.sqrt(gestureState.dx * gestureState.dx + gestureState.dy * gestureState.dy);
+
+      // If it was a tap (no significant movement), trigger onPress
+      if (distance <= 5) {
+        onPress();
+      } else {
+        // Calculate new position after dragging
+        const newTop = lastPosition.current.top + gestureState.dy;
+        const newRight = lastPosition.current.right - gestureState.dx;
+
+        // Clamp to screen bounds
+        const clampedTop = Math.max(screenBounds.minTop, Math.min(screenBounds.maxTop, newTop));
+        const clampedRight = Math.max(screenBounds.minRight, Math.min(screenBounds.maxRight, newRight));
+
+        // Update position
+        lastPosition.current = {
+          top: clampedTop,
+          right: clampedRight
+        };
+        position.setValue({
+          x: clampedRight,
+          y: clampedTop
+        });
+
+        // Convert back to x,y coordinates for storage
+        const {
+          width
+        } = Dimensions.get('window');
+        const storagePosition = {
+          x: width - clampedRight - buttonSize,
+          y: clampedTop
+        };
+
+        // Persist position to AsyncStorage (debounced)
+        storageService.saveFloatingButtonPosition(storagePosition);
+      }
+    }
+  })).current;
+
+  // Memoized button icon and color for performance
+  const content = useMemo(() => {
+    switch (sessionState) {
+      case SessionState.started:
+        return {
+          icon: /*#__PURE__*/_jsx(CapturingIcon, {
+            size: 28,
+            color: "white"
+          }),
+          color: '#FF4444'
+        };
+      case SessionState.paused:
+        return {
+          icon: /*#__PURE__*/_jsx(PausedIcon, {
+            size: 28,
+            color: "white"
+          }),
+          color: '#FFA500'
+        };
+      default:
+        return {
+          icon: /*#__PURE__*/_jsx(RecordIcon, {
+            size: 28,
+            color: "#718096"
+          }),
+          color: '#ffffff'
+        };
+    }
+  }, [sessionState]);
+  return /*#__PURE__*/_jsx(Animated.View, {
+    style: [styles.draggableButton, {
+      top: position.y,
+      right: position.x
+    }],
+    ...panResponder.panHandlers,
+    children: /*#__PURE__*/_jsx(View, {
+      style: [styles.floatingButton, {
+        backgroundColor: content.color
+      }],
+      children: content.icon
+    })
+  });
+};
+const styles = StyleSheet.create({
+  draggableButton: {
+    position: 'absolute'
+  },
+  floatingButton: {
+    elevation: 8,
+    shadowRadius: 4,
+    width: buttonSize,
+    shadowColor: '#000',
+    height: buttonSize,
+    shadowOpacity: 0.25,
+    alignItems: 'center',
+    justifyContent: 'center',
+    borderRadius: buttonSize / 2,
+    shadowOffset: {
+      width: 0,
+      height: 2
+    }
+  }
+});
+export default FloatingButton;
+//# sourceMappingURL=FloatingButton.js.map

package/lib/module/components/SessionRecorderWidget/FloatingButton.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["React","useRef","useEffect","useMemo","StyleSheet","Platform","Animated","PanResponder","View","Dimensions","SessionState","StorageService","RecordIcon","CapturingIcon","PausedIcon","jsx","_jsx","buttonSize","rightOffset","topOffset","OS","FloatingButton","sessionState","onPress","position","ValueXY","x","y","current","lastPosition","top","right","storageService","getInstance","screenBounds","width","height","get","minTop","maxTop","minRight","maxRight","savedPosition","getFloatingButtonPosition","setValue","panResponder","create","onStartShouldSetPanResponder","onMoveShouldSetPanResponder","_","gestureState","distance","Math","sqrt","dx","dy","onPanResponderGrant","onPanResponderMove","newTop","newRight","onPanResponderRelease","clampedTop","max","min","clampedRight","storagePosition","saveFloatingButtonPosition","content","started","icon","size","color","paused","style","styles","draggableButton","panHandlers","children","floatingButton","backgroundColor","elevation","shadowRadius","shadowColor","shadowOpacity","alignItems","justifyContent","borderRadius","shadowOffset"],"sourceRoot":"../../../../src","sources":["components/SessionRecorderWidget/FloatingButton.tsx"],"mappings":"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","ignoreList":[]}