playback-device-server/www/src/views/integration-view.jsx

44 lines
1.2 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"
);
function handleConnectWebRTC() {
WebRTCService.connect();
}
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 class="w-100 h-100" style="background-color: #000"></video>
</div>
</div>
);
}
IntegrationView.setIntegration = setIntegration;
export default IntegrationView;