diff options
Diffstat (limited to 'basicsuite/mediaplayer')
38 files changed, 367 insertions, 355 deletions
diff --git a/basicsuite/mediaplayer/Content.qml b/basicsuite/mediaplayer/Content.qml index 00ad381..00ad381 100755..100644 --- a/basicsuite/mediaplayer/Content.qml +++ b/basicsuite/mediaplayer/Content.qml diff --git a/basicsuite/mediaplayer/ContentVideo.qml b/basicsuite/mediaplayer/ContentVideo.qml index 90cf21c..90cf21c 100755..100644 --- a/basicsuite/mediaplayer/ContentVideo.qml +++ b/basicsuite/mediaplayer/ContentVideo.qml diff --git a/basicsuite/mediaplayer/ControlBar.qml b/basicsuite/mediaplayer/ControlBar.qml index 05d253e..cdf27f2 100755..100644 --- 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: _backgroundColor 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,14 +135,37 @@ 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 - spacing: 22 - + anchors.bottom: seekControl.top + spacing: itemMargin + height: parent.height * 0.275 ImageButton { id: fxButton imageSource: "images/FXButton.png" @@ -191,6 +178,7 @@ Rectangle { ImageButton { id: fileButton imageSource: "images/FileButton.png" + onClicked: { openFile(); } @@ -198,47 +186,29 @@ Rectangle { ImageButton { id: urlButton imageSource: "images/UrlButton.png" + onClicked: { openURL(); } } - } - -// 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 -// } + ImageButton{ + id: infoButton - //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; + imageSource: "images/info_icon.svg" + onClicked: metadataView.opacity = 1 + visible: content.videoPlayer.mediaPlayer.status !== MediaPlayer.NoMedia && content.videoPlayer.mediaPlayer.status !== MediaPlayer.InvalidMedia } + } - Component.onCompleted: { - seekable = mediaPlayer.seekable; + VolumeControl { + id: volumeControl + anchors.bottom: parent.bottom + anchors.right: parent.right + onVolumeChanged: mediaPlayer.volume = volume + + Connections { + target: mediaPlayer + onVolumeChanged: volumeControl.volume = mediaPlayer.volume } } @@ -264,7 +234,6 @@ Rectangle { } onSeekableChanged: { - // console.log("seekableChanged: " + mediaPlayer.seekable); seekControl.seekable = mediaPlayer.seekable; } } diff --git a/basicsuite/mediaplayer/EffectSelectionPanel.qml b/basicsuite/mediaplayer/EffectSelectionPanel.qml index 4f29f50..9aee910 100755..100644 --- a/basicsuite/mediaplayer/EffectSelectionPanel.qml +++ b/basicsuite/mediaplayer/EffectSelectionPanel.qml @@ -51,8 +51,7 @@ import QtQuick 2.0 Rectangle { id: root - color: "#BB333333" - height: 78 + color: _backgroundColor property int itemHeight: 25 property string effectSource: "" property bool isMouseAbove: mouseAboveMonitor.containsMouse @@ -76,14 +75,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 +103,7 @@ Rectangle { height: 0.8 * itemHeight text: name color: "white" + font.family: appFont } states: [ @@ -140,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 @@ -153,18 +153,20 @@ Rectangle { } delegate: Item { - height: 40 + height: itemHeight width: parent.width - Rectangle { + property bool isSelected: list.currentIndex == index + Text { + color: parent.isSelected ? _primaryGreen : "white" + text: name + anchors.centerIn: parent + font.pixelSize: defaultFontSize + 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..a111177 100644 --- a/basicsuite/mediaplayer/FileBrowser.qml +++ b/basicsuite/mediaplayer/FileBrowser.qml @@ -50,11 +50,12 @@ import QtQuick 2.0 import Qt.labs.folderlistmodel 2.0 import QtQuick.Controls 1.4 +import QtDeviceUtilities.QtButtonImageProvider 1.0 Item { id: fileBrowser - property string folder: "file:///data/videos" + property string folder: VideosLocation signal fileSelected(string file) @@ -77,7 +78,7 @@ Item { Rectangle { id: root - color: "white" + color: _backgroundColor 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: mouseRegion.pressed ? _primaryGreen : "white" elide: Text.ElideRight } @@ -182,16 +184,17 @@ Item { Rectangle { width: parent.width; height: 70 - color: "#f6f6f6" + color: _backgroundColor id: titleBar - Button { + QtButton { id: backButton text: qsTr("Back") anchors.left: parent.left anchors.leftMargin: parent.width * .05 anchors.verticalCenter: parent.verticalCenter onClicked: up() + fillColor: _primaryGreen } Text { @@ -203,28 +206,28 @@ 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 onClicked: fileBrowser.selectFile("") + fillColor: _primaryGreen } Rectangle { width: parent.width anchors.bottom: parent.bottom height: 2 - color: "#e4e4e4" + color: _primaryGrey } } diff --git a/basicsuite/mediaplayer/ImageButton.qml b/basicsuite/mediaplayer/ImageButton.qml index 31bd315..66888ef 100755..100644 --- 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 @@ -73,15 +74,17 @@ Item { visible: true opacity: pressed ? 0.6 : 1 smooth: true + height: toolbarMenuButtons.height + width: height } -// 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 ? _primaryGreen : "white" + visible: checked || hover || pressed + } MouseArea { id: mouseArea diff --git a/basicsuite/mediaplayer/MetadataView.qml b/basicsuite/mediaplayer/MetadataView.qml index e85df5e..34b53b4 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: _backgroundColor + opacity: 0.9 anchors.centerIn: parent anchors.verticalCenterOffset: -50 - + border.color: _primaryGrey + 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..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: "#BB333333" + 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,24 +81,26 @@ 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 - width: 90 + font.family: appFont + width: root.width * 0.2 + fontSizeMode: Text.Fit } - Slider { + PlayerSlider { anchors { 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/PlaybackControl.qml b/basicsuite/mediaplayer/PlaybackControl.qml index 66c1c92..99b1d5c 100755..100644 --- 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: _primaryGreen + 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: _primaryGreen + 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/Slider.qml b/basicsuite/mediaplayer/PlayerSlider.qml index 0cacbc7..0ec52b5 100644 --- a/basicsuite/mediaplayer/Slider.qml +++ b/basicsuite/mediaplayer/PlayerSlider.qml @@ -51,8 +51,7 @@ import QtQuick 2.0 Item { id: slider - - height: handleBack.height + height: handle.height // value is read/write. property real value: 0 property real maximum: 1 @@ -81,8 +80,9 @@ Item { id: background width: slider.width anchors.verticalCenter: slider.verticalCenter - height: 2 - color: "#666666" + height: 5 + color: _primaryGrey + radius: 2 MouseArea { id: backgroundMouse @@ -119,29 +119,19 @@ Item { anchors.right: handle.right anchors.rightMargin: handle.width / 2 visible: slider.enabled - color: "#98c66c" + color: "white" + radius: 2 } Rectangle { - id: handleBack + id: handle width: 40 height: width radius: width / 2 - color: "#8898c66c" + color: _primaryGreen 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 + visible: true } } diff --git a/basicsuite/mediaplayer/SeekControl.qml b/basicsuite/mediaplayer/SeekControl.qml index a7ca93f..16987f7 100755..100644 --- 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/UrlBar.qml b/basicsuite/mediaplayer/UrlBar.qml index dbaa8d0..73e9cc5 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: _backgroundColor + opacity: 0.8 + border.color: _primaryGrey + 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: _primaryGrey + 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 index f2bd427..ab8bec8 100755..100644 --- 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: _primaryGreen + + 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 + itemMargin); + 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: _primaryGrey + 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: itemMargin + 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: _primaryGrey + 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: _primaryGreen + } + } + + 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 Binary files differindex 413872a..413872a 100755..100644 --- a/basicsuite/mediaplayer/images/FullscreenButton.png +++ b/basicsuite/mediaplayer/images/FullscreenButton.png diff --git a/basicsuite/mediaplayer/images/PlaybackSlider.png b/basicsuite/mediaplayer/images/PlaybackSlider.png Binary files differindex 3716315..3716315 100755..100644 --- a/basicsuite/mediaplayer/images/PlaybackSlider.png +++ b/basicsuite/mediaplayer/images/PlaybackSlider.png diff --git a/basicsuite/mediaplayer/images/SliderHandle.png b/basicsuite/mediaplayer/images/SliderHandle.png Binary files differindex 5206100..5206100 100755..100644 --- a/basicsuite/mediaplayer/images/SliderHandle.png +++ b/basicsuite/mediaplayer/images/SliderHandle.png diff --git a/basicsuite/mediaplayer/images/SliderProgress.png b/basicsuite/mediaplayer/images/SliderProgress.png Binary files differindex e0efc87..e0efc87 100755..100644 --- a/basicsuite/mediaplayer/images/SliderProgress.png +++ b/basicsuite/mediaplayer/images/SliderProgress.png diff --git a/basicsuite/mediaplayer/images/VolumeDown.png b/basicsuite/mediaplayer/images/VolumeDown.png Binary files differindex 60c626d..60c626d 100755..100644 --- a/basicsuite/mediaplayer/images/VolumeDown.png +++ b/basicsuite/mediaplayer/images/VolumeDown.png diff --git a/basicsuite/mediaplayer/images/VolumeUp.png b/basicsuite/mediaplayer/images/VolumeUp.png Binary files differindex 886fde7..886fde7 100755..100644 --- a/basicsuite/mediaplayer/images/VolumeUp.png +++ b/basicsuite/mediaplayer/images/VolumeUp.png 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 @@ +<svg id="back" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>back_icon</title><path d="M26.57,43.5a2.61,2.61,0,0,1-2.1-1.06L10.74,24a2.62,2.62,0,0,1,0-3.12L25.06,1.56a2.62,2.62,0,1,1,4.2,3.12L16.1,22.4,28.67,39.32a2.62,2.62,0,0,1-2.1,4.18Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="bluetooth" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>bluetooth_icon</title><path d="M22.38,43.5a1.79,1.79,0,0,1-1.79-1.79V25.82l-9.08,7.86A1.79,1.79,0,1,1,9.18,31l10.37-9L9.1,13a1.79,1.79,0,0,1,2.34-2.7l9.16,7.92V2.29a1.79,1.79,0,0,1,3-1.35l11.34,9.81a1.79,1.79,0,0,1,0,2.7L25,22l9.88,8.55a1.79,1.79,0,0,1,0,2.7L23.55,43.06A1.79,1.79,0,0,1,22.38,43.5ZM24.17,26V37.81L31,31.9Zm0-19.8V18L31,12.1Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>close_icon</title><path d="M25.5,22,42.09,4.78a2.52,2.52,0,1,0-3.64-3.5L22,18.36,5.55,1.27a2.53,2.53,0,0,0-3.64,3.5L18.49,22,1.91,39.22a2.53,2.53,0,0,0,3.64,3.5L22,25.64,38.45,42.73a2.52,2.52,0,1,0,3.64-3.5Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>header_toggle_icon</title><g style="isolation:isolate"><g id="toggle"><g style="opacity:0.35000000000000003;mix-blend-mode:multiply"><polygon points="3.36 15 23.27 33 42.64 15 3.36 15" style="fill:none;stroke:#09102b;stroke-linejoin:round;stroke-width:2px"/></g><polygon points="2.36 13 22.27 31 41.64 13 2.36 13" style="fill:none;stroke:#fff;stroke-linejoin:round;stroke-width:2px"/></g></g></svg>
\ 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 @@ +<svg id="info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>info_icon</title><path d="M21.86,15.59a2,2,0,0,1-1.33-.48A1.69,1.69,0,0,1,20,13.77a1.68,1.68,0,0,1,.56-1.3A1.91,1.91,0,0,1,21.86,12a1.93,1.93,0,0,1,1.28.46,1.65,1.65,0,0,1,.56,1.35,1.7,1.7,0,0,1-.54,1.34,1.88,1.88,0,0,1-1.29.48m1.83,3.83V30.14a2.39,2.39,0,0,1-.53,1.68,1.76,1.76,0,0,1-1.35.57,1.67,1.67,0,0,1-1.32-.58A2.47,2.47,0,0,1,20,30.14V19.53a2.38,2.38,0,0,1,.51-1.66,1.71,1.71,0,0,1,1.32-.56,1.78,1.78,0,0,1,1.35.56,2.16,2.16,0,0,1,.53,1.55" style="fill:#fff"/><path d="M21.89,43.5A21.5,21.5,0,0,1,6.7,6.8,21.5,21.5,0,0,1,37.11,37.2a21.38,21.38,0,0,1-15.21,6.3m0-39.35A17.85,17.85,0,0,0,9.28,34.62,17.85,17.85,0,1,0,34.52,9.38,17.73,17.73,0,0,0,21.9,4.15" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="language" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>language_icon</title><path d="M22,43.5A21.5,21.5,0,1,1,43.5,22,21.52,21.52,0,0,1,22,43.5ZM22,4.12A17.88,17.88,0,1,0,39.88,22,17.9,17.9,0,0,0,22,4.12Z" style="fill:#fff"/><path d="M22,42.6C15.22,42.6,9.7,33.36,9.7,22S15.22,1.41,22,1.41,34.29,10.64,34.29,22,28.78,42.6,22,42.6ZM22,3.22c-5.78,0-10.48,8.43-10.48,18.78S16.22,40.78,22,40.78,32.48,32.36,32.48,22,27.78,3.22,22,3.22Z" style="fill:#fff"/><path d="M22,42.6a.9.9,0,0,1-.91-.91V2.31A.9.9,0,0,1,22,1.41,20.59,20.59,0,0,1,22,42.6ZM22.9,3.24V40.76a18.78,18.78,0,0,0,0-37.53Z" style="fill:#fff"/><path d="M40.41,29.85H3.59a.91.91,0,0,1-.85-.59,20.37,20.37,0,0,1,0-14.52.91.91,0,0,1,.85-.59H40.41a.91.91,0,0,1,.85.59,20.34,20.34,0,0,1,0,14.52.91.91,0,0,1-.85.59ZM4.23,28H39.77a18.45,18.45,0,0,0,0-12.07H4.23A18.49,18.49,0,0,0,4.23,28Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="mute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>mute_icon</title><path d="M17.92,40.48A2,2,0,0,1,16.68,40L7.59,32.77H2a2,2,0,0,1-2-2V13.22a2,2,0,0,1,2-2h5.6L16.68,4A2,2,0,0,1,19.9,5.5v33a2,2,0,0,1-2,2ZM4,28.8H8.29a2,2,0,0,1,1.24.44l6.41,5.13V9.64L9.52,14.77a2,2,0,0,1-1.24.44H4V28.8Z" style="fill:#fff"/><path d="M42,32.41a2,2,0,0,1-1.4-.58L23.77,15a2,2,0,0,1,2.81-2.81L43.42,29A2,2,0,0,1,42,32.41Z" style="fill:#fff"/><path d="M25.29,32.52a2,2,0,0,1-1.42-3.37L40.48,12.08a2,2,0,0,1,2.85,2.77L26.71,31.92a2,2,0,0,1-1.42.6Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>pause_icon</title><path d="M15.51,43.5H9.76a4.65,4.65,0,0,1-4.64-4.64V5.14A4.65,4.65,0,0,1,9.76.5h5.75a4.65,4.65,0,0,1,4.64,4.64V38.86a4.65,4.65,0,0,1-4.64,4.64ZM9.76,4.55a.6.6,0,0,0-.59.59V38.86a.6.6,0,0,0,.59.59h5.75a.6.6,0,0,0,.59-.59V5.14a.6.6,0,0,0-.59-.59Z" style="fill:#fff"/><path d="M34.24,43.5H28.49a4.65,4.65,0,0,1-4.64-4.64V5.14A4.65,4.65,0,0,1,28.49.5h5.75a4.65,4.65,0,0,1,4.64,4.64V38.86a4.65,4.65,0,0,1-4.64,4.64ZM28.49,4.55a.6.6,0,0,0-.59.59V38.86a.6.6,0,0,0,.59.59h5.75a.6.6,0,0,0,.59-.59V5.14a.6.6,0,0,0-.59-.59Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>play_icon</title><path d="M6.58,43.82c-2.4,0-4.08-1.91-4.08-4.65V4.83C2.5,2.09,4.18.18,6.58.18A5.29,5.29,0,0,1,9.22.95L39,18.12A4.56,4.56,0,0,1,41.5,22,4.56,4.56,0,0,1,39,25.88L9.22,43.05a5.28,5.28,0,0,1-2.65.77ZM6.64,4.28a5.24,5.24,0,0,0,0,.55V39.17a1.56,1.56,0,0,0,.08.55,1.74,1.74,0,0,0,.51-.21L36.92,22.33a1.61,1.61,0,0,0,.46-.36c-.06,0-.19-.16-.46-.31L7.18,4.49a1.6,1.6,0,0,0-.54-.22Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="power" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>power_icon</title><path d="M22,17.4a1.82,1.82,0,0,1-1.82-1.82V2.3a1.82,1.82,0,0,1,3.65,0V15.57A1.82,1.82,0,0,1,22,17.4Z" style="fill:#fff"/><path d="M22,43.48A19.15,19.15,0,0,1,15.7,6.25,1.82,1.82,0,0,1,16.9,9.7a15.51,15.51,0,1,0,10.19,0,1.82,1.82,0,0,1,1.2-3.45A19.15,19.15,0,0,1,22,43.48Z" style="fill:#fff"/></svg>
\ No newline at end of file diff --git a/basicsuite/mediaplayer/images/qt-logo.png b/basicsuite/mediaplayer/images/qt-logo.png Binary files differindex f3e8f29..f3e8f29 100755..100644 --- a/basicsuite/mediaplayer/images/qt-logo.png +++ b/basicsuite/mediaplayer/images/qt-logo.png 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 @@ +<svg id="settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>settings_icon</title><path d="M41,17.82H35a14.73,14.73,0,0,0-1.47-3.24l4-4a2.38,2.38,0,0,0,0-3.38L35.83,5.53a2.39,2.39,0,0,0-3.38,0l-4,4a14.34,14.34,0,0,0-3.53-1.43V2.89A2.39,2.39,0,0,0,22.49.5H20.1a2.39,2.39,0,0,0-2.39,2.39V8.14a14,14,0,0,0-3.84,1.61L10.49,6.37a2.4,2.4,0,0,0-3.38,0L5.42,8.06a2.4,2.4,0,0,0,0,3.38l3.44,3.44A14.24,14.24,0,0,0,7.28,19H2.79A2.39,2.39,0,0,0,.39,21.4v2.39a2.39,2.39,0,0,0,2.39,2.38h4.8a14,14,0,0,0,1.93,4L6.27,33.4a2.4,2.4,0,0,0,0,3.38L8,38.47a2.4,2.4,0,0,0,3.38,0L15,34.84a13.89,13.89,0,0,0,3.94,1.27v5A2.4,2.4,0,0,0,21.3,43.5h2.39a2.4,2.4,0,0,0,2.39-2.39V35.5a14,14,0,0,0,3.38-1.72l3.85,3.85a2.4,2.4,0,0,0,3.38,0l1.69-1.69a2.38,2.38,0,0,0,0-3.38l-4.21-4.22A14.15,14.15,0,0,0,35.31,25H41a2.39,2.39,0,0,0,2.39-2.39V20.21A2.4,2.4,0,0,0,41,17.82ZM21.3,31.5A9.5,9.5,0,1,1,30.8,22,9.5,9.5,0,0,1,21.3,31.5Z" style="fill:#fff"/></svg>
\ 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 @@ +<svg id="settings_menu_launcher" data-name="settings menu launcher" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>settingsmenu_launcher_icon</title><rect y="1.86" width="44" height="9.43" style="fill:#9d9faa"/><rect y="17.57" width="44" height="9.43" style="fill:#9d9faa"/><rect y="33.29" width="44" height="7.86" style="fill:#9d9faa"/><rect y="1.86" width="44" height="9.43" style="fill:#9ca0aa"/><rect y="17.57" width="44" height="9.43" style="fill:#9ca0aa"/><rect y="33.29" width="44" height="7.86" style="fill:#9ca0aa"/></svg>
\ 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 @@ +<svg id="stop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>stop_icon</title><path d="M37.66,44H6.34A6.35,6.35,0,0,1,0,37.66V6.34A6.35,6.35,0,0,1,6.34,0H37.66A6.35,6.35,0,0,1,44,6.34V37.66A6.35,6.35,0,0,1,37.66,44ZM6.34,4.14a2.2,2.2,0,0,0-2.2,2.2V37.66a2.2,2.2,0,0,0,2.2,2.2H37.66a2.2,2.2,0,0,0,2.2-2.2V6.34a2.2,2.2,0,0,0-2.2-2.2Z" style="fill:#fff"/></svg>
\ No newline at end of file diff --git a/basicsuite/mediaplayer/images/titlebar.sci b/basicsuite/mediaplayer/images/titlebar.sci index 0418d94..0418d94 100755..100644 --- a/basicsuite/mediaplayer/images/titlebar.sci +++ b/basicsuite/mediaplayer/images/titlebar.sci 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 @@ +<svg id="volume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 44"><title>volume_icon</title><path d="M33.13,40.13a2,2,0,0,1-1.4-3.39,20.87,20.87,0,0,0,0-29.48,2,2,0,1,1,2.81-2.81,24.85,24.85,0,0,1,0,35.09,2,2,0,0,1-1.4.58Z" style="fill:#fff"/><path d="M27.38,34.38A2,2,0,0,1,26,31a12.72,12.72,0,0,0,0-18,2,2,0,0,1,2.81-2.81,16.69,16.69,0,0,1,0,23.59,2,2,0,0,1-1.4.58Z" style="fill:#fff"/><path d="M20.13,40.48A2,2,0,0,1,18.89,40L9.8,32.77H4.19a2,2,0,0,1-2-2V13.22a2,2,0,0,1,2-2h5.6L18.89,4A2,2,0,0,1,22.12,5.5v33a2,2,0,0,1-2,2ZM6.18,28.8h4.32a2,2,0,0,1,1.24.44l6.41,5.13V9.64l-6.42,5.14a2,2,0,0,1-1.24.44H6.18V28.8Z" style="fill:#fff"/></svg>
\ No newline at end of file diff --git a/basicsuite/mediaplayer/main.qml b/basicsuite/mediaplayer/main.qml index d1667bf..741309d 100755..100644 --- a/basicsuite/mediaplayer/main.qml +++ b/basicsuite/mediaplayer/main.qml @@ -50,11 +50,16 @@ import QtQuick 2.0 import QtMultimedia 5.0 +import QtDeviceUtilities.QtButtonImageProvider 1.0 FocusScope { id: applicationWindow 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 anchors.fill: parent @@ -114,42 +119,57 @@ FocusScope { onOpenFX: { applicationWindow.openFX(); } - - onToggleFullScreen: { -// viewer.toggleFullscreen(); - } } - ParameterPanel { - id: parameterPanel - opacity: controlBar.opacity - 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 - anchors { - bottom: controlBar.top - right: controlBar.right - // rightMargin: 15 - 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 } } @@ -165,35 +185,6 @@ FocusScope { } } - Rectangle { - 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 - } - } - MetadataView { id: metadataView mediaPlayer: content.videoPlayer.mediaPlayer @@ -223,7 +214,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 +231,6 @@ FocusScope { } return; } else if (applicationWindow.isFullScreen && event.key === Qt.Key_Escape) { -// viewer.toggleFullscreen(); return; } @@ -267,14 +256,10 @@ FocusScope { function init() { content.init() - content.openVideo("file:///data/videos/Qt_video_720p.webm"); + content.openVideo(DefaultVideoUrl); } function openVideo() { - //videoFileBrowser.show() - // var videoFile = viewer.openFileDialog(); - // if (videoFile != "") - // content.openVideo(videoFile); fileBrowser.show() } @@ -287,7 +272,7 @@ FocusScope { } function openFX() { - effectSelectionPanel.visible = !effectSelectionPanel.visible; + effectsWrapper.opacity = effectsWrapper.opacity === 0 ? 1 : 0 } function close() { diff --git a/basicsuite/mediaplayer/mediaplayer.pro b/basicsuite/mediaplayer/mediaplayer.pro index 4667caf..c56ba88 100644 --- a/basicsuite/mediaplayer/mediaplayer.pro +++ b/basicsuite/mediaplayer/mediaplayer.pro @@ -15,8 +15,8 @@ content.files = \ MetadataView.qml \ ParameterPanel.qml \ PlaybackControl.qml \ + PlayerSlider.qml \ SeekControl.qml \ - Slider.qml \ UrlBar.qml \ VolumeControl.qml \ Effects \ diff --git a/basicsuite/mediaplayer/preview_l.jpg b/basicsuite/mediaplayer/preview_l.jpg Binary files differindex f6cc262..98f528e 100644 --- a/basicsuite/mediaplayer/preview_l.jpg +++ b/basicsuite/mediaplayer/preview_l.jpg |