« back to all changes in this revision
Viewing changes to MusicToolbar.qml
- browse files at revision 650
- compare with another revision
- download diff
- download tarball
- view history from revision 650
- Committer: Victor Thompson
- Date: 2014-10-03 01:39:45 UTC
- mfrom: (640.1.3 music-app)
- Revision ID: victor.thompson@gmail.com-20141003013945-31ean3oczzy9yspv
merge of trunk
- files modified:
- MusicNowPlaying.qml
added
removed
MusicToolbar.qml
178
178
? "full" : "expanded"
179
179
180
180
// Properties for the different heights
181
property int minimizedHeight: units.gu(0.5)
182
property int expandedHeight: units.gu(8)
181
property int minimizedHeight: units.gu(0.25)
182
property int expandedHeight: units.gu(7)
183
183
property int fullHeight: units.gu(11)
184
184
185
185
onCurrentModeChanged: {
717
717
718
718
Rectangle {
719
719
id: musicToolbarPlayerControls
720
anchors.fill: parent
721
color: styleMusic.playerControls.backgroundColor
720
anchors {
721
fill: parent
722
}
723
color: "#000"
722
724
state: trackQueue.model.count === 0 ? "disabled" : "enabled"
723
725
states: [
724
726
State {
747
749
748
750
Rectangle {
749
751
id: disabledPlayerControlsGroup
750
anchors.fill: parent
752
anchors {
753
fill: parent
754
}
751
755
color: "transparent"
752
visible: trackQueue.model.count === 0
753
756
754
757
Label {
755
758
id: noSongsInQueueLabel
756
759
anchors {
757
760
left: parent.left
761
leftMargin: units.gu(2)
758
762
right: disabledPlayerControlsPlayButton.left
759
margins: units.gu(1)
760
top: parent.top
763
rightMargin: units.gu(2)
764
verticalCenter: parent.verticalCenter
761
765
}
762
766
color: styleMusic.playerControls.labelColor
763
text: i18n.tr("Tap play to shuffle music")
767
text: i18n.tr("Tap to shuffle music")
764
768
fontSize: "large"
765
769
wrapMode: Text.WordWrap
766
770
maximumLineCount: 2
767
771
}
768
772
769
Rectangle {
773
/* Play/Pause button */
774
Icon {
770
775
id: disabledPlayerControlsPlayButton
771
anchors.right: parent.right
772
anchors.rightMargin: units.gu(1)
773
anchors.verticalCenter: parent.verticalCenter
774
antialiasing: true
775
color: "#444"
776
height: units.gu(7)
777
radius: height / 2
776
anchors {
777
right: parent.right
778
rightMargin: units.gu(3)
779
verticalCenter: parent.verticalCenter
780
}
781
color: "#FFF"
782
height: units.gu(2.5)
783
name: player.playbackState === MediaPlayer.PlayingState ?
784
"media-playback-pause" : "media-playback-start"
785
objectName: "smallPlayShape"
778
786
width: height
787
}
779
788
780
function trigger() {
789
/* Click to shuffle music */
790
MouseArea {
791
anchors {
792
fill: parent
793
}
794
onClicked: {
781
795
if (emptyPage.noMusic) {
782
796
return;
783
797
}
789
803
player.toggle();
790
804
}
791
805
}
792
793
// draws the outer shadow/highlight
794
Rectangle {
795
id: disabledSourceOutter
796
anchors { fill: parent; margins: -units.gu(0.1) }
797
radius: (width / 2)
798
antialiasing: true
799
gradient: Gradient {
800
GradientStop { position: 0.0; color: "black" }
801
GradientStop { position: 0.5; color: "transparent" }
802
GradientStop { position: 1.0; color: UbuntuColors.warmGrey }
803
}
804
805
Rectangle {
806
anchors.verticalCenter: parent.verticalCenter
807
anchors.horizontalCenter: parent.horizontalCenter
808
antialiasing: true
809
color: "#444"
810
height: playerControlsPlayButton.height - units.gu(.1)
811
radius: height / 2
812
width: height
813
814
Rectangle {
815
id: disabledPlayerControlsPlayInnerCircle
816
anchors.horizontalCenter: parent.horizontalCenter
817
anchors.verticalCenter: parent.verticalCenter
818
antialiasing: true
819
height: units.gu(4.5)
820
radius: height / 2
821
width: height
822
color: styleMusic.toolbar.fullInnerPlayCircleColor
823
824
// draws the inner shadow/highlight
825
Rectangle {
826
id: disabledSourceInner
827
anchors { fill: parent; margins: -units.gu(0.1) }
828
radius: (width / 2)
829
antialiasing: true
830
gradient: Gradient {
831
GradientStop { position: 0.0; color: UbuntuColors.warmGrey }
832
GradientStop { position: 0.5; color: "transparent" }
833
GradientStop { position: 1.0; color: "black" }
834
}
835
836
Rectangle {
837
anchors.verticalCenter: parent.verticalCenter
838
anchors.horizontalCenter: parent.horizontalCenter
839
antialiasing: true
840
height: playerControlsPlayInnerCircle.height - units.gu(.1)
841
radius: height / 2
842
width: height
843
color: styleMusic.toolbar.fullInnerPlayCircleColor
844
845
Image {
846
id: disabledPlayIndicator
847
height: units.gu(4)
848
width: height
849
anchors.horizontalCenter: parent.horizontalCenter
850
anchors.verticalCenter: parent.verticalCenter
851
opacity: emptyPage.noMusic ? .4 : 1
852
source: player.playbackState === MediaPlayer.PlayingState ?
853
Qt.resolvedUrl("images/media-playback-pause.svg") : Qt.resolvedUrl("images/media-playback-start.svg")
854
}
855
}
856
}
857
}
858
}
859
}
860
806
}
861
807
}
862
808
863
809
Rectangle {
864
810
id: enabledPlayerControlsGroup
865
anchors.fill: parent
811
anchors {
812
fill: parent
813
}
866
814
color: "transparent"
867
visible: trackQueue.model.count !== 0
868
869
/* Settings button */
870
// TODO: Enable settings when it is practical
871
/* Rectangle {
872
id: playerControlsSettings
873
anchors.right: parent.right
874
anchors.verticalCenter: parent.verticalCenter
875
width: units.gu(6)
876
height: width
877
color: "transparent"
878
879
Image {
880
anchors.horizontalCenter: parent.horizontalCenter
881
anchors.verticalCenter: parent.verticalCenter
882
height: units.gu(3)
883
source: Qt.resolvedUrl("images/settings.png")
884
width: height
885
}
886
887
MouseArea {
888
anchors.fill: parent
889
onClicked: {
890
console.debug('Debug: Show settings')
891
PopupUtils.open(Qt.resolvedUrl("MusicSettings.qml"), mainView,
892
{
893
title: i18n.tr("Settings")
894
} )
895
}
896
}
897
} */
898
899
/* Play/Pause button TODO: image and colours needs updating */
900
Rectangle {
901
id: playerControlsPlayButton
902
anchors.right: parent.right
903
anchors.rightMargin: units.gu(1)
904
anchors.verticalCenter: parent.verticalCenter
905
antialiasing: true
906
color: "#444"
907
height: units.gu(7)
908
objectName: "smallPlayShape"
909
radius: height / 2
910
width: height
911
912
function trigger() {
913
if (emptyPage.noMusic) {
914
return;
915
}
916
917
if (trackQueue.model.count === 0) {
918
playRandomSong();
919
}
920
else {
921
player.toggle();
922
}
923
}
924
925
// draws the outer shadow/highlight
926
Rectangle {
927
id: sourceOutter
928
anchors { fill: parent; margins: -units.gu(0.1) }
929
radius: (width / 2)
930
antialiasing: true
931
gradient: Gradient {
932
GradientStop { position: 0.0; color: "black" }
933
GradientStop { position: 0.5; color: "transparent" }
934
GradientStop { position: 1.0; color: UbuntuColors.warmGrey }
935
}
936
937
Rectangle {
938
anchors.verticalCenter: parent.verticalCenter
939
anchors.horizontalCenter: parent.horizontalCenter
940
antialiasing: true
941
color: "#444"
942
height: playerControlsPlayButton.height - units.gu(.1)
943
radius: height / 2
944
width: height
945
946
Rectangle {
947
id: playerControlsPlayInnerCircle
948
anchors.horizontalCenter: parent.horizontalCenter
949
anchors.verticalCenter: parent.verticalCenter
950
antialiasing: true
951
height: units.gu(4.5)
952
radius: height / 2
953
width: height
954
color: styleMusic.toolbar.fullInnerPlayCircleColor
955
956
// draws the inner shadow/highlight
957
Rectangle {
958
id: sourceInner
959
anchors { fill: parent; margins: -units.gu(0.1) }
960
radius: (width / 2)
961
antialiasing: true
962
gradient: Gradient {
963
GradientStop { position: 0.0; color: UbuntuColors.warmGrey }
964
GradientStop { position: 0.5; color: "transparent" }
965
GradientStop { position: 1.0; color: "black" }
966
}
967
968
Rectangle {
969
anchors.verticalCenter: parent.verticalCenter
970
anchors.horizontalCenter: parent.horizontalCenter
971
antialiasing: true
972
height: playerControlsPlayInnerCircle.height - units.gu(.1)
973
radius: height / 2
974
width: height
975
color: styleMusic.toolbar.fullInnerPlayCircleColor
976
977
Image {
978
id: playindicator
979
height: units.gu(4)
980
width: height
981
anchors.horizontalCenter: parent.horizontalCenter
982
anchors.verticalCenter: parent.verticalCenter
983
opacity: emptyPage.noMusic ? .4 : 1
984
source: player.playbackState === MediaPlayer.PlayingState ?
985
Qt.resolvedUrl("images/media-playback-pause.svg") : Qt.resolvedUrl("images/media-playback-start.svg")
986
}
987
}
988
}
989
}
815
816
/* Album art in player controls */
817
Image {
818
id: playerControlsImage
819
anchors {
820
bottom: parent.bottom
821
left: parent.left
822
top: parent.top
823
}
824
smooth: true
825
source: player.currentMetaArt === "" ?
826
decodeURIComponent("image://albumart/artist=" +
827
player.currentMetaArtist +
828
"&album=" + player.currentMetaAlbum)
829
: player.currentMetaArt
830
width: parent.height
831
832
onStatusChanged: {
833
if (status === Image.Error) {
834
source = Qt.resolvedUrl("../images/music-app-cover@30.png")
990
835
}
991
836
}
992
837
}
993
838
994
/* Container holding the labels for the toolbar */
995
Rectangle {
996
id: playerControlLabelContainer
997
anchors.bottom: parent.bottom
998
anchors.left: parent.left
999
anchors.right: playerControlsPlayButton.left
1000
anchors.top: parent.top
1001
color: "transparent"
839
/* Column of meta labels */
840
Column {
841
id: playerControlsLabels
842
anchors {
843
left: playerControlsImage.right
844
leftMargin: units.gu(1.5)
845
right: playerControlsPlayButton.left
846
rightMargin: units.gu(1)
847
verticalCenter: parent.verticalCenter
848
}
1002
849
1003
850
/* Title of track */
1004
851
Label {
1005
852
id: playerControlsTitle
1006
anchors.left: parent.left
1007
anchors.leftMargin: units.gu(1)
1008
anchors.right: parent.right
1009
anchors.rightMargin: units.gu(1)
1010
anchors.top: parent.top
1011
anchors.topMargin: units.gu(1)
1012
color: styleMusic.playerControls.labelColor
853
anchors {
854
left: parent.left
855
right: parent.right
856
}
857
color: "#FFF"
1013
858
elide: Text.ElideRight
1014
fontSize: "medium"
1015
objectName: "playercontroltitle"
859
fontSize: "small"
860
font.weight: Font.DemiBold
1016
861
text: player.currentMetaTitle === ""
1017
862
? player.source : player.currentMetaTitle
1018
863
}
1020
865
/* Artist of track */
1021
866
Label {
1022
867
id: playerControlsArtist
1023
anchors.left: parent.left
1024
anchors.leftMargin: units.gu(1)
1025
anchors.right: parent.right
1026
anchors.rightMargin: units.gu(1)
1027
anchors.top: playerControlsTitle.bottom
1028
color: styleMusic.playerControls.labelColor
868
anchors {
869
left: parent.left
870
right: parent.right
871
}
872
color: "#FFF"
1029
873
elide: Text.ElideRight
1030
874
fontSize: "small"
875
opacity: 0.4
1031
876
text: player.currentMetaArtist
1032
877
}
1033
1034
/* Album of track */
1035
Label {
1036
id: playerControlsAlbum
1037
anchors.left: parent.left
1038
anchors.leftMargin: units.gu(1)
1039
anchors.right: parent.right
1040
anchors.rightMargin: units.gu(1)
1041
anchors.top: playerControlsArtist.bottom
1042
color: styleMusic.playerControls.labelColor
1043
elide: Text.ElideRight
1044
fontSize: "small"
1045
text: player.currentMetaAlbum
1046
}
1047
}
1048
878
}
879
880
/* Play/Pause button */
881
Icon {
882
id: playerControlsPlayButton
883
anchors {
884
right: parent.right
885
rightMargin: units.gu(3)
886
verticalCenter: parent.verticalCenter
887
}
888
color: "#FFF"
889
height: units.gu(2.5)
890
name: player.playbackState === MediaPlayer.PlayingState ?
891
"media-playback-pause" : "media-playback-start"
892
objectName: "smallPlayShape"
893
width: height
894
}
895
896
MouseArea {
897
anchors {
898
bottom: parent.bottom
899
horizontalCenter: playerControlsPlayButton.horizontalCenter
900
top: parent.top
901
}
902
onClicked: player.toggle()
903
width: units.gu(8)
904
905
Rectangle {
906
anchors {
907
fill: parent
908
}
909
color: "#FFF"
910
opacity: parent.pressed ? 0.1 : 0
911
912
Behavior on opacity {
913
UbuntuNumberAnimation {
914
duration: UbuntuAnimation.FastDuration
915
}
916
}
917
}
918
}
919
920
/* Mouse area to jump to now playing */
1049
921
Rectangle {
1050
anchors.fill: playerControlLabelContainer
922
anchors {
923
bottom: parent.bottom
924
left: parent.left
925
right: playerControlsLabels.right
926
top: parent.top
927
}
1051
928
color: "transparent"
1052
929
function trigger() {
1053
930
tabs.pushNowPlaying();
1075
952
id: musicToolbarSmallProgressHint
1076
953
anchors.left: parent.left
1077
954
anchors.top: parent.top
1078
color: styleMusic.nowPlaying.progressForegroundColor
955
color: UbuntuColors.blue
1079
956
height: parent.height
1080
957
width: 0
1081
958
Loggerhead is a web-based interface for Breezy
Version: 2.0.1