Merge pull request #598 from juliandescottes/disable-gallery

Disable gallery

src/css/notifications.css

@@ -6,12 +6,12 @@
   max-width: 300px;
 
   border-top-left-radius: 7px;
-  border: #F0C36D 1px solid;
+  border: #e1a325 2px solid;
   border-right: 0;
   border-bottom: 0;
 
   color: #222;
-  background-color: #F9EDBE;
+  background-color: var(--highlight-color);
 
   font-weight: bold;
   font-size: 13px;
@@ -24,8 +24,6 @@
   top: 6px;
   right: 17px;
 
-  color: gray;
-
   font-size: 18px;
   font-weight: bold;
 

src/css/settings-save.css

@@ -24,3 +24,13 @@
     color: white;
     font-style: normal;
 }
+
+.save-status-warning-icon {
+  float: left;
+  margin-top: 5px;
+}
+
+.save-status-warning-icon {
+  overflow: hidden;
+  padding-left: 10px;
+}

src/js/Constants.js

@@ -49,6 +49,12 @@ var Constants = {
   // TESTS
   DRAWING_TEST_FOLDER : 'drawing',
 
+  // Maximum size of a sprite that can be saved on piskelapp datastore.
+  // This size will be compared to the length of the stringified serialization of the sprite.
+  // This is an approximation at best but gives correct results in most cases.
+  // The datastore limit is 1 MiB, which we roughly approximate to 1 million characters.
+  APPENGINE_SAVE_LIMIT : 1 * 1000 * 1000,
+
   // SERVICE URLS
   APPENGINE_SAVE_URL : 'save',
   IMAGE_SERVICE_UPLOAD_URL : 'http://piskel-imgstore-b.appspot.com/__/upload',

src/js/controller/settings/SaveController.js

@@ -46,10 +46,19 @@
       this.disableSaveButtons_();
     }
 
+    this.updateSaveToGalleryMessage_();
+
     $.subscribe(Events.BEFORE_SAVING_PISKEL, this.disableSaveButtons_.bind(this));
     $.subscribe(Events.AFTER_SAVING_PISKEL, this.enableSaveButtons_.bind(this));
   };
 
+  ns.SaveController.prototype.updateSaveToGalleryMessage_ = function (spritesheetSize) {
+    if (pskl.app.performanceReportService.hasProblem()) {
+      var warningPartial = pskl.utils.Template.get('save-gallery-warning-partial');
+      document.querySelector('.save-online-status').innerHTML = warningPartial;
+    }
+  };
+
   ns.SaveController.prototype.insertSavePartials_ = function () {
     this.getPartials_().forEach(function (partial) {
       pskl.utils.Template.insert(this.saveForm, 'beforeend', partial);

src/js/service/performance/PerformanceReportService.js

@@ -22,4 +22,8 @@
       this.currentReport = report;
     }
   };
+
+  ns.PerformanceReportService.prototype.hasProblem = function () {
+    return this.currentReport && this.currentReport.hasProblem();
+  };
 })();

src/js/service/storage/GalleryStorageService.js

@@ -23,6 +23,10 @@
       framesheet_as_png : pskl.app.getFramesheetAsPng()
     };
 
+    if (serialized.length > Constants.APPENGINE_SAVE_LIMIT) {
+      deferred.reject('This sprite is too big to be saved on the gallery. Try saving it as a .piskel file.');
+    }
+
     if (descriptor.isPublic) {
       data.public = true;
     }

src/js/service/storage/StorageService.js

@@ -80,7 +80,10 @@
   };
 
   ns.StorageService.prototype.onSaveSuccess_ = function () {
-    $.publish(Events.SHOW_NOTIFICATION, [{'content': 'Successfully saved !'}]);
+    $.publish(Events.SHOW_NOTIFICATION, [{
+      content : 'Successfully saved !',
+      hideDelay : 3000
+    }]);
     $.publish(Events.PISKEL_SAVED);
     this.afterSaving_();
   };
@@ -90,14 +93,16 @@
     if (errorMessage) {
       errorText += ' : ' + errorMessage;
     }
-    $.publish(Events.SHOW_NOTIFICATION, [{'content': errorText}]);
+    $.publish(Events.SHOW_NOTIFICATION, [{
+      content : errorText,
+      hideDelay : 10000
+    }]);
     this.afterSaving_();
     return Q.reject(errorMessage);
   };
 
   ns.StorageService.prototype.afterSaving_ = function () {
     $.publish(Events.AFTER_SAVING_PISKEL);
-    window.setTimeout($.publish.bind($, Events.HIDE_NOTIFICATION), 5000);
   };
 
   ns.StorageService.prototype.setSavingFlag_ = function (savingFlag) {

src/js/utils/serialization/Serializer.js

@@ -3,7 +3,7 @@
 
   var areChunksValid = function (chunks) {
     return chunks.length && chunks.every(function (chunk) {
-      return chunk.base64PNG;
+      return chunk.base64PNG && chunk.base64PNG !== 'data:,';
     });
   };
 
@@ -49,7 +49,7 @@
       // retry.
       var chunks = [];
       while (!areChunksValid(chunks)) {
-        if (chunks.length > frames.length) {
+        if (chunks.length >= frames.length) {
           // Something went horribly wrong.
           chunks = [];
           break;
@@ -65,11 +65,10 @@
         var offset = 0;
         for (var i = 0 ; i < frameChunks.length ; i++) {
           var chunkFrames = frameChunks[i];
-          var renderer = new pskl.rendering.FramesheetRenderer(chunkFrames);
           chunks.push({
-            base64PNG : renderer.renderAsCanvas().toDataURL(),
             // create a layout array, containing the indices of the frames extracted in this chunk
             layout : createLineLayout(chunkFrames.length, offset),
+            base64PNG : ns.Serializer.serializeFramesToBase64(chunkFrames),
           });
 
           offset += chunkFrames.length;
@@ -78,6 +77,15 @@
 
       layerToSerialize.chunks = chunks;
       return JSON.stringify(layerToSerialize);
+    },
+
+    serializeFramesToBase64 : function (frames) {
+      try {
+        var renderer = new pskl.rendering.FramesheetRenderer(frames);
+        return renderer.renderAsCanvas().toDataURL();
+      } catch (e) {
+        return '';
+      }
     }
   };
 })();

src/templates/settings/save.html

@@ -26,10 +26,15 @@
   <div class="settings-title">Save online</div>
   <div class="settings-item">
     <input type="button" class="button button-primary" id="save-gallery-button" value="Save to your gallery" />
-    <div class="save-status">Your piskel will be stored online in your gallery.</div>
+    <div class="save-status save-online-status">Your piskel will be stored online in your gallery.</div>
   </div>
 </script>
 
+<script type="text/template" id="save-gallery-warning-partial">
+  <div class="save-status-warning-icon icon-common-warning-red">&nbsp;</div>
+  <div class="save-status-warning-text">Saving to the gallery might fail due to the sprite size.</div>
+</script>
+
 <!-- save-gallery-unavailable-partial -->
 <script type="text/template" id="save-gallery-unavailable-partial">
   <div class="settings-title">Save online</div>