yukijoou/kwin
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Integrate video into the UI

Browse source 
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
1 changed files with 64 additions and 8 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

72
kcmkwin/kwincompositing/qml/Effect.qml
View file

@ -23,6 +23,8 @@ import QtQuick 2.1
import QtQuick.Controls 1.0 import QtQuick.Controls 1.0
import QtQuick.Layouts 1.0 import QtQuick.Layouts 1.0
import org.kde.kwin.kwincompositing 1.0 import org.kde.kwin.kwincompositing 1.0
import QtMultimedia 5.0 as Multimedia
import org.kde.qtextracomponents 2.0 as QtExtra
Item { Item {
id: item id: item
@ -82,10 +84,20 @@ Item {
Item { Item {
id: effectItem id: effectItem
width: effectView.width - effectStatusCheckBox.width - aboutButton.width - configureButton.width width: effectView.width - effectStatusCheckBox.width - aboutButton.width - configureButton.width
height: 40 height: item.height
anchors.top: rowEffect.top
anchors.left: effectStatusCheckBox.right anchors.left: effectStatusCheckBox.right
MouseArea {
id: area
width: effectView.width - effectStatusCheckBox.width
height: effectView.height
onClicked: {
effectView.currentIndex = index;
}
}
Column { Column {
id: col id: col
height: parent.height
Text { Text {
text: model.NameRole text: model.NameRole
} }
@ -117,17 +129,61 @@ Item {
PropertyAnimation {id: animationAbout; target: aboutItem; property: "visible"; to: !aboutItem.visible} 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} PropertyAnimation {id: animationAboutSpacing; target: item; property: "height"; to: item.height == 40 ? item.height + 100 : 40}
} }
} Multimedia.Video {
MouseArea { id: videoItem
id: area function showHide() {
width: effectView.width - effectStatusCheckBox.width replayButton.visible = false;
height: effectView.height if (videoItem.visible === true) {
onClicked: { videoItem.stop();
effectView.currentIndex = index; 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 {
// it's a mouse area with icon inside to not have an ugly button background
id: replayButton
visible: false
anchors.fill: parent
onClicked: {
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 { Button {
id: configureButton id: configureButton
anchors.right: aboutButton.left anchors.right: aboutButton.left