54 lines
1.5 KiB
JavaScript
54 lines
1.5 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"
|
|
);
|
|
let videoElement = null;
|
|
|
|
function handleConnectWebRTC() {
|
|
let integrationId = integration().getId();
|
|
WebRTCService.setVideoElement(videoElement);
|
|
WebRTCService.connect(integrationId);
|
|
}
|
|
|
|
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">
|
|
<button class="btn btn-dark me-2 mb-3" onClick={handleConnectWebRTC}>
|
|
<i class="bi bi-plug-fill me-2"></i>
|
|
Connect
|
|
</button>
|
|
</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"
|
|
controls={true}
|
|
muted={false}
|
|
autoplay={true}
|
|
></video>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|
|
|
|
IntegrationView.setIntegration = setIntegration;
|
|
export default IntegrationView;
|