alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-03-20 08:16:25 +00:00
Code Issues Actions 1 Packages Projects Releases Wiki Activity

refactor: clean up dead code and consolidate casting utilities

Browse Source 
- Remove dead Chromecast files (ChromecastMiniPlayer, chromecast-player)
- Remove dead AirPlay files (AirPlayMiniPlayer, airplay-player, useAirPlayPlayer)
- Remove duplicate AirPlay utilities (options.ts, helpers.ts)
- Consolidate unique Chromecast helpers into unified casting helpers
  - Add formatEpisodeInfo and shouldShowNextEpisodeCountdown
- Update all imports to use unified casting utilities
- Fix TypeScript errors:
  - Use correct MediaStatus properties (playerState vs isPaused/isBuffering)
  - Use getPlaystateApi from Jellyfin SDK
  - Use setStreamVolume for RemoteMediaClient
  - Fix calculateEndingTime signature
  - Fix segment auto-skip to use proper settings (skipIntro, skipOutro, etc)
  - Remove unused imports
- Update ChromecastSettingsMenu to use unified types from casting/types.ts
This commit is contained in:
Uruk
2026-01-19 22:40:05 +01:00
parent dc9750d7fc
commit c6bf16afdd
13 changed files with 63 additions and 1736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

182
components/airplay/AirPlayMiniPlayer.tsx
View File

@@ -1,182 +0,0 @@
/**
* AirPlay Mini Player
* Compact player bar shown at bottom of screen when AirPlaying
* iOS only component
*/
import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { router } from "expo-router";
import { useAtomValue } from "jotai";
import React from "react";
import { Platform, Pressable, View } from "react-native";
import Animated, { SlideInDown, SlideOutDown } from "react-native-reanimated";
import { useAirPlayPlayer } from "@/components/airplay/hooks/useAirPlayPlayer";
import { Text } from "@/components/common/Text";
import { apiAtom } from "@/providers/JellyfinProvider";
import { formatTime, getPosterUrl } from "@/utils/airplay/helpers";
import { AIRPLAY_CONSTANTS } from "@/utils/airplay/options";
export const AirPlayMiniPlayer: React.FC = () => {
const api = useAtomValue(apiAtom);
const {
isAirPlayAvailable,
isConnected,
currentItem,
currentDevice,
progress,
duration,
isPlaying,
togglePlayPause,
} = useAirPlayPlayer(null);
// Only show on iOS when connected
if (
Platform.OS !== "ios" ||
!isAirPlayAvailable ||
!isConnected ||
!currentItem
) {
return null;
}
const posterUrl = getPosterUrl(
api?.basePath,
currentItem.Id,
currentItem.ImageTags?.Primary,
80,
120,
);
const progressPercent = duration > 0 ? (progress / duration) * 100 : 0;
const handlePress = () => {
router.push("/airplay-player");
};
return (
<Animated.View
entering={SlideInDown.duration(AIRPLAY_CONSTANTS.ANIMATION_DURATION)}
exiting={SlideOutDown.duration(AIRPLAY_CONSTANTS.ANIMATION_DURATION)}
style={{
position: "absolute",
bottom: 49, // Above tab bar
left: 0,
right: 0,
backgroundColor: "#1a1a1a",
borderTopWidth: 1,
borderTopColor: "#333",
}}
>
<Pressable onPress={handlePress}>
{/* Progress bar */}
<View
style={{
height: 3,
backgroundColor: "#333",
}}
>
<View
style={{
height: "100%",
width: `${progressPercent}%`,
backgroundColor: "#007AFF",
}}
/>
</View>
{/* Content */}
<View
style={{
flexDirection: "row",
alignItems: "center",
padding: 12,
gap: 12,
}}
>
{/* Poster */}
{posterUrl && (
<Image
source={{ uri: posterUrl }}
style={{
width: 40,
height: 60,
borderRadius: 4,
}}
contentFit='cover'
/>
)}
{/* Info */}
<View style={{ flex: 1 }}>
<Text
style={{
color: "white",
fontSize: 14,
fontWeight: "600",
}}
numberOfLines={1}
>
{currentItem.Name}
</Text>
{currentItem.SeriesName && (
<Text
style={{
color: "#999",
fontSize: 12,
}}
numberOfLines={1}
>
{currentItem.SeriesName}
</Text>
)}
<View
style={{
flexDirection: "row",
alignItems: "center",
gap: 8,
marginTop: 2,
}}
>
<Ionicons name='logo-apple' size={12} color='#007AFF' />
<Text
style={{
color: "#007AFF",
fontSize: 11,
}}
numberOfLines={1}
>
{currentDevice?.name || "AirPlay"}
</Text>
<Text
style={{
color: "#666",
fontSize: 11,
}}
>
{formatTime(progress)} / {formatTime(duration)}
</Text>
</View>
</View>
{/* Play/Pause button */}
<Pressable
onPress={(e) => {
e.stopPropagation();
togglePlayPause();
}}
style={{
padding: 8,
}}
>
<Ionicons
name={isPlaying ? "pause" : "play"}
size={28}
color='white'
/>
</Pressable>
</View>
</Pressable>
</Animated.View>
);
};

