Commit e42238e7 authored by Camilo Higuita's avatar Camilo Higuita

ui and playback improvements

parent d562419d
...@@ -74,18 +74,24 @@ Kirigami.ApplicationWindow ...@@ -74,18 +74,24 @@ Kirigami.ApplicationWindow
root.width = columnWidth*3 root.width = columnWidth*3
} }
ColumnLayout GridLayout
{ {
id: playlistLayout id: playlistLayout
width: parent.width width: parent.width
height: parent.height height: parent.height
columns: 1
rows: 4
rowSpacing: 0
Rectangle Rectangle
{ {
id: coverPlay id: coverPlay
width: parent.width Layout.fillWidth: true
Layout.row: 1
height: parent.width < columnWidth ? parent.width : columnWidth height: parent.width < columnWidth ? parent.width : columnWidth
visible: mainPlaylistTable.count>0
FastBlur FastBlur
{ {
anchors.fill: coverPlay anchors.fill: coverPlay
...@@ -107,28 +113,28 @@ Kirigami.ApplicationWindow ...@@ -107,28 +113,28 @@ Kirigami.ApplicationWindow
Slider Slider
{ {
id: progressBar id: progressBar
width: parent.width
Layout.fillWidth: true Layout.fillWidth: true
anchors.top: coverPlay.bottom Layout.row: 3
height: 16 height: 16
from: 0 from: 0
to: 1000 to: 1000
value: 0 value: 0
visible: mainPlaylistTable.count>0
spacing: 0
onMoved: onMoved:
{ {
player.seek(player.duration() / 1000 * value); player.seek(player.duration() / 1000 * value);
} }
} }
Rectangle Rectangle
{ {
id: playbackControls id: playbackControls
anchors.top: progressBar.bottom
Layout.fillWidth: true Layout.fillWidth: true
width: parent.width Layout.row: 2
height: 48 height: 48
z: 1 visible: mainPlaylistTable.count>0
RowLayout RowLayout
{ {
...@@ -158,14 +164,9 @@ Kirigami.ApplicationWindow ...@@ -158,14 +164,9 @@ Kirigami.ApplicationWindow
onClicked: onClicked:
{ {
if(player.isPaused()) if(player.isPaused())
{
Player.resumeTrack() Player.resumeTrack()
playIcon.text= MdiFont.Icon.pause else Player.pauseTrack()
}else
{
Player.pauseTrack()
playIcon.text= MdiFont.Icon.play
}
} }
} }
...@@ -183,9 +184,10 @@ Kirigami.ApplicationWindow ...@@ -183,9 +184,10 @@ Kirigami.ApplicationWindow
Rectangle Rectangle
{ {
id: mainPlaylist id: mainPlaylist
width: parent.width Layout.fillWidth: true
height: parent.height-coverPlay.height - playbackControls.height Layout.fillHeight: true
anchors.top: playbackControls.bottom
Layout.row: 4
BabeTable BabeTable
{ {
...@@ -225,25 +227,31 @@ Kirigami.ApplicationWindow ...@@ -225,25 +227,31 @@ Kirigami.ApplicationWindow
TracksView TracksView
{ {
onRowClicked: onRowClicked: appendTrack(model.get(index))
{
appendTrack(model.get(index))
}
} }
AlbumsView AlbumsView
{ {
onRowClicked: onRowClicked: appendTrack(track)
onPlayAlbum:
{ {
appendTrack(track) mainPlaylistTable.clearTable()
for(var i in tracks)
appendTrack(tracks[i])
Player.playTrack(mainPlaylistTable.model.get(0))
} }
} }
ArtistsView ArtistsView
{ {
onRowClicked: onRowClicked: appendTrack(track)
onPlayAlbum:
{ {
appendTrack(track) mainPlaylistTable.clearTable()
for(var i in tracks)
appendTrack(tracks[i])
Player.playTrack(mainPlaylistTable.model.get(0))
} }
} }
......
...@@ -5,12 +5,15 @@ function playTrack(track) ...@@ -5,12 +5,15 @@ function playTrack(track)
player.play() player.play()
root.title = currentTrack.title + " - " +currentTrack.artist root.title = currentTrack.title + " - " +currentTrack.artist
currentArtwork = con.getAlbumArt(currentTrack.album, currentTrack.artist) || con.getArtistArt(currentTrack.artist) currentArtwork = con.getAlbumArt(currentTrack.album, currentTrack.artist) || con.getArtistArt(currentTrack.artist)
playIcon.text= MdiFont.Icon.pause
} }
function pauseTrack() function pauseTrack()
{ {
player.pause() player.pause()
playIcon.text= MdiFont.Icon.play
} }
function resumeTrack() function resumeTrack()
......
...@@ -12,8 +12,22 @@ Item ...@@ -12,8 +12,22 @@ Item
width: albumSize width: albumSize
height: parseInt(albumSize+(albumSize*0.4)) height: parseInt(albumSize+(albumSize*0.4))
DropShadow
{
anchors.fill: card
horizontalOffset: 3
verticalOffset: 3
radius: 8.0
samples: 17
color: "#80000000"
source: card
}
Rectangle Rectangle
{ {
id: card
anchors.fill: parent anchors.fill: parent
color: fillColor color: fillColor
radius: borderRadius radius: borderRadius
...@@ -98,11 +112,11 @@ Item ...@@ -98,11 +112,11 @@ Item
} }
} }
MouseArea
{
MouseArea {
anchors.fill: parent anchors.fill: parent
onClicked: { onClicked:
{
parent.GridView.view.currentIndex = index parent.GridView.view.currentIndex = index
console.log(index) console.log(index)
albumClicked(index) albumClicked(index)
......
import QtQuick.Controls 2.2 import QtQuick.Controls 2.2
import QtQuick 2.9 import QtQuick 2.9
Page Pane
{ {
property int albumSize : 150 property int albumSize : 150
property int albumSpacing: 20 property int albumSpacing: 20
property int borderRadius : 4 property int borderRadius : 4
property alias gridModel: gridModel property alias gridModel: gridModel
property alias grid: grid
signal albumCoverClicked(string album, string artist) signal albumCoverClicked(string album, string artist)
width: 500 width: 500
height: 400 height: 400
id: gridPage id: gridPage
ListModel
{ ListModel {id: gridModel}
id: gridModel
}
GridView GridView
{ {
...@@ -26,7 +25,6 @@ Page ...@@ -26,7 +25,6 @@ Page
height: parent.height height: parent.height
anchors.horizontalCenter: parent.horizontalCenter anchors.horizontalCenter: parent.horizontalCenter
anchors.topMargin: 20
cellWidth: albumSize + albumSpacing cellWidth: albumSize + albumSpacing
cellHeight: parseInt(albumSize+(albumSize*0.6)) cellHeight: parseInt(albumSize+(albumSize*0.6))
...@@ -67,16 +65,13 @@ Page ...@@ -67,16 +65,13 @@ Page
var album = grid.model.get(index).album var album = grid.model.get(index).album
var artist = grid.model.get(index).artist var artist = grid.model.get(index).artist
albumCoverClicked(album, artist) albumCoverClicked(album, artist)
grid.currentIndex = index
console.log("current index is: ", grid.currentIndex)
} }
} }
} }
ScrollBar.vertical: ScrollBar ScrollBar.vertical: ScrollBar{}
{
}
} }
} }
...@@ -33,32 +33,37 @@ ListView ...@@ -33,32 +33,37 @@ ListView
} }
Rectangle GridLayout
{ {
id:placeHolder id:placeHolder
anchors.fill: parent anchors.fill: parent
anchors.centerIn: parent
visible: list.count===0
ColumnLayout columns: 1
rows: 2
visible: list.count === 0
Rectangle
{ {
width: parent.width
width:parent.width
height: parent.height height: parent.height
Layout.fillHeight: true Layout.row: 1
Image Image
{ {
id: imageHolder id: imageHolder
anchors.centerIn: parent
width: 48 width: 48
height: 48 height: 48
Layout.fillWidth: true
source: "qrc:/assets/face.png" source: "qrc:/assets/face.png"
horizontalAlignment: Qt.AlignHCenter horizontalAlignment: Qt.AlignHCenter
fillMode: Image.PreserveAspectFit fillMode: Image.PreserveAspectFit
} }
HueSaturation HueSaturation
{ {
anchors.fill: imageHolder anchors.fill: imageHolder
...@@ -66,15 +71,12 @@ ListView ...@@ -66,15 +71,12 @@ ListView
saturation: -1 saturation: -1
lightness: 0.3 lightness: 0.3
} }
Label Label
{ {
id: textHolder id: textHolder
width: parent.width width: parent.width
Layout.fillWidth: true
opacity: 0.3
anchors.top: imageHolder.bottom anchors.top: imageHolder.bottom
opacity: 0.3
text: qsTr("Nothing here...") text: qsTr("Nothing here...")
padding: 10 padding: 10
font.bold: true font.bold: true
...@@ -82,6 +84,9 @@ ListView ...@@ -82,6 +84,9 @@ ListView
elide: Text.ElideRight elide: Text.ElideRight
} }
} }
} }
Component Component
......
...@@ -14,6 +14,7 @@ BabeGrid ...@@ -14,6 +14,7 @@ BabeGrid
borderRadius: 20 borderRadius: 20
signal rowClicked(var track) signal rowClicked(var track)
signal playAlbum(var tracks)
Drawer Drawer
{ {
...@@ -38,10 +39,29 @@ BabeGrid ...@@ -38,10 +39,29 @@ BabeGrid
{ {
anchors.fill: parent anchors.fill: parent
ToolButton
{
width: parent.height
height: parent.height
id: playAllBtn
Icon {text: MdiFont.Icon.playBoxOutline}
onClicked:
{
var data = albumsView.gridModel.get(albumsView.grid.currentIndex)
var query = "select * from tracks where album = \""+data.album+"\" and artist = \""+data.artist+"\""
var tracks = con.get(query)
playAlbum(tracks)
drawer.close()
}
}
Label Label
{ {
id: albumTitle id: albumTitle
width: parent.width - closeBtn.width width: parent.width - closeBtn.width - playAllBtn.width
height: parent.height height: parent.height
elide: Text.ElideRight elide: Text.ElideRight
font.pointSize: 12 font.pointSize: 12
...@@ -59,11 +79,7 @@ BabeGrid ...@@ -59,11 +79,7 @@ BabeGrid
width: parent.height width: parent.height
height: parent.height height: parent.height
Icon Icon { text: MdiFont.Icon.close }
{
text: MdiFont.Icon.close
}
onClicked: onClicked:
{ {
drawer.close() drawer.close()
...@@ -103,10 +119,9 @@ BabeGrid ...@@ -103,10 +119,9 @@ BabeGrid
} }
Component.onCompleted: Component.onCompleted:
{ {
var map = con.get("select * from albums") var map = con.get("select * from albums order by album asc")
for(var i in map) for(var i in map)
{ {
gridModel.append(map[i]) gridModel.append(map[i])
......
...@@ -14,6 +14,7 @@ BabeGrid ...@@ -14,6 +14,7 @@ BabeGrid
borderRadius: 20 borderRadius: 20
signal rowClicked(var track) signal rowClicked(var track)
signal playAlbum(var tracks)
Drawer Drawer
{ {
...@@ -38,10 +39,29 @@ BabeGrid ...@@ -38,10 +39,29 @@ BabeGrid
{ {
anchors.fill: parent anchors.fill: parent
ToolButton
{
width: parent.height
height: parent.height
id: playAllBtn
Icon {text: MdiFont.Icon.playBoxOutline}
onClicked:
{
var data = artistsView.gridModel.get(artistsView.grid.currentIndex)
var query = "select * from tracks where artist = \""+data.artist+"\""
var tracks = con.get(query)
playAlbum(tracks)
drawer.close()
}
}
Label Label
{ {
id: artistTitle id: artistTitle
width: parent.width - closeBtn.width width: parent.width - closeBtn.width - playAllBtn.width
height: parent.height height: parent.height
elide: Text.ElideRight elide: Text.ElideRight
font.pointSize: 12 font.pointSize: 12
...@@ -107,7 +127,7 @@ BabeGrid ...@@ -107,7 +127,7 @@ BabeGrid
Component.onCompleted: Component.onCompleted:
{ {
var map = con.get("select * from artists") var map = con.get("select * from artists order by artist asc")
for(var i in map) for(var i in map)
{ {
gridModel.append(map[i]) gridModel.append(map[i])
......
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