v/deskreen
1
0
Fork 0
mirror of https://github.com/pavlobu/deskreen.git synced 2025-05-21 09:50:13 -07:00
Code Issues Projects Releases Wiki Activity

Merge pull request #96 from pavlobu/flip

Browse Source 
add flip video button and 100% video quality by default
This commit is contained in:
Pavlo Buidenkov 2021-02-04 13:44:49 +02:00 committed by GitHub
commit b2ca8a4999
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 78 additions and 52 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

128
app/client/src/components/PlayerControlPanel/index.tsx
View File

@ -28,6 +28,7 @@ import { VideoQuality } from '../../features/VideoAutoQualityOptimizer/VideoQual
import handlePlayerToggleFullscreen from './handlePlayerToggleFullscreen'; import handlePlayerToggleFullscreen from './handlePlayerToggleFullscreen';
import initScreenfullOnChange from './initScreenfullOnChange'; import initScreenfullOnChange from './initScreenfullOnChange';
import ScreenSharingSource from '../../features/PeerConnection/ScreenSharingSourceEnum'; import ScreenSharingSource from '../../features/PeerConnection/ScreenSharingSourceEnum';
import { REACT_PLAYER_WRAPPER_ID } from '../../constants/appConstants';
const videoQualityButtonStyle: React.CSSProperties = { const videoQualityButtonStyle: React.CSSProperties = {
width: '100%', width: '100%',
@ -46,6 +47,8 @@ interface PlayerControlPanelProps {
toaster: undefined | Toaster; toaster: undefined | Toaster;
} }
const isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);
function PlayerControlPanel(props: PlayerControlPanelProps) { function PlayerControlPanel(props: PlayerControlPanelProps) {
const { const {
isPlaying, isPlaying,
@ -62,6 +65,7 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
const isFullScreenAPIAvailable = useMemo(() => screenfull.isEnabled, []); const isFullScreenAPIAvailable = useMemo(() => screenfull.isEnabled, []);
const [isFullScreenOn, setIsFullScreenOn] = useState(false); const [isFullScreenOn, setIsFullScreenOn] = useState(false);
const [isVideoFlipped, setIsVideoFlipped] = useState(false);
useEffect(() => { useEffect(() => {
initScreenfullOnChange(setIsFullScreenOn); initScreenfullOnChange(setIsFullScreenOn);
@ -71,6 +75,27 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
handlePlayerToggleFullscreen(); handlePlayerToggleFullscreen();
}, []); }, []);
const toggleFlipVideo = useCallback(() => {
const videoElement = isSafari
? document.querySelector(`#${REACT_PLAYER_WRAPPER_ID}`)
: document.querySelector(`#${REACT_PLAYER_WRAPPER_ID} > video`);
if (isVideoFlipped) {
// @ts-ignore
videoElement.style.transform = '';
setIsVideoFlipped(false);
} else {
// @ts-ignore
videoElement.style.transform = 'rotateY(180deg)';
setIsVideoFlipped(true);
}
toaster?.show({
icon: 'clean',
intent: Intent.PRIMARY,
message: `Video is flipped horizontally`,
});
}, [isVideoFlipped, toaster]);
return ( return (
<> <>
<Card elevation={4}> <Card elevation={4}>
@ -184,59 +209,60 @@ function PlayerControlPanel(props: PlayerControlPanelProps) {
borderBottom: '1px solid #ffffffa8', borderBottom: '1px solid #ffffffa8',
}} }}
/> />
{screenSharingSourceType === ScreenSharingSource.WINDOW ? ( <Popover
<Tooltip content={
content="You can't change video quality when sharing a window. You can change quality only when shering entire screen." <>
position={Position.BOTTOM} <H5>Video Settings:</H5>
> <Divider />
<Button minimal disabled> <Row>
<Icon icon="cog" color="#A7B6C2" /> <Button
icon="key-tab"
minimal
active={isVideoFlipped}
style={videoQualityButtonStyle}
onClick={toggleFlipVideo}
>
Flip
</Button>
</Row>
<Divider />
{Object.values(VideoQuality).map((q: VideoQuality) => {
return (
<Row key={q}>
<Button
minimal
active={selectedVideoQuality === q}
style={videoQualityButtonStyle}
disabled={
screenSharingSourceType ===
ScreenSharingSource.WINDOW
}
onClick={() => {
setVideoQuality(q);
toaster?.show({
icon: 'clean',
intent: Intent.PRIMARY,
message: `Video quality has been changed to ${q}`,
});
}}
>
{q}
</Button>
</Row>
);
})}
</>
}
position={Position.BOTTOM}
popoverClassName={Classes.POPOVER_CONTENT_SIZING}
>
<Tooltip content="Video Quality" position={Position.BOTTOM}>
<Button minimal>
<Icon icon="cog" color="white" />
</Button> </Button>
</Tooltip> </Tooltip>
) : ( </Popover>
<Popover
content={
<>
<H5>Video Quality:</H5>
<Divider />
{Object.values(VideoQuality).map(
(q: VideoQuality) => {
return (
<Row key={q}>
<Button
minimal
active={selectedVideoQuality === q}
style={videoQualityButtonStyle}
onClick={() => {
setVideoQuality(q);
toaster?.show({
icon: 'clean',
intent: Intent.PRIMARY,
message: `Video quality has been changed to ${q}`,
});
}}
>
{q}
</Button>
</Row>
);
}
)}
</>
}
position={Position.BOTTOM}
popoverClassName={Classes.POPOVER_CONTENT_SIZING}
>
<Tooltip
content="Video Quality"
position={Position.BOTTOM}
>
<Button minimal>
<Icon icon="cog" color="white" />
</Button>
</Tooltip>
</Popover>
)}
<Divider <Divider
style={{ style={{
height: '20px', height: '20px',

2
app/client/src/containers/MainView/index.tsx
View File

@ -49,7 +49,7 @@ function MainView() {
LoadingSharingIconType LoadingSharingIconType
>(LoadingSharingIconEnum.DESKTOP); >(LoadingSharingIconEnum.DESKTOP);
const [videoQuality, setVideoQuality] = useState<VideoQuality>( const [videoQuality, setVideoQuality] = useState<VideoQuality>(
VideoQuality.Q_AUTO VideoQuality.Q_100_PERCENT
); );
const [peer, setPeer] = useState<undefined | PeerConnection>(); const [peer, setPeer] = useState<undefined | PeerConnection>();