[gnome-maps/wip/mlundblad/place-thumbnails: 5/5] placeBubble: Fetch Wikipedia thumbnails for place

[Marcus Lundblad <mlundblad src gnome org>]

commit 525355535afeca3ebd0f9fe12700f6ccc1b0a17c
Author: Marcus Lundblad <ml update uu se>
Date:   Mon Feb 27 23:22:57 2017 +0100

    placeBubble: Fetch Wikipedia thumbnails for place
    
    Also use the new utility functions for getting language
    and article parts when formatting Wikipedia links.
    
    https://bugzilla.gnome.org/show_bug.cgi?id=779211

 data/ui/map-bubble.ui   |   50 ++++++++++++++++++++++++++++++++++------------
 data/ui/place-bubble.ui |    2 +-
 src/mapBubble.js        |   12 +++++++++++
 src/placeBubble.js      |   46 ++++++++++++++++++++++++++++++++++++++++--
 4 files changed, 93 insertions(+), 17 deletions(-)
---
diff --git a/data/ui/map-bubble.ui b/data/ui/map-bubble.ui
index a6bb785..d7109be 100644
--- a/data/ui/map-bubble.ui
+++ b/data/ui/map-bubble.ui
@@ -5,25 +5,13 @@
   <object class="GtkGrid" id="bubble-main-grid">
     <property name="visible">True</property>
     <property name="can_focus">False</property>
+    <property name="column_spacing">8</property>
     <property name="margin_start">10</property>
     <property name="margin_end">10</property>
     <property name="margin_top">10</property>
     <property name="margin_bottom">10</property>
     <property name="orientation">vertical</property>
     <child>
-      <object class="GtkImage" id="bubble-image">
-        <property name="visible">True</property>
-        <property name="can_focus">False</property>
-        <property name="valign">start</property>
-        <property name="pixel_size">0</property>
-        <property name="icon_size">16</property>
-      </object>
-      <packing>
-        <property name="left_attach">0</property>
-        <property name="top_attach">0</property>
-      </packing>
-    </child>
-    <child>
       <object class="GtkGrid" id="bubble-content-area">
         <property name="visible">True</property>
         <property name="can_focus">False</property>
@@ -32,6 +20,7 @@
       <packing>
         <property name="left_attach">1</property>
         <property name="top_attach">0</property>
+        <property name="width">2</property>
       </packing>
     </child>
     <child>
@@ -40,6 +29,7 @@
         <property name="can_focus">False</property>
         <property name="margin-top">10</property>
         <property name="margin-start">15</property>
+        <property name="valign">GTK_ALIGN_END</property>
         <child>
           <object class="GtkBox" id="bubble-standard-button-area">
             <property name="visible">True</property>
@@ -120,5 +110,39 @@
         <property name="top_attach">1</property>
       </packing>
     </child>
+    <child>
+      <object class="GtkStack" id="bubble-icon-stack">
+        <property name="visible">True</property>
+        <property name="transition-type">GTK_STACK_TRANSITION_TYPE_CROSSFADE</property>
+        <child>
+          <object class="GtkImage" id="bubble-image">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">start</property>
+            <property name="pixel_size">0</property>
+            <property name="icon_size">16</property>
+          </object>
+          <packing>
+            <property name="name">icon</property>
+          </packing>
+        </child>
+        <child>
+          <object class="GtkImage" id="bubble-thumbnail">
+            <property name="visible">True</property>
+            <property name="can_focus">False</property>
+            <property name="valign">start</property>
+            <property name="pixel_size">0</property>
+            <property name="icon_size">16</property>
+          </object>
+          <packing>
+            <property name="name">thumbnail</property>
+          </packing>
+        </child>
+      </object>
+      <packing>
+        <property name="left_attach">2</property>
+        <property name="top_attach">1</property>
+      </packing>
+    </child>
   </object>
 </interface>
diff --git a/data/ui/place-bubble.ui b/data/ui/place-bubble.ui
index afa06c0..5689792 100644
--- a/data/ui/place-bubble.ui
+++ b/data/ui/place-bubble.ui
@@ -29,7 +29,7 @@
                     <property name="visible">True</property>
                     <property name="can_focus">False</property>
                     <property name="halign">start</property>
-                    <property name="vexpand">True</property>
+                    <property name="expand">True</property>
                     <property name="use_markup">True</property>
                     <style>
                       <class name="bubble-title"/>
