Added content to FAQ page for audio sharing
This commit is contained in:
parent
85f4a9b41b
commit
e6658324de
@ -49,7 +49,6 @@ function Nickname({ nickname, stream }) {
|
||||
sx={{
|
||||
position: "relative",
|
||||
cursor: stream ? "pointer" : "default",
|
||||
fontSize: "12px",
|
||||
}}
|
||||
onClick={() => {
|
||||
if (stream) {
|
||||
|
@ -1,5 +1,5 @@
|
||||
import React, { useState } from "react";
|
||||
import { IconButton, Box, Text, Button, Label, Flex } from "theme-ui";
|
||||
import { IconButton, Box, Text, Button, Label, Flex, Link } from "theme-ui";
|
||||
import adapter from "webrtc-adapter";
|
||||
|
||||
import Modal from "./Modal";
|
||||
@ -16,24 +16,24 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
|
||||
|
||||
const unavailableMessage = (
|
||||
<Box p={2} bg="hsla(230, 20%, 0%, 20%)">
|
||||
<Text as="p">
|
||||
Browser not supported.
|
||||
<Text as="p" variant="body2">
|
||||
Browser not supported for audio sharing.
|
||||
<br />
|
||||
<br />
|
||||
See FAQ for more information.
|
||||
See <Link href="#/faq">FAQ</Link> for more information.
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
|
||||
const noAudioMessage = (
|
||||
<Box p={2} bg="hsla(230, 20%, 0%, 20%)">
|
||||
<Text as="p">
|
||||
<Text as="p" variant="body2">
|
||||
No audio found in screen share.
|
||||
<br />
|
||||
Ensure "Share audio" is selected when sharing.
|
||||
<br />
|
||||
<br />
|
||||
See FAQ for more information.
|
||||
See <Link href="#/faq">FAQ</Link> for more information.
|
||||
</Text>
|
||||
</Box>
|
||||
);
|
||||
|
BIN
src/images/AudioSharingFAQ.png
Normal file
BIN
src/images/AudioSharingFAQ.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 101 KiB |
@ -1,8 +1,10 @@
|
||||
import React from "react";
|
||||
import { Flex, Text } from "theme-ui";
|
||||
import { Flex, Text, Link, Image } from "theme-ui";
|
||||
|
||||
import Footer from "../components/Footer";
|
||||
|
||||
import audioSharingImage from "../images/AudioSharingFAQ.png";
|
||||
|
||||
function FAQ() {
|
||||
return (
|
||||
<Flex
|
||||
@ -16,14 +18,48 @@ function FAQ() {
|
||||
<Flex
|
||||
sx={{
|
||||
flexDirection: "column",
|
||||
justifyContent: "center",
|
||||
maxWidth: "300px",
|
||||
maxWidth: "500px",
|
||||
flexGrow: 1,
|
||||
}}
|
||||
mb={2}
|
||||
my={2}
|
||||
>
|
||||
<Text variant="display" as="h1" sx={{ textAlign: "center" }}>
|
||||
FAQ
|
||||
<Text my={2} variant="heading" as="h1" sx={{ fontSize: 5 }}>
|
||||
Frequently Asked Questions
|
||||
</Text>
|
||||
<Text my={1} variant="heading" as="h2" sx={{ fontSize: 3 }}>
|
||||
Using Radio (experimental)
|
||||
</Text>
|
||||
<Text my={1} variant="heading" as="h3">
|
||||
No audio found in screen share.
|
||||
</Text>
|
||||
<Text variant="body2" as="p">
|
||||
When using audio sharing you must select the{" "}
|
||||
<strong>Share audio</strong> option when choosing the browser tab or
|
||||
screen to share. Support for sharing audio depends on browser and
|
||||
operating system. Currently Google Chrome on Windows allows you to
|
||||
share the audio of any tab or an entire screen while on MacOS you can
|
||||
only share the audio of a tab. For an example of selecting the{" "}
|
||||
<strong>Share audio</strong> option for a tab on MacOS see Figure 1.
|
||||
</Text>
|
||||
<Image mt={2} src={audioSharingImage} sx={{ borderRadius: "4px" }} />
|
||||
<Text my={1} variant="caption" as="p">
|
||||
<strong>Figure 1 Using Audio Sharing.</strong> First select what type
|
||||
of content you would like to share. Second select the content. Third
|
||||
select Share audio. Fourth select Share.
|
||||
</Text>
|
||||
|
||||
<Text my={1} variant="heading" as="h3">
|
||||
Browser not supported for audio sharing.
|
||||
</Text>
|
||||
<Text variant="body2" as="p">
|
||||
Using audio sharing relies on the browser supporting the audio capture
|
||||
feature of the Screen Capture API. Currently the two browsers that
|
||||
support this are Google Chrome and Microsoft Edge. To see if your
|
||||
browser is supported see the{" "}
|
||||
<Link href="https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility">
|
||||
Browser Compatability chart
|
||||
</Link>{" "}
|
||||
on the Mozilla Developer Network.
|
||||
</Text>
|
||||
</Flex>
|
||||
<Footer />
|
||||
|
@ -51,7 +51,7 @@ export default {
|
||||
},
|
||||
body2: {
|
||||
fontFamily: "body2",
|
||||
fontSize: 1,
|
||||
fontSize: 0,
|
||||
fontWeight: "body",
|
||||
},
|
||||
},
|
||||
@ -89,7 +89,8 @@ export default {
|
||||
fontSize: 1,
|
||||
},
|
||||
a: {
|
||||
variant: "textStyles.caption",
|
||||
variant: "text.body2",
|
||||
color: "text",
|
||||
"&:hover": {
|
||||
color: "primary",
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user