pageflow 14.5.2 → 15.0.0.beta1

data/app/assets/javascripts/pageflow/dist/react-server.js

@@ -8960,7 +8960,7 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 
 	var _loadingSpinner = __webpack_require__(616);
 
-	var _pageflow = __webpack_require__(620);
+	var _pageflow = __webpack_require__(619);
 
 	var _pageflow2 = _interopRequireDefault(_pageflow);
 
@@ -12016,7 +12016,6 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	});
 	exports.firstPage = exports.selector = exports.pageBackgroundImageUrl = undefined;
 	exports.firstPageAttribures = firstPageAttribures;
-	exports.firstPageAttribute = firstPageAttribute;
 	exports.pageAttribute = pageAttribute;
 	exports.pageAttributes = pageAttributes;
 	exports.pageState = pageState;
@@ -12046,12 +12045,6 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	  });
 	}
 
-	function firstPageAttribute(property) {
-	  return (0, _utils.memoizedSelector)(firstPage, function (page) {
-	    return page && page.attributes[property];
-	  });
-	}
-
 	function pageAttribute(property, options) {
 	  return (0, _utils.memoizedSelector)(selector(options), function (page) {
 	    return page && page.attributes[property];
@@ -24281,7 +24274,7 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	function autoTextTrackFile(textTrackFiles, defaultTextTrackFileId, locale, volume) {
 	  if (defaultTextTrackFileId) {
 	    var defaultTextTrackFile = textTrackFiles.find(function (textTrackFile) {
-	      return textTrackFile.id == defaultTextTrackFileId;
+	      return textTrackFile.permaId == defaultTextTrackFileId;
 	    });
 
 	    if (defaultTextTrackFile) {
@@ -29910,7 +29903,8 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	        collectionName: (0, _utils.camelize)(collectionName),
 	        dispatch: dispatch,
 
-	        attributes: ['id', 'basename', 'variants', 'is_ready', 'parent_file_id', 'parent_file_model_type', 'width', 'height', 'duration_in_ms', 'rights', 'created_at'],
+	        idAttribute: 'perma_id',
+	        attributes: ['id', 'perma_id', 'basename', 'variants', 'is_ready', 'parent_file_id', 'parent_file_model_type', 'width', 'height', 'duration_in_ms', 'rights', 'created_at'],
 	        includeConfiguration: true
 	      });
 	    });
@@ -29928,7 +29922,9 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    return {
 	      files: (0, _redux.combineReducers)(Object.keys(files).reduce(function (result, collectionName) {
 	        collectionName = (0, _utils.camelize)(collectionName);
-	        result[collectionName] = (0, _collections.createReducer)(collectionName);
+	        result[collectionName] = (0, _collections.createReducer)(collectionName, {
+	          idAttribute: 'permaId'
+	        });
 	        return result;
 	      }, {})),
 
@@ -31064,14 +31060,11 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 
 	var _ClassicLoadingSpinner = __webpack_require__(617);
 
-	var _MediaLoadingSpinner = __webpack_require__(618);
-
-	var _TitleLoadingSpinner = __webpack_require__(619);
+	var _TitleLoadingSpinner = __webpack_require__(618);
 
 	function registerWidgetTypes() {
 	  (0, _ClassicLoadingSpinner.register)();
 	  (0, _TitleLoadingSpinner.register)();
-	  (0, _MediaLoadingSpinner.register)();
 	}
 
 /***/ }),
@@ -31221,11 +31214,9 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	Object.defineProperty(exports, "__esModule", {
 	  value: true
 	});
-	exports.MediaLoadingSpinner = exports.MediaLoadingSpinnerComponent = undefined;
 
 	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
 
-	exports.getInvert = getInvert;
 	exports.register = register;
 
 	var _utils = __webpack_require__(340);
@@ -31260,13 +31251,13 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 
 	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
 
-	var MediaLoadingSpinnerComponent = exports.MediaLoadingSpinnerComponent = function (_React$Component) {
-	  _inherits(MediaLoadingSpinnerComponent, _React$Component);
+	var TitleLoadingSpinner = function (_React$Component) {
+	  _inherits(TitleLoadingSpinner, _React$Component);
 
-	  function MediaLoadingSpinnerComponent(props) {
-	    _classCallCheck(this, MediaLoadingSpinnerComponent);
+	  function TitleLoadingSpinner(props) {
+	    _classCallCheck(this, TitleLoadingSpinner);
 
-	    var _this = _possibleConstructorReturn(this, (MediaLoadingSpinnerComponent.__proto__ || Object.getPrototypeOf(MediaLoadingSpinnerComponent)).call(this, props));
+	    var _this = _possibleConstructorReturn(this, (TitleLoadingSpinner.__proto__ || Object.getPrototypeOf(TitleLoadingSpinner)).call(this, props));
 
 	    _this.state = {
 	      hidden: false,
@@ -31275,7 +31266,7 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    return _this;
 	  }
 
-	  _createClass(MediaLoadingSpinnerComponent, [{
+	  _createClass(TitleLoadingSpinner, [{
 	    key: 'componentDidMount',
 	    value: function componentDidMount() {
 	      var _this2 = this;
@@ -31316,29 +31307,42 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    value: function render() {
 	      var _this4 = this;
 
-	      var editing = this.props.editing;
+	      var _props = this.props,
+	          editing = _props.editing,
+	          title = _props.title,
+	          subtitle = _props.subtitle,
+	          entryTitle = _props.entryTitle;
 	      var _state = this.state,
 	          hidden = _state.hidden,
 	          animating = _state.animating;
 
-	      var invert = getInvert(this.props);
-	      var logoElement = _react2.default.createElement('div', { className: (0, _classnames2.default)("media_loading_spinner-logo", { 'media_loading_spinner-logo-invert': invert }) });
-	      if (this.props.removeLogo) {
-	        logoElement = '';
-	      }
+
 	      if (editing || !hidden) {
 	        return _react2.default.createElement(
 	          'div',
-	          { className: (0, _classnames2.default)('media_loading_spinner', { 'media_loading_spinner-fade': animating }, { 'media_loading_spinner-invert': invert }),
+	          { className: (0, _classnames2.default)('title_loading_spinner', { 'title_loading_spinner-fade': animating }),
 	            onAnimationEnd: function onAnimationEnd(event) {
 	              return _this4.hideOrLoop(event);
 	            },
 	            onTouchMove: preventScrollBouncing,
-	            style: inlineStyle(this.props) },
-	          logoElement,
-	          _react2.default.createElement('div', { className: 'media_loading_spinner-image',
+	            style: inlineStyle() },
+	          _react2.default.createElement('div', { className: 'title_loading_spinner-logo' }),
+	          _react2.default.createElement('div', { className: 'title_loading_spinner-image',
 	            style: backgroundImageInlineStyles(this.props) }),
-	          this.props.children
+	          _react2.default.createElement(
+	            'div',
+	            { className: 'title_loading_spinner-titles' },
+	            _react2.default.createElement(
+	              'div',
+	              { className: 'title_loading_spinner-title' },
+	              title || entryTitle
+	            ),
+	            _react2.default.createElement(
+	              'div',
+	              { className: 'title_loading_spinner-subtitle' },
+	              subtitle
+	            )
+	          )
 	        );
 	      } else {
 	        return _react2.default.createElement('noscript', null);
@@ -31346,36 +31350,10 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    }
 	  }]);
 
-	  return MediaLoadingSpinnerComponent;
+	  return TitleLoadingSpinner;
 	}(_react2.default.Component);
 
-	function preventScrollBouncing(e) {
-	  e.preventDefault();
-	}
-
-	function backgroundImageInlineStyles(_ref) {
-	  var firstPageBackgroundImageUrl = _ref.firstPageBackgroundImageUrl,
-	      backgroundImage = _ref.backgroundImage,
-	      blurStrength = _ref.blurStrength;
-
-	  var url = backgroundImage ? backgroundImage.urls.medium : firstPageBackgroundImageUrl;
-	  if (url) {
-	    return {
-	      backgroundImage: 'url("' + url + '")',
-	      filter: 'blur(' + blurStrength + 'px)'
-	    };
-	  }
-	}
-
-	function getInvert(props) {
-	  if (!props.backgroundImage && props.invert == undefined) {
-	    return props.firstPageInvert;
-	  }
-	  return props.invert;
-	}
-
-	function inlineStyle(props) {
-	  var invert = getInvert(props);
+	function inlineStyle() {
 	  return {
 	    position: 'absolute',
 	    top: 0,
@@ -31383,144 +31361,49 @@ pageflow = typeof pageflow === "object" ? pageflow : {}; pageflow["react"] =
 	    width: '100%',
 	    height: '100%',
 	    zIndex: 100,
-	    backgroundColor: invert ? '#fff' : '#000'
+	    backgroundColor: '#000'
 	  };
 	}
 
-	var MediaLoadingSpinner = exports.MediaLoadingSpinner = (0, _reactRedux.connect)((0, _utils.combineSelectors)({
-	  editing: (0, _selectors2.editingWidget)({ role: 'loading_spinner' }),
-	  firstPageInvert: (0, _selectors4.firstPageAttribute)('invert'),
-	  firstPageBackgroundImageUrl: (0, _selectors4.pageBackgroundImageUrl)({
-	    variant: 'medium',
-	    page: (0, _selectors4.firstPageAttribures)()
-	  }),
-	  backgroundImage: (0, _selectors3.file)('imageFiles', {
-	    id: (0, _selectors2.widgetAttribute)('customBackgroundImageId', {
-	      role: 'loading_spinner'
-	    })
-	  }),
-	  invert: (0, _selectors2.widgetAttribute)('invert', { role: 'loading_spinner' }),
-	  removeLogo: (0, _selectors2.widgetAttribute)('removeLogo', { role: 'loading_spinner' }),
-	  blurStrength: (0, _selectors2.widgetAttribute)('blurStrength', { role: 'loading_spinner' })
-	}))(MediaLoadingSpinnerComponent);
-
-	function register() {
-	  (0, _registerWidgetType2.default)('media_loading_spinner', {
-	    component: MediaLoadingSpinner
-	  });
-	}
-
-/***/ }),
-/* 619 */
-/***/ (function(module, exports, __webpack_require__) {
-
-	'use strict';
-
-	Object.defineProperty(exports, "__esModule", {
-	  value: true
-	});
-	exports.TitleLoadingSpinner = undefined;
-
-	var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
-
-	exports.register = register;
-
-	var _utils = __webpack_require__(340);
-
-	var _react = __webpack_require__(334);
-
-	var _react2 = _interopRequireDefault(_react);
-
-	var _reactRedux = __webpack_require__(399);
-
-	var _classnames = __webpack_require__(335);
-
-	var _classnames2 = _interopRequireDefault(_classnames);
-
-	var _registerWidgetType = __webpack_require__(562);
-
-	var _registerWidgetType2 = _interopRequireDefault(_registerWidgetType);
-
-	var _selectors = __webpack_require__(502);
-
-	var _selectors2 = __webpack_require__(376);
-
-	var _selectors3 = __webpack_require__(429);
-
-	var _selectors4 = __webpack_require__(493);
-
-	var _MediaLoadingSpinner = __webpack_require__(618);
-
-	function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-	function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
-
-	function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
-
-	function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
-
-	var TitleLoadingSpinner = exports.TitleLoadingSpinner = function (_React$Component) {
-	  _inherits(TitleLoadingSpinner, _React$Component);
+	function backgroundImageInlineStyles(_ref) {
+	  var firstPageBackgroundImageUrl = _ref.firstPageBackgroundImageUrl,
+	      backgroundImage = _ref.backgroundImage;
 
-	  function TitleLoadingSpinner() {
-	    _classCallCheck(this, TitleLoadingSpinner);
+	  var url = backgroundImage ? backgroundImage.urls.medium : firstPageBackgroundImageUrl;
 
-	    return _possibleConstructorReturn(this, (TitleLoadingSpinner.__proto__ || Object.getPrototypeOf(TitleLoadingSpinner)).apply(this, arguments));
+	  if (url) {
+	    return {
+	      backgroundImage: 'url("' + url + '")'
+	    };
 	  }
+	}
 
-	  _createClass(TitleLoadingSpinner, [{
-	    key: 'render',
-	    value: function render() {
-	      var _props = this.props,
-	          title = _props.title,
-	          subtitle = _props.subtitle,
-	          entryTitle = _props.entryTitle;
-
-	      var invert = (0, _MediaLoadingSpinner.getInvert)(this.props);
-	      return _react2.default.createElement(
-	        _MediaLoadingSpinner.MediaLoadingSpinner,
-	        null,
-	        _react2.default.createElement(
-	          'div',
-	          { className: (0, _classnames2.default)('media_loading_spinner-titles', { 'media_loading_spinner-invert': invert }) },
-	          _react2.default.createElement(
-	            'div',
-	            { className: 'media_loading_spinner-title' },
-	            title || entryTitle
-	          ),
-	          _react2.default.createElement(
-	            'div',
-	            { className: 'media_loading_spinner-subtitle' },
-	            subtitle
-	          )
-	        )
-	      );
-	    }
-	  }]);
-
-	  return TitleLoadingSpinner;
-	}(_react2.default.Component);
+	function preventScrollBouncing(e) {
+	  e.preventDefault();
+	}
 
 	function register() {
 	  (0, _registerWidgetType2.default)('title_loading_spinner', {
 	    component: (0, _reactRedux.connect)((0, _utils.combineSelectors)({
-	      firstPageInvert: (0, _selectors2.firstPageAttribute)('invert'),
+	      editing: (0, _selectors2.editingWidget)({ role: 'loading_spinner' }),
+	      firstPageBackgroundImageUrl: (0, _selectors4.pageBackgroundImageUrl)({
+	        variant: 'medium',
+	        page: (0, _selectors4.firstPageAttribures)()
+	      }),
 	      backgroundImage: (0, _selectors3.file)('imageFiles', {
-	        id: (0, _selectors4.widgetAttribute)('customBackgroundImageId', {
+	        id: (0, _selectors2.widgetAttribute)('customBackgroundImageId', {
 	          role: 'loading_spinner'
 	        })
 	      }),
 	      entryTitle: (0, _selectors.entryAttribute)('title'),
-	      title: (0, _selectors4.widgetAttribute)('title', { role: 'loading_spinner' }),
-	      subtitle: (0, _selectors4.widgetAttribute)('subtitle', { role: 'loading_spinner' }),
-	      removeLogo: (0, _selectors4.widgetAttribute)('removeLogo', { role: 'loading_spinner' }),
-	      invert: (0, _selectors4.widgetAttribute)('invert', { role: 'loading_spinner' })
+	      title: (0, _selectors2.widgetAttribute)('title', { role: 'loading_spinner' }),
+	      subtitle: (0, _selectors2.widgetAttribute)('subtitle', { role: 'loading_spinner' })
 	    }))(TitleLoadingSpinner)
 	  });
 	}
 
 /***/ }),
-/* 620 */
+/* 619 */
 /***/ (function(module, exports) {
 
 	module.exports = pageflow;

data/app/assets/javascripts/pageflow/editor/api/widget_type.js

@@ -12,6 +12,7 @@ pageflow.WidgetType = pageflow.Object.extend({
 
   createConfigurationEditorView: function(options) {
     var constructor = this.configurationEditorView;
+
     return new constructor(_.extend({
       attributeTranslationKeyPrefixes: [
         'pageflow.editor.widgets.attributes.' + this.name,

data/app/assets/javascripts/pageflow/editor/base.js

@@ -17,8 +17,8 @@
 
 //= require_tree ./utils
 //= require_tree ./models/mixins
-//= require ./models/uploaded_file
-//= require ./models/hosted_file
+//= require ./models/reusable_file
+//= require ./models/uploadable_file
 //= require ./models/encoded_file
 //= require ./models/configuration
 //= require ./models/scaffold

data/app/assets/javascripts/pageflow/editor/collections/files_collection.js

@@ -32,6 +32,10 @@ pageflow.FilesCollection = Backbone.Collection.extend({
       });
   },
 
+  getByPermaId: function(permaId) {
+    return this.findWhere({perma_id: parseInt(permaId, 10)});
+  },
+
   getEntry: function() {
     return this.entry || pageflow.entry;
   },

data/app/assets/javascripts/pageflow/editor/collections/nested_files_collection.js

@@ -23,5 +23,9 @@ pageflow.NestedFilesCollection = pageflow.SubsetCollection.extend({
                     'change:configuration:' + nestedFilesOrder.binding,
                     this.sort);
     }
+  },
+
+  getByPermaId: function(permaId) {
+    return this.findWhere({perma_id: parseInt(permaId, 10)});
   }
 });

data/app/assets/javascripts/pageflow/editor/initializers/setup_audio.js

@@ -1,7 +1,7 @@
 pageflow.app.addInitializer(function(options) {
   pageflow.Audio.setup({
     getSources: function(audioFileId) {
-      var file = pageflow.audioFiles.get(audioFileId);
+      var file = pageflow.audioFiles.getByPermaId(audioFileId);
       return file ? file.getSources() : '';
     }
   });

data/app/assets/javascripts/pageflow/editor/models/encoded_file.js

@@ -1,4 +1,4 @@
-pageflow.EncodedFile = pageflow.HostedFile.extend({
+pageflow.EncodedFile = pageflow.UploadableFile.extend({
   processingStages: function() {
     var stages = [];
 

data/app/assets/javascripts/pageflow/editor/models/image_file.js

@@ -1,4 +1,4 @@
-pageflow.ImageFile = pageflow.UploadedFile.extend({
+pageflow.ImageFile = pageflow.ReusableFile.extend({
   stages: [
     {
       name: 'uploading',

data/app/assets/javascripts/pageflow/editor/models/mixins/transient_references.js

@@ -11,7 +11,7 @@ pageflow.transientReferences = {
     }
 
     return this.transientReferences[attribute] ||
-      collection.get(this.get(attribute));
+      collection.getByPermaId(this.get(attribute));
   },
 
   setReference: function(attribute, record) {
@@ -29,18 +29,18 @@ pageflow.transientReferences = {
     if (record.isNew()) {
       this.transientReferences[attribute] = record;
       this.set(attribute, null);
-      this._setIdOnceSynced(attribute, record);
+      this._setPermaIdOnceSynced(attribute, record);
     }
     else {
-      this.set(attribute, record.id);
+      this.set(attribute, record.get('perma_id'));
     }
   },
 
-  _setIdOnceSynced: function(attribute, record) {
-    record.once('change:id', function() {
+  _setPermaIdOnceSynced: function(attribute, record) {
+    record.once('change:perma_id', function() {
       this._onceRecordCanBeFoundInCollection(record, function() {
         delete this.transientReferences[attribute];
-        this.set(attribute, record.id);
+        this.set(attribute, record.get('perma_id'));
       });
     }, this);
   },
@@ -73,7 +73,7 @@ pageflow.transientReferences = {
 
   _cleanUpSaveListener: function(attribute) {
     if (this.transientReferences[attribute]) {
-      this.stopListening(this.transientReferences[attribute], 'change:id');
+      this.stopListening(this.transientReferences[attribute], 'change:perma_id');
       delete this.transientReferences[attribute];
     }
   },

data/app/assets/javascripts/pageflow/editor/models/preview_entry_data.js

@@ -10,8 +10,8 @@ pageflow.PreviewEntryData = pageflow.EntryData.extend({
     return this.entry.getTheme().get(name);
   },
 
-  getFile: function(collectionName, id) {
-    var file = this.entry.getFileCollection(collectionName).get(id);
+  getFile: function(collectionName, permaId) {
+    var file = this.entry.getFileCollection(collectionName).getByPermaId(permaId);
     return file && file.attributes;
   },
 

data/app/assets/javascripts/pageflow/editor/models/{uploaded_file.js → reusable_file.js}

@@ -1,4 +1,4 @@
-pageflow.UploadedFile = Backbone.Model.extend({
+pageflow.ReusableFile = Backbone.Model.extend({
   mixins: [pageflow.stageProvider, pageflow.retryable],
 
   initialize: function(attributes, options) {

data/app/assets/javascripts/pageflow/editor/models/text_track_file.js

@@ -1,4 +1,4 @@
-pageflow.TextTrackFile = pageflow.HostedFile.extend({
+pageflow.TextTrackFile = pageflow.UploadableFile.extend({
   defaults: {
     configuration: {
       kind: 'captions'
@@ -16,7 +16,7 @@ pageflow.TextTrackFile = pageflow.HostedFile.extend({
   readyState: 'processed',
 
   initialize: function(attributes, options) {
-    pageflow.UploadedFile.prototype.initialize.apply(this, arguments);
+    pageflow.ReusableFile.prototype.initialize.apply(this, arguments);
 
     if (this.isNew() && !this.configuration.get('srclang')) {
       this.configuration.set('srclang', this.extractLanguageCodeFromFilename());

data/app/assets/javascripts/pageflow/editor/models/{hosted_file.js → uploadable_file.js}

@@ -1,4 +1,4 @@
-pageflow.HostedFile = pageflow.UploadedFile.extend({
+pageflow.UploadableFile = pageflow.ReusableFile.extend({
   stages: function() {
     return [
       {

data/app/assets/javascripts/pageflow/editor/views/widget_types/title_loading_spinner.js

@@ -14,9 +14,6 @@ pageflow.editor.widgetTypes.register('title_loading_spinner', {
           collection: 'image_files',
           fileSelectionHandler: 'widgetConfiguration'
         });
-        this.input('invert', pageflow.CheckBoxInputView);
-        this.input('remove_logo', pageflow.CheckBoxInputView);
-        this.input('blur_strength', pageflow.SliderInputView);
       });
     }
   })

data/app/assets/stylesheets/pageflow/mixins/pageflow.scss

@@ -29,7 +29,7 @@
   }
 }
 
-@mixin pageflow-hosted-file-stage($stage-name) {
+@mixin pageflow-uploadable-file-stage($stage-name) {
   .editor {
     .file_thumbnail .pictogram.#{$stage-name},
     .file_stage_item.#{$stage-name} {

data/app/assets/stylesheets/pageflow/themes/default/base.scss

@@ -17,9 +17,9 @@
 @import "./built_in_page_types";
 @import "./anchors";
 @import "./cookie_notice_bar";
+@import "./loading_spinner";
 @import "./logo";
 @import "./page";
-@import "./loading_spinner";
 @import "./indicators";
 @import "./navigation";
 @import "./navigation_share_box";

data/app/assets/stylesheets/pageflow/themes/default/loading_spinner/title.scss

@@ -8,13 +8,25 @@ $title-loading-spinner-subtitle-typography: () !default;
 
 $title-loading-spinner-phone-subtitle-typography: () !default;
 
-.media_loading_spinner {
+.title_loading_spinner {
+  $duration: 7s;
 
-  &-fade {
-    .media_loading_spinner-titles {
-      @include animation(title_fade $media-loading-spinner-duration ease-out 1);
-      @include animation-fill-mode(forwards);
-    }
+  &:before {
+    content: "";
+    display: block;
+    position: absolute;
+    top: 0;
+    left: 0;
+    bottom: 0;
+    right: 0;
+    z-index: 1;
+    background-color: rgba(0, 0, 0, 0.15);
+  }
+
+  &-image {
+    background-size: cover;
+    filter: blur(50px);
+    height: 100%;
   }
 
   &-titles {
@@ -41,7 +53,7 @@ $title-loading-spinner-phone-subtitle-typography: () !default;
       content: "";
       display: block;
       width: 100px;
-      border-bottom: solid 2px;
+      border-bottom: solid 2px #fff;
       margin: 20px auto;
     }
 
@@ -84,7 +96,36 @@ $title-loading-spinner-phone-subtitle-typography: () !default;
       );
     }
   }
-  
+
+  &-logo {
+    @extend %pageflow_widget_margin_right !optional;
+    position: relative;
+
+    &:after {
+      @extend %background_logo;
+      content: "";
+      display: block;
+      z-index: 1;
+      opacity: 0;
+    }
+  }
+
+  &-fade {
+    @include animation(fade_out 1s ease 1);
+    @include animation-delay($duration + 0.5s);
+    @include animation-fill-mode(forwards);
+
+    .title_loading_spinner-titles {
+      @include animation(title_fade $duration ease-out 1);
+      @include animation-fill-mode(forwards);
+    }
+
+    .title_loading_spinner-logo:after {
+      @include animation(fade_in 1s ease-out 1);
+      @include animation-fill-mode(forwards);
+    }
+  }
+
   @include keyframes(title_fade) {
     0% {
       @include transform(translate(-50%, -30%));
@@ -114,5 +155,4 @@ $title-loading-spinner-phone-subtitle-typography: () !default;
       opacity: 0;
     }
   }
-
-}
+}

data/app/assets/stylesheets/pageflow/themes/default/loading_spinner.scss

@@ -46,10 +46,8 @@ $loading-spinner-glow-size: 140px !default;
 /// File extension of background and logo
 $loading-spinner-image-file-extension: "png" !default;
 
-@import "./loading_spinner/media";
 @import "./loading_spinner/title";
 
-
 @if not $custom-loading-spinner {
   .loading_spinner {
     // scss-lint:disable ImportantRule