[VEUE-864] main point media dec

app/javascript/components/media_deck.tsx

@@ -1,8 +1,51 @@
 import { Component, h, VNode } from "preact";
 import ScreenShare from "components/media_deck/screen_share";
+import AddScreenShare from "components/media_deck/add_screen_share";
+import CameraShare from "components/media_deck/camera_share";
+import AddWebcamSource from "components/media_deck/add_webcam_source";
+
+type State = {
+  isScreenVisible: boolean;
+  webcamShared: boolean;
+  screenShared: boolean;
+};
+
+export default class MediaDeck extends Component<unknown, State> {
+  constructor() {
+    super();
+    this.setState({
+      isScreenVisible: true,
+      webcamShared: false,
+      screenShared: false,
+    })
+  }
 
-export default class MediaDeck extends Component {
   render(): VNode {
-    return <ScreenShare />;
+    return (
+      <div class="MediaDeck">
+        <div class="MediaDeck__sources">
+          <ScreenShare
+            screenShared={this.state.screenShared}
+            isVisible={this.state.isScreenVisible}
+            toggleVisibility={() => this.setState({isScreenVisible: !this.state.isScreenVisible})}
+          />
+          <CameraShare webcamShared={this.state.webcamShared} />
+         </div>
+        <div class="MediaDeck__controls">
+          <AddScreenShare
+            isScreenVisible={this.state.isScreenVisible}
+            screenSourceAttached={this.state.screenShared}
+            addScreenCaptureSource={() =>  this.setState({ screenShared: true })}
+            stopSharing={() => this.setState(({ screenShared: false }))}
+            toggleVisibility={() => this.setState({ isScreenVisible: !this.state.isScreenVisible})}
+          />
+          <AddWebcamSource
+            webcamSourceAttached={this.state.webcamShared}
+            addWebcamCaptureSource={() => this.setState({ webcamShared: true })}
+            stopSharing={() => this.setState({webcamShared: false})}
+          />
+        </div>
+      </div>
+    );
   }
 }

app/javascript/components/media_deck/add_screen_share.tsx

@@ -0,0 +1,41 @@
+import { Component, h, VNode } from "preact";
+
+type Props = {
+  isScreenVisible: boolean;
+  screenSourceAttached: boolean;
+  addScreenCaptureSource(): void;
+  stopSharing(): void;
+  toggleVisibility(): void;
+};
+
+export default class AddScreenShare extends Component<Props, unknown> {
+  render(): VNode {
+    return (
+      <div>
+        {this.renderVisibilityControls()}
+        {
+          !this.props.screenSourceAttached ?
+            <button onClick={() => this.props.addScreenCaptureSource()}>
+              Share Your Screen
+            </button> : <button onClick={() => this.props.stopSharing()}>Stop Sharing</button>
+        }
+      </div>
+    );
+  }
+
+  renderVisibilityControls(): VNode {
+    if (!this.props.screenSourceAttached) {
+      return <span />;
+    }
+
+    return (
+      <button
+        onClick={() => {
+          this.props.toggleVisibility();
+        }}
+      >
+        {this.props.isScreenVisible ? "Hide Screen" : "Make Visible"}
+      </button>
+    );
+  }
+}

app/javascript/components/media_deck/add_webcam_source.tsx

@@ -0,0 +1,22 @@
+import { Component, h, VNode } from "preact";
+
+type Props = {
+  webcamSourceAttached: boolean;
+  addWebcamCaptureSource(): void;
+  stopSharing(): void;
+}
+export default class AddWebcamSource extends Component<Props, any> {
+  render(): VNode {
+    return (
+      <div>
+        {
+          !this.props.webcamSourceAttached ?
+            <button onClick={() => this.props.addWebcamCaptureSource()}>
+              Attach Another Camera
+            </button> :
+            <button onClick={() => this.props.stopSharing()}>Stop Camera Stream</button>
+        }
+      </div>
+    );
+  }
+}

app/javascript/components/media_deck/camera_share.tsx

@@ -0,0 +1,94 @@
+import { Component, h, VNode } from "preact";
+import EventBus from "event_bus";
+import { RemoveCaptureSourceEvent } from "helpers/broadcast/capture_source_manager";
+import { WebcamCaptureSource } from "helpers/broadcast/capture_sources/webcam";
+
+type Props = { webcamShared: boolean };
+type State = { deviceId: string; streamStarted: boolean; webcamCaptureSource: WebcamCaptureSource; }
+
+export default class CameraShare extends Component<Props, State> {
+  private videoTag: HTMLVideoElement;
+  private webcamDevices: MediaDeviceInfo[];
+
+  constructor(props: Props) {
+    super(props);
+
+    this.setState({
+      deviceId: null,
+      streamStarted: false,
+      webcamCaptureSource: null,
+    });
+  }
+
+  render(): VNode {
+    return (
+      <div class="MediaDeck__camera-stream">
+        <div class="MediaDeck__screen-share__video">
+          <video
+            data-connected={!!this.props.webcamShared}
+            ref={(videoTag) => {
+              this.videoTag = videoTag;
+            }}
+          />
+        </div>
+        {
+          this.props.webcamShared && !this.state.streamStarted ?
+            <div class="MediaDeck__webcam-share">
+              {this.renderWebcamDevices()}
+            </div> : null
+        }
+      </div>
+    );
+  }
+
+  async componentDidMount(): Promise<void> {
+    const devices = await navigator.mediaDevices.enumerateDevices();
+    this.webcamDevices = devices.filter((d: MediaDeviceInfo) => d.kind === "videoinput");
+  }
+
+  async componentDidUpdate(prevProps: Props): Promise<void> {
+    if (prevProps.webcamShared === this.props.webcamShared)
+      return;
+
+    if (!this.props.webcamShared) {
+      EventBus.dispatch(RemoveCaptureSourceEvent, this.state.webcamCaptureSource);
+      this.state.webcamCaptureSource.stop();
+      this.videoTag.srcObject = null;
+      this.setState({ webcamCaptureSource: null });
+    }
+  }
+
+  private renderWebcamDevices(): VNode[] {
+    const devicesMarkup = [];
+    this.webcamDevices.forEach((device: MediaDeviceInfo) => {
+      devicesMarkup.push(this.deviceMarkup(device));
+    });
+    return devicesMarkup;
+  }
+
+  private deviceMarkup(device: MediaDeviceInfo): VNode {
+    return (
+      <div
+        class="MediaDeck__webcam-share--item"
+        data-media-id={device.deviceId}
+        onClick={() => this.startWebcamStream(device.deviceId)}
+      >
+        {device.label}
+      </div>
+    );
+  }
+
+  private async startWebcamStream(deviceId: string): Promise<void> {
+    const webcamCaptureSource = await WebcamCaptureSource.connect(
+      this.state.deviceId,
+      this.videoTag
+    );
+
+    this.setState({
+      deviceId: deviceId,
+      streamStarted: true,
+      webcamCaptureSource,
+    });
+
+  }
+}