From 1102df8384404af198995a6696fd2a7e70f3d9f1 Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Mon, 9 Dec 2024 01:06:32 +1100 Subject: [PATCH 1/8] Added fixes for opacity style --- components/video-player/controls/EpisodeList.tsx | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index f3ddfbc9..710c4b6d 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -183,8 +183,6 @@ export const EpisodeList: React.FC = ({ item, close }) => { @@ -235,7 +233,9 @@ export const EpisodeList: React.FC = ({ item, close }) => { { @@ -282,9 +282,6 @@ export const EpisodeList: React.FC = ({ item, close }) => { keyExtractor={(e: BaseItemDto) => e.Id ?? ""} estimatedItemSize={200} showsHorizontalScrollIndicator={false} - contentContainerStyle={{ - paddingHorizontal: 16, - }} /> From 1d4c56265fc9a2b438b271ea2442bca0b95ca94a Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Mon, 9 Dec 2024 01:54:30 +1100 Subject: [PATCH 2/8] Made sure changes are saved when changing episode list --- components/video-player/controls/EpisodeList.tsx | 16 +++++++++++----- 1 file changed, 11 insertions(+), 5 deletions(-) diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index 710c4b6d..78127865 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -17,7 +17,7 @@ import { HorizontalScroll, HorizontalScrollRef, } from "@/components/common/HorrizontalScroll"; -import { router } from "expo-router"; +import { router, useLocalSearchParams } from "expo-router"; import { getDefaultPlaySettings } from "@/utils/jellyfin/getDefaultPlaySettings"; import { getItemById } from "@/utils/jellyfin/user-library/getItemById"; import { useSettings } from "@/utils/atoms/settings"; @@ -155,22 +155,28 @@ export const EpisodeList: React.FC = ({ item, close }) => { } }, [episodes, item.Id]); + const { audioIndex, subtitleIndex, bitrateValue } = useLocalSearchParams<{ + audioIndex: string; + subtitleIndex: string; + mediaSourceId: string; + bitrateValue: string; + }>(); + const gotoEpisode = async (itemId: string) => { const item = await getItemById(api, itemId); if (!settings || !item) return; - const { bitrate, mediaSource, audioIndex, subtitleIndex } = - getDefaultPlaySettings(item, settings); + const { mediaSource } = getDefaultPlaySettings(item, settings); const queryParams = new URLSearchParams({ itemId: item.Id ?? "", // Ensure itemId is a string audioIndex: audioIndex?.toString() ?? "", subtitleIndex: subtitleIndex?.toString() ?? "", mediaSourceId: mediaSource?.Id ?? "", // Ensure mediaSourceId is a string - bitrateValue: bitrate.toString(), + bitrateValue: bitrateValue, }).toString(); - if (!bitrate.value) { + if (!bitrateValue) { // @ts-expect-error router.replace(`player/direct-player?${queryParams}`); return; From 40b3304f9b3c7e5b8e5e98f93f706521806efab3 Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Mon, 9 Dec 2024 02:48:36 +1100 Subject: [PATCH 3/8] Fixed socket not closing on exit --- app/(auth)/player/direct-player.tsx | 15 +- components/video-player/controls/Controls.tsx | 1 - .../video-player/controls/EpisodeList.tsx | 175 +++++++++--------- 3 files changed, 85 insertions(+), 106 deletions(-) diff --git a/app/(auth)/player/direct-player.tsx b/app/(auth)/player/direct-player.tsx index 370150a7..b0997e88 100644 --- a/app/(auth)/player/direct-player.tsx +++ b/app/(auth)/player/direct-player.tsx @@ -342,22 +342,11 @@ export default function page() { : 0; }, [item]); - const backAction = () => { - videoRef.current?.stop(); - return false; - }; - useFocusEffect( React.useCallback(() => { - const onBackPress = () => { - return backAction(); - }; - - BackHandler.addEventListener("hardwareBackPress", onBackPress); - return async () => { - videoRef.current?.stop(); - BackHandler.removeEventListener("hardwareBackPress", onBackPress); + stop(); + console.log("Unmounted"); }; }, []) ); diff --git a/components/video-player/controls/Controls.tsx b/components/video-player/controls/Controls.tsx index f7b7940d..6460557a 100644 --- a/components/video-player/controls/Controls.tsx +++ b/components/video-player/controls/Controls.tsx @@ -526,7 +526,6 @@ export const Controls: React.FC = ({ )} { - if (stop) await stop(); router.back(); }} className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2" diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index 78127865..c40983b2 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -192,106 +192,97 @@ export const EpisodeList: React.FC = ({ item, close }) => { backgroundColor: "black", }} > - {isFetching ? ( - - - - ) : ( - <> - - {seriesItem && ( - { - setSeasonIndexState((prev) => ({ - ...prev, - [item.SeriesId ?? ""]: season.IndexNumber, - })); - }} - /> - )} - { - close(); + <> + + {seriesItem && ( + { + setSeasonIndexState((prev) => ({ + ...prev, + [item.SeriesId ?? ""]: season.IndexNumber, + })); }} - className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2" - > - - - - + )} + { + close(); }} + className="aspect-square flex flex-col bg-neutral-800/90 rounded-xl items-center justify-center p-2" > - ( - + + + + ( + + { + gotoEpisode(_item.Id); + }} > - { - gotoEpisode(_item.Id); + + + + - - - - - {_item.Name} - - - {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} - - - {runtimeTicksToSeconds(_item.RunTimeTicks)} - - - - - - - {_item.Overview} + {_item.Name} + + + {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} + + + {runtimeTicksToSeconds(_item.RunTimeTicks)} - )} - keyExtractor={(e: BaseItemDto) => e.Id ?? ""} - estimatedItemSize={200} - showsHorizontalScrollIndicator={false} - /> - - - )} + + + + + {_item.Overview} + + + )} + keyExtractor={(e: BaseItemDto) => e.Id ?? ""} + estimatedItemSize={200} + showsHorizontalScrollIndicator={false} + /> + + ); }; From 785e3b685993541c04cd5b22cd72169afda4de28 Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Mon, 9 Dec 2024 02:56:27 +1100 Subject: [PATCH 4/8] Stop websocket on page exit for transcoded player --- app/(auth)/player/transcoding-player.tsx | 15 +-------------- 1 file changed, 1 insertion(+), 14 deletions(-) diff --git a/app/(auth)/player/transcoding-player.tsx b/app/(auth)/player/transcoding-player.tsx index f9441a13..e2d23431 100644 --- a/app/(auth)/player/transcoding-player.tsx +++ b/app/(auth)/player/transcoding-player.tsx @@ -362,23 +362,10 @@ const Player = () => { })); }; - const backAction = () => { - videoRef.current?.pause(); - return false; - }; - useFocusEffect( React.useCallback(() => { - const onBackPress = () => { - return backAction(); - }; - - BackHandler.addEventListener("hardwareBackPress", onBackPress); - play(); - return async () => { - videoRef.current?.pause(); - BackHandler.removeEventListener("hardwareBackPress", onBackPress); + stop(); }; }, []) ); From 4d385739735293a071639a1847e54472575920e1 Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Mon, 9 Dec 2024 03:38:22 +1100 Subject: [PATCH 5/8] Fixed rubber banding issue --- .../video-player/controls/EpisodeList.tsx | 118 +++++++++--------- 1 file changed, 59 insertions(+), 59 deletions(-) diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index c40983b2..949ba173 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -98,7 +98,11 @@ export const EpisodeList: React.FC = ({ item, close }) => { [seasons, seasonIndex] ); - const { data: episodes, isFetching } = useQuery({ + const { + data: episodes, + isFetching, + isFetched, + } = useQuery({ queryKey: ["episodes", item.SeriesId, selectedSeasonId], queryFn: async () => { if (!api || !user?.Id || !item.Id || !selectedSeasonId) return []; @@ -117,14 +121,15 @@ export const EpisodeList: React.FC = ({ item, close }) => { useEffect(() => { if (item?.Type === "Episode" && item.Id) { + console.log("loaded"); const index = episodes?.findIndex((ep) => ep.Id === item.Id); if (index !== undefined && index !== -1) { setTimeout(() => { scrollToIndex(index); - }, 400); + }, 500); } } - }, [episodes, item]); + }, [isFetched]); const queryClient = useQueryClient(); useEffect(() => { @@ -190,6 +195,7 @@ export const EpisodeList: React.FC = ({ item, close }) => { style={{ position: "absolute", backgroundColor: "black", + height: "100%", }} > <> @@ -221,67 +227,61 @@ export const EpisodeList: React.FC = ({ item, close }) => { - - ( - ( + + { + gotoEpisode(_item.Id); + }} > - { - gotoEpisode(_item.Id); + + + + - - - - - {_item.Name} - - - {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} - - - {runtimeTicksToSeconds(_item.RunTimeTicks)} - - - - - - - {_item.Overview} + {_item.Name} + + + {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} + + + {runtimeTicksToSeconds(_item.RunTimeTicks)} - )} - keyExtractor={(e: BaseItemDto) => e.Id ?? ""} - estimatedItemSize={200} - showsHorizontalScrollIndicator={false} - /> - + + + + + {_item.Overview} + + + )} + keyExtractor={(e: BaseItemDto) => e.Id ?? ""} + estimatedItemSize={200} + showsHorizontalScrollIndicator={false} + /> ); From f842c8a41f6930dad03ef1836113817066de38dc Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Mon, 9 Dec 2024 04:01:59 +1100 Subject: [PATCH 6/8] Episode list fix rendering --- .../video-player/controls/EpisodeList.tsx | 119 +++++++++--------- 1 file changed, 60 insertions(+), 59 deletions(-) diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index 949ba173..159e3448 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -98,11 +98,7 @@ export const EpisodeList: React.FC = ({ item, close }) => { [seasons, seasonIndex] ); - const { - data: episodes, - isFetching, - isFetched, - } = useQuery({ + const { data: episodes, isFetching } = useQuery({ queryKey: ["episodes", item.SeriesId, selectedSeasonId], queryFn: async () => { if (!api || !user?.Id || !item.Id || !selectedSeasonId) return []; @@ -121,15 +117,14 @@ export const EpisodeList: React.FC = ({ item, close }) => { useEffect(() => { if (item?.Type === "Episode" && item.Id) { - console.log("loaded"); const index = episodes?.findIndex((ep) => ep.Id === item.Id); if (index !== undefined && index !== -1) { setTimeout(() => { scrollToIndex(index); - }, 500); + }, 400); } } - }, [isFetched]); + }, [episodes, item]); const queryClient = useQueryClient(); useEffect(() => { @@ -195,7 +190,6 @@ export const EpisodeList: React.FC = ({ item, close }) => { style={{ position: "absolute", backgroundColor: "black", - height: "100%", }} > <> @@ -227,61 +221,68 @@ export const EpisodeList: React.FC = ({ item, close }) => { - ( - - { - gotoEpisode(_item.Id); - }} + + ( + - - - - { + gotoEpisode(_item.Id); }} > - {_item.Name} - - - {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} - - - {runtimeTicksToSeconds(_item.RunTimeTicks)} + + + + + {_item.Name} + + + {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} + + + {runtimeTicksToSeconds(_item.RunTimeTicks)} + + + + + + + {_item.Overview} - - - - - {_item.Overview} - - - )} - keyExtractor={(e: BaseItemDto) => e.Id ?? ""} - estimatedItemSize={200} - showsHorizontalScrollIndicator={false} - /> + )} + keyExtractor={(e: BaseItemDto) => e.Id ?? ""} + estimatedItemSize={200} + showsHorizontalScrollIndicator={false} + /> + ); From 828edad749d16e84f4b362f374971f8d05715b79 Mon Sep 17 00:00:00 2001 From: Alex Kim Date: Mon, 9 Dec 2024 04:07:56 +1100 Subject: [PATCH 7/8] Added padding on right side only --- components/video-player/controls/EpisodeList.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index 159e3448..bcf44616 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -197,7 +197,7 @@ export const EpisodeList: React.FC = ({ item, close }) => { style={{ justifyContent: "space-between", }} - className={`flex flex-row items-center space-x-2 z-10 p-4`} + className={`flex flex-row items-center space-x-2 z-10 py-4 pr-4`} > {seriesItem && ( Date: Mon, 9 Dec 2024 04:12:13 +1100 Subject: [PATCH 8/8] Fixed more bugs --- .../video-player/controls/EpisodeList.tsx | 114 +++++++++--------- 1 file changed, 57 insertions(+), 57 deletions(-) diff --git a/components/video-player/controls/EpisodeList.tsx b/components/video-player/controls/EpisodeList.tsx index bcf44616..bdd42ee9 100644 --- a/components/video-player/controls/EpisodeList.tsx +++ b/components/video-player/controls/EpisodeList.tsx @@ -185,11 +185,17 @@ export const EpisodeList: React.FC = ({ item, close }) => { router.replace(`player/transcoding-player?${queryParams}`); }; + if (!episodes) { + return ; + } + return ( <> @@ -221,68 +227,62 @@ export const EpisodeList: React.FC = ({ item, close }) => { - - ( - ( + + { + gotoEpisode(_item.Id); + }} > - { - gotoEpisode(_item.Id); + + + + - - - - - {_item.Name} - - - {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} - - - {runtimeTicksToSeconds(_item.RunTimeTicks)} - - - - - - - {_item.Overview} + {_item.Name} + + + {`S${_item.ParentIndexNumber?.toString()}:E${_item.IndexNumber?.toString()}`} + + + {runtimeTicksToSeconds(_item.RunTimeTicks)} - )} - keyExtractor={(e: BaseItemDto) => e.Id ?? ""} - estimatedItemSize={200} - showsHorizontalScrollIndicator={false} - /> - + + + + + {_item.Overview} + + + )} + keyExtractor={(e: BaseItemDto) => e.Id ?? ""} + estimatedItemSize={200} + showsHorizontalScrollIndicator={false} + /> );