Add cool splashscreen

2021-02-19 19:51:59 +01:00 · 2021-02-19 19:51:59 +01:00 · 0f50b51a1b
commit 0f50b51a1b
parent 674d9ccb8b
9 changed files with 104 additions and 74 deletions
--- a/example/index.tsx
+++ b/example/index.tsx
@ -5,11 +5,19 @@ import { App } from './src/App';
 import { Settings } from './src/Settings';
 import { Splash } from './src/Splash';
 import { Media } from './src/Media';
+import { Camera } from 'react-native-vision-camera';

 Navigation.setDefaultOptions({
  topBar: {
    visible: false,
  },
+  window: {
+    backgroundColor: 'black',
+  },
+  layout: {
+    backgroundColor: 'black',
+    componentBackgroundColor: 'black'
+  },
 });

 Navigation.registerComponent('Splash', () => gestureHandlerRootHOC(Splash), () => Splash);
@ -17,14 +25,23 @@ Navigation.registerComponent('Home', () => gestureHandlerRootHOC(App), () => App
 Navigation.registerComponent('Media', () => gestureHandlerRootHOC(Media), () => Media);
 Navigation.registerComponent('Settings', () => gestureHandlerRootHOC(Settings), () => Settings);

-Navigation.events().registerAppLaunchedListener(() => {
+Navigation.events().registerAppLaunchedListener(async () => {
+  const [cameraPermission, microphonePermission] = await Promise.all([
+    Camera.getCameraPermissionStatus(),
+    Camera.getMicrophonePermissionStatus(),
+  ]);
+  let rootName = "Splash";
+  if (cameraPermission === "authorized" && microphonePermission === "authorized") {
+    rootName = "Home";
+  }
+
  Navigation.setRoot({
    root: {
      stack: {
        children: [
          {
            component: {
-               name: 'Splash'
+              name: rootName
            }
          }
        ]
--- a/example/ios/VisionCameraExample/Images.xcassets/Contents.json
+++ b/example/ios/VisionCameraExample/Images.xcassets/Contents.json
@ -1,6 +1,6 @@
 {
  "info" : {
-    "version" : 1,
-    "author" : "xcode"
+    "author" : "xcode",
+    "version" : 1
  }
 }
--- a/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/Contents.json
+++ b/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/Contents.json
@ -0,0 +1,23 @@
+{
+  "images" : [
+    {
+      "filename" : "IMG_7966.jpg",
+      "idiom" : "universal",
+      "scale" : "1x"
+    },
+    {
+      "filename" : "IMG_7966-1.jpg",
+      "idiom" : "universal",
+      "scale" : "2x"
+    },
+    {
+      "filename" : "IMG_7966-2.jpg",
+      "idiom" : "universal",
+      "scale" : "3x"
+    }
+  ],
+  "info" : {
+    "author" : "xcode",
+    "version" : 1
+  }
+}
--- a/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966-1.jpg
+++ b/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966-1.jpg
--- a/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966-2.jpg
+++ b/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966-2.jpg
--- a/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966.jpg
+++ b/example/ios/VisionCameraExample/Images.xcassets/shutter.imageset/IMG_7966.jpg
--- a/example/ios/VisionCameraExample/LaunchScreen.storyboard
+++ b/example/ios/VisionCameraExample/LaunchScreen.storyboard
@ -1,9 +1,9 @@
 <?xml version="1.0" encoding="UTF-8"?>
-<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="15702" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="17701" targetRuntime="iOS.CocoaTouch" propertyAccessControl="none" useAutolayout="YES" launchScreen="YES" useTraitCollections="YES" useSafeAreas="YES" colorMatched="YES" initialViewController="01J-lp-oVM">
    <device id="retina4_7" orientation="portrait" appearance="light"/>
    <dependencies>
        <deployment identifier="iOS"/>
-        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="15704"/>
+        <plugIn identifier="com.apple.InterfaceBuilder.IBCocoaTouchPlugin" version="17703"/>
        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
    </dependencies>
@ -16,43 +16,28 @@
                        <rect key="frame" x="0.0" y="0.0" width="375" height="667"/>
                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
                        <subviews>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="obG-Y5-kRd">
-                                <rect key="frame" x="0.0" y="647" width="375" height="0.0"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="react-native-vision-camera-example" textAlignment="center" lineBreakMode="middleTruncation" baselineAdjustment="alignBaselines" minimumFontSize="18" translatesAutoresizingMaskIntoConstraints="NO" id="GJd-Yh-RWb">
-                                <rect key="frame" x="0.0" y="202" width="375" height="43"/>
-                                <fontDescription key="fontDescription" type="boldSystem" pointSize="36"/>
-                                <color key="textColor" red="0.0" green="0.0" blue="0.0" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                            <label opaque="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="left" horizontalHuggingPriority="251" verticalHuggingPriority="251" text="Powered by React Native" textAlignment="center" lineBreakMode="tailTruncation" baselineAdjustment="alignBaselines" minimumFontSize="9" translatesAutoresizingMaskIntoConstraints="NO" id="MN2-I3-ftu">
-                                <rect key="frame" x="0.0" y="626" width="375" height="21"/>
-                                <fontDescription key="fontDescription" type="system" pointSize="17"/>
-                                <color key="textColor" cocoaTouchSystemColor="darkTextColor"/>
-                                <nil key="highlightedColor"/>
-                            </label>
-                        </subviews>
-                        <color key="backgroundColor" red="1" green="1" blue="1" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+                            <imageView clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" horizontalHuggingPriority="251" verticalHuggingPriority="251" image="shutter" translatesAutoresizingMaskIntoConstraints="NO" id="1ec-Ah-Cuv">
+                                <rect key="frame" x="148.5" y="574" width="78" height="78"/>
                                <constraints>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="obG-Y5-kRd" secondAttribute="centerX" id="5cz-MP-9tL"/>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="MN2-I3-ftu" secondAttribute="bottom" constant="20" id="OZV-Vh-mqD"/>
-                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="centerX" secondItem="GJd-Yh-RWb" secondAttribute="centerX" id="Q3B-4B-g5h"/>
-                            <constraint firstItem="obG-Y5-kRd" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="SfN-ll-jLj"/>
-                            <constraint firstAttribute="bottom" secondItem="obG-Y5-kRd" secondAttribute="bottom" constant="20" id="Y44-ml-fuU"/>
-                            <constraint firstItem="MN2-I3-ftu" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="akx-eg-2ui"/>
-                            <constraint firstItem="MN2-I3-ftu" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" id="i1E-0Y-4RG"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="bottom" multiplier="1/3" constant="1" id="moa-c2-u7t"/>
-                            <constraint firstItem="GJd-Yh-RWb" firstAttribute="leading" secondItem="Bcu-3y-fUS" secondAttribute="leading" symbolic="YES" id="x7j-FC-K8j"/>
+                                    <constraint firstAttribute="width" constant="78" id="IpA-9U-XI8"/>
+                                    <constraint firstAttribute="height" constant="78" id="vyL-X3-jiF"/>
                                </constraints>
+                            </imageView>
+                        </subviews>
                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                        <color key="backgroundColor" white="0.0" alpha="1" colorSpace="custom" customColorSpace="genericGamma22GrayColorSpace"/>
+                        <constraints>
+                            <constraint firstItem="Bcu-3y-fUS" firstAttribute="bottom" secondItem="1ec-Ah-Cuv" secondAttribute="bottom" constant="15" id="4jH-AB-6EI"/>
+                            <constraint firstItem="1ec-Ah-Cuv" firstAttribute="centerX" secondItem="Bcu-3y-fUS" secondAttribute="centerX" id="qMB-15-ipd"/>
+                        </constraints>
                    </view>
                </viewController>
                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
            </objects>
-            <point key="canvasLocation" x="52.173913043478265" y="375"/>
+            <point key="canvasLocation" x="52" y="374.66266866566718"/>
        </scene>
    </scenes>
+    <resources>
+        <image name="shutter" width="60" height="60"/>
+    </resources>
 </document>
--- a/example/src/App.tsx
+++ b/example/src/App.tsx
@ -282,7 +282,6 @@ export const App: NavigationFunctionComponent = ({ componentId }) => {
        style={styles.captureButton}
        camera={camera}
        onMediaCaptured={onMediaCaptured}
-        maximumVideoDuration={15}
        cameraZoom={zoom}
        flash={supportsFlash ? flash : "off"}
        enabled={isCameraInitialized && isActive}
--- a/example/src/views/CaptureButton.tsx
+++ b/example/src/views/CaptureButton.tsx
@ -24,9 +24,10 @@ import { CAPTURE_BUTTON_SIZE, SCREEN_HEIGHT, SCREEN_WIDTH, USE_SNAPSHOT_ON_ANDRO
 const PAN_GESTURE_HANDLER_FAIL_X = [-SCREEN_WIDTH, SCREEN_WIDTH];
 const PAN_GESTURE_HANDLER_ACTIVE_Y = [-2, 2];

-const IS_ANDROID = Platform.OS === "android"
+const IS_ANDROID = Platform.OS === "android";

 const START_RECORDING_DELAY = 200;
+const BORDER_WIDTH = CAPTURE_BUTTON_SIZE * 0.1;

 interface Props extends ViewProps {
  camera: React.RefObject<Camera>;
@ -251,8 +252,8 @@ const _CaptureButton: React.FC<Props> = ({
    () => ({
      transform: [
        {
-          scale: withSpring(isPressingButton.value ? 1.1 : 1, {
-            mass: 0.5,
+          scale: withSpring(isPressingButton.value ? 1 : 0, {
+            mass: 1,
            damping: 35,
            stiffness: 300,
          }),
@ -262,7 +263,8 @@ const _CaptureButton: React.FC<Props> = ({
    [isPressingButton]
  );
  const buttonStyle = useAnimatedStyle(
-    () => ({
+    () => {
+      return ({
        opacity: withTiming(enabled ? 1 : 0.3, {
          duration: 100,
          easing: Easing.linear,
@ -270,7 +272,11 @@ const _CaptureButton: React.FC<Props> = ({
        transform: [
          {
            scale: withSpring(
-            enabled ? (isPressingButton.value ? 1 : 0.9) : 0.6,
+              enabled
+                ? isPressingButton.value
+                  ? 1
+                  : 0.9
+                : 0.6,
              {
                stiffness: 500,
                damping: 300,
@ -278,7 +284,8 @@ const _CaptureButton: React.FC<Props> = ({
            ),
          },
        ],
-    }),
+      })
+    },
    [enabled, isPressingButton]
  );

@ -319,14 +326,13 @@ const styles = StyleSheet.create({
    width: CAPTURE_BUTTON_SIZE,
    height: CAPTURE_BUTTON_SIZE,
    borderRadius: CAPTURE_BUTTON_SIZE / 2,
-    borderWidth: 3,
-    borderColor: "rgba(225, 48, 108, 0.7)",
+    backgroundColor: "#e34077",
  },
  button: {
    width: CAPTURE_BUTTON_SIZE,
    height: CAPTURE_BUTTON_SIZE,
    borderRadius: CAPTURE_BUTTON_SIZE / 2,
-    borderWidth: CAPTURE_BUTTON_SIZE * 0.1,
+    borderWidth: BORDER_WIDTH,
    borderColor: "white",
  },
 });