add ui to initiate a new call to provided destination

This commit is contained in:
liamcottle
2024-05-20 23:48:47 +12:00
parent 56e4725db3
commit b1ec6ac608
2 changed files with 40 additions and 10 deletions

View File

@@ -92,14 +92,14 @@
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
</svg>
</div>
<div class="my-auto">Reticulum Phone</div>
<div class="my-auto">Start a new Call</div>
</div>
<div class="flex text-gray-900 p-2 space-x-2">
<div class="flex-1">
<input v-model="callHash" type="text" placeholder="Enter Call Hash" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
<input v-model="destinationHash" type="text" placeholder="Enter Destination Hash" class="bg-gray-50 border border-gray-300 text-gray-900 text-sm rounded-lg focus:ring-blue-500 focus:border-blue-500 block w-full p-2">
</div>
<button @click="joinExistingCall" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-gray-500 p-2 text-sm font-semibold text-white shadow-sm hover:bg-gray-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-gray-500">
Join Existing Call
<button @click="initiateCall(destinationHash)" type="button" class="my-auto inline-flex items-center gap-x-1 rounded-md bg-green-500 p-2 text-sm font-semibold text-white shadow-sm hover:bg-green-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-green-500">
<span>Initiate Call</span>
</button>
</div>
</div>
@@ -109,7 +109,7 @@
<div class="flex border-b border-gray-300 text-gray-700 p-2">
<div class="my-auto mr-2">
<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" class="w-6 h-6">
<path stroke-linecap="round" stroke-linejoin="round" d="M2.25 6.75c0 8.284 6.716 15 15 15h2.25a2.25 2.25 0 0 0 2.25-2.25v-1.372c0-.516-.351-.966-.852-1.091l-4.423-1.106c-.44-.11-.902.055-1.173.417l-.97 1.293c-.282.376-.769.542-1.21.38a12.035 12.035 0 0 1-7.143-7.143c-.162-.441.004-.928.38-1.21l1.293-.97c.363-.271.527-.734.417-1.173L6.963 3.102a1.125 1.125 0 0 0-1.091-.852H4.5A2.25 2.25 0 0 0 2.25 4.5v2.25Z" />
<path stroke-linecap="round" stroke-linejoin="round" d="M8.25 6.75h12M8.25 12h12m-12 5.25h12M3.75 6.75h.007v.008H3.75V6.75Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0ZM3.75 12h.007v.008H3.75V12Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm-.375 5.25h.007v.008H3.75v-.008Zm.375 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" />
</svg>
</div>
<div class="my-auto">Call Log</div>
@@ -152,6 +152,8 @@
audioCalls: [],
isInitiatingCall: false,
isWebsocketConnected: false,
callHash: null,
txBytes: 0,
@@ -180,15 +182,42 @@
},
methods: {
async joinExistingCall() {
async initiateCall(destinationHash) {
// make sure call hash provided
if(!this.callHash) {
alert("Enter hash of existing call.");
// do nothing if already initiating call
// todo: support cancelling in progress call initiation
if(this.isInitiatingCall){
alert("Call is already initiating...");
return;
}
await this.joinCall(this.callHash);
// make sure call hash provided
if(!destinationHash) {
alert("Enter destination hash to call.");
return;
}
// show loading
this.isInitiatingCall = true;
try {
// initiate call
const response = await axios.get(`/api/v1/calls/initiate/${destinationHash}`);
// get call hash from response
const hash = response.data.hash;
// join call
await this.joinCall(hash);
} catch(e) {
alert("failed to initiate call");
console.log(e);
} finally {
// hide loading
this.isInitiatingCall = false;
}
},
async joinCall(callHash) {

1
web.py
View File

@@ -156,6 +156,7 @@ class ReticulumWebChat:
return websocket_response
# handle websocket clients for initiating a call
# todo: remove
@routes.get("/call/initiate/{destination_hash}")
async def ws(request):