Integrate video into the UI

A video button is shown if the model provides an url for a video.
If the button is pressed the video element is added in a similar way
to the aboutInfo and starts the video directly. Once the playback
stopped a play again button is shown.

If one clicks the video button again, the video gets hidden.

Room for improvement:
* add a button to open in external player
* ensure video is centered correctly in the list view
This commit is contained in:
Martin Gräßlin 2013-12-03 09:24:53 +01:00
parent 0bd7c5e0e2
commit ca778481b7

View file

@ -23,6 +23,8 @@ import QtQuick 2.1
import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0
import org.kde.kwin.kwincompositing 1.0
import QtMultimedia 5.0 as Multimedia
import org.kde.qtextracomponents 2.0 as QtExtra
Item {
id: item
@ -82,10 +84,20 @@ Item {
Item {
id: effectItem
width: effectView.width - effectStatusCheckBox.width - aboutButton.width - configureButton.width
height: 40
height: item.height
anchors.top: rowEffect.top
anchors.left: effectStatusCheckBox.right
MouseArea {
id: area
width: effectView.width - effectStatusCheckBox.width
height: effectView.height
onClicked: {
effectView.currentIndex = index;
}
}
Column {
id: col
height: parent.height
Text {
text: model.NameRole
}
@ -117,17 +129,61 @@ Item {
PropertyAnimation {id: animationAbout; target: aboutItem; property: "visible"; to: !aboutItem.visible}
PropertyAnimation {id: animationAboutSpacing; target: item; property: "height"; to: item.height == 40 ? item.height + 100 : 40}
}
Multimedia.Video {
id: videoItem
function showHide() {
replayButton.visible = false;
if (videoItem.visible === true) {
videoItem.stop();
videoItem.visible = false;
// TODO: this should be done in a better way
item.height = item.height - 400;
} else {
videoItem.visible = true;
videoItem.play();
item.height = item.height + 400;
}
}
autoLoad: false
source: model.VideoRole
visible: false
width: 400
height: 400
anchors.bottom: parent.bottom
MouseArea {
id: area
width: effectView.width - effectStatusCheckBox.width
height: effectView.height
// it's a mouse area with icon inside to not have an ugly button background
id: replayButton
visible: false
anchors.fill: parent
onClicked: {
effectView.currentIndex = index;
replayButton.visible = false;
videoItem.play();
}
QtExtra.QIconItem {
id: replayIcon
anchors.centerIn: parent
width: 16
height: 16
icon: "media-playback-start"
}
Connections {
target: videoItem
onStopped: {
replayButton.visible = true
}
}
}
}
}
}
Button {
id: videoButton
anchors.right: effectConfig.effectUiConfigExists(model.ServiceNameRole) ? configureButton.left : aboutButton.left
visible: model.VideoRole.toString() !== ""
iconName: "video"
onClicked: videoItem.showHide()
}
Button {
id: configureButton
anchors.right: aboutButton.left