Skip to content

Commit a7bccb2

Browse files
C-GarzaC-Garza
committed
Add mobile styles for video controls
1 parent 969e65c commit a7bccb2

File tree

8 files changed

+99
-65
lines changed

8 files changed

+99
-65
lines changed

‎streams-react/src/components/EditWrapper/EditWrapper.module.css

Lines changed: 0 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,3 @@
1-
.formDisplayName {
2-
max-width: 35%;
3-
margin: 0;
4-
margin-left: 5px;
5-
padding-top: 3px;
6-
padding-bottom: 3px;
7-
}
8-
.formDisplayName--active {
9-
position: relative;
10-
padding-left: 5px;
11-
padding-right: 20px;
12-
border-radius: 5px;
13-
background-color: rgba(0,0,0,0.8);
14-
}
15-
.formRoomHeader {
16-
width: 100%;
17-
}
181
.edit {
192
position: absolute;
203
right: -5px;

‎streams-react/src/components/Video/Video.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -102,6 +102,7 @@ const Video = ({stream, displayName, isTalking, gainStreams, hasWebcam, containe
102102
handleMuted={handleMuted}
103103
handleFullScreen={handleFullScreen}
104104
isFullScreen={isFullScreen}
105+
videoWidth={containerStyles.width}
105106
/>
106107
</div>
107108
</div>

‎streams-react/src/components/Video/Video.module.css

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,8 +4,8 @@
44
border: 3px solid #1A659E;
55
border-radius: 5px;
66
color: white;
7-
min-width: 250px;
8-
min-height: 140px;
7+
min-width: 300px;
8+
min-height: 169px;
99
}
1010
.speaking {
1111
border: 3px solid #C7EFCF;

‎streams-react/src/components/VideoControls/VideoControls.js

Lines changed: 45 additions & 27 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import styles from "./VideoControls.module.css";
88
import {nameInput} from "../../data/roomInputs";
99
import VideoControlsButton from "../VideoControlsButton/VideoControlsButton";
1010

11-
const VideoControls = ({stream, hasWebcam, displayName, gainStreams, handleMuted, handleFullScreen, isFullScreen}) => {
11+
const VideoControls = ({stream, hasWebcam, displayName, gainStreams, handleMuted, handleFullScreen, isFullScreen, videoWidth}) => {
1212
const history = useHistory();
1313
const {setDisplayName, stream: myStream, setHasWebcam, shareScreen, setShareScreen} = useContext(SocketContext);
1414
const {values, setValues, handleChange, clearInput} = useForm({volume: gainStreams?.isHost ? 0 : 1, username: displayName});
@@ -136,64 +136,82 @@ const VideoControls = ({stream, hasWebcam, displayName, gainStreams, handleMuted
136136
};
137137

138138
const volumeTitle = Math.floor(values.volume * 100);
139+
let controlsSize = "1.2rem";
140+
let disconnectWidth = "8%";
141+
if(videoWidth <= 600) controlsSize = "1rem";
142+
if(videoWidth <= 500) {
143+
controlsSize = "0.95rem";
144+
disconnectWidth = "10%";
145+
}
146+
if(videoWidth <= 400) controlsSize = "0.9rem";
139147

140148
return(
141-
<div className={styles.video__tray} onDoubleClick={handleDoubleClick}>
142-
<EditWrapper
143-
inputs={formInputs}
144-
handleChange={handleChange}
145-
clearInput={clearInput}
146-
handleSubmit={handleSubmit}
147-
handleClick={handleNameClick}
148-
isEditing={isEditing}
149-
hidden={true}
150-
formStyles={isEditing ? "formDisplayName--active" : "formDisplayName"}
151-
>
152-
<button
153-
type="button"
154-
className={`${styles.displayname} ${isMyStream ? "" : styles["displayName--disabled"]}`}
155-
onClick={handleNameClick}
156-
disabled={!isMyStream}
149+
<div className={styles.video__tray}
150+
style={{
151+
width: `${videoWidth <= 450 ? "100%" : ""}`,
152+
"--controls__size": `${controlsSize}`,
153+
"--disconnect__width": `${disconnectWidth}`
154+
}}
155+
onDoubleClick={handleDoubleClick}
156+
>
157+
<div className={`${isEditing ? styles["formDisplayName--active"] : styles.formDisplayName}`}>
158+
<EditWrapper
159+
inputs={formInputs}
160+
handleChange={handleChange}
161+
clearInput={clearInput}
162+
handleSubmit={handleSubmit}
163+
handleClick={handleNameClick}
164+
isEditing={isEditing}
165+
hidden={true}
157166
>
158-
{displayName || "Silly Goose"}
159-
</button>
160-
</EditWrapper>
167+
<button
168+
type="button"
169+
className={`${styles.displayname} ${isMyStream ? "" : styles["displayName--disabled"]}`}
170+
onClick={handleNameClick}
171+
disabled={!isMyStream}
172+
>
173+
{displayName || "Silly Goose"}
174+
</button>
175+
</EditWrapper>
176+
</div>
161177
<div className={`${styles.controls__tray} ${isFocused ? styles["controls__tray--active"] : ""}`}>
162178
{isMyStream
163179
? <>
180+
<div className={styles.disconnect__container}>
164181
<VideoControlsButton
165182
type="button"
166-
buttonClass="disconnect__button"
183+
buttonClass={`${styles.disconnect__button} ${styles.disconnect__button__padding}`}
167184
title="Disconnect from call"
168-
iconClass={`fas fa-phone-slash ${styles.disconnect__icon}`}
185+
iconClass={`fas fa-phone-slash ${styles.controls__icon} ${styles.disconnect__icon}`}
169186
handleClick={handleDisconnectClick}
170187
handleFocus={handleControlsFocus}
171188
/>
189+
</div>
172190
<VideoControlsButton
173191
buttonClass="video__button"
174192
title={playVideo ? "Stop Video" : "Show Video"}
175-
iconClass={`fas ${!playVideo ? `fa-video-slash ${styles["button--stop"]}` : `fa-video`}`}
193+
iconClass={`fas ${styles.controls__icon} ${!playVideo ? `fa-video-slash ${styles["button--stop"]}` : `fa-video`}`}
176194
handleClick={handleVideoClick}
177195
handleFocus={handleControlsFocus}
178196
/>
179197
<VideoControlsButton
180198
buttonClass="mic__button"
181199
title={playMic ? "Mute" : "Unmute"}
182-
iconClass={`fas ${!playMic ? `fa-microphone-slash ${styles["button--stop"]}` : `fa-microphone`}`}
200+
iconClass={`fas ${styles.controls__icon} ${!playMic ? `fa-microphone-slash ${styles["button--stop"]}` : `fa-microphone`}`}
183201
handleClick={handleMicClick}
184202
handleFocus={handleControlsFocus}
185203
/>
186204
<VideoControlsButton
187205
buttonClass="screen__button"
188206
title={shareScreen ? "Stop Screen Share" : "Share Screen"}
189-
iconClass={`fas fa-desktop ${!shareScreen ? "" : styles["button--stop"]}`}
207+
iconClass={`fas fa-desktop ${styles.controls__icon} ${!shareScreen ? "" : styles["button--stop"]}`}
190208
handleClick={handleScreenClick}
191209
handleFocus={handleControlsFocus}
192210
/>
193211
</>
194212
: <div className={`${styles.volume__controls} ${isVolumeFocused ? styles[`volume__controls--focus`]: ""}`}>
195213
<button type="button" className={styles.volume__button} onClick={handleVolumeClick} onFocus={handleControlsFocus} onBlur={handleControlsFocus}>
196-
<i className={`fas ${!isMuted ? `fa-volume-up`: `fa-volume-mute`} ${styles.volume}`}></i>
214+
<i className={`fas ${styles.controls__icon} ${!isMuted ? `fa-volume-up`: `fa-volume-mute`} ${styles.volume}`}></i>
197215
</button>
198216
<input
199217
className={styles.slider}
@@ -213,7 +231,7 @@ const VideoControls = ({stream, hasWebcam, displayName, gainStreams, handleMuted
213231
<VideoControlsButton
214232
buttonClass="fullscreen__button"
215233
title={isFullScreen ? "Exit Fullscreen" : "Fullscreen"}
216-
iconClass={`fas ${!isFullScreen ? "fa-expand" : "fa-compress"}`}
234+
iconClass={`fas ${styles.controls__icon} ${!isFullScreen ? "fa-expand" : "fa-compress"}`}
217235
handleClick={handleFullScreen}
218236
handleFocus={handleControlsFocus}
219237
/>

‎streams-react/src/components/VideoControls/VideoControls.module.css

Lines changed: 49 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,9 +3,23 @@
33
align-items: center;
44
position: absolute;
55
bottom: 0;
6-
/* width: 100%; */
76
width: 80%;
87
}
8+
.formDisplayName {
9+
max-width: 35%;
10+
margin: 0;
11+
margin-left: 5px;
12+
padding-top: 3px;
13+
padding-bottom: 3px;
14+
}
15+
.formDisplayName--active {
16+
position: relative;
17+
max-width: 45%;
18+
padding-left: 5px;
19+
padding-right: 20px;
20+
border-radius: 5px;
21+
background-color: rgba(0,0,0,0.8);
22+
}
923
.displayname {
1024
position: relative;
1125
text-overflow: ellipsis;
@@ -39,7 +53,10 @@
3953
justify-content: flex-end;
4054
align-items: center;
4155
margin-left: auto;
56+
position: absolute;
4257
width: 50%;
58+
width: 100%;
59+
pointer-events: none;
4360
transform: translateY(270%);
4461
min-height: calc(1.2rem + 7px);
4562
transition: all 0.35s;
@@ -57,9 +74,32 @@ div[data-video-stream="video-stream"]:hover + .video__tray .controls__tray {
5774
transform: translateY(0);
5875
transition: none;
5976
}
60-
.disconnect__icon {
61-
padding-right: 1px;
62-
padding-bottom: 1px;
77+
.disconnect__container {
78+
position: absolute;
79+
width: 100%;
80+
max-width: 750px;
81+
left: 50%;
82+
transform: translate(-50%, 0);
83+
display: flex;
84+
justify-content: center;
85+
align-items: center;
86+
pointer-events: none;
87+
}
88+
.disconnect__button {
89+
display: flex;
90+
align-items: center;
91+
justify-content: center;
92+
background-color: #DA3E52;
93+
border-radius: 100%;
94+
border: 2px solid #212121;
95+
min-width: auto;
96+
height: 0;
97+
width: var(--disconnect__width);
98+
pointer-events: all;
99+
}
100+
.disconnect__button.disconnect__button__padding {
101+
padding-top: calc((var(--disconnect__width) / 2) - 2px);
102+
padding-bottom: calc((var(--disconnect__width) / 2) - 2px);
63103
}
64104
.button--stop {
65105
color: #DA3E52;
@@ -78,6 +118,7 @@ div[data-video-stream="video-stream"]:hover + .video__tray .controls__tray {
78118
padding-top: 2px;
79119
font-size: 1.1rem;
80120
overflow: hidden;
121+
pointer-events: all;
81122
transition: all 0.18s ease;
82123
}
83124
.volume__controls:hover {
@@ -88,6 +129,7 @@ div[data-video-stream="video-stream"]:hover + .video__tray .controls__tray {
88129
}
89130
.slider {
90131
position: absolute;
132+
width: 200%;
91133
transform: rotate(-90deg) translateX(65%);
92134
transition: all 0.35s;
93135
}
@@ -107,6 +149,9 @@ div[data-video-stream="video-stream"]:hover + .video__tray .controls__tray {
107149
.volume {
108150
font-size: 1.2em;
109151
}
152+
.controls__icon {
153+
font-size: var(--controls__size);
154+
}
110155
.hidden {
111156
display: none;
112157
}

‎streams-react/src/components/VideoControlsButton/VideoControlsButton.js

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ const VideoControlsButton = ({buttonClass, title, iconClass, handleClick, handle
44
return(
55
<button
66
type="button"
7-
className={`${styles[buttonClass]} ${styles.control__button}`}
7+
className={`${buttonClass} ${styles.control__button}`}
88
title={title}
99
onClick={handleClick}
1010
onFocus={handleFocus}

‎streams-react/src/components/VideoControlsButton/VideoControlsButton.module.css

Lines changed: 1 addition & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
font-size: 1.2rem;
55
color: #EEEEEE;
66
cursor: pointer;
7+
pointer-events: all;
78
transition: all 0.08s ease;
89
}
910
.control__button:hover {
@@ -13,17 +14,4 @@
1314
.control__button:focus {
1415
color: white;
1516
transform: scale(1.1);
16-
}
17-
.disconnect__button {
18-
display: flex;
19-
align-items: center;
20-
justify-content: center;
21-
position: absolute;
22-
bottom: 0;
23-
left: 0;
24-
background-color: #DA3E52;
25-
border-radius: 100%;
26-
border: 2px solid #212121;
27-
width: 40px;
28-
height: 40px;
2917
}

‎streams-react/src/components/VideoRoomHeader/VideoRoomHeader.js

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,6 @@ const VideoRoomHeader = ({room, setRoomName, isHost}) => {
5050
handleSubmit={handleSubmit}
5151
handleClick={handleClick}
5252
isEditing={isEditing}
53-
formStyles={"formRoomHeader"}
5453
>
5554
<h1 className={styles.heading}>{room}</h1>
5655
</EditWrapper>

0 commit comments

Comments
 (0)