react-native-bootsplash 4.7.4 → 5.0.0-beta.0

package/src/addon/index.ts

@@ -0,0 +1,788 @@
+import crypto from "crypto";
+import fs from "fs-extra";
+import os from "os";
+import path from "path";
+import type { Sharp } from "sharp";
+import sharp from "sharp";
+import { Manifest } from "..";
+import {
+  AddonConfig,
+  Color,
+  androidColorRegex,
+  log,
+  logWrite,
+} from "../generate";
+
+const BrandContentsJson = `{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_brand.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_brand@2x.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_brand@3x.png",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}
+`;
+
+const DarkLogoContentsJson = `{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo@2x.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_logo@3x.png",
+      "scale": "3x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "filename": "bootsplash_dark_logo.png",
+      "scale": "1x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "filename": "bootsplash_dark_logo@2x.png",
+      "scale": "2x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "filename": "bootsplash_dark_logo@3x.png",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}
+`;
+
+const DarkBrandContentsJson = `{
+  "images": [
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_brand.png",
+      "scale": "1x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_brand@2x.png",
+      "scale": "2x"
+    },
+    {
+      "idiom": "universal",
+      "filename": "bootsplash_brand@3x.png",
+      "scale": "3x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "filename": "bootsplash_dark_brand.png",
+      "scale": "1x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "filename": "bootsplash_dark_brand@2x.png",
+      "scale": "2x"
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "filename": "bootsplash_dark_brand@3x.png",
+      "scale": "3x"
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}
+`;
+
+const getStoryboard = ({
+  logoHeight,
+  logoWidth,
+  hasBrand,
+  brandHeight,
+  brandWidth,
+  brandBottom,
+  background: { R, G, B },
+  hasDarkBackground,
+}: {
+  logoHeight: number;
+  logoWidth: number;
+  hasBrand: boolean;
+  brandHeight: number;
+  brandWidth: number;
+  brandBottom: number;
+  background: Color["rgb"];
+  hasDarkBackground: boolean;
+}) => {
+  const frameWidth = 375;
+  const frameHeight = 667;
+  const logoX = (frameWidth - logoWidth) / 2;
+  const logoY = (frameHeight - logoHeight) / 2;
+  const brandX = (frameWidth - brandWidth) / 2;
+  const brandY = frameHeight - brandBottom - brandHeight;
+
+  const content = `<?xml version="1.0" encoding="UTF-8"?>
+<document type="com.apple.InterfaceBuilder3.CocoaTouch.Storyboard.XIB" version="3.0" toolsVersion="21701" 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="21678"/>
+        ${
+          hasDarkBackground
+            ? `<capability name="Named colors" minToolsVersion="9.0"/>`
+            : ""
+        }
+        <capability name="Safe area layout guides" minToolsVersion="9.0"/>
+        <capability name="documents saved in the Xcode 8 format" minToolsVersion="8.0"/>
+    </dependencies>
+    <scenes>
+        <!--View Controller-->
+        <scene sceneID="EHf-IW-A2E">
+            <objects>
+                <viewController modalTransitionStyle="crossDissolve" id="01J-lp-oVM" sceneMemberID="viewController">
+                    <view key="view" autoresizesSubviews="NO" contentMode="scaleToFill" id="Ze5-6b-2t3">
+                        <rect key="frame" x="0.0" y="0.0" width="${frameWidth}" height="${frameHeight}"/>
+                        <autoresizingMask key="autoresizingMask" widthSizable="YES" heightSizable="YES"/>
+                        <subviews>
+                            <imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashLogo" translatesAutoresizingMaskIntoConstraints="NO" id="3lX-Ut-9ad">
+                                <rect key="frame" x="${logoX}" y="${logoY}" width="${logoWidth}" height="${logoHeight}"/>
+                                <accessibility key="accessibilityConfiguration">
+                                    <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
+                                </accessibility>
+                            </imageView>
+                            ${
+                              hasBrand
+                                ? `<imageView autoresizesSubviews="NO" clipsSubviews="YES" userInteractionEnabled="NO" contentMode="scaleAspectFit" image="BootSplashBrand" translatesAutoresizingMaskIntoConstraints="NO" id="nNG-Iv-fRa">
+                                <rect key="frame" x="${brandX}" y="${brandY}" width="${brandWidth}" height="${brandHeight}"/>
+                                <accessibility key="accessibilityConfiguration">
+                                    <accessibilityTraits key="traits" image="YES" notEnabled="YES"/>
+                                </accessibility>
+                            </imageView>`
+                                : ""
+                            }
+                        </subviews>
+                        <viewLayoutGuide key="safeArea" id="Bcu-3y-fUS"/>
+                        ${
+                          hasDarkBackground
+                            ? `<color key="backgroundColor" name="BootSplashBackground"/>`
+                            : `<color key="backgroundColor" red="${R}" green="${G}" blue="${B}" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>`
+                        }
+                        <constraints>
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="Fh9-Fy-1nT"/>
+                            <constraint firstItem="3lX-Ut-9ad" firstAttribute="centerY" secondItem="Ze5-6b-2t3" secondAttribute="centerY" id="nvB-Ic-PnI"/>
+                            ${
+                              hasBrand
+                                ? `<constraint firstItem="nNG-Iv-fRa" firstAttribute="centerX" secondItem="Ze5-6b-2t3" secondAttribute="centerX" id="y3c-De-dBE"/>
+                            <constraint firstAttribute="bottom" secondItem="nNG-Iv-fRa" secondAttribute="bottom" constant="${brandBottom}" id="5IH-OY-8WF"/>`
+                                : ""
+                            }
+                        </constraints>
+                    </view>
+                </viewController>
+                <placeholder placeholderIdentifier="IBFirstResponder" id="iYj-Kq-Ea1" userLabel="First Responder" sceneMemberID="firstResponder"/>
+            </objects>
+            <point key="canvasLocation" x="0.0" y="0.0"/>
+        </scene>
+    </scenes>
+    <resources>
+        ${
+          hasBrand
+            ? `<image name="BootSplashBrand" width="${brandWidth}" height="${brandHeight}"/>`
+            : ""
+        }
+        <image name="BootSplashLogo" width="${logoWidth}" height="${logoHeight}"/>
+        ${
+          hasDarkBackground
+            ? `<namedColor name="BootSplashBackground">
+            <color red="${R}" green="${G}" blue="${B}" alpha="1" colorSpace="custom" customColorSpace="sRGB"/>
+        </namedColor>`
+            : ""
+        }
+    </resources>
+</document>
+`;
+
+  // Remove empty lines
+  return `${content
+    .split("\n")
+    .filter((line) => line.trim() !== "")
+    .join("\n")}\n`;
+};
+
+type AcceptedFileName = `bootsplash_${
+  | "logo"
+  | "dark_logo"
+  | "brand"
+  | "dark_brand"}`;
+
+const generateAndroidAsset = ({
+  androidResPath,
+  fileName,
+  image,
+  imageWidth,
+  night,
+  maxWidth,
+  maxHeight,
+}: {
+  androidResPath: string;
+  fileName: AcceptedFileName;
+  image: Sharp;
+  imageWidth: number;
+  night: boolean;
+  maxWidth: number;
+  maxHeight: number;
+}) => {
+  return Promise.all(
+    [
+      { ratio: 1, suffix: "mdpi" },
+      { ratio: 1.5, suffix: "hdpi" },
+      { ratio: 2, suffix: "xhdpi" },
+      { ratio: 3, suffix: "xxhdpi" },
+      { ratio: 4, suffix: "xxxhdpi" },
+    ].map(({ ratio, suffix }) => {
+      const dirName = "drawable-" + (night ? "night-" : "") + suffix;
+
+      const drawableDirPath = path.resolve(androidResPath, dirName);
+      fs.ensureDirSync(drawableDirPath);
+
+      const canvasWidth = maxWidth * ratio;
+      const canvasHeight = maxHeight * ratio;
+
+      // https://sharp.pixelplumbing.com/api-constructor
+      const canvas = sharp({
+        create: {
+          width: canvasWidth,
+          height: canvasHeight,
+          channels: 4,
+          background: {
+            r: 255,
+            g: 255,
+            b: 255,
+            alpha: 0,
+          },
+        },
+      });
+
+      const filePath = path.resolve(drawableDirPath, `${fileName}.png`);
+
+      return image
+        .clone()
+        .resize(imageWidth * ratio)
+        .toBuffer()
+        .then((input) =>
+          canvas.composite([{ input }]).png({ quality: 100 }).toFile(filePath),
+        )
+        .then(() => {
+          logWrite(filePath, { width: canvasWidth, height: canvasHeight });
+        });
+    }),
+  );
+};
+
+const generateIOSAsset = ({
+  fileName,
+  imageSetPath,
+  image,
+  imageWidth,
+}: {
+  fileName: AcceptedFileName;
+  imageSetPath: string;
+  image: Sharp;
+  imageWidth: number;
+}) => {
+  return Promise.all(
+    [
+      { ratio: 1, suffix: "" },
+      { ratio: 2, suffix: "@2x" },
+      { ratio: 3, suffix: "@3x" },
+    ].map(({ ratio, suffix }) => {
+      const filePath = path.resolve(imageSetPath, `${fileName}${suffix}.png`);
+
+      return image
+        .clone()
+        .resize(imageWidth * ratio)
+        .png({ quality: 100 })
+        .toFile(filePath)
+        .then(({ width, height }) => {
+          logWrite(filePath, { width, height });
+        });
+    }),
+  );
+};
+
+const generateGenericAsset = ({
+  assetsOutputPath,
+  fileName,
+  image,
+  imageWidth,
+}: {
+  assetsOutputPath: string;
+  fileName: AcceptedFileName;
+  image: Sharp;
+  imageWidth: number;
+}) => {
+  fs.ensureDirSync(assetsOutputPath);
+
+  return Promise.all(
+    [
+      { ratio: 1, suffix: "" },
+      { ratio: 1.5, suffix: "@1,5x" },
+      { ratio: 2, suffix: "@2x" },
+      { ratio: 3, suffix: "@3x" },
+      { ratio: 4, suffix: "@4x" },
+    ].map(({ ratio, suffix }) => {
+      const filePath = path.resolve(
+        assetsOutputPath,
+        `${fileName}${suffix}.png`,
+      );
+
+      return image
+        .clone()
+        .resize(imageWidth * ratio)
+        .png({ quality: 100 })
+        .toFile(filePath)
+        .then(({ width, height }) => {
+          logWrite(filePath, { width, height });
+        });
+    }),
+  );
+};
+
+const verifyLicenseKey = (licenseKey: string) => {
+  const formData = new FormData();
+
+  formData.append("product_id", "T97IouVltWJ3RDe0FA_9yQ==");
+  formData.append("license_key", licenseKey);
+
+  return fetch("https://api.gumroad.com/v2/licenses/verify", {
+    method: "POST",
+    body: formData,
+  })
+    .then((response) => response.json())
+    .then((data?: { success: boolean }) => {
+      if (data?.success === false) {
+        log.error("Invalid license key");
+        process.exit(1);
+      }
+
+      if (data?.success === true) {
+        return;
+      }
+
+      throw new Error("Unknown response");
+    })
+    .catch(() => {
+      log.error("Cannot verify license key");
+      process.exit(1);
+    });
+};
+
+export const execute = async ({
+  licenseKey,
+
+  androidResPath,
+  iosProjectPath,
+  assetsOutputPath,
+
+  logoHeight,
+  logoWidth,
+  brandHeight,
+  brandWidth,
+
+  background,
+  brand,
+
+  darkBackground,
+  darkLogo,
+  darkBrand,
+}: AddonConfig) => {
+  if (
+    androidResPath == null &&
+    iosProjectPath == null &&
+    assetsOutputPath == null
+  ) {
+    return;
+  }
+
+  const hasBrand = brand != null;
+  const hasDarkBackground = darkBackground != null;
+  const hasDarkLogo = darkLogo != null;
+  const hasDarkBrand = darkBrand != null;
+
+  log.title("🔑", "With licence key");
+
+  const packageJsonPath = path.resolve(
+    __dirname,
+    "..",
+    "..",
+    "..",
+    "package.json",
+  );
+
+  const { version } = JSON.parse(fs.readFileSync(packageJsonPath, "utf-8")) as {
+    version: string;
+  };
+
+  const licenseKeyHash = crypto
+    .createHash("sha256")
+    .update(licenseKey)
+    .digest("hex");
+
+  const libVersionHash = crypto
+    .createHash("sha256")
+    .update(version)
+    .digest("hex");
+
+  const licenseKeyFileName =
+    licenseKeyHash.substring(0, licenseKeyHash.length / 2) +
+    libVersionHash.substring(libVersionHash.length / 2);
+
+  const licenseKeyFilePath = path.join(
+    fs.realpathSync(os.tmpdir()),
+    `.${licenseKeyFileName}`,
+  );
+
+  if (!fs.existsSync(licenseKeyFilePath)) {
+    await verifyLicenseKey(licenseKey);
+    fs.writeFileSync(licenseKeyFilePath, "", "utf-8");
+  }
+
+  // If we want to respect Android positionning, we have to add empty pixels to bottom padding
+  const brandBottom = 60 + (80 - brandHeight) / 2;
+
+  if (androidResPath != null) {
+    if (hasDarkBackground) {
+      const valuesNightPath = path.resolve(androidResPath, "values-night");
+      fs.ensureDirSync(valuesNightPath);
+
+      const colorsXmlPath = path.resolve(valuesNightPath, "colors.xml");
+      const colorsXmlEntry = `<color name="bootsplash_background">${darkBackground.hex}</color>`;
+
+      if (fs.existsSync(colorsXmlPath)) {
+        const colorsXml = fs.readFileSync(colorsXmlPath, "utf-8");
+
+        if (colorsXml.match(androidColorRegex)) {
+          fs.writeFileSync(
+            colorsXmlPath,
+            colorsXml.replace(androidColorRegex, colorsXmlEntry),
+            "utf-8",
+          );
+        } else {
+          fs.writeFileSync(
+            colorsXmlPath,
+            colorsXml.replace(
+              /<\/resources>/g,
+              `    ${colorsXmlEntry}\n</resources>`,
+            ),
+            "utf-8",
+          );
+        }
+      } else {
+        fs.writeFileSync(
+          colorsXmlPath,
+          `<resources>\n    ${colorsXmlEntry}\n</resources>\n`,
+          "utf-8",
+        );
+      }
+
+      logWrite(colorsXmlPath);
+    }
+
+    if (hasDarkLogo) {
+      await generateAndroidAsset({
+        androidResPath,
+        fileName: "bootsplash_logo",
+        image: darkLogo,
+        imageWidth: logoWidth,
+        night: true,
+        // https://developer.android.com/develop/ui/views/launch/splash-screen#dimensions
+        maxWidth: 288,
+        maxHeight: 288,
+      });
+    }
+
+    if (hasBrand) {
+      await generateAndroidAsset({
+        androidResPath,
+        fileName: "bootsplash_brand",
+        image: brand,
+        imageWidth: brandWidth,
+        night: false,
+        // https://developer.android.com/develop/ui/views/launch/splash-screen#dimensions
+        maxWidth: 200,
+        maxHeight: 80,
+      });
+    }
+
+    if (hasDarkBrand) {
+      await generateAndroidAsset({
+        androidResPath,
+        fileName: "bootsplash_brand",
+        image: darkBrand,
+        imageWidth: brandWidth,
+        night: true,
+        // https://developer.android.com/develop/ui/views/launch/splash-screen#dimensions
+        maxWidth: 200,
+        maxHeight: 80,
+      });
+    }
+  }
+
+  if (iosProjectPath != null) {
+    const storyboardPath = path.resolve(
+      iosProjectPath,
+      "BootSplash.storyboard",
+    );
+
+    fs.writeFileSync(
+      storyboardPath,
+      getStoryboard({
+        logoHeight,
+        logoWidth,
+        hasBrand,
+        brandHeight,
+        brandWidth,
+        brandBottom,
+        background: background.rgb,
+        hasDarkBackground,
+      }),
+      "utf-8",
+    );
+
+    logWrite(storyboardPath);
+
+    if (hasDarkBackground) {
+      const colorsSetPath = path.resolve(
+        iosProjectPath,
+        "Colors.xcassets",
+        "BootSplashBackground.colorset",
+      );
+
+      fs.ensureDirSync(colorsSetPath);
+
+      fs.writeFileSync(
+        path.resolve(colorsSetPath, "Contents.json"),
+        `{
+  "colors": [
+    {
+      "idiom": "universal",
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "blue": "${background.rgb.B}",
+          "green": "${background.rgb.G}",
+          "red": "${background.rgb.R}",
+          "alpha": "1.000"
+        }
+      }
+    },
+    {
+      "appearances": [
+        {
+          "appearance": "luminosity",
+          "value": "dark"
+        }
+      ],
+      "idiom": "universal",
+      "color": {
+        "color-space": "srgb",
+        "components": {
+          "red": "${darkBackground.rgb.R}",
+          "green": "${darkBackground.rgb.G}",
+          "blue": "${darkBackground.rgb.B}",
+          "alpha": "1.000"
+        }
+      }
+    }
+  ],
+  "info": {
+    "author": "xcode",
+    "version": 1
+  }
+}
+`,
+        "utf-8",
+      );
+
+      logWrite(colorsSetPath);
+    }
+
+    if (hasDarkLogo) {
+      const imageSetPath = path.resolve(
+        iosProjectPath,
+        "Images.xcassets",
+        "BootSplashLogo.imageset",
+      );
+
+      fs.ensureDirSync(imageSetPath);
+
+      fs.writeFileSync(
+        path.resolve(imageSetPath, "Contents.json"),
+        DarkLogoContentsJson,
+        "utf-8",
+      );
+
+      await generateIOSAsset({
+        imageSetPath,
+        fileName: "bootsplash_dark_logo",
+        image: darkLogo,
+        imageWidth: logoWidth,
+      });
+    }
+
+    if (hasBrand) {
+      const imageSetPath = path.resolve(
+        iosProjectPath,
+        "Images.xcassets",
+        "BootSplashBrand.imageset",
+      );
+
+      fs.ensureDirSync(imageSetPath);
+
+      fs.writeFileSync(
+        path.resolve(imageSetPath, "Contents.json"),
+        hasDarkBrand ? DarkBrandContentsJson : BrandContentsJson,
+        "utf-8",
+      );
+
+      await generateIOSAsset({
+        imageSetPath,
+        fileName: "bootsplash_brand",
+        image: brand,
+        imageWidth: brandWidth,
+      });
+
+      if (hasDarkBrand) {
+        await generateIOSAsset({
+          imageSetPath,
+          fileName: "bootsplash_dark_brand",
+          image: darkBrand,
+          imageWidth: brandWidth,
+        });
+      }
+    }
+  }
+
+  if (assetsOutputPath != null) {
+    if (hasDarkBackground || hasBrand) {
+      fs.ensureDirSync(assetsOutputPath);
+
+      const manifest: Manifest = {
+        background: background.hex,
+        ...(hasDarkBackground && {
+          darkBackground: darkBackground.hex,
+        }),
+        logo: {
+          width: logoWidth,
+          height: logoHeight,
+        },
+        ...(hasBrand && {
+          brand: {
+            bottom: brandBottom,
+            width: brandWidth,
+            height: brandHeight,
+          },
+        }),
+      };
+
+      const manifestPath = path.resolve(
+        assetsOutputPath,
+        "bootsplash_manifest.json",
+      );
+
+      fs.writeFileSync(
+        manifestPath,
+        JSON.stringify(manifest, null, 2) + "\n",
+        "utf-8",
+      );
+
+      logWrite(manifestPath);
+    }
+
+    if (hasDarkLogo) {
+      await generateGenericAsset({
+        assetsOutputPath,
+        fileName: "bootsplash_dark_logo",
+        image: darkLogo,
+        imageWidth: logoWidth,
+      });
+    }
+
+    if (hasBrand) {
+      await generateGenericAsset({
+        assetsOutputPath,
+        fileName: "bootsplash_brand",
+        image: brand,
+        imageWidth: brandWidth,
+      });
+    }
+
+    if (hasDarkBrand) {
+      await generateGenericAsset({
+        assetsOutputPath,
+        fileName: "bootsplash_dark_brand",
+        image: darkBrand,
+        imageWidth: brandWidth,
+      });
+    }
+  }
+};