[vlc-commits] qml: redesign VideoInfoExpandPanel
Prince Gupta
git at videolan.org
Fri Jul 24 11:45:28 CEST 2020
vlc | branch: master | Prince Gupta <guptaprince8832 at gmail.com> | Mon Jun 29 19:40:25 2020 +0530| [44613c20194a3a1b423e31285e8fa8ee9e051ffd] | committer: Pierre Lamot
qml: redesign VideoInfoExpandPanel
> http://git.videolan.org/gitweb.cgi/vlc.git/?a=commit;h=44613c20194a3a1b423e31285e8fa8ee9e051ffd
---
modules/gui/qt/medialibrary/qml/VideoDisplay.qml | 14 +-
.../qt/medialibrary/qml/VideoInfoExpandPanel.qml | 254 ++++++++++++---------
2 files changed, 154 insertions(+), 114 deletions(-)
diff --git a/modules/gui/qt/medialibrary/qml/VideoDisplay.qml b/modules/gui/qt/medialibrary/qml/VideoDisplay.qml
index 104abb31ff..f15f63fd47 100644
--- a/modules/gui/qt/medialibrary/qml/VideoDisplay.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoDisplay.qml
@@ -154,6 +154,8 @@ Widgets.NavigableFocusScope {
delegate: VideoGridItem {
id: videoGridItem
+ opacity: videosGV.expandIndex !== -1 && videosGV.expandIndex !== videoGridItem.index ? .7 : 1
+
onContextMenuButtonClicked: {
contextMenu.model = videoGridItem.model
contextMenu.itemIndex = index
@@ -165,16 +167,16 @@ Widgets.NavigableFocusScope {
videosGV.currentIndex = index
videosGV.forceActiveFocus()
}
+
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 100
+ }
+ }
}
expandDelegate: VideoInfoExpandPanel {
- visible: !videosGV.isAnimating
-
- implicitHeight: videosGV.height - videosGV.cellHeight
- width: videosGV.width
-
onRetract: videosGV.retract()
- notchPosition: videosGV.getItemPos(videosGV._expandIndex)[0] + (videosGV.cellWidth / 2)
navigationParent: videosGV
navigationCancel: function() { videosGV.retract() }
diff --git a/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml b/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
index 544004b8ce..520b5d48bf 100644
--- a/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
+++ b/modules/gui/qt/medialibrary/qml/VideoInfoExpandPanel.qml
@@ -33,58 +33,26 @@ Widgets.NavigableFocusScope {
property var model : ({})
property alias currentItemY: expandRect.y
property alias currentItemHeight: expandRect.height
- implicitHeight: arrowRect.implicitHeight + contentRect.implicitHeight
- property int notchPosition: 0
+ property bool _showMoreInfo: false
signal retract()
- //arrow
- Item {
- id:arrowRect
- y: -(width/2)
- x: notchPosition - (width/2)
- clip: true
- width: Math.sqrt(2) *VLCStyle.icon_normal
- height: width/2
- implicitHeight: width/2
-
- Rectangle{
- x: 0
- y: parent.height
- width: VLCStyle.icon_normal
- height: VLCStyle.icon_normal
- color: VLCStyle.colors.bgAlt
- transformOrigin: Item.TopLeft
- rotation: -45
- }
- }
-
+ implicitHeight: contentRect.implicitHeight
Rectangle{
id: contentRect
- //height: implicitHeight
- implicitHeight: contentLayout.implicitHeight + VLCStyle.margin_xsmall * 2
- width: parent.width
-
- anchors {
- bottom: parent.bottom
- right: parent.right
- left: parent.left
- top: arrowRect.bottom
- }
- //height: parent.height - arrowRect.height
+ implicitHeight: contentLayout.implicitHeight + ( VLCStyle.margin_normal * 2 )
+ width: parent.width
clip: true
color: VLCStyle.colors.bgAlt
RowLayout {
id: contentLayout
- spacing: VLCStyle.margin_xsmall
-
- anchors.margins: VLCStyle.margin_small
-
- implicitHeight: artAndControl.implicitHeight
anchors.fill: parent
+ anchors.margins: VLCStyle.margin_normal
+ implicitHeight: artAndControl.implicitHeight
+ spacing: VLCStyle.margin_normal
FocusScope {
id: artAndControl
@@ -100,34 +68,31 @@ Widgets.NavigableFocusScope {
Column {
id: artAndControlLayout
- anchors.margins: VLCStyle.margin_small
- spacing: VLCStyle.margin_small
+
+ spacing: VLCStyle.margin_normal
/* A bigger cover for the album */
Image {
id: expand_cover_id
- height: VLCStyle.video_large_height
- width: VLCStyle.video_large_width
+ height: VLCStyle.gridCover_video_height
+ width: VLCStyle.gridCover_video_width
source: model.thumbnail || VLCStyle.noArtCover
sourceSize: Qt.size(width, height)
fillMode: Image.PreserveAspectFit
}
- Widgets.NavigableCol {
+ Widgets.NavigableRow {
id: actionButtons
focus: true
-
- width: expand_cover_id.width
+ spacing: VLCStyle.margin_large
model: ObjectModel {
Widgets.TabButtonExt {
id: playActionBtn
- width: actionButtons.width
-
- iconTxt: VLCIcons.play
+ iconTxt: VLCIcons.play_outline
text: i18n.qtr("Play")
onClicked: medialib.addAndPlay( model.id )
}
@@ -135,9 +100,7 @@ Widgets.NavigableFocusScope {
Widgets.TabButtonExt {
id: enqueueActionBtn
- width: actionButtons.width
-
- iconTxt: VLCIcons.add
+ iconTxt: VLCIcons.enqueue
text: i18n.qtr("Enqueue")
onClicked: medialib.addToPlaylist( model.id )
}
@@ -150,85 +113,160 @@ Widgets.NavigableFocusScope {
}
- ColumnLayout {
+ Column {
id: expand_infos_id
- Layout.fillWidth: true
+ spacing: 0
Layout.fillHeight: true
+ Layout.fillWidth: true
+ Layout.alignment: Qt.AlignLeft | Qt.AlignTop
- spacing: VLCStyle.margin_xsmall
-
- Text {
- id: expand_infos_title_id
-
- Layout.preferredHeight: implicitHeight
- Layout.fillWidth: true
-
+ Widgets.SubtitleLabel {
text: model.title || i18n.qtr("Unknown title")
- font.pixelSize: VLCStyle.fontSize_xxlarge
- font.bold: true
+ width: parent.width
+ }
+
+ Widgets.CaptionLabel {
+ text: model.duration
color: VLCStyle.colors.text
+ topPadding: VLCStyle.margin_xxsmall
+ width: parent.width
}
- Widgets.NavigableFocusScope {
- id: infoPanel
+ Row {
+ width: parent.width
+ topPadding: VLCStyle.margin_normal
+ spacing: VLCStyle.margin_xlarge
- Layout.fillHeight: true
- Layout.fillWidth: true
+ Column {
+ width: audioTrackInfo.visible ? expand_infos_id.width / 2 : expand_infos_id.width
- navigationParent: expandRect
- navigationLeftItem: actionButtons
+ Widgets.MenuCaption {
+ text: "<b>" + i18n.qtr("File Name:") + "</b> " + expandRect.model.title
+ width: parent.width
+ }
- ScrollView {
- id: infoPannelScrollView
+ Widgets.MenuCaption {
+ text: "<b>" + i18n.qtr("Path:") + "</b> " + expandRect.model.display_mrl
+ topPadding: VLCStyle.margin_xsmall
+ width: parent.width
+ }
- contentHeight: infoInnerCol.height
+ MouseArea {
+ width: childrenRect.width
+ height: childrenRect.height
- anchors.fill: parent
- anchors.margins: VLCStyle.margin_xxsmall
+ onClicked: _showMoreInfo = !_showMoreInfo
- focus: true
- clip: true
-
- ListView {
- id: infoInnerCol
- spacing: VLCStyle.margin_xsmall
- model: [
- {text: i18n.qtr("File Name"), data: expandRect.model.title, bold: true},
- {text: i18n.qtr("Path"), data: expandRect.model.display_mrl},
- {text: i18n.qtr("Length"), data: expandRect.model.duration},
- {text: i18n.qtr("File size"), data: ""},
- {text: i18n.qtr("Times played"), data: expandRect.model.playcount},
- {text: i18n.qtr("Video track"), data: expandRect.model.videoDesc},
- {text: i18n.qtr("Audio track"), data: expandRect.model.audioDesc},
- ]
- delegate: Label {
- font.bold: Boolean(modelData.bold)
- font.pixelSize: VLCStyle.fontSize_normal
- text: modelData.text + ": " + modelData.data
- color: VLCStyle.colors.text
- width: parent.width
- wrapMode: Label.Wrap
+ Row {
+ topPadding: VLCStyle.margin_large
+ spacing: VLCStyle.margin_xsmall
+
+ Widgets.IconLabel {
+ text: VLCIcons.back
+ rotation: _showMoreInfo ? 270 : 90
+
+ Behavior on rotation {
+ NumberAnimation {
+ duration: 100
+ }
+ }
+ }
+
+ Widgets.CaptionLabel {
+ text: _showMoreInfo ? i18n.qtr("View Less") : i18n.qtr("View More")
+ color: VLCStyle.colors.text
+ }
}
}
- Keys.priority: Keys.BeforeItem
- Keys.onPressed: {
- if ( !KeyHelper.matchUp(event) && !KeyHelper.matchDown(event) ) {
- infoPanel.defaultKeyAction(event, 0)
+
+ Column {
+ topPadding: VLCStyle.margin_xxlarge
+ visible: _showMoreInfo && expandRect.model.videoDesc.length > 0
+ opacity: visible ? 1 : 0
+
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 100
+ }
+ }
+
+ Widgets.MenuCaption {
+ text: i18n.qtr("Video track:")
+ font.bold: true
+ bottomPadding: VLCStyle.margin_small
+ }
+
+ Repeater {
+ model: expandRect.model.videoDesc
+
+ delegate: Repeater {
+ model: [
+ {text: i18n.qtr("Codec:"), data: modelData.codec },
+ {text: i18n.qtr("Language:"), data: modelData.language },
+ {text: i18n.qtr("FPS:"), data: modelData.fps }
+ ]
+
+ delegate: Widgets.MenuCaption {
+ text: modelData.text + " " + modelData.data
+ bottomPadding: VLCStyle.margin_xsmall
+ }
+
+ }
}
}
}
- Rectangle {
- z: 2
- anchors.fill: parent
- border.width: VLCStyle.dp(2)
- border.color: VLCStyle.colors.accent
- color: "transparent"
- visible: infoPanel.activeFocus
+ Column {
+ id: audioTrackInfo
+
+ visible: _showMoreInfo && expandRect.model.audioDesc.length > 0
+ opacity: visible ? 1 : 0
+
+ Behavior on opacity {
+ NumberAnimation {
+ duration: 100
+ }
+ }
+
+ Widgets.MenuCaption {
+ text: i18n.qtr("Audio track:")
+ font.bold: true
+ bottomPadding: VLCStyle.margin_small
+ }
+
+ Repeater {
+ model: expandRect.model.audioDesc
+
+ delegate: Repeater {
+ model: [
+ {text: i18n.qtr("Codec:"), data: modelData.codec },
+ {text: i18n.qtr("Language:"), data: modelData.language },
+ {text: i18n.qtr("Channel:"), data: modelData.nbchannels }
+ ]
+
+ delegate: Widgets.MenuCaption {
+ text: modelData.text + " " + modelData.data
+ bottomPadding: VLCStyle.margin_xsmall
+ }
+ }
+ }
+
}
}
}
+
+ Widgets.IconLabel {
+ text: VLCIcons.close
+ color: VLCStyle.colors.caption
+
+ Layout.alignment: Qt.AlignTop
+
+ MouseArea {
+ anchors.fill: parent
+ onClicked: expandRect.retract()
+ }
+ }
}
}
}
More information about the vlc-commits
mailing list