andre/twitch4steamdeck
1
0
Fork 0
mirror of https://github.com/Andre-Bzk/twitch4steamdeck.git synced 2026-11-15 15:43:08 +01:00
Code Issues Packages Projects Releases 2 Wiki Activity

Phase 6 abgeschlossen

Browse Source 
- Fix: VOD-Kapitelwechsel und Following-Layout korrigiert
This commit is contained in:
Andre
2026-04-11 13:03:31 +02:00
parent 56d212a3b7
commit cfb8a0b790
15 changed files with 198 additions and 60 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/renderer/src/input/gamepad.ts
+4
View File
@@ -14,6 +14,8 @@
* Button 1 = B → Escape
* Button 2 = X → x
* Button 3 = Y → y
* Button 4 = LB → l1
* Button 5 = RB → r1
* Axis 1 (left stick Y) → Up/Down
* Axis 0 (left stick X) → Left/Right
*/
@@ -23,6 +25,8 @@ const BUTTON_MAP: Record<number, string> = {
1: 'Escape', // B
2: 'x', // X
3: 'y', // Y
4: 'l1', // LB / L1
5: 'r1', // RB / R1
6: 'l2', // LT / L2
7: 'r2', // RT / R2
12: 'ArrowUp',
src/renderer/src/screens/ChannelScreen.tsx
+74 -18
View File
@@ -69,6 +69,8 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
const [chaptersLoading, setChaptersLoading] = useState(false)
const [chapterIndex, setChapterIndex] = useState(0)
const [wasPlayingBeforeChapters, setWasPlayingBeforeChapters] = useState(false)
const [currentVod, setCurrentVod] = useState<VodInfo | null>(null)
const [pendingChapterVod, setPendingChapterVod] = useState<VodInfo | null>(null)
const watchBtnRef = useRef<HTMLButtonElement>(null)
const chapterListRef = useRef<HTMLUListElement>(null)
@@ -89,7 +91,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
const isPlaying = playState === 'playing' || playState === 'starting' || playState === 'paused'
// Kapitel-Panel hat oberste Priorität (gilt auch während Wiedergabe)
if (focusRegion === 'chapters') {
if (focusRegion === 'chapters' && chapterPanelVod) {
const duringPlayback = isPlaying
if (e.key === 'Escape') {
e.preventDefault()
@@ -176,10 +178,18 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
break
case 'y': {
e.preventDefault()
const vod = vods[shelfIndex]
const vod = currentVod ?? vods[shelfIndex]
if (vod) openChapterPanel(vod, true)
break
}
case 'l1':
e.preventDefault()
void jumpChapter(-1)
break
case 'r1':
e.preventDefault()
void jumpChapter(1)
break
default:
e.preventDefault()
}
@@ -228,16 +238,17 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
}
window.addEventListener('keydown', onKey)
return () => window.removeEventListener('keydown', onKey)
}, [focusRegion, playState, vods, shelfIndex, onBack, chapters, chapterIndex, chapterPanelVod, wasPlayingBeforeChapters])
}, [focusRegion, playState, vods, shelfIndex, onBack, chapters, chapterIndex, chapterPanelVod, wasPlayingBeforeChapters, currentVod])
useEffect(() => {
const unsub = window.t4sd.playback.onEvent((ev: PlaybackEvent) => {
if (ev.kind === 'started') {
setPlayState('playing')
} else if (ev.kind === 'stopped') {
const nextChapterVod = pendingChapterVod
setPlayState('idle')
setChapterPanelVod(null)
setFocusRegion('shelf')
setCurrentVod(null)
// Progress nach Stop neu laden
if (vods.length > 0) {
void window.t4sd.history
@@ -245,14 +256,22 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
.then(setProgressMap)
.catch(() => {})
}
if (nextChapterVod) {
setPendingChapterVod(null)
showChapterPanel(nextChapterVod)
} else {
setFocusRegion('shelf')
}
} else if (ev.kind === 'error') {
setPlayState('error')
setChapterPanelVod(null)
setCurrentVod(null)
setPendingChapterVod(null)
setErrorMsg(ev.message ?? 'Unbekannter Fehler')
}
})
return unsub
}, [vods])
}, [pendingChapterVod, vods])
useEffect(() => {
watchBtnRef.current?.focus()
@@ -264,6 +283,42 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
item?.scrollIntoView({ block: 'nearest', behavior: 'smooth' })
}, [chapterIndex])
const loadChapters = async (vodId: string): Promise<VodChapter[]> => {
return window.t4sd.twitch.getVodChapters(vodId)
}
const showChapterPanel = (vod: VodInfo): void => {
setChapterPanelVod(vod)
setChapters([])
setChapterIndex(0)
setChaptersLoading(true)
setFocusRegion('chapters')
setWasPlayingBeforeChapters(false)
void loadChapters(vod.id)
.then((loaded) => setChapters(loaded))
.catch(() => {})
.finally(() => setChaptersLoading(false))
}
const jumpChapter = async (direction: 1 | -1): Promise<void> => {
if (!currentVod) return
const [loadedChapters, currentPosition] = await Promise.all([
loadChapters(currentVod.id),
window.t4sd.playback.getCurrentPosition()
])
if (loadedChapters.length === 0 || currentPosition === null) return
const epsilon = 1
const target = direction > 0
? loadedChapters.find((chapter) => chapter.positionSeconds > currentPosition + epsilon)
: [...loadedChapters].reverse().find((chapter) => chapter.positionSeconds < currentPosition - epsilon)
if (target) {
await window.t4sd.playback.seekTo(target.positionSeconds)
}
}
const handleWatch = async (): Promise<void> => {
setPlayState('starting')
setErrorMsg('')
@@ -278,6 +333,11 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
const handleWatchVod = async (vod: VodInfo): Promise<void> => {
setPlayState('starting')
setErrorMsg('')
setFocusRegion('hero')
setChapterPanelVod(null)
setWasPlayingBeforeChapters(false)
setCurrentVod(vod)
setPendingChapterVod(null)
try {
await window.t4sd.playback.startVod(
vod.id,
@@ -292,26 +352,22 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
}
const openChapterPanel = (vod: VodInfo, duringPlayback: boolean): void => {
setChapterPanelVod(vod)
setChapters([])
setChapterIndex(0)
setChaptersLoading(true)
setFocusRegion('chapters')
if (duringPlayback) {
setWasPlayingBeforeChapters(playState === 'playing')
void window.t4sd.playback.pause()
setPlayState('paused')
setPendingChapterVod(vod)
void window.t4sd.playback.stop()
return
}
window.t4sd.twitch.getVodChapters(vod.id)
.then((loaded) => setChapters(loaded))
.catch(() => {})
.finally(() => setChaptersLoading(false))
showChapterPanel(vod)
}
const handleWatchVodFromChapter = async (vod: VodInfo, startSeconds: number): Promise<void> => {
setPlayState('starting')
setErrorMsg('')
setFocusRegion('hero')
setChapterPanelVod(null)
setWasPlayingBeforeChapters(false)
setCurrentVod(vod)
setPendingChapterVod(null)
try {
await window.t4sd.playback.startVod(
vod.id,
@@ -404,7 +460,7 @@ export default function ChannelScreen({ channel, onBack }: Props): JSX.Element {
{(playState === 'playing' || playState === 'paused') && (
<>
<span className="channel-screen__playing-hint">
● Wiedergabe{playState === 'paused' ? ' (Pause)' : ''} · A Pause/Resume · ← −30s · → +30s · LT −5min · RT +5min · Y Kapitel
● Wiedergabe{playState === 'paused' ? ' (Pause)' : ''} · A Pause/Resume · ← −30s · → +30s · LT −5min · RT +5min · LB Kapitel zurück · RB Kapitel vor · Y Kapitelmenü
</span>
<button className="btn" onClick={() => void handleStop()}>
■ Stop (B / Escape)
src/renderer/src/screens/FollowingScreen.tsx
+2 -2
View File
@@ -110,7 +110,7 @@ export default function FollowingScreen({
const liveCount = channels.filter((c) => c.isLive).length
return (
<div className="screen">
<div className="screen screen--following">
<header className="screen__header">
<h2 className="screen__title">Du folgst</h2>
{loadState === 'ok' && channels.length > 0 && (
@@ -144,7 +144,7 @@ export default function FollowingScreen({
)}
{loadState === 'ok' && channels.length > 0 && (
<div className="card-grid" ref={gridRef}>
<div className="card-grid card-grid--following" ref={gridRef}>
{channels.map((ch, i) => (
<FocusableCard
key={ch.broadcasterId}
src/renderer/src/styles/global.css
+9 -4
View File
@@ -293,6 +293,10 @@ body,
padding-bottom: 16px;
}
.card-grid--following {
padding-top: 14px;
}
.card-grid::-webkit-scrollbar {
width: 8px;
}
@@ -359,11 +363,12 @@ body,
}
.card__thumb-offline img {
width: 84px;
height: 84px;
width: 124px;
height: 124px;
border-radius: 50%;
opacity: 0.75;
filter: grayscale(0.3);
opacity: 0.88;
filter: grayscale(0.2);
box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.card__live-badge {
src/renderer/src/types/t4sd.d.ts
Vendored
+1
View File
@@ -94,6 +94,7 @@ export interface T4sdApi {
pause: () => Promise<void>
resume: () => Promise<void>
seekTo: (seconds: number) => Promise<void>
getCurrentPosition: () => Promise<number | null>
onEvent: (cb: (event: PlaybackEvent) => void) => () => void
}
gamepad: {