RNS-Things/reticulum-meshchatX
1
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases 8 Wiki Activity

add call log

Browse Source
This commit is contained in:
liamcottle
2024-05-20 23:35:29 +12:00
parent 9dbb1ff9e7
commit 56e4725db3
1 changed files with 74 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

81
public/call.html
View File

@@ -8,6 +8,7 @@
<!-- scripts -->
<script src="assets/js/tailwindcss/tailwind-v3.4.3-forms-v0.5.7.js"></script>
<script src="assets/js/axios@1.6.8/dist/axios.min.js"></script>
<script src="assets/js/vue@3.4.26/dist/vue.global.js"></script>
<!-- codec2 -->
@@ -20,7 +21,7 @@
<body class="bg-gray-100">
<div id="app" class="flex h-full">
<div class="mx-auto my-auto w-full max-w-md">
<div class="mx-auto my-auto w-full max-w-lg">
<!-- in active call -->
<div v-if="isWebsocketConnected" class="w-full">
@@ -81,8 +82,10 @@
</div>
<!-- no call active -->
<div v-else class="w-full">
<div class="border rounded-xl bg-white shadow w-full">
<div v-else class="w-full space-y-2">
<!-- dialer -->
<div class="border rounded-xl bg-white shadow w-full overflow-hidden">
<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">
@@ -95,11 +98,47 @@
<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">
</div>
<button @click="joinCall" 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">
<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>
</div>
</div>
<!-- call log -->
<div class="border rounded-xl bg-white shadow w-full overflow-hidden">
<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" />
</svg>
</div>
<div class="my-auto">Call Log</div>
</div>
<div>
<div v-for="audioCall in audioCalls" class="flex p-2">
<div>
<div>Initiator Identity: {{ audioCall.initiator_identity_hash || "Unknown" }}</div>
<div>Call Hash: {{ audioCall.hash }}</div>
<div>
<span v-if="audioCall.is_active">Status: Active</span>
<span v-else>Status: Inactive</span>
</div>
<div>
<span v-if="audioCall.is_outbound">Direction: Outbound</span>
<span v-else>Direction: Inbound</span>
</div>
</div>
<div class="ml-auto my-auto mx-2">
<button v-if="audioCall.is_active" @click="joinCall(audioCall.hash)" 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">
<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" />
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
@@ -111,6 +150,8 @@
data() {
return {
audioCalls: [],
isWebsocketConnected: false,
callHash: null,
txBytes: 0,
@@ -129,22 +170,35 @@
},
mounted: function() {
// update calls list
this.updateCallsList();
// update calls list every 3 seconds
setInterval(() => {
this.updateCallsList();
}, 3000);
},
methods: {
async joinCall() {
async joinExistingCall() {
// make sure call hash provided
if(!this.callHash){
if(!this.callHash) {
alert("Enter hash of existing call.");
return;
}
await this.joinCall(this.callHash);
},
async joinCall(callHash) {
// reset stats
this.txBytes = 0;
this.rxBytes = 0;
// connect to websocket
this.ws = new WebSocket(location.origin.replace(/^http/, 'ws') + `/api/v1/calls/${this.callHash}/audio`);
this.ws = new WebSocket(location.origin.replace(/^http/, 'ws') + `/api/v1/calls/${callHash}/audio`);
this.ws.addEventListener('open', async () => {
@@ -333,6 +387,19 @@
return parseFloat((bytes / Math.pow(k, i)).toFixed(decimals)) + ' ' + sizes[i];
},
async updateCallsList() {
try {
// fetch calls
const response = await axios.get("/api/v1/calls");
// update ui
this.audioCalls = response.data.audio_calls;
} catch(e) {
// do nothing on error
}
},
},
}).mount('#app');
</script>