diff --git a/app/(auth)/(tabs)/(home)/sessions/index.tsx b/app/(auth)/(tabs)/(home)/sessions/index.tsx index 5c2c1992..c797b83e 100644 --- a/app/(auth)/(tabs)/(home)/sessions/index.tsx +++ b/app/(auth)/(tabs)/(home)/sessions/index.tsx @@ -13,13 +13,9 @@ import { useInterval } from "@/hooks/useInterval"; import React, { useEffect, useMemo, useState } from "react"; import { formatTimeString } from "@/utils/time"; import { formatBitrate } from "@/utils/bitrate"; -import { - Ionicons, - Entypo, - AntDesign, - MaterialCommunityIcons, -} from "@expo/vector-icons"; +import { Ionicons, Entypo, AntDesign, MaterialCommunityIcons } from "@expo/vector-icons"; import { Badge } from "@/components/Badge"; +import { useQuery } from "@tanstack/react-query"; export default function page() { const { sessions, isLoading } = useSessions({} as useSessionsProps); @@ -35,9 +31,7 @@ export default function page() { if (!sessions || sessions.length == 0) return ( - - {t("home.sessions.no_active_sessions")} - + {t("home.sessions.no_active_sessions")} ); @@ -76,44 +70,42 @@ const SessionCard = ({ session }: SessionCardProps) => { } return Math.round( - (100 / session.NowPlayingItem?.RunTimeTicks) * - (session.NowPlayingItem?.RunTimeTicks - remainingTicks) + (100 / session.NowPlayingItem?.RunTimeTicks) * (session.NowPlayingItem?.RunTimeTicks - remainingTicks) ); }; useEffect(() => { const currentTime = session.PlayState?.PositionTicks; const duration = session.NowPlayingItem?.RunTimeTicks; - if ( - duration !== null && - duration !== undefined && - currentTime !== null && - currentTime !== undefined - ) { + if (duration !== null && duration !== undefined && currentTime !== null && currentTime !== undefined) { const remainingTimeTicks = duration - currentTime; setRemainingTicks(remainingTimeTicks); } }, [session]); + const { data: ipInfo } = useQuery({ + queryKey: ["ipinfo", session.RemoteEndPoint], + cacheTime: Infinity, + queryFn: async () => { + const resp = await api.axiosInstance.get(`https://freeipapi.com/api/json/${session.RemoteEndPoint}`); + return resp.data; + }, + }); + useInterval(tick, 1000); return ( - + {session.NowPlayingItem?.Type === "Episode" ? ( <> - - {session.NowPlayingItem?.Name} - + {session.NowPlayingItem?.Name} {`S${session.NowPlayingItem.ParentIndexNumber?.toString()}:E${session.NowPlayingItem.IndexNumber?.toString()}`} {" - "} @@ -122,15 +114,9 @@ const SessionCard = ({ session }: SessionCardProps) => { ) : ( <> - - {session.NowPlayingItem?.Name} - - - {session.NowPlayingItem?.ProductionYear} - - - {session.NowPlayingItem?.SeriesName} - + {session.NowPlayingItem?.Name} + {session.NowPlayingItem?.ProductionYear} + {session.NowPlayingItem?.SeriesName} )} @@ -140,6 +126,8 @@ const SessionCard = ({ session }: SessionCardProps) => { {session.Client} {"\n"} {session.DeviceName} + {"\n"} + {ipInfo?.cityName} {ipInfo?.countryCode} @@ -180,9 +168,7 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => { const iconMap = { bitrate: , codec: , - videoRange: ( - - ), + videoRange: , resolution: , language: , audioChannels: , @@ -190,11 +176,7 @@ const TranscodingBadges = ({ properties }: TranscodingBadgesProps) => { } as const; const icon = (val: string) => { - return ( - iconMap[val as keyof typeof iconMap] ?? ( - - ) - ); + return iconMap[val as keyof typeof iconMap] ?? ; }; const formatVal = (key: string, val: any) => { @@ -251,9 +233,7 @@ const TranscodingStreamView = ({ return ( - - {title} - + {title} @@ -262,11 +242,7 @@ const TranscodingStreamView = ({ <> - + @@ -280,23 +256,17 @@ const TranscodingStreamView = ({ const TranscodingView = ({ session }: SessionCardProps) => { const videoStream = useMemo(() => { - return session.NowPlayingItem?.MediaStreams?.filter( - (s) => s.Type == "Video" - )[0]; + return session.NowPlayingItem?.MediaStreams?.filter((s) => s.Type == "Video")[0]; }, [session]); const audioStream = useMemo(() => { const index = session.PlayState?.AudioStreamIndex; - return index !== null && index !== undefined - ? session.NowPlayingItem?.MediaStreams?.[index] - : undefined; + return index !== null && index !== undefined ? session.NowPlayingItem?.MediaStreams?.[index] : undefined; }, [session.PlayState?.AudioStreamIndex]); const subtitleStream = useMemo(() => { const index = session.PlayState?.SubtitleStreamIndex; - return index !== null && index !== undefined - ? session.NowPlayingItem?.MediaStreams?.[index] - : undefined; + return index !== null && index !== undefined ? session.NowPlayingItem?.MediaStreams?.[index] : undefined; }, [session.PlayState?.SubtitleStreamIndex]); const isTranscoding = useMemo(() => { @@ -321,11 +291,7 @@ const TranscodingView = ({ session }: SessionCardProps) => { bitrate: session.TranscodingInfo?.Bitrate, codec: session.TranscodingInfo?.VideoCodec, }} - isTranscoding={ - isTranscoding && !session.TranscodingInfo?.IsVideoDirect - ? true - : false - } + isTranscoding={isTranscoding && !session.TranscodingInfo?.IsVideoDirect ? true : false} /> { codec: session.TranscodingInfo?.AudioCodec, audioChannels: session.TranscodingInfo?.AudioChannels?.toString(), }} - isTranscoding={ - isTranscoding && !session.TranscodingInfo?.IsVideoDirect - ? true - : false - } + isTranscoding={isTranscoding && !session.TranscodingInfo?.IsVideoDirect ? true : false} /> {subtitleStream && (