Incorporate nico's suggestions, fix volume slider

1 files changed, 272 insertions, 272 deletions

diff --git a/resources/qml/delegates/PlayableMediaMessage.qml b/resources/qml/delegates/PlayableMediaMessage.qml
index eb788c6c..a5de613d 100644
--- a/resources/qml/delegates/PlayableMediaMessage.qml
+++ b/resources/qml/delegates/PlayableMediaMessage.qml
@@ -20,23 +20,24 @@ ColumnLayout {
     required property string filesize
 
     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()
+        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
-	}
+        if (hours < 1) {
+        	return mm + ":" + ss
+		}
+        return hh + ":" + mm + ":" + ss
+    }
 
     id: content
 
@@ -46,8 +47,11 @@ ColumnLayout {
         // 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
     }
-      
+
     Rectangle {
         id: videoContainer
         visible: type == MtxEvent.VideoMessage
@@ -60,6 +64,7 @@ ColumnLayout {
 
         property double divisor: isReply ? 4 : 2
         property bool tooHigh: tempHeight > timelineRoot.height / divisor
+        color: Nheko.colors.window
 
         Layout.preferredHeight: tooHigh ? timelineRoot.height / divisor : tempHeight
         Layout.preferredWidth: tooHigh ? (timelineRoot.height / divisor) / proportionalHeight : tempWidth
@@ -71,16 +76,16 @@ ColumnLayout {
             asynchronous: true
             fillMode: Image.PreserveAspectFit
             // Button and window colored overlay to cache media
-            Rectangle {
+            Item {
                 // Display over video controls
                 z: videoOutput.z + 1
                 visible: !mxcmedia.loaded
                 anchors.fill: parent
-                color: Nheko.colors.window
-                opacity: 0.5
+                //color: Nheko.colors.window
+                //opacity: 0.5
                 Image {
                     property color buttonColor: (cacheVideoArea.containsMouse) ? Nheko.colors.highlight :
-                        Nheko.colors.text
+                    Nheko.colors.text
 
                     anchors.verticalCenter: parent.verticalCenter
                     anchors.horizontalCenter: parent.horizontalCenter
@@ -100,7 +105,7 @@ ColumnLayout {
                 anchors.fill: parent
                 fillMode: VideoOutput.PreserveAspectFit
                 source: mxcmedia
-				flushMode: VideoOutput.FirstFrame
+                flushMode: VideoOutput.FirstFrame
 
                 // TODO: once we can use Qt 5.12, use HoverHandler
                 MouseArea {
@@ -108,267 +113,262 @@ ColumnLayout {
                     // Toggle play state on clicks
                     onClicked: {
                         if (controlRect.shouldShowControls &&
-                            !controlRect.contains(mapToItem(controlRect, mouseX, mouseY))) {
-                                (mxcmedia.state == MediaPlayer.PlayingState) ?
-                                    mxcmedia.pause() :
-                                    mxcmedia.play()
+                        !controlRect.contains(mapToItem(controlRect, mouseX, mouseY))) {
+                            (mxcmedia.state == MediaPlayer.PlayingState) ?
+                            mxcmedia.pause() :
+                            mxcmedia.play()
                         }
                     }
-					Rectangle {
-						id: controlRect
-						property int controlHeight: 25
-						property bool shouldShowControls: playerMouseArea.shouldShowControls ||
-							volumeSliderRect.visible
+                    Rectangle {
+                        id: controlRect
+                        property int controlHeight: 25
+                        property bool shouldShowControls: playerMouseArea.shouldShowControls ||
+                        volumeSliderRect.visible
 
-						anchors.bottom: playerMouseArea.bottom
-						// Window color with 128/255 alpha
-						color: {
-							var wc = Nheko.colors.window
-							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
-							}
-						}
+                        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
+                        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
 
-								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
-									
-									anchors.fill: parent
-									hoverEnabled: true
-									onClicked: {
-										(mxcmedia.state == MediaPlayer.PlayingState) ?
-											mxcmedia.pause() :
-											mxcmedia.play()
-									}
-								}
-							}
-							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
-							}
-							// Volume slider activator
-							Image {
-								property color controlColor: (volumeImageArea.containsMouse) ?
-									Nheko.colors.highlight : Nheko.colors.text
+                                    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
+                            }
 
-								// TODO: add icons for different volume levels
-								id: volumeImage
-								source: (mxcmedia.volume > 0 && !mxcmedia.muted) ?
-									"image://colorimage/:/icons/icons/ui/volume-up.png?"+ controlColor :
-									"image://colorimage/:/icons/icons/ui/volume-off-indicator.png?"+ controlColor
-								Layout.rightMargin: 5
-								Layout.preferredHeight: controlRect.controlHeight
-								fillMode: Image.PreserveAspectFit
-								MouseArea {
-									id: volumeImageArea	
-									anchors.fill: parent
-									hoverEnabled: true
-									onClicked: mxcmedia.muted = !mxcmedia.muted
-									onExited: volumeSliderHideTimer.start()
-									onPositionChanged: volumeSliderHideTimer.start()
-									// 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)
-									}
-									/* 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
-									Slider {
-										// Desired value to avoid loop onMoved -> media.volume -> value -> onMoved...
-										property real desiredVolume: 1
-										
-										// TODO: the slider is slightly off-center on the left for some reason...
-										id: volumeSlider
-										from: 0
-										to: 1
-										value: (mxcmedia.muted) ? 0 :
-											QtMultimedia.convertVolume(desiredVolume,
-												QtMultimedia.LinearVolumeScale,
-												QtMultimedia.LogarithmicVolumeScale)
-										anchors.fill: parent
-										anchors.bottomMargin: parent.height * 0.1
-										anchors.topMargin: parent.height * 0.1
-										anchors.horizontalCenter: parent.horizontalCenter
-										orientation: Qt.Vertical
-										onMoved: desiredVolume = QtMultimedia.convertVolume(value,
-											QtMultimedia.LogarithmicVolumeScale,
-											QtMultimedia.LinearVolumeScale)
-										/* This would be better handled in 'media', but it has some issue with listening
-											to this signal */
-										onDesiredVolumeChanged: mxcmedia.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()
+                            Slider {
+                                Layout.fillWidth: true
+                                Layout.minimumWidth: 50
+                                height: controlRect.controlHeight
+                                value: mxcmedia.position
+                                onMoved: mxcmedia.position = value
+                                from: 0
+                                to: mxcmedia.duration
+                            }
+                            // Volume slider activator
+                            Image {
+                                property color controlColor: (volumeImageArea.containsMouse) ?
+                                Nheko.colors.highlight : Nheko.colors.text
 
-										onClicked: mouse.accepted = false
-										onPressed: mouse.accepted = false
-										onReleased: mouse.accepted = false
-										onPressAndHold: mouse.accepted = false
-										onPositionChanged: {
-											mouse.accepted = false
-											volumeSliderHideTimer.start()
-										}
-									}
-								}
-							}
+                                // TODO: add icons for different volume levels
+                                id: volumeImage
+                                source: (mxcmedia.volume > 0 && !mxcmedia.muted) ?
+                                "image://colorimage/:/icons/icons/ui/volume-up.png?"+ controlColor :
+                                "image://colorimage/:/icons/icons/ui/volume-off-indicator.png?"+ controlColor
+                                Layout.rightMargin: 5
+                                Layout.preferredHeight: controlRect.controlHeight
+                                fillMode: Image.PreserveAspectFit
+                                MouseArea {
+                                    id: volumeImageArea	
+                                    anchors.fill: parent
+                                    hoverEnabled: true
+                                    onClicked: mxcmedia.muted = !mxcmedia.muted
+                                    onExited: volumeSliderHideTimer.start()
+                                    onPositionChanged: volumeSliderHideTimer.start()
+                                    // 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)
+                                    }
+                                    /* 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
+                                     Slider {
+                                         // TODO: the slider is slightly off-center on the left for some reason...
+                                         id: volumeSlider
 
-						}
-					}
-                    // 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))
+										 value: 1.0
+                                         // Desired value to avoid loop onMoved -> media.volume -> value -> onMoved...
+                                         property real desiredVolume: QtMultimedia.convertVolume(volumeSlider.value,
+                                         QtMultimedia.LogarithmicVolumeScale,
+                                         QtMultimedia.LinearVolumeScale)
 
-                    // For hiding controls on stationary cursor
-                    Timer {
-                        id: controlHideTimer
-                        interval: 1500 //ms
-                        repeat: false
-                    }
+                                         anchors.fill: parent
+                                         anchors.bottomMargin: parent.height * 0.1
+                                         anchors.topMargin: parent.height * 0.1
+                                         anchors.horizontalCenter: parent.horizontalCenter
+                                         orientation: Qt.Vertical
+										 onDesiredVolumeChanged: {
+											 mxcmedia.muted = !(desiredVolume > 0.0)
+										 }
+                                      }
+                                      // Used for resetting the timer on mouse moves on volumeSliderRect
+                                      MouseArea {
+                                          id: volumeSliderRectMouseArea
+                                          anchors.fill: parent
+                                          hoverEnabled: true
+                                          propagateComposedEvents: true
+                                          onExited: volumeSliderHideTimer.start()
 
-                    hoverEnabled: true
-                    onPositionChanged: controlHideTimer.start()
+                                          onClicked: mouse.accepted = false
+                                          onPressed: mouse.accepted = false
+                                          onReleased: mouse.accepted = false
+                                          onPressAndHold: mouse.accepted = false
+                                          onPositionChanged: {
+                                              mouse.accepted = false
+                                              volumeSliderHideTimer.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
+                          }
+                      }
+                      // 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))
 
-				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)
-			}
+                      // For hiding controls on stationary cursor
+                      Timer {
+                          id: controlHideTimer
+                          interval: 1500 //ms
+                          repeat: false
+                      }
 
-			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
-	}
-}
+                      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
+      }
+  }