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.
This commit is contained in:
Elias Probst 2024-05-25 02:27:59 +02:00
parent 2f5d16d38a
commit 74c5631bcc
No known key found for this signature in database
GPG Key ID: 82C512826511BADB
4 changed files with 60 additions and 0 deletions

View File

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

View File

@ -261,6 +261,26 @@ Kirigami.ScrollablePage {
onLinkHovered: { onLinkHovered: {
cursorShape: Qt.PointingHandCursor; 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) } onWidthChanged: { text = entry.adjustedContent(width, font.pixelSize) }
} }

View File

@ -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
}
}

View File

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