From bc5a928da691cc19418202e78f2d9e75313d7eb9 Mon Sep 17 00:00:00 2001 From: James Ketrenos Date: Sat, 11 Oct 2025 12:52:56 -0700 Subject: [PATCH] Adding style for color picking --- client/src/MediaControl.css | 14 - client/src/MediaControl.tsx | 741 ++++++++++++++++++++++-------------- client/src/PlayerColor.tsx | 24 +- client/src/PlayerList.css | 49 +-- client/src/PlayerList.tsx | 287 ++++++++------ client/src/Styles.ts | 12 + 6 files changed, 649 insertions(+), 478 deletions(-) diff --git a/client/src/MediaControl.css b/client/src/MediaControl.css index f786e27..67361d2 100644 --- a/client/src/MediaControl.css +++ b/client/src/MediaControl.css @@ -28,13 +28,6 @@ border: 2px dashed #666; /* Visual indicator for drop zone */ } -.MediaControlSpacer.Medium { - width: 11.5em; - height: 8.625em; - /* min-width: 11.5em; - min-height: 8.625em; */ -} - .MediaControl { display: flex; position: absolute; /* Out of flow */ @@ -60,13 +53,6 @@ border: 1px solid black; } -.MediaControl.Medium { - width: 11.5em; - height: 8.625em; - /* min-width: 11.5em; - min-height: 8.625em; */ -} - .MediaControl .Controls { display: none; /* Hidden by default, shown on hover */ position: absolute; diff --git a/client/src/MediaControl.tsx b/client/src/MediaControl.tsx index e2c5023..3da9ccb 100644 --- a/client/src/MediaControl.tsx +++ b/client/src/MediaControl.tsx @@ -1,20 +1,20 @@ -import React, { useState, useEffect, useRef, useCallback } from "react"; -import "./MediaControl.css"; -import VolumeOff from "@mui/icons-material/VolumeOff"; -import VolumeUp from "@mui/icons-material/VolumeUp"; -import MicOff from "@mui/icons-material/MicOff"; -import Mic from "@mui/icons-material/Mic"; -import VideocamOff from "@mui/icons-material/VideocamOff"; -import Videocam from "@mui/icons-material/Videocam"; -import Box from "@mui/material/Box"; -import IconButton from "@mui/material/IconButton"; -import { ReadyState } from "react-use-websocket"; -import { Session, GlobalContext } from "./GlobalContext"; -import { useContext } from "react"; -import WebRTCStatus from "./WebRTCStatus"; -import Moveable from "react-moveable"; -import { flushSync } from "react-dom"; -import { SxProps, Theme } from "@mui/material"; +import React, { useState, useEffect, useRef, useCallback } from 'react'; +import './MediaControl.css'; +import VolumeOff from '@mui/icons-material/VolumeOff'; +import VolumeUp from '@mui/icons-material/VolumeUp'; +import MicOff from '@mui/icons-material/MicOff'; +import Mic from '@mui/icons-material/Mic'; +import VideocamOff from '@mui/icons-material/VideocamOff'; +import Videocam from '@mui/icons-material/Videocam'; +import Box from '@mui/material/Box'; +import IconButton from '@mui/material/IconButton'; +import { ReadyState } from 'react-use-websocket'; +import { Session, GlobalContext } from './GlobalContext'; +import { useContext } from 'react'; +import WebRTCStatus from './WebRTCStatus'; +import Moveable from 'react-moveable'; +import { flushSync } from 'react-dom'; +import { SxProps, Theme } from '@mui/material'; const debug = true; // When true, do not send host candidates to the signaling server. Keeps TURN relays preferred. @@ -42,15 +42,15 @@ const createAnimatedVideoTrack = ({ height = 240, name, }: { width?: number; height?: number; name?: string } = {}): MediaStreamTrack => { - const canvas = document.createElement("canvas"); + const canvas = document.createElement('canvas'); canvas.width = width; canvas.height = height; - const ctx = canvas.getContext("2d"); - if (!ctx) throw new Error("Could not get canvas context"); + const ctx = canvas.getContext('2d'); + if (!ctx) throw new Error('Could not get canvas context'); // Pick color based on name, fallback to default - const ballColor = name ? nameToColor(name) : "#00ff88"; + const ballColor = name ? nameToColor(name) : '#00ff88'; const ball = { x: width / 2, @@ -68,7 +68,7 @@ const createAnimatedVideoTrack = ({ function drawFrame() { if (!ctx) return; - ctx.fillStyle = "#000000"; + ctx.fillStyle = '#000000'; ctx.fillRect(0, 0, width, height); ball.x += ball.dx; @@ -83,8 +83,8 @@ const createAnimatedVideoTrack = ({ ctx.fillStyle = ball.color; ctx.fill(); - ctx.fillStyle = "#ffffff"; - ctx.font = "12px Arial"; + ctx.fillStyle = '#ffffff'; + ctx.font = '12px Arial'; ctx.fillText(`Frame: ${Date.now() % 10000}`, 10, 20); } @@ -180,13 +180,13 @@ const Video: React.FC = ({ srcObject, local, ...props }) => { if (!refVideo.current || !srcObject) return; const ref = refVideo.current; - console.log("media-agent -