Support publishedMedia references to dependency resource IDs.

Dockerfile

@@ -55,8 +55,8 @@ RUN mkdir /sdk2 && \
   curl -L "https://s3.amazonaws.com/assets.getpebble.com/sdk3/sdk-core/sdk-core-${SDK_TWO_VERSION}.tar.bz2" | \
   tar --strip-components=1 -xj -C /sdk2
 
-ENV SDK_THREE_CHANNEL=beta
-ENV SDK_THREE_VERSION=4.0-beta16
+ENV SDK_THREE_CHANNEL=release
+ENV SDK_THREE_VERSION=4.0
 
 # Install SDK 3
 RUN mkdir /sdk3 && \

ide/api/ycm.py

@@ -69,6 +69,7 @@ def _spin_up_server(request):
                         'server': ws_server,
                         'secure': secure,
                         'libraries': response.get('libraries', {}),
+                        'resources': response.get('resources', []),
                         'npm_error': response.get('npm_error', None)
                     }
 

ide/models/published_media.py

@@ -18,14 +18,17 @@ class PublishedMedia(IdeModel):
 
     @classmethod
     def from_dict(cls, project, data):
-        obj = cls.objects.create(project=project, name=data['name'], media_id=data['id'])
-        if 'glance' in data:
-            obj.glance = data['glance']
-        if 'timeline' in data:
-            obj.timeline_tiny = data['timeline']['tiny']
-            obj.timeline_small = data['timeline']['small']
-            obj.timeline_large = data['timeline']['large']
-        return obj
+        return cls.objects.create(
+            project=project,
+            name=data['name'],
+            media_id=data.get('id', None),
+            glance=data.get('glance', ''),
+            has_timeline=('timeline' in data),
+            timeline_tiny=data.get('timeline', {}).get('tiny', ''),
+            timeline_small=data.get('timeline', {}).get('small', ''),
+            timeline_large=data.get('timeline', {}).get('large', '')
+        )
+
 
     def to_dict(self):
         obj = {

ide/static/ide/js/dependencies.js

@@ -384,6 +384,7 @@ CloudPebble.Dependencies = (function() {
             return CloudPebble.YCM.updateDependencies(result.dependencies);
         }).then(function(result) {
             if (result) {
+                CloudPebble.PublishedMedia.SetDependencyResources(result.data.resources);
                 update_header_list(result.data.libraries)
             }
         });

ide/static/ide/js/published_media.js

@@ -2,6 +2,8 @@ CloudPebble.PublishedMedia = (function() {
     var media_template = null;
     var item_template = null;
     var live_form = null;
+    var dependency_resources = [];
+    var media_pane_setup = false;
 
     function get_media_items() {
         return media_template.find('.media-item').map(function() {
@@ -31,10 +33,26 @@ CloudPebble.PublishedMedia = (function() {
         }
     });
 
+    /** Check whether a resource kind is allowed to be referenced in publishedMedia */
+    function is_permited_resource_kind(kind) {
+        return /^(png|pbi|bitmap|raw)/.test(kind);
+    }
+
+    /** Get a list of all Resource IDs which can be referenced by publishedMedia */
     function get_eligible_identifiers() {
-        return _.chain(CloudPebble.Resources.GetResources()).filter(function(item) {
-            return /^(png|pbi|bitmap|raw)/.test(item.kind);
-        }).pluck('identifiers').flatten().uniq().value();
+        // Grab local resources from CloudPebble.Resources
+        var local_identifiers = _.chain(CloudPebble.Resources.GetResources()).filter(function(item) {
+            return is_permited_resource_kind(item.kind);
+        }).pluck('identifiers').flatten().value();
+
+        // We already have a list of dependency's resources from YCM.
+        var dependency_identifiers = _.chain(dependency_resources).filter(function(tuple) {
+            // YCM gives a list of resources as a [kind, ID] tuple.
+            return is_permited_resource_kind(tuple[0]);
+        }).pluck(1).value();
+
+        var final_identifiers = _.uniq(local_identifiers.concat(dependency_identifiers));
+        return final_identifiers;
     }
 
     /** This class sets up and manages a single Published Media item panel. */
@@ -52,13 +70,12 @@ CloudPebble.PublishedMedia = (function() {
         var timeline_large_input = item.find('.edit-media-timeline-large');
         var delete_btn = item.find('.btn-danger');
 
+        /** Render an invalid option */
         function make_invalid_option(value) {
             return $('<option>').val(value).addClass('media-item-invalid').text(interpolate('%s (INVALID)', [value])).prop('selected', true).prop('disabled', true);
         }
 
-        /** Set the value of a select element. If for some reason the desired option doesn't actually
-         * exist, create it but add the text "(INVALID)"
-         */
+        /** Set the value of a select element. If for some reason the desired option doesn't actually exist, create it but add the text "(INVALID)" */
         this.setSelectValue = function(element, value) {
             var select_options = _.map($(element)[0].options, function(opt) {return opt.value});
             if (value) {
@@ -90,6 +107,7 @@ CloudPebble.PublishedMedia = (function() {
             }
         };
 
+        /** Check that all of this item's resource IDs are in the set of existing resource IDs */
         this.is_valid = function(identifiers) {
             var data = this.getData();
             if (identifiers === undefined) {
@@ -194,12 +212,14 @@ CloudPebble.PublishedMedia = (function() {
         if (live_form) live_form.addElement(item, true);
     }
 
+    /** Send the current publishedMedia to YCM so that they can be autocompleted. */
     function sync_with_ycm() {
         if(CloudPebble.Ready) {
             CloudPebble.YCM.updatePublishedMedia(CloudPebble.ProjectInfo.published_media);
         }
     }
 
+    /** Save an array of published media objects. This does not check that Resource ID references are valid. */
     function save_pubished_media(data) {
         var names = _.pluck(data, 'name');
         // Check that all items have names
@@ -226,6 +246,7 @@ CloudPebble.PublishedMedia = (function() {
         });
     }
 
+    /** Save the whole form. If any names are incomplete or resources are invalid, it simply refuses to save without error. */
     function save_forms() {
         var items = get_media_items();
         var data = get_form_data();
@@ -239,14 +260,20 @@ CloudPebble.PublishedMedia = (function() {
         if (!_.every(validity)) {
             toggle_sidebar_error(true);
             return {incomplete: true};
-            // throw new Error(gettext('Please select valid resource IDs for all fields.'));
         }
+
+        // If we successfully saved, it implies that there were no invalid references
+        // so we can get rid of the sidebar error notification.
         return save_pubished_media(data).then(function() {
             toggle_sidebar_error(false);
         });
     }
 
+    /** Create initial media item forms, and set up interface elements and the live-form mechanism. */
     function setup_media_pane() {
+        if (media_pane_setup) return false;
+        media_pane_setup = true;
+
         var initial_data = CloudPebble.ProjectInfo.published_media;
         _.each(initial_data, function(data) {
             var item = new MediaItem();
@@ -265,7 +292,10 @@ CloudPebble.PublishedMedia = (function() {
             on_progress_complete: alerts.hide_progress,
             form: media_template.find('form')
         });
+        media_template.find('.media-tool-buttons').removeClass('hide');
+        media_template.find('.media-pane-loading').remove();
         live_form.init();
+        return true;
     }
 
     function show_media_pane() {
@@ -276,15 +306,7 @@ CloudPebble.PublishedMedia = (function() {
         ga('send', 'event', 'project', 'load published-media');
 
         CloudPebble.Sidebar.SetActivePane(media_template, {
-            id: 'published-media',
-            // onRestore: function() {
-            //     // TODO: We could try to only do this if the list of identifiers has changed.
-            //     toggle_sidebar_error(false);
-            //     _.each(get_media_items(), function(item) {
-            //         item.setupOptions();
-            //         item.checkValidity();
-            //     });
-            // }
+            id: 'published-media'
         });
     }
 
@@ -308,7 +330,6 @@ CloudPebble.PublishedMedia = (function() {
             // Group by the identifier being renamed
             var items = get_media_items();
             var identifiers = get_eligible_identifiers();
-            var all_valid = true;
             var grouped = _.chain(list_of_renames).groupBy('from').mapObject(function(renames) {
                 return _.uniq(_.pluck(renames, 'to'));
             }).value();
@@ -345,15 +366,27 @@ CloudPebble.PublishedMedia = (function() {
         ValidateIdentifiers: function() {
             CloudPebble.PublishedMedia.RenameIdentifiers([]);
         },
+        SetDependencyResources: function(resources) {
+            dependency_resources = resources;
+            CloudPebble.PublishedMedia.ValidateIdentifiers();
+        },
         Init: function() {
             var commands = {};
             commands[gettext("Published Media")] = CloudPebble.PublishedMedia.Show;
             CloudPebble.FuzzyPrompt.AddCommands(commands);
             media_template = $('#media-pane-template').remove().removeClass('hide');
             item_template = $('#media-item-template').removeAttr('id').removeClass('hide').remove();
             alerts.init(media_template);
-            sync_with_ycm();
-            setup_media_pane();
+            // sync_with_ycm();
+            CloudPebble.YCM.initialise().then(function(data) {
+                if (data.resources) {
+                    dependency_resources = data.resources;
+                }
+            }).finally(function() {
+                if (!setup_media_pane()) {
+                    CloudPebble.PublishedMedia.ValidateIdentifiers();
+                }
+            });
         }
     };
 })();

ide/templates/ide/project.html

@@ -65,7 +65,7 @@ <h1 class="cloudpebble-logo" style="padding-left: 40px;">
                     <li class="nav-header" id="sidebar-pane-settings"><a href="#">{% trans 'Settings' %}</a></li>
                     <li class="nav-header sdk3-only" id="sidebar-pane-timeline"><a href="#">Timeline (Preview)</a></li>
                     <li class="nav-header" id="sidebar-pane-compile"><a href="#">{% trans 'Compilation' %}</a></li>
-                    <li class="nav-header" id="sidebar-pane-media"><a href="#">{% trans 'Published Media' %}</a>
+                    <li class="nav-header sdk3-only native-only" id="sidebar-pane-media"><a href="#">{% trans 'Published Media' %}</a>
                         <span class="sidebar-error hide"></span>
                     </li>
                     {% if project.project_type == 'package' or project.project_type == 'native' %}

ide/templates/ide/project/published_media.html

@@ -5,7 +5,11 @@
     <form class="form-horizontal">
     </form>
 
-    <div class="well media-tool-buttons">
+    <div class="well media-pane-loading">
+        <h2>{% trans 'Loading...' %}</h2>
+    </div>
+
+    <div class="well hide media-tool-buttons">
         <button type="button" class="btn" id="add-published-media">
             {% trans 'Add New Published Media' %}
         </button>