ayushya/watchparty
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

v1.7.6/hideable video, device picker

Browse Source
This commit is contained in:
ayushya
2020-09-16 16:33:58 -04:00
parent b9e3b549b2
commit 676f88ebb2
4 changed files with 144 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files
app/src/Api.js
+1 -1
View File
@@ -14,7 +14,7 @@ COPIED, EDITED, OR REPRODUCED WITHOUT PERMISSION.
let CHROME_OR_BROWSER = chrome || browser;
const API_HOST = 'http://localhost:5001/watch-party-crx/us-central1/widgets';
const API_HOST = 'https://api.chromewatchparty.com';
export const PLAYER_STATUS = {
PLAYING: 'PLAYING',
app/src/Chat.js
+109
View File
@@ -31,6 +31,10 @@ import {
Chip,
CircularProgress,
Paper,
Select,
MenuItem,
FormControl,
InputLabel,
} from '@material-ui/core';
import Thread from './Thread';
import {
@@ -74,6 +78,7 @@ import { goTo } from 'route-lite';
import CallManager from './CallManager';
import VideoListener from './VideoListener';
import ReactGiphySearchbox from 'react-giphy-searchbox';
import VoxeetSDK from '@voxeet/voxeet-web-sdk';
let CHROME_OR_BROWSER = chrome || browser;
@@ -103,6 +108,12 @@ export default class Chat extends Component {
replyTo: null,
sendingMessages: [],
usingVideo: false,
audioInputs: [],
selectedAudioInput: '',
audioOutputs: [],
selectedAudioOutput: '',
videoInputs: [],
selectedVideoInput: '',
};
this.port = null;
this.gifClick = this.gifClick.bind(this);
@@ -245,6 +256,26 @@ export default class Chat extends Component {
}
callEventListener(event) {
this.setState(event);
if (event.onCall === true) {
VoxeetSDK.mediaDevice.enumerateAudioDevices('input').then((devices) => {
this.setState({
audioInputs: devices,
selectedAudioInput: devices.length > 0 ? devices[0].deviceId : '',
});
});
VoxeetSDK.mediaDevice.enumerateAudioDevices('output').then((devices) => {
this.setState({
audioOutputs: devices,
selectedAudioOutput: devices.length > 0 ? devices[0].deviceId : '',
});
});
VoxeetSDK.mediaDevice.enumerateVideoDevices('output').then((devices) => {
this.setState({
videoInputs: devices,
selectedVideoInput: devices.length > 0 ? devices[0].deviceId : '',
});
});
}
}
syncPlayer(video) {
const { status, showName, time, source, element, showChanged } = video;
@@ -519,6 +550,12 @@ export default class Chat extends Component {
replyTo,
sendingMessages,
usingVideo,
audioInputs,
selectedAudioInput,
audioOutputs,
selectedAudioOutput,
videoInputs,
selectedVideoInput,
} = this.state;
const { status } = this.props;
const { callEnabled } = status;
@@ -706,6 +743,78 @@ export default class Chat extends Component {
<Chip className="party-controls-users-chip" clickable size="small" label={user} />
))}
</div>
{onCall && (
<Typography className="party-controls-users-title" variant="overline">
DEVICE SELECT
</Typography>
)}
{onCall && (
<div className="vxt-device-selector">
<FormControl>
<InputLabel color="secondary" id="mic-select">
Mic
</InputLabel>
<Select
labelId="mic-select"
value={selectedAudioInput}
color="secondary"
variant="outlined"
onChange={(ev) => {
VoxeetSDK.mediaDevice.selectAudioInput(ev.target.value).then(() => {
this.setState({ selectedAudioInput: ev.target.value });
});
}}
>
{audioInputs.map((v) => (
<MenuItem value={v.deviceId}>{v.label}</MenuItem>
))}
</Select>
</FormControl>
<FormControl>
<InputLabel color="secondary" id="speaker-select">
Speaker
</InputLabel>
<Select
labelId="speaker-select"
value={selectedAudioOutput}
color="secondary"
variant="outlined"
onChange={(ev) => {
VoxeetSDK.mediaDevice.selectAudioOutput(ev.target.value).then(() => {
this.setState({ selectedAudioOutput: ev.target.value });
});
}}
>
{audioOutputs.map((v) => (
<MenuItem value={v.deviceId}>{v.label}</MenuItem>
))}
</Select>
</FormControl>
<FormControl>
<InputLabel color="secondary" id="camera-select">
Camera
</InputLabel>
<Select
labelId="camera-select"
value={selectedVideoInput}
color="secondary"
fullWidth
variant="outlined"
onChange={(ev) => {
VoxeetSDK.mediaDevice.selectVideoInput(ev.target.value).then(() => {
this.setState({ selectedVideoInput: ev.target.value });
});
}}
>
{videoInputs.map((v) => (
<MenuItem value={v.deviceId}>{v.label}</MenuItem>
))}
</Select>
</FormControl>
</div>
)}
</ExpansionPanelDetails>
</ExpansionPanel>
{player ? (
app/src/index.css
+33
View File
@@ -1055,6 +1055,21 @@ button.giphy-list-item {
}
.vxt-video-container {
position: fixed;
overflow-x: hidden;
overflow-y: auto;
top: 10px;
right: 10px;
max-height: 100%;
max-width: 425px;
width: 425px;
opacity: 0.8;
transition: all ease-in-out 0.3s;
}
body.visible .vxt-video-container {
position: relative;
opacity: 1;
display: block;
overflow-x: hidden;
overflow-y: auto;
@@ -1140,3 +1155,21 @@ button.giphy-list-item {
bottom: 34px;
opacity: 1;
}
.MuiPopover-root[role='presentation'] {
z-index: 9999 !important;
}
.vxt-device-selector > .MuiFormControl-root {
width: 100% !important;
margin: 5px 0;
}
.vxt-device-selector label {
font-size: 15px !important;
left: 10px;
top: -9px;
background: #424242;
padding: 5px;
z-index: 9;
}