diff --git a/src/components/ContentPanel.tsx b/src/components/ContentPanel.tsx index ea54b428..12ee330a 100644 --- a/src/components/ContentPanel.tsx +++ b/src/components/ContentPanel.tsx @@ -140,6 +140,19 @@ const ContentPanel: React.FC = ({ const isNostrArticle = selectedUrl && selectedUrl.startsWith('nostr:') const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type) + // Track external video duration (in seconds) for display in header + const [videoDurationSec, setVideoDurationSec] = useState(null) + + const formatDuration = (totalSeconds: number): string => { + const hours = Math.floor(totalSeconds / 3600) + const minutes = Math.floor((totalSeconds % 3600) / 60) + const seconds = Math.floor(totalSeconds % 60) + const mm = hours > 0 ? String(minutes).padStart(2, '0') : String(minutes) + const ss = String(seconds).padStart(2, '0') + return hours > 0 ? `${hours}:${mm}:${ss}` : `${mm}:${ss}` + } + const isExternalVideo = !isNostrArticle && !!selectedUrl && ['youtube', 'video'].includes(classifyUrl(selectedUrl).type) + // Get article links for menu const getArticleLinks = () => { if (!currentArticle) return null @@ -308,7 +321,7 @@ const ContentPanel: React.FC = ({ image={image} summary={summary} published={published} - readingTimeText={readingStats ? readingStats.text : null} + readingTimeText={isExternalVideo ? (videoDurationSec !== null ? formatDuration(videoDurationSec) : null) : (readingStats ? readingStats.text : null)} hasHighlights={hasHighlights} highlightCount={relevantHighlights.length} settings={settings} @@ -318,7 +331,13 @@ const ContentPanel: React.FC = ({ {isExternalVideo ? ( <>
- + setVideoDurationSec(Math.floor(d))} + />
{activeAccount && (