190
components/airplay/hooks/useAirPlayPlayer.ts
View File

@@ -1,190 +0,0 @@
/**
* AirPlay Player Hook
* Manages AirPlay playback state and controls for iOS devices
*
* Note: AirPlay for video is handled natively by AVFoundation/MPV player.
* This hook tracks the state and provides a unified interface for the UI.
*/
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
import { useAtomValue } from "jotai";
import { useCallback, useEffect, useRef, useState } from "react";
import { Platform } from "react-native";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import type {
AirPlayDevice,
AirPlayPlayerState,
} from "@/utils/airplay/options";
import { DEFAULT_AIRPLAY_STATE } from "@/utils/airplay/options";
import { useSettings } from "@/utils/atoms/settings";
/**
* Hook to manage AirPlay player state
*
* For iOS video: AirPlay is native - the video player handles streaming
* This hook provides UI state management and progress tracking
*/
export const useAirPlayPlayer = (item: BaseItemDto | null) => {
const api = useAtomValue(apiAtom);
const user = useAtomValue(userAtom);
const { settings } = useSettings();
const [state, setState] = useState<AirPlayPlayerState>(DEFAULT_AIRPLAY_STATE);
const progressIntervalRef = useRef<NodeJS.Timeout | null>(null);
const controlsTimeoutRef = useRef<NodeJS.Timeout | null>(null);
// Check if AirPlay is available (iOS only)
const isAirPlayAvailable = Platform.OS === "ios";
// Detect AirPlay connection
// Note: For native video AirPlay, this would be detected from the player
// For now, this is a placeholder for UI state management
const [isConnected, setIsConnected] = useState(false);
const [currentDevice, setCurrentDevice] = useState<AirPlayDevice | null>(
null,
);
// Progress tracking
const updateProgress = useCallback(
(progressMs: number, durationMs: number) => {
setState((prev) => ({
...prev,
progress: progressMs,
duration: durationMs,
}));
// Report progress to Jellyfin
if (api && item?.Id && user?.Id && progressMs > 0) {
const progressSeconds = Math.floor(progressMs / 1000);
api.playStateApi
.reportPlaybackProgress({
playbackProgressInfo: {
ItemId: item.Id,
PositionTicks: progressSeconds * 10000000,
IsPaused: !state.isPlaying,
PlayMethod: "DirectStream",
},
})
.catch(console.error);
}
},
[api, item?.Id, user?.Id, state.isPlaying],
);
// Play/Pause controls
const play = useCallback(() => {
setState((prev) => ({ ...prev, isPlaying: true }));
}, []);
const pause = useCallback(() => {
setState((prev) => ({ ...prev, isPlaying: false }));
}, []);
const togglePlayPause = useCallback(() => {
setState((prev) => ({ ...prev, isPlaying: !prev.isPlaying }));
}, []);
// Seek controls
const seek = useCallback((positionMs: number) => {
setState((prev) => ({ ...prev, progress: positionMs }));
}, []);
const skipForward = useCallback((seconds = 10) => {
setState((prev) => ({
...prev,
progress: Math.min(prev.progress + seconds * 1000, prev.duration),
}));
}, []);
const skipBackward = useCallback((seconds = 10) => {
setState((prev) => ({
...prev,
progress: Math.max(prev.progress - seconds * 1000, 0),
}));
}, []);
// Stop and disconnect
const stop = useCallback(async () => {
setState(DEFAULT_AIRPLAY_STATE);
setIsConnected(false);
setCurrentDevice(null);
// Report stop to Jellyfin
if (api && item?.Id && user?.Id) {
await api.playStateApi.reportPlaybackStopped({
playbackStopInfo: {
ItemId: item.Id,
PositionTicks: state.progress * 10000,
},
});
}
}, [api, item?.Id, user?.Id, state.progress]);
// Volume control
const setVolume = useCallback((volume: number) => {
setState((prev) => ({ ...prev, volume: Math.max(0, Math.min(1, volume)) }));
}, []);
// Controls visibility
const showControls = useCallback(() => {
setState((prev) => ({ ...prev, showControls: true }));
// Auto-hide after delay
if (controlsTimeoutRef.current) {
clearTimeout(controlsTimeoutRef.current);
}
controlsTimeoutRef.current = setTimeout(() => {
if (state.isPlaying) {
setState((prev) => ({ ...prev, showControls: false }));
}
}, 5000);
}, [state.isPlaying]);
const hideControls = useCallback(() => {
setState((prev) => ({ ...prev, showControls: false }));
if (controlsTimeoutRef.current) {
clearTimeout(controlsTimeoutRef.current);
}
}, []);
// Cleanup
useEffect(() => {
return () => {
if (progressIntervalRef.current) {
clearInterval(progressIntervalRef.current);
}
if (controlsTimeoutRef.current) {
clearTimeout(controlsTimeoutRef.current);
}
};
}, []);
return {
// State
isAirPlayAvailable,
isConnected,
isPlaying: state.isPlaying,
currentItem: item,
currentDevice,
progress: state.progress,
duration: state.duration,
volume: state.volume,
// Controls
play,
pause,
togglePlayPause,
seek,
skipForward,
skipBackward,
stop,
setVolume,
showControls: showControls,
hideControls,
updateProgress,
// Device management
setIsConnected,
setCurrentDevice,
};
};

