Add a .player-drag-handle

The video elements can only be moved via the handle, not the entire
player

Author: Sean-Der

web/src/components/player/Player.tsx

@@ -242,10 +242,13 @@ const Player = (props: PlayerProps) => {
 							<div
 								onClick={stopOverlayClickPropagation}
 								onDoubleClick={stopOverlayClickPropagation}
-								className="bg-blue-950 w-full flex flex-row gap-2 h-1/14 p-1 max-h-8 min-h-8 rounded-md">
+								className="player-drag-handle bg-blue-950 w-full flex flex-row gap-2 h-1/14 p-1 max-h-8 min-h-8 rounded-md cursor-move">
 
-								<PlayPauseComponent videoRef={videoRef} />
+								<span className="player-drag-cancel flex h-full items-center cursor-pointer">
+									<PlayPauseComponent videoRef={videoRef} />
+								</span>
 
+								<span className="player-drag-cancel flex h-full items-center cursor-pointer">
 									<VolumeComponent
 										isMuted={videoElement.muted}
 										isDisabled={audioLayers.length === 0}
@@ -260,16 +263,25 @@ const Player = (props: PlayerProps) => {
 											}
 										}}
 									/>
+								</span>
 
 								<div className="w-full pointer-events-none"></div>
 
-								<CurrentViewersComponent currentViewersCount={currentStreamStatus?.viewers ?? 0} />
+								<span className="player-drag-cancel flex h-full items-center cursor-default">
+									<CurrentViewersComponent currentViewersCount={currentStreamStatus?.viewers ?? 0} />
+								</span>
+								<span className="player-drag-cancel flex h-full items-center cursor-pointer">
 									<VideoLayerSelectorComponent layers={videoLayers} layerEndpoint={layerEndpoint} hasPacketLoss={false} currentLayer={currentLayersStatus?.videoLayerCurrent ?? ""} />
-									{audioLayers.length > 1 && (
+								</span>
+
+								{audioLayers.length > 1 && (
+									<span className="player-drag-cancel flex h-full items-center cursor-pointer">
 										<AudioLayerSelectorComponent layers={audioLayers} layerEndpoint={layerEndpoint} hasPacketLoss={false} currentLayer={currentLayersStatus?.videoLayerCurrent ?? ""} />
-									)}
-									<Square2StackIcon onClick={() => videoElement?.requestPictureInPicture()} />
-								<ArrowsPointingOutIcon onClick={handleEnterFullscreen} />
+									</span>
+								)}
+
+								<Square2StackIcon className="player-drag-cancel cursor-pointer" onClick={() => videoElement?.requestPictureInPicture()} />
+								<ArrowsPointingOutIcon className="player-drag-cancel cursor-pointer" onClick={handleEnterFullscreen} />
 							</div>
 						</div>)
 					}

web/src/components/player/PlayerPage.tsx

@@ -139,7 +139,11 @@ const PlayerPage = () => {
       <div className={`flex flex-col w-full items-center ${!cinemaMode && "mx-auto px-2 py-2 container"}`} >
         <div ref={playerGridRef} className="w-full">
           <ReactGridLayout
-            dragConfig={{ enabled: !isMobilePlayer }}
+            dragConfig={{
+              enabled: !isMobilePlayer,
+              handle: ".player-drag-handle",
+              cancel: ".player-drag-cancel,button,input,select,textarea,a,[role='button']",
+            }}
             resizeConfig={{ enabled: !isMobilePlayer }}
             layout={streamKeys.map((streamKey, index) => ({
               i: `${streamKey}_player_card`,