Feature: adds screen sharing

frontend/src/components/App.tsx

@@ -8,6 +8,7 @@ import { API, getDisplayTitle, PlaylistItem, ServerEvent } from '../api/player';
 import { FaMusic, FaHeart, FaPlus, FaEdit } from 'react-icons/fa';
 import useWebSocket from 'react-use-websocket';
 import classNames from 'classnames';
+import { useScreenShare } from '../hooks/useScreenShare';
 
 enum Tabs {
   Playlist = "playlist",
@@ -82,6 +83,7 @@ const FavoritesContent: React.FC<SonglistContentProps> = ({ songs, isPlaying, au
 
 const App: React.FC = () => {
   const [isPlaying, setIsPlaying] = useState(false);
+  const [isIdle, setIsIdle] = useState(false);
   const [nowPlayingSong, setNowPlayingSong] = useState<string | null>(null);
   const [nowPlayingFileName, setNowPlayingFileName] = useState<string | null>(null);
   const [volume, setVolume] = useState(100);
@@ -92,6 +94,13 @@ const App: React.FC = () => {
   const [isRenameModalOpen, setIsRenameModalOpen] = useState(false);
   const [favoriteToRename, setFavoriteToRename] = useState<PlaylistItem | null>(null);
 
+  const { 
+    isScreenSharing, 
+    isScreenSharingSupported, 
+    toggleScreenShare, 
+    stopScreenShare 
+  } = useScreenShare();
+
   const fetchPlaylist = useCallback(async () => {
     const playlist = await API.getPlaylist();
     setPlaylist(playlist);
@@ -114,6 +123,7 @@ const App: React.FC = () => {
     setNowPlayingFileName(nowPlaying.playingItem.filename);
     setIsPlaying(!nowPlaying.isPaused);
     setVolume(nowPlaying.volume);
+    setIsIdle(nowPlaying.playingItem ? !nowPlaying.playingItem.playing : true);
   }, [volumeSettingIsLocked]);
 
   const handleAddURL = async (url: string) => {
@@ -143,6 +153,13 @@ const App: React.FC = () => {
     fetchNowPlaying();
   };
 
+  const handleStop = async () => {
+    stopScreenShare();
+    
+    await API.stop();
+    fetchNowPlaying();
+  };
+
   const handleSkip = async () => {
     await API.skip();
     fetchNowPlaying();
@@ -296,18 +313,23 @@ const App: React.FC = () => {
   return (
     <div className="flex items-center justify-center h-screen w-screen bg-black md:py-10">
       <div className="bg-violet-900 w-full md:max-w-2xl h-full md:max-h-xl md:border md:rounded-2xl flex flex-col">
-        <NowPlaying 
-          className="flex flex-row md:rounded-t-2xl" 
-          songName={nowPlayingSong || "(Not Playing)"} 
-          fileName={nowPlayingFileName || ""} 
-          isPlaying={isPlaying} 
-          onPlayPause={togglePlayPause} 
-          onSkip={handleSkip} 
-          onPrevious={handlePrevious} 
+        <NowPlaying
+          className="flex flex-row md:rounded-t-2xl"
+          songName={nowPlayingSong || "(Not Playing)"}
+          fileName={nowPlayingFileName || ""}
+          isPlaying={isPlaying}
+          isIdle={isIdle}
+          onPlayPause={togglePlayPause}
+          onStop={handleStop}
+          onSkip={handleSkip}
+          onPrevious={handlePrevious}
+          onScreenShare={toggleScreenShare}
+          isScreenSharing={isScreenSharing}
           volume={volume}
           onVolumeSettingChange={handleVolumeSettingChange}
           onVolumeWillChange={() => setVolumeSettingIsLocked(true)}
           onVolumeDidChange={() => setVolumeSettingIsLocked(false)}
+          isScreenSharingSupported={isScreenSharingSupported}
         />
 
         <TabView selectedTab={selectedTab} onTabChange={setSelectedTab}>