Increase video size in 2player game

Signed-off-by: James Ketrenos <james_eikona@ketrenos.com>

client/src/MediaControl.css

@@ -16,10 +16,55 @@
   border: 1px solid black;
 }
 
+.MediaControl.Medium .Video {
+  position: relative;
+  display: flex;
+  width: 11.5em;
+  height: 8.625em;
+  min-width: 11.5em;
+  min-height: 8.625em;
+/*  width: 9.75rem;
+  height: 7.3125rem;
+  max-width: 9.75rem;
+  max-height: 7.3125rem;*/
+  background-color: #444;
+  border-radius: 0.25rem;
+  border: 1px solid black;
+}
 
 .MediaControl > div {
+  display: flex;
+  position: absolute;
+  top: 0;
+  left: 0;
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-right: 0.5rem;
+  margin-right: 0.25rem;
+}
+
+.MediaControl .Controls {
+  display: flex;
+  position: absolute;
+  left: 0.5em;
+  bottom: 0.5em;
+  justify-content: flex-end;
+  z-index: 1;
+}
+
+.MediaControl.Small .Controls {
+  left: 0;
+  bottom: unset;
+  justify-content: center;
+}
+
+.MediaControl .Controls > div {
+  display: flex;
+  border-radius: 0.25em;
+  cursor: pointer;
+  padding: 0.25em;
+}
+
+.MediaControl .Controls > div:hover {
+  background-color: #d0d0d0;
 }

client/src/MediaControl.js

@@ -447,7 +447,7 @@ const MediaAgent = ({setPeers}) => {
   return <></>;
 }
 
-const MediaControl = ({isSelf, peer}) => {
+const MediaControl = ({isSelf, peer, className}) => {
   const [media, setMedia] = useState(undefined);
   const [muted, setMuted] = useState(undefined);
   const [videoOn, setVideoOn] = useState(undefined);
@@ -482,7 +482,7 @@ const MediaControl = ({isSelf, peer}) => {
   }
 
   useEffect(() => {
-    if (!media || media.dead) {
+    if (!media || media.dead || !peer) {
       return;
     }
     if (media.attributes.srcObject) {
@@ -495,7 +495,7 @@ const MediaControl = ({isSelf, peer}) => {
        * the stream //,  [media, muted]); */
 
   useEffect(() => {
-    if (!media || media.dead) {
+    if (!media || media.dead || !peer) {
       return;
     }
     if (media.attributes.srcObject) {
@@ -510,8 +510,8 @@ const MediaControl = ({isSelf, peer}) => {
   const isValid = media && !media.dead,
     color = isValid ? 'primary' : 'disabled';
 
-  return <div className="MediaControl">
-    <div>
+  return <div className={`MediaControl ${className}`}>
+    <div className="Controls" >
      { isSelf && <div onClick={toggleMute}>
         { muted && <MicOff color={color}/> }
         { !muted && <Mic color={color}/> }

client/src/PlayerList.css

@@ -8,8 +8,10 @@
 }
 
 .PlayerList .Name {
-  display: flex;
   flex-grow: 1;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  white-space: nowrap;
 }
 
 .PlayerList .NoNetwork {
@@ -24,21 +26,34 @@
 }
 
 .PlayerList .Unselected {
+  display: flex;
+  flex-direction: column;
+  justify-content: space-around;
+  align-items: center;
+}
+
+/* Player name in the Unselected list... */
+.PlayerList .Unselected > div:nth-child(2) > div > div:first-child {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+  max-width: 100%;
+}
+
+.PlayerList .Unselected > div:nth-child(2) {
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-around;
 }
 
-.PlayerList .Unselected > div {
+.PlayerList .Unselected > div:nth-child(2) > div {
   display: flex;
   flex-direction: column;
   align-items: center;
   margin: 0.25rem;
   padding: 0.25rem;
   max-width: 8rem;
-  width: 8rem;
-  text-overflow: ellipsis;
   background-color: #eee;
   border-radius: 0.25rem;
 }
@@ -76,20 +91,22 @@
   display: flex;
   flex-direction: column;
   text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
   flex: 1 1 0px;
   align-items: flex-start;
   border: 1px solid rgba(0,0,0,0);
   border-radius: 0.25em;
   min-width: 11em;
-  max-width: 11rem;
-  padding: 0.25rem;
+  padding: 0 1px;
 }
 
-.PlayerList .PlayerSelector .PlayerEntry > div {
+.PlayerList .PlayerSelector .PlayerEntry > div:first-child {
   display: flex;
   flex-direction: row;
   align-items: center;
   align-self: stretch;
+  margin-bottom: 0.25em;
 }
 
 .PlayerList .PlayerEntry[data-selectable=true]:hover {
@@ -98,7 +115,6 @@
 }
 
 .PlayerList .PlayerEntry[data-selected=true] {
-  border: 1px solid black;
 }
 
 .PlayerList .PlayerSelector .PlayerEntry .MediaControl {
@@ -126,3 +142,4 @@
 .PlayerList .Players .nameInput {
   flex-grow: 1;
 }
+

client/src/PlayerList.js

@@ -127,6 +127,8 @@ const PlayerList = () => {
     return A.localeCompare(B);
   });
 
+  const videoClass = sortedPlayers.length <= 2 ? 'Medium' : 'Small';
+  
   sortedPlayers.forEach(player => {
     const name = player.name;
     const selectable = inLobby && (player.status === 'Not active' || color === player.color);
@@ -142,7 +144,7 @@ const PlayerList = () => {
           <div className="Name">{name ? name : 'Available' }</div>
         { name && !player.live && <div className="NoNetwork"></div> }
         </div>
-        { name && player.live && <MediaControl peer={peers[name]} 
+        { name && player.live && <MediaControl className={videoClass} peer={peers[name]} 
           isSelf={player.color === color}/> }
         { !name && <div></div> }
       </div>
@@ -152,19 +154,22 @@ const PlayerList = () => {
   const waiting = unselected.map((player) => {
     return <div className={player === name ? 'Self' : ''} key={player}>
       <div>{ player }</div>
-      <MediaControl peer={peers[player]} isSelf={name === player}/>
+      <MediaControl className={'Small'} peer={peers[player]} isSelf={name === player}/>
     </div>
   });
 
   return (
-    <Paper className="PlayerList">
+    <Paper className={`PlayerList ${videoClass}`}>
       <MediaAgent setPeers={setPeers}/>
       <List className="PlayerSelector">
         { playerElements }
       </List>
-      <div className="Unselected">
+      { unselected && unselected.length !== 0 && <div className="Unselected">
+        <div>In lobby</div>
+        <div>
           { waiting }
         </div>
+      </div> }
     </Paper>
   );
 }