From 17e18fb6f9e9fe3b96261c0351277045a9ce4ff0 Mon Sep 17 00:00:00 2001
From: enigma0Z <enigma.0ZA@gmail.com>
Date: Tue, 10 Dec 2024 16:54:04 -0500
Subject: [PATCH] Fix broken tests/refs with refactor of mediastore

---
 components/AudioPlayer.js                     |  32 +++---
 components/NativeShellWebView.js              |  18 +--
 components/VideoPlayer.js                     |  32 +++---
 .../__snapshots__/VideoPlayer.test.js.snap    |   2 +-
 hooks/useStores.js                            |   2 +
 screens/DownloadScreen.js                     |   8 +-
 screens/HomeScreen.js                         |  30 ++---
 screens/__tests__/HomeScreen.test.js          |   6 +-
 stores/MediaStore.js                          |  86 --------------
 stores/MediaStore.ts                          |  66 +++++++++++
 stores/RootStore.ts                           |   4 -
 stores/__tests__/MediaStore.test.js           | 107 ++++++++++--------
 stores/__tests__/RootStore.test.js            |   8 +-
 13 files changed, 194 insertions(+), 207 deletions(-)
 delete mode 100644 stores/MediaStore.js
 create mode 100644 stores/MediaStore.ts

diff --git a/components/AudioPlayer.js b/components/AudioPlayer.js
index a5a478d54..8ec8aef54 100644
--- a/components/AudioPlayer.js
+++ b/components/AudioPlayer.js
@@ -13,7 +13,7 @@ import { useStores } from '../hooks/useStores';
 import { msToTicks } from '../utils/Time';
 
 const AudioPlayer = observer(() => {
-	const { rootStore } = useStores();
+	const { mediaStore } = useStores();
 
 	const [ player, setPlayer ] = useState();
 
@@ -57,46 +57,46 @@ const AudioPlayer = observer(() => {
 						didJustFinish === undefined ||
 						isPlaying === undefined ||
 						positionMs === undefined ||
-						rootStore.mediaStore.isFinished
+						mediaStore.isFinished
 					) {
 						return;
 					}
-					rootStore.mediaStore.isFinished = didJustFinish;
-					rootStore.mediaStore.isPlaying = isPlaying;
-					rootStore.mediaStore.positionTicks = msToTicks(positionMs);
+					mediaStore.isFinished = didJustFinish;
+					mediaStore.isPlaying = isPlaying;
+					mediaStore.positionTicks = msToTicks(positionMs);
 				});
 				setPlayer(sound);
 			}
 		};
 
-		if (rootStore.mediaStore.type === MediaTypes.Audio) {
+		if (mediaStore.type === MediaTypes.Audio) {
 			createPlayer({
-				uri: rootStore.mediaStore.uri,
-				positionMillis: rootStore.mediaStore.positionMillis
+				uri: mediaStore.uri,
+				positionMillis: mediaStore.positionMillis
 			});
 		}
-	}, [ rootStore.mediaStore.type, rootStore.mediaStore.uri ]);
+	}, [ mediaStore.type, mediaStore.uri ]);
 
 	// Update the play/pause state when the store indicates it should
 	useEffect(() => {
-		if (rootStore.mediaStore.type === MediaTypes.Audio && rootStore.mediaStore.shouldPlayPause) {
-			if (rootStore.mediaStore.isPlaying) {
+		if (mediaStore.type === MediaTypes.Audio && mediaStore.shouldPlayPause) {
+			if (mediaStore.isPlaying) {
 				player?.pauseAsync();
 			} else {
 				player?.playAsync();
 			}
-			rootStore.mediaStore.shouldPlayPause = false;
+			mediaStore.shouldPlayPause = false;
 		}
-	}, [ rootStore.mediaStore.shouldPlayPause ]);
+	}, [ mediaStore.shouldPlayPause ]);
 
 	// Stop the player when the store indicates it should stop playback
 	useEffect(() => {
-		if (rootStore.mediaStore.type === MediaTypes.Audio && rootStore.mediaStore.shouldStop) {
+		if (mediaStore.type === MediaTypes.Audio && mediaStore.shouldStop) {
 			player?.stopAsync();
 			player?.unloadAsync();
-			rootStore.mediaStore.shouldStop = false;
+			mediaStore.shouldStop = false;
 		}
-	}, [ rootStore.mediaStore.shouldStop ]);
+	}, [ mediaStore.shouldStop ]);
 
 	return <></>;
 });