diff --git a/src/mapBubble.js b/src/mapBubble.js
index d9434bc..238920e 100644
--- a/src/mapBubble.js
+++ b/src/mapBubble.js
@@ -70,6 +70,8 @@ var MapBubble = new Lang.Class({
         this.parent(params);
         let ui = Utils.getUIObject('map-bubble', [ 'bubble-main-grid',
                                                    'bubble-image',
+                                                   'bubble-thumbnail',
+                                                   'bubble-icon-stack',
                                                    'bubble-content-area',
                                                    'bubble-button-area',
                                                    'bubble-route-button',
@@ -78,6 +80,8 @@ var MapBubble = new Lang.Class({
                                                    'bubble-check-in-button',
                                                    'bubble-favorite-button-image']);
         this._image = ui.bubbleImage;
+        this._thumbnail = ui.bubbleThumbnail;
+        this._iconStack = ui.bubbleIconStack;
         this._content = ui.bubbleContentArea;
 
         if (!buttonFlags)
@@ -100,6 +104,14 @@ var MapBubble = new Lang.Class({
         return this._image;
     },
 
+    get thumbnail() {
+        return this._thumbnail;
+    },
+
+    get iconStack() {
+        return this._iconStack;
+    },
+
     get place() {
         return this._place;
     },
diff --git a/src/placeBubble.js b/src/placeBubble.js
index 1d820f5..a402e69 100644
--- a/src/placeBubble.js
+++ b/src/placeBubble.js
@@ -19,6 +19,7 @@
  * Author: Damián Nohales <damiannohales gmail com>
  */
 
+const GdkPixbuf = imports.gi.GdkPixbuf;
 const GLib = imports.gi.GLib;
 const Gtk = imports.gi.Gtk;
 const Format = imports.format;
@@ -35,6 +36,12 @@ const Place = imports.place;
 const PlaceFormatter = imports.placeFormatter;
 const PlaceStore = imports.placeStore;
 const Utils = imports.utils;
+const Wikipedia = imports.wikipedia;
+
+// maximum dimension of thumbnails to fetch from Wikipedia
+const THUMBNAIL_FETCH_SIZE = 128;
+// final scaled size of cropped thumnail
+const THUMBNAIL_FINAL_SIZE = 70;
 
 var PlaceBubble = new Lang.Class({
     Name: 'PlaceBubble',
@@ -104,9 +111,8 @@ var PlaceBubble = new Lang.Class({
     },
 
     _formatWikiLink: function(wiki) {
-        let tokens = wiki.split(':');
-        let lang = tokens[0];
-        let article = GLib.markup_escape_text(tokens.splice(1).join(':'), -1);
+        let lang = Wikipedia.getLanguage(wiki);
+        let article = Wikipedia.getArticle(wiki);
 
         return Format.vprintf('https://%s.wikipedia.org/wiki/%s', [ lang, article ]);
     },
@@ -242,6 +248,40 @@ var PlaceBubble = new Lang.Class({
         }
         this._expandButton.visible = expandedContent.length > 0;
         this._stack.visible_child = this._gridContent;
+
+        if (place.wiki)
+            this._requestWikipediaThumbnail(place.wiki);
+    },
+
+    _requestWikipediaThumbnail: function(wiki) {
+        Wikipedia.fetchArticleThumbnail(wiki, THUMBNAIL_FETCH_SIZE,
+                                        this._onThumbnailComplete.bind(this));
+    },
+
+    _onThumbnailComplete: function(thumbnail) {
+        if (thumbnail) {
+            this.thumbnail.pixbuf = this._cropAndScaleThumbnail(thumbnail);
+            this.iconStack.visible_child_name = 'thumbnail';
+        }
+    },
+
+    // returns a cropped square-shaped thumbnail
+    _cropAndScaleThumbnail: function(thumbnail) {
+        let width = thumbnail.get_width();
+        let height = thumbnail.get_height();
+        let croppedThumbnail;
+
+        if (width > height) {
+            let x = (width - height) / 2;
+            croppedThumbnail = thumbnail.new_subpixbuf(x, 0, height, height);
+        } else {
+            let y = (height - width) / 2;
+            croppedThumbnail = thumbnail.new_subpixbuf(0, y, width, width);
+        }
+
+        return croppedThumbnail.scale_simple(THUMBNAIL_FINAL_SIZE,
+                                             THUMBNAIL_FINAL_SIZE,
+                                             GdkPixbuf.InterpType.BILINEAR);
     },
 
     // clear the view widgets to be able to re-populate an updated place