import jpegThumbnail from './jpeg-thumbnail';

const costumePayload = costume => {
    // TODO is it ok to base64 encode SVGs? What about unicode text inside them?
    const assetDataUrl = costume.asset.encodeDataURI();
    const assetDataFormat = costume.dataFormat;
    const payload = {
        type: 'costume',
        name: costume.name,
        // Params to be filled in below
        mime: '',
        body: '',
        thumbnail: ''
    };

    switch (assetDataFormat) {
    case 'svg':
        payload.mime = 'image/svg+xml';
        payload.body = assetDataUrl.replace('data:image/svg+xml;base64,', '');
        break;
    case 'png':
        payload.mime = 'image/png';
        payload.body = assetDataUrl.replace('data:image/png;base64,', '');
        break;
    default:
        alert(`Cannot serialize for format: ${assetDataFormat}`); // eslint-disable-line
    }

    // TODO we may be able to optimize by not actually generating thumbnails...
    return jpegThumbnail(assetDataUrl).then(thumbnail => {
        payload.thumbnail = thumbnail.replace('data:image/jpeg;base64,', '');
        return payload;
    });
};

export default costumePayload;

@@ -38,16 +38,64 @@
 mbnail';
+%0Aimport getCostumeUrl from '../get-costume-url';
 %0A%0Aconst 
@@ -933,80 +933,231 @@
  // 
-TODO we may be able to optimize by not actually generating thumbnails...
+Do not generate the thumbnail from the raw asset. Instead use the getCostumeUrl%0A    // utility which inlines the fonts to make the thumbnail show the right fonts.%0A    const inlinedFontDataUrl = getCostumeUrl(costume.asset);
 %0A   
@@ -1178,20 +1178,26 @@
 umbnail(
-asse
+inlinedFon
 tDataUrl

Fix missing fonts in backpack thumbnails