Adds feature flags, and the ability to do browser playback

frontend/src/components/NowPlaying.tsx

@@ -1,6 +1,7 @@
 import React, { HTMLAttributes } from 'react';
 import classNames from 'classnames';
 import { FaPlay, FaPause, FaStepForward, FaStepBackward, FaVolumeUp, FaDesktop, FaStop } from 'react-icons/fa';
+import { Features } from '../api/player';
 
 interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
   songName: string;
@@ -25,6 +26,11 @@ interface NowPlayingProps extends HTMLAttributes<HTMLDivElement> {
 
   // Sent when the volume has changed
   onVolumeDidChange: (volume: number) => void;
+
+  features: Features | null;
+  
+  audioEnabled: boolean;
+  onAudioEnabledChange: (enabled: boolean) => void;
 }
 
 const NowPlaying: React.FC<NowPlayingProps> = (props) => {
@@ -80,7 +86,7 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
               <FaStepForward size={24} />
             </button>
 
-            {props.isScreenSharingSupported && (
+            {(props.isScreenSharingSupported && props.features?.screenshare) && (
               <button
                 className={classNames("text-white hover:text-violet-300 transition-colors rounded-full p-2", props.isScreenSharing ? ' bg-violet-800' : '')}
                 onClick={props.onScreenShare}
@@ -90,6 +96,20 @@ const NowPlaying: React.FC<NowPlayingProps> = (props) => {
               </button>
             )}
           </div>
+
+          {props.features?.browserPlayback && (
+          <div>
+            <label className="flex items-center gap-2 text-white text-sm cursor-pointer">
+              <input
+                type="checkbox"
+                checked={props.audioEnabled}
+                onChange={(e) => props.onAudioEnabledChange(e.target.checked)}
+                className="w-4 h-4 text-violet-600 bg-gray-100 border-gray-300 rounded focus:ring-violet-500 focus:ring-2"
+              />
+                Enable audio playback in browser
+              </label>
+            </div>
+          )}
         </div>
       </div>
     </div>