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