add ui to initiate a new call to provided destination
This commit is contained in:
@@ -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) {
|
||||
|
||||
Reference in New Issue
Block a user