1/**
2 * SPDX-FileCopyrightText: 2020 Aniket Kumar <anikketkumar786@gmail.com>
3 *
4 * SPDX-License-Identifier: GPL-2.0-only OR GPL-3.0-only OR LicenseRef-KDE-Accepted-GPL
5 */
6
7import QtQuick 2.12
8import QtQuick.Layouts 1.12
9import QtQuick.Controls 2.12
10import org.kde.kirigami 2.13 as Kirigami
11import QtMultimedia 5.12
12
13Kirigami.Page {
14    id: root
15    property string filePath
16    property string mimeType
17
18    contextualActions: [
19        Kirigami.Action {
20            text: i18nd("kdeconnect-sms", "Open with default")
21            icon.name: "window-new"
22            onTriggered: {
23                Qt.openUrlExternally(filePath);
24            }
25        }
26    ]
27
28    contentItem: Rectangle {
29        anchors.fill: parent
30
31        Rectangle {
32            id: imageViewer
33            visible: mimeType.match("image")
34            anchors.horizontalCenter: parent.horizontalCenter
35            width: image.width
36            height: parent.height - y
37            y: root.implicitHeaderHeight
38            color: parent.color
39
40            Image {
41                id: image
42                source: parent.visible ? filePath : ""
43                anchors.horizontalCenter: parent.horizontalCenter
44                anchors.verticalCenter: parent.verticalCenter
45                width: sourceSize.width
46                height: parent.height
47                fillMode: Image.PreserveAspectFit
48            }
49        }
50
51        MediaPlayer {
52            id: mediaPlayer
53            source: filePath
54
55            onPositionChanged: {
56                if (mediaPlayer.position > 1000 && mediaPlayer.duration - mediaPlayer.position < 1000) {
57                    playAndPauseButton.icon.name = "media-playback-start"
58                    mediaPlayer.pause()
59                    mediaPlayer.seek(0)
60                 }
61            }
62        }
63
64        Item {
65            width: parent.width
66            height: parent.height - mediaControls.height
67            anchors.topMargin: root.implicitHeaderHeight
68
69            VideoOutput {
70                anchors.fill: parent
71                source: mediaPlayer
72                fillMode: VideoOutput.PreserveAspectFit
73
74                // By default QML's videoOutput element rotates the vdeeo files by 90 degrees in clockwise direction
75                orientation: -90
76            }
77        }
78
79        Rectangle {
80            id: mediaControls
81            visible: mimeType.match("video")
82            width: parent.width
83            height: 50
84            anchors.horizontalCenter: parent.horizontalCenter
85            anchors.bottom: parent.bottom
86            color: Kirigami.Theme.backgroundColor
87
88            Rectangle {
89                anchors.top: parent.top
90                width: parent.width
91                height: 1
92                color: "lightGray"
93            }
94
95            ColumnLayout {
96                anchors.horizontalCenter: parent.horizontalCenter
97                width: parent.width
98
99                Rectangle {
100                    id: progressBar
101                    Layout.fillWidth: parent
102                    Layout.leftMargin: Kirigami.Units.largeSpacing
103                    Layout.rightMargin: Kirigami.Units.largeSpacing
104                    Layout.topMargin: Kirigami.Units.smallSpacing
105                    radius: 5
106                    height: 5
107
108                    color: "gray"
109
110                    Rectangle {
111                        anchors.left: parent.left
112                        anchors.top: parent.top
113                        anchors.bottom: parent.bottom
114                        radius: 5
115
116                        width: mediaPlayer.duration > 0 ? parent.width*mediaPlayer.position/mediaPlayer.duration : 0
117
118                        color: {
119                            Kirigami.Theme.colorSet = Kirigami.Theme.View
120                            var accentColor = Kirigami.Theme.highlightColor
121                            return Qt.tint(Kirigami.Theme.backgroundColor, Qt.rgba(accentColor.r, accentColor.g, accentColor.b, 1))
122                        }
123                    }
124
125                    MouseArea {
126                        anchors.fill: parent
127
128                        onClicked: {
129                            if (mediaPlayer.seekable) {
130                                mediaPlayer.seek(mediaPlayer.duration * mouse.x/width);
131                            }
132                        }
133                    }
134                }
135
136                RowLayout {
137                    Layout.alignment: Qt.AlignHCenter
138                    spacing: Kirigami.Units.largeSpacing
139
140                    Button {
141                        id: backwardButton
142                        icon.name: "media-seek-backward"
143
144                        onClicked: {
145                            if (mediaPlayer.seekable) {
146                                mediaPlayer.seek(mediaPlayer.position - 2000)
147                            }
148                        }
149                    }
150
151                    Button {
152                        id: playAndPauseButton
153                        icon.name: "media-playback-pause"
154
155                        onClicked: {
156                            if (icon.name == "media-playback-start") {
157                                mediaPlayer.play()
158                                icon.name = "media-playback-pause"
159                            } else {
160                                mediaPlayer.pause()
161                                icon.name = "media-playback-start"
162                            }
163                        }
164                    }
165
166                    Button {
167                        id: forwardButton
168                        icon.name: "media-seek-forward"
169
170                        onClicked: {
171                            if (mediaPlayer.seekable) {
172                                mediaPlayer.seek(mediaPlayer.position + 2000)
173                            }
174                        }
175                    }
176                }
177            }
178        }
179    }
180
181    Component.onCompleted: {
182        mediaPlayer.play()
183    }
184}
185