Conditionally disable PNG export for Safari

components/Editor.js

@@ -30,10 +30,19 @@ import {
   DEFAULT_CODE,
   DEFAULT_SETTINGS,
   DEFAULT_LANGUAGE,
-  DEFAULT_PRESET_ID
+  DEFAULT_PRESET_ID,
+  MAX_PAYLOAD_SIZE
 } from '../lib/constants'
 import { serializeState, getQueryStringState } from '../lib/routing'
-import { getSettings, escapeHtml, unescapeHtml, formatCode, omit } from '../lib/util'
+import {
+  getSettings,
+  escapeHtml,
+  unescapeHtml,
+  formatCode,
+  omit,
+  isSafari,
+  sizeOf
+} from '../lib/util'
 import LanguageIcon from './svg/Language'
 import ThemeIcon from './svg/Theme'
 
@@ -103,6 +112,8 @@ class Editor extends React.Component {
 
     window.addEventListener('offline', this.setOffline)
     window.addEventListener('online', this.setOnline)
+
+    this.isSafari = isSafari()
   }
 
   componentWillUnmount() {
@@ -128,12 +139,7 @@ class Editor extends React.Component {
   ) {
     // if safari, get image from api
     const isPNG = format !== 'svg'
-    if (
-      this.props.api.image &&
-      navigator.userAgent.indexOf('Safari') !== -1 &&
-      navigator.userAgent.indexOf('Chrome') === -1 &&
-      isPNG
-    ) {
+    if (this.props.api.image && this.isSafari && isPNG) {
       const encodedState = serializeState(this.state)
       return this.props.api.image(encodedState)
     }
@@ -264,6 +270,12 @@ class Editor extends React.Component {
   }
 
   updateBackground({ photographer, ...changes } = {}) {
+    if (this.isSafari) {
+      this.disablePNG =
+        typeof changes.backgroundImage === 'string' &&
+        sizeOf(changes.backgroundImage) > MAX_PAYLOAD_SIZE
+    }
+
     if (photographer) {
       this.updateState(({ code = DEFAULT_CODE }) => ({
         ...changes,
@@ -370,6 +382,7 @@ class Editor extends React.Component {
                 onChange={this.updateSetting}
                 export={this.export}
                 exportSize={exportSize}
+                disablePNG={this.disablePNG}
               />
             </div>
           </Toolbar>

components/ExportMenu.js

@@ -40,7 +40,7 @@ class ExportMenu extends React.PureComponent {
   handleExport = format => () => this.props.export(format)
 
   render() {
-    const { exportSize, filename, isVisible, toggleVisibility } = this.props
+    const { exportSize, filename, isVisible, toggleVisibility, disablePNG } = this.props
 
     return (
       <div className="export-menu-container" id="export-menu">
@@ -98,6 +98,7 @@ class ExportMenu extends React.PureComponent {
             <div className="save-container">
               <span>Save as</span>
               <div>
+                {!disablePNG && (
                   <Button
                     center
                     margin="0 8px 0 0"
@@ -108,6 +109,7 @@ class ExportMenu extends React.PureComponent {
                   >
                     PNG
                   </Button>
+                )}
                 <Button
                   center
                   hoverColor={COLORS.PURPLE}

lib/constants.js

@@ -641,3 +641,5 @@ export const DEFAULT_PRESETS = [
     id: 'preset:6'
   }
 ]
+
+export const MAX_PAYLOAD_SIZE = 5000000 //bytes

lib/util.js

@@ -76,3 +76,11 @@ export const omit = (object, keys) => omitBy(object, (_, k) => keys.indexOf(k) >
 export const stringifyRGBA = obj => `rgba(${obj.r},${obj.g},${obj.b},${obj.a})`
 
 export const capitalize = s => s.charAt(0).toUpperCase() + s.slice(1)
+
+export const isSafari = () =>
+  window &&
+  window.navigator &&
+  window.navigator.userAgent.indexOf('Safari') !== -1 &&
+  window.navigator.userAgent.indexOf('Chrome') === -1
+
+export const sizeOf = str => str.length * 2 //bytes