alteropen/streamyfin
1
0
Fork 0
mirror of https://github.com/streamyfin/streamyfin.git synced 2026-03-24 02:07:03 +00:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

fix: ws now works as expexted

Browse Source
This commit is contained in:
Fredrik Burmester
2024-08-20 08:42:52 +02:00
parent 4873aaf3df
commit 09f953ebba
6 changed files with 111 additions and 125 deletions
Download Patch File Download Diff File Expand all files Collapse all files

61
providers/JellyfinProvider.tsx
View File

@@ -73,67 +73,6 @@ export const JellyfinProvider: React.FC<{ children: ReactNode }> = ({
const [api, setApi] = useAtom(apiAtom);
const [user, setUser] = useAtom(userAtom);
const [ws, setWs] = useAtom(wsAtom);
useEffect(() => {
if (!deviceId || !api) return;
const url = `wss://${api?.basePath
.replace("https://", "")
.replace("http://", "")}/socket?api_key=${
api?.accessToken
}&deviceId=${deviceId}`;
console.log("WS", url);
const newWebSocket = new WebSocket(url);
let keepAliveInterval: NodeJS.Timeout | null = null;
newWebSocket.onopen = () => {
setIsConnected(true);
// Start sending "KeepAlive" message every 30 seconds
keepAliveInterval = setInterval(() => {
if (newWebSocket.readyState === WebSocket.OPEN) {
newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
console.log("KeepAlive message sent");
}
}, 30000);
};
newWebSocket.onmessage = (e) => {
const json = JSON.parse(e.data);
const command = json?.Data?.Command;
// On PlayPause
if (command === "PlayPause") {
console.log("Command ~ PlayPause");
} else if (command === "Stop") {
console.log("Command ~ Stop");
}
};
newWebSocket.onerror = (e) => {
console.error("WebSocket error:", e);
setIsConnected(false);
};
newWebSocket.onclose = (e) => {
console.log("WebSocket connection closed:", e.reason);
if (keepAliveInterval) {
clearInterval(keepAliveInterval);
}
};
setWs(newWebSocket);
return () => {
if (keepAliveInterval) {
clearInterval(keepAliveInterval);
}
newWebSocket.close();
};
}, [api, deviceId]);
const discoverServers = async (url: string): Promise<Server[]> => {
const servers = await jellyfin?.discovery.getRecommendedServerCandidates(

89
providers/PlaybackProvider.tsx
View File

@@ -4,6 +4,7 @@ import React, {
ReactNode,
useCallback,
useContext,
useEffect,
useRef,
useState,
} from "react";
@@ -19,6 +20,7 @@ import { getMediaInfoApi } from "@jellyfin/sdk/lib/utils/api";
import { useAtom } from "jotai";
import { OnProgressData, type VideoRef } from "react-native-video";
import { apiAtom, userAtom } from "./JellyfinProvider";
import { getDeviceId } from "@/utils/device";
type CurrentlyPlayingState = {
url: string;
@@ -34,7 +36,7 @@ interface PlaybackContextType {
progressTicks: number | null;
playVideo: () => void;
pauseVideo: () => void;
stopVideo: () => void;
stopPlayback: () => void;
presentFullscreenPlayer: () => void;
dismissFullscreenPlayer: () => void;
setIsFullscreen: (isFullscreen: boolean) => void;
@@ -63,6 +65,10 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
const [currentlyPlaying, setCurrentlyPlaying] =
useState<CurrentlyPlayingState | null>(null);
// WS
const [ws, setWs] = useState<WebSocket | null>(null);
const [isConnected, setIsConnected] = useState(false);
const { data: sessionData } = useQuery({
queryKey: ["sessionData", currentlyPlaying?.item.Id, user?.Id, api],
queryFn: async () => {
@@ -76,6 +82,11 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
enabled: !!currentlyPlaying?.item.Id && !!api && !!user?.Id,
});
const { data: deviceId } = useQuery({
queryKey: ["deviceId", api],
queryFn: getDeviceId,
});
const setCurrentlyPlayingState = (state: CurrentlyPlayingState | null) => {
if (state) {
setCurrentlyPlaying(state);
@@ -120,14 +131,15 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
});
}, [sessionData?.PlaySessionId, currentlyPlaying?.item.Id, progressTicks]);
const stopVideo = useCallback(() => {
reportPlaybackStopped({
const stopPlayback = useCallback(async () => {
await reportPlaybackStopped({
api,
itemId: currentlyPlaying?.item?.Id,
sessionId: sessionData?.PlaySessionId,
positionTicks: progressTicks ? progressTicks : 0,
});
}, [currentlyPlaying?.item?.Id, sessionData?.PlaySessionId, progressTicks]);
setCurrentlyPlayingState(null);
}, [currentlyPlaying, sessionData, progressTicks]);
const onProgress = useCallback(
({ currentTime }: OnProgressData) => {
@@ -154,6 +166,73 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
setIsFullscreen(false);
}, []);
useEffect(() => {
if (!deviceId || !api) return;
const url = `wss://${api?.basePath
.replace("https://", "")
.replace("http://", "")}/socket?api_key=${
api?.accessToken
}&deviceId=${deviceId}`;
console.log("WS", url);
const newWebSocket = new WebSocket(url);
let keepAliveInterval: NodeJS.Timeout | null = null;
newWebSocket.onopen = () => {
setIsConnected(true);
// Start sending "KeepAlive" message every 30 seconds
keepAliveInterval = setInterval(() => {
if (newWebSocket.readyState === WebSocket.OPEN) {
newWebSocket.send(JSON.stringify({ MessageType: "KeepAlive" }));
console.log("KeepAlive message sent");
}
}, 30000);
};
newWebSocket.onerror = (e) => {
console.error("WebSocket error:", e);
setIsConnected(false);
};
newWebSocket.onclose = (e) => {
console.log("WebSocket connection closed:", e.reason);
if (keepAliveInterval) {
clearInterval(keepAliveInterval);
}
};
setWs(newWebSocket);
return () => {
if (keepAliveInterval) {
clearInterval(keepAliveInterval);
}
newWebSocket.close();
};
}, [api, deviceId]);
useEffect(() => {
if (!ws) return;
ws.onmessage = (e) => {
const json = JSON.parse(e.data);
const command = json?.Data?.Command;
// On PlayPause
if (command === "PlayPause") {
console.log("Command ~ PlayPause");
if (isPlaying) pauseVideo();
else playVideo();
} else if (command === "Stop") {
console.log("Command ~ Stop");
stopPlayback();
}
};
}, [ws, stopPlayback, playVideo, pauseVideo]);
return (
<PlaybackContext.Provider
value={{
@@ -169,7 +248,7 @@ export const PlaybackProvider: React.FC<{ children: ReactNode }> = ({
playVideo,
setCurrentlyPlayingState,
pauseVideo,
stopVideo,
stopPlayback,
presentFullscreenPlayer,
dismissFullscreenPlayer,
}}