2
components/chromecast/ChromecastEpisodeList.tsx
View File

@@ -10,7 +10,7 @@ import React from "react";
import { FlatList, Modal, Pressable, View } from "react-native";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { Text } from "@/components/common/Text";
import { truncateTitle } from "@/utils/chromecast/helpers";
import { truncateTitle } from "@/utils/casting/helpers";
interface ChromecastEpisodeListProps {
visible: boolean;

196
components/chromecast/ChromecastMiniPlayer.tsx
View File

@@ -1,196 +0,0 @@
/**
* 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>
);
};

4
components/chromecast/ChromecastSettingsMenu.tsx
View File

@@ -13,7 +13,7 @@ import type {
AudioTrack,
MediaSource,
SubtitleTrack,
} from "@/utils/chromecast/options";
} from "@/utils/casting/types";
interface ChromecastSettingsMenuProps {
visible: boolean;
@@ -39,7 +39,7 @@ const PLAYBACK_SPEEDS = [0.25, 0.5, 0.75, 1, 1.25, 1.5, 1.75, 2];
export const ChromecastSettingsMenu: React.FC<ChromecastSettingsMenuProps> = ({
visible,
onClose,
item,
item: _item, // Reserved for future use (technical info display)
mediaSources,
selectedMediaSource,
onMediaSourceChange,

6
components/chromecast/hooks/useChromecastPlayer.ts
View File

@@ -17,7 +17,7 @@ import {
calculateEndingTime,
formatTime,
shouldShowNextEpisodeCountdown,
} from "@/utils/chromecast/helpers";
} from "@/utils/casting/helpers";
import {
CHROMECAST_CONSTANTS,
type ChromecastPlayerState,
@@ -187,8 +187,8 @@ export const useChromecastPlayer = () => {
const currentTime = formatTime(playerState.progress);
const remainingTime = formatTime(playerState.duration - playerState.progress);
const endingTime = calculateEndingTime(
playerState.duration - playerState.progress,
true, // TODO: Add use24HourFormat setting
playerState.progress,
playerState.duration,
);
// Next episode countdown

24
components/chromecast/hooks/useChromecastSegments.ts
View File

@@ -6,10 +6,9 @@
import type { BaseItemDto } from "@jellyfin/sdk/lib/generated-client";
import { useAtomValue } from "jotai";
import { useCallback, useMemo } from "react";
import { useDownloadedFiles } from "@/providers/Downloads/downloadProvider";
import { apiAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings";
import { isWithinSegment } from "@/utils/chromecast/helpers";
import { isWithinSegment } from "@/utils/casting/helpers";
import type { ChromecastSegmentData } from "@/utils/chromecast/options";
import { useSegments } from "@/utils/segments";
@@ -20,13 +19,12 @@ export const useChromecastSegments = (
) => {
const api = useAtomValue(apiAtom);
const { settings } = useSettings();
const { downloadedFiles } = useDownloadedFiles();
// Fetch segments from autoskip API
const { data: segmentData } = useSegments(
item?.Id || "",
isOffline,
downloadedFiles,
undefined, // downloadedFiles parameter
api,
);
@@ -137,18 +135,26 @@ export const useChromecastSegments = (
switch (currentSegment.type) {
case "intro":
return settings?.autoSkipIntro === true;
return settings?.skipIntro === "auto";
case "credits":
return settings?.autoSkipCredits === true;
return settings?.skipOutro === "auto";
case "recap":
return settings?.skipRecap === "auto";
case "commercial":
return settings?.skipCommercial === "auto";
case "preview":
// These don't have settings yet, don't auto-skip
return false;
return settings?.skipPreview === "auto";
default:
return false;
}
}, [currentSegment, settings?.autoSkipIntro, settings?.autoSkipCredits]);
}, [
currentSegment,
settings?.skipIntro,
settings?.skipOutro,
settings?.skipRecap,
settings?.skipCommercial,
settings?.skipPreview,
]);
return {
segments,