harbour-tooter/qml/pages/components/ImageFullScreen.qml
molan-git 41041a77aa ui-improvements
New image/video viewer
Send-message
Profile background images
2020-05-25 17:54:02 +02:00

315 lines
11 KiB
QML

import QtQuick 2.0
import Sailfish.Silica 1.0
import QtMultimedia 5.0
FullscreenContentPage {
id: imagePage
property string type: ""
property string previewURL: ""
property string mediaURL: ""
allowedOrientations: Orientation.All
Component.onCompleted: function(){
console.log(type)
console.log(previewURL)
console.log(mediaURL)
if (type != 'gifv' && type != 'video') {
imagePreview.source = mediaURL
imageFlickable.visible = true;
} else {
video.source = mediaURL
video.fillMode = VideoOutput.PreserveAspectFit
video.play()
videoFlickable.visible = true;
}
}
Item {
id: overlay
z: 100
property bool active: true
enabled: active
anchors.fill: parent
opacity: active ? 1.0 : 0.0
Behavior on opacity { FadeAnimator {}}
IconButton {
y: Theme.paddingLarge
anchors {
right: parent.right
rightMargin: Theme.horizontalPageMargin
}
icon.source: "image://theme/icon-m-dismiss"
onClicked: pageStack.pop()
}
}
Flickable {
id: videoFlickable
visible: false
anchors.fill: parent
contentWidth: imageContainer.width; contentHeight: imageContainer.height
clip: true
Image {
id: videoPreview
fillMode: Image.PreserveAspectFit
anchors.fill: parent
source: previewURL
}
Video {
id: video
anchors.fill: parent
onErrorStringChanged: function(){
videoError.visible = true;
}
onStatusChanged: {
console.log(status)
switch (status){
case MediaPlayer.Loading:
console.log("loading")
return;
case MediaPlayer.EndOfMedia:
console.log("EndOfMedia")
return;
}
}
onPlaybackStateChanged: {
console.log(playbackState)
switch (playbackState){
case MediaPlayer.PlayingState:
playerIcon.icon.source = "image://theme/icon-m-pause"
return;
case MediaPlayer.PausedState:
playerIcon.icon.source = "image://theme/icon-m-play"
return;
case MediaPlayer.StoppedState:
playerIcon.icon.source = "image://theme/icon-m-stop"
return;
}
}
onPositionChanged: function(){
//console.log(duration)
//console.log(bufferProgress)
//console.log(position)
if (status !== MediaPlayer.Loading){
playerProgress.indeterminate = false
playerProgress.maximumValue = duration
playerProgress.minimumValue = 0
playerProgress.value = position
}
}
onStopped: function(){
play()
}
IconButton {
id: playerIcon
anchors.left: parent.left
anchors.bottom: parent.bottom
anchors.leftMargin: Theme.paddingLarge
anchors.bottomMargin: Theme.paddingLarge*1.5
icon.source: "image://theme/icon-m-play"
onClicked: function() {
if (video.playbackState === MediaPlayer.PlayingState)
video.pause()
else
video.play()
}
}
ProgressBar {
indeterminate: true
id: playerProgress
anchors.left: playerIcon.right
anchors.right: videoDlBtn.left
anchors.verticalCenter: playerIcon.verticalCenter
anchors.leftMargin: 0
anchors.bottomMargin: Theme.paddingLarge*1.5
}
IconButton {
id: videoDlBtn
visible: true
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.rightMargin: Theme.paddingLarge
anchors.bottomMargin: Theme.paddingLarge*1.5
icon.source: "image://theme/icon-m-device-download"
icon.opacity: 0.0
onClicked: {
var filename = mediaURL.split("/");
FileDownloader.downloadFile(mediaURL, filename[filename.length-1]);
}
}
Rectangle {
visible: videoError.text != ""
anchors.left: parent.left
anchors.right: parent.right
anchors.bottom: parent.bottom
color: Theme.highlightDimmerColor
height: videoError.height + 2*Theme.paddingMedium
width: parent.width
Label {
anchors.centerIn: parent
id: videoError
width: parent.width - 2*Theme.paddingMedium
wrapMode: Text.Wrap
height: contentHeight
visible: false;
font.pixelSize: Theme.fontSizeSmall;
text: video.errorString
color: Theme.highlightColor
}
}
MouseArea {
anchors.fill: parent
onClicked: function() {
if (video.playbackState === MediaPlayer.PlayingState)
video.pause()
else
video.play()
}
}
}
}
Flickable {
id: imageFlickable
visible: false
anchors.fill: parent
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()
}
}
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: pinchArea
opacity: 0.3
property real minScale: 1.0
property real maxScale: 3.0
anchors.fill: parent
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
}
}
}
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")
color: Theme.highlightColor
}
}
IconButton {
visible: true
anchors.right: parent.right
anchors.bottom: parent.bottom
anchors.rightMargin: Theme.paddingLarge
anchors.bottomMargin: Theme.paddingLarge*1.5
icon.source: "image://theme/icon-m-device-download"
onClicked: {
var filename = mediaURL.split("/");
FileDownloader.downloadFile(mediaURL, filename[filename.length-1]);
}
}
VerticalScrollDecorator { flickable: imageFlickable }
}