[sociald] Check online status before loading images. Contributes to J…

…B#12351

This commit ensures that Image source urls are set to a placeholder
image url if network connectivity is not available, to avoid popping
up connection dialogs while scrolling through the feeds view.

Contributes to JB#12351

rpm/sociald.spec

@@ -30,6 +30,7 @@ Requires: sailfish-components-accounts-qt5 >= 0.0.43
 Requires: sailfish-components-textlinking
 Requires: nemo-qml-plugin-notifications-qt5
 Requires: nemo-qml-plugin-social-qt5 >= 0.0.12
+Requires: nemo-qml-plugin-connectivity
 Requires: buteo-syncfw-qt5-msyncd
 Requires: mkcal-qt5
 Obsoletes: buteo-sync-plugins-google-simple <= 0.0.2

src/eventfeed/SocialAvatar.qml

@@ -1,11 +1,10 @@
 import QtQuick 2.0
 import Sailfish.Silica 1.0
 
-Image {
+SocialImage {
     id: image
     width: Theme.itemSizeExtraLarge
     height: Theme.itemSizeExtraLarge
-    asynchronous: true
     fillMode: Image.PreserveAspectCrop
     sourceSize {
         width: image.width

src/eventfeed/SocialButton.qml

@@ -6,16 +6,18 @@ MouseArea {
     property alias icon: icon.source
     property alias text: label.text
     property bool down: pressed && containsMouse
+    property bool connectedToNetwork
 
     height: label.height + 2 * Theme.paddingLarge
     width: icon.width + Theme.paddingSmall + label.width
 
-    Image {
+    SocialImage {
         id: icon
         anchors.verticalCenter: parent.verticalCenter
         height: 32
         width: 32
         opacity: container.enabled ? 1 : 0.5
+        connectedToNetwork: container.connectedToNetwork
     }
 
     Label {

src/eventfeed/SocialComment.qml

@@ -8,6 +8,7 @@ Item {
     property alias footer: footer.text
     property alias extra: extra.text
     property alias extraVisible: extra.visible
+    property bool connectedToNetwork
 
     height: Math.max(message.height + footer.height + extra.height,
                      avatarPlaceholder.height)
@@ -24,12 +25,13 @@ Item {
         opacity: 0.1
     }
 
-    Image {
+    SocialImage {
         id: avatar
         clip: true
         anchors.fill: avatarPlaceholder
         fillMode: Image.PreserveAspectCrop
         smooth: true
+        connectedToNetwork: container.connectedToNetwork
     }
 
     Label {

src/eventfeed/SocialContent.qml

@@ -11,6 +11,7 @@ Item {
     property alias body: body.text
     property alias socialButtons: socialButtonsContainer.children
     property alias fullRowSocialButtons: fullRowSocialButtonsContainer.children
+    property bool connectedToNetwork
 
     height: childrenRect.height
     anchors {
@@ -86,6 +87,7 @@ Item {
     SocialAvatar {
         id: socialAvatar
         anchors.top: header.bottom
+        connectedToNetwork: container.connectedToNetwork
     }
 
     SocialBody {

src/eventfeed/SocialImage.qml

@@ -0,0 +1,44 @@
+import QtQuick 2.0
+import Sailfish.Silica 1.0
+
+Item {
+    id: container
+
+    property url source
+    property url placeholderSource
+    property bool connectedToNetwork
+
+    property alias fillMode: image.fillMode
+    property alias sourceSize: image.sourceSize
+
+    // ---------------------
+
+    onConnectedToNetworkChanged: _setImageSource()
+    onSourceChanged: _setImageSource()
+    Component.onCompleted: _setImageSource()
+
+    function _setImageSource() {
+        if (container.connectedToNetwork || container.source.toString().indexOf("http") != 0) {
+            image.source = container.source
+        } else {
+            image.source = container.placeholderSource
+        }
+    }
+
+    Rectangle {
+        id: placeholderRect
+        visible: !image.visible
+        color: Theme.highlightColor
+        opacity: 0.06
+        width: container.width
+        height: container.height
+    }
+
+    Image {
+        id: image
+        visible: container.connectedToNetwork || image.source.toString().length > 0
+        asynchronous: true
+        width: container.width
+        height: container.height
+    }
+}

src/eventfeed/SocialMediaAccountDelegate.qml

@@ -12,6 +12,8 @@ BackgroundItem {
     property alias iconSource: icon.source
     property int unseenPostCount: feedPage ? feedPage.unseenPostCount : 0
 
+    // -------------------------
+
     onClicked: {
         pageStack.push(feedPage)
         feedPage.positionViewAtBeginning()
@@ -28,11 +30,12 @@ BackgroundItem {
         visible: item.unseenPostCount > 0
     }
 
-    Image {
+    SocialImage {
         id: icon
         x: item.height
         width: height
         height: item.height
+        connectedToNetwork: feedPage ? feedPage.connectedToNetwork : false
     }
 
     Label {

src/eventfeed/SocialMediaFeedItem.qml

@@ -2,6 +2,8 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 
 BackgroundItem {
+    id: item
+    property bool connectedToNetwork
     property string timestamp: model.timestamp
     property string formattedTime
     property SocialAvatar avatar: _avatar
@@ -13,9 +15,10 @@ BackgroundItem {
         source: model.icon
         width: Theme.itemSizeMedium
         height: Theme.itemSizeMedium
+        connectedToNetwork: item.connectedToNetwork
     }
 
     function formatTime() {
-        formattedTime = Format.formatDate(timestamp, Formatter.DurationElapsed)
+        formattedTime = Format.formatDate(timestamp, Format.DurationElapsed)
     }
 }

src/eventfeed/SocialMediaFeedPage.qml

@@ -2,6 +2,7 @@ import QtQuick 2.0
 import Sailfish.Silica 1.0
 import org.nemomobile.socialcache 1.0
 import org.nemomobile.configuration 1.0
+import org.nemomobile.connectivity 1.0
 
 Page {
     id: page
@@ -16,9 +17,39 @@ Page {
     property SilicaListView listView: _listView
     property alias updating: syncHelper.loading
     property bool syncNotifications
+    property bool connectedToNetwork // ALL other connectedToNetwork properties in other pages
+                                     // are bound to this property, directly or indirectly.
 
     signal refreshTime
 
+    // -------------------------
+
+    property bool _needToSync
+    onConnectedToNetworkChanged: {
+        if (page.connectedToNetwork && page._needToSync) {
+            page._needToSync = false
+            page.sync()
+        }
+    }
+    ConnectionHelper {
+        id: connectionHelper
+        onNetworkConnectivityEstablished: page.connectedToNetwork = true
+        onNetworkConnectivityUnavailable: page.connectedToNetwork = false
+    }
+
+    Component.onCompleted: {
+        // prefill view with initial content
+        if (page.listModel) {
+            page.listModel.refresh()
+        }
+
+        // set up the connection helper.
+        // if we have an available connection, attempt to connect to it.
+        if (connectionHelper.haveNetworkConnectivity()) {
+            connectionHelper.attemptToConnectNetwork()
+        }
+    }
+
     onVisibleChanged: {
         if (visible && status === PageStatus.Active) {
             page.refreshTime()
@@ -49,8 +80,14 @@ Page {
         id: syncHelper
         dataType: SocialSync.Posts
         onLoadingChanged: {
-            if (!loading && page.listModel) {
-                page.listModel.refresh()
+            if (!loading) {
+                if (page.listModel) {
+                    page.listModel.refresh()
+                }
+
+                if (page.connectedToNetwork) {
+                    connectionHelper.closeNetworkSession()
+                }
             }
         }
     }
@@ -78,9 +115,22 @@ Page {
     }
 
     function sync() {
-        syncHelper.sync()
-        if (syncNotifications) {
-            syncNotificationsHelper.sync()
+        if (page.connectedToNetwork) {
+            syncHelper.sync()
+            if (syncNotifications) {
+                syncNotificationsHelper.sync()
+            }
+        } else {
+            if (page.listModel) {
+                // we may have old data in the database anyway.
+                // attempt to refresh the list model with that data.
+                page.listModel.refresh()
+            }
+
+            // also attempt to connect to the network,
+            // and queue a sync for when (if) it succeeds.
+            page._needToSync = true
+            connectionHelper.attemptToConnectNetwork()
         }
     }
 
@@ -112,6 +162,4 @@ Page {
             _lastSeenTime.value = date.getTime()
         }
     }
-
-    Component.onCompleted: sync()
 }

src/eventfeed/SocialMediaPreviewRow.qml

@@ -11,6 +11,7 @@ Item {
     property string mediaDescription
     property real imageSize: width / 3
     property int imageCount: imageList ? imageList.length : 0
+    property bool connectedToNetwork
 
     width: parent.width
     height: childrenRect.height
@@ -25,17 +26,17 @@ Item {
         Repeater {
             id: repeater
             model: container.imageList
-            delegate: Image {
+            delegate: SocialImage {
                 width: container.imageSize
                 height: container.imageSize
                 sourceSize {
                     width: container.imageSize
                     height: container.imageSize
                 }
-                asynchronous: true
                 fillMode: Image.PreserveAspectCrop
                 visible: index < container.imageCount
                 source: visible ? modelData.url : ""
+                connectedToNetwork: container.connectedToNetwork
             }
         }
     }

src/eventfeed/SocialMediaRow.qml

@@ -9,6 +9,7 @@ Item {
     property string mediaCaption
     property string mediaDescription
     property string mediaUrl
+    property bool connectedToNetwork
 
     anchors {
         left: parent.left
@@ -38,16 +39,16 @@ Item {
                                                                      : container.width / 4
             model: container.imageList
 
-            delegate: Image {
+            delegate: SocialImage {
                 width: repeater.imageSize
                 height: repeater.imageSize
                 sourceSize {
                     width: repeater.imageSize
                     height: repeater.imageSize
                 }
-                asynchronous: true
                 fillMode: Image.PreserveAspectCrop
                 source: model.modelData.url
+                connectedToNetwork: container.connectedToNetwork
 
                 MouseArea {
                     id: imageMouseArea

src/eventfeed/SocialReplyField.qml

@@ -3,6 +3,7 @@ import Sailfish.Silica 1.0
 
 Item {
     id: container
+    property bool connectedToNetwork
     property bool displayMargins
     property alias avatar: avatar.source
     property alias placeholderText: textField.placeholderText
@@ -40,7 +41,7 @@ Item {
         opacity: 0.1
     }
 
-    Image {
+    SocialImage {
         id: avatar
         anchors {
             left: parent.left
@@ -49,6 +50,7 @@ Item {
         }
         width: Theme.iconSizeMedium
         height: Theme.iconSizeMedium
+        connectedToNetwork: container.connectedToNetwork
     }
 
     TextField {

src/facebook/eventfeed/FacebookFeedItem.qml

@@ -27,6 +27,7 @@ SocialMediaFeedItem {
             mediaName: model.attachmentName
             mediaCaption: model.attachmentCaption
             mediaDescription: model.attachmentDescription
+            connectedToNetwork: item.connectedToNetwork
         }
 
         LinkedText {