From c1c9c71b08915a27538e34e422255d53b7bf1fdf Mon Sep 17 00:00:00 2001 From: Joseph Donofry Date: Tue, 9 Nov 2021 22:17:00 -0500 Subject: [PATCH] Move rest of controls to separate file --- .../qml/delegates/PlayableMediaMessage.qml | 318 +++++++----------- resources/qml/ui/media/MediaControls.qml | 141 ++++++++ resources/qml/ui/media/VolumeControl.qml | 67 ++-- resources/qml/ui/media/qmldir | 3 +- resources/res.qrc | 1 + 5 files changed, 302 insertions(+), 228 deletions(-) create mode 100644 resources/qml/ui/media/MediaControls.qml diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml index ceeeeb1a..3af3a993 100644 --- a/resources/qml/delegates/PlayableMediaMessage.qml +++ b/resources/qml/delegates/PlayableMediaMessage.qml @@ -11,6 +11,8 @@ import QtQuick.Layouts 1.2 import im.nheko 1.0 ColumnLayout { + id: content + required property double proportionalHeight required property int type required property int originalWidth @@ -22,52 +24,51 @@ ColumnLayout { function durationToString(duration) { function maybeZeroPrepend(time) { - return (time < 10) ? "0" + time.toString() : - time.toString() + return (time < 10) ? "0" + time.toString() : time.toString(); } - var totalSeconds = Math.floor(duration / 1000) - var seconds = totalSeconds % 60 - var minutes = (Math.floor(totalSeconds / 60)) % 60 - var hours = (Math.floor(totalSeconds / (60 * 24))) % 24 - // Always show minutes and don't prepend zero into the leftmost element - var ss = maybeZeroPrepend(seconds) - var mm = (hours > 0) ? maybeZeroPrepend(minutes) : minutes.toString() - var hh = hours.toString() - if (hours < 1) { - return mm + ":" + ss - } - return hh + ":" + mm + ":" + ss + var totalSeconds = Math.floor(duration / 1000); + var seconds = totalSeconds % 60; + var minutes = (Math.floor(totalSeconds / 60)) % 60; + var hours = (Math.floor(totalSeconds / (60 * 24))) % 24; + // Always show minutes and don't prepend zero into the leftmost element + var ss = maybeZeroPrepend(seconds); + var mm = (hours > 0) ? maybeZeroPrepend(minutes) : minutes.toString(); + var hh = hours.toString(); + if (hours < 1) + return mm + ":" + ss; + + return hh + ":" + mm + ":" + ss; } - id: content - Layout.fillWidth: true + MxcMedia { id: mxcmedia + // TODO: Show error in overlay or so? onError: console.log(error) roomm: room - // desiredVolume is a float from 0.0 -> 1.0, MediaPlayer volume is an int from 0 to 100 - // this value automatically gets clamped for us between these two values. - volume: volumeSlider.desiredVolume * 100 - muted: volumeSlider.muted + // desiredVolume is a float from 0.0 -> 1.0, MediaPlayer volume is an int from 0 to 100 + // this value automatically gets clamped for us between these two values. + volume: mediaControls.desiredVolume * 100 + muted: mediaControls.muted } Rectangle { id: videoContainer - visible: type == MtxEvent.VideoMessage + //property double tempWidth: Math.min(parent ? parent.width : undefined, model.data.width < 1 ? 400 : /////model.data.width) // property double tempWidth: (model.data.width < 1) ? 400 : model.data.width // property double tempHeight: tempWidth * model.data.proportionalHeight //property double tempWidth: Math.min(parent ? parent.width : undefined, originalWidth < 1 ? 400 : originalWidth) - property double tempWidth: Math.min(parent ? parent.width: undefined, originalWidth < 1 ? 400 : originalWidth) + property double tempWidth: Math.min(parent ? parent.width : undefined, originalWidth < 1 ? 400 : originalWidth) property double tempHeight: tempWidth * proportionalHeight - property double divisor: isReply ? 4 : 2 property bool tooHigh: tempHeight > timelineRoot.height / divisor - color: Nheko.colors.window + visible: type == MtxEvent.VideoMessage + color: Nheko.colors.window Layout.preferredHeight: tooHigh ? timelineRoot.height / divisor : tempHeight Layout.preferredWidth: tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth Layout.maximumWidth: Layout.preferredWidth @@ -77,217 +78,144 @@ ColumnLayout { source: thumbnailUrl.replace("mxc://", "image://MxcImage/") asynchronous: true fillMode: Image.PreserveAspectFit + // Button and window colored overlay to cache media Item { // Display over video controls z: videoOutput.z + 1 visible: !mxcmedia.loaded anchors.fill: parent + //color: Nheko.colors.window //opacity: 0.5 Image { - property color buttonColor: (cacheVideoArea.containsMouse) ? Nheko.colors.highlight : - Nheko.colors.text + property color buttonColor: (cacheVideoArea.containsMouse) ? Nheko.colors.highlight : Nheko.colors.text anchors.verticalCenter: parent.verticalCenter anchors.horizontalCenter: parent.horizontalCenter - source: "image://colorimage/:/icons/icons/ui/arrow-pointing-down.png?"+buttonColor + source: "image://colorimage/:/icons/icons/ui/arrow-pointing-down.png?" + buttonColor } + MouseArea { id: cacheVideoArea + anchors.fill: parent hoverEnabled: true enabled: !mxcmedia.loaded onClicked: mxcmedia.eventId = eventId } + } + VideoOutput { id: videoOutput + clip: true anchors.fill: parent fillMode: VideoOutput.PreserveAspectFit source: mxcmedia flushMode: VideoOutput.FirstFrame - // TODO: once we can use Qt 5.12, use HoverHandler + MediaControls { + id: mediaControls + + anchors.fill: parent + x: videoOutput.contentRect.x + y: videoOutput.contentRect.y + width: videoOutput.contentRect.width + height: videoOutput.contentRect.height + positionValue: mxcmedia.position + duration: mxcmedia.duration + mediaLoaded: mxcmedia.loaded + mediaState: mxcmedia.state + volumeOrientation: Qt.Vertical + onPositionChanged: mxcmedia.position = position + onActivated: mxcmedia.state == MediaPlayer.PlayingState ? mxcmedia.pause() : mxcmedia.play() + } + + } + + } + + } + // Audio player + + // TODO: share code with the video player + Rectangle { + id: audioControlRect + + property int controlHeight: 25 + + visible: type != MtxEvent.VideoMessage + Layout.preferredHeight: 40 + + RowLayout { + anchors.fill: parent + width: parent.width + + // Play/pause button + Image { + id: audioPlaybackStateImage + + property color controlColor: (audioPlaybackStateArea.containsMouse) ? Nheko.colors.highlight : Nheko.colors.text + + fillMode: Image.PreserveAspectFit + Layout.preferredHeight: controlRect.controlHeight + Layout.alignment: Qt.AlignVCenter + source: { + if (!mxcmedia.loaded) + return "image://colorimage/:/icons/icons/ui/arrow-pointing-down.png?" + controlColor; + + return (mxcmedia.state == MediaPlayer.PlayingState) ? "image://colorimage/:/icons/icons/ui/pause-symbol.png?" + controlColor : "image://colorimage/:/icons/icons/ui/play-sign.png?" + controlColor; + } + MouseArea { - id: playerMouseArea - // Toggle play state on clicks + id: audioPlaybackStateArea + + anchors.fill: parent + hoverEnabled: true onClicked: { - if (controlRect.shouldShowControls && - !controlRect.contains(mapToItem(controlRect, mouseX, mouseY))) { - (mxcmedia.state == MediaPlayer.PlayingState) ? - mxcmedia.pause() : - mxcmedia.play() + if (!mxcmedia.loaded) { + mxcmedia.eventId = eventId; + return ; } + (mxcmedia.state == MediaPlayer.PlayingState) ? mxcmedia.pause() : mxcmedia.play(); } - Rectangle { - id: controlRect - property int controlHeight: 25 - property bool shouldShowControls: playerMouseArea.shouldShowControls || - volumeSlider.controlsVisible + } - anchors.bottom: playerMouseArea.bottom - // Window color with 128/255 alpha - color: { - var wc = Nheko.colors.alternateBase - return Qt.rgba(wc.r, wc.g, wc.b, 0.5) - } - height: 40 - width: playerMouseArea.width - opacity: shouldShowControls ? 1 : 0 - // Fade controls in/out - Behavior on opacity { - OpacityAnimator { - duration: 100 - } - } + } - RowLayout { - anchors.fill: parent - width: parent.width - // Play/pause button - Image { - id: playbackStateImage - fillMode: Image.PreserveAspectFit - Layout.preferredHeight: controlRect.controlHeight - Layout.alignment: Qt.AlignVCenter - property color controlColor: (playbackStateArea.containsMouse) ? - Nheko.colors.highlight : Nheko.colors.text + Label { + text: (!mxcmedia.loaded) ? "-/-" : durationToString(mxcmedia.position) + "/" + durationToString(mxcmedia.duration) + } - source: (mxcmedia.state == MediaPlayer.PlayingState) ? - "image://colorimage/:/icons/icons/ui/pause-symbol.png?"+controlColor : - "image://colorimage/:/icons/icons/ui/play-sign.png?"+controlColor - MouseArea { - id: playbackStateArea + Slider { + Layout.fillWidth: true + Layout.minimumWidth: 50 + height: controlRect.controlHeight + value: mxcmedia.position + onMoved: mxcmedia.position = value + from: 0 + to: mxcmedia.duration + } - anchors.fill: parent - hoverEnabled: true - onClicked: { - (mxcmedia.state == MediaPlayer.PlayingState) ? - mxcmedia.pause() : - mxcmedia.play() - } - } - } - Label { - text: (!mxcmedia.loaded) ? "-/-" : (durationToString(mxcmedia.position) + "/" + durationToString(mxcmedia.duration)) - color: Nheko.colors.text - } + } - Slider { - Layout.fillWidth: true - Layout.minimumWidth: 50 - height: controlRect.controlHeight - value: mxcmedia.position - onMoved: mxcmedia.position = value - from: 0 - to: mxcmedia.duration - } + } - VolumeControl { - id: volumeSlider - orientation: Qt.Vertical - Layout.rightMargin: 5 - Layout.preferredHeight: controlRect.controlHeight - } + Label { + id: fileInfoLabel - } - } - // This breaks separation of concerns but this same thing doesn't work when called from controlRect... - property bool shouldShowControls: (containsMouse && controlHideTimer.running) || - (mxcmedia.state != MediaPlayer.PlayingState) || - controlRect.contains(mapToItem(controlRect, mouseX, mouseY)) + Layout.fillWidth: true + text: body + " [" + filesize + "]" + textFormat: Text.PlainText + elide: Text.ElideRight + color: Nheko.colors.text - // For hiding controls on stationary cursor - Timer { - id: controlHideTimer - interval: 1500 //ms - repeat: false - } + background: Rectangle { + color: Nheko.colors.base + } - hoverEnabled: true - onPositionChanged: controlHideTimer.start() + } - x: videoOutput.contentRect.x - y: videoOutput.contentRect.y - width: videoOutput.contentRect.width - height: videoOutput.contentRect.height - propagateComposedEvents: true - } - } - } - } - // Audio player - // TODO: share code with the video player - Rectangle { - id: audioControlRect - - visible: type != MtxEvent.VideoMessage - property int controlHeight: 25 - Layout.preferredHeight: 40 - RowLayout { - anchors.fill: parent - width: parent.width - // Play/pause button - Image { - id: audioPlaybackStateImage - fillMode: Image.PreserveAspectFit - Layout.preferredHeight: controlRect.controlHeight - Layout.alignment: Qt.AlignVCenter - property color controlColor: (audioPlaybackStateArea.containsMouse) ? - Nheko.colors.highlight : Nheko.colors.text - - source: { - if (!mxcmedia.loaded) - return "image://colorimage/:/icons/icons/ui/arrow-pointing-down.png?"+controlColor - return (mxcmedia.state == MediaPlayer.PlayingState) ? - "image://colorimage/:/icons/icons/ui/pause-symbol.png?"+controlColor : - "image://colorimage/:/icons/icons/ui/play-sign.png?"+controlColor - } - MouseArea { - id: audioPlaybackStateArea - - anchors.fill: parent - hoverEnabled: true - onClicked: { - if (!mxcmedia.loaded) { - mxcmedia.eventId = eventId - return - } - (mxcmedia.state == MediaPlayer.PlayingState) ? - mxcmedia.pause() : - mxcmedia.play() - } - } - } - Label { - text: (!mxcmedia.loaded) ? "-/-" : - durationToString(mxcmedia.position) + "/" + durationToString(mxcmedia.duration) - } - - Slider { - Layout.fillWidth: true - Layout.minimumWidth: 50 - height: controlRect.controlHeight - value: mxcmedia.position - onMoved: mxcmedia.seek(value) - from: 0 - to: mxcmedia.duration - } - } - } - - Label { - id: fileInfoLabel - - background: Rectangle { - color: Nheko.colors.base - } - Layout.fillWidth: true - text: body + " [" + filesize + "]" - textFormat: Text.PlainText - elide: Text.ElideRight - color: Nheko.colors.text - } - } +} diff --git a/resources/qml/ui/media/MediaControls.qml b/resources/qml/ui/media/MediaControls.qml new file mode 100644 index 00000000..de3e98a7 --- /dev/null +++ b/resources/qml/ui/media/MediaControls.qml @@ -0,0 +1,141 @@ +// SPDX-FileCopyrightText: 2021 Nheko Contributors +// +// SPDX-License-Identifier: GPL-3.0-or-later + +import QtMultimedia 5.15 +import QtQuick 2.15 +import QtQuick.Controls 2.15 +import QtQuick.Layouts 1.2 +import im.nheko 1.0 + +Item { + id: control + + property alias desiredVolume: volumeSlider.desiredVolume + property alias muted: volumeSlider.muted + property alias volumeOrientation: volumeSlider.orientation + property var mediaState + property bool mediaLoaded: false + property var duration + property var positionValue: 0 + property var position + property int controlHeight: 25 + property bool shouldShowControls: playerMouseArea.shouldShowControls || volumeSlider.controlsVisible + + signal activated(real mouseX, real mouseY) + + function durationToString(duration) { + function maybeZeroPrepend(time) { + return (time < 10) ? "0" + time.toString() : time.toString(); + } + + var totalSeconds = Math.floor(duration / 1000); + var seconds = totalSeconds % 60; + var minutes = (Math.floor(totalSeconds / 60)) % 60; + var hours = (Math.floor(totalSeconds / (60 * 24))) % 24; + // Always show minutes and don't prepend zero into the leftmost element + var ss = maybeZeroPrepend(seconds); + var mm = (hours > 0) ? maybeZeroPrepend(minutes) : minutes.toString(); + var hh = hours.toString(); + if (hours < 1) + return mm + ":" + ss; + + return hh + ":" + mm + ":" + ss; + } + + MouseArea { + id: playerMouseArea + + property bool shouldShowControls: (containsMouse && controlHideTimer.running) || (control.mediaState != MediaPlayer.PlayingState) || controlRect.contains(mapToItem(controlRect, mouseX, mouseY)) + + onClicked: control.activated(mouseX, mouseY) + hoverEnabled: true + onPositionChanged: controlHideTimer.start() + onExited: controlHideTimer.start() + onEntered: controlHideTimer.start() + anchors.fill: control + propagateComposedEvents: true + } + + Rectangle { + id: controlRect + + // Window color with 128/255 alpha + color: { + var wc = Nheko.colors.alternateBase; + return Qt.rgba(wc.r, wc.g, wc.b, 0.5); + } + anchors.bottom: control.bottom + anchors.left: control.left + anchors.right: control.right + height: 40 + opacity: control.shouldShowControls ? 1 : 0 + + RowLayout { + anchors.fill: parent + width: parent.width + + // Play/pause button + Image { + id: playbackStateImage + + property color controlColor: (playbackStateArea.containsMouse) ? Nheko.colors.highlight : Nheko.colors.text + + fillMode: Image.PreserveAspectFit + Layout.preferredHeight: control.controlHeight + Layout.alignment: Qt.AlignVCenter + source: (control.mediaState == MediaPlayer.PlayingState) ? "image://colorimage/:/icons/icons/ui/pause-symbol.png?" + controlColor : "image://colorimage/:/icons/icons/ui/play-sign.png?" + controlColor + + MouseArea { + id: playbackStateArea + + anchors.fill: parent + hoverEnabled: true + onClicked: control.activated(mouseX, mouseY) + } + + } + + Label { + text: (!control.mediaLoaded) ? "-/-" : (durationToString(control.positionValue) + "/" + durationToString(control.duration)) + color: Nheko.colors.text + } + + Slider { + Layout.fillWidth: true + Layout.minimumWidth: 50 + height: control.controlHeight + value: control.positionValue + onMoved: control.position = value + from: 0 + to: control.duration + } + + VolumeControl { + id: volumeSlider + + Layout.rightMargin: 5 + Layout.preferredHeight: control.controlHeight + } + + } + + // Fade controls in/out + Behavior on opacity { + OpacityAnimator { + duration: 100 + } + + } + + } + + // For hiding controls on stationary cursor + Timer { + id: controlHideTimer + + interval: 1500 //ms + repeat: false + } + +} diff --git a/resources/qml/ui/media/VolumeControl.qml b/resources/qml/ui/media/VolumeControl.qml index b826dfc6..cd844ed5 100644 --- a/resources/qml/ui/media/VolumeControl.qml +++ b/resources/qml/ui/media/VolumeControl.qml @@ -5,101 +5,104 @@ import QtMultimedia 5.15 import QtQuick 2.15 import QtQuick.Controls 2.15 - import im.nheko 1.0 // Volume slider activator Image { + // TODO: add icons for different volume levels + id: volumeImage + property alias desiredVolume: volumeSlider.desiredVolume property alias orientation: volumeSlider.orientation property alias controlsVisible: volumeSliderRect.visible property bool muted: false - property color controlColor: (volumeImageArea.containsMouse) ? - Nheko.colors.highlight : Nheko.colors.text - - // TODO: add icons for different volume levels - id: volumeImage - source: (desiredVolume > 0 && !muted) ? - "image://colorimage/:/icons/icons/ui/volume-up.png?"+ controlColor : - "image://colorimage/:/icons/icons/ui/volume-off-indicator.png?"+ controlColor + property color controlColor: (volumeImageArea.containsMouse) ? Nheko.colors.highlight : Nheko.colors.text + source: (desiredVolume > 0 && !muted) ? "image://colorimage/:/icons/icons/ui/volume-up.png?" + controlColor : "image://colorimage/:/icons/icons/ui/volume-off-indicator.png?" + controlColor fillMode: Image.PreserveAspectFit MouseArea { - id: volumeImageArea + id: volumeImageArea + anchors.fill: parent hoverEnabled: true onExited: volumeSliderHideTimer.start() onPositionChanged: volumeSliderHideTimer.start() onClicked: volumeImage.muted = !volumeImage.muted + // For hiding volume slider after a while Timer { id: volumeSliderHideTimer + interval: 1500 repeat: false running: false } + } + Rectangle { id: volumeSliderRect + opacity: (visible) ? 1 : 0 - Behavior on opacity { - OpacityAnimator { - duration: 100 - } - } - // TODO: figure out a better way to put the slider popup above controlRect anchors.bottom: volumeImage.top anchors.bottomMargin: 10 anchors.horizontalCenter: volumeImage.horizontalCenter color: { - var wc = Nheko.colors.window - return Qt.rgba(wc.r, wc.g, wc.b, 0.5) + var wc = Nheko.colors.window; + return Qt.rgba(wc.r, wc.g, wc.b, 0.5); } /* TODO: base width on the slider width (some issue with it not having a geometry when using the width here?) */ width: volumeImage.width * 0.7 radius: volumeSlider.width / 2 height: controlRect.height * 2 //100 - visible: volumeImageArea.containsMouse || - volumeSliderHideTimer.running || - volumeSliderRectMouseArea.containsMouse + visible: volumeImageArea.containsMouse || volumeSliderHideTimer.running || volumeSliderRectMouseArea.containsMouse + Slider { // TODO: the slider is slightly off-center on the left for some reason... id: volumeSlider - value: 1.0 // Desired value to avoid loop onMoved -> media.volume -> value -> onMoved... - property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, - QtMultimedia.LogarithmicVolumeScale, - QtMultimedia.LinearVolumeScale) + property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value, QtMultimedia.LogarithmicVolumeScale, QtMultimedia.LinearVolumeScale) - anchors.fill: parent + value: 1 + anchors.fill: volumeSliderRect anchors.bottomMargin: volumeSliderRect.height * 0.1 anchors.topMargin: volumeSliderRect.height * 0.1 anchors.horizontalCenter: volumeSliderRect.horizontalCenter orientation: Qt.Vertical onDesiredVolumeChanged: { - volumeImage.muted = !(desiredVolume > 0.0) + volumeImage.muted = !(desiredVolume > 0); } - } // Used for resetting the timer on mouse moves on volumeSliderRect + MouseArea { id: volumeSliderRectMouseArea + anchors.fill: parent hoverEnabled: true propagateComposedEvents: true onExited: volumeSliderHideTimer.start() - onClicked: mouse.accepted = false onPressed: mouse.accepted = false onReleased: mouse.accepted = false onPressAndHold: mouse.accepted = false onPositionChanged: { - mouse.accepted = false - volumeSliderHideTimer.start() + mouse.accepted = false; + volumeSliderHideTimer.start(); } } + + Behavior on opacity { + OpacityAnimator { + duration: 100 + } + + } + // TODO: figure out a better way to put the slider popup above controlRect + } -} \ No newline at end of file + +} diff --git a/resources/qml/ui/media/qmldir b/resources/qml/ui/media/qmldir index 14df35df..143b603d 100644 --- a/resources/qml/ui/media/qmldir +++ b/resources/qml/ui/media/qmldir @@ -1,2 +1,3 @@ module im.nheko.UI.Media -VolumeSlider 1.0 VolumeSlider.qml \ No newline at end of file +VolumeSlider 1.0 VolumeSlider.qml +MediaControls 1.0 MediaControls.qml \ No newline at end of file diff --git a/resources/res.qrc b/resources/res.qrc index 1e6a22fc..538095ab 100644 --- a/resources/res.qrc +++ b/resources/res.qrc @@ -183,6 +183,7 @@ qml/ui/Ripple.qml qml/ui/Spinner.qml qml/ui/animations/BlinkAnimation.qml + qml/ui/media/MediaControls.qml qml/ui/media/VolumeControl.qml qml/voip/ActiveCallBar.qml qml/voip/CallDevices.qml