Update app2.js

app2.js

@@ -8,87 +8,33 @@ dotenv.config();
 
 const config = {
     maxTextLength: 100,
-    viewport: { width: 1920, height: 1080 },
-    defaultUserAgent: 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36',
-    iPhoneUserAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1'
+    defaultViewport: { width: 1920, height: 1080 },
+    iPhoneViewport: { width: 390, height: 844 }
 };
 
 let defaultBrowser, defaultPage, iPhoneBrowser, iPhonePage;
 
-const createBrowserContext = async (isIPhone = false) => {
-    const browser = await chromium.launch({ headless: true });
-    const contextOptions = isIPhone ? {
-        ...devices['iPhone 13'],
-        deviceScaleFactor: 2,
-        isMobile: true,
-        hasTouch: true,
-        userAgent: config.iPhoneUserAgent,
-        forcedColors: 'none',
-        viewport: { width: 390, height: 844 }  // iPhone 13 dimensions
-    } : {
-        viewport: config.viewport,
-        userAgent: config.defaultUserAgent
-    };
-
-    const context = await browser.newContext(contextOptions);
-
-    // Block unnecessary resources
-    await context.route('**/*', (route) => {
-        const url = route.request().url();
-        if (url.endsWith('.png') || url.endsWith('.jpg') || url.includes('google-analytics')) {
-            return route.abort();
-        }
-        route.continue();
-    });
-
-    const page = await context.newPage();
-    
-    // Add iPhone-specific styles for emoji if needed
-    if (isIPhone) {
-        await page.addStyleTag({
-            content: `
-                @font-face {
-                    font-family: "Apple Color Emoji";
-                    src: local("Apple Color Emoji");
-                }
-                * {
-                    font-family: "Apple Color Emoji", -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", system-ui, sans-serif !important;
-                    -webkit-font-smoothing: antialiased;
-                    text-rendering: optimizeLegibility;
-                }
-                #textInput, #textOverlay {
-                    font-family: "Apple Color Emoji", -apple-system, BlinkMacSystemFont, "SF Pro", "SF Pro Display", system-ui, sans-serif !important;
-                }
-            `
-        });
-    }
-
-    await page.goto('https://www.bratgenerator.com/', { 
-        waitUntil: 'networkidle',
-        timeout: 30000 
-    });
-
-    try {
-        await page.click('#onetrust-accept-btn-handler', { timeout: 2000 });
-    } catch {}
-
-    await page.evaluate(() => setupTheme('white'));
-    
-    return { browser, page };
-};
-
 const utils = {
     async initialize() {
         if (!defaultBrowser) {
-            const setup = await createBrowserContext(false);
-            defaultBrowser = setup.browser;
-            defaultPage = setup.page;
+            defaultBrowser = await chromium.launch({ headless: true });
+            const context = await defaultBrowser.newContext({
+                viewport: config.defaultViewport
+            });
+            defaultPage = await context.newPage();
+            await defaultPage.goto('https://www.bratgenerator.com/', { 
+                waitUntil: 'networkidle'
+            });
+            try {
+                await defaultPage.click('#onetrust-accept-btn-handler', { timeout: 2000 });
+            } catch {}
+            await defaultPage.evaluate(() => setupTheme('white'));
         }
     },
 
     async generateBrat(text) {
         await defaultPage.fill('#textInput', text);
-        await defaultPage.waitForTimeout(500); // Give time for text to render
+        await defaultPage.waitForTimeout(500);
         const overlay = defaultPage.locator('#textOverlay');
         return overlay.screenshot({ timeout: 5000 });
     },
@@ -101,17 +47,128 @@ const utils = {
 const utils2 = {
     async initialize() {
         if (!iPhoneBrowser) {
-            const setup = await createBrowserContext(true);
-            iPhoneBrowser = setup.browser;
-            iPhonePage = setup.page;
+            iPhoneBrowser = await chromium.launch({ headless: true });
+            
+            // Buat context dengan konfigurasi iPhone yang spesifik
+            const context = await iPhoneBrowser.newContext({
+                ...devices['iPhone 13 Pro'],
+                locale: 'en-US',
+                deviceScaleFactor: 3,
+                isMobile: true,
+                hasTouch: true,
+                colorScheme: 'light',
+                forcedColors: 'none',
+                viewport: config.iPhoneViewport,
+                userAgent: 'Mozilla/5.0 (iPhone; CPU iPhone OS 15_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.0 Mobile/15E148 Safari/604.1'
+            });
+
+            iPhonePage = await context.newPage();
+
+            // Inject necessary meta tags and CSS
+            await iPhonePage.route('**/*', async route => {
+                if (route.request().resourceType() === 'document') {
+                    const response = await route.fetch();
+                    const text = await response.text();
+                    const modifiedHtml = text.replace('</head>',
+                        `<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
+                         <style>
+                           @font-face {
+                             font-family: 'Apple Color Emoji';
+                             src: local('Apple Color Emoji');
+                             unicode-range: U+1F300-1F9FF;
+                           }
+                           * {
+                             font-family: -apple-system !important;
+                           }
+                           #textInput, #textOverlay {
+                             font-family: -apple-system !important;
+                             -webkit-text-size-adjust: 100%;
+                             text-size-adjust: 100%;
+                           }
+                           .emoji {
+                             font-family: 'Apple Color Emoji' !important;
+                           }
+                         </style>
+                         </head>`
+                    );
+                    route.fulfill({
+                        response,
+                        body: modifiedHtml,
+                        headers: {
+                            ...response.headers(),
+                            'content-type': 'text/html'
+                        }
+                    });
+                } else {
+                    route.continue();
+                }
+            });
+
+            await iPhonePage.goto('https://www.bratgenerator.com/', { 
+                waitUntil: 'networkidle',
+                timeout: 30000 
+            });
+
+            // Set viewport dan emulasi perangkat
+            await iPhonePage.setViewportSize(config.iPhoneViewport);
+
+            // Inject script untuk mengubah emoji
+            await iPhonePage.addScriptTag({
+                content: `
+                    function replaceWithEmojiSpans() {
+                        const textInput = document.querySelector('#textInput');
+                        const textOverlay = document.querySelector('#textOverlay');
+                        
+                        if (textInput && textOverlay) {
+                            const emojiRegex = /[\u{1F300}-\u{1F9FF}]/gu;
+                            const wrapEmojisWithSpan = (text) => {
+                                return text.replace(emojiRegex, match => 
+                                    '<span class="emoji">' + match + '</span>'
+                                );
+                            };
+                            
+                            const originalHandler = textInput.oninput;
+                            textInput.oninput = function(e) {
+                                if (originalHandler) originalHandler.call(this, e);
+                                textOverlay.innerHTML = wrapEmojisWithSpan(this.value);
+                            };
+                        }
+                    }
+                    replaceWithEmojiSpans();
+                `
+            });
+
+            try {
+                await iPhonePage.click('#onetrust-accept-btn-handler', { timeout: 2000 });
+            } catch {}
+
+            await iPhonePage.evaluate(() => setupTheme('white'));
         }
     },
 
     async generateBrat(text) {
         await iPhonePage.fill('#textInput', text);
-        await iPhonePage.waitForTimeout(500); // Give time for text to render
+        
+        // Tunggu animasi dan render selesai
+        await iPhonePage.waitForTimeout(1000);
+        
+        // Pastikan emoji sudah di-wrap dengan span
+        await iPhonePage.evaluate((text) => {
+            const textOverlay = document.querySelector('#textOverlay');
+            const emojiRegex = /[\u{1F300}-\u{1F9FF}]/gu;
+            const wrappedText = text.replace(emojiRegex, match => 
+                '<span class="emoji">' + match + '</span>'
+            );
+            textOverlay.innerHTML = wrappedText;
+        }, text);
+
+        await iPhonePage.waitForTimeout(500);
+        
         const overlay = iPhonePage.locator('#textOverlay');
-        return overlay.screenshot({ timeout: 5000 });
+        return overlay.screenshot({ 
+            timeout: 5000,
+            scale: 'device'
+        });
     },
 
     async close() {