Commit 2b26432f authored by Camilo Higuita's avatar Camilo Higuita

rethink ui a bit, moved playback controls to bottom to be alsways visible and...

rethink ui a bit, moved playback controls to bottom to be alsways visible and a few fixes on babe'd indicator on delegates
parent 15efbd20
......@@ -8,7 +8,7 @@ QT += xml
QT += qml
QT += quickcontrols2
android: QT += androidextras
TARGET = babe
TEMPLATE = app
......@@ -21,7 +21,7 @@ include(kde/kde.pri)
android:
{
QT += androidextras
include(android-openssl.pri)
include(3rdparty/kirigami/kirigami.pri)
}
......
This diff is collapsed.
......@@ -11,7 +11,7 @@ function playTrack(track)
{
player.source(root.mainPlaylist.currentTrack.url);
player.play()
root.mainPlaylist.playIcon.iconName = "media-playback-pause"
root.playIcon.iconName = "media-playback-pause"
var artwork = root.mainPlaylist.currentTrack.artwork
......@@ -28,9 +28,9 @@ function playTrack(track)
if(bae.trackBabe(root.mainPlaylist.currentTrack.url))
root.mainPlaylist.babeBtnIcon.iconColor = babeColor
root.babeBtnIcon.iconColor = babeColor
else
root.mainPlaylist.babeBtnIcon.iconColor = root.mainPlaylist.babeBtnIcon.defaultColor
root.babeBtnIcon.iconColor = root.babeBtnIcon.defaultColor
var lyrics = root.mainPlaylist.currentTrack.lyrics
......@@ -53,19 +53,19 @@ function stop()
root.mainPlaylist.progressBar.value = 0
root.mainPlaylist.cover.visible = false
root.title = "Babe..."
root.mainPlaylist.playIcon.iconName = "media-playback-start"
root.playIcon.iconName = "media-playback-start"
}
function pauseTrack()
{
player.pause()
root.mainPlaylist.playIcon.iconName = "media-playback-start"
root.playIcon.iconName = "media-playback-start"
}
function resumeTrack()
{
player.play()
root.mainPlaylist.playIcon.iconName = "media-playback-pause"
root.playIcon.iconName = "media-playback-pause"
}
function nextTrack()
......@@ -236,19 +236,8 @@ function playAll(tracks)
}
function babeTrack()
{
if(bae.trackBabe(root.mainPlaylist.currentTrack.url))
{
bae.babeTrack(root.mainPlaylist.currentTrack.url, false)
root.mainPlaylist.babeBtnIcon.iconColor = root.mainPlaylist.babeBtnIcon.defaultColor
{
}else
{
bae.babeTrack(root.mainPlaylist.currentTrack.url, true)
root.mainPlaylist.babeBtnIcon.iconColor = babeColor
bae.notify("Track Babe'd",root.mainPlaylist.currentTrack.title +" by "+ root.mainPlaylist.currentTrack.artist )
}
}
function addToPlaylist(urls, playlist)
......
......@@ -12,6 +12,14 @@ ItemDelegate
property alias label: labelTxt.text
property string textColor: ListView.isCurrentItem ? highlightTextColor : foregroundColor
Rectangle
{
anchors.fill: parent
color: index % 2 === 0 ? midColor : "transparent"
opacity: 0.3
}
ColumnLayout
{
anchors.fill: parent
......
......@@ -8,6 +8,10 @@ ListView
property alias holder : holder
signal pulled()
property bool wasPulled : false
clip: true
highlight: Rectangle
......@@ -57,13 +61,17 @@ ListView
z: -999
}
ScrollBar.vertical:BabeScrollBar { }
onContentYChanged:
{
if(contentY < -120)
pulled()
wasPulled = true
if(contentY == toolBarHeight*-1 && wasPulled)
{ pulled(); wasPulled = false}
}
}
......@@ -23,6 +23,7 @@ BabeList
property alias holder : list.holder
property alias headerMenu: headerMenu
property alias contextMenu : contextMenu
signal rowClicked(int index)
signal rowPressed(int index)
......@@ -52,6 +53,7 @@ BabeList
BabeButton
{
id: closeBtn
width: rowHeight
visible: headerClose
iconName: "window-close" //"dialog-close"
......@@ -75,8 +77,8 @@ BabeList
Layout.alignment: Qt.AlignCenter
elide: Text.ElideRight
font.pointSize: 12
font.bold: isMobile
font.pointSize: 8
font.bold: false
color: foregroundColor
horizontalAlignment: Text.AlignHCenter
......@@ -121,6 +123,8 @@ BabeList
model: listModel
// property alias animBabe: delegate.animBabe
delegate: TableDelegate
{
id: delegate
......@@ -151,12 +155,12 @@ BabeList
{
if(!root.isMobile)
list.rowClicked(index)
}
onPlay: list.quickPlayTrack(index)
onArtworkCoverDoubleClicked: list.artworkDoubleClicked(index)
}
}
......@@ -164,6 +168,7 @@ BabeList
{
currentIndex = index
contextMenu.rate = bae.getTrackStars(list.model.get(list.currentIndex).url)
contextMenu.babe = list.model.get(list.currentIndex).babe == "1" ? true : false
if(root.isMobile) contextMenu.open()
else
contextMenu.popup()
......
......@@ -12,7 +12,6 @@ BabeMenu
property alias menuItem: babeMenu.children
Column
{
id: babeMenu
......
......@@ -5,7 +5,7 @@ import "../../view_models"
ItemDelegate
{
id: delegateRoot
id: delegateRoot
width: parent.width
height: sameAlbum ? rowHeightAlt : rowHeight
......@@ -39,6 +39,7 @@ ItemDelegate
// property bool playingIndicator: false
property string trackMood : art
property alias trackRating : trackRating
property alias animBabe : animBabe
// NumberAnimation on x
// {
......@@ -143,7 +144,7 @@ ItemDelegate
{
anchors.fill: parent
rows:2
columns: sameAlbum ? 4 : 3
columns: sameAlbum ? 5 : 4
Label
{
......@@ -226,34 +227,88 @@ ItemDelegate
// }
// }
// Label
// {
// id: trackDuration
// visible: trackDurationVisible
// Layout.alignment: Qt.AlignRight
// Layout.fillWidth: true
// Layout.fillHeight: true
// Layout.row: 1
// Layout.column: 3
// horizontalAlignment: Qt.AlignRight
// verticalAlignment: Qt.AlignVCenter
// text: player.transformTime(duration)
// font.bold: false
// elide: Text.ElideRight
// font.pointSize: 8
// color: textColor
// }
Label
{
id: trackDuration
visible: trackDurationVisible
id: trackBabe
font.family: "Material Design Icons"
visible: babe == "1"
Layout.alignment: Qt.AlignRight
Layout.fillWidth: true
Layout.fillHeight: true
Layout.row: 1
Layout.column: trackDurationVisible && sameAlbum ? 4 : 3
Layout.column: trackDurationVisible && sameAlbum ? 5 : 4
horizontalAlignment: Qt.AlignRight
verticalAlignment: Qt.AlignVCenter
text: player.transformTime(duration)
text: babe == "1" ? "\uf2D1" : ""
font.bold: false
elide: Text.ElideRight
font.pointSize: 8
color: textColor
onTextChanged: animBabe.start()
SequentialAnimation
{
id: animBabe
PropertyAnimation
{
target: trackBabe
property: "color"
easing.type: Easing.InOutQuad
to: babeColor
duration: 250
}
PropertyAnimation
{
target: trackBabe
property: "color"
easing.type: Easing.InOutQuad
to: textColor
duration: 500
}
}
}
Label
{
font.family: "Material Design Icons"
id: trackRating
visible: trackRatingVisible
Layout.fillWidth: true
Layout.fillHeight: true
Layout.alignment: Qt.AlignRight
Layout.row: trackRatingVisible && sameAlbum ? 1 : 2
Layout.column: 3
Layout.column: 4
// Layout.columnSpan: trackRatingVisible && sameAlbum ? 4 : 3
horizontalAlignment: Qt.AlignRight
verticalAlignment: Qt.AlignVCenter
font.family: "Material Design Icons"
text: setStars(stars)
font.bold: false
elide: Text.ElideRight
......
......@@ -10,6 +10,7 @@ BabeMenu
{
property int rate : 0
property bool babe : false
property string starColor : "#FFC107"
property string starReg : foregroundColor
property string starIcon: "draw-star"
......@@ -39,24 +40,33 @@ BabeMenu
else close()
}
Label
{
id: titleLabel
visible: root.isMobile
padding: root.isMobile ? 10 : 0
font.bold: true
width: parent.width
height: root.isMobile ? rowHeightAlt : 0
horizontalAlignment: Qt.AlignHCenter
elide: Text.ElideRight
text: list.currentIndex >= 0 ? list.model.get(list.currentIndex).title : ""
color: foregroundColor
}
function babeIt(index)
{
var url = list.model.get(index).url
var value = list.model.get(index).babe == "1" ? false : true
if(bae.babeTrack(url, value))
list.model.get(index).babe = value ? "1" : "0"
}
Label
{
id: titleLabel
visible: root.isMobile
padding: root.isMobile ? 10 : 0
font.bold: true
width: parent.width
height: root.isMobile ? rowHeightAlt : 0
horizontalAlignment: Qt.AlignHCenter
elide: Text.ElideRight
text: list.currentIndex >= 0 ? list.model.get(list.currentIndex).title : ""
color: foregroundColor
}
BabeMenuItem
{
text: "Babe it"
onTriggered: {}
text: babe == false ? "Babe it" : "UnBabe it"
onTriggered: babeIt(list.currentIndex)
}
BabeMenuItem
......
......@@ -77,6 +77,7 @@ BabePopup
id: dirList
Layout.fillWidth:true
Layout.fillHeight: true
width: parent.width
Connections
{
target: dirList
......
......@@ -7,6 +7,7 @@ BabeList
{
id: list
width: parent.width
property int currentRow : -1
property string currentUrl
property string currentName
......
......@@ -22,18 +22,12 @@ Item
property int currentTrackIndex : 0
property int prevTrackIndex : 0
property string currentArtwork
property bool shuffle : false
property alias progressBar : progressBar
property alias artwork : artwork
property alias cover : cover
property alias list : list
property alias playIcon : playIcon
property alias babeBtnIcon: babeBtnIcon
property alias infoView : infoView
property alias durationTime : durationTime
property alias progressTime : progressTime
signal coverDoubleClicked(var tracks)
signal coverPressed(var tracks)
......@@ -140,7 +134,7 @@ Item
Item
{
id: playbackControls
id: mainlistContext
width: parent.width
anchors.horizontalCenter: parent.horizontalCenter
Layout.row: 2
......@@ -156,34 +150,42 @@ Item
color: midLightColor
opacity: opacityLevel
z: -999
}
PlaylistMenu
{
id: playlistMenu
onClearOut: Player.clearOutPlaylist()
onHideCover: cover.visible = !cover.visible
onClean: Player.cleanPlaylist()
Kirigami.Separator
{
Rectangle
{
anchors.fill: parent
color: Kirigami.Theme.viewFocusColor
}
onSaveToClicked: list.saveList()
anchors
{
left: parent.left
right: parent.right
bottom: parent.bottom
}
}
}
MouseArea
{
anchors.fill: parent
drag.target: playbackControls
drag.target: mainlistContext
drag.axis: Drag.YAxis
drag.minimumY: 0
drag.maximumY: coverSize
onMouseYChanged:
{
cover.height = playbackControls.y
cover.height = mainlistContext.y
if(playbackControls.y < coverSize*0.8)
if(mainlistContext.y < coverSize*0.8)
{
cover.visible = false
playbackControls.y = 0
mainlistContext.y = 0
}else cover.visible = true
}
......@@ -221,188 +223,36 @@ Item
}
}
BabeButton
{
id: babeBtnIcon
iconName: "love" //"love-amarok"
iconColor: defaultColor
onClicked: Player.babeTrack()
}
BabeButton
{
id: previousBtn
iconName: "media-skip-backward"
onClicked: Player.previousTrack()
onPressAndHold: Player.playAt(prevTrackIndex)
}
BabeButton
{
id: playIcon
iconName: "media-playback-start"
onClicked:
{
if(player.isPaused()) Player.resumeTrack()
else Player.pauseTrack()
}
}
BabeButton
{
id: nextBtn
iconName: "media-skip-forward"
onClicked: Player.nextTrack()
onPressAndHold: Player.playAt(Player.shuffle())
}
BabeButton
{
id: shuffleBtn
iconName: shuffle ? "media-playlist-shuffle" : "media-playlist-repeat"
onClicked: shuffle = !shuffle
}
Item
{
Layout.fillWidth: true
BabeButton
{
id: menuBtn
anchors.centerIn: parent
Layout.fillWidth: true
iconName: /*"application-menu"*/ "overflow-menu"
onClicked: root.isMobile ? playlistMenu.open() : playlistMenu.popup()
}
}
}
}
Item
{
id: slideBar
Layout.row: 3
Layout.column: 1
Layout.fillWidth: true
Layout.preferredHeight: visible ? 48 : 0
// height: 48
anchors.top: playbackControls.bottom
visible: list.count > 0
Rectangle
{
anchors.fill: parent
color: midLightColor
opacity: opacityLevel
z: -999
}
GridLayout
{
anchors.fill: parent
columns:3
rows:2
Label
{
id: progressTime
Layout.row: 1
Layout.column: 1
Layout.fillWidth:true
Layout.alignment: Qt.AlignCenter
horizontalAlignment: Qt.AlignHCenter
text: "00:00"
color: foregroundColor
font.pointSize: 8
elide: Text.ElideRight
}
Label
{
id: currentTrackInfo
Layout.maximumWidth: parent.width*0.7
Layout.row: 1
Layout.column: 2
Layout.fillWidth:true
Layout.alignment: Qt.AlignCenter
horizontalAlignment: Qt.AlignHCenter
verticalAlignment: Qt.AlignVCenter
text: currentTrack ? (currentTrack.title ? currentTrack.title + " - " + currentTrack.artist : "--- - "+currentTrack.artist) : ""
color: foregroundColor
font.pointSize: 8
elide: Text.ElideRight
}
Label
{
id: durationTime
Layout.row: 1
Layout.column: 3
Layout.fillWidth:true
Layout.alignment: Qt.AlignCenter
horizontalAlignment: Qt.AlignHCenter
text: "00:00"
color: foregroundColor
font.pointSize: 8
elide: Text.ElideRight
}
Slider
Item
{
id: progressBar
Layout.row: 2
Layout.column: 1
Layout.columnSpan: 3
Layout.fillWidth:true
Layout.fillHeight: true
from: 0
to: 1000
value: 0
spacing: 0
onMoved: player.seek(player.duration() / 1000 * value);
background: Rectangle
{
x: progressBar.leftPadding
y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
implicitWidth: 200
implicitHeight: 2
width: progressBar.availableWidth
height: implicitHeight
color: foregroundColor
Rectangle
{
width: progressBar.visualPosition * parent.width
height: parent.height
color: babeColor
}
}
handle: Rectangle
Layout.fillWidth: true
BabeButton
{
x: progressBar.leftPadding + progressBar.visualPosition * (progressBar.availableWidth - width)
y: progressBar.topPadding + progressBar.availableHeight / 2 - height / 2
implicitWidth: 16
implicitHeight: 16
radius: 13
color: babeColor
id: menuBtn
anchors.centerIn: parent
Layout.fillWidth: true
iconName: /*"application-menu"*/ "overflow-menu"
onClicked: root.isMobile ? playlistMenu.open() : playlistMenu.popup()
}
}
}
}
Item
{
id: mainPlaylistItem
......@@ -410,7 +260,7 @@ Item
Layout.column: 1
Layout.fillWidth: true
Layout.fillHeight: true
anchors.top: slideBar.bottom
anchors.top: mainlistContext.bottom
// anchors.bottom: mainPlaylistRoot.searchBox
......@@ -480,10 +330,11 @@ Item
}
onArtworkDoubleClicked:
{
var query = Q.GET.albumTracks_.arg(model.get(index).album)
query = query.arg(model.get(index).artist)
contextMenu.babeIt(index)
// var query = Q.GET.albumTracks_.arg(model.get(index).album)