Commit 957119d9 authored by luyikei's avatar luyikei Committed by Hugo Beauzée-Luyssen

Qml: Redesign MediaLibraryView

parent e68df491
......@@ -58,6 +58,7 @@
<file>TRANSLATORS</file>
</qresource>
<qresource prefix="/qml">
<file alias="MediaLibraryView">src/Gui/library/ui/MediaLibraryView.qml</file>
<file alias="MediaLibraryView.qml">src/Gui/library/ui/MediaLibraryView.qml</file>
<file alias="MediaItem.qml">src/Gui/library/ui/MediaItem.qml</file>
</qresource>
</RCC>
......@@ -48,7 +48,7 @@ MediaLibraryView::MediaLibraryView(QWidget *parent)
auto ctx = view->rootContext();
ctx->setContextProperty( QStringLiteral( "mlModel" ), Core::instance()->mediaLibrary()->model( MediaLibrary::MediaType::Video ) );
view->setSource( QUrl( QStringLiteral( "qrc:/qml/MediaLibraryView" ) ) );
view->setSource( QUrl( QStringLiteral( "qrc:/qml/MediaLibraryView.qml" ) ) );
view->setResizeMode(QQuickView::SizeRootObjectToView);
}
......
import QtQuick 2.0
import QtQuick.Controls 1.4
Rectangle {
id: mediaItem
color: "#333333"
border.color: "#222222"
border.width: 1
property string thumbnailPath
property string title
property int duration
Image {
id: thumbnail
anchors.left: mediaItem.left
anchors.right: mediaItem.right
anchors.top: mediaItem.top
anchors.bottom: textColumn.top
source: thumbnailPath.length > 0 ? "file://" + thumbnailPath : "qrc:///images/vlmc"
fillMode: Image.PreserveAspectFit
}
Column {
id: textColumn
anchors.bottom: mediaItem.bottom
width: mediaItem.width
Text {
id: mediaTitle
text: title
fontSizeMode: Text.HorizontalFit
minimumPixelSize: 4
width: mediaItem.width
elide: Text.ElideRight
color: "#EEEEEE"
}
Text {
function toDuration( seconds ) {
if ( seconds <= 0 )
return "00:00:00";
var hours = Math.floor(seconds / 3600);
seconds = seconds % 3600;
var minutes = Math.floor( seconds / 60 );
seconds = Math.floor( seconds % 60 );
if (hours < 10) {hours = "0" + hours;}
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
return hours + ':' + minutes + ':' + seconds;
}
color: "#EEEEEE"
id: durationLabel
text: toDuration( duration / 1000 )
}
}
Drag.active: dragArea.drag.active
Drag.dragType: Drag.Automatic
Drag.mimeData: {
"vlmc/uuid":"test",
}
MouseArea {
id: dragArea
drag.target: parent
anchors.fill: parent
onClicked: gridView.currentIndex = index
}
}
import QtQuick 2.0
import QtQuick.Controls 1.4
ScrollView {
Component {
id: itemDelegate
Item {
id: mediaItem
width: gridView.cellWidth - gridView.spacing
height: gridView.cellHeight - gridView.spacing
Column {
Image {
id: thumbnail
source: thumbnailPath.length > 0 ? "file://" + thumbnailPath : "qrc:///images/vlmc"
fillMode: Image.PreserveAspectFit
width: mediaItem.width
height: mediaItem.height - 20
}
Row {
width: mediaItem.width
Text {
id: mediaTitle
text: title
fontSizeMode: Text.HorizontalFit
minimumPixelSize: 4
width: mediaItem.width - durationLabel.width
elide: Text.ElideRight
}
Text {
function toDuration( seconds ) {
if ( seconds <= 0 )
return "00:00:00";
var hours = Math.floor(seconds / 3600);
seconds = seconds % 3600;
var minutes = Math.floor( seconds / 60 );
seconds = Math.floor( seconds % 60 );
Rectangle {
anchors.fill: parent
color: "#999999"
if (hours < 10) {hours = "0" + hours;}
if (minutes < 10) {minutes = "0" + minutes;}
if (seconds < 10) {seconds = "0" + seconds;}
return hours + ':' + minutes + ':' + seconds;
}
ScrollView {
anchors.fill: parent
id: durationLabel
text: toDuration( duration / 1000 )
}
}
}
Drag.active: dragArea.drag.active
Drag.dragType: Drag.Automatic
Drag.mimeData: {
"vlmc/uuid":"test",
GridView {
id: gridView
model: mlModel
anchors.fill: parent
cellHeight: cellWidth
delegate: MediaItem {
width: gridView.cellWidth
height: width
duration: model.duration
thumbnailPath: model.thumbnailPath
title: model.title
}
MouseArea {
id: dragArea
drag.target: mediaItem
anchors.fill: parent
anchors.centerIn: parent
onClicked: gridView.currentIndex = index
// Avoid binding loop
onWidthChanged: {
cellWidth = width / 3;
}
}
}
GridView {
id: gridView
model: mlModel
anchors.fill: parent
property int spacing: 10
cellWidth: 200 + spacing
cellHeight: 180 + spacing
delegate: itemDelegate
highlight: Rectangle {
color: "lightsteelblue"
radius: 5
}
}
}
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment