From 66d8a38c80f39ddaf2954d3400a731ec5c7e4c0b Mon Sep 17 00:00:00 2001 From: Loren Burkholder Date: Mon, 13 Feb 2023 20:44:42 -0500 Subject: Blurhash images when the privacy screen is active --- resources/qml/ChatPage.qml | 3 +++ resources/qml/PrivacyScreen.qml | 3 +-- resources/qml/RoomList.qml | 8 ++++++-- resources/qml/TimelineView.qml | 1 + resources/qml/delegates/ImageMessage.qml | 26 +++++++++++++------------- 5 files changed, 24 insertions(+), 17 deletions(-) (limited to 'resources') diff --git a/resources/qml/ChatPage.qml b/resources/qml/ChatPage.qml index 3d76616a..2c0f988f 100644 --- a/resources/qml/ChatPage.qml +++ b/resources/qml/ChatPage.qml @@ -128,6 +128,7 @@ Rectangle { TimelineView { id: timeline + privacyScreen: privacyScreen showBackButton: adaptiveView.singlePageMode room: Rooms.currentRoom roomPreview: Rooms.currentRoomPreview.roomid ? Rooms.currentRoomPreview : null @@ -140,6 +141,8 @@ Rectangle { } PrivacyScreen { + id: privacyScreen + anchors.fill: parent visible: Settings.privacyScreen screenTimeout: Settings.privacyScreenTimeout diff --git a/resources/qml/PrivacyScreen.qml b/resources/qml/PrivacyScreen.qml index bc128302..11ab27bd 100644 --- a/resources/qml/PrivacyScreen.qml +++ b/resources/qml/PrivacyScreen.qml @@ -12,6 +12,7 @@ import im.nheko 1.0 Item { id: privacyScreen + readonly property bool active: screenSaver.state === "Visible" property var timelineRoot property int screenTimeout @@ -61,7 +62,6 @@ Item { target: screenSaver opacity: 1 } - }, State { name: "Invisible" @@ -75,7 +75,6 @@ Item { target: screenSaver visible: false } - } ] transitions: [ diff --git a/resources/qml/RoomList.qml b/resources/qml/RoomList.qml index f06fb15e..7dc89cc9 100644 --- a/resources/qml/RoomList.qml +++ b/resources/qml/RoomList.qml @@ -110,17 +110,21 @@ Page { } TimelineView { - id: timelineView + id: timeline + + privacyScreen: privacyScreen anchors.fill: parent room: roomWindowW.room roomPreview: roomWindowW.roomPreview.roomid ? roomWindowW.roomPreview : null } PrivacyScreen { + id: privacyScreen + anchors.fill: parent visible: Settings.privacyScreen screenTimeout: Settings.privacyScreenTimeout - timelineRoot: timelineView + timelineRoot: timeline windowTarget: roomWindowW } diff --git a/resources/qml/TimelineView.qml b/resources/qml/TimelineView.qml index 0d47746c..9124c158 100644 --- a/resources/qml/TimelineView.qml +++ b/resources/qml/TimelineView.qml @@ -26,6 +26,7 @@ Item { property var roomPreview: null property bool showBackButton: false property bool shouldEffectsRun: false + required property PrivacyScreen privacyScreen clip: true onRoomChanged: if (room != null) room.triggerSpecialEffects() diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index af69b983..bb22d0ee 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -31,18 +31,6 @@ AbstractButton { property int metadataWidth property bool fitsMetadata: (parent.width - width) > metadataWidth+4 - Image { - id: blurhash_ - - anchors.fill: parent - visible: img.status != Image.Ready - source: blurhash ? ("image://blurhash/" + blurhash) : ("image://colorimage/:/icons/icons/ui/image-failed.svg?" + Nheko.colors.buttonText) - asynchronous: true - fillMode: Image.PreserveAspectFit - sourceSize.width: parent.width * Screen.devicePixelRatio - sourceSize.height: parent.height * Screen.devicePixelRatio - } - Image { id: img @@ -68,7 +56,19 @@ AbstractButton { eventId: parent.eventId } - onClicked :Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId, originalWidth, proportionalHeight); + Image { + id: blurhash_ + + anchors.fill: parent + visible: img.status != Image.Ready || timeline.privacyScreen.active + source: blurhash ? ("image://blurhash/" + blurhash) : ("image://colorimage/:/icons/icons/ui/image-failed.svg?" + Nheko.colors.buttonText) + asynchronous: true + fillMode: Image.PreserveAspectFit + sourceSize.width: parent.width * Screen.devicePixelRatio + sourceSize.height: parent.height * Screen.devicePixelRatio + } + + onClicked: Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId, originalWidth, proportionalHeight); Item { id: overlay -- cgit 1.4.1 From c9e3ad185021b4ac1849e4fd2c2908808260cae7 Mon Sep 17 00:00:00 2001 From: Loren Burkholder Date: Thu, 16 Feb 2023 23:18:12 -0500 Subject: Animate transition to blurhash --- resources/qml/delegates/ImageMessage.qml | 44 ++++++++++++++++++++++++++++++++ 1 file changed, 44 insertions(+) (limited to 'resources') diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index bb22d0ee..1e2674ae 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -66,6 +66,50 @@ AbstractButton { fillMode: Image.PreserveAspectFit sourceSize.width: parent.width * Screen.devicePixelRatio sourceSize.height: parent.height * Screen.devicePixelRatio + state: img.status != Image.Ready ? "Visible" : (timeline.privacyScreen.active ? "Visible" : "Invisible") + + states: [ + State { + name: "Visible" + + PropertyChanges { + target: blurhash_ + opacity: 1 + } + }, + State { + name: "Invisible" + + PropertyChanges { + target: blurhash_ + opacity: 0 + } + } + ] + transitions: [ + Transition { + from: "Visible" + to: "Invisible" + + NumberAnimation { + target: blurhash_ + property: "opacity" + duration: 250 + easing.type: Easing.InQuad + } + }, + Transition { + from: "Invisible" + to: "Visible" + + NumberAnimation { + target: blurhash_ + property: "opacity" + duration: 500 + easing.type: Easing.InQuad + } + } + ] } onClicked: Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId, originalWidth, proportionalHeight); -- cgit 1.4.1 From 179c16fd08d7e22ce32593cb35ba77ec6084e4f0 Mon Sep 17 00:00:00 2001 From: Loren Burkholder Date: Mon, 20 Feb 2023 19:18:05 -0500 Subject: Use a single, reversible privacy screen transition --- resources/qml/PrivacyScreen.qml | 24 ++---------------------- resources/qml/delegates/ImageMessage.qml | 14 ++------------ 2 files changed, 4 insertions(+), 34 deletions(-) (limited to 'resources') diff --git a/resources/qml/PrivacyScreen.qml b/resources/qml/PrivacyScreen.qml index 11ab27bd..204eb1bd 100644 --- a/resources/qml/PrivacyScreen.qml +++ b/resources/qml/PrivacyScreen.qml @@ -78,30 +78,10 @@ Item { } ] transitions: [ - Transition { - from: "Visible" - to: "Invisible" - - SequentialAnimation { - NumberAnimation { - target: screenSaver - property: "opacity" - duration: 250 - easing.type: Easing.InQuad - } - - NumberAnimation { - target: screenSaver - property: "visible" - duration: 0 - } - - } - - }, Transition { from: "Invisible" to: "Visible" + reversible: true SequentialAnimation { NumberAnimation { @@ -113,7 +93,7 @@ Item { NumberAnimation { target: screenSaver property: "opacity" - duration: 500 + duration: 300 easing.type: Easing.InQuad } diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index 1e2674ae..3d2981ca 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -87,25 +87,15 @@ AbstractButton { } ] transitions: [ - Transition { - from: "Visible" - to: "Invisible" - - NumberAnimation { - target: blurhash_ - property: "opacity" - duration: 250 - easing.type: Easing.InQuad - } - }, Transition { from: "Invisible" to: "Visible" + reversible: true NumberAnimation { target: blurhash_ property: "opacity" - duration: 500 + duration: 300 easing.type: Easing.InQuad } } -- cgit 1.4.1 From 2b8cadaac8b081fd204ad9a8520ed889e9d3b975 Mon Sep 17 00:00:00 2001 From: Loren Burkholder Date: Mon, 20 Feb 2023 19:59:06 -0500 Subject: Properly handle images without blurhashes --- resources/qml/PrivacyScreen.qml | 2 +- resources/qml/delegates/ImageMessage.qml | 133 +++++++++++++++++++++++-------- 2 files changed, 99 insertions(+), 36 deletions(-) (limited to 'resources') diff --git a/resources/qml/PrivacyScreen.qml b/resources/qml/PrivacyScreen.qml index 204eb1bd..e501d6ab 100644 --- a/resources/qml/PrivacyScreen.qml +++ b/resources/qml/PrivacyScreen.qml @@ -94,7 +94,7 @@ Item { target: screenSaver property: "opacity" duration: 300 - easing.type: Easing.InQuad + easing.type: Easing.Linear } } diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index 3d2981ca..509e80a6 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -28,6 +28,104 @@ AbstractButton { height: width*proportionalHeight hoverEnabled: true + state: img.status != Image.Ready ? "ImageLoading" : (timeline.privacyScreen.active ? "PrivacyScreenVisible" : "PrivacyScreenInvisible") + states: [ + State { + name: "ImageLoading" + + PropertyChanges { + target: blurhash_ + opacity: 1 + visible: true + } + + PropertyChanges { + target: img + opacity: 0 + } + + PropertyChanges { + target: mxcimage + opacity: 0 + } + }, + State { + name: "PrivacyScreenVisible" + + PropertyChanges { + target: blurhash_ + opacity: blurhash ? 1 : 0 + visible: blurhash ? true : false + } + + PropertyChanges { + target: img + opacity: 0 + } + + PropertyChanges { + target: mxcimage + opacity: 0 + } + }, + State { + name: "PrivacyScreenInvisible" + + PropertyChanges { + target: blurhash_ + opacity: 0 + visible: false + } + + PropertyChanges { + target: img + opacity: 1 + } + + PropertyChanges { + target: mxcimage + opacity: 1 + } + } + ] + transitions: [ + Transition { + from: "PrivacyScreenInvisible" + to: "PrivacyScreenVisible" + reversible: true + + SequentialAnimation { + PropertyAction { + target: blurhash_ + property: "visible" + } + + ParallelAnimation { + NumberAnimation { + target: blurhash_ + property: "opacity" + duration: 300 + easing.type: Easing.Linear + } + + NumberAnimation { + target: img + property: "opacity" + duration: 300 + easing.type: Easing.Linear + } + + NumberAnimation { + target: mxcimage + property: "opacity" + duration: 300 + easing.type: Easing.Linear + } + } + } + } + ] + property int metadataWidth property bool fitsMetadata: (parent.width - width) > metadataWidth+4 @@ -60,46 +158,11 @@ AbstractButton { id: blurhash_ anchors.fill: parent - visible: img.status != Image.Ready || timeline.privacyScreen.active source: blurhash ? ("image://blurhash/" + blurhash) : ("image://colorimage/:/icons/icons/ui/image-failed.svg?" + Nheko.colors.buttonText) asynchronous: true fillMode: Image.PreserveAspectFit sourceSize.width: parent.width * Screen.devicePixelRatio sourceSize.height: parent.height * Screen.devicePixelRatio - state: img.status != Image.Ready ? "Visible" : (timeline.privacyScreen.active ? "Visible" : "Invisible") - - states: [ - State { - name: "Visible" - - PropertyChanges { - target: blurhash_ - opacity: 1 - } - }, - State { - name: "Invisible" - - PropertyChanges { - target: blurhash_ - opacity: 0 - } - } - ] - transitions: [ - Transition { - from: "Invisible" - to: "Visible" - reversible: true - - NumberAnimation { - target: blurhash_ - property: "opacity" - duration: 300 - easing.type: Easing.InQuad - } - } - ] } onClicked: Settings.openImageExternal ? room.openMedia(eventId) : TimelineManager.openImageOverlay(room, url, eventId, originalWidth, proportionalHeight); -- cgit 1.4.1 From 5abd2df9b422a6e0c28e748c309b9857d1a65c2f Mon Sep 17 00:00:00 2001 From: Loren Burkholder Date: Wed, 22 Feb 2023 20:16:55 -0500 Subject: Fade in images when fully recieved --- resources/qml/PrivacyScreen.qml | 2 +- resources/qml/delegates/ImageMessage.qml | 33 +++++++------------------------- 2 files changed, 8 insertions(+), 27 deletions(-) (limited to 'resources') diff --git a/resources/qml/PrivacyScreen.qml b/resources/qml/PrivacyScreen.qml index e501d6ab..3edf0d86 100644 --- a/resources/qml/PrivacyScreen.qml +++ b/resources/qml/PrivacyScreen.qml @@ -12,7 +12,7 @@ import im.nheko 1.0 Item { id: privacyScreen - readonly property bool active: screenSaver.state === "Visible" + readonly property bool active: Settings.privacyScreen && screenSaver.state === "Visible" property var timelineRoot property int screenTimeout diff --git a/resources/qml/delegates/ImageMessage.qml b/resources/qml/delegates/ImageMessage.qml index 509e80a6..f2811869 100644 --- a/resources/qml/delegates/ImageMessage.qml +++ b/resources/qml/delegates/ImageMessage.qml @@ -28,34 +28,15 @@ AbstractButton { height: width*proportionalHeight hoverEnabled: true - state: img.status != Image.Ready ? "ImageLoading" : (timeline.privacyScreen.active ? "PrivacyScreenVisible" : "PrivacyScreenInvisible") + state: (img.status != Image.Ready || timeline.privacyScreen.active) ? "BlurhashVisible" : "ImageVisible" states: [ State { - name: "ImageLoading" + name: "BlurhashVisible" PropertyChanges { target: blurhash_ - opacity: 1 - visible: true - } - - PropertyChanges { - target: img - opacity: 0 - } - - PropertyChanges { - target: mxcimage - opacity: 0 - } - }, - State { - name: "PrivacyScreenVisible" - - PropertyChanges { - target: blurhash_ - opacity: blurhash ? 1 : 0 - visible: blurhash ? true : false + opacity: (img.status != Image.Ready) || (timeline.privacyScreen.active && blurhash) ? 1 : 0 + visible: (img.status != Image.Ready) || (timeline.privacyScreen.active && blurhash) } PropertyChanges { @@ -69,7 +50,7 @@ AbstractButton { } }, State { - name: "PrivacyScreenInvisible" + name: "ImageVisible" PropertyChanges { target: blurhash_ @@ -90,8 +71,8 @@ AbstractButton { ] transitions: [ Transition { - from: "PrivacyScreenInvisible" - to: "PrivacyScreenVisible" + from: "ImageVisible" + to: "BlurhashVisible" reversible: true SequentialAnimation { -- cgit 1.4.1