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 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