alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-01-22 19:18:10 +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 7fd7059367
commit be30dd4ec5
13 changed files with 63 additions and 1736 deletions
Download Patch File Download Diff File Expand all files Collapse all files

387
app/(auth)/airplay-player.tsx
View File

@@ -1,387 +0,0 @@
/**
* AirPlay Player Modal
* Full-screen player interface for AirPlay (iOS only)
* Similar design to Chromecast player but optimized for Apple ecosystem
*/
import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { router } from "expo-router";
import { useAtomValue } from "jotai";
import { useCallback } from "react";
import {
ActivityIndicator,
Platform,
Pressable,
ScrollView,
View,
} from "react-native";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
runOnJS,
useAnimatedStyle,
useSharedValue,
withSpring,
} from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useAirPlayPlayer } from "@/components/airplay/hooks/useAirPlayPlayer";
import { Text } from "@/components/common/Text";
import { apiAtom } from "@/providers/JellyfinProvider";
import {
calculateEndingTime,
formatTime,
getPosterUrl,
truncateTitle,
} from "@/utils/airplay/helpers";
export default function AirPlayPlayerScreen() {
const insets = useSafeAreaInsets();
const api = useAtomValue(apiAtom);
const {
isConnected,
currentItem,
currentDevice,
progress,
duration,
isPlaying,
togglePlayPause,
seek,
skipForward,
skipBackward,
stop,
} = useAirPlayPlayer(null);
// Swipe down to dismiss gesture
const translateY = useSharedValue(0);
const context = useSharedValue({ y: 0 });
const dismissModal = useCallback(() => {
if (router.canGoBack()) {
router.back();
}
}, []);
const panGesture = Gesture.Pan()
.onStart(() => {
context.value = { y: translateY.value };
})
.onUpdate((event) => {
if (event.translationY > 0) {
translateY.value = event.translationY;
}
})
.onEnd((event) => {
if (event.translationY > 100) {
translateY.value = withSpring(500, {}, () => {
runOnJS(dismissModal)();
});
} else {
translateY.value = withSpring(0);
}
});
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateY: translateY.value }],
}));
// Redirect if not connected
if (Platform.OS !== "ios" || !isConnected || !currentItem) {
if (router.canGoBack()) {
router.back();
}
return null;
}
const posterUrl = getPosterUrl(
api?.basePath,
currentItem.Id,
currentItem.ImageTags?.Primary,
300,
450,
);
const progressPercent = duration > 0 ? (progress / duration) * 100 : 0;
const isBuffering = false; // Placeholder - would come from player state
return (
<GestureDetector gesture={panGesture}>
<Animated.View
style={[
{
flex: 1,
backgroundColor: "#000",
paddingTop: insets.top,
paddingBottom: insets.bottom,
},
animatedStyle,
]}
>
<ScrollView
contentContainerStyle={{
flexGrow: 1,
paddingHorizontal: 20,
}}
showsVerticalScrollIndicator={false}
>
{/* Header */}
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 32,
}}
>
<Pressable
onPress={dismissModal}
style={{ padding: 8, marginLeft: -8 }}
>
<Ionicons name='chevron-down' size={32} color='white' />
</Pressable>
{/* Connection indicator */}
<View
style={{
flexDirection: "row",
alignItems: "center",
gap: 6,
paddingHorizontal: 12,
paddingVertical: 6,
backgroundColor: "#1a1a1a",
borderRadius: 16,
}}
>
<View
style={{
width: 8,
height: 8,
borderRadius: 4,
backgroundColor: "#34C759",
}}
/>
<Text
style={{ color: "#34C759", fontSize: 12, fontWeight: "500" }}
>
AirPlay
</Text>
</View>
<View style={{ width: 48 }} />
</View>
{/* Title and episode info */}
<View style={{ marginBottom: 24 }}>
<Text
style={{
color: "white",
fontSize: 28,
fontWeight: "700",
textAlign: "center",
}}
>
{truncateTitle(currentItem.Name || "Unknown", 50)}
</Text>
{currentItem.SeriesName && (
<Text
style={{
color: "#999",
fontSize: 16,
textAlign: "center",
marginTop: 8,
}}
>
{currentItem.SeriesName}
{currentItem.ParentIndexNumber &&
currentItem.IndexNumber &&
` • S${currentItem.ParentIndexNumber}:E${currentItem.IndexNumber}`}
</Text>
)}
</View>
{/* Poster with buffering overlay */}
<View
style={{
alignItems: "center",
marginBottom: 32,
}}
>
<View
style={{
width: 300,
height: 450,
borderRadius: 12,
overflow: "hidden",
position: "relative",
}}
>
{posterUrl ? (
<Image
source={{ uri: posterUrl }}
style={{ width: "100%", height: "100%" }}
contentFit='cover'
/>
) : (
<View
style={{
width: "100%",
height: "100%",
backgroundColor: "#1a1a1a",
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons name='film-outline' size={64} color='#333' />
</View>
)}
{/* Buffering overlay */}
{isBuffering && (
<View
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
backgroundColor: "rgba(0,0,0,0.7)",
justifyContent: "center",
alignItems: "center",
backdropFilter: "blur(10px)",
}}
>
<ActivityIndicator size='large' color='#007AFF' />
<Text
style={{
color: "white",
fontSize: 16,
marginTop: 16,
}}
>
Buffering...
</Text>
</View>
)}
</View>
</View>
{/* Device info */}
<View
style={{
flexDirection: "row",
alignItems: "center",
justifyContent: "center",
gap: 8,
marginBottom: 32,
}}
>
<Ionicons name='logo-apple' size={20} color='#007AFF' />
<Text style={{ color: "#007AFF", fontSize: 15 }}>
{currentDevice?.name || "AirPlay Device"}
</Text>
</View>
{/* Progress slider */}
<View style={{ marginBottom: 12 }}>
<View
style={{
height: 4,
backgroundColor: "#333",
borderRadius: 2,
overflow: "hidden",
}}
>
<View
style={{
height: "100%",
width: `${progressPercent}%`,
backgroundColor: "#007AFF",
}}
/>
</View>
</View>
{/* Time display */}
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
marginBottom: 32,
}}
>
<Text style={{ color: "#999", fontSize: 13 }}>
{formatTime(progress)}
</Text>
<Text style={{ color: "#999", fontSize: 13 }}>
Ending at {calculateEndingTime(progress, duration)}
</Text>
<Text style={{ color: "#999", fontSize: 13 }}>
{formatTime(duration)}
</Text>
</View>
{/* Playback controls */}
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
gap: 32,
marginBottom: 48,
}}
>
{/* Rewind 10s */}
<Pressable onPress={() => skipBackward(10)} style={{ padding: 16 }}>
<Ionicons name='play-back' size={32} color='white' />
</Pressable>
{/* Play/Pause */}
<Pressable
onPress={togglePlayPause}
style={{
width: 72,
height: 72,
borderRadius: 36,
backgroundColor: "#007AFF",
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons
name={isPlaying ? "pause" : "play"}
size={36}
color='white'
style={{ marginLeft: isPlaying ? 0 : 4 }}
/>
</Pressable>
{/* Forward 10s */}
<Pressable onPress={() => skipForward(10)} style={{ padding: 16 }}>
<Ionicons name='play-forward' size={32} color='white' />
</Pressable>
</View>
{/* Stop casting button */}
<Pressable
onPress={stop}
style={{
backgroundColor: "#1a1a1a",
padding: 16,
borderRadius: 12,
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
gap: 8,
marginBottom: 24,
}}
>
<Ionicons name='stop-circle-outline' size={20} color='#FF3B30' />
<Text style={{ color: "#FF3B30", fontSize: 16, fontWeight: "600" }}>
Stop AirPlay
</Text>
</Pressable>
</ScrollView>
</Animated.View>
</GestureDetector>
);
}

