Remove audio sharing from FAQ and add default open based on how to url

src/components/party/StartStreamButton.js

@@ -22,7 +22,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
         Browser not supported for audio sharing.
         <br />
         <br />
-        See <Link to="/faq#radio">FAQ</Link> for more information.
+        See <Link to="/howTo#sharingAudio">How To</Link> for more information.
       </Text>
     </Box>
   );
@@ -35,7 +35,7 @@ function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
         Ensure "Share audio" is selected when sharing.
         <br />
         <br />
-        See <Link to="/faq#radio">FAQ</Link> for more information.
+        See <Link to="/howTo#sharingAudio">How To</Link> for more information.
       </Text>
     </Box>
   );

src/docs/assets/index.js

@@ -1,4 +1,3 @@
-import audioSharingFaq from "./AudioSharingFAQ.png";
 import defaultMaps from "./DefaultMaps.mp4";
 import customMaps from "./CustomMaps.mp4";
 import customMapsAdvanced from "./CustomMapsAdvanced.jpg";
@@ -21,7 +20,6 @@ import sharingAudio from "./SharingAudio.mp4";
 import startGame from "./StartGame.mp4";
 
 export default {
-  audioSharingFaq,
   defaultMaps,
   customMaps,
   customMapsAdvanced,

src/docs/faq/radio.md

@@ -1,12 +0,0 @@
-## Using Radio (experimental)
-
-### No audio found in screen share.
-
-When using audio sharing you must select the **Share audio** 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 **Share audio** option for a tab on MacOS see Figure 1.
-
-![Figure 1 Using Audio Sharing](audioSharingFaq)
-**Figure 1 Using Audio Sharing.** First select what type of content you would like to share. Second select the content. Third select Share audio. Fourth select Share.
-
-### Browser not supported for audio sharing.
-
-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 [Browser Compatibility chart](https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getDisplayMedia#Browser_compatibility) on the Mozilla Developer Network.

src/routes/FAQ.js

@@ -8,7 +8,6 @@ import Markdown from "../components/Markdown";
 import assets from "../docs/assets";
 
 const connection = raw("../docs/faq/connection.md");
-const radio = raw("../docs/faq/radio.md");
 const saving = raw("../docs/faq/saving.md");
 
 function FAQ() {
@@ -35,9 +34,6 @@ function FAQ() {
         <div id="connection">
           <Markdown source={connection} assets={assets} />
         </div>
-        <div id="radio">
-          <Markdown source={radio} assets={assets} />
-        </div>
         <div id="saving">
           <Markdown source={saving} assets={assets} />
         </div>

src/routes/HowTo.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { Flex, Text } from "theme-ui";
 import raw from "raw.macro";
+import { useLocation } from "react-router-dom";
 
 import Footer from "../components/Footer";
 import Markdown from "../components/Markdown";
@@ -18,7 +19,8 @@ const usingFog = raw("../docs/howTo/usingFog.md");
 const usingMeasure = raw("../docs/howTo/usingMeasure.md");
 const sharingAudio = raw("../docs/howTo/sharingAudio.md");
 
-function ReleaseNotes() {
+function HowTo() {
+  const location = useLocation();
   return (
     <Flex
       sx={{
@@ -44,42 +46,66 @@ function ReleaseNotes() {
           <Markdown source={overview} assets={assets} />
         </div>
         <div id="startingAndJoining">
-          <Accordion heading="Starting and Joining a Game">
+          <Accordion
+            heading="Starting and Joining a Game"
+            defaultOpen={location.hash === "#startingAndJoining"}
+          >
             <Markdown source={startingAndJoining} assets={assets} />
           </Accordion>
         </div>
         <div id="sharingMaps">
-          <Accordion heading="Sharing a Map">
+          <Accordion
+            heading="Sharing a Map"
+            defaultOpen={location.hash === "#sharingMaps"}
+          >
             <Markdown source={sharingMaps} assets={assets} />
           </Accordion>
         </div>
         <div id="usingTokens">
-          <Accordion heading="Using Tokens">
+          <Accordion
+            heading="Using Tokens"
+            defaultOpen={location.hash === "#usingTokens"}
+          >
             <Markdown source={usingTokens} assets={assets} />
           </Accordion>
         </div>
         <div id="usingDrawing">
-          <Accordion heading="Using the Drawing Tool">
+          <Accordion
+            heading="Using the Drawing Tool"
+            defaultOpen={location.hash === "#usingDrawing"}
+          >
             <Markdown source={usingDrawing} assets={assets} />
           </Accordion>
         </div>
         <div id="usingDice">
-          <Accordion heading="Using Dice">
+          <Accordion
+            heading="Using Dice"
+            defaultOpen={location.hash === "#usingDice"}
+          >
             <Markdown source={usingDice} assets={assets} />
           </Accordion>
         </div>
         <div id="usingFog">
-          <Accordion heading="Using the Fog Tool">
+          <Accordion
+            heading="Using the Fog Tool"
+            defaultOpen={location.hash === "#usingFog"}
+          >
             <Markdown source={usingFog} assets={assets} />
           </Accordion>
         </div>
         <div id="usingMeasure">
-          <Accordion heading="Using the Measure Tool">
+          <Accordion
+            heading="Using the Measure Tool"
+            defaultOpen={location.hash === "#usingMeasure"}
+          >
             <Markdown source={usingMeasure} assets={assets} />
           </Accordion>
         </div>
         <div id="sharingAudio">
-          <Accordion heading="Sharing Audio (Experimental)">
+          <Accordion
+            heading="Sharing Audio (Experimental)"
+            defaultOpen={location.hash === "#sharingAudio"}
+          >
             <Markdown source={sharingAudio} assets={assets} />
           </Accordion>
         </div>
@@ -89,4 +115,4 @@ function ReleaseNotes() {
   );
 }
 
-export default ReleaseNotes;
+export default HowTo;