Added frontend support for new features
This commit is contained in:
Digital Artifex
587
package/contents/ui/PexelsVideoHub.qml
Normal file
587
package/contents/ui/PexelsVideoHub.qml
Normal file
@@ -0,0 +1,587 @@
|
||||
import QtQuick
|
||||
import QtQuick.Controls
|
||||
import QtQuick.Dialogs
|
||||
import QtQuick.Layouts
|
||||
import QtMultimedia
|
||||
|
||||
import Komplex.Pexels.Video as Pexels
|
||||
|
||||
Item
|
||||
{
|
||||
property alias selectedFile: searchModel.lastSavedFile
|
||||
|
||||
id: mainItem
|
||||
anchors.fill: parent
|
||||
|
||||
Pexels.SearchModel
|
||||
{
|
||||
id: searchModel
|
||||
}
|
||||
|
||||
ColumnLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
RowLayout
|
||||
{
|
||||
Layout.fillHeight: false
|
||||
Layout.fillWidth: true
|
||||
Layout.margins: 6
|
||||
|
||||
TextField
|
||||
{
|
||||
Layout.preferredHeight: 32
|
||||
Layout.fillWidth: true
|
||||
|
||||
id: searchField
|
||||
placeholderText: "Search"
|
||||
onEditingFinished: mainItem.updateSearch()
|
||||
Keys.onPressed: (event) =>
|
||||
{
|
||||
if (event.key === Qt.Key_Return || event.key === Qt.Key_Enter)
|
||||
{
|
||||
searchField.focus = false; // Unfocus the TextField
|
||||
event.accepted = true; // Prevent further propagation of the key event
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Button
|
||||
{
|
||||
Layout.preferredHeight: 32
|
||||
Layout.preferredWidth: 32
|
||||
|
||||
icon.name: "search-symbolic"
|
||||
|
||||
onClicked: mainItem.updateSearch()
|
||||
}
|
||||
}
|
||||
|
||||
Component
|
||||
{
|
||||
id: highlight
|
||||
Rectangle
|
||||
{
|
||||
width: view.cellWidth; height: view.cellHeight
|
||||
color: palette.highlight; radius: 5
|
||||
x: view.currentItem.x
|
||||
y: view.currentItem.y
|
||||
Behavior on x { SpringAnimation { spring: 3; damping: 0.2 } }
|
||||
Behavior on y { SpringAnimation { spring: 3; damping: 0.2 } }
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
color: palette.base
|
||||
clip: true
|
||||
|
||||
RowLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
GridView
|
||||
{
|
||||
// The standard size
|
||||
property int idealCellHeight: 220
|
||||
property int idealCellWidth: 250
|
||||
cellWidth: width / Math.floor(width / idealCellWidth)
|
||||
cellHeight: idealCellHeight
|
||||
|
||||
id: view
|
||||
|
||||
model: searchModel
|
||||
highlight: highlight
|
||||
highlightFollowsCurrentItem: false
|
||||
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
Layout.margins: 6
|
||||
|
||||
delegate: Column
|
||||
{
|
||||
property int itemIndex: index
|
||||
property int originalHeight: videoHeight
|
||||
property int originalWidth: videoWidth
|
||||
property int videoId: id
|
||||
property string author: user
|
||||
property string authorUrl: userUrl
|
||||
property string videoUrl: videoUrl
|
||||
property string thumbnailUrl: thumbnail
|
||||
|
||||
id: entry
|
||||
|
||||
leftPadding: Math.floor((width - thumbnailImage.width) / 2)
|
||||
topPadding: 10
|
||||
rightPadding: Math.floor((width - thumbnailImage.width) / 2)
|
||||
bottomPadding: 10
|
||||
width: view.cellWidth
|
||||
|
||||
Image
|
||||
{
|
||||
width: 250
|
||||
height: 140
|
||||
id: thumbnailImage
|
||||
source: thumbnail
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
|
||||
Rectangle
|
||||
{
|
||||
color: palette.base
|
||||
anchors.fill: parent
|
||||
visible: thumbnailImage.status === Image.Loading
|
||||
|
||||
RowLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
BusyIndicator
|
||||
{
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
Layout.preferredHeight: 64
|
||||
Layout.preferredWidth: 64
|
||||
visible: running
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
MouseArea
|
||||
{
|
||||
anchors.fill: parent
|
||||
onClicked: (mouse) =>
|
||||
{
|
||||
view.currentIndex = parent.parent.itemIndex
|
||||
searchModel.currentIndex = view.currentIndex
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text
|
||||
{
|
||||
property string externalLink: authorUrl
|
||||
|
||||
elide: Text.ElideRight
|
||||
topPadding: 4
|
||||
bottomPadding: 2
|
||||
text: "<h3>" + author + "</h3>"
|
||||
anchors.horizontalCenter: parent.horizontalCenter
|
||||
width: 280
|
||||
color: palette.link
|
||||
|
||||
MouseArea
|
||||
{
|
||||
anchors.fill: parent
|
||||
onClicked: (mouse) =>
|
||||
{
|
||||
Qt.openUrlExternally(parent.externalLink)
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout
|
||||
{
|
||||
visible: parent.itemIndex === view.currentIndex
|
||||
width: thumbnailImage.width
|
||||
Button
|
||||
{
|
||||
Layout.topMargin: 4
|
||||
Layout.alignment: Qt.AlignRight
|
||||
Layout.preferredHeight: 32
|
||||
Layout.fillWidth: true
|
||||
icon.name: "emblem-downloads"
|
||||
text: qsTr("Preview & Download")
|
||||
|
||||
onClicked: () =>
|
||||
{
|
||||
downloadDialog.user = entry.author
|
||||
downloadDialog.userUrl = entry.authorUrl
|
||||
downloadDialog.thumbnail = entry.thumbnailUrl
|
||||
downloadDialog.id = entry.videoId
|
||||
downloadDialog.open()
|
||||
searchModel.videoModel.update()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
populate: Transition
|
||||
{
|
||||
NumberAnimation { property: "opacity"; from: 0; to: 1; duration: 1000 }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
RowLayout
|
||||
{
|
||||
Layout.margins: 6
|
||||
Layout.fillWidth: true
|
||||
|
||||
Button
|
||||
{
|
||||
text: "Previous"
|
||||
enabled: searchModel.previousPage !== ""
|
||||
onClicked: searchModel.back()
|
||||
}
|
||||
|
||||
RowLayout
|
||||
{
|
||||
Layout.margins: 6
|
||||
Layout.fillWidth: true
|
||||
|
||||
Text
|
||||
{
|
||||
visible: searchModel.totalResults > 0
|
||||
color: palette.text
|
||||
text: ((searchModel.resultsPerPage * searchModel.currentPage) - searchModel.resultsPerPage + 1) + "-" + (searchModel.resultsPerPage * searchModel.currentPage) + " of " + searchModel.totalResults
|
||||
}
|
||||
|
||||
Text
|
||||
{
|
||||
color: palette.text
|
||||
Layout.fillWidth: true
|
||||
text: "Page " + searchModel.currentPage + " of " + Math.ceil(searchModel.totalResults / searchModel.resultsPerPage)
|
||||
}
|
||||
|
||||
Text
|
||||
{
|
||||
color: palette.text
|
||||
text: "Videos provided by Pexels"
|
||||
font.bold: true
|
||||
|
||||
onLinkActivated: (link) => Qt.openUrlExternally(link)
|
||||
|
||||
MouseArea
|
||||
{
|
||||
anchors.fill: parent
|
||||
onClicked: (mouse) =>
|
||||
{
|
||||
Qt.openUrlExternally("https://www.pexels.com")
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
}
|
||||
Button
|
||||
{
|
||||
text: "Next"
|
||||
enabled: searchModel.nextPage !== ""
|
||||
onClicked: searchModel.next()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
color: palette.base
|
||||
anchors.fill: parent
|
||||
visible: searchModel.status === Pexels.SearchModel.Searching
|
||||
|
||||
RowLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
BusyIndicator
|
||||
{
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
Layout.preferredHeight: 128
|
||||
Layout.preferredWidth: 128
|
||||
visible: running
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Dialog
|
||||
{
|
||||
property string user
|
||||
property string userUrl
|
||||
property string thumbnail
|
||||
property string preview
|
||||
property int id
|
||||
|
||||
id: downloadDialog
|
||||
modal: Qt.WindowModal
|
||||
width: 600
|
||||
height: 440
|
||||
|
||||
anchors.centerIn: parent
|
||||
clip: true
|
||||
|
||||
ColumnLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
Text
|
||||
{
|
||||
property string externalLink: downloadDialog.userUrl
|
||||
|
||||
elide: Text.ElideRight
|
||||
text: "<h3>" + downloadDialog.user + "</h3>"
|
||||
width: 280
|
||||
color: palette.link
|
||||
|
||||
MouseArea
|
||||
{
|
||||
anchors.fill: parent
|
||||
onClicked: (mouse) =>
|
||||
{
|
||||
Qt.openUrlExternally(parent.externalLink)
|
||||
}
|
||||
cursorShape: Qt.PointingHandCursor
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 300
|
||||
color: "black"
|
||||
ColumnLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
VideoOutput
|
||||
{
|
||||
property alias duration: mediaPlayer.duration
|
||||
property alias mediaSource: mediaPlayer.source
|
||||
property alias metaData: mediaPlayer.metaData
|
||||
property alias playbackRate: mediaPlayer.playbackRate
|
||||
property alias position: mediaPlayer.position
|
||||
property alias seekable: mediaPlayer.seekable
|
||||
property alias volume: audioOutput.volume
|
||||
|
||||
signal sizeChanged
|
||||
signal fatalError
|
||||
|
||||
id: videoOutput
|
||||
|
||||
visible: true
|
||||
Layout.preferredWidth: 500
|
||||
Layout.preferredHeight: 281
|
||||
Layout.alignment: Qt.AlignHCenter
|
||||
fillMode: VideoOutput.PreserveAspectCrop
|
||||
smooth: true
|
||||
|
||||
onHeightChanged: this.sizeChanged()
|
||||
|
||||
MediaPlayer
|
||||
{
|
||||
id: mediaPlayer
|
||||
videoOutput: videoOutput
|
||||
source: Qt.resolvedUrl(downloadSelector.currentValue ? downloadSelector.currentValue : "")
|
||||
|
||||
audioOutput: AudioOutput
|
||||
{
|
||||
id: audioOutput
|
||||
volume: 0
|
||||
}
|
||||
|
||||
onErrorOccurred: function(error, errorString)
|
||||
{
|
||||
if (MediaPlayer.NoError !== error)
|
||||
{
|
||||
console.log("[qmlvideo] VideoItem.onError error " + error + " errorString " + errorString)
|
||||
videoOutput.fatalError()
|
||||
}
|
||||
}
|
||||
|
||||
onSourceChanged:
|
||||
{
|
||||
if(mediaPlayer.source !== "")
|
||||
mediaPlayer.play()
|
||||
else
|
||||
mediaPlayer.stop()
|
||||
}
|
||||
}
|
||||
|
||||
function start() { mediaPlayer.play() }
|
||||
function stop() { mediaPlayer.stop() }
|
||||
function seek(position) { mediaPlayer.setPosition(position); }
|
||||
|
||||
Image
|
||||
{
|
||||
visible: !mediaPlayer.playing
|
||||
anchors.fill: parent
|
||||
|
||||
fillMode: Image.PreserveAspectFill
|
||||
source: downloadDialog.thumbnail
|
||||
}
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 18
|
||||
color: palette.alternateBase
|
||||
RowLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
spacing: 0
|
||||
|
||||
ProgressBar
|
||||
{
|
||||
Layout.fillWidth: true
|
||||
Layout.fillHeight: true
|
||||
from: 0
|
||||
to: mediaPlayer.duration
|
||||
value: mediaPlayer.position
|
||||
}
|
||||
Button
|
||||
{
|
||||
Layout.preferredHeight: 18
|
||||
Layout.preferredWidth: 18
|
||||
icon.name: mediaPlayer.playing ? "stop-symbolic" : "play-symbolic"
|
||||
icon.height: 16
|
||||
icon.width: 16
|
||||
onClicked: () =>
|
||||
{
|
||||
if(mediaPlayer.playing)
|
||||
mediaPlayer.stop()
|
||||
else
|
||||
mediaPlayer.play()
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Text
|
||||
{
|
||||
text: qsTr("Download Options")
|
||||
color: palette.text
|
||||
font.bold: true
|
||||
Layout.fillHeight: true
|
||||
verticalAlignment: Text.AlignBottom
|
||||
}
|
||||
|
||||
RowLayout
|
||||
{
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: downloadSelector.height
|
||||
ComboBox
|
||||
{
|
||||
id: downloadSelector
|
||||
Layout.fillWidth: true
|
||||
model: searchModel.videoModel
|
||||
textRole: "text"
|
||||
valueRole: "url"
|
||||
}
|
||||
|
||||
Button
|
||||
{
|
||||
enabled: downloadSelector.currentIndex >= 0
|
||||
Layout.preferredHeight: downloadSelector.height
|
||||
Layout.preferredWidth: downloadSelector.height
|
||||
icon.name: "image-symbolic"
|
||||
|
||||
id: downloadButton
|
||||
|
||||
onClicked: () =>
|
||||
{
|
||||
downloadDialog.close();
|
||||
progressDialog.thumbnail = downloadDialog.thumbnail
|
||||
progressDialog.author = downloadDialog.user
|
||||
progressDialog.open()
|
||||
searchModel.videoModel.download(downloadSelector.currentIndex)
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Connections
|
||||
{
|
||||
target: searchModel.videoModel
|
||||
function onStatusChanged()
|
||||
{
|
||||
if(searchModel.videoModel.status === 0)
|
||||
downloadSelector.currentIndex = 0
|
||||
}
|
||||
}
|
||||
|
||||
onClosed: () =>
|
||||
{
|
||||
mediaPlayer.stop()
|
||||
}
|
||||
|
||||
Rectangle
|
||||
{
|
||||
color: palette.base
|
||||
anchors.fill: parent
|
||||
visible: searchModel.videoModel.status === 1
|
||||
|
||||
RowLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
BusyIndicator
|
||||
{
|
||||
Layout.alignment: Qt.AlignCenter
|
||||
Layout.preferredHeight: 128
|
||||
Layout.preferredWidth: 128
|
||||
visible: running
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
Dialog
|
||||
{
|
||||
property string author
|
||||
property string thumbnail
|
||||
|
||||
modal: Qt.WindowModal
|
||||
width: 600
|
||||
height: 420
|
||||
|
||||
anchors.centerIn: parent
|
||||
clip: true
|
||||
|
||||
id: progressDialog
|
||||
|
||||
ColumnLayout
|
||||
{
|
||||
anchors.fill: parent
|
||||
|
||||
Image
|
||||
{
|
||||
Layout.fillHeight: true
|
||||
Layout.fillWidth: true
|
||||
|
||||
fillMode: Image.PreserveAspectCrop
|
||||
source: downloadDialog.thumbnail
|
||||
}
|
||||
|
||||
Text
|
||||
{
|
||||
text: "Downloading Video..."
|
||||
color: palette.text
|
||||
}
|
||||
|
||||
ProgressBar
|
||||
{
|
||||
value: searchModel.videoModel.downloadProgress
|
||||
Layout.fillWidth: true
|
||||
Layout.preferredHeight: 6
|
||||
}
|
||||
}
|
||||
|
||||
Connections
|
||||
{
|
||||
target: searchModel.videoModel
|
||||
function onDownloadFinished()
|
||||
{
|
||||
progressDialog.close()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
function updateSearch()
|
||||
{
|
||||
console.log(searchField.text)
|
||||
searchModel.query = searchField.text
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user