Video support and pinch to zoom on images

harbour-tooter.pro

@@ -12,6 +12,8 @@
 # The name of your application
 TARGET = harbour-tooter
 
+QT += network dbus sql
+
 CONFIG += sailfishapp
 
 SOURCES += src/harbour-tooter.cpp \

qml/lib/API.js

@@ -124,6 +124,7 @@ var notificationGenerator = function(item){
     default:
         notification = Qt.createQmlObject('import org.nemomobile.notifications 1.0; Notification { category: "x-nemo.example"; urgency: Notification.Low; }', Qt.application, 'InternalQmlObject');
     }
+
     notification.timestamp = item.timestamp
     notification.summary = item.summary
     notification.body = item.body
@@ -176,7 +177,7 @@ var notifier = function(item){
         }
         break;
     default:
-        console.log(JSON.stringify(messageObject.data))
+        //console.log(JSON.stringify(messageObject.data))
         return;
     }
     notificationGenerator(msg)

qml/lib/Worker.js

@@ -207,6 +207,7 @@ function getDate(dateStr){
 function parseToot (data){
     //console.log(JSON.stringify(data))
     var item = {};
+
     item['type'] = "toot"
     item['highlight'] = false
     item['status_id'] = data["id"]

qml/pages/Conversation.qml

@@ -147,6 +147,7 @@ Page {
                 RemorseItem { id: remorse }
                 Image {
                     anchors.fill: parent
+                    fillMode: Image.PreserveAspectCrop
                     source: model.preview_url
                 }
 

qml/pages/components/ImageFullScreen.qml

@@ -3,117 +3,205 @@ import Sailfish.Silica 1.0
 import QtMultimedia 5.0
 
 Page {
-    id: page
+    id: imagePage
     property string type: ""
     property string previewURL: ""
     property string mediaURL: ""
     allowedOrientations: Orientation.All
-    Component.onCompleted: {
+    Component.onCompleted: function(){
         console.log(type)
         console.log(previewURL)
         console.log(mediaURL)
-    }
-    onStateChanged: {
-        if (status === PageStatus.Deactivating){
-            video.stop()
-        }
-        if (status === PageStatus.Activating){
-            if (type !== "image" )
+        if (type != 'gifv' && type != 'video') {
+            imagePreview.source = mediaURL
+            imageFlickable.visible = true;
+        } else {
+            video.source = mediaURL
+            video.fillMode = VideoOutput.PreserveAspectFit
             video.play()
+            videoFlickable.visible = true;
         }
     }
-    BusyIndicator {
-        running: image.status !== Image.Ready
-        size: BusyIndicatorSize.Large
-        anchors.verticalCenter: parent.verticalCenter
-        anchors.horizontalCenter: parent.horizontalCenter
-    }
-    Item {
+    Flickable {
+        id: videoFlickable
+        visible: false
         anchors.fill: parent
+        contentWidth: imageContainer.width; contentHeight: imageContainer.height
         clip: true
         Image {
-            id: image
-            anchors.centerIn: parent
-            fillMode: Image.PreserveAspectCrop
-            asynchronous: true
-            opacity: status === Image.Ready ? 1.0 : 0.0
-            Behavior on opacity { FadeAnimator {} }
-            source: type === "image" ? mediaURL : previewURL
-            onStatusChanged: {
-                if (status === Image.Ready) {
-                    console.log('Loaded')
-                    width = sourceSize.width
-                    height = sourceSize.height
-                    if (width > height)
-                        pinch.scale = page.width / width
-                    else
-                        pinch.scale = page.height / height
-                }
+            id: videoPreview
+            fillMode: Image.PreserveAspectFit
+            anchors.fill: parent
+            source: previewURL
         }
         Video {
             id: video
             anchors.fill: parent
-                autoLoad: true
-                onStateChanged: {
-                    switch(status){
-                    case MediaPlayer.Loaded:
-                        play();
-                        break;
-                    case MediaPlayer.Loading:
-                        loader.running = true;
-                        break;
-                    case MediaPlayer.EndOfMedia:
-                        if(seekable)
-                            seek(0)
-                        break;
-                    default:
-                        loader.running = false;
+            onPositionChanged: function(){
+                console.log(duration)
+                console.log(bufferProgress)
+                console.log(position)
+                progressRec.width = parent.width * position/duration
+            }
+            onStopped: function(){
+                play()
+            }
+        }
+        Rectangle {
+            id: progressRec
+            anchors.bottom: parent.bottom
+            width: 0
+            height: Theme.paddingSmall
+            color: Theme.highlightBackgroundColor
         }
     }
 
-                source: type !== "image" ? mediaURL : ""
-                onErrorStringChanged: {
-                    console.log(errorString)
-                }
-                BusyIndicator {
-                    id: loader
-                    size: BusyIndicatorSize.Small
-                    anchors.verticalCenter: parent.verticalCenter
-                    anchors.horizontalCenter: parent.horizontalCenter
-                }
-
-                MouseArea {
+    Flickable {
+        id: imageFlickable
+        visible: false
         anchors.fill: parent
-                    onClicked: {
-                        video.playbackState == MediaPlayer.PlayingState ? video.pause() : video.play()
+        contentWidth: imageContainer.width; contentHeight: imageContainer.height
+        clip: true
+        onHeightChanged: if (imagePreview.status === Image.Ready) imagePreview.fitToScreen();
+
+        Item {
+            id: imageContainer
+            width: Math.max(imagePreview.width * imagePreview.scale, imageFlickable.width)
+            height: Math.max(imagePreview.height * imagePreview.scale, imageFlickable.height)
+
+            Image {
+                id: imagePreview
+
+                property real prevScale
+
+                function fitToScreen() {
+                    scale = Math.min(imageFlickable.width / width, imageFlickable.height / height, 1)
+                    pinchArea.minScale = scale
+                    prevScale = scale
+                }
+
+                anchors.centerIn: parent
+                fillMode: Image.PreserveAspectFit
+                cache: true
+                asynchronous: true
+                sourceSize.height: 1000;
+                smooth: false
+
+                onStatusChanged: {
+                    if (status == Image.Ready) {
+                        fitToScreen()
+                        loadedAnimation.start()
                     }
                 }
 
-                focus: true
+                NumberAnimation {
+                    id: loadedAnimation
+                    target: imagePreview
+                    property: "opacity"
+                    duration: 250
+                    from: 0; to: 1
+                    easing.type: Easing.InOutQuad
                 }
 
+                onScaleChanged: {
+                    if ((width * scale) > imageFlickable.width) {
+                        var xoff = (imageFlickable.width / 2 + imageFlickable.contentX) * scale / prevScale;
+                        imageFlickable.contentX = xoff - imageFlickable.width / 2
+                    }
+                    if ((height * scale) > imageFlickable.height) {
+                        var yoff = (imageFlickable.height / 2 + imageFlickable.contentY) * scale / prevScale;
+                        imageFlickable.contentY = yoff - imageFlickable.height / 2
+                    }
+                    prevScale = scale
+                }
+            }
         }
-
-
 
         PinchArea {
-            id: pinch
-            visible: type === "image"
+            id: pinchArea
+            opacity: 0.3
+            property real minScale: 1.0
+            property real maxScale: 3.0
+
             anchors.fill: parent
-            pinch.target: image
-            pinch.minimumScale: 0.1
-            pinch.maximumScale: 10
-            pinch.dragAxis: Pinch.XAndYAxis
+            enabled: imagePreview.status === Image.Ready
+            pinch.target: imagePreview
+            pinch.minimumScale: minScale * 0.5 // This is to create "bounce back effect"
+            pinch.maximumScale: maxScale * 1.5 // when over zoomed
+
+            onPinchFinished: {
+                imageFlickable.returnToBounds()
+                if (imagePreview.scale < pinchArea.minScale) {
+                    bounceBackAnimation.to = pinchArea.minScale
+                    bounceBackAnimation.start()
+                }
+                else if (imagePreview.scale > pinchArea.maxScale) {
+                    bounceBackAnimation.to = pinchArea.maxScale
+                    bounceBackAnimation.start()
+                }
+            }
+            NumberAnimation {
+                id: bounceBackAnimation
+                target: imagePreview
+                duration: 250
+                property: "scale"
+                from: imagePreview.scale
             }
-        Label {
-            visible: type !== "image"
-            anchors {
-                bottom: parent.bottom
-                left: parent.left
-                right: parent.right
         }
-            text: "Video playing is faulty... may break app... Just to know :)"
     }
 
+    Loader {
+        anchors.centerIn: parent
+        sourceComponent: {
+            switch (imagePreview.status) {
+            case Image.Loading:
+                return loadingIndicator
+            case Image.Error:
+                return failedLoading
+            default:
+                return undefined
+            }
+        }
+
+        Component {
+            id: loadingIndicator
+
+            Item {
+                height: childrenRect.height
+                width: imagePage.width
+
+                ProgressCircle {
+                    id: imageLoadingIndicator
+                    anchors.horizontalCenter: parent.horizontalCenter
+                    progressValue: imagePreview.progress
+                }
+            }
+        }
+
+        Component {
+            id: failedLoading
+            Text {
+                font.pixelSize: Theme.fontSizeSmall;
+                text: qsTr("Error loading image")
+                color: Theme.highlightColor
+            }
+        }
+    }
+
+    VerticalScrollDecorator { flickable: imageFlickable }
+    IconButton {
+        visible: false
+        anchors{
+            right: imagePage.right;
+            rightMargin: Theme.paddingLarge;
+            bottom: imagePage.bottom;
+            bottomMargin: Theme.paddingLarge;
+        }
+        width: Theme.iconSizeMedium+Theme.paddingMedium*2
+
+        icon.source: "image://theme/icon-m-cloud-download"
+        onClicked: {
+            //py.saveImg(MD5.hex_md5(strThumbnailUrl),strHpTitle+"."+Script.parseDate(currentDay));
+        }
     }
 }

qml/pages/components/MyImage.qml

@@ -10,7 +10,6 @@ Item {
         opacity: 0.2
         anchors.fill: parent
         color: Theme.highlightDimmerColor
-
     }
     Image {
         anchors.centerIn: parent

qml/pages/components/MyList.qml

@@ -57,6 +57,19 @@ SilicaListView {
     }
 
     PullDownMenu {
+        MenuItem {
+            text: "NOTIFIKACIJA"
+            onClicked: {
+                Logic.notifier({
+                                   type: "favourite",
+                                   urgency: "critical",
+                                   created_at: new Date(),
+                                   reblog_account_display_name: "@akakakak",
+                                   content: "blaaaaaa blaaaaaablaaaaaablaaaaaa"
+
+                               })
+            }
+        }
         MenuItem {
             text: qsTr("Settings")
             onClicked: {

qml/pages/components/Toot.qml

@@ -186,4 +186,5 @@ BackgroundItem {
                            type: "reply"
                        })
     }
+
 }

qml/pages/components/VisualContainer.qml

@@ -9,6 +9,16 @@ BackgroundItem {
     signal navigateTo(string link)
     width: parent.width
     height: mnu.height +  miniHeader.height + (typeof attachments !== "undefined" && attachments.count ? media.height + Theme.paddingLarge + Theme.paddingMedium: Theme.paddingLarge) + lblContent.height + Theme.paddingLarge + (ministatus.visible ? ministatus.height : 0)
+    Rectangle {
+        x: 0;
+        y: 0;
+        visible: status_visibility == 'direct'
+        width: parent.width
+        height: parent.height
+        opacity: 0.3
+        color: Theme.highlightBackgroundColor;
+    }
+
     MiniStatus {
         id: ministatus
         anchors {
@@ -284,4 +294,5 @@ BackgroundItem {
     onDoubleClicked: {
         console.log("double click")
     }
+
 }

translations/harbour-tooter-de.ts

@@ -78,6 +78,13 @@
         <translation type="unfinished"></translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter-el.ts

@@ -78,6 +78,13 @@
         <translation>Κτυπήστε για εισαγωγή</translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter-en.ts

@@ -78,6 +78,13 @@
         <translation>Tap to insert</translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter-es.ts

@@ -78,6 +78,13 @@
         <translation>Toca para insertar</translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter-fr.ts

@@ -78,6 +78,13 @@
         <translation>Appuyez pour insérer</translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter-nl.ts

@@ -78,6 +78,13 @@
         <translation type="unfinished"></translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter-oc.ts

@@ -78,6 +78,13 @@
         <translation>Tustejar per inserir</translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter-sr.ts

@@ -78,6 +78,13 @@
         <translation>Тапни за убацивање</translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>

translations/harbour-tooter.ts

@@ -78,6 +78,13 @@
         <translation>Tap to insert</translation>
     </message>
 </context>
+<context>
+    <name>ImageFullScreen</name>
+    <message>
+        <source>Error loading image</source>
+        <translation type="unfinished"></translation>
+    </message>
+</context>
 <context>
     <name>ImageUploader</name>
     <message>