aljaz/boris
1
1
Fork 0
mirror of https://github.com/dergigi/boris.git synced 2025-12-19 15:44:20 +01:00
Code Issues Packages Projects Releases Wiki Activity

feat(reader): show video duration for /r/ video URLs using react-player onDuration

Browse Source
This commit is contained in:
Gigi
2025-10-13 17:30:36 +02:00
parent 2a2049e678
commit 2bf6e742f1
1 changed files with 21 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/ContentPanel.tsx
View File

@@ -140,6 +140,19 @@ const ContentPanel: React.FC<ContentPanelProps> = ({
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<number | null>(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<ContentPanelProps> = ({
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<ContentPanelProps> = ({
{isExternalVideo ? (
<>
<div className="reader-video">
<ReactPlayer url={selectedUrl as string} controls width="100%" height="60vh" />
<ReactPlayer
url={selectedUrl as string}
controls
width="100%"
height="60vh"
onDuration={(d) => setVideoDurationSec(Math.floor(d))}
/>
</div>
{activeAccount && (
<div className="mark-as-read-container">