mirror of
https://github.com/streamyfin/streamyfin.git
synced 2026-03-25 02:36:35 +00:00
feat(chromecast): add new player UI with mini player, hooks, and utilities
- Create ChromecastMiniPlayer component (bottom bar navigation) - Create chromecast-player modal route with full UI - Add useChromecastPlayer hook (playback controls & state) - Add useChromecastSegments hook (intro/credits/segments) - Add chromecast options (constants & config) - Add chromecast helpers (time formatting, quality checks) - Implement swipe-down gesture to dismiss - Add Netflix-style buffering indicator - Add progress tracking with trickplay support - Add next episode countdown - Ready for segments integration from autoskip branch
This commit is contained in:
Uruk
196
components/chromecast/ChromecastMiniPlayer.tsx
Normal file
196
components/chromecast/ChromecastMiniPlayer.tsx
Normal file
@@ -0,0 +1,196 @@
|
||||
/**
|
||||
* Mini Chromecast player bar shown at the bottom of the screen
|
||||
* Similar to music player mini bar
|
||||
*/
|
||||
|
||||
import { Ionicons } from "@expo/vector-icons";
|
||||
import { useRouter } from "expo-router";
|
||||
import React from "react";
|
||||
import { Pressable, View } from "react-native";
|
||||
import Animated, {
|
||||
FadeIn,
|
||||
FadeOut,
|
||||
SlideInDown,
|
||||
SlideOutDown,
|
||||
} from "react-native-reanimated";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { Text } from "@/components/common/Text";
|
||||
import { formatEpisodeInfo, truncateTitle } from "@/utils/chromecast/helpers";
|
||||
import { CHROMECAST_CONSTANTS } from "@/utils/chromecast/options";
|
||||
import { useChromecastPlayer } from "./hooks/useChromecastPlayer";
|
||||
|
||||
export const ChromecastMiniPlayer: React.FC = () => {
|
||||
const router = useRouter();
|
||||
const insets = useSafeAreaInsets();
|
||||
const { playerState, currentItem, togglePlay, showNextEpisodeCountdown } =
|
||||
useChromecastPlayer();
|
||||
|
||||
// Don't show if not connected or no media
|
||||
if (!playerState.isConnected || !playerState.currentItemId) {
|
||||
return null;
|
||||
}
|
||||
|
||||
const handlePress = () => {
|
||||
router.push("/chromecast-player");
|
||||
};
|
||||
|
||||
const progress =
|
||||
playerState.duration > 0
|
||||
? (playerState.progress / playerState.duration) * 100
|
||||
: 0;
|
||||
|
||||
return (
|
||||
<Animated.View
|
||||
entering={SlideInDown.duration(CHROMECAST_CONSTANTS.ANIMATION_DURATION)}
|
||||
exiting={SlideOutDown.duration(CHROMECAST_CONSTANTS.ANIMATION_DURATION)}
|
||||
style={{
|
||||
position: "absolute",
|
||||
bottom: insets.bottom,
|
||||
left: 0,
|
||||
right: 0,
|
||||
backgroundColor: "#1a1a1a",
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: "#333",
|
||||
zIndex: 1000,
|
||||
}}
|
||||
>
|
||||
{/* Progress bar */}
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
height: 2,
|
||||
backgroundColor: "#333",
|
||||
}}
|
||||
>
|
||||
<View
|
||||
style={{
|
||||
position: "absolute",
|
||||
top: 0,
|
||||
left: 0,
|
||||
height: 2,
|
||||
width: `${progress}%`,
|
||||
backgroundColor: "#e50914",
|
||||
}}
|
||||
/>
|
||||
</View>
|
||||
|
||||
<Pressable onPress={handlePress}>
|
||||
<View
|
||||
style={{
|
||||
height: CHROMECAST_CONSTANTS.MINI_PLAYER_HEIGHT,
|
||||
flexDirection: "row",
|
||||
alignItems: "center",
|
||||
paddingHorizontal: 16,
|
||||
gap: 12,
|
||||
}}
|
||||
>
|
||||
{/* Cast icon */}
|
||||
<View
|
||||
style={{
|
||||
width: 40,
|
||||
height: 40,
|
||||
borderRadius: 4,
|
||||
backgroundColor: "#333",
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
<Ionicons name='tv' size={24} color='#e50914' />
|
||||
</View>
|
||||
|
||||
{/* Media info */}
|
||||
<View style={{ flex: 1 }}>
|
||||
{currentItem && (
|
||||
<>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
}}
|
||||
numberOfLines={1}
|
||||
>
|
||||
{truncateTitle(currentItem.Name || "Unknown", 40)}
|
||||
</Text>
|
||||
<View style={{ flexDirection: "row", gap: 8 }}>
|
||||
<Text
|
||||
style={{
|
||||
color: "#999",
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
{formatEpisodeInfo(
|
||||
currentItem.ParentIndexNumber,
|
||||
currentItem.IndexNumber,
|
||||
)}
|
||||
</Text>
|
||||
{showNextEpisodeCountdown && (
|
||||
<Animated.Text
|
||||
entering={FadeIn}
|
||||
exiting={FadeOut}
|
||||
style={{
|
||||
color: "#e50914",
|
||||
fontSize: 12,
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
Next episode starting...
|
||||
</Animated.Text>
|
||||
)}
|
||||
</View>
|
||||
</>
|
||||
)}
|
||||
{!currentItem && (
|
||||
<>
|
||||
<Text
|
||||
style={{
|
||||
color: "white",
|
||||
fontSize: 14,
|
||||
fontWeight: "600",
|
||||
}}
|
||||
>
|
||||
Casting to {playerState.deviceName || "Chromecast"}
|
||||
</Text>
|
||||
<Text
|
||||
style={{
|
||||
color: "#999",
|
||||
fontSize: 12,
|
||||
}}
|
||||
>
|
||||
{playerState.isPlaying ? "Playing" : "Paused"}
|
||||
</Text>
|
||||
</>
|
||||
)}
|
||||
</View>
|
||||
|
||||
{/* Play/Pause button */}
|
||||
<Pressable
|
||||
onPress={(e) => {
|
||||
e.stopPropagation();
|
||||
togglePlay();
|
||||
}}
|
||||
style={{
|
||||
width: 48,
|
||||
height: 48,
|
||||
justifyContent: "center",
|
||||
alignItems: "center",
|
||||
}}
|
||||
>
|
||||
{playerState.isBuffering ? (
|
||||
<Ionicons name='hourglass-outline' size={24} color='white' />
|
||||
) : (
|
||||
<Ionicons
|
||||
name={playerState.isPlaying ? "pause" : "play"}
|
||||
size={28}
|
||||
color='white'
|
||||
/>
|
||||
)}
|
||||
</Pressable>
|
||||
</View>
|
||||
</Pressable>
|
||||
</Animated.View>
|
||||
);
|
||||
};
|
||||
239
components/chromecast/hooks/useChromecastPlayer.ts
Normal file
239
components/chromecast/hooks/useChromecastPlayer.ts
Normal file
@@ -0,0 +1,239 @@
|
||||
/**
|
||||
* Main Chromecast player hook - handles all playback logic and state
|
||||
*/
|
||||
|
||||
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
|
||||
import { getPlaystateApi } from "@jellyfin/sdk/lib/utils/api";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useCallback, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
useCastDevice,
|
||||
useMediaStatus,
|
||||
useRemoteMediaClient,
|
||||
} from "react-native-google-cast";
|
||||
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
|
||||
import { useSettings } from "@/utils/atoms/settings";
|
||||
import {
|
||||
calculateEndingTime,
|
||||
formatTime,
|
||||
shouldShowNextEpisodeCountdown,
|
||||
} from "@/utils/chromecast/helpers";
|
||||
import {
|
||||
CHROMECAST_CONSTANTS,
|
||||
type ChromecastPlayerState,
|
||||
DEFAULT_CHROMECAST_STATE,
|
||||
} from "@/utils/chromecast/options";
|
||||
|
||||
export const useChromecastPlayer = () => {
|
||||
const client = useRemoteMediaClient();
|
||||
const castDevice = useCastDevice();
|
||||
const mediaStatus = useMediaStatus();
|
||||
const api = useAtomValue(apiAtom);
|
||||
const user = useAtomValue(userAtom);
|
||||
const { settings } = useSettings();
|
||||
|
||||
const [playerState, setPlayerState] = useState<ChromecastPlayerState>(
|
||||
DEFAULT_CHROMECAST_STATE,
|
||||
);
|
||||
const [showControls, setShowControls] = useState(true);
|
||||
const [currentItem, _setCurrentItem] = useState<BaseItemDto | null>(null);
|
||||
const [nextItem, _setNextItem] = useState<BaseItemDto | null>(null);
|
||||
|
||||
const lastReportedProgressRef = useRef(0);
|
||||
const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
|
||||
|
||||
// Update player state from media status
|
||||
useEffect(() => {
|
||||
if (!mediaStatus) {
|
||||
setPlayerState(DEFAULT_CHROMECAST_STATE);
|
||||
return;
|
||||
}
|
||||
|
||||
const streamPosition = (mediaStatus.streamPosition || 0) * 1000; // Convert to ms
|
||||
const duration = (mediaStatus.mediaInfo?.streamDuration || 0) * 1000;
|
||||
|
||||
setPlayerState((prev) => ({
|
||||
...prev,
|
||||
isConnected: !!castDevice,
|
||||
deviceName: castDevice?.deviceName || null,
|
||||
isPlaying: mediaStatus.playerState === "playing",
|
||||
isPaused: mediaStatus.playerState === "paused",
|
||||
isStopped: mediaStatus.playerState === "idle",
|
||||
isBuffering: mediaStatus.playerState === "buffering",
|
||||
progress: streamPosition,
|
||||
duration,
|
||||
currentItemId: mediaStatus.mediaInfo?.contentId || null,
|
||||
}));
|
||||
}, [mediaStatus, castDevice]);
|
||||
|
||||
// Report playback progress to Jellyfin
|
||||
useEffect(() => {
|
||||
if (
|
||||
!api ||
|
||||
!user?.Id ||
|
||||
!mediaStatus ||
|
||||
!mediaStatus.mediaInfo?.contentId
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const streamPosition = mediaStatus.streamPosition || 0;
|
||||
|
||||
// Report every 10 seconds
|
||||
if (
|
||||
Math.abs(streamPosition - lastReportedProgressRef.current) <
|
||||
CHROMECAST_CONSTANTS.PROGRESS_REPORT_INTERVAL
|
||||
) {
|
||||
return;
|
||||
}
|
||||
|
||||
const contentId = mediaStatus.mediaInfo.contentId;
|
||||
const positionTicks = Math.floor(streamPosition * 10000000);
|
||||
const isPaused = mediaStatus.playerState === "paused";
|
||||
const streamUrl = mediaStatus.mediaInfo.contentUrl || "";
|
||||
const isTranscoding = streamUrl.includes("m3u8");
|
||||
|
||||
getPlaystateApi(api)
|
||||
.reportPlaybackProgress({
|
||||
playbackProgressInfo: {
|
||||
ItemId: contentId,
|
||||
PositionTicks: positionTicks,
|
||||
IsPaused: isPaused,
|
||||
PlayMethod: isTranscoding ? "Transcode" : "DirectStream",
|
||||
PlaySessionId: contentId,
|
||||
},
|
||||
})
|
||||
.then(() => {
|
||||
lastReportedProgressRef.current = streamPosition;
|
||||
})
|
||||
.catch((error) => {
|
||||
console.error("Failed to report Chromecast progress:", error);
|
||||
});
|
||||
}, [
|
||||
api,
|
||||
user?.Id,
|
||||
mediaStatus?.streamPosition,
|
||||
mediaStatus?.mediaInfo?.contentId,
|
||||
mediaStatus?.playerState,
|
||||
]);
|
||||
|
||||
// Auto-hide controls
|
||||
const resetControlsTimeout = useCallback(() => {
|
||||
if (controlsTimeoutRef.current) {
|
||||
clearTimeout(controlsTimeoutRef.current);
|
||||
}
|
||||
|
||||
setShowControls(true);
|
||||
controlsTimeoutRef.current = setTimeout(() => {
|
||||
setShowControls(false);
|
||||
}, CHROMECAST_CONSTANTS.CONTROLS_TIMEOUT);
|
||||
}, []);
|
||||
|
||||
// Playback controls
|
||||
const play = useCallback(async () => {
|
||||
await client?.play();
|
||||
}, [client]);
|
||||
|
||||
const pause = useCallback(async () => {
|
||||
await client?.pause();
|
||||
}, [client]);
|
||||
|
||||
const stop = useCallback(async () => {
|
||||
await client?.stop();
|
||||
}, [client]);
|
||||
|
||||
const togglePlay = useCallback(async () => {
|
||||
if (playerState.isPlaying) {
|
||||
await pause();
|
||||
} else {
|
||||
await play();
|
||||
}
|
||||
resetControlsTimeout();
|
||||
}, [playerState.isPlaying, play, pause, resetControlsTimeout]);
|
||||
|
||||
const seek = useCallback(
|
||||
async (positionMs: number) => {
|
||||
await client?.seek({ position: positionMs / 1000 });
|
||||
resetControlsTimeout();
|
||||
},
|
||||
[client, resetControlsTimeout],
|
||||
);
|
||||
|
||||
const skipForward = useCallback(async () => {
|
||||
const skipTime =
|
||||
settings?.forwardSkipTime || CHROMECAST_CONSTANTS.SKIP_FORWARD_TIME;
|
||||
const newPosition = playerState.progress + skipTime * 1000;
|
||||
await seek(Math.min(newPosition, playerState.duration));
|
||||
}, [
|
||||
playerState.progress,
|
||||
playerState.duration,
|
||||
seek,
|
||||
settings?.forwardSkipTime,
|
||||
]);
|
||||
|
||||
const skipBackward = useCallback(async () => {
|
||||
const skipTime =
|
||||
settings?.rewindSkipTime || CHROMECAST_CONSTANTS.SKIP_BACKWARD_TIME;
|
||||
const newPosition = playerState.progress - skipTime * 1000;
|
||||
await seek(Math.max(newPosition, 0));
|
||||
}, [playerState.progress, seek, settings?.rewindSkipTime]);
|
||||
|
||||
const disconnect = useCallback(async () => {
|
||||
await client?.endSession(true);
|
||||
setPlayerState(DEFAULT_CHROMECAST_STATE);
|
||||
}, [client]);
|
||||
|
||||
// Time formatting
|
||||
const currentTime = formatTime(playerState.progress);
|
||||
const remainingTime = formatTime(playerState.duration - playerState.progress);
|
||||
const endingTime = calculateEndingTime(
|
||||
playerState.duration - playerState.progress,
|
||||
settings?.use24HourFormat ?? true,
|
||||
);
|
||||
|
||||
// Next episode countdown
|
||||
const showNextEpisodeCountdown = shouldShowNextEpisodeCountdown(
|
||||
playerState.duration - playerState.progress,
|
||||
!!nextItem,
|
||||
CHROMECAST_CONSTANTS.NEXT_EPISODE_COUNTDOWN_START,
|
||||
);
|
||||
|
||||
// Cleanup
|
||||
useEffect(() => {
|
||||
return () => {
|
||||
if (controlsTimeoutRef.current) {
|
||||
clearTimeout(controlsTimeoutRef.current);
|
||||
}
|
||||
};
|
||||
}, []);
|
||||
|
||||
return {
|
||||
// State
|
||||
playerState,
|
||||
showControls,
|
||||
currentItem,
|
||||
nextItem,
|
||||
castDevice,
|
||||
mediaStatus,
|
||||
|
||||
// Actions
|
||||
play,
|
||||
pause,
|
||||
stop,
|
||||
togglePlay,
|
||||
seek,
|
||||
skipForward,
|
||||
skipBackward,
|
||||
disconnect,
|
||||
setShowControls: resetControlsTimeout,
|
||||
|
||||
// Computed
|
||||
currentTime,
|
||||
remainingTime,
|
||||
endingTime,
|
||||
showNextEpisodeCountdown,
|
||||
|
||||
// Settings
|
||||
settings,
|
||||
};
|
||||
};
|
||||
166
components/chromecast/hooks/useChromecastSegments.ts
Normal file
166
components/chromecast/hooks/useChromecastSegments.ts
Normal file
@@ -0,0 +1,166 @@
|
||||
/**
|
||||
* Hook for managing Chromecast segments (intro, credits, recap, commercial, preview)
|
||||
* Integrates with autoskip branch segment detection
|
||||
*/
|
||||
|
||||
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
|
||||
import { useAtomValue } from "jotai";
|
||||
import { useCallback, useMemo } from "react";
|
||||
import { apiAtom } from "@/providers/JellyfinProvider";
|
||||
import { useSettings } from "@/utils/atoms/settings";
|
||||
import { isWithinSegment } from "@/utils/chromecast/helpers";
|
||||
import type { ChromecastSegmentData } from "@/utils/chromecast/options";
|
||||
|
||||
// Placeholder - will integrate with autoskip branch later
|
||||
interface SegmentData {
|
||||
introSegments?: Array<{ startTime: number; endTime: number; text: string }>;
|
||||
creditSegments?: Array<{ startTime: number; endTime: number; text: string }>;
|
||||
recapSegments?: Array<{ startTime: number; endTime: number; text: string }>;
|
||||
commercialSegments?: Array<{
|
||||
startTime: number;
|
||||
endTime: number;
|
||||
text: string;
|
||||
}>;
|
||||
previewSegments?: Array<{ startTime: number; endTime: number; text: string }>;
|
||||
}
|
||||
|
||||
export const useChromecastSegments = (
|
||||
item: BaseItemDto | null,
|
||||
currentProgressMs: number,
|
||||
) => {
|
||||
const _api = useAtomValue(apiAtom);
|
||||
const { settings } = useSettings();
|
||||
|
||||
// TODO: Replace with actual segment fetching from autoskip branch
|
||||
// For now, using mock data structure
|
||||
const segmentData = useMemo<SegmentData>(() => {
|
||||
return {
|
||||
introSegments: [],
|
||||
creditSegments: [],
|
||||
recapSegments: [],
|
||||
commercialSegments: [],
|
||||
previewSegments: [],
|
||||
};
|
||||
}, [item?.Id]);
|
||||
|
||||
// Parse segments into usable format
|
||||
const segments = useMemo<ChromecastSegmentData>(() => {
|
||||
const intro =
|
||||
segmentData.introSegments && segmentData.introSegments.length > 0
|
||||
? {
|
||||
start: segmentData.introSegments[0].startTime,
|
||||
end: segmentData.introSegments[0].endTime,
|
||||
}
|
||||
: null;
|
||||
|
||||
const credits =
|
||||
segmentData.creditSegments && segmentData.creditSegments.length > 0
|
||||
? {
|
||||
start: segmentData.creditSegments[0].startTime,
|
||||
end: segmentData.creditSegments[0].endTime,
|
||||
}
|
||||
: null;
|
||||
|
||||
const recap =
|
||||
segmentData.recapSegments && segmentData.recapSegments.length > 0
|
||||
? {
|
||||
start: segmentData.recapSegments[0].startTime,
|
||||
end: segmentData.recapSegments[0].endTime,
|
||||
}
|
||||
: null;
|
||||
|
||||
const commercial = (segmentData.commercialSegments || []).map((seg) => ({
|
||||
start: seg.startTime,
|
||||
end: seg.endTime,
|
||||
}));
|
||||
|
||||
const preview = (segmentData.previewSegments || []).map((seg) => ({
|
||||
start: seg.startTime,
|
||||
end: seg.endTime,
|
||||
}));
|
||||
|
||||
return { intro, credits, recap, commercial, preview };
|
||||
}, [segmentData]);
|
||||
|
||||
// Check which segment we're currently in
|
||||
const currentSegment = useMemo(() => {
|
||||
if (isWithinSegment(currentProgressMs, segments.intro)) {
|
||||
return { type: "intro" as const, segment: segments.intro };
|
||||
}
|
||||
if (isWithinSegment(currentProgressMs, segments.credits)) {
|
||||
return { type: "credits" as const, segment: segments.credits };
|
||||
}
|
||||
if (isWithinSegment(currentProgressMs, segments.recap)) {
|
||||
return { type: "recap" as const, segment: segments.recap };
|
||||
}
|
||||
for (const commercial of segments.commercial) {
|
||||
if (isWithinSegment(currentProgressMs, commercial)) {
|
||||
return { type: "commercial" as const, segment: commercial };
|
||||
}
|
||||
}
|
||||
for (const preview of segments.preview) {
|
||||
if (isWithinSegment(currentProgressMs, preview)) {
|
||||
return { type: "preview" as const, segment: preview };
|
||||
}
|
||||
}
|
||||
return null;
|
||||
}, [currentProgressMs, segments]);
|
||||
|
||||
// Skip functions
|
||||
const skipIntro = useCallback(
|
||||
(seekFn: (positionMs: number) => Promise<void>) => {
|
||||
if (segments.intro) {
|
||||
return seekFn(segments.intro.end * 1000);
|
||||
}
|
||||
},
|
||||
[segments.intro],
|
||||
);
|
||||
|
||||
const skipCredits = useCallback(
|
||||
(seekFn: (positionMs: number) => Promise<void>) => {
|
||||
if (segments.credits) {
|
||||
return seekFn(segments.credits.end * 1000);
|
||||
}
|
||||
},
|
||||
[segments.credits],
|
||||
);
|
||||
|
||||
const skipSegment = useCallback(
|
||||
(seekFn: (positionMs: number) => Promise<void>) => {
|
||||
if (currentSegment) {
|
||||
return seekFn(currentSegment.segment.end * 1000);
|
||||
}
|
||||
},
|
||||
[currentSegment],
|
||||
);
|
||||
|
||||
// Auto-skip logic based on settings
|
||||
const shouldAutoSkip = useMemo(() => {
|
||||
if (!currentSegment) return false;
|
||||
|
||||
switch (currentSegment.type) {
|
||||
case "intro":
|
||||
return settings?.autoSkipIntro ?? false;
|
||||
case "credits":
|
||||
return settings?.autoSkipCredits ?? false;
|
||||
case "recap":
|
||||
case "commercial":
|
||||
case "preview":
|
||||
// Add settings for these when available
|
||||
return false;
|
||||
default:
|
||||
return false;
|
||||
}
|
||||
}, [currentSegment, settings]);
|
||||
|
||||
return {
|
||||
segments,
|
||||
currentSegment,
|
||||
skipIntro,
|
||||
skipCredits,
|
||||
skipSegment,
|
||||
shouldAutoSkip,
|
||||
hasIntro: !!segments.intro,
|
||||
hasCredits: !!segments.credits,
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user