diff --git a/components/NativeShellWebView.js b/components/NativeShellWebView.js
index efde0c0d0..887c8d760 100644
--- a/components/NativeShellWebView.js
+++ b/components/NativeShellWebView.js
@@ -23,7 +23,7 @@ import RefreshWebView from './RefreshWebView';
 
 const NativeShellWebView = observer(
 	function NativeShellWebView(props, ref) {
-		const { rootStore, downloadStore, serverStore } = useStores();
+		const { rootStore, downloadStore, serverStore, mediaStore } = useStores();
 		const [ isRefreshing, setIsRefreshing ] = useState(false);
 
 		const server = serverStore.servers[rootStore.settingStore.activeServer];
@@ -70,7 +70,7 @@ true;
 			if (rootStore.isFullscreen) return;
 
 			// Stop media playback in native players
-			rootStore.mediaStore.shouldStop = true;
+			mediaStore.shouldStop = true;
 
 			setIsRefreshing(true);
 			ref.current?.reload();
@@ -124,19 +124,19 @@ true;
 						break;
 					case 'ExpoAudioPlayer.play':
 					case 'ExpoVideoPlayer.play':
-						rootStore.mediaStore.type = event === 'ExpoAudioPlayer.play' ? MediaTypes.Audio : MediaTypes.Video;
-						rootStore.mediaStore.uri = data.url;
-						rootStore.mediaStore.backdropUri = data.backdropUrl;
-						rootStore.mediaStore.isFinished = false;
-						rootStore.mediaStore.positionTicks = data.playerStartPositionTicks;
+						mediaStore.type = event === 'ExpoAudioPlayer.play' ? MediaTypes.Audio : MediaTypes.Video;
+						mediaStore.uri = data.url;
+						mediaStore.backdropUri = data.backdropUrl;
+						mediaStore.isFinished = false;
+						mediaStore.positionTicks = data.playerStartPositionTicks;
 						break;
 					case 'ExpoAudioPlayer.playPause':
 					case 'ExpoVideoPlayer.playPause':
-						rootStore.mediaStore.shouldPlayPause = true;
+						mediaStore.shouldPlayPause = true;
 						break;
 					case 'ExpoAudioPlayer.stop':
 					case 'ExpoVideoPlayer.stop':
-						rootStore.mediaStore.shouldStop = true;
+						mediaStore.shouldStop = true;
 						break;
 					case 'console.debug':
 						// console.debug('[Browser Console]', data);
diff --git a/components/VideoPlayer.js b/components/VideoPlayer.js
index f8d2a9e95..2a92a744a 100644
--- a/components/VideoPlayer.js
+++ b/components/VideoPlayer.js
@@ -13,7 +13,7 @@ import { useStores } from '../hooks/useStores';
 import { msToTicks } from '../utils/Time';
 
 const VideoPlayer = observer(() => {
-	const { rootStore } = useStores();
+	const { rootStore, mediaStore } = useStores();
 
 	const player = useRef(null);
 	// Local player fullscreen state
@@ -31,37 +31,37 @@ const VideoPlayer = observer(() => {
 
 	// Update the player when media type or uri changes
 	useEffect(() => {
-		if (rootStore.mediaStore.type === MediaTypes.Video) {
+		if (mediaStore.type === MediaTypes.Video) {
 			rootStore.didPlayerCloseManually = true;
 			player.current?.loadAsync({
-				uri: rootStore.mediaStore.uri
+				uri: mediaStore.uri
 			}, {
-				positionMillis: rootStore.mediaStore.positionMillis,
+				positionMillis: mediaStore.positionMillis,
 				shouldPlay: true
 			});
 		}
-	}, [ rootStore.mediaStore.type, rootStore.mediaStore.uri ]);
+	}, [ mediaStore.type, mediaStore.uri ]);
 
 	// Update the play/pause state when the store indicates it should
 	useEffect(() => {
-		if (rootStore.mediaStore.type === MediaTypes.Video && rootStore.mediaStore.shouldPlayPause) {
-			if (rootStore.mediaStore.isPlaying) {
+		if (mediaStore.type === MediaTypes.Video && mediaStore.shouldPlayPause) {
+			if (mediaStore.isPlaying) {
 				player.current?.pauseAsync();
 			} else {
 				player.current?.playAsync();
 			}
-			rootStore.mediaStore.shouldPlayPause = false;
+			mediaStore.shouldPlayPause = false;
 		}
-	}, [ rootStore.mediaStore.shouldPlayPause ]);
+	}, [ mediaStore.shouldPlayPause ]);
 
 	// Close the player when the store indicates it should stop playback
 	useEffect(() => {
-		if (rootStore.mediaStore.type === MediaTypes.Video && rootStore.mediaStore.shouldStop) {
+		if (mediaStore.type === MediaTypes.Video && mediaStore.shouldStop) {
 			rootStore.didPlayerCloseManually = false;
 			closeFullscreen();
-			rootStore.mediaStore.shouldStop = false;
+			mediaStore.shouldStop = false;
 		}
-	}, [ rootStore.mediaStore.shouldStop ]);
+	}, [ mediaStore.shouldStop ]);
 
 	const openFullscreen = () => {
 		if (!isPresenting) {
@@ -86,7 +86,7 @@ const VideoPlayer = observer(() => {
 		<Video
 			ref={player}
 			usePoster
-			posterSource={{ uri: rootStore.mediaStore.backdropUri }}
+			posterSource={{ uri: mediaStore.backdropUri }}
 			resizeMode='contain'
 			useNativeControls
 			onReadyForDisplay={openFullscreen}
@@ -96,8 +96,8 @@ const VideoPlayer = observer(() => {
 					closeFullscreen();
 					return;
 				}
-				rootStore.mediaStore.isPlaying = isPlaying;
-				rootStore.mediaStore.positionTicks = msToTicks(positionMillis);
+				mediaStore.isPlaying = isPlaying;
+				mediaStore.positionTicks = msToTicks(positionMillis);
 			}}
 			onFullscreenUpdate={({ fullscreenUpdate }) => {
 				switch (fullscreenUpdate) {
@@ -114,7 +114,7 @@ const VideoPlayer = observer(() => {
 					case VideoFullscreenUpdate.PLAYER_DID_DISMISS:
 						setIsDismissing(false);
 						rootStore.isFullscreen = false;
-						rootStore.mediaStore.reset();
+						mediaStore.reset();
 						player.current?.unloadAsync()
 							.catch(console.debug);
 						break;
diff --git a/components/__tests__/__snapshots__/VideoPlayer.test.js.snap b/components/__tests__/__snapshots__/VideoPlayer.test.js.snap
index 515e26b0f..94ce7a095 100644
--- a/components/__tests__/__snapshots__/VideoPlayer.test.js.snap
+++ b/components/__tests__/__snapshots__/VideoPlayer.test.js.snap
@@ -37,7 +37,7 @@ exports[`VideoPlayer should render correctly 1`] = `
   <Image
     source={
       Object {
-        "uri": undefined,
+        "uri": null,
       }
     }
     style={
diff --git a/hooks/useStores.js b/hooks/useStores.js
index d2c595f9f..c869eaf8e 100644
--- a/hooks/useStores.js
+++ b/hooks/useStores.js
@@ -4,6 +4,7 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
  */
 import { useDownloadStore } from '../stores/DownloadStore';
+import { useMediaStore } from '../stores/MediaStore';
 import { useRootStore } from '../stores/RootStore';
 import { useServerStore } from '../stores/ServerStore';
 
@@ -12,4 +13,5 @@ export const useStores = () => ({
   rootStore: useRootStore(),
   downloadStore: useDownloadStore(),
   serverStore: useServerStore(),
+  mediaStore: useMediaStore()
 })
diff --git a/screens/DownloadScreen.js b/screens/DownloadScreen.js
index 266887c77..c5f212439 100644
--- a/screens/DownloadScreen.js
+++ b/screens/DownloadScreen.js
@@ -18,7 +18,7 @@ import { useStores } from '../hooks/useStores';
 
 const DownloadScreen = () => {
 	const navigation = useNavigation();
-	const { rootStore, downloadStore } = useStores();
+	const { downloadStore, mediaStore } = useStores();
 	const { t } = useTranslation();
 	const { theme } = useContext(ThemeContext);
 	const [ isEditMode, setIsEditMode ] = useState(false);
@@ -137,9 +137,9 @@ const DownloadScreen = () => {
 						}}
 						onPlay={async () => {
 							item.isNew = false;
-							rootStore.mediaStore.isLocalFile = true;
-							rootStore.mediaStore.type = MediaTypes.Video;
-							rootStore.mediaStore.uri = item.uri;
+							mediaStore.isLocalFile = true;
+							mediaStore.type = MediaTypes.Video;
+							mediaStore.uri = item.uri;
 						}}
 					/>
 				)}
diff --git a/screens/HomeScreen.js b/screens/HomeScreen.js
index a540d6e53..43177a919 100644
--- a/screens/HomeScreen.js
+++ b/screens/HomeScreen.js
@@ -22,7 +22,7 @@ import { useStores } from '../hooks/useStores';
 import { getIconName } from '../utils/Icons';
 
 const HomeScreen = observer(() => {
-	const { rootStore, serverStore } = useStores();
+	const { rootStore, serverStore, mediaStore } = useStores();
 	const navigation = useNavigation();
 	const { t } = useTranslation();
 	const insets = useSafeAreaInsets();
@@ -60,29 +60,29 @@ const HomeScreen = observer(() => {
 
 	// Report media updates to the audio/video plugin
 	useEffect(() => {
-		if (!rootStore.mediaStore.isLocalFile) {
+		if (!mediaStore.isLocalFile) {
 			const status = {
 				didPlayerCloseManually: rootStore.didPlayerCloseManually,
-				uri: rootStore.mediaStore.uri,
-				isFinished: rootStore.mediaStore.isFinished,
-				isPlaying: rootStore.mediaStore.isPlaying,
-				positionTicks: rootStore.mediaStore.positionTicks,
-				positionMillis: rootStore.mediaStore.positionMillis
+				uri: mediaStore.uri,
+				isFinished: mediaStore.isFinished,
+				isPlaying: mediaStore.isPlaying,
+				positionTicks: mediaStore.positionTicks,
+				positionMillis: mediaStore.positionMillis
 			};
 
-			if (rootStore.mediaStore.type === MediaTypes.Audio) {
+			if (mediaStore.type === MediaTypes.Audio) {
 				webview.current?.injectJavaScript(`window.ExpoAudioPlayer && window.ExpoAudioPlayer._reportStatus(${JSON.stringify(status)});`);
-			} else if (rootStore.mediaStore.type === MediaTypes.Video) {
+			} else if (mediaStore.type === MediaTypes.Video) {
 				webview.current?.injectJavaScript(`window.ExpoVideoPlayer && window.ExpoVideoPlayer._reportStatus(${JSON.stringify(status)});`);
 			}
 		}
 	}, [
-		rootStore.mediaStore.type,
-		rootStore.mediaStore.uri,
-		rootStore.mediaStore.isFinished,
-		rootStore.mediaStore.isLocalFile,
-		rootStore.mediaStore.isPlaying,
-		rootStore.mediaStore.positionTicks
+		mediaStore.type,
+		mediaStore.uri,
+		mediaStore.isFinished,
+		mediaStore.isLocalFile,
+		mediaStore.isPlaying,
+		mediaStore.positionTicks
 	]);
 
 	// Clear the error state when the active server changes
diff --git a/screens/__tests__/HomeScreen.test.js b/screens/__tests__/HomeScreen.test.js
index 53c681129..6f55d4753 100644
--- a/screens/__tests__/HomeScreen.test.js
+++ b/screens/__tests__/HomeScreen.test.js
@@ -27,11 +27,11 @@ jest.mock('../../components/NativeShellWebView', () => 'NativeShellWebView');
 jest.mock('../../hooks/useStores');
 useStores.mockImplementation(() => ({
 	rootStore: {
-		mediaStore: {},
 		settingStore: {
 			activeServer: 0
 		}
 	},
+	mediaStore: {},
 	serverStore: {
 		servers: [
 			{
@@ -59,9 +59,9 @@ describe('HomeScreen', () => {
 	it('should render null when no servers are present', () => {
 		useStores.mockImplementationOnce(() => ({
 			rootStore: {
-				mediaStore: {},
 				settingStore: {}
 			},
+			mediaStore: {},
 			serverStore: {},
 		}));
 
@@ -81,11 +81,11 @@ describe('HomeScreen', () => {
 	it('should render ErrorView when invalid server exists', () => {
 		useStores.mockImplementationOnce(() => ({
 			rootStore: {
-				mediaStore: {},
 				settingStore: {
 					activeServer: 0
 				}
 			},
+			mediaStore: {},
 			serverStore: {
 				servers: [{}]
 			}
diff --git a/stores/MediaStore.js b/stores/MediaStore.js
deleted file mode 100644
index 6169c9ab6..000000000
--- a/stores/MediaStore.js
+++ /dev/null
@@ -1,86 +0,0 @@
-/**
- * This Source Code Form is subject to the terms of the Mozilla Public
- * License, v. 2.0. If a copy of the MPL was not distributed with this
- * file, You can obtain one at http://mozilla.org/MPL/2.0/.
- */
-import { action, computed, decorate, observable } from 'mobx';
-import { ignore } from 'mobx-sync-lite';
-
-import { ticksToMs } from '../utils/Time';
-
-export default class MediaStore {
-	/**
-	 * The MediaType being played
-	 */
-	type
-
-	/**
-	 * URI of the current media item
-	 */
-	uri
-
-	/**
-	 * Has media playback finished
-	 */
-	isFinished = false
-
-	/**
-	 * Is the media a local file (not streaming media)
-	 */
-	isLocalFile = false
-
-	/**
-	 * Is the media currently playing
-	 */
-	isPlaying = false
-
-	/**
-	 * The current playback position in ticks
-	 */
-	positionTicks = 0
-
-	/**
-	 * The URI of the backdrop image of the current media item
-	 */
-	backdropUri
-
-	/**
-	 * The player should toggle the play/pause state
-	 */
-	shouldPlayPause = false
-
-	/**
-	 * The player should stop playback
-	 */
-	shouldStop = false
-
-	get positionMillis() {
-		return ticksToMs(this.positionTicks);
-	}
-
-	reset() {
-		this.type = null;
-		this.uri = null;
-		this.isFinished = false;
-		this.isLocalFile = false;
-		this.isPlaying = false;
-		this.positionTicks = 0;
-		this.backdropUri = null;
-		this.shouldPlayPause = false;
-		this.shouldStop = false;
-	}
-}
-
-decorate(MediaStore, {
-	type: [ ignore, observable ],
-	uri: [ ignore, observable ],
-	isFinished: [ ignore, observable ],
-	isLocalFile: [ ignore, observable ],
-	isPlaying: [ ignore, observable ],
-	positionTicks: [ ignore, observable ],
-	positionMillis: computed,
-	backdropUri: [ ignore, observable ],
-	shouldPlayPause: [ ignore, observable ],
-	shouldStop: [ ignore, observable ],
-	reset: action
-});
diff --git a/stores/MediaStore.ts b/stores/MediaStore.ts
new file mode 100644
index 000000000..85d8e5b8d
--- /dev/null
+++ b/stores/MediaStore.ts
@@ -0,0 +1,66 @@
+/**
+ * This Source Code Form is subject to the terms of the Mozilla Public
+ * License, v. 2.0. If a copy of the MPL was not distributed with this
+ * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ */
+import { ticksToMs } from '../utils/Time';
+import { create } from 'zustand';
+
+type State = {
+	/** The media type being played */
+	type?: string,
+
+	/** URI of the current media file */
+	uri?: string,
+
+	/** URI of the backdrop image of the current media item */
+	backdropUri?: string,
+	
+	/** Current playback position (in ticks) */
+	positionTicks: number,
+
+	/** Has media playback finished */
+	isFinished: boolean,
+
+	/** Is the media in a local file (i.e. not streaming) */
+	isLocalFile: boolean,
+	
+	/** Is the media currently playing */
+	isPlaying: boolean,
+	
+	/** The player should toggle the play/pause state */
+	shouldPlayPause: boolean,
+
+	/** The player should stop playback */
+	shouldStop: boolean,
+}
+
+type Actions = {
+	/** Current position in milliseconds */
+	getPositionMillis: () => number,
+
+	/** Resets the store to a default state */
+	reset: () => void
+}
+
+export type MediaStore = State & Actions
+
+const initialState: State = {
+	type: null,
+	uri: null,
+	backdropUri: null,
+	isFinished: false,
+	isLocalFile: false,
+	isPlaying: false,
+	positionTicks: 0,
+	shouldPlayPause: false,
+	shouldStop: false
+}
+
+export const useMediaStore = create<State & Actions>()((set, get) => ({
+	...initialState,
+	getPositionMillis: () => ticksToMs(get().positionTicks),
+	reset: () => {
+		set({ ...initialState })
+	}
+}))
\ No newline at end of file
diff --git a/stores/RootStore.ts b/stores/RootStore.ts
index 0dfaea328..f956207bf 100644
--- a/stores/RootStore.ts
+++ b/stores/RootStore.ts
@@ -12,7 +12,6 @@ import { v4 as uuidv4 } from 'uuid';
 
 import { getAppName, getSafeDeviceName } from '../utils/Device';
 
-import MediaStore from './MediaStore';
 import SettingStore from './SettingStore';
 import { create } from 'zustand';
 
@@ -22,7 +21,6 @@ type State = {
 	isFullscreen: boolean,
 	isReloadRequired: boolean,
 	didPlayerCloseManually: boolean,
-	mediaStore: MediaStore,
 	settingStore: SettingStore,
 }
 
@@ -39,7 +37,6 @@ const initialState: State = {
 	isFullscreen: false,
 	isReloadRequired: false,
 	didPlayerCloseManually: true,
-	mediaStore: new MediaStore(),
 	settingStore: new SettingStore()
 }
 
@@ -56,7 +53,6 @@ export const useRootStore = create<State & Actions>()((set, get) => ({
 		}
 	}),
 	reset: () => {
-		get().mediaStore.reset()
 		get().settingStore.reset()
 
 		set({
diff --git a/stores/__tests__/MediaStore.test.js b/stores/__tests__/MediaStore.test.js
index 7bdbe9d73..5876975a9 100644
--- a/stores/__tests__/MediaStore.test.js
+++ b/stores/__tests__/MediaStore.test.js
@@ -2,59 +2,74 @@
  * This Source Code Form is subject to the terms of the Mozilla Public
  * License, v. 2.0. If a copy of the MPL was not distributed with this
  * file, You can obtain one at http://mozilla.org/MPL/2.0/.
+ * 
+ * @jest-environment jsdom
+ * @jest-environment-options {"url": "https://jestjs.io/"}
  */
+import { renderHook } from '@testing-library/react';
 import MediaTypes from '../../constants/MediaTypes';
-import MediaStore from '../MediaStore';
+import MediaStore, { useMediaStore } from '../MediaStore';
+import { act } from '@testing-library/react-native';
 
 describe('MediaStore', () => {
 	it('should initialize with default values', () => {
-		const store = new MediaStore();
-
-		expect(store.type).toBeUndefined();
-		expect(store.uri).toBeUndefined();
-		expect(store.isFinished).toBe(false);
-		expect(store.isLocalFile).toBe(false);
-		expect(store.isPlaying).toBe(false);
-		expect(store.positionTicks).toBe(0);
-		expect(store.positionMillis).toBe(0);
-		expect(store.backdropUri).toBeUndefined();
-		expect(store.shouldPlayPause).toBe(false);
-		expect(store.shouldStop).toBe(false);
+		const store = renderHook(() => useMediaStore((state) => state))
+
+		expect(store.result.current.type).toBeNull()
+		expect(store.result.current.uri).toBeNull()
+		expect(store.result.current.backdropUri).toBeNull()
+
+		expect(store.result.current.positionTicks).toBe(0);
+		expect(store.result.current.getPositionMillis()).toBe(0);
+
+		expect(store.result.current.isFinished).toBe(false);
+		expect(store.result.current.isLocalFile).toBe(false);
+		expect(store.result.current.isPlaying).toBe(false);
+		expect(store.result.current.shouldPlayPause).toBe(false);
+		expect(store.result.current.shouldStop).toBe(false);
 	});
 
 	it('should reset to the default values', () => {
-		const store = new MediaStore();
-		store.type = MediaTypes.Video;
-		store.uri = 'https://foobar';
-		store.isFinished = true;
-		store.isLocalFile = true;
-		store.isPlaying = true;
-		store.positionTicks = 3423000;
-		store.backdropUri = 'https://foobar';
-		store.shouldPlayPause = true;
-		store.shouldStop = true;
-
-		expect(store.type).toBe(MediaTypes.Video);
-		expect(store.uri).toBe('https://foobar');
-		expect(store.isFinished).toBe(true);
-		expect(store.isLocalFile).toBe(true);
-		expect(store.isPlaying).toBe(true);
-		expect(store.positionTicks).toBe(3423000);
-		expect(store.positionMillis).toBe(342.3);
-		expect(store.backdropUri).toBe('https://foobar');
-		expect(store.shouldPlayPause).toBe(true);
-		expect(store.shouldStop).toBe(true);
-
-		store.reset();
-		expect(store.type).toBeNull();
-		expect(store.uri).toBeNull();
-		expect(store.isFinished).toBe(false);
-		expect(store.isLocalFile).toBe(false);
-		expect(store.isPlaying).toBe(false);
-		expect(store.positionTicks).toBe(0);
-		expect(store.positionMillis).toBe(0);
-		expect(store.backdropUri).toBeNull();
-		expect(store.shouldPlayPause).toBe(false);
-		expect(store.shouldStop).toBe(false);
+		const store = renderHook(() => useMediaStore((state) => state))
+
+		act(() => {
+			store.result.current.type = MediaTypes.Video;
+			store.result.current.uri = 'https://foobar';
+			store.result.current.isFinished = true;
+			store.result.current.isLocalFile = true;
+			store.result.current.isPlaying = true;
+			store.result.current.positionTicks = 3423000;
+			store.result.current.backdropUri = 'https://foobar';
+			store.result.current.shouldPlayPause = true;
+			store.result.current.shouldStop = true;
+		})
+
+		expect(store.result.current.type).toBe(MediaTypes.Video);
+		expect(store.result.current.uri).toBe('https://foobar');
+		expect(store.result.current.backdropUri).toBe('https://foobar');
+
+		expect(store.result.current.positionTicks).toBe(3423000);
+		expect(store.result.current.getPositionMillis()).toBe(342.3);
+
+		expect(store.result.current.isFinished).toBe(true);
+		expect(store.result.current.isLocalFile).toBe(true);
+		expect(store.result.current.isPlaying).toBe(true);
+		expect(store.result.current.shouldPlayPause).toBe(true);
+		expect(store.result.current.shouldStop).toBe(true);
+
+		act(() => { store.result.current.reset(); })
+
+		expect(store.result.current.type).toBeNull();
+		expect(store.result.current.uri).toBeNull();
+		expect(store.result.current.backdropUri).toBeNull();
+
+		expect(store.result.current.positionTicks).toBe(0);
+		expect(store.result.current.getPositionMillis()).toBe(0);
+
+		expect(store.result.current.isFinished).toBe(false);
+		expect(store.result.current.isLocalFile).toBe(false);
+		expect(store.result.current.isPlaying).toBe(false);
+		expect(store.result.current.shouldPlayPause).toBe(false);
+		expect(store.result.current.shouldStop).toBe(false);
 	});
 });
diff --git a/stores/__tests__/RootStore.test.js b/stores/__tests__/RootStore.test.js
index 46ffa9721..7fc270e8f 100644
--- a/stores/__tests__/RootStore.test.js
+++ b/stores/__tests__/RootStore.test.js
@@ -8,10 +8,8 @@
  */
 import { Jellyfin } from '@jellyfin/sdk';
 
-import DownloadStore from '../DownloadStore';
 import MediaStore from '../MediaStore';
-import RootStore, { useRootStore } from '../RootStore';
-import ServerStore from '../ServerStore';
+import { useRootStore } from '../RootStore';
 import SettingStore from '../SettingStore';
 
 import { renderHook, act } from '@testing-library/react'
@@ -28,7 +26,6 @@ describe('RootStore', () => {
 		expect(store.getApi()).toBeInstanceOf(Jellyfin);
 		expect(store.getApi().deviceInfo.id).toBe(store.deviceId);
 
-		expect(store.mediaStore).toBeInstanceOf(MediaStore);
 		expect(store.settingStore).toBeInstanceOf(SettingStore);
 	});
 
@@ -41,14 +38,12 @@ describe('RootStore', () => {
 			storeHook.result.current.didPlayerCloseManually = false;
 		})
 
-		storeHook.result.current.mediaStore.reset = jest.fn();
 		storeHook.result.current.settingStore.reset = jest.fn();
 
 		expect(storeHook.result.current.storeLoaded).toBe(false);
 		expect(storeHook.result.current.isFullscreen).toBe(true);
 		expect(storeHook.result.current.isReloadRequired).toBe(true);
 		expect(storeHook.result.current.didPlayerCloseManually).toBe(false);
-		expect(storeHook.result.current.mediaStore.reset).not.toHaveBeenCalled();
 		expect(storeHook.result.current.settingStore.reset).not.toHaveBeenCalled();
 
 		act(() => {
@@ -59,7 +54,6 @@ describe('RootStore', () => {
 		expect(storeHook.result.current.isFullscreen).toBe(false);
 		expect(storeHook.result.current.isReloadRequired).toBe(false);
 		expect(storeHook.result.current.didPlayerCloseManually).toBe(true);
-		expect(storeHook.result.current.mediaStore.reset).toHaveBeenCalled();
 		expect(storeHook.result.current.settingStore.reset).toHaveBeenCalled();
 	});
 });