diff --git a/src/qml/ContentView.qml b/src/qml/ContentView.qml --- a/src/qml/ContentView.qml +++ b/src/qml/ContentView.qml @@ -27,8 +27,6 @@ id: contentViewContainer spacing: 0 - property alias playList: playList - signal toggleSearch() function goBack() { @@ -324,9 +322,6 @@ playListModel: elisa.mediaPlayList - randomPlayChecked: elisa.mediaPlayList.randomPlay - repeatPlayChecked: elisa.mediaPlayList.repeatPlay - Layout.fillHeight: true Layout.leftMargin: elisaTheme.layoutHorizontalMargin Layout.rightMargin: elisaTheme.layoutHorizontalMargin diff --git a/src/qml/ElisaMainWindow.qml b/src/qml/ElisaMainWindow.qml --- a/src/qml/ElisaMainWindow.qml +++ b/src/qml/ElisaMainWindow.qml @@ -99,6 +99,9 @@ property double playControlItemVolume : 100.0 property bool playControlItemMuted : false + property bool playControlItemRepeat : false + property bool playControlItemShuffle : false + property bool expandedFilterView: false } @@ -118,6 +121,9 @@ persistentSettings.playControlItemVolume = headerBar.playerControl.volume persistentSettings.playControlItemMuted = headerBar.playerControl.muted + + persistentSettings.playControlItemRepeat = headerBar.playerControl.repeat + persistentSettings.playControlItemShuffle = headerBar.playerControl.shuffle } } @@ -234,48 +240,25 @@ playerControl.playEnabled: myPlayControlManager.playControlEnabled playerControl.isPlaying: myPlayControlManager.musicPlaying + playerControl.repeat: persistentSettings.playControlItemRepeat + playerControl.shuffle: persistentSettings.playControlItemShuffle + playerControl.onSeek: elisa.audioPlayer.seek(position) playerControl.onPlay: elisa.audioControl.playPause() playerControl.onPause: elisa.audioControl.playPause() playerControl.onPlayPrevious: elisa.mediaPlayList.skipPreviousTrack() playerControl.onPlayNext: elisa.mediaPlayList.skipNextTrack() - Controls1.ToolButton { - id: menuButton - - action: applicationMenuAction - - z: 2 - - anchors - { - right: parent.right - top: parent.top - rightMargin: elisaTheme.layoutHorizontalMargin * 3 - topMargin: elisaTheme.layoutHorizontalMargin * 3 - } - } - - Rectangle { - anchors.fill: menuButton - - z: 1 - - radius: width / 2 - - color: myPalette.window - } - TrackImportNotification { id: importedTracksCountNotification anchors { - right: menuButton.left - top: menuButton.top - bottom: menuButton.bottom - rightMargin: elisaTheme.layoutHorizontalMargin * 3 + right: headerBar.right + top: headerBar.top + rightMargin: elisaTheme.layoutHorizontalMargin * 1.75 + topMargin: elisaTheme.layoutHorizontalMargin * 3 } } @@ -320,15 +303,16 @@ { elisa.initialize() - elisa.mediaPlayList.randomPlay = Qt.binding(function() { return contentView.playList.randomPlayChecked }) - elisa.mediaPlayList.repeatPlay = Qt.binding(function() { return contentView.playList.repeatPlayChecked }) - myPlayControlManager.randomOrContinuePlay = Qt.binding(function() { return contentView.playList.randomPlayChecked || contentView.playList.repeatPlayChecked }) + elisa.mediaPlayList.randomPlay = Qt.binding(function() { return headerBar.playerControl.shuffle }) + elisa.mediaPlayList.repeatPlay = Qt.binding(function() { return headerBar.playerControl.repeat }) + myPlayControlManager.randomOrContinuePlay = Qt.binding(function() { return headerBar.playerControl.shuffle || headerBar.playerControl.repeat }) myPlayControlManager.playListModel = Qt.binding(function() { return elisa.mediaPlayList }) myPlayControlManager.currentTrack = Qt.binding(function() { return elisa.mediaPlayList.currentTrack }) if (persistentSettings.playListState) { elisa.mediaPlayList.persistentState = persistentSettings.playListState } + if (persistentSettings.audioPlayerState) { elisa.audioControl.persistentState = persistentSettings.audioPlayerState } diff --git a/src/qml/HeaderBar.qml b/src/qml/HeaderBar.qml --- a/src/qml/HeaderBar.qml +++ b/src/qml/HeaderBar.qml @@ -291,7 +291,7 @@ Layout.alignment: Qt.AlignRight | Qt.AlignBottom Layout.bottomMargin: elisaTheme.layoutVerticalMargin Layout.leftMargin: elisaTheme.layoutHorizontalMargin - Layout.rightMargin: elisaTheme.layoutHorizontalMargin + Layout.rightMargin: elisaTheme.layoutHorizontalMargin * 1.75 elide: Text.ElideRight visible: tracksCount > 0 color: myPalette.highlightedText diff --git a/src/qml/MediaPlayListView.qml b/src/qml/MediaPlayListView.qml --- a/src/qml/MediaPlayListView.qml +++ b/src/qml/MediaPlayListView.qml @@ -30,9 +30,6 @@ property StackView parentStackView property MediaPlayList playListModel - property alias randomPlayChecked: shuffleOption.checked - property alias repeatPlayChecked: repeatOption.checked - property int placeholderHeight: elisaTheme.dragDropPlaceholderHeight signal startPlayback() @@ -151,22 +148,6 @@ Item { Layout.fillHeight: true } - - RowLayout { - Layout.bottomMargin: elisaTheme.layoutVerticalMargin - - CheckBox { - id: shuffleOption - - text: i18n("Shuffle") - } - - CheckBox { - id: repeatOption - - text: i18n("Repeat") - } - } } ListView { diff --git a/src/qml/MediaPlayerControl.qml b/src/qml/MediaPlayerControl.qml --- a/src/qml/MediaPlayerControl.qml +++ b/src/qml/MediaPlayerControl.qml @@ -23,6 +23,7 @@ import QtQuick.Controls 2.2 import org.kde.elisa 1.0 +import QtQuick.Controls 1.4 as Controls1 FocusScope { property double volume @@ -35,6 +36,9 @@ property bool skipForwardEnabled property bool skipBackwardEnabled + property bool shuffle + property bool repeat + signal play() signal pause() signal playPrevious() @@ -61,20 +65,20 @@ RowLayout { anchors.fill: parent - spacing: 0 + spacing: 5 RoundButton { focus: skipBackwardEnabled - Layout.preferredWidth: elisaTheme.smallControlButtonHeight - Layout.preferredHeight: elisaTheme.smallControlButtonHeight + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize Layout.alignment: Qt.AlignVCenter - Layout.maximumWidth: elisaTheme.smallControlButtonHeight - Layout.maximumHeight: elisaTheme.smallControlButtonHeight - Layout.minimumWidth: elisaTheme.smallControlButtonHeight - Layout.minimumHeight: elisaTheme.smallControlButtonHeight - Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize + Layout.rightMargin: LayoutMirroring.enabled ? elisaTheme.mediaPlayerHorizontalMargin : 0 + Layout.leftMargin: !LayoutMirroring.enabled ? elisaTheme.mediaPlayerHorizontalMargin : 0 enabled: skipBackwardEnabled hoverEnabled: true @@ -88,11 +92,11 @@ source: Qt.resolvedUrl(LayoutMirroring.enabled ? elisaTheme.skipForwardIcon : elisaTheme.skipBackwardIcon) - width: elisaTheme.smallControlButtonHeight - height: elisaTheme.smallControlButtonHeight + width: elisaTheme.smallControlButtonSize + height: elisaTheme.smallControlButtonSize - sourceSize.width: elisaTheme.smallControlButtonHeight - sourceSize.height: elisaTheme.smallControlButtonHeight + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize fillMode: Image.PreserveAspectFit @@ -105,7 +109,7 @@ border.color: (parent.hovered || parent.activeFocus) ? myPalette.highlight : "transparent" border.width: 1 - radius: elisaTheme.smallControlButtonHeight + radius: elisaTheme.smallControlButtonSize Behavior on border.color { ColorAnimation { @@ -118,13 +122,13 @@ RoundButton { focus: playEnabled - Layout.preferredWidth: elisaTheme.bigControlButtonHeight - Layout.preferredHeight: elisaTheme.bigControlButtonHeight + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize Layout.alignment: Qt.AlignVCenter - Layout.maximumWidth: elisaTheme.bigControlButtonHeight - Layout.maximumHeight: elisaTheme.bigControlButtonHeight - Layout.minimumWidth: elisaTheme.bigControlButtonHeight - Layout.minimumHeight: elisaTheme.bigControlButtonHeight + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize enabled: playEnabled hoverEnabled: true @@ -147,11 +151,11 @@ Qt.resolvedUrl(elisaTheme.playIcon) } - width: elisaTheme.bigControlButtonHeight - height: elisaTheme.bigControlButtonHeight + width: elisaTheme.smallControlButtonSize + height: elisaTheme.smallControlButtonSize - sourceSize.width: elisaTheme.bigControlButtonHeight - sourceSize.height: elisaTheme.bigControlButtonHeight + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize fillMode: Image.PreserveAspectFit mirror: LayoutMirroring.enabled @@ -164,7 +168,7 @@ border.color: (parent.hovered || parent.activeFocus) ? myPalette.highlight : "transparent" border.width: 1 - radius: elisaTheme.bigControlButtonHeight + radius: elisaTheme.smallControlButtonSize Behavior on border.color { ColorAnimation { @@ -177,15 +181,13 @@ RoundButton { focus: skipForwardEnabled - Layout.preferredWidth: elisaTheme.smallControlButtonHeight - Layout.preferredHeight: elisaTheme.smallControlButtonHeight + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize Layout.alignment: Qt.AlignVCenter - Layout.maximumWidth: elisaTheme.smallControlButtonHeight - Layout.maximumHeight: elisaTheme.smallControlButtonHeight - Layout.minimumWidth: elisaTheme.smallControlButtonHeight - Layout.minimumHeight: elisaTheme.smallControlButtonHeight - Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.smallControlButtonHeight : 0 - Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.smallControlButtonHeight : 0 + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize enabled: skipForwardEnabled hoverEnabled: true @@ -199,11 +201,11 @@ source: Qt.resolvedUrl(LayoutMirroring.enabled ? elisaTheme.skipBackwardIcon : elisaTheme.skipForwardIcon) - width: elisaTheme.smallControlButtonHeight - height: elisaTheme.smallControlButtonHeight + width: elisaTheme.smallControlButtonSize + height: elisaTheme.smallControlButtonSize - sourceSize.width: elisaTheme.smallControlButtonHeight - sourceSize.height: elisaTheme.smallControlButtonHeight + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize fillMode: Image.PreserveAspectFit @@ -216,7 +218,7 @@ border.color: (parent.hovered || parent.activeFocus) ? myPalette.highlight : "transparent" border.width: 1 - radius: elisaTheme.smallControlButtonHeight + radius: elisaTheme.smallControlButtonSize Behavior on border.color { ColorAnimation { @@ -240,8 +242,8 @@ Layout.alignment: Qt.AlignVCenter Layout.fillHeight: true - Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 + Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : elisaTheme.layoutHorizontalMargin * 2 + Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : elisaTheme.layoutHorizontalMargin * 2 Layout.preferredWidth: durationTextMetrics.width+5 // be in the safe side verticalAlignment: Text.AlignVCenter @@ -295,11 +297,11 @@ width: musicProgress.availableWidth height: implicitHeight radius: 3 - color: myPalette.mid + color: myPalette.dark Rectangle { x: (LayoutMirroring.enabled ? musicProgress.visualPosition * parent.width : 0) - width: (LayoutMirroring.enabled ? parent.width - musicProgress.visualPosition * parent.width : musicProgress.visualPosition * parent.width) + width: LayoutMirroring.enabled ? parent.width - musicProgress.visualPosition * parent.width: musicProgress.handle.x + radius height: parent.height color: myPalette.text radius: 3 @@ -326,8 +328,8 @@ Layout.alignment: Qt.AlignVCenter Layout.fillHeight: true - Layout.rightMargin: !LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin * 10) : 0 - Layout.leftMargin: LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin * 10) : 0 + Layout.rightMargin: !LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin * 2) : 0 + Layout.leftMargin: LayoutMirroring.enabled ? (elisaTheme.layoutHorizontalMargin * 2) : 0 Layout.preferredWidth: durationTextMetrics.width verticalAlignment: Text.AlignVCenter @@ -347,18 +349,18 @@ else Qt.resolvedUrl(elisaTheme.playerVolumeIcon) - Layout.preferredWidth: elisaTheme.smallControlButtonHeight - Layout.preferredHeight: elisaTheme.smallControlButtonHeight + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize Layout.alignment: Qt.AlignVCenter - Layout.maximumWidth: elisaTheme.smallControlButtonHeight - Layout.maximumHeight: elisaTheme.smallControlButtonHeight - Layout.minimumWidth: elisaTheme.smallControlButtonHeight - Layout.minimumHeight: elisaTheme.smallControlButtonHeight + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - sourceSize.width: elisaTheme.smallControlButtonHeight - sourceSize.height: elisaTheme.smallControlButtonHeight + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize fillMode: Image.PreserveAspectFit @@ -369,15 +371,13 @@ RoundButton { focus: true - Layout.preferredWidth: elisaTheme.smallControlButtonHeight - Layout.preferredHeight: elisaTheme.smallControlButtonHeight + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize Layout.alignment: Qt.AlignVCenter - Layout.maximumWidth: elisaTheme.smallControlButtonHeight - Layout.maximumHeight: elisaTheme.smallControlButtonHeight - Layout.minimumWidth: elisaTheme.smallControlButtonHeight - Layout.minimumHeight: elisaTheme.smallControlButtonHeight - Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize hoverEnabled: true @@ -391,11 +391,11 @@ else Qt.resolvedUrl(elisaTheme.playerVolumeIcon) - width: elisaTheme.smallControlButtonHeight - height: elisaTheme.smallControlButtonHeight + width: elisaTheme.smallControlButtonSize + height: elisaTheme.smallControlButtonSize - sourceSize.width: elisaTheme.smallControlButtonHeight - sourceSize.height: elisaTheme.smallControlButtonHeight + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize fillMode: Image.PreserveAspectFit } @@ -406,7 +406,7 @@ border.color: (parent.hovered || parent.activeFocus) ? myPalette.highlight : "transparent" border.width: 1 - radius: elisaTheme.smallControlButtonHeight + radius: elisaTheme.smallControlButtonSize Behavior on border.color { ColorAnimation { @@ -431,8 +431,8 @@ Layout.preferredWidth: elisaTheme.volumeSliderWidth Layout.maximumWidth: elisaTheme.volumeSliderWidth Layout.minimumWidth: elisaTheme.volumeSliderWidth - Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 - Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin : 0 + Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin * 3 : 0 + Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.layoutHorizontalMargin * 3 : 0 width: elisaTheme.volumeSliderWidth @@ -444,7 +444,7 @@ width: volumeSlider.availableWidth height: implicitHeight radius: 3 - color: myPalette.mid + color: myPalette.dark Rectangle { x: (LayoutMirroring.enabled ? volumeSlider.visualPosition * parent.width : 0) @@ -465,6 +465,91 @@ border.color: volumeSlider.pressed ? myPalette.highlight : myPalette.dark } } + + RoundButton { + focus: true + id: shuffleButton + + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize + Layout.alignment: Qt.AlignCenter + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize + + hoverEnabled: true + onClicked: musicWidget.shuffle = !musicWidget.shuffle + + contentItem: Image { + anchors.fill: parent + + source: musicWidget.shuffle ? Qt.resolvedUrl(elisaTheme.shuffleIcon) : Qt.resolvedUrl(elisaTheme.noShuffleIcon) + + width: elisaTheme.smallControlButtonSize + height: elisaTheme.smallControlButtonSize + + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize + + fillMode: Image.PreserveAspectFit + } + + background: Rectangle { + color: "transparent" + } + } + + + RoundButton { + focus: true + id: repeatButton + + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize + Layout.alignment: Qt.AlignCenter + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize + + hoverEnabled: true + onClicked: musicWidget.repeat = !musicWidget.repeat + + contentItem: Image { + anchors.fill: parent + + source: musicWidget.repeat ? Qt.resolvedUrl(elisaTheme.repeatIcon) : Qt.resolvedUrl(elisaTheme.noRepeatIcon) + + width: elisaTheme.smallControlButtonSize + height: elisaTheme.smallControlButtonSize + + sourceSize.width: elisaTheme.smallControlButtonSize + sourceSize.height: elisaTheme.smallControlButtonSize + + fillMode: Image.PreserveAspectFit + } + + background: Rectangle { + color: "transparent" + } + + } + + Controls1.ToolButton { + id: menuButton + action: applicationMenuAction + + Layout.preferredWidth: elisaTheme.smallControlButtonSize + Layout.preferredHeight: elisaTheme.smallControlButtonSize + Layout.alignment: Qt.AlignVCenter + Layout.maximumWidth: elisaTheme.smallControlButtonSize + Layout.maximumHeight: elisaTheme.smallControlButtonSize + Layout.minimumWidth: elisaTheme.smallControlButtonSize + Layout.minimumHeight: elisaTheme.smallControlButtonSize + Layout.rightMargin: !LayoutMirroring.enabled ? elisaTheme.mediaPlayerHorizontalMargin : elisaTheme.mediaPlayerHorizontalMargin * 1.5 + Layout.leftMargin: LayoutMirroring.enabled ? elisaTheme.mediaPlayerHorizontalMargin : elisaTheme.mediaPlayerHorizontalMargin * 1.5 + } } onPositionChanged: diff --git a/src/qml/Theme.qml b/src/qml/Theme.qml --- a/src/qml/Theme.qml +++ b/src/qml/Theme.qml @@ -44,6 +44,10 @@ property string ratingUnratedIcon: 'image://icon/rating-unrated' property string errorIcon: 'image://icon/error' property string playIndicatorIcon: 'image://icon/audio-volume-high' + property string repeatIcon: 'image://icon/media-repeat-all' + property string shuffleIcon: 'image://icon/media-playlist-shuffle' + property string noRepeatIcon: 'image://icon/media-repeat-none' + property string noShuffleIcon: 'image://icon/media-playlist-normal' property int layoutHorizontalMargin: dp(8) property int layoutVerticalMargin: dp(6) @@ -65,11 +69,11 @@ property int ratingStarSize: dp(15) - property int mediaPlayerControlHeight: dp(48) + property int mediaPlayerControlHeight: dp(42) + property int mediaPlayerHorizontalMargin: dp(10) property real mediaPlayerControlOpacity: 0.6 - property int smallControlButtonHeight: dp(32) - property int bigControlButtonHeight: dp(44) - property int volumeSliderWidth: dp(140) + property int smallControlButtonSize: dp(22) + property int volumeSliderWidth: dp(100) property int dragDropPlaceholderHeight: dp(28) diff --git a/src/qml/TrackImportNotification.qml b/src/qml/TrackImportNotification.qml --- a/src/qml/TrackImportNotification.qml +++ b/src/qml/TrackImportNotification.qml @@ -31,6 +31,7 @@ color: myPalette.highlight width: elisaTheme.gridDelegateWidth * 1.5 + height: elisaTheme.smallControlButtonSize * 1.5 visible: opacity > 0 opacity: (indexingRunning ? 1 : 0)