ui: improve empty state, add remote playback indicator

sailfish/qml/components/PlaybackBar.qml

@@ -48,6 +48,8 @@ PanelBackground {
     property bool showQueue: false
 
     property bool _pageWasShowingNavigationIndicator
+    readonly property bool _isItemSet: manager.item !== null && manager.item !== undefined && manager.item.jellyfinId.length > 0
+    readonly property bool controllingRemote: !manager.controllingSessionLocal
     readonly property bool mediaLoading: [J.MediaStatus.Loading, J.MediaStatus.Buffering].indexOf(manager.mediaStatus) >= 0
 
 
@@ -67,9 +69,12 @@ PanelBackground {
                 top: parent.top
             }
             width: height
-            Binding on blurhash {
-                when: manager.item !== null && "Primary" in manager.item.imageBlurHashes && "Primary" in manager.item.imageTags
-                value: manager.item.imageBlurHashes["Primary"][manager.item.imageTags["Primary"]]
+            blurhash: {
+                if (_isItemSet && "Primary" in manager.item.imageBlurHashes && "Primary" in manager.item.imageTags) {
+                    return manager.item.imageBlurHashes["Primary"][manager.item.imageTags["Primary"]]
+                } else {
+                    return ""
+                }
             }
             source: largeAlbumArt.source
             fillMode: Image.PreserveAspectCrop
@@ -125,7 +130,10 @@ PanelBackground {
 
             Label {
                 id: name
-                text: manager.item === null ? qsTr("No media selected") : manager.item.name
+                text: manager.item.jellyfinId
+                      ? manager.item.name
+                      //: Shown in a bright font when no media is playing in the bottom bar and now playing screen
+                      : qsTr("Nothing is playing")
                 width: Math.min(contentWidth, parent.width)
                 font.pixelSize: Theme.fontSizeMedium
                 maximumLineCount: 1
@@ -133,8 +141,23 @@ PanelBackground {
             }
             Label {
                 id: artists
+                leftPadding: controllingRemote ? remoteIcon.width + Theme.paddingSmall : 0
                 text: {
-                    if (manager.item === null) return qsTr("Play some media!")
+                    if (!_isItemSet) {
+                        if (controllingRemote) {
+                            //: Shown when no media is being played, but the app is controlling another Jellyfin client
+                            //: %1 is the name of said client
+                            return qsTr("Connected to %1").arg(manager.controllingSessionName)
+                        } else {
+                            return qsTr("Start playing some media!")
+                        }
+                    }
+                    var remoteText = "";
+
+                    if (controllingRemote) {
+                        remoteText = manager.controllingSessionName + " - "
+                    }
+
                     switch(manager.item.mediaType) {
                     case "Audio":
                         var links = [];
@@ -147,7 +170,7 @@ PanelBackground {
                                 .arg(Theme.secondaryColor)
                             )
                         }
-                        return links.join(", ")
+                        return remoteText + links.join(", ")
                     }
                     return qsTr("No audio")
                 }
@@ -162,6 +185,16 @@ PanelBackground {
                     appWindow.navigateToItem(link, "Audio", "MusicArtist", true)
                 }
                 textFormat: Text.StyledText
+                Icon {
+                    id: remoteIcon
+                    anchors {
+                        left: parent.left
+                        verticalCenter: parent.verticalCenter
+                    }
+                    height: parent
+                    source: "image://theme/icon-s-device-upload"
+                    visible: controllingRemote
+                }
             }
         }
 
@@ -395,7 +428,9 @@ PanelBackground {
         },
         State {
             name: "hidden"
-            when: ((manager.playbackState === J.PlayerState.Stopped && !mediaLoading) || "__hidePlaybackBar" in pageStack.currentPage) && !isFullPage
+            when: ((manager.playbackState === J.PlayerState.Stopped && !mediaLoading)
+                    || ("__hidePlaybackBar" in pageStack.currentPage && pageStack.currentPage.__hidePlaybackBar))
+                  && !isFullPage
             PropertyChanges {
                 target: playbackBarTranslate
                 // + small padding since the ProgressBar otherwise would stick out

sailfish/qml/components/VideoPlayer.qml

@@ -50,6 +50,16 @@ SilicaItem {
         color: Theme.overlayBackgroundColor
     }
 
+    RemoteImage {
+        id: backdrop
+        anchors.fill: parent
+        visible: !manager.controllingSessionLocal
+                  || [J.MediaStatus.NoMedia, J.MediaStatus.Loading].indexOf(manager.mediaStatus) >= 0
+        fillMode: Image.PreserveAspectFit
+        source: Utils.itemBackdropUrl(apiClient.baseUrl, item, 0, {"maxWidth": parent.width})
+        blurhash: item.imageBlurHashes["Backdrop"][item.backdropImageTags[0]]
+    }
+
     VideoOutput {
         id: videoOutput
         source: manager
@@ -64,7 +74,7 @@ SilicaItem {
         anchors.fill: parent
         manager: playerRoot.manager
         title: videoPlayer.title
-
+        alwaysVisible: !manager.controllingSessionLocal
     }
 
     VideoError {

sailfish/qml/components/videoplayer/VideoHud.qml

@@ -34,6 +34,8 @@ Item {
     property var manager
     property string title
     property bool _manuallyActivated: false
+    /// Don't allow the HUD to hide
+    property bool alwaysVisible: false
     readonly property bool hidden: opacity == 0.0
 
     Behavior on opacity { FadeAnimator {} }
@@ -174,6 +176,7 @@ Item {
     }
 
     function hide(manual) {
+        if (alwaysVisible) return
         // Don't hide if the user decided on their own to show the hud
         //if (!manual && _manuallyActivated) return;
         // Don't give in to the user if they want to hide the hud while it was forced upon them