580
app/(auth)/chromecast-player.tsx
View File

@@ -1,580 +0,0 @@
/**
* Full Chromecast Player Modal
* Displays when user taps mini player or cast button during playback
*/
import { Ionicons } from "@expo/vector-icons";
import { Image } from "expo-image";
import { useAtomValue } from "jotai";
import React, { useCallback, useMemo, useState } from "react";
import {
ActivityIndicator,
Modal,
Pressable,
useWindowDimensions,
View,
} from "react-native";
import { Slider } from "react-native-awesome-slider";
import { Gesture, GestureDetector } from "react-native-gesture-handler";
import Animated, {
FadeIn,
FadeOut,
runOnJS,
useAnimatedStyle,
useSharedValue,
withSpring,
withTiming,
} from "react-native-reanimated";
import { useSafeAreaInsets } from "react-native-safe-area-context";
import { useChromecastPlayer } from "@/components/chromecast/hooks/useChromecastPlayer";
import { useChromecastSegments } from "@/components/chromecast/hooks/useChromecastSegments";
import { Text } from "@/components/common/Text";
import { useTrickplay } from "@/hooks/useTrickplay";
import { apiAtom } from "@/providers/JellyfinProvider";
import {
formatEpisodeInfo,
getPosterUrl,
truncateTitle,
} from "@/utils/chromecast/helpers";
import { CHROMECAST_CONSTANTS } from "@/utils/chromecast/options";
interface ChromecastPlayerProps {
visible: boolean;
onClose: () => void;
}
export const ChromecastPlayer: React.FC<ChromecastPlayerProps> = ({
visible,
onClose,
}) => {
const insets = useSafeAreaInsets();
const { height: screenHeight } = useWindowDimensions();
const api = useAtomValue(apiAtom);
const {
playerState,
showControls,
currentItem,
nextItem,
stop,
togglePlay,
seek,
skipForward,
skipBackward,
disconnect,
setShowControls,
currentTime,
remainingTime,
endingTime,
showNextEpisodeCountdown,
settings,
} = useChromecastPlayer();
const { currentSegment, skipSegment } = useChromecastSegments(
currentItem,
playerState.progress,
);
const { calculateTrickplayUrl, trickplayInfo } = useTrickplay(currentItem!);
const [_showMenu, setShowMenu] = useState(false);
const [_showDeviceSheet, setShowDeviceSheet] = useState(false);
const [_showEpisodeList, setShowEpisodeList] = useState(false);
const [isCollapsed, setIsCollapsed] = useState(false);
// Slider values
const progress = useSharedValue(playerState.progress);
const min = useSharedValue(0);
const max = useSharedValue(playerState.duration);
const isSeeking = useSharedValue(false);
// Update slider when player state changes
React.useEffect(() => {
if (!isSeeking.value) {
progress.value = playerState.progress;
}
max.value = playerState.duration;
}, [playerState.progress, playerState.duration, isSeeking]);
// Swipe down to dismiss gesture
const translateY = useSharedValue(0);
const context = useSharedValue({ y: 0 });
const gesture = Gesture.Pan()
.onStart(() => {
context.value = { y: translateY.value };
})
.onUpdate((event) => {
if (event.translationY > 0) {
translateY.value = context.value.y + event.translationY;
}
})
.onEnd((event) => {
if (event.translationY > 100) {
translateY.value = withTiming(screenHeight, {}, () => {
runOnJS(onClose)();
});
} else {
translateY.value = withSpring(0);
}
});
const animatedStyle = useAnimatedStyle(() => ({
transform: [{ translateY: translateY.value }],
}));
const posterUrl = useMemo(() => {
if (!currentItem || !api) return null;
return getPosterUrl(currentItem, api);
}, [currentItem, api]);
const handleSliderChange = useCallback(
(value: number) => {
progress.value = value;
if (trickplayInfo && currentItem) {
calculateTrickplayUrl(value);
}
},
[calculateTrickplayUrl, trickplayInfo, currentItem],
);
const handleSliderComplete = useCallback(
(value: number) => {
isSeeking.value = false;
seek(value);
},
[seek, isSeeking],
);
if (!playerState.isConnected || !visible) {
return null;
}
return (
<Modal
visible={visible}
animationType='slide'
presentationStyle='overFullScreen'
onRequestClose={onClose}
statusBarTranslucent
>
<GestureDetector gesture={gesture}>
<Animated.View
style={[
{
flex: 1,
backgroundColor: "#000",
},
animatedStyle,
]}
>
<Pressable style={{ flex: 1 }} onPress={setShowControls}>
{/* Header - Collapsible */}
<Animated.View
entering={FadeIn}
exiting={FadeOut}
style={{
position: "absolute",
top: insets.top,
left: 0,
right: 0,
zIndex: 10,
paddingHorizontal: 16,
paddingVertical: 12,
backgroundColor: isCollapsed
? "transparent"
: "rgba(0,0,0,0.5)",
}}
>
<View
style={{ flexDirection: "row", alignItems: "center", gap: 12 }}
>
{/* Collapse arrow */}
<Pressable
onPress={() => setIsCollapsed(!isCollapsed)}
style={{ padding: 4 }}
>
<Ionicons
name={isCollapsed ? "chevron-down" : "chevron-up"}
size={24}
color='white'
/>
</Pressable>
{/* Title and episode info */}
<View style={{ flex: 1 }}>
{currentItem && (
<>
<Text
style={{
color: "white",
fontSize: 16,
fontWeight: "600",
}}
numberOfLines={1}
>
{truncateTitle(
currentItem.Name || "Unknown",
isCollapsed ? 50 : 35,
)}
</Text>
{!isCollapsed && (
<Text
style={{
color: "#ccc",
fontSize: 13,
}}
numberOfLines={1}
>
{formatEpisodeInfo(
currentItem.ParentIndexNumber,
currentItem.IndexNumber,
)}
{currentItem.SeriesName &&
` • ${truncateTitle(currentItem.SeriesName, 25)}`}
</Text>
)}
</>
)}
</View>
{/* Connection quality indicator */}
<View style={{ alignItems: "center" }}>
<Ionicons name='stats-chart' size={20} color='#4ade80' />
</View>
</View>
</Animated.View>
{/* Main content area */}
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
paddingTop: insets.top + 60,
paddingBottom: 200,
}}
>
{/* Poster */}
<View
style={{
width: CHROMECAST_CONSTANTS.POSTER_WIDTH,
height: CHROMECAST_CONSTANTS.POSTER_HEIGHT,
borderRadius: 8,
overflow: "hidden",
backgroundColor: "#1a1a1a",
}}
>
{posterUrl ? (
<Image
source={{ uri: posterUrl }}
style={{ width: "100%", height: "100%" }}
contentFit='cover'
transition={200}
blurRadius={
playerState.isBuffering
? CHROMECAST_CONSTANTS.BLUR_RADIUS
: 0
}
/>
) : (
<View
style={{
flex: 1,
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons name='film-outline' size={80} color='#333' />
</View>
)}
{/* Buffering indicator */}
{playerState.isBuffering && (
<Animated.View
entering={FadeIn}
exiting={FadeOut}
style={{
position: "absolute",
top: 0,
left: 0,
right: 0,
bottom: 0,
justifyContent: "center",
alignItems: "center",
backgroundColor: "rgba(0,0,0,0.3)",
}}
>
<ActivityIndicator size='large' color='#e50914' />
</Animated.View>
)}
</View>
{/* Current segment indicator */}
{currentSegment && (
<Animated.View
entering={FadeIn}
exiting={FadeOut}
style={{
marginTop: 16,
paddingHorizontal: 16,
paddingVertical: 8,
backgroundColor: "rgba(229, 9, 20, 0.9)",
borderRadius: 20,
}}
>
<Text
style={{ color: "white", fontSize: 12, fontWeight: "600" }}
>
{currentSegment.type.toUpperCase()} DETECTED
</Text>
</Animated.View>
)}
</View>
{/* Bottom controls */}
{showControls && (
<Animated.View
entering={FadeIn.duration(
CHROMECAST_CONSTANTS.ANIMATION_DURATION,
)}
exiting={FadeOut.duration(
CHROMECAST_CONSTANTS.ANIMATION_DURATION,
)}
style={{
position: "absolute",
bottom: insets.bottom,
left: 0,
right: 0,
paddingHorizontal: 16,
paddingBottom: 20,
backgroundColor: "rgba(0,0,0,0.7)",
}}
>
{/* Time display */}
<View
style={{
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
marginBottom: 8,
}}
>
<Text style={{ color: "white", fontSize: 13 }}>
{currentTime}
</Text>
<Text style={{ color: "white", fontSize: 13 }}>
{remainingTime}
</Text>
</View>
{/* Progress slider */}
<View style={{ height: 40, marginBottom: 8 }}>
<Slider
style={{ width: "100%", height: 40 }}
progress={progress}
minimumValue={min}
maximumValue={max}
theme={{
disableMinTrackTintColor: "#333",
maximumTrackTintColor: "#333",
minimumTrackTintColor: "#e50914",
cacheTrackTintColor: "#555",
bubbleBackgroundColor: "#e50914",
}}
onSlidingStart={() => {
isSeeking.value = true;
}}
onValueChange={handleSliderChange}
onSlidingComplete={handleSliderComplete}
/>
</View>
{/* Ending time */}
<Text
style={{
color: "#999",
fontSize: 11,
textAlign: "center",
marginBottom: 12,
}}
>
Ending at {endingTime}
</Text>
{/* Control buttons row */}
<View
style={{
flexDirection: "row",
justifyContent: "space-around",
alignItems: "center",
marginBottom: 16,
}}
>
{/* Skip segment button */}
{currentSegment && (
<Pressable
onPress={() => skipSegment(seek)}
style={{
paddingHorizontal: 16,
paddingVertical: 8,
backgroundColor: "#e50914",
borderRadius: 4,
}}
>
<Text
style={{
color: "white",
fontSize: 12,
fontWeight: "600",
}}
>
Skip {currentSegment.type}
</Text>
</Pressable>
)}
{/* Episode list button */}
{currentItem?.Type === "Episode" && (
<Pressable
onPress={() => setShowEpisodeList(true)}
style={{ padding: 8 }}
>
<Ionicons name='list' size={24} color='white' />
</Pressable>
)}
{/* Settings menu */}
<Pressable
onPress={() => setShowMenu(true)}
style={{ padding: 8 }}
>
<Ionicons
name='ellipsis-vertical'
size={24}
color='white'
/>
</Pressable>
{/* Chromecast device info */}
<Pressable
onPress={() => setShowDeviceSheet(true)}
style={{ padding: 8 }}
>
<Ionicons name='tv' size={24} color='#e50914' />
</Pressable>
</View>
{/* Playback controls */}
<View
style={{
flexDirection: "row",
justifyContent: "center",
alignItems: "center",
gap: 32,
}}
>
{/* Rewind */}
<Pressable onPress={skipBackward} style={{ padding: 8 }}>
<View
style={{ position: "relative", alignItems: "center" }}
>
<Ionicons name='play-back' size={32} color='white' />
<Text
style={{
position: "absolute",
color: "white",
fontSize: 10,
fontWeight: "bold",
top: 8,
}}
>
{settings?.rewindSkipTime || 15}
</Text>
</View>
</Pressable>
{/* Play/Pause */}
<Pressable
onPress={togglePlay}
style={{
width: 64,
height: 64,
borderRadius: 32,
backgroundColor: "#e50914",
justifyContent: "center",
alignItems: "center",
}}
>
<Ionicons
name={playerState.isPlaying ? "pause" : "play"}
size={32}
color='white'
/>
</Pressable>
{/* Forward */}
<Pressable onPress={skipForward} style={{ padding: 8 }}>
<View
style={{ position: "relative", alignItems: "center" }}
>
<Ionicons name='play-forward' size={32} color='white' />
<Text
style={{
position: "absolute",
color: "white",
fontSize: 10,
fontWeight: "bold",
top: 8,
}}
>
{settings?.forwardSkipTime || 15}
</Text>
</View>
</Pressable>
{/* Stop */}
<Pressable onPress={stop} style={{ padding: 8 }}>
<Ionicons name='stop' size={28} color='white' />
</Pressable>
</View>
</Animated.View>
)}
{/* Next episode countdown */}
{showNextEpisodeCountdown && nextItem && (
<Animated.View
entering={FadeIn}
exiting={FadeOut}
style={{
position: "absolute",
bottom: insets.bottom + 250,
left: 16,
right: 16,
padding: 16,
backgroundColor: "rgba(0,0,0,0.9)",
borderRadius: 8,
}}
>
<Text style={{ color: "white", fontSize: 14, marginBottom: 8 }}>
Next: {truncateTitle(nextItem.Name || "Unknown", 40)}
</Text>
<Text style={{ color: "#999", fontSize: 12 }}>
Starting in{" "}
{Math.ceil(
(playerState.duration - playerState.progress) / 1000,
)}
s
</Text>
</Animated.View>
)}
</Pressable>
</Animated.View>
</GestureDetector>
{/* TODO: Add settings menu modal */}
{/* TODO: Add device info sheet modal */}
{/* TODO: Add episode list modal */}
</Modal>
);
};

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,

