Feature: adds screen sharing

frontend/src/components/NowPlaying.tsx

@@ -1,16 +1,22 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
-import { FaPlay, FaPause, FaStepForward, FaStepBackward, FaVolumeUp } from 'react-icons/fa';
+import { FaPlay, FaPause, FaStepForward, FaStepBackward, FaVolumeUp, FaDesktop, FaStop } from 'react-icons/fa';
 
 interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
   songName: string;
   fileName: string;
   isPlaying: boolean;
+  isIdle: boolean;
   volume: number;
   onPlayPause: () => void;
+  onStop: () => void;
   onSkip: () => void;
   onPrevious: () => void;
-  
+
+  onScreenShare: () => void;
+  isScreenSharingSupported: boolean;
+  isScreenSharing: boolean;
+
   // Sent when the volume setting actually changes value
   onVolumeSettingChange: (volume: number) => void;
 
@@ -22,16 +28,27 @@ interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
 }
 
 const NowPlaying: React.FC<NowPlayingProps> = (props) => {
+  const titleArea = props.isScreenSharing ? (
+    <div className="flex flex-row items-center gap-2 text-white text-center justify-center">
+      <FaDesktop size={24} />
+      <div className="text-lg font-bold truncate">Screen Sharing</div>
+    </div>
+  ) : (
+    <div className={classNames(props.isIdle ? 'opacity-50' : 'opacity-100')}>
+      <div className="text-lg font-bold truncate">{props.songName}</div>
+      <div className="text-sm truncate">{props.fileName}</div>
+    </div>
+  );
+
   return (
     <div className={classNames(props.className, 'bg-black/50 h-fit p-5')}>
       <div className="flex flex-col w-full gap-2">
-        <div className="flex flex-col md:flex-row w-full h-full bg-black/50 rounded-lg p-5 items-center gap-4">
-          <div className="flex-grow min-w-0 w-full md:w-auto text-white">
-            <div className="text-lg font-bold truncate text-center md:text-left">{props.songName}</div>
-            <div className="text-sm truncate text-center md:text-left">{props.fileName}</div>
+        <div className="flex flex-col w-full h-full bg-black/50 rounded-lg p-5 gap-4">
+          <div className="flex-grow min-w-0 w-full text-white text-left">
+            {titleArea}
           </div>
-          <div className="flex flex-row items-center gap-4 justify-center md:justify-end">
-            <div className="flex items-center gap-2 text-white">
+          <div className="flex flex-row items-center gap-4 w-full">
+            <div className="flex items-center gap-2 text-white w-full max-w-[250px]">
               <FaVolumeUp size={20} />
               <input
                 type="range"
@@ -41,21 +58,37 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
                 onMouseDown={() => props.onVolumeWillChange(props.volume)}
                 onMouseUp={() => props.onVolumeDidChange(props.volume)}
                 onChange={(e) => props.onVolumeSettingChange(Number(e.target.value))}
-                className="fancy-slider w-48 md:w-24 h-2"
+                className="fancy-slider h-2 w-full"
               />
             </div>
+            
+            <div className="flex-grow"></div>
 
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPrevious}>
               <FaStepBackward size={24} />
             </button>
 
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onPlayPause}>
-              {props.isPlaying ? <FaPause size={24} /> : <FaPlay size={24} />}
+              {(props.isPlaying && !props.isIdle) ? <FaPause size={24} /> : <FaPlay size={24} />}
+            </button>
+
+            <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onStop}>
+              <FaStop size={24} className={props.isIdle ? 'opacity-25' : 'opacity-100'} />
             </button>
 
             <button className="text-white hover:text-violet-300 transition-colors" onClick={props.onSkip}>
               <FaStepForward size={24} />
             </button>
+
+            {props.isScreenSharingSupported && (
+              <button
+                className={classNames("text-white hover:text-violet-300 transition-colors rounded-full p-2", props.isScreenSharing ? ' bg-violet-800' : '')}
+                onClick={props.onScreenShare}
+                title="Share your screen"
+              >
+                <FaDesktop size={24} />
+              </button>
+            )}
           </div>
         </div>
       </div>