Refactored component folder structure to be a little clearer

2020-04-23 10:09:12 +10:00
parent 65c3620732
commit f2a92f2ccd
19 changed files with 42 additions and 42 deletions
--- a/src/components/party/StartStreamButton.js
+++ b/src/components/party/StartStreamButton.js
@@ -0,0 +1,107 @@
+import React, { useState } from "react";
+import { IconButton, Box, Text, Link } from "theme-ui";
+import adapter from "webrtc-adapter";
+
+import StartStreamModal from "../../modals/StartStreamModal";
+
+function StartStreamButton({ onStreamStart, onStreamEnd, stream }) {
+  const [isStreamModalOpoen, setIsStreamModalOpen] = useState(false);
+  function openModal() {
+    setIsStreamModalOpen(true);
+  }
+  function closeModal() {
+    setIsStreamModalOpen(false);
+    setNoAudioTrack(false);
+  }
+
+  const unavailableMessage = (
+    <Box p={2} bg="hsla(230, 20%, 0%, 20%)">
+      <Text as="p" variant="body2">
+        Browser not supported for audio sharing.
+        <br />
+        <br />
+        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" variant="body2">
+        No audio found in screen share.
+        <br />
+        Ensure "Share audio" is selected when sharing.
+        <br />
+        <br />
+        See <Link href="#/faq">FAQ</Link> for more information.
+      </Text>
+    </Box>
+  );
+
+  const isSupported = adapter.browserDetails.browser === "chrome";
+  const [noAudioTrack, setNoAudioTrack] = useState(false);
+
+  function handleStreamStart() {
+    navigator.mediaDevices
+      .getDisplayMedia({
+        video: true,
+        audio: {
+          noiseSuppression: false,
+          autoGainControl: false,
+          echoCancellation: false,
+        },
+      })
+      .then((localStream) => {
+        const tracks = localStream.getTracks();
+
+        const hasAudio = tracks.some((track) => track.kind === "audio");
+        setNoAudioTrack(!hasAudio);
+
+        // Ensure an audio track is present
+        if (hasAudio) {
+          onStreamStart && onStreamStart(localStream);
+          closeModal();
+        } else {
+          // Stop the stream
+          for (let track of tracks) {
+            track.stop();
+          }
+        }
+      })
+      .catch(() => {});
+  }
+
+  return (
+    <>
+      <IconButton
+        m={1}
+        aria-label="Start Radio Stream"
+        title="Start Radio Stream"
+        onClick={openModal}
+      >
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          height="24"
+          viewBox="0 0 24 24"
+          width="24"
+          fill="currentcolor"
+        >
+          <path d="M3.24 6.15C2.51 6.43 2 7.17 2 8v12c0 1.1.9 2 2 2h16c1.11 0 2-.9 2-2V8c0-1.1-.9-2-2-2H8.3l7.43-3c.46-.19.68-.71.49-1.17-.19-.46-.71-.68-1.17-.49L3.24 6.15zM7 20c-1.66 0-3-1.34-3-3s1.34-3 3-3 3 1.34 3 3-1.34 3-3 3zm13-8h-2v-1c0-.55-.45-1-1-1s-1 .45-1 1v1H4V9c0-.55.45-1 1-1h14c.55 0 1 .45 1 1v3z" />
+        </svg>
+      </IconButton>
+      <StartStreamModal
+        isOpen={isStreamModalOpoen}
+        onRequestClose={closeModal}
+        isSupported={isSupported}
+        unavailableMessage={unavailableMessage}
+        stream={stream}
+        noAudioTrack={noAudioTrack}
+        noAudioMessage={noAudioMessage}
+        onStreamStart={handleStreamStart}
+        onStreamEnd={onStreamEnd}
+      />
+    </>
+  );
+}
+
+export default StartStreamButton;