Fix audio player and use same controls for video and audio

This commit is contained in:
Joseph Donofry 2021-11-09 22:33:16 -05:00
parent c1c9c71b08
commit df17e4e28b
No known key found for this signature in database
GPG Key ID: E8A1D78EF044B0CB
1 changed files with 63 additions and 66 deletions

View File

@ -67,7 +67,6 @@ ColumnLayout {
property double divisor: isReply ? 4 : 2 property double divisor: isReply ? 4 : 2
property bool tooHigh: tempHeight > timelineRoot.height / divisor property bool tooHigh: tempHeight > timelineRoot.height / divisor
visible: type == MtxEvent.VideoMessage
color: Nheko.colors.window color: Nheko.colors.window
Layout.preferredHeight: tooHigh ? timelineRoot.height / divisor : tempHeight Layout.preferredHeight: tooHigh ? timelineRoot.height / divisor : tempHeight
Layout.preferredWidth: tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth Layout.preferredWidth: tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth
@ -109,99 +108,97 @@ ColumnLayout {
VideoOutput { VideoOutput {
id: videoOutput id: videoOutput
visible: type == MtxEvent.VideoMessage
clip: true clip: true
anchors.fill: parent anchors.fill: parent
fillMode: VideoOutput.PreserveAspectFit fillMode: VideoOutput.PreserveAspectFit
source: mxcmedia source: mxcmedia
flushMode: VideoOutput.FirstFrame flushMode: VideoOutput.FirstFrame
}
MediaControls { MediaControls {
id: 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()
}
anchors.fill: parent
x: type == MtxEvent.VideoMessage ? videoOutput.contentRect.x : videoContainer.x
y: type == MtxEvent.VideoMessage ? videoOutput.contentRect.y : videoContainer.y
width: type == MtxEvent.VideoMessage ? videoOutput.contentRect.width : videoContainer.width
height: type == MtxEvent.VideoMessage ? videoOutput.contentRect.height : videoContainer.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 // Audio player
// TODO: share code with the video player // TODO: share code with the video player
Rectangle { // Rectangle {
id: audioControlRect // id: audioControlRect
property int controlHeight: 25 // property int controlHeight: 25
visible: type != MtxEvent.VideoMessage // visible: type != MtxEvent.VideoMessage
Layout.preferredHeight: 40 // Layout.preferredHeight: 40
RowLayout { // RowLayout {
anchors.fill: parent // anchors.fill: parent
width: parent.width // width: parent.width
// Play/pause button // // Play/pause button
Image { // Image {
id: audioPlaybackStateImage // id: audioPlaybackStateImage
property color controlColor: (audioPlaybackStateArea.containsMouse) ? Nheko.colors.highlight : Nheko.colors.text // property color controlColor: (audioPlaybackStateArea.containsMouse) ? Nheko.colors.highlight : Nheko.colors.text
fillMode: Image.PreserveAspectFit // fillMode: Image.PreserveAspectFit
Layout.preferredHeight: controlRect.controlHeight // Layout.preferredHeight: controlRect.controlHeight
Layout.alignment: Qt.AlignVCenter // Layout.alignment: Qt.AlignVCenter
source: { // source: {
if (!mxcmedia.loaded) // if (!mxcmedia.loaded)
return "image://colorimage/:/icons/icons/ui/arrow-pointing-down.png?" + controlColor; // 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; // return (mxcmedia.state == MediaPlayer.PlayingState) ? "image://colorimage/:/icons/icons/ui/pause-symbol.png?" + controlColor : "image://colorimage/:/icons/icons/ui/play-sign.png?" + controlColor;
} // }
MouseArea { // MouseArea {
id: audioPlaybackStateArea // id: audioPlaybackStateArea
anchors.fill: parent // anchors.fill: parent
hoverEnabled: true // hoverEnabled: true
onClicked: { // onClicked: {
if (!mxcmedia.loaded) { // if (!mxcmedia.loaded) {
mxcmedia.eventId = eventId; // mxcmedia.eventId = eventId;
return ; // return ;
} // }
(mxcmedia.state == MediaPlayer.PlayingState) ? mxcmedia.pause() : mxcmedia.play(); // (mxcmedia.state == MediaPlayer.PlayingState) ? mxcmedia.pause() : mxcmedia.play();
} // }
} // }
} // }
Label { // Label {
text: (!mxcmedia.loaded) ? "-/-" : durationToString(mxcmedia.position) + "/" + durationToString(mxcmedia.duration) // text: (!mxcmedia.loaded) ? "-/-" : durationToString(mxcmedia.position) + "/" + durationToString(mxcmedia.duration)
} // }
Slider { // Slider {
Layout.fillWidth: true // Layout.fillWidth: true
Layout.minimumWidth: 50 // Layout.minimumWidth: 50
height: controlRect.controlHeight // height: controlRect.controlHeight
value: mxcmedia.position // value: mxcmedia.position
onMoved: mxcmedia.position = value // onMoved: mxcmedia.position = value
from: 0 // from: 0
to: mxcmedia.duration // to: mxcmedia.duration
} // }
} // }
} // }
Label { Label {
id: fileInfoLabel id: fileInfoLabel