feat: add share button for gifs on mobile

Author: Spu7Nix

index.html

@@ -268,6 +268,139 @@
                 navigator.serviceWorker.register('sw.js');
             });
         }
+
+        function addShareButton() {
+            const downloadLink = document.getElementById('rfd-output');
+            if (!downloadLink) {
+                return;
+            }
+
+            const parent = downloadLink.parentElement;
+            if (parent.querySelector('.share-button')) {
+                return;
+            }
+
+            // remove the "Ok" button, keep only "Cancel" button
+            const rfdButtons = parent.querySelectorAll('.rfd-button');
+            if (rfdButtons.length >= 2) {
+                rfdButtons[0].remove();
+            }
+
+            if (!navigator.share) {
+                return;
+            }
+
+            const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ||
+                            (navigator.maxTouchPoints && navigator.maxTouchPoints > 2);
+            
+            if (!isMobile) {
+                return;
+            }
+
+            const blobUrl = downloadLink.href;
+            const fileName = downloadLink.download || 'recording.gif';
+
+            const container = document.createElement('div');
+            container.style.cssText = `
+                display: flex;
+                flex-direction: column;
+                gap: 10px;
+                align-items: center;
+                font-weight: bold;
+                padding-bottom: 10px;
+                padding-top: 10px;
+            `;
+
+            const shareButton = document.createElement('button');
+            shareButton.className = 'share-button';
+            shareButton.textContent = 'save/share';
+            shareButton.style.cssText = `
+                padding: 12px 24px;
+                background-color: #007bff;
+                color: white;
+                border: none;
+                border-radius: 5px;
+                cursor: pointer;
+                font-weight: bold;
+                font-size: 16px;
+                touch-action: manipulation;
+                -webkit-tap-highlight-color: transparent;
+                width: 100%;
+                max-width: 300px;
+            `;
+
+            shareButton.addEventListener('click', async function(e) {
+                e.preventDefault();
+                e.stopPropagation();
+                
+                try {
+                    const response = await fetch(blobUrl);
+                    const blob = await response.blob();
+                    const file = new File([blob], fileName, { type: 'image/gif' });
+                    
+                    if (navigator.canShare && !navigator.canShare({ files: [file] })) {
+                        throw new Error('File sharing not supported');
+                    }
+
+                    await navigator.share({
+                        files: [file],
+                        title: 'obamification',
+                        text: 'made with https://obamify.com'
+                    });
+                } catch (error) {
+                    if (error.name !== 'AbortError') {
+                        console.error('Error sharing:', error);
+                        // Fall back to showing the download link
+                        alert('Could not share file: ' + error.message + '\nTry using the download link instead.');
+                    } else {
+                        console.log('Share cancelled by user');
+                    }
+                }
+            });
+
+            // Style the download link as a secondary button
+            downloadLink.style.cssText = `
+                padding: 10px 20px;
+                background-color: transparent;
+                color: white;
+                border: 1px solid white;
+                border-radius: 5px;
+                cursor: pointer;
+                font-weight: normal;
+                font-size: 14px;
+                text-decoration: none;
+                display: inline-block;
+                touch-action: manipulation;
+            `;
+            downloadLink.textContent = 'or download file';
+
+            // Wrap everything in the container
+            parent.insertBefore(container, downloadLink);
+            container.appendChild(shareButton);
+            container.appendChild(downloadLink);
+        }
+
+        const observer = new MutationObserver(function(mutations) {
+            mutations.forEach(function(mutation) {
+                if (mutation.addedNodes.length) {
+                    addShareButton();
+                }
+            });
+        });
+
+        if (document.readyState === 'loading') {
+            document.addEventListener('DOMContentLoaded', function() {
+                observer.observe(document.body, {
+                    childList: true,
+                    subtree: true
+                });
+            });
+        } else {
+            observer.observe(document.body, {
+                childList: true,
+                subtree: true
+            });
+        }
     </script>
 </body>