Show link indicator on hover

When hovering a link in the content view of an episode, show the link in
an indicator at the bottom left of the view.

Furthermore, when the link represents a timestamp, show a properly
formatted time mark (e.g. `03:24`) instead.

This feature is mostly copy'n pasted from NeoChat.

src/CMakeLists.txt

@@ -125,6 +125,7 @@ qt_add_qml_module(kasts URI org.kde.kasts
         qml/SearchBar.qml
         qml/FilterInlineMessage.qml
         qml/ChapterSlider.qml
+        qml/HoverLinkIndicator.qml
     RESOURCES
         ../icons/media-playback-cloud.svg
         ../kasts.svg

src/qml/EntryPage.qml

@@ -261,6 +261,26 @@ Kirigami.ScrollablePage {
             onLinkHovered: {
                 cursorShape: Qt.PointingHandCursor;
             }
+            // when hovering a link, show a preview of its URL
+            onHoveredLinkChanged: if (hoveredLink.length > 0) {
+                // when the link points to a timestamp in the current episode, show a time mark
+                // like `12:47` instead of `timestamp://767000`
+                if (hoveredLink.split("://")[0] === "timestamp") {
+                    const timestamp = parseInt(hoveredLink.split("://")[1]);
+                    var isoTime;
+                    // in case the timestamp would be < 1h, don't produce leading zeroes, this looks weird
+                    if (timestamp < 3600*1000) {
+                        var isoTime = new Date(timestamp).toISOString().slice(14, 19);
+                    } else {
+                        var isoTime = new Date(timestamp).toISOString().slice(11, 19);
+                    }
+                    applicationWindow().hoverLinkIndicator.text = i18n("Jump to %1", isoTime);
+                } else {
+                    applicationWindow().hoverLinkIndicator.text = hoveredLink;
+                }
+            } else {
+                applicationWindow().hoverLinkIndicator.text = "";
+            }
             onWidthChanged: { text = entry.adjustedContent(width, font.pixelSize) }
         }
 

src/qml/HoverLinkIndicator.qml

@@ -0,0 +1,31 @@
+// SPDX-FileCopyrightText: 2024 Tobias Fella <tobias.fella@kde.org>
+// SPDX-FileCopyrightText: 2024 Carl Schwan <carl@carlschwan.eu>
+// SPDX-FileCopyrightText: 2024 Elias Probst <mail@eliasprobst.eu>
+// SPDX-License-Identifier: LGPL-3.0-or-later
+
+import QtQuick
+import QtQuick.Controls as QQC2
+
+import org.kde.kirigami as Kirigami
+
+QQC2.Control {
+    id: root
+
+    property string text
+
+    visible: root.text.length > 0
+    Kirigami.Theme.colorSet: Kirigami.Theme.View
+
+    z: 20
+
+    Accessible.ignored: true
+
+    contentItem: QQC2.Label {
+        text: root.text
+        Accessible.description: i18nc("@info screenreader", "The currently selected link")
+    }
+
+    background: Rectangle {
+        color: Kirigami.Theme.backgroundColor
+    }
+}

src/qml/Main.qml

@@ -27,6 +27,7 @@ Kirigami.ApplicationWindow {
     property bool isMobile: Kirigami.Settings.isMobile
     width: isMobile ? 360 : 800
     height: isMobile ? 660 : 600
+    readonly property HoverLinkIndicator hoverLinkIndicator: linkIndicator
 
     pageStack.clip: true
     pageStack.popHiddenPages: true
@@ -407,4 +408,11 @@ Kirigami.ApplicationWindow {
             }
         }
     }
+
+    HoverLinkIndicator {
+        id: linkIndicator
+
+        anchors.bottom: parent.bottom
+        anchors.left: parent.left
+    }
 }