83 lines
2.4 KiB
JavaScript
83 lines
2.4 KiB
JavaScript
import { createMemo, createSignal } from "solid-js";
|
|
import Integration from "../data/integration";
|
|
import WebRTCService from "../services/webrtc-service";
|
|
|
|
const [integration, setIntegration] = createSignal(null);
|
|
|
|
function IntegrationView(props) {
|
|
const title = createMemo(() =>
|
|
integration && typeof integration === "function"
|
|
? integration().getName()
|
|
: "Integration"
|
|
);
|
|
const [connectionState, setConnectionState] = createSignal(
|
|
WebRTCService.STATE_DISCONNECTED
|
|
);
|
|
const showConnectButton = createMemo(
|
|
() =>
|
|
connectionState() === WebRTCService.STATE_DISCONNECTED ||
|
|
connectionState() === WebRTCService.STATE_FAILED ||
|
|
connectionState() === WebRTCService.STATE_CLOSED
|
|
);
|
|
WebRTCService.onStateChanged(handleConnectionStateChanged);
|
|
let videoElement = null;
|
|
|
|
function handleConnectWebRTC() {
|
|
let integrationId = integration().getId();
|
|
WebRTCService.setVideoElement(videoElement);
|
|
WebRTCService.connect(integrationId);
|
|
}
|
|
|
|
function handleDisconnectWebRTC() {
|
|
WebRTCService.disconnect();
|
|
}
|
|
|
|
function handleConnectionStateChanged(state) {
|
|
setConnectionState(state);
|
|
}
|
|
|
|
return (
|
|
<div
|
|
class={
|
|
"d-flex flex-column overflow-hidden flex-fill px-3 pb-2 pt-3 " +
|
|
props.class
|
|
}
|
|
>
|
|
<span>Integration</span>
|
|
<h1>{title}</h1>
|
|
<div class="d-flex flex-row">
|
|
<div class="d-flex flex-row justify-content-end flex-fill">
|
|
<Show when={showConnectButton()}>
|
|
<button
|
|
class="btn btn-dark me-2 mb-3"
|
|
onClick={handleConnectWebRTC}
|
|
>
|
|
<i class="bi bi-plug-fill me-2"></i>
|
|
Connect
|
|
</button>
|
|
</Show>
|
|
<Show when={!showConnectButton()}>
|
|
<button
|
|
class="btn btn-dark me-2 mb-3"
|
|
onClick={handleDisconnectWebRTC}
|
|
>
|
|
<i class="bi bi-x-lg me-2"></i>
|
|
Disconnect
|
|
</button>
|
|
</Show>
|
|
</div>
|
|
</div>
|
|
<div class="flex-fill d-flex flex-column justify-content-center align-items-center rounded overflow-hidden">
|
|
<video
|
|
ref={videoElement}
|
|
class="w-100 h-100"
|
|
style="background-color: #000"
|
|
></video>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
IntegrationView.setIntegration = setIntegration;
|
|
export default IntegrationView;
|