From 04e4798de567c64a08e962f541b5dd35d60fedd3 Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Tue, 17 Apr 2018 15:02:13 +0300 Subject: Update Mediaplayer demo to new UI theme Task-number: QTBUG-62791 Change-Id: Id7cb520669fc696cec65da591414b045fe45754a Reviewed-by: Teemu Holappa --- basicsuite/mediaplayer/Content.qml | 0 basicsuite/mediaplayer/ContentVideo.qml | 0 basicsuite/mediaplayer/ControlBar.qml | 128 ++++++------------ basicsuite/mediaplayer/EffectSelectionPanel.qml | 29 ++-- basicsuite/mediaplayer/FileBrowser.qml | 19 +-- basicsuite/mediaplayer/ImageButton.qml | 15 ++- basicsuite/mediaplayer/MetadataView.qml | 24 +++- basicsuite/mediaplayer/ParameterPanel.qml | 5 +- basicsuite/mediaplayer/PlaybackControl.qml | 70 +++++----- basicsuite/mediaplayer/PlayerSlider.qml | 137 +++++++++++++++++++ basicsuite/mediaplayer/SeekControl.qml | 37 +----- basicsuite/mediaplayer/Slider.qml | 147 --------------------- basicsuite/mediaplayer/UrlBar.qml | 70 ++++------ basicsuite/mediaplayer/VolumeControl.qml | 126 +++++++++++++----- basicsuite/mediaplayer/images/FullscreenButton.png | Bin basicsuite/mediaplayer/images/PlaybackSlider.png | Bin basicsuite/mediaplayer/images/SliderHandle.png | Bin basicsuite/mediaplayer/images/SliderProgress.png | Bin basicsuite/mediaplayer/images/VolumeDown.png | Bin basicsuite/mediaplayer/images/VolumeUp.png | Bin basicsuite/mediaplayer/images/back_icon.svg | 1 + basicsuite/mediaplayer/images/bluetooth_icon.svg | 1 + basicsuite/mediaplayer/images/close_icon.svg | 1 + .../mediaplayer/images/header_toggle_icon.svg | 1 + basicsuite/mediaplayer/images/info_icon.svg | 1 + basicsuite/mediaplayer/images/language_icon.svg | 1 + basicsuite/mediaplayer/images/mute_icon.svg | 1 + basicsuite/mediaplayer/images/pause_icon.svg | 1 + basicsuite/mediaplayer/images/play_icon.svg | 1 + basicsuite/mediaplayer/images/power_icon.svg | 1 + basicsuite/mediaplayer/images/qt-logo.png | Bin basicsuite/mediaplayer/images/settings_icon.svg | 1 + .../images/settingsmenu_launcher_icon.svg | 1 + basicsuite/mediaplayer/images/stop_icon.svg | 1 + basicsuite/mediaplayer/images/titlebar.sci | 0 basicsuite/mediaplayer/images/volume_icon.svg | 1 + basicsuite/mediaplayer/main.qml | 44 ++---- basicsuite/mediaplayer/mediaplayer.pro | 1 - 38 files changed, 428 insertions(+), 438 deletions(-) mode change 100755 => 100644 basicsuite/mediaplayer/Content.qml mode change 100755 => 100644 basicsuite/mediaplayer/ContentVideo.qml mode change 100755 => 100644 basicsuite/mediaplayer/ControlBar.qml mode change 100755 => 100644 basicsuite/mediaplayer/EffectSelectionPanel.qml mode change 100755 => 100644 basicsuite/mediaplayer/ImageButton.qml mode change 100755 => 100644 basicsuite/mediaplayer/PlaybackControl.qml create mode 100644 basicsuite/mediaplayer/PlayerSlider.qml mode change 100755 => 100644 basicsuite/mediaplayer/SeekControl.qml delete mode 100644 basicsuite/mediaplayer/Slider.qml mode change 100755 => 100644 basicsuite/mediaplayer/VolumeControl.qml mode change 100755 => 100644 basicsuite/mediaplayer/images/FullscreenButton.png mode change 100755 => 100644 basicsuite/mediaplayer/images/PlaybackSlider.png mode change 100755 => 100644 basicsuite/mediaplayer/images/SliderHandle.png mode change 100755 => 100644 basicsuite/mediaplayer/images/SliderProgress.png mode change 100755 => 100644 basicsuite/mediaplayer/images/VolumeDown.png mode change 100755 => 100644 basicsuite/mediaplayer/images/VolumeUp.png create mode 100644 basicsuite/mediaplayer/images/back_icon.svg create mode 100644 basicsuite/mediaplayer/images/bluetooth_icon.svg create mode 100644 basicsuite/mediaplayer/images/close_icon.svg create mode 100644 basicsuite/mediaplayer/images/header_toggle_icon.svg create mode 100644 basicsuite/mediaplayer/images/info_icon.svg create mode 100644 basicsuite/mediaplayer/images/language_icon.svg create mode 100644 basicsuite/mediaplayer/images/mute_icon.svg create mode 100644 basicsuite/mediaplayer/images/pause_icon.svg create mode 100644 basicsuite/mediaplayer/images/play_icon.svg create mode 100644 basicsuite/mediaplayer/images/power_icon.svg mode change 100755 => 100644 basicsuite/mediaplayer/images/qt-logo.png create mode 100644 basicsuite/mediaplayer/images/settings_icon.svg create mode 100644 basicsuite/mediaplayer/images/settingsmenu_launcher_icon.svg create mode 100644 basicsuite/mediaplayer/images/stop_icon.svg mode change 100755 => 100644 basicsuite/mediaplayer/images/titlebar.sci create mode 100644 basicsuite/mediaplayer/images/volume_icon.svg mode change 100755 => 100644 basicsuite/mediaplayer/main.qml (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/Content.qml b/basicsuite/mediaplayer/Content.qml old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/ContentVideo.qml b/basicsuite/mediaplayer/ContentVideo.qml old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/ControlBar.qml b/basicsuite/mediaplayer/ControlBar.qml old mode 100755 new mode 100644 index 05d253e..e65a3a3 --- a/basicsuite/mediaplayer/ControlBar.qml +++ b/basicsuite/mediaplayer/ControlBar.qml @@ -53,8 +53,8 @@ import QtMultimedia 5.0 Rectangle { id: controlBar - height: 150 - color: "#88333333" + height: parent.height * 0.225 + color: defaultBackground property MediaPlayer mediaPlayer: null property bool isMouseAbove: false @@ -73,13 +73,13 @@ Rectangle { volumeControl.volume = mediaPlayer.volume; } -// MouseArea { -// anchors.fill: controlBar -// hoverEnabled: true + MouseArea { + anchors.fill: controlBar + hoverEnabled: true -// onEntered: controlBar.isMouseAbove = true; -// onExited: controlBar.isMouseAbove = false; -// } + onEntered: controlBar.isMouseAbove = true; + onExited: controlBar.isMouseAbove = false; + } function statusString(stat) { @@ -103,48 +103,12 @@ Rectangle { return "UnknownStatus"; } -// Text { -// id: statusText -// anchors.left: parent.left -// anchors.bottom: parent.top -// anchors.bottomMargin: 12 -// font.pixelSize: 18 -// color: "white" -// text: "Status: " + statusString(mediaPlayer.status) -// } - -// Text { -// anchors.verticalCenter: statusText.verticalCenter -// anchors.left: statusText.right -// anchors.leftMargin: 16 -// font.pixelSize: 18 -// color: "white" -// text: Math.round(mediaPlayer.bufferProgress * 100.0) + "%" -// } - - VolumeControl { - id: volumeControl - anchors.verticalCenter: playbackControl.verticalCenter - anchors.left: controlBar.left - anchors.leftMargin: 15 - onVolumeChanged: mediaPlayer.volume = volume - - Component.onCompleted: { - volumeControl.volume = 0.5; - } - - Connections { - target: mediaPlayer - onVolumeChanged: volumeControl.volume = mediaPlayer.volume - } - } - //Playback Controls PlaybackControl { id: playbackControl - anchors.horizontalCenter: controlBar.horizontalCenter - anchors.bottom: seekControl.top - anchors.bottomMargin: 20 + anchors.left: controlBar.left + anchors.top: controlBar.top + anchors.bottom: controlBar.bottom onPlayButtonPressed: { if (isPlaying) { @@ -171,12 +135,35 @@ Rectangle { onStopButtonPressed: mediaPlayer.stop(); } + //Seek controls + SeekControl { + id: seekControl + anchors.bottom: controlBar.bottom + anchors.bottomMargin: controlBar.height * 0.1 + anchors.right: volumeControl.left + anchors.left: playbackControl.right + anchors.rightMargin: 15 + anchors.leftMargin: 15 + enabled: playbackControl.isPlaybackEnabled + + duration: mediaPlayer.duration + + onSeekValueChanged: { + mediaPlayer.seek(newPosition); + position = mediaPlayer.position; + } + + Component.onCompleted: { + seekable = mediaPlayer.seekable; + } + } + //Toolbar Controls Row { id: toolbarMenuButtons - anchors.right: controlBar.right + anchors.right: volumeControl.left anchors.rightMargin: 15 - anchors.verticalCenter: playbackControl.verticalCenter + anchors.bottom: seekControl.top spacing: 22 ImageButton { @@ -204,41 +191,15 @@ Rectangle { } } -// ImageButton { -// id: fullscreenButton -// imageSource: "images/FullscreenButton.png" -// onClicked: { -// //Toggle fullscreen -// toggleFullScreen(); -// } -// checkable: true -// checked: applicationWindow.isFullScreen -// anchors.right: controlBar.right -// anchors.top: controlBar.top -// anchors.rightMargin: 15 -// anchors.topMargin: 15 -// } - - //Seek controls - SeekControl { - id: seekControl - anchors.bottom: controlBar.bottom - anchors.bottomMargin: 10 - anchors.right: controlBar.right - anchors.left: controlBar.left - anchors.rightMargin: 15 - anchors.leftMargin: 15 - enabled: playbackControl.isPlaybackEnabled - - duration: mediaPlayer.duration - - onSeekValueChanged: { - mediaPlayer.seek(newPosition); - position = mediaPlayer.position; - } + VolumeControl { + id: volumeControl + anchors.bottom: parent.bottom + anchors.right: parent.right + onVolumeChanged: mediaPlayer.volume = volume - Component.onCompleted: { - seekable = mediaPlayer.seekable; + Connections { + target: mediaPlayer + onVolumeChanged: volumeControl.volume = mediaPlayer.volume } } @@ -264,7 +225,6 @@ Rectangle { } onSeekableChanged: { - // console.log("seekableChanged: " + mediaPlayer.seekable); seekControl.seekable = mediaPlayer.seekable; } } diff --git a/basicsuite/mediaplayer/EffectSelectionPanel.qml b/basicsuite/mediaplayer/EffectSelectionPanel.qml old mode 100755 new mode 100644 index 4f29f50..68a9cac --- a/basicsuite/mediaplayer/EffectSelectionPanel.qml +++ b/basicsuite/mediaplayer/EffectSelectionPanel.qml @@ -51,7 +51,7 @@ import QtQuick 2.0 Rectangle { id: root - color: "#BB333333" + color: defaultBackground height: 78 property int itemHeight: 25 property string effectSource: "" @@ -76,14 +76,14 @@ Rectangle { ListElement { name: "Glow"; source: "Effects/EffectGlow.qml" } ListElement { name: "Isolate"; source: "Effects/EffectIsolate.qml" } //ListElement { name: "Magnify"; source: "Effects/EffectMagnify.qml" } -// ListElement { name: "Page curl"; source: "Effects/EffectPageCurl.qml" } + // ListElement { name: "Page curl"; source: "Effects/EffectPageCurl.qml" } ListElement { name: "Pixelate"; source: "Effects/EffectPixelate.qml" } ListElement { name: "Posterize"; source: "Effects/EffectPosterize.qml" } -// ListElement { name: "Ripple"; source: "Effects/EffectRipple.qml" } + // ListElement { name: "Ripple"; source: "Effects/EffectRipple.qml" } ListElement { name: "Sepia"; source: "Effects/EffectSepia.qml" } ListElement { name: "Sharpen"; source: "Effects/EffectSharpen.qml" } ListElement { name: "Shockwave"; source: "Effects/EffectShockwave.qml" } -// ListElement { name: "Tilt shift"; source: "Effects/EffectTiltShift.qml" } + // ListElement { name: "Tilt shift"; source: "Effects/EffectTiltShift.qml" } ListElement { name: "Toon"; source: "Effects/EffectToon.qml" } ListElement { name: "Warhol"; source: "Effects/EffectWarhol.qml" } ListElement { name: "Wobble"; source: "Effects/EffectWobble.qml" } @@ -104,6 +104,7 @@ Rectangle { height: 0.8 * itemHeight text: name color: "white" + font.family: appFont } states: [ @@ -155,16 +156,18 @@ Rectangle { delegate: Item { height: 40 width: parent.width - Rectangle { + property bool isSelected: list.currentIndex == index + Text { + color: parent.isSelected ? defaultGreen : "white" + text: name + anchors.centerIn: parent + font.pixelSize: 20 + font.family: appFont + font.styleName: parent.isSelected ? "Bold" : "Regular" + } + MouseArea { anchors.fill: parent - border.color: index == list.currentIndex ? "#44ffffff" : "transparent" - color: index == list.currentIndex ? "#22ffffff" : "transparent" - radius: 3 - Text { color: "white" ; text: name ; anchors.centerIn: parent; font.pixelSize: 20 } - MouseArea { - anchors.fill: parent - onClicked: list.currentIndex = index - } + onClicked: list.currentIndex = index } } } diff --git a/basicsuite/mediaplayer/FileBrowser.qml b/basicsuite/mediaplayer/FileBrowser.qml index 5ffe130..8bae836 100644 --- a/basicsuite/mediaplayer/FileBrowser.qml +++ b/basicsuite/mediaplayer/FileBrowser.qml @@ -50,6 +50,7 @@ import QtQuick 2.0 import Qt.labs.folderlistmodel 2.0 import QtQuick.Controls 1.4 +import QtDeviceUtilities.QtButtonImageProvider 1.0 Item { id: fileBrowser @@ -77,7 +78,7 @@ Item { Rectangle { id: root - color: "white" + color: defaultBackground property alias folder: folders.folder FolderListModel { @@ -110,7 +111,8 @@ Item { wrapMode: Text.WrapAtWordBoundaryOrAnywhere text: fileName font.pixelSize: parent.height * .1 - color: view.currentIndex === index ? "#80c342" : "#46484a" + font.family: appFont + color: view.currentIndex === index ? defaultGreen : "white" elide: Text.ElideRight } @@ -182,10 +184,10 @@ Item { Rectangle { width: parent.width; height: 70 - color: "#f6f6f6" + color: defaultBackground id: titleBar - Button { + QtButton { id: backButton text: qsTr("Back") anchors.left: parent.left @@ -203,17 +205,16 @@ Item { anchors.bottom: parent.bottom text: String(folders.folder).replace("file://", "") - color: "#46484a" + color: "white" elide: Text.ElideLeft verticalAlignment: Text.AlignVCenter font.pixelSize: backButton.height * .8 + font.family: appFont } - Button { + QtButton { id: cancelButton text: qsTr("Cancel") - checkable: true - checked: true anchors.right: parent.right anchors.rightMargin: parent.width * .05 anchors.verticalCenter: parent.verticalCenter @@ -224,7 +225,7 @@ Item { width: parent.width anchors.bottom: parent.bottom height: 2 - color: "#e4e4e4" + color: defaultGrey } } diff --git a/basicsuite/mediaplayer/ImageButton.qml b/basicsuite/mediaplayer/ImageButton.qml old mode 100755 new mode 100644 index 31bd315..4e26fc1 --- a/basicsuite/mediaplayer/ImageButton.qml +++ b/basicsuite/mediaplayer/ImageButton.qml @@ -49,6 +49,7 @@ ****************************************************************************/ import QtQuick 2.0 +import QtGraphicalEffects 1.0 Item { id: root @@ -75,13 +76,13 @@ Item { smooth: true } -// ColorOverlay { -// id: glowEffect -// anchors.fill: image -// source: image -// color: pressed ? "#22000000" : checked ? "orange" : "white" -// visible: checked || hover || pressed -// } + ColorOverlay { + id: glowEffect + anchors.fill: image + source: image + color: pressed ? "#22000000" : checked ? defaultGreen : "white" + visible: checked || hover || pressed + } MouseArea { id: mouseArea diff --git a/basicsuite/mediaplayer/MetadataView.qml b/basicsuite/mediaplayer/MetadataView.qml index e85df5e..79883d2 100644 --- a/basicsuite/mediaplayer/MetadataView.qml +++ b/basicsuite/mediaplayer/MetadataView.qml @@ -48,6 +48,7 @@ ** ****************************************************************************/ import QtQuick 2.0 +import QtMultimedia 5.0 Rectangle { id: root @@ -62,10 +63,12 @@ Rectangle { Rectangle { height: column.height + 30 width: 500 - color: "#BB222222" + color: defaultBackground + opacity: 0.9 anchors.centerIn: parent anchors.verticalCenterOffset: -50 - + border.color: defaultGrey + border.width: 2 Column { id: column @@ -80,6 +83,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.mediaType !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -88,6 +92,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.title !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -96,6 +101,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.leadPerformer !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -104,6 +110,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.contributingArtist !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -112,6 +119,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.albumTitle !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -120,6 +128,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.albumArtist !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -128,6 +137,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.author !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -136,6 +146,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.composer !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -144,6 +155,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.writer !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -152,6 +164,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.genre !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -160,6 +173,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.trackNumber !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -168,6 +182,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.year !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -176,6 +191,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.duration !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -184,6 +200,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.resolution !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -192,6 +209,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.audioBitRate !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -200,6 +218,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.videoBitRate !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } @@ -208,6 +227,7 @@ Rectangle { visible: mediaPlayer && mediaPlayer.metaData.date !== undefined color: "white" font.pixelSize: 24 + font.family: appFont width: parent.width wrapMode: Text.WordWrap } diff --git a/basicsuite/mediaplayer/ParameterPanel.qml b/basicsuite/mediaplayer/ParameterPanel.qml index bc6a73e..5b8e991 100644 --- a/basicsuite/mediaplayer/ParameterPanel.qml +++ b/basicsuite/mediaplayer/ParameterPanel.qml @@ -52,7 +52,7 @@ import QtQuick 2.0 Rectangle { id: root height: view.model.count * sliderHeight - color: "#BB333333" + color: defaultBackground property color lineColor: "black" property real spacing: 10 property real sliderHeight: 50 @@ -89,10 +89,11 @@ Rectangle { verticalAlignment: Text.AlignVCenter font.pixelSize: 20 font.capitalization: Font.Capitalize + font.family: appFont width: 90 } - Slider { + PlayerSlider { anchors { verticalCenter: text.verticalCenter verticalCenterOffset: 3 diff --git a/basicsuite/mediaplayer/PlaybackControl.qml b/basicsuite/mediaplayer/PlaybackControl.qml old mode 100755 new mode 100644 index 66c1c92..5fff05f --- a/basicsuite/mediaplayer/PlaybackControl.qml +++ b/basicsuite/mediaplayer/PlaybackControl.qml @@ -49,11 +49,13 @@ ****************************************************************************/ import QtQuick 2.0 +import QtDeviceUtilities.QtButtonImageProvider 1.0 Row { + anchors.leftMargin: parent.width * 0.02 id: root - spacing: 26 - height: playButton.height + spacing: parent.width * 0.02 + height: parent.height property bool isPlaybackEnabled: false property bool isPlaying: false @@ -64,46 +66,42 @@ Row { signal stopButtonPressed() //Playback Controls - ImageButton { - id: rateReverseButton - enabled: isPlaybackEnabled - imageSource: "images/RateButtonReverse.png" - anchors.verticalCenter: root.verticalCenter - onClicked: { - reverseButtonPressed(); + QtButton{ + id: playPauseButton + width: controlBar.width * 0.06 + height: width + anchors.bottom: parent.bottom + anchors.bottomMargin: root.spacing + fillColor: viewSettings.buttonGreenColor + Image{ + anchors.centerIn: parent + width: parent.width * 0.5 + height: width + source: !isPlaying ? "images/play_icon.svg" : "images/pause_icon.svg" + sourceSize.width: parent.width + sourceSize.height: parent.height } - } - ImageButton { - id: playButton - enabled: isPlaybackEnabled - imageSource: !isPlaying ? "images/PlayButton.png" : "images/PauseButton.png" - anchors.verticalCenter: root.verticalCenter -// anchors.right: rateForwardButton.left -// anchors.rightMargin: 10 onClicked: { playButtonPressed(); } } -// Rectangle{ -// enabled: isPlaybackEnabled -// color: "white" -// opacity: enabled ? 1 : 0.3 -// width: playButton.width -// height: width -// anchors.verticalCenter: root.verticalCenter -// MouseArea { -// anchors.fill: parent -// onClicked: stopButtonPressed(); -// } -// } - - ImageButton { - id: rateForwardButton - enabled: isPlaybackEnabled - imageSource: "images/RateButtonForward.png" - anchors.verticalCenter: root.verticalCenter + QtButton{ + id: stopButton + width: controlBar.width * 0.06 + height: width + anchors.bottom: parent.bottom + anchors.bottomMargin: root.spacing + fillColor: viewSettings.buttonGreenColor + Image{ + anchors.centerIn: parent + width: parent.width * 0.5 + height: width + source: "images/stop_icon.svg" + sourceSize.width: parent.width + sourceSize.height: parent.height + } onClicked: { - forwardButtonPressed(); + stopButtonPressed(); } } } diff --git a/basicsuite/mediaplayer/PlayerSlider.qml b/basicsuite/mediaplayer/PlayerSlider.qml new file mode 100644 index 0000000..d569866 --- /dev/null +++ b/basicsuite/mediaplayer/PlayerSlider.qml @@ -0,0 +1,137 @@ +/**************************************************************************** +** +** Copyright (C) 2016 The Qt Company Ltd. +** Contact: https://www.qt.io/licensing/ +** +** This file is part of the examples of Qt for Device Creation. +** +** $QT_BEGIN_LICENSE:BSD$ +** Commercial License Usage +** Licensees holding valid commercial Qt licenses may use this file in +** accordance with the commercial license agreement provided with the +** Software or, alternatively, in accordance with the terms contained in +** a written agreement between you and The Qt Company. For licensing terms +** and conditions see https://www.qt.io/terms-conditions. For further +** information use the contact form at https://www.qt.io/contact-us. +** +** BSD License Usage +** Alternatively, you may use this file under the terms of the BSD license +** as follows: +** +** "Redistribution and use in source and binary forms, with or without +** modification, are permitted provided that the following conditions are +** met: +** * Redistributions of source code must retain the above copyright +** notice, this list of conditions and the following disclaimer. +** * Redistributions in binary form must reproduce the above copyright +** notice, this list of conditions and the following disclaimer in +** the documentation and/or other materials provided with the +** distribution. +** * Neither the name of The Qt Company Ltd nor the names of its +** contributors may be used to endorse or promote products derived +** from this software without specific prior written permission. +** +** +** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS +** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT +** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR +** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT +** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, +** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT +** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, +** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY +** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT +** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." +** +** $QT_END_LICENSE$ +** +****************************************************************************/ +import QtQuick 2.0 + +Item { + id: slider + height: handle.height + // value is read/write. + property real value: 0 + property real maximum: 1 + property real minimum: 0 + property int xMax: width - handle.width + onXMaxChanged: updatePos() + onMinimumChanged: updatePos() + onValueChanged: if (!pressed) updatePos() + property bool mutable: true + property alias pressed : backgroundMouse.pressed + + signal valueChangedByHandle(int newValue) + + function updatePos() { + if (maximum > minimum) { + var pos = 0 + (value - minimum) * slider.xMax / (maximum - minimum); + pos = Math.min(pos, width - handle.width - 0); + pos = Math.max(pos, 0); + handle.x = pos; + } else { + handle.x = 0; + } + } + + Rectangle { + id: background + width: slider.width + anchors.verticalCenter: slider.verticalCenter + height: 5 + color: "#9d9faa" + radius: 2 + + MouseArea { + id: backgroundMouse + anchors.fill: parent + anchors.topMargin: -24 + anchors.bottomMargin: -24 + enabled: slider.mutable + drag.target: handle + drag.axis: Drag.XAxis + drag.minimumX: 0 + drag.maximumX: slider.xMax + onPressedChanged: { + value = Math.max(minimum, Math.min(maximum, (maximum - minimum) * (mouseX - handle.width/2) / slider.xMax + minimum)); + valueChangedByHandle(value); + updatePos(); + } + onPositionChanged: { + value = Math.max(minimum, Math.min(maximum, (maximum - minimum) * (mouseX - handle.width/2) / slider.xMax + minimum)); + valueChangedByHandle(value); + } + onWheel: { + value = Math.max(minimum, Math.min(maximum, value + (wheel.angleDelta.y > 0 ? 1 : -1) * (10 / slider.xMax) * (slider.maximum - slider.minimum))); + valueChangedByHandle(value); + updatePos(); + } + } + } + + Rectangle { + id: progress + height: 5 + anchors.verticalCenter: background.verticalCenter + anchors.left: background.left + anchors.right: handle.right + anchors.rightMargin: handle.width / 2 + visible: slider.enabled + color: "white" + radius: 2 + } + + Rectangle { + id: handle + width: 40 + height: width + radius: width / 2 + color: "#41cd52" + antialiasing: true + anchors.centerIn: handle + visible: true + } +} + diff --git a/basicsuite/mediaplayer/SeekControl.qml b/basicsuite/mediaplayer/SeekControl.qml old mode 100755 new mode 100644 index a7ca93f..16987f7 --- a/basicsuite/mediaplayer/SeekControl.qml +++ b/basicsuite/mediaplayer/SeekControl.qml @@ -48,11 +48,11 @@ ** ****************************************************************************/ import QtQuick 2.0 +import QtQuick.Controls 2.2 Item { id: root - height: seekSlider.height - + height: parent.height * 0.5 property int position: 0 property int duration: 0 property bool seekable: false @@ -62,29 +62,15 @@ Item { signal seekValueChanged(int newPosition) onPositionChanged: { - elapsedText.text = formatTime(position); seekSlider.value = position; } - onDurationChanged: { - remainingText.text = formatTime(duration); - } - - Text { - id: elapsedText - anchors.verticalCenter: seekSlider.verticalCenter - anchors.left: root.left - text: "00:00" - font.pixelSize: 20 - color: "#cccccc" - } - - Slider { + PlayerSlider { id: seekSlider - anchors.leftMargin: 30 - anchors.rightMargin: 30 - anchors.left: elapsedText.right - anchors.right: remainingText.left + anchors.leftMargin: parent.width * 0.02 + anchors.rightMargin: parent.width * 0.02 + anchors.left: parent.left + anchors.right: parent.right anchors.verticalCenter: root.verticalCenter mutable: root.seekable enabled: root.enabled @@ -98,15 +84,6 @@ Item { } } - Text { - id: remainingText - anchors.verticalCenter: seekSlider.verticalCenter - anchors.right: root.right - text: "00:00" - font.pixelSize: 20 - color: "#cccccc" - } - function formatTime(time) { time = time / 1000 var hours = Math.floor(time / 3600); diff --git a/basicsuite/mediaplayer/Slider.qml b/basicsuite/mediaplayer/Slider.qml deleted file mode 100644 index 0cacbc7..0000000 --- a/basicsuite/mediaplayer/Slider.qml +++ /dev/null @@ -1,147 +0,0 @@ -/**************************************************************************** -** -** Copyright (C) 2016 The Qt Company Ltd. -** Contact: https://www.qt.io/licensing/ -** -** This file is part of the examples of Qt for Device Creation. -** -** $QT_BEGIN_LICENSE:BSD$ -** Commercial License Usage -** Licensees holding valid commercial Qt licenses may use this file in -** accordance with the commercial license agreement provided with the -** Software or, alternatively, in accordance with the terms contained in -** a written agreement between you and The Qt Company. For licensing terms -** and conditions see https://www.qt.io/terms-conditions. For further -** information use the contact form at https://www.qt.io/contact-us. -** -** BSD License Usage -** Alternatively, you may use this file under the terms of the BSD license -** as follows: -** -** "Redistribution and use in source and binary forms, with or without -** modification, are permitted provided that the following conditions are -** met: -** * Redistributions of source code must retain the above copyright -** notice, this list of conditions and the following disclaimer. -** * Redistributions in binary form must reproduce the above copyright -** notice, this list of conditions and the following disclaimer in -** the documentation and/or other materials provided with the -** distribution. -** * Neither the name of The Qt Company Ltd nor the names of its -** contributors may be used to endorse or promote products derived -** from this software without specific prior written permission. -** -** -** THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS -** "AS IS" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT -** LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR -** A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT -** OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, -** SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT -** LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, -** DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY -** THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT -** (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE -** OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE." -** -** $QT_END_LICENSE$ -** -****************************************************************************/ -import QtQuick 2.0 - -Item { - id: slider - - height: handleBack.height - // value is read/write. - property real value: 0 - property real maximum: 1 - property real minimum: 0 - property int xMax: width - handle.width - onXMaxChanged: updatePos() - onMinimumChanged: updatePos() - onValueChanged: if (!pressed) updatePos() - property bool mutable: true - property alias pressed : backgroundMouse.pressed - - signal valueChangedByHandle(int newValue) - - function updatePos() { - if (maximum > minimum) { - var pos = 0 + (value - minimum) * slider.xMax / (maximum - minimum); - pos = Math.min(pos, width - handle.width - 0); - pos = Math.max(pos, 0); - handle.x = pos; - } else { - handle.x = 0; - } - } - - Rectangle { - id: background - width: slider.width - anchors.verticalCenter: slider.verticalCenter - height: 2 - color: "#666666" - - MouseArea { - id: backgroundMouse - anchors.fill: parent - anchors.topMargin: -24 - anchors.bottomMargin: -24 - enabled: slider.mutable - drag.target: handle - drag.axis: Drag.XAxis - drag.minimumX: 0 - drag.maximumX: slider.xMax - onPressedChanged: { - value = Math.max(minimum, Math.min(maximum, (maximum - minimum) * (mouseX - handle.width/2) / slider.xMax + minimum)); - valueChangedByHandle(value); - updatePos(); - } - onPositionChanged: { - value = Math.max(minimum, Math.min(maximum, (maximum - minimum) * (mouseX - handle.width/2) / slider.xMax + minimum)); - valueChangedByHandle(value); - } - onWheel: { - value = Math.max(minimum, Math.min(maximum, value + (wheel.angleDelta.y > 0 ? 1 : -1) * (10 / slider.xMax) * (slider.maximum - slider.minimum))); - valueChangedByHandle(value); - updatePos(); - } - } - } - - Rectangle { - id: progress - height: 5 - anchors.verticalCenter: background.verticalCenter - anchors.left: background.left - anchors.right: handle.right - anchors.rightMargin: handle.width / 2 - visible: slider.enabled - color: "#98c66c" - } - - Rectangle { - id: handleBack - width: 40 - height: width - radius: width / 2 - color: "#8898c66c" - antialiasing: true - anchors.centerIn: handle - visible: handle.visible - } - - Rectangle { - id: handle - width: 14 - height: width - radius: width / 2 - antialiasing: true - color: "#98c66c" - anchors.verticalCenter: background.verticalCenter - visible: slider.enabled - } -} - diff --git a/basicsuite/mediaplayer/UrlBar.qml b/basicsuite/mediaplayer/UrlBar.qml index dbaa8d0..78ba6ec 100644 --- a/basicsuite/mediaplayer/UrlBar.qml +++ b/basicsuite/mediaplayer/UrlBar.qml @@ -48,6 +48,7 @@ ** ****************************************************************************/ import QtQuick 2.0 +import QtQuick.Controls 2.0 Rectangle { id: root @@ -76,54 +77,39 @@ Rectangle { text: "Enter URL" color: "white" font.pixelSize: 20 + font.family: appFont } - BorderImage { - id: urlBar - source: "images/ControlBar.png" - border.top: 12 - border.bottom: 12 - border.left: 12 - border.right: 12 + TextField { + id: urlInput height: 70 - anchors.centerIn: parent - anchors.verticalCenterOffset: -170 width: 600 + anchors.horizontalCenter: parent.horizontalCenter + font.pixelSize: height * 0.45 + color: "white" + text: "" + placeholderText: "http://" + font.family: appFont + font.styleName: "Light" + background: Rectangle { + color: defaultBackground + opacity: 0.8 + border.color: viewSettings.borderColor + border.width: 2 + } + onAccepted: root.urlAccepted(urlInput.text); + } - Rectangle { + Rectangle { + anchors.right: urlBar.left + anchors.rightMargin: 32 + anchors.verticalCenter: urlBar.verticalCenter + height: 70 + width: 70 + color: defaultGrey + MouseArea { anchors.fill: parent - anchors.margins: 16 - color: "#66ffffff" - border.color: "#bbffffff" - radius: 2 - antialiasing: true - - TextInput { - id: urlInput - selectionColor: "#aaffffff" - selectedTextColor: "black" - selectByMouse: true - anchors.fill: parent - anchors.margins: 5 - font.pixelSize: 24 - color: "black" - text: "http://" - onAccepted: root.urlAccepted(urlInput.text); - - } + onClicked: { urlInput.text = ""; urlInput.paste(); } } } - -// Rectangle { -// anchors.right: urlBar.left -// anchors.rightMargin: 32 -// anchors.verticalCenter: urlBar.verticalCenter -// height: 70 -// width: 70 -// color: "gray" -// MouseArea { -// anchors.fill: parent -// onClicked: { urlInput.text = ""; urlInput.paste(); } -// } -// } } diff --git a/basicsuite/mediaplayer/VolumeControl.qml b/basicsuite/mediaplayer/VolumeControl.qml old mode 100755 new mode 100644 index f2bd427..c1f3dce --- a/basicsuite/mediaplayer/VolumeControl.qml +++ b/basicsuite/mediaplayer/VolumeControl.qml @@ -49,46 +49,110 @@ ****************************************************************************/ import QtQuick 2.0 - +import QtDeviceUtilities.QtButtonImageProvider 1.0 +import QtQuick.Controls 2.2 Item { id: root - width: 210 - height: volumeUp.height - + width: parent.width * 0.1 + height: parent.height property alias volume: volumeSlider.value + property bool muted: root.volume == 0.0 + property bool volumeItemUp: volumeItem.y == (volumeItem.height + volumeItem.height * 0.05) //Volume Controls - ImageButton { - id: volumeDown - imageSource: "images/VolumeDown.png" - anchors.verticalCenter: root.verticalCenter - anchors.left: root.left - scale: 1.4 + QtButton{ + id: toggleVolumeButton + width: controlBar.width * 0.06 + height: width + anchors.bottom: parent.bottom + anchors.bottomMargin: controlBar.width * 0.02 + anchors.horizontalCenter: parent.horizontalCenter + fillColor: viewSettings.buttonGreenColor + + Image{ + anchors.centerIn: parent + width: parent.width * 0.5 + height: width + source: !muted ? "images/volume_icon.svg" : "images/mute_icon.svg" + sourceSize.width: parent.width + sourceSize.height: parent.height + } onClicked: { - root.volume = 0.0; + if (volumeItem.opacity == 0) + volumeItem.opacity = 1; + else if (volumeItem.opacity > 0) + volumeItem.opacity = 0; + + if (volumeItem.y === 0) + volumeItem.y -= (volumeItem.height + volumeItem.height * 0.05); + else if (volumeItem !== 0) + volumeItem.y = 0; } } - Slider { - id: volumeSlider - anchors.left: volumeDown.right - anchors.leftMargin: 22 - anchors.rightMargin: 22 - anchors.right: volumeUp.left - maximum: 1.0 - minimum: 0.0 - anchors.verticalCenter: root.verticalCenter - anchors.verticalCenterOffset: 1 - } - ImageButton { - id: volumeUp - imageSource: "images/VolumeUp.png" - anchors.verticalCenter: root.verticalCenter - anchors.verticalCenterOffset: 1 - anchors.right: root.right - scale: 1.4 - onClicked: { - root.volume = 1.0 + Item{ + id: volumeItem + height: applicationWindow.height * 0.4 + anchors.right: toggleVolumeButton.left //? + opacity: 0 + y: 0 + z: -1000 + QtButton{ + id: muteVolumeButton + width: controlBar.width * 0.06 + height: width + anchors.bottom: parent.bottom + fillColor: viewSettings.buttonGrayColor + borderColor: "transparent" + Image{ + anchors.centerIn: parent + width: parent.width * 0.5 + height: parent.height * 0.5 + source: "images/mute_icon.svg" + sourceSize.width: parent.width + sourceSize.height: parent.height + } + onClicked: { + root.volume = 0.0 + } } + + Slider { + id: volumeSlider + anchors.bottom: muteVolumeButton.top + anchors.bottomMargin: parent.height * 0.05 + anchors.top: parent.top + anchors.horizontalCenter: muteVolumeButton.horizontalCenter + orientation: Qt.Vertical + + background: Rectangle{ + id: sliderBackground + x: volumeSlider.leftPadding + volumeSlider.availableWidth / 2 - width / 2 + y: volumeSlider.bottomPadding + implicitWidth: 5 + implicitHeight: 200 + height: volumeSlider.availableHeight + width: implicitWidth + radius: 2 + color: "white" + Rectangle{ + height: volumeSlider.visualPosition * parent.height + width: parent.width + color: defaultGrey + radius: 2 + } + } + handle: Rectangle{ + x: volumeSlider.leftPadding + volumeSlider.availableWidth / 2 - width / 2 + y: volumeSlider.bottomPadding + volumeSlider.visualPosition * (volumeSlider.availableHeight - height) + width: sliderBackground.width * 7 + height: width + radius: height * 0.5 + color: defaultGreen + } + } + + Behavior on opacity { NumberAnimation { duration: 100 } } + Behavior on y { NumberAnimation { duration: 100 } } } } diff --git a/basicsuite/mediaplayer/images/FullscreenButton.png b/basicsuite/mediaplayer/images/FullscreenButton.png old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/PlaybackSlider.png b/basicsuite/mediaplayer/images/PlaybackSlider.png old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/SliderHandle.png b/basicsuite/mediaplayer/images/SliderHandle.png old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/SliderProgress.png b/basicsuite/mediaplayer/images/SliderProgress.png old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/VolumeDown.png b/basicsuite/mediaplayer/images/VolumeDown.png old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/VolumeUp.png b/basicsuite/mediaplayer/images/VolumeUp.png old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/back_icon.svg b/basicsuite/mediaplayer/images/back_icon.svg new file mode 100644 index 0000000..6034bd7 --- /dev/null +++ b/basicsuite/mediaplayer/images/back_icon.svg @@ -0,0 +1 @@ +back_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/bluetooth_icon.svg b/basicsuite/mediaplayer/images/bluetooth_icon.svg new file mode 100644 index 0000000..5dfaa97 --- /dev/null +++ b/basicsuite/mediaplayer/images/bluetooth_icon.svg @@ -0,0 +1 @@ +bluetooth_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/close_icon.svg b/basicsuite/mediaplayer/images/close_icon.svg new file mode 100644 index 0000000..c98fe51 --- /dev/null +++ b/basicsuite/mediaplayer/images/close_icon.svg @@ -0,0 +1 @@ +close_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/header_toggle_icon.svg b/basicsuite/mediaplayer/images/header_toggle_icon.svg new file mode 100644 index 0000000..06d0b6a --- /dev/null +++ b/basicsuite/mediaplayer/images/header_toggle_icon.svg @@ -0,0 +1 @@ +header_toggle_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/info_icon.svg b/basicsuite/mediaplayer/images/info_icon.svg new file mode 100644 index 0000000..64d24c0 --- /dev/null +++ b/basicsuite/mediaplayer/images/info_icon.svg @@ -0,0 +1 @@ +info_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/language_icon.svg b/basicsuite/mediaplayer/images/language_icon.svg new file mode 100644 index 0000000..f1235c5 --- /dev/null +++ b/basicsuite/mediaplayer/images/language_icon.svg @@ -0,0 +1 @@ +language_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/mute_icon.svg b/basicsuite/mediaplayer/images/mute_icon.svg new file mode 100644 index 0000000..2ffd61f --- /dev/null +++ b/basicsuite/mediaplayer/images/mute_icon.svg @@ -0,0 +1 @@ +mute_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/pause_icon.svg b/basicsuite/mediaplayer/images/pause_icon.svg new file mode 100644 index 0000000..04000f9 --- /dev/null +++ b/basicsuite/mediaplayer/images/pause_icon.svg @@ -0,0 +1 @@ +pause_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/play_icon.svg b/basicsuite/mediaplayer/images/play_icon.svg new file mode 100644 index 0000000..ab27771 --- /dev/null +++ b/basicsuite/mediaplayer/images/play_icon.svg @@ -0,0 +1 @@ +play_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/power_icon.svg b/basicsuite/mediaplayer/images/power_icon.svg new file mode 100644 index 0000000..b922c0e --- /dev/null +++ b/basicsuite/mediaplayer/images/power_icon.svg @@ -0,0 +1 @@ +power_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/qt-logo.png b/basicsuite/mediaplayer/images/qt-logo.png old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/settings_icon.svg b/basicsuite/mediaplayer/images/settings_icon.svg new file mode 100644 index 0000000..7f5dbde --- /dev/null +++ b/basicsuite/mediaplayer/images/settings_icon.svg @@ -0,0 +1 @@ +settings_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/settingsmenu_launcher_icon.svg b/basicsuite/mediaplayer/images/settingsmenu_launcher_icon.svg new file mode 100644 index 0000000..479a79f --- /dev/null +++ b/basicsuite/mediaplayer/images/settingsmenu_launcher_icon.svg @@ -0,0 +1 @@ +settingsmenu_launcher_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/stop_icon.svg b/basicsuite/mediaplayer/images/stop_icon.svg new file mode 100644 index 0000000..2eeff5f --- /dev/null +++ b/basicsuite/mediaplayer/images/stop_icon.svg @@ -0,0 +1 @@ +stop_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/images/titlebar.sci b/basicsuite/mediaplayer/images/titlebar.sci old mode 100755 new mode 100644 diff --git a/basicsuite/mediaplayer/images/volume_icon.svg b/basicsuite/mediaplayer/images/volume_icon.svg new file mode 100644 index 0000000..12f944e --- /dev/null +++ b/basicsuite/mediaplayer/images/volume_icon.svg @@ -0,0 +1 @@ +volume_icon \ No newline at end of file diff --git a/basicsuite/mediaplayer/main.qml b/basicsuite/mediaplayer/main.qml old mode 100755 new mode 100644 index d1667bf..5f3ff42 --- a/basicsuite/mediaplayer/main.qml +++ b/basicsuite/mediaplayer/main.qml @@ -50,11 +50,14 @@ import QtQuick 2.0 import QtMultimedia 5.0 +import QtDeviceUtilities.QtButtonImageProvider 1.0 FocusScope { id: applicationWindow focus: true + property real buttonHeight: height * 0.05 + MouseArea { id: mouseActivityMonitor anchors.fill: parent @@ -114,15 +117,11 @@ FocusScope { onOpenFX: { applicationWindow.openFX(); } - - onToggleFullScreen: { -// viewer.toggleFullscreen(); - } } ParameterPanel { id: parameterPanel - opacity: controlBar.opacity + opacity: controlBar.opacity * 0.9 visible: effectSelectionPanel.visible && model.count !== 0 height: 116 width: 500 @@ -137,11 +136,10 @@ FocusScope { EffectSelectionPanel { id: effectSelectionPanel visible: false - opacity: controlBar.opacity + opacity: controlBar.opacity * 0.9 anchors { bottom: controlBar.top right: controlBar.right - // rightMargin: 15 bottomMargin: 15 } width: 250 @@ -165,33 +163,17 @@ FocusScope { } } - Rectangle { + ImageButton{ + id: infoButton anchors.right: parent.right anchors.top: parent.top anchors.rightMargin: 32 anchors.topMargin: 32 width: 40 height: 40 - radius: width / 2 - color: infoMouser.pressed ? "#BB999999" : "#88444444" - antialiasing: true - visible: content.videoPlayer.mediaPlayer.status !== MediaPlayer.NoMedia && controlBar.state === "VISIBLE" - - Text { - anchors.centerIn: parent - text: "i" - font.italic: true - font.bold: true - color: "white" - font.pixelSize: 28 - } - - MouseArea { - id: infoMouser - anchors.fill: parent - anchors.margins: -10 - onClicked: metadataView.opacity = 1 - } + imageSource: "images/info_icon.svg" + onClicked: metadataView.opacity = 1 + visible: content.videoPlayer.mediaPlayer.status !== MediaPlayer.NoMedia && content.videoPlayer.mediaPlayer.status !== MediaPlayer.InvalidMedia } MetadataView { @@ -223,7 +205,6 @@ FocusScope { openFX(); return; } else if (event.key === Qt.Key_F && event.modifiers & Qt.ControlModifier) { -// viewer.toggleFullscreen(); return; } else if (event.key === Qt.Key_Up || event.key === Qt.Key_VolumeUp) { content.videoPlayer.mediaPlayer.volume = Math.min(1, content.videoPlayer.mediaPlayer.volume + 0.1); @@ -241,7 +222,6 @@ FocusScope { } return; } else if (applicationWindow.isFullScreen && event.key === Qt.Key_Escape) { -// viewer.toggleFullscreen(); return; } @@ -271,10 +251,6 @@ FocusScope { } function openVideo() { - //videoFileBrowser.show() - // var videoFile = viewer.openFileDialog(); - // if (videoFile != "") - // content.openVideo(videoFile); fileBrowser.show() } diff --git a/basicsuite/mediaplayer/mediaplayer.pro b/basicsuite/mediaplayer/mediaplayer.pro index 4667caf..ba174e3 100644 --- a/basicsuite/mediaplayer/mediaplayer.pro +++ b/basicsuite/mediaplayer/mediaplayer.pro @@ -16,7 +16,6 @@ content.files = \ ParameterPanel.qml \ PlaybackControl.qml \ SeekControl.qml \ - Slider.qml \ UrlBar.qml \ VolumeControl.qml \ Effects \ -- cgit v1.2.3 From da6035233fc3bcfbc4a3d65075ee4099349c09d0 Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Mon, 23 Apr 2018 15:17:33 +0300 Subject: Move common definitions to shared settings Task-number: QTBUG-65302 Change-Id: I2153e2f2b4aa295e87098256354ed034480294df Reviewed-by: Teemu Holappa --- basicsuite/mediaplayer/ControlBar.qml | 3 ++- basicsuite/mediaplayer/EffectSelectionPanel.qml | 3 ++- basicsuite/mediaplayer/FileBrowser.qml | 5 +++-- basicsuite/mediaplayer/MetadataView.qml | 3 ++- basicsuite/mediaplayer/ParameterPanel.qml | 3 ++- basicsuite/mediaplayer/PlayerSlider.qml | 5 +++-- basicsuite/mediaplayer/UrlBar.qml | 3 ++- basicsuite/mediaplayer/main.qml | 1 + basicsuite/mediaplayer/mediaplayer.pro | 3 ++- 9 files changed, 19 insertions(+), 10 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/ControlBar.qml b/basicsuite/mediaplayer/ControlBar.qml index e65a3a3..f05cea8 100644 --- a/basicsuite/mediaplayer/ControlBar.qml +++ b/basicsuite/mediaplayer/ControlBar.qml @@ -50,11 +50,12 @@ import QtQuick 2.0 import QtMultimedia 5.0 +import "settings.js" as Settings Rectangle { id: controlBar height: parent.height * 0.225 - color: defaultBackground + color: Settings.backgroundColor property MediaPlayer mediaPlayer: null property bool isMouseAbove: false diff --git a/basicsuite/mediaplayer/EffectSelectionPanel.qml b/basicsuite/mediaplayer/EffectSelectionPanel.qml index 68a9cac..12c8a42 100644 --- a/basicsuite/mediaplayer/EffectSelectionPanel.qml +++ b/basicsuite/mediaplayer/EffectSelectionPanel.qml @@ -48,10 +48,11 @@ ** ****************************************************************************/ import QtQuick 2.0 +import "settings.js" as Settings Rectangle { id: root - color: defaultBackground + color: Settings.backgroundColor height: 78 property int itemHeight: 25 property string effectSource: "" diff --git a/basicsuite/mediaplayer/FileBrowser.qml b/basicsuite/mediaplayer/FileBrowser.qml index 8bae836..04e821a 100644 --- a/basicsuite/mediaplayer/FileBrowser.qml +++ b/basicsuite/mediaplayer/FileBrowser.qml @@ -51,6 +51,7 @@ import QtQuick 2.0 import Qt.labs.folderlistmodel 2.0 import QtQuick.Controls 1.4 import QtDeviceUtilities.QtButtonImageProvider 1.0 +import "settings.js" as Settings Item { id: fileBrowser @@ -78,7 +79,7 @@ Item { Rectangle { id: root - color: defaultBackground + color: Settings.backgroundColor property alias folder: folders.folder FolderListModel { @@ -184,7 +185,7 @@ Item { Rectangle { width: parent.width; height: 70 - color: defaultBackground + color: Settings.backgroundColor id: titleBar QtButton { diff --git a/basicsuite/mediaplayer/MetadataView.qml b/basicsuite/mediaplayer/MetadataView.qml index 79883d2..a995050 100644 --- a/basicsuite/mediaplayer/MetadataView.qml +++ b/basicsuite/mediaplayer/MetadataView.qml @@ -49,6 +49,7 @@ ****************************************************************************/ import QtQuick 2.0 import QtMultimedia 5.0 +import "settings.js" as Settings Rectangle { id: root @@ -63,7 +64,7 @@ Rectangle { Rectangle { height: column.height + 30 width: 500 - color: defaultBackground + color: Settings.backgroundColor opacity: 0.9 anchors.centerIn: parent anchors.verticalCenterOffset: -50 diff --git a/basicsuite/mediaplayer/ParameterPanel.qml b/basicsuite/mediaplayer/ParameterPanel.qml index 5b8e991..1378827 100644 --- a/basicsuite/mediaplayer/ParameterPanel.qml +++ b/basicsuite/mediaplayer/ParameterPanel.qml @@ -48,11 +48,12 @@ ** ****************************************************************************/ import QtQuick 2.0 +import "settings.js" as Settings Rectangle { id: root height: view.model.count * sliderHeight - color: defaultBackground + color: Settings.backgroundColor property color lineColor: "black" property real spacing: 10 property real sliderHeight: 50 diff --git a/basicsuite/mediaplayer/PlayerSlider.qml b/basicsuite/mediaplayer/PlayerSlider.qml index d569866..ef0556a 100644 --- a/basicsuite/mediaplayer/PlayerSlider.qml +++ b/basicsuite/mediaplayer/PlayerSlider.qml @@ -48,6 +48,7 @@ ** ****************************************************************************/ import QtQuick 2.0 +import "settings.js" as Settings Item { id: slider @@ -81,7 +82,7 @@ Item { width: slider.width anchors.verticalCenter: slider.verticalCenter height: 5 - color: "#9d9faa" + color: "red" //Settings.backgroundColor radius: 2 MouseArea { @@ -119,7 +120,7 @@ Item { anchors.right: handle.right anchors.rightMargin: handle.width / 2 visible: slider.enabled - color: "white" + color: "green" radius: 2 } diff --git a/basicsuite/mediaplayer/UrlBar.qml b/basicsuite/mediaplayer/UrlBar.qml index 78ba6ec..ca69f69 100644 --- a/basicsuite/mediaplayer/UrlBar.qml +++ b/basicsuite/mediaplayer/UrlBar.qml @@ -49,6 +49,7 @@ ****************************************************************************/ import QtQuick 2.0 import QtQuick.Controls 2.0 +import "settings.js" as Settings Rectangle { id: root @@ -92,7 +93,7 @@ Rectangle { font.family: appFont font.styleName: "Light" background: Rectangle { - color: defaultBackground + color: Settings.backgroundColor opacity: 0.8 border.color: viewSettings.borderColor border.width: 2 diff --git a/basicsuite/mediaplayer/main.qml b/basicsuite/mediaplayer/main.qml index 5f3ff42..66d03a1 100644 --- a/basicsuite/mediaplayer/main.qml +++ b/basicsuite/mediaplayer/main.qml @@ -51,6 +51,7 @@ import QtQuick 2.0 import QtMultimedia 5.0 import QtDeviceUtilities.QtButtonImageProvider 1.0 +import "settings.js" as Settings FocusScope { id: applicationWindow diff --git a/basicsuite/mediaplayer/mediaplayer.pro b/basicsuite/mediaplayer/mediaplayer.pro index ba174e3..3578abc 100644 --- a/basicsuite/mediaplayer/mediaplayer.pro +++ b/basicsuite/mediaplayer/mediaplayer.pro @@ -19,7 +19,8 @@ content.files = \ UrlBar.qml \ VolumeControl.qml \ Effects \ - images + images \ + ../shared/settings.js content.path = $$DESTPATH -- cgit v1.2.3 From 28e9fdf3151b0ae971f75e9386a6ff1e3c370bf6 Mon Sep 17 00:00:00 2001 From: Sami Nurmenniemi Date: Fri, 18 May 2018 16:03:30 +0300 Subject: Fix Media Player demo color definitions Task-number: QTBUG-62791 Change-Id: I2bd15e2e873aa7343a072b846918296e7cbce205 Reviewed-by: Mikko Gronoff --- basicsuite/mediaplayer/EffectSelectionPanel.qml | 2 +- basicsuite/mediaplayer/FileBrowser.qml | 4 ++-- basicsuite/mediaplayer/ImageButton.qml | 3 ++- basicsuite/mediaplayer/MetadataView.qml | 2 +- basicsuite/mediaplayer/UrlBar.qml | 2 +- basicsuite/mediaplayer/VolumeControl.qml | 6 ++++-- 6 files changed, 11 insertions(+), 8 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/EffectSelectionPanel.qml b/basicsuite/mediaplayer/EffectSelectionPanel.qml index 12c8a42..4daded0 100644 --- a/basicsuite/mediaplayer/EffectSelectionPanel.qml +++ b/basicsuite/mediaplayer/EffectSelectionPanel.qml @@ -159,7 +159,7 @@ Rectangle { width: parent.width property bool isSelected: list.currentIndex == index Text { - color: parent.isSelected ? defaultGreen : "white" + color: parent.isSelected ? Settings.primaryGreen : "white" text: name anchors.centerIn: parent font.pixelSize: 20 diff --git a/basicsuite/mediaplayer/FileBrowser.qml b/basicsuite/mediaplayer/FileBrowser.qml index 04e821a..aae608f 100644 --- a/basicsuite/mediaplayer/FileBrowser.qml +++ b/basicsuite/mediaplayer/FileBrowser.qml @@ -113,7 +113,7 @@ Item { text: fileName font.pixelSize: parent.height * .1 font.family: appFont - color: view.currentIndex === index ? defaultGreen : "white" + color: view.currentIndex === index ? Settings.primaryGreen : "white" elide: Text.ElideRight } @@ -226,7 +226,7 @@ Item { width: parent.width anchors.bottom: parent.bottom height: 2 - color: defaultGrey + color: Settings.primaryGrey } } diff --git a/basicsuite/mediaplayer/ImageButton.qml b/basicsuite/mediaplayer/ImageButton.qml index 4e26fc1..982cc49 100644 --- a/basicsuite/mediaplayer/ImageButton.qml +++ b/basicsuite/mediaplayer/ImageButton.qml @@ -50,6 +50,7 @@ import QtQuick 2.0 import QtGraphicalEffects 1.0 +import "settings.js" as Settings Item { id: root @@ -80,7 +81,7 @@ Item { id: glowEffect anchors.fill: image source: image - color: pressed ? "#22000000" : checked ? defaultGreen : "white" + color: pressed ? "#22000000" : checked ? Settings.primaryGreen : "white" visible: checked || hover || pressed } diff --git a/basicsuite/mediaplayer/MetadataView.qml b/basicsuite/mediaplayer/MetadataView.qml index a995050..d6f45d8 100644 --- a/basicsuite/mediaplayer/MetadataView.qml +++ b/basicsuite/mediaplayer/MetadataView.qml @@ -68,7 +68,7 @@ Rectangle { opacity: 0.9 anchors.centerIn: parent anchors.verticalCenterOffset: -50 - border.color: defaultGrey + border.color: Settings.primaryGrey border.width: 2 Column { diff --git a/basicsuite/mediaplayer/UrlBar.qml b/basicsuite/mediaplayer/UrlBar.qml index ca69f69..80a9259 100644 --- a/basicsuite/mediaplayer/UrlBar.qml +++ b/basicsuite/mediaplayer/UrlBar.qml @@ -107,7 +107,7 @@ Rectangle { anchors.verticalCenter: urlBar.verticalCenter height: 70 width: 70 - color: defaultGrey + color: Settings.primaryGrey MouseArea { anchors.fill: parent onClicked: { urlInput.text = ""; urlInput.paste(); } diff --git a/basicsuite/mediaplayer/VolumeControl.qml b/basicsuite/mediaplayer/VolumeControl.qml index c1f3dce..3a83491 100644 --- a/basicsuite/mediaplayer/VolumeControl.qml +++ b/basicsuite/mediaplayer/VolumeControl.qml @@ -51,6 +51,8 @@ import QtQuick 2.0 import QtDeviceUtilities.QtButtonImageProvider 1.0 import QtQuick.Controls 2.2 +import "settings.js" as Settings + Item { id: root width: parent.width * 0.1 @@ -138,7 +140,7 @@ Item { Rectangle{ height: volumeSlider.visualPosition * parent.height width: parent.width - color: defaultGrey + color: Settings.primaryGrey radius: 2 } } @@ -148,7 +150,7 @@ Item { width: sliderBackground.width * 7 height: width radius: height * 0.5 - color: defaultGreen + color: Settings.primaryGreen } } -- cgit v1.2.3 From a60797871ea11ade6b583869e361ffef88e2213b Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Wed, 13 Jun 2018 09:43:54 +0300 Subject: Update Boot2Qt Launcher demo icons & doc images Task-number: QTBUG-68819 Change-Id: Idf1c1933765af2efc4e8193f5b03f99828cbc7b6 Reviewed-by: Mikko Gronoff --- basicsuite/mediaplayer/preview_l.jpg | Bin 65701 -> 59359 bytes 1 file changed, 0 insertions(+), 0 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/preview_l.jpg b/basicsuite/mediaplayer/preview_l.jpg index f6cc262..98f528e 100644 Binary files a/basicsuite/mediaplayer/preview_l.jpg and b/basicsuite/mediaplayer/preview_l.jpg differ -- cgit v1.2.3 From 0b0d77ed36616ec7c10d7ceb5ea90196b11d4ff8 Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Fri, 15 Jun 2018 14:42:56 +0300 Subject: Fix mediaplayer color definitions Task-number: QTBUG-68471 Change-Id: I292f40ce195f0e2f914353cb237e3009774c11bb Reviewed-by: Sami Nurmenniemi --- basicsuite/mediaplayer/PlaybackControl.qml | 5 +++-- basicsuite/mediaplayer/UrlBar.qml | 2 +- basicsuite/mediaplayer/VolumeControl.qml | 4 ++-- 3 files changed, 6 insertions(+), 5 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/PlaybackControl.qml b/basicsuite/mediaplayer/PlaybackControl.qml index 5fff05f..7c90fa6 100644 --- a/basicsuite/mediaplayer/PlaybackControl.qml +++ b/basicsuite/mediaplayer/PlaybackControl.qml @@ -50,6 +50,7 @@ import QtQuick 2.0 import QtDeviceUtilities.QtButtonImageProvider 1.0 +import "settings.js" as Settings Row { anchors.leftMargin: parent.width * 0.02 @@ -72,7 +73,7 @@ Row { height: width anchors.bottom: parent.bottom anchors.bottomMargin: root.spacing - fillColor: viewSettings.buttonGreenColor + fillColor: Settings.primaryGreen Image{ anchors.centerIn: parent width: parent.width * 0.5 @@ -91,7 +92,7 @@ Row { height: width anchors.bottom: parent.bottom anchors.bottomMargin: root.spacing - fillColor: viewSettings.buttonGreenColor + fillColor: Settings.primaryGreen Image{ anchors.centerIn: parent width: parent.width * 0.5 diff --git a/basicsuite/mediaplayer/UrlBar.qml b/basicsuite/mediaplayer/UrlBar.qml index 80a9259..cb822ff 100644 --- a/basicsuite/mediaplayer/UrlBar.qml +++ b/basicsuite/mediaplayer/UrlBar.qml @@ -95,7 +95,7 @@ Rectangle { background: Rectangle { color: Settings.backgroundColor opacity: 0.8 - border.color: viewSettings.borderColor + border.color: Settings.primaryGrey border.width: 2 } onAccepted: root.urlAccepted(urlInput.text); diff --git a/basicsuite/mediaplayer/VolumeControl.qml b/basicsuite/mediaplayer/VolumeControl.qml index 3a83491..9536d12 100644 --- a/basicsuite/mediaplayer/VolumeControl.qml +++ b/basicsuite/mediaplayer/VolumeControl.qml @@ -69,7 +69,7 @@ Item { anchors.bottom: parent.bottom anchors.bottomMargin: controlBar.width * 0.02 anchors.horizontalCenter: parent.horizontalCenter - fillColor: viewSettings.buttonGreenColor + fillColor: Settings.primaryGreen Image{ anchors.centerIn: parent @@ -104,7 +104,7 @@ Item { width: controlBar.width * 0.06 height: width anchors.bottom: parent.bottom - fillColor: viewSettings.buttonGrayColor + fillColor: Settings.primaryGrey borderColor: "transparent" Image{ anchors.centerIn: parent -- cgit v1.2.3 From c20966fc4163ceccaa884e6b6253729dfa4776a7 Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Mon, 18 Jun 2018 14:37:08 +0300 Subject: Move info button to mediaplayer-demo footer Task-number: QTBUG-68674 Change-Id: I4e2c3dc499461dcbb9c4d6e8a03027d70419c160 Reviewed-by: Kimmo Ollila --- basicsuite/mediaplayer/ControlBar.qml | 10 ++++++++++ basicsuite/mediaplayer/main.qml | 13 ------------- 2 files changed, 10 insertions(+), 13 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/ControlBar.qml b/basicsuite/mediaplayer/ControlBar.qml index f05cea8..fed8a77 100644 --- a/basicsuite/mediaplayer/ControlBar.qml +++ b/basicsuite/mediaplayer/ControlBar.qml @@ -172,6 +172,7 @@ Rectangle { imageSource: "images/FXButton.png" checkable: true checked: effectSelectionPanel.visible + onClicked: { openFX(); } @@ -179,6 +180,7 @@ Rectangle { ImageButton { id: fileButton imageSource: "images/FileButton.png" + onClicked: { openFile(); } @@ -186,10 +188,18 @@ Rectangle { ImageButton { id: urlButton imageSource: "images/UrlButton.png" + onClicked: { openURL(); } } + ImageButton{ + id: infoButton + + imageSource: "images/info_icon.svg" + onClicked: metadataView.opacity = 1 + visible: content.videoPlayer.mediaPlayer.status !== MediaPlayer.NoMedia && content.videoPlayer.mediaPlayer.status !== MediaPlayer.InvalidMedia + } } VolumeControl { diff --git a/basicsuite/mediaplayer/main.qml b/basicsuite/mediaplayer/main.qml index 66d03a1..ec8719d 100644 --- a/basicsuite/mediaplayer/main.qml +++ b/basicsuite/mediaplayer/main.qml @@ -164,19 +164,6 @@ FocusScope { } } - ImageButton{ - id: infoButton - anchors.right: parent.right - anchors.top: parent.top - anchors.rightMargin: 32 - anchors.topMargin: 32 - width: 40 - height: 40 - imageSource: "images/info_icon.svg" - onClicked: metadataView.opacity = 1 - visible: content.videoPlayer.mediaPlayer.status !== MediaPlayer.NoMedia && content.videoPlayer.mediaPlayer.status !== MediaPlayer.InvalidMedia - } - MetadataView { id: metadataView mediaPlayer: content.videoPlayer.mediaPlayer -- cgit v1.2.3 From cc9de3791859538441fc5a174c69f556638cce03 Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Wed, 13 Jun 2018 10:17:50 +0300 Subject: Fix mediaplayer slider color definitions Task-number: QTBUG-62791 Change-Id: I1d9547680adbed937ee3b5e413c9c2f76304af28 Reviewed-by: Kimmo Ollila --- basicsuite/mediaplayer/PlayerSlider.qml | 6 +++--- basicsuite/mediaplayer/mediaplayer.pro | 1 + 2 files changed, 4 insertions(+), 3 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/PlayerSlider.qml b/basicsuite/mediaplayer/PlayerSlider.qml index ef0556a..68c21e1 100644 --- a/basicsuite/mediaplayer/PlayerSlider.qml +++ b/basicsuite/mediaplayer/PlayerSlider.qml @@ -82,7 +82,7 @@ Item { width: slider.width anchors.verticalCenter: slider.verticalCenter height: 5 - color: "red" //Settings.backgroundColor + color: Settings.primaryGrey radius: 2 MouseArea { @@ -120,7 +120,7 @@ Item { anchors.right: handle.right anchors.rightMargin: handle.width / 2 visible: slider.enabled - color: "green" + color: "white" radius: 2 } @@ -129,7 +129,7 @@ Item { width: 40 height: width radius: width / 2 - color: "#41cd52" + color: Settings.primaryGreen antialiasing: true anchors.centerIn: handle visible: true diff --git a/basicsuite/mediaplayer/mediaplayer.pro b/basicsuite/mediaplayer/mediaplayer.pro index 3578abc..1487620 100644 --- a/basicsuite/mediaplayer/mediaplayer.pro +++ b/basicsuite/mediaplayer/mediaplayer.pro @@ -15,6 +15,7 @@ content.files = \ MetadataView.qml \ ParameterPanel.qml \ PlaybackControl.qml \ + PlayerSlider.qml \ SeekControl.qml \ UrlBar.qml \ VolumeControl.qml \ -- cgit v1.2.3 From 4aa85d783e7e3e729ee4a4d772869236bf60d326 Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Mon, 30 Jul 2018 11:27:56 +0300 Subject: Use QSettings for color definitions Task-number: QTBUG-69536 Change-Id: I4c1fa7758db6f593dd38050a75d276fcc85346ac Reviewed-by: Teemu Holappa --- basicsuite/mediaplayer/ControlBar.qml | 3 +-- basicsuite/mediaplayer/EffectSelectionPanel.qml | 5 ++--- basicsuite/mediaplayer/FileBrowser.qml | 11 ++++++----- basicsuite/mediaplayer/ImageButton.qml | 3 +-- basicsuite/mediaplayer/MetadataView.qml | 5 ++--- basicsuite/mediaplayer/ParameterPanel.qml | 3 +-- basicsuite/mediaplayer/PlaybackControl.qml | 5 ++--- basicsuite/mediaplayer/PlayerSlider.qml | 5 ++--- basicsuite/mediaplayer/UrlBar.qml | 7 +++---- basicsuite/mediaplayer/VolumeControl.qml | 9 ++++----- basicsuite/mediaplayer/main.qml | 1 - basicsuite/mediaplayer/mediaplayer.pro | 3 +-- 12 files changed, 25 insertions(+), 35 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/ControlBar.qml b/basicsuite/mediaplayer/ControlBar.qml index fed8a77..e4f0665 100644 --- a/basicsuite/mediaplayer/ControlBar.qml +++ b/basicsuite/mediaplayer/ControlBar.qml @@ -50,12 +50,11 @@ import QtQuick 2.0 import QtMultimedia 5.0 -import "settings.js" as Settings Rectangle { id: controlBar height: parent.height * 0.225 - color: Settings.backgroundColor + color: _backgroundColor property MediaPlayer mediaPlayer: null property bool isMouseAbove: false diff --git a/basicsuite/mediaplayer/EffectSelectionPanel.qml b/basicsuite/mediaplayer/EffectSelectionPanel.qml index 4daded0..0af10a5 100644 --- a/basicsuite/mediaplayer/EffectSelectionPanel.qml +++ b/basicsuite/mediaplayer/EffectSelectionPanel.qml @@ -48,11 +48,10 @@ ** ****************************************************************************/ import QtQuick 2.0 -import "settings.js" as Settings Rectangle { id: root - color: Settings.backgroundColor + color: _backgroundColor height: 78 property int itemHeight: 25 property string effectSource: "" @@ -159,7 +158,7 @@ Rectangle { width: parent.width property bool isSelected: list.currentIndex == index Text { - color: parent.isSelected ? Settings.primaryGreen : "white" + color: parent.isSelected ? _primaryGreen : "white" text: name anchors.centerIn: parent font.pixelSize: 20 diff --git a/basicsuite/mediaplayer/FileBrowser.qml b/basicsuite/mediaplayer/FileBrowser.qml index aae608f..da51001 100644 --- a/basicsuite/mediaplayer/FileBrowser.qml +++ b/basicsuite/mediaplayer/FileBrowser.qml @@ -51,7 +51,6 @@ import QtQuick 2.0 import Qt.labs.folderlistmodel 2.0 import QtQuick.Controls 1.4 import QtDeviceUtilities.QtButtonImageProvider 1.0 -import "settings.js" as Settings Item { id: fileBrowser @@ -79,7 +78,7 @@ Item { Rectangle { id: root - color: Settings.backgroundColor + color: _backgroundColor property alias folder: folders.folder FolderListModel { @@ -113,7 +112,7 @@ Item { text: fileName font.pixelSize: parent.height * .1 font.family: appFont - color: view.currentIndex === index ? Settings.primaryGreen : "white" + color: view.currentIndex === index ? _primaryGreen : "white" elide: Text.ElideRight } @@ -185,7 +184,7 @@ Item { Rectangle { width: parent.width; height: 70 - color: Settings.backgroundColor + color: _backgroundColor id: titleBar QtButton { @@ -195,6 +194,7 @@ Item { anchors.leftMargin: parent.width * .05 anchors.verticalCenter: parent.verticalCenter onClicked: up() + fillColor: _primaryGreen } Text { @@ -220,13 +220,14 @@ Item { anchors.rightMargin: parent.width * .05 anchors.verticalCenter: parent.verticalCenter onClicked: fileBrowser.selectFile("") + fillColor: _primaryGreen } Rectangle { width: parent.width anchors.bottom: parent.bottom height: 2 - color: Settings.primaryGrey + color: _primaryGrey } } diff --git a/basicsuite/mediaplayer/ImageButton.qml b/basicsuite/mediaplayer/ImageButton.qml index 982cc49..cb4dcb4 100644 --- a/basicsuite/mediaplayer/ImageButton.qml +++ b/basicsuite/mediaplayer/ImageButton.qml @@ -50,7 +50,6 @@ import QtQuick 2.0 import QtGraphicalEffects 1.0 -import "settings.js" as Settings Item { id: root @@ -81,7 +80,7 @@ Item { id: glowEffect anchors.fill: image source: image - color: pressed ? "#22000000" : checked ? Settings.primaryGreen : "white" + color: pressed ? "#22000000" : checked ? _primaryGreen : "white" visible: checked || hover || pressed } diff --git a/basicsuite/mediaplayer/MetadataView.qml b/basicsuite/mediaplayer/MetadataView.qml index d6f45d8..34b53b4 100644 --- a/basicsuite/mediaplayer/MetadataView.qml +++ b/basicsuite/mediaplayer/MetadataView.qml @@ -49,7 +49,6 @@ ****************************************************************************/ import QtQuick 2.0 import QtMultimedia 5.0 -import "settings.js" as Settings Rectangle { id: root @@ -64,11 +63,11 @@ Rectangle { Rectangle { height: column.height + 30 width: 500 - color: Settings.backgroundColor + color: _backgroundColor opacity: 0.9 anchors.centerIn: parent anchors.verticalCenterOffset: -50 - border.color: Settings.primaryGrey + border.color: _primaryGrey border.width: 2 Column { diff --git a/basicsuite/mediaplayer/ParameterPanel.qml b/basicsuite/mediaplayer/ParameterPanel.qml index 1378827..81bba63 100644 --- a/basicsuite/mediaplayer/ParameterPanel.qml +++ b/basicsuite/mediaplayer/ParameterPanel.qml @@ -48,12 +48,11 @@ ** ****************************************************************************/ import QtQuick 2.0 -import "settings.js" as Settings Rectangle { id: root height: view.model.count * sliderHeight - color: Settings.backgroundColor + color: _backgroundColor property color lineColor: "black" property real spacing: 10 property real sliderHeight: 50 diff --git a/basicsuite/mediaplayer/PlaybackControl.qml b/basicsuite/mediaplayer/PlaybackControl.qml index 7c90fa6..99b1d5c 100644 --- a/basicsuite/mediaplayer/PlaybackControl.qml +++ b/basicsuite/mediaplayer/PlaybackControl.qml @@ -50,7 +50,6 @@ import QtQuick 2.0 import QtDeviceUtilities.QtButtonImageProvider 1.0 -import "settings.js" as Settings Row { anchors.leftMargin: parent.width * 0.02 @@ -73,7 +72,7 @@ Row { height: width anchors.bottom: parent.bottom anchors.bottomMargin: root.spacing - fillColor: Settings.primaryGreen + fillColor: _primaryGreen Image{ anchors.centerIn: parent width: parent.width * 0.5 @@ -92,7 +91,7 @@ Row { height: width anchors.bottom: parent.bottom anchors.bottomMargin: root.spacing - fillColor: Settings.primaryGreen + fillColor: _primaryGreen Image{ anchors.centerIn: parent width: parent.width * 0.5 diff --git a/basicsuite/mediaplayer/PlayerSlider.qml b/basicsuite/mediaplayer/PlayerSlider.qml index 68c21e1..0ec52b5 100644 --- a/basicsuite/mediaplayer/PlayerSlider.qml +++ b/basicsuite/mediaplayer/PlayerSlider.qml @@ -48,7 +48,6 @@ ** ****************************************************************************/ import QtQuick 2.0 -import "settings.js" as Settings Item { id: slider @@ -82,7 +81,7 @@ Item { width: slider.width anchors.verticalCenter: slider.verticalCenter height: 5 - color: Settings.primaryGrey + color: _primaryGrey radius: 2 MouseArea { @@ -129,7 +128,7 @@ Item { width: 40 height: width radius: width / 2 - color: Settings.primaryGreen + color: _primaryGreen antialiasing: true anchors.centerIn: handle visible: true diff --git a/basicsuite/mediaplayer/UrlBar.qml b/basicsuite/mediaplayer/UrlBar.qml index cb822ff..73e9cc5 100644 --- a/basicsuite/mediaplayer/UrlBar.qml +++ b/basicsuite/mediaplayer/UrlBar.qml @@ -49,7 +49,6 @@ ****************************************************************************/ import QtQuick 2.0 import QtQuick.Controls 2.0 -import "settings.js" as Settings Rectangle { id: root @@ -93,9 +92,9 @@ Rectangle { font.family: appFont font.styleName: "Light" background: Rectangle { - color: Settings.backgroundColor + color: _backgroundColor opacity: 0.8 - border.color: Settings.primaryGrey + border.color: _primaryGrey border.width: 2 } onAccepted: root.urlAccepted(urlInput.text); @@ -107,7 +106,7 @@ Rectangle { anchors.verticalCenter: urlBar.verticalCenter height: 70 width: 70 - color: Settings.primaryGrey + color: _primaryGrey MouseArea { anchors.fill: parent onClicked: { urlInput.text = ""; urlInput.paste(); } diff --git a/basicsuite/mediaplayer/VolumeControl.qml b/basicsuite/mediaplayer/VolumeControl.qml index 9536d12..4369d04 100644 --- a/basicsuite/mediaplayer/VolumeControl.qml +++ b/basicsuite/mediaplayer/VolumeControl.qml @@ -51,7 +51,6 @@ import QtQuick 2.0 import QtDeviceUtilities.QtButtonImageProvider 1.0 import QtQuick.Controls 2.2 -import "settings.js" as Settings Item { id: root @@ -69,7 +68,7 @@ Item { anchors.bottom: parent.bottom anchors.bottomMargin: controlBar.width * 0.02 anchors.horizontalCenter: parent.horizontalCenter - fillColor: Settings.primaryGreen + fillColor: _primaryGreen Image{ anchors.centerIn: parent @@ -104,7 +103,7 @@ Item { width: controlBar.width * 0.06 height: width anchors.bottom: parent.bottom - fillColor: Settings.primaryGrey + fillColor: _primaryGrey borderColor: "transparent" Image{ anchors.centerIn: parent @@ -140,7 +139,7 @@ Item { Rectangle{ height: volumeSlider.visualPosition * parent.height width: parent.width - color: Settings.primaryGrey + color: _primaryGrey radius: 2 } } @@ -150,7 +149,7 @@ Item { width: sliderBackground.width * 7 height: width radius: height * 0.5 - color: Settings.primaryGreen + color: _primaryGreen } } diff --git a/basicsuite/mediaplayer/main.qml b/basicsuite/mediaplayer/main.qml index ec8719d..527e735 100644 --- a/basicsuite/mediaplayer/main.qml +++ b/basicsuite/mediaplayer/main.qml @@ -51,7 +51,6 @@ import QtQuick 2.0 import QtMultimedia 5.0 import QtDeviceUtilities.QtButtonImageProvider 1.0 -import "settings.js" as Settings FocusScope { id: applicationWindow diff --git a/basicsuite/mediaplayer/mediaplayer.pro b/basicsuite/mediaplayer/mediaplayer.pro index 1487620..c56ba88 100644 --- a/basicsuite/mediaplayer/mediaplayer.pro +++ b/basicsuite/mediaplayer/mediaplayer.pro @@ -20,8 +20,7 @@ content.files = \ UrlBar.qml \ VolumeControl.qml \ Effects \ - images \ - ../shared/settings.js + images content.path = $$DESTPATH -- cgit v1.2.3 From e81384c45e5c0b90e07057abd2a8788272d14c0f Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Mon, 6 Aug 2018 09:10:39 +0300 Subject: Remove confusing highlighting on media player file browser Task-number: QTBUG-62791 Change-Id: Ic7e4db3278bf9df28f2d5cb0f1a4d0aa50aade2d Reviewed-by: Samuli Piippo Reviewed-by: Teemu Holappa --- basicsuite/mediaplayer/FileBrowser.qml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/FileBrowser.qml b/basicsuite/mediaplayer/FileBrowser.qml index da51001..a2028f4 100644 --- a/basicsuite/mediaplayer/FileBrowser.qml +++ b/basicsuite/mediaplayer/FileBrowser.qml @@ -112,7 +112,7 @@ Item { text: fileName font.pixelSize: parent.height * .1 font.family: appFont - color: view.currentIndex === index ? _primaryGreen : "white" + color: mouseRegion.pressed ? _primaryGreen : "white" elide: Text.ElideRight } -- cgit v1.2.3 From 3594ea2a2dec8a74c2e8baf307c13671ebbdf18c Mon Sep 17 00:00:00 2001 From: Juho Annunen Date: Tue, 21 Aug 2018 14:44:48 +0300 Subject: Fix scaling, video path & focusing issues on mediaplayer demo Task-number: QTBUG-62791 Change-Id: I8ea9bcc27fcf0b2d4fb9f7b8ada165f7a5a5d7c8 Reviewed-by: Teemu Holappa --- basicsuite/mediaplayer/ControlBar.qml | 5 +- basicsuite/mediaplayer/EffectSelectionPanel.qml | 7 +-- basicsuite/mediaplayer/FileBrowser.qml | 2 +- basicsuite/mediaplayer/ImageButton.qml | 2 + basicsuite/mediaplayer/ParameterPanel.qml | 14 ++--- basicsuite/mediaplayer/VolumeControl.qml | 5 +- basicsuite/mediaplayer/main.qml | 74 ++++++++++++++++--------- 7 files changed, 65 insertions(+), 44 deletions(-) (limited to 'basicsuite/mediaplayer') diff --git a/basicsuite/mediaplayer/ControlBar.qml b/basicsuite/mediaplayer/ControlBar.qml index e4f0665..cdf27f2 100644 --- a/basicsuite/mediaplayer/ControlBar.qml +++ b/basicsuite/mediaplayer/ControlBar.qml @@ -164,14 +164,13 @@ Rectangle { anchors.right: volumeControl.left anchors.rightMargin: 15 anchors.bottom: seekControl.top - spacing: 22 - + spacing: itemMargin + height: parent.height * 0.275 ImageButton { id: fxButton imageSource: "images/FXButton.png" checkable: true checked: effectSelectionPanel.visible - onClicked: { openFX(); } diff --git a/basicsuite/mediaplayer/EffectSelectionPanel.qml b/basicsuite/mediaplayer/EffectSelectionPanel.qml index 0af10a5..9aee910 100644 --- a/basicsuite/mediaplayer/EffectSelectionPanel.qml +++ b/basicsuite/mediaplayer/EffectSelectionPanel.qml @@ -52,7 +52,6 @@ import QtQuick 2.0 Rectangle { id: root color: _backgroundColor - height: 78 property int itemHeight: 25 property string effectSource: "" property bool isMouseAbove: mouseAboveMonitor.containsMouse @@ -141,7 +140,7 @@ Rectangle { id: list anchors.fill: parent clip: true - anchors.margins: 14 + anchors.margins: itemMargin model: sources focus: root.visible && root.opacity && urlBar.opacity === 0 @@ -154,14 +153,14 @@ Rectangle { } delegate: Item { - height: 40 + height: itemHeight width: parent.width property bool isSelected: list.currentIndex == index Text { color: parent.isSelected ? _primaryGreen : "white" text: name anchors.centerIn: parent - font.pixelSize: 20 + font.pixelSize: defaultFontSize font.family: appFont font.styleName: parent.isSelected ? "Bold" : "Regular" } diff --git a/basicsuite/mediaplayer/FileBrowser.qml b/basicsuite/mediaplayer/FileBrowser.qml index a2028f4..a111177 100644 --- a/basicsuite/mediaplayer/FileBrowser.qml +++ b/basicsuite/mediaplayer/FileBrowser.qml @@ -55,7 +55,7 @@ import QtDeviceUtilities.QtButtonImageProvider 1.0 Item { id: fileBrowser - property string folder: "file:///data/videos" + property string folder: VideosLocation signal fileSelected(string file) diff --git a/basicsuite/mediaplayer/ImageButton.qml b/basicsuite/mediaplayer/ImageButton.qml index cb4dcb4..66888ef 100644 --- a/basicsuite/mediaplayer/ImageButton.qml +++ b/basicsuite/mediaplayer/ImageButton.qml @@ -74,6 +74,8 @@ Item { visible: true opacity: pressed ? 0.6 : 1 smooth: true + height: toolbarMenuButtons.height + width: height } ColorOverlay { diff --git a/basicsuite/mediaplayer/ParameterPanel.qml b/basicsuite/mediaplayer/ParameterPanel.qml index 81bba63..b67381a 100644 --- a/basicsuite/mediaplayer/ParameterPanel.qml +++ b/basicsuite/mediaplayer/ParameterPanel.qml @@ -51,11 +51,10 @@ import QtQuick 2.0 Rectangle { id: root - height: view.model.count * sliderHeight color: _backgroundColor property color lineColor: "black" property real spacing: 10 - property real sliderHeight: 50 + property real sliderHeight: height * 0.4 property bool isMouseAbove: mouseAboveMonitor.containsMouse property ListModel model: ListModel { } @@ -82,15 +81,16 @@ Rectangle { anchors { top: parent.top bottom: parent.bottom - leftMargin: 15 + leftMargin: itemMargin left: parent.left } horizontalAlignment: Text.AlignRight verticalAlignment: Text.AlignVCenter - font.pixelSize: 20 + font.pixelSize: defaultFontSize font.capitalization: Font.Capitalize font.family: appFont - width: 90 + width: root.width * 0.2 + fontSizeMode: Text.Fit } PlayerSlider { @@ -98,9 +98,9 @@ Rectangle { verticalCenter: text.verticalCenter verticalCenterOffset: 3 left: text.right - leftMargin: 20 + leftMargin: itemMargin right: parent.right - rightMargin: 20 + rightMargin: itemMargin } value: model.value onValueChanged: view.model.setProperty(index, "value", value) diff --git a/basicsuite/mediaplayer/VolumeControl.qml b/basicsuite/mediaplayer/VolumeControl.qml index 4369d04..ab8bec8 100644 --- a/basicsuite/mediaplayer/VolumeControl.qml +++ b/basicsuite/mediaplayer/VolumeControl.qml @@ -59,7 +59,6 @@ Item { property alias volume: volumeSlider.value property bool muted: root.volume == 0.0 property bool volumeItemUp: volumeItem.y == (volumeItem.height + volumeItem.height * 0.05) - //Volume Controls QtButton{ id: toggleVolumeButton @@ -85,7 +84,7 @@ Item { volumeItem.opacity = 0; if (volumeItem.y === 0) - volumeItem.y -= (volumeItem.height + volumeItem.height * 0.05); + volumeItem.y -= (volumeItem.height + itemMargin); else if (volumeItem !== 0) volumeItem.y = 0; } @@ -121,7 +120,7 @@ Item { Slider { id: volumeSlider anchors.bottom: muteVolumeButton.top - anchors.bottomMargin: parent.height * 0.05 + anchors.bottomMargin: itemMargin anchors.top: parent.top anchors.horizontalCenter: muteVolumeButton.horizontalCenter orientation: Qt.Vertical diff --git a/basicsuite/mediaplayer/main.qml b/basicsuite/mediaplayer/main.qml index 527e735..741309d 100644 --- a/basicsuite/mediaplayer/main.qml +++ b/basicsuite/mediaplayer/main.qml @@ -57,6 +57,8 @@ FocusScope { focus: true property real buttonHeight: height * 0.05 + property real itemMargin: Math.min(width * 0.025, height * 0.025) + property real defaultFontSize: height * 0.0375 MouseArea { id: mouseActivityMonitor @@ -119,35 +121,55 @@ FocusScope { } } - ParameterPanel { - id: parameterPanel - opacity: controlBar.opacity * 0.9 - visible: effectSelectionPanel.visible && model.count !== 0 - height: 116 - width: 500 + Rectangle { + id: effectsWrapper + color: "transparent" + Behavior on opacity { NumberAnimation { } } anchors { - bottomMargin: 15 + top: parent.top bottom: controlBar.top - right: effectSelectionPanel.left - rightMargin: 15 + bottomMargin: itemMargin + right: parent.right + left: parent.left } - } + visible: opacity > 0 + opacity: 0 - EffectSelectionPanel { - id: effectSelectionPanel - visible: false - opacity: controlBar.opacity * 0.9 - anchors { - bottom: controlBar.top - right: controlBar.right - bottomMargin: 15 + ParameterPanel { + id: parameterPanel + opacity: controlBar.opacity * 0.9 + visible: effectSelectionPanel.visible && model.count !== 0 + height: parent.height * 0.15 + width: parent.width * 0.4 + anchors { + bottom: parent.bottom + right: effectSelectionPanel.left + rightMargin: itemMargin + } + z: 10 } - width: 250 - height: 350 - itemHeight: 80 - onEffectSourceChanged: { - content.effectSource = effectSource - parameterPanel.model = content.effect.parameters + + EffectSelectionPanel { + id: effectSelectionPanel + opacity: controlBar.opacity * 0.9 + width: parent.width * 0.225 + height: parent.height * 0.7 + anchors { + right: parent.right + bottom: parent.bottom + } + z: 10 + onEffectSourceChanged: { + content.effectSource = effectSource + parameterPanel.model = content.effect.parameters + } + itemHeight: height / 8 + } + + MouseArea{ + anchors.fill: parent + onClicked: effectsWrapper.opacity = 0 + enabled: effectsWrapper.opacity !== 0 } } @@ -234,7 +256,7 @@ FocusScope { function init() { content.init() - content.openVideo("file:///data/videos/Qt_video_720p.webm"); + content.openVideo(DefaultVideoUrl); } function openVideo() { @@ -250,7 +272,7 @@ FocusScope { } function openFX() { - effectSelectionPanel.visible = !effectSelectionPanel.visible; + effectsWrapper.opacity = effectsWrapper.opacity === 0 ? 1 : 0 } function close() { -- cgit v1.2.3