fix(puppets): fix wrong splash screen resolution for Apple iPhone Plu…

…s devices

fix #391

src/__snapshots__/cli.test.ts.snap

@@ -13,7 +13,7 @@ exports[`CLI integrates with main API and creates an output with generated meta
 <link rel=\\"apple-touch-startup-image\\" href=\\"%PUBLIC_URL%/temp/apple-splash-dark-2688-1242.jpg\\" media=\\"(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
 <link rel=\\"apple-touch-startup-image\\" href=\\"%PUBLIC_URL%/temp/apple-splash-dark-2436-1125.jpg\\" media=\\"(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
 <link rel=\\"apple-touch-startup-image\\" href=\\"%PUBLIC_URL%/temp/apple-splash-dark-1792-828.jpg\\" media=\\"(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
-<link rel=\\"apple-touch-startup-image\\" href=\\"%PUBLIC_URL%/temp/apple-splash-dark-1920-1080.jpg\\" media=\\"(prefers-color-scheme: dark) and (device-width: 360px) and (device-height: 640px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
+<link rel=\\"apple-touch-startup-image\\" href=\\"%PUBLIC_URL%/temp/apple-splash-dark-2208-1242.jpg\\" media=\\"(prefers-color-scheme: dark) and (device-width: 414px) and (device-height: 736px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape)\\">
 <link rel=\\"apple-touch-startup-image\\" href=\\"%PUBLIC_URL%/temp/apple-splash-dark-1334-750.jpg\\" media=\\"(prefers-color-scheme: dark) and (device-width: 375px) and (device-height: 667px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
 <link rel=\\"apple-touch-startup-image\\" href=\\"%PUBLIC_URL%/temp/apple-splash-dark-1136-640.jpg\\" media=\\"(prefers-color-scheme: dark) and (device-width: 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape)\\">
 

src/config/apple-fallback-data.json

@@ -194,12 +194,12 @@
   {
     "device": "iPhone 8 Plus",
     "portrait": {
-      "width": 1080,
-      "height": 1920
+      "width": 1242,
+      "height": 2208
     },
     "landscape": {
-      "width": 1920,
-      "height": 1080
+      "width": 2208,
+      "height": 1242
     },
     "scaleFactor": 3
   },
@@ -218,12 +218,12 @@
   {
     "device": "iPhone 7 Plus",
     "portrait": {
-      "width": 1080,
-      "height": 1920
+      "width": 1242,
+      "height": 2208
     },
     "landscape": {
-      "width": 1920,
-      "height": 1080
+      "width": 2208,
+      "height": 1242
     },
     "scaleFactor": 3
   },
@@ -242,12 +242,12 @@
   {
     "device": "iPhone 6s Plus",
     "portrait": {
-      "width": 1080,
-      "height": 1920
+      "width": 1242,
+      "height": 2208
     },
     "landscape": {
-      "width": 1920,
-      "height": 1080
+      "width": 2208,
+      "height": 1242
     },
     "scaleFactor": 3
   },
@@ -266,12 +266,12 @@
   {
     "device": "iPhone 6 Plus",
     "portrait": {
-      "width": 1080,
-      "height": 1920
+      "width": 1242,
+      "height": 2208
     },
     "landscape": {
-      "width": 1920,
-      "height": 1080
+      "width": 2208,
+      "height": 1242
     },
     "scaleFactor": 3
   },
@@ -323,4 +323,4 @@
     },
     "scaleFactor": 2
   }
-]
+]

src/helpers/images.ts

@@ -10,6 +10,7 @@ const mapToSqImageFileObj = (fileNamePrefix: string, size: number): Image => ({
   width: size,
   height: size,
   orientation: null,
+  scaleFactor: 1,
 });
 
 const mapToImageFileObj = (

src/helpers/puppets.ts

@@ -42,8 +42,10 @@ const getAppleSplashScreenData = async (
       return Array.from(
         document.querySelectorAll('table')?.[0].querySelectorAll('tbody tr'),
       ).map((tr) => {
-        // https://regex101.com/r/4dwvYf/3
-        const dimensionRegex = new RegExp(/\((\d+)x(\d+)\spx\s@(\d)x\)/gm);
+        // https://regex101.com/r/4dwvYf/4
+        const dimensionRegex = new RegExp(
+          /(\d+)x(\d+)\spt\s\((\d+)x(\d+)\spx\s@(\d)x\)/gm,
+        );
 
         const getParsedSpecs = (
           val: string,
@@ -54,24 +56,24 @@ const getAppleSplashScreenData = async (
             throw Error('Regex match failed while scraping the specs');
           }
 
-          const width = parseInt(regexMatch[1], 10);
-          const height = parseInt(regexMatch[2], 10);
-          const scaleFactor = parseInt(regexMatch[3], 10);
+          const widthInPoints = parseInt(regexMatch[1], 10);
+          const heightInPoints = parseInt(regexMatch[2], 10);
+          const scaleFactor = parseInt(regexMatch[5], 10);
 
           if (
-            width === 0 ||
-            Number.isNaN(width) ||
-            height === 0 ||
-            Number.isNaN(height) ||
+            widthInPoints === 0 ||
+            Number.isNaN(widthInPoints) ||
+            heightInPoints === 0 ||
+            Number.isNaN(heightInPoints) ||
             scaleFactor === 0 ||
             Number.isNaN(scaleFactor)
           ) {
             throw Error('Got unexpected dimensions while scraping the specs');
           }
 
           return {
-            width,
-            height,
+            width: widthInPoints * scaleFactor,
+            height: heightInPoints * scaleFactor,
             scaleFactor,
           };
         };
@@ -194,8 +196,8 @@ const saveImages = async (
             width: width / scaleFactor,
             height: height / scaleFactor,
             deviceScaleFactor: scaleFactor,
-            isLandscape: orientation === 'landscape'
-          }
+            isLandscape: orientation === 'landscape',
+          },
         });
 
         if (address) {

src/models/image.ts

@@ -21,7 +21,7 @@ export interface Image {
    Key defaults to undefined for icons
 
    */
-  scaleFactor?: number;
+  scaleFactor: number;
 
   /**
    Device orientation used for generating HTML meta tags for iOS splash screens