18
hooks/useCasting.ts
View File

@@ -4,6 +4,7 @@
*/
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 { Platform } from "react-native";
@@ -13,7 +14,6 @@ import {
useRemoteMediaClient,
} from "react-native-google-cast";
import { apiAtom, userAtom } from "@/providers/JellyfinProvider";
import { useSettings } from "@/utils/atoms/settings";
import type { CastPlayerState, CastProtocol } from "@/utils/casting/types";
import { DEFAULT_CAST_STATE } from "@/utils/casting/types";
@@ -23,7 +23,7 @@ import { DEFAULT_CAST_STATE } from "@/utils/casting/types";
export const useCasting = (item: BaseItemDto | null) => {
const api = useAtomValue(apiAtom);
const user = useAtomValue(userAtom);
const { settings } = useSettings();
// const { settings } = useSettings(); // TODO: Use for preferences
// Chromecast hooks
const client = useRemoteMediaClient();
@@ -86,10 +86,10 @@ export const useCasting = (item: BaseItemDto | null) => {
if (activeProtocol === "chromecast" && mediaStatus) {
setState((prev) => ({
...prev,
isPlaying: !mediaStatus.isPaused && !mediaStatus.isBuffering,
isPlaying: mediaStatus.playerState === "playing",
progress: (mediaStatus.streamPosition || 0) * 1000,
duration: (mediaStatus.mediaInfo?.streamDuration || 0) * 1000,
isBuffering: mediaStatus.isBuffering || false,
isBuffering: mediaStatus.playerState === "buffering",
}));
}
}, [mediaStatus, activeProtocol]);
@@ -100,8 +100,9 @@ export const useCasting = (item: BaseItemDto | null) => {
const reportProgress = () => {
const progressSeconds = Math.floor(state.progress / 1000);
api?.playStateApi
.reportPlaybackProgress({
const playStateApi = api ? getPlaystateApi(api) : null;
playStateApi
?.reportPlaybackProgress({
playbackProgressInfo: {
ItemId: item.Id,
PositionTicks: progressSeconds * 10000000,
@@ -184,7 +185,8 @@ export const useCasting = (item: BaseItemDto | null) => {
// Report stop to Jellyfin
if (api && item?.Id && user?.Id) {
await api.playStateApi.reportPlaybackStopped({
const playStateApi = getPlaystateApi(api);
await playStateApi.reportPlaybackStopped({
playbackStopInfo: {
ItemId: item.Id,
PositionTicks: state.progress * 10000,
@@ -200,7 +202,7 @@ export const useCasting = (item: BaseItemDto | null) => {
async (volume: number) => {
const clampedVolume = Math.max(0, Math.min(1, volume));
if (activeProtocol === "chromecast") {
await client?.setVolume(clampedVolume);
await client?.setStreamVolume(clampedVolume);
}
// TODO: AirPlay volume control
setState((prev) => ({ ...prev, volume: clampedVolume }));

104
utils/airplay/helpers.ts
View File

@@ -1,104 +0,0 @@
/**
* AirPlay Helper Functions
* Utility functions for time formatting, quality checks, and data manipulation
*/
import type { ConnectionQuality } from "./options";
/**
* Format milliseconds to HH:MM:SS or MM:SS
*/
export const formatTime = (ms: number): string => {
const totalSeconds = Math.floor(ms / 1000);
const hours = Math.floor(totalSeconds / 3600);
const minutes = Math.floor((totalSeconds % 3600) / 60);
const seconds = totalSeconds % 60;
if (hours > 0) {
return `${hours}:${minutes.toString().padStart(2, "0")}:${seconds.toString().padStart(2, "0")}`;
}
return `${minutes}:${seconds.toString().padStart(2, "0")}`;
};
/**
* Calculate ending time based on current progress and duration
*/
export const calculateEndingTime = (
currentMs: number,
durationMs: number,
): string => {
const remainingMs = durationMs - currentMs;
const endTime = new Date(Date.now() + remainingMs);
const hours = endTime.getHours();
const minutes = endTime.getMinutes();
const ampm = hours >= 12 ? "PM" : "AM";
const displayHours = hours % 12 || 12;
return `${displayHours}:${minutes.toString().padStart(2, "0")} ${ampm}`;
};
/**
* Determine connection quality based on bitrate
*/
export const getConnectionQuality = (bitrate?: number): ConnectionQuality => {
if (!bitrate) return "good";
const mbps = bitrate / 1000000;
if (mbps >= 15) return "excellent";
if (mbps >= 8) return "good";
if (mbps >= 4) return "fair";
return "poor";
};
/**
* Get poster URL for item with specified dimensions
*/
export const getPosterUrl = (
baseUrl: string | undefined,
itemId: string | undefined,
tag: string | undefined,
width: number,
height: number,
): string | null => {
if (!baseUrl || !itemId) return null;
const params = new URLSearchParams({
maxWidth: width.toString(),
maxHeight: height.toString(),
quality: "90",
...(tag && { tag }),
});
return `${baseUrl}/Items/${itemId}/Images/Primary?${params.toString()}`;
};
/**
* Truncate title to max length with ellipsis
*/
export const truncateTitle = (title: string, maxLength: number): string => {
if (title.length <= maxLength) return title;
return `${title.substring(0, maxLength - 3)}...`;
};
/**
* Check if current time is within a segment
*/
export const isWithinSegment = (
currentMs: number,
segment: { start: number; end: number } | null,
): boolean => {
if (!segment) return false;
const currentSeconds = currentMs / 1000;
return currentSeconds >= segment.start && currentSeconds <= segment.end;
};
/**
* Format bitrate to human-readable string
*/
export const formatBitrate = (bitrate: number): string => {
const mbps = bitrate / 1000000;
if (mbps >= 1) {
return `${mbps.toFixed(1)} Mbps`;
}
return `${(bitrate / 1000).toFixed(0)} Kbps`;
};

74
utils/airplay/options.ts
View File

@@ -1,74 +0,0 @@
/**
* AirPlay Options and Types
* Configuration constants and type definitions for AirPlay player
*/
export interface AirPlayDevice {
name: string;
id: string;
type: string;
}
export interface AirPlayPlayerState {
isConnected: boolean;
isPlaying: boolean;
currentItem: any | null;
currentDevice: AirPlayDevice | null;
progress: number;
duration: number;
volume: number;
showControls: boolean;
}
export interface AirPlaySegmentData {
intro: { start: number; end: number } | null;
credits: { start: number; end: number } | null;
recap: { start: number; end: number } | null;
commercial: Array<{ start: number; end: number }>;
preview: Array<{ start: number; end: number }>;
}
export interface AudioTrack {
index: number;
language: string;
codec: string;
displayTitle: string;
}
export interface SubtitleTrack {
index: number;
language: string;
codec: string;
displayTitle: string;
isForced: boolean;
}
export interface MediaSource {
id: string;
name: string;
bitrate?: number;
container: string;
}
export const AIRPLAY_CONSTANTS = {
POSTER_WIDTH: 300,
POSTER_HEIGHT: 450,
ANIMATION_DURATION: 300,
CONTROL_HIDE_DELAY: 5000,
PROGRESS_UPDATE_INTERVAL: 1000,
SEEK_FORWARD_SECONDS: 10,
SEEK_BACKWARD_SECONDS: 10,
} as const;
export const DEFAULT_AIRPLAY_STATE: AirPlayPlayerState = {
isConnected: false,
isPlaying: false,
currentItem: null,
currentDevice: null,
progress: 0,
duration: 0,
volume: 0.5,
showControls: true,
};
export type ConnectionQuality = "excellent" | "good" | "fair" | "poor";

32
utils/casting/helpers.ts
View File

@@ -128,3 +128,35 @@ export const getProtocolIcon = (
return "logo-apple";
}
};
/**
* Format episode info (e.g., "S1 E1" or "Episode 1")
*/
export const formatEpisodeInfo = (
seasonNumber?: number | null,
episodeNumber?: number | null,
): string => {
if (
seasonNumber !== undefined &&
seasonNumber !== null &&
episodeNumber !== undefined &&
episodeNumber !== null
) {
return `S${seasonNumber} E${episodeNumber}`;
}
if (episodeNumber !== undefined && episodeNumber !== null) {
return `Episode ${episodeNumber}`;
}
return "";
};
/**
* Check if we should show next episode countdown
*/
export const shouldShowNextEpisodeCountdown = (
remainingMs: number,
hasNextEpisode: boolean,
countdownStartSeconds: number,
): boolean => {
return hasNextEpisode && remainingMs <= countdownStartSeconds * 1000;
};