Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CF SDK: Leave call by id #1045

Draft
wants to merge 6 commits into
base: main
Choose a base branch
from
Draft

CF SDK: Leave call by id #1045

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
3533c55
Integrate call.end method
iAmmar7 May 7, 2024
9bf3eb0
include unit tests and fix types
iAmmar7 May 8, 2024
b874501
merge with main
iAmmar7 May 8, 2024
f418cde
mergw with main
iAmmar7 May 8, 2024
6b56920
fix build
iAmmar7 May 8, 2024
747d0ce
merge with main
iAmmar7 May 17, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 26 additions & 0 deletions internal/playground-js/src/fabric/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,11 @@
rel="shortcut icon"
href="https://signalwire.com/assets/images/favicon.ico"
/>
<style>
.fs-7 {
font-size: 14px !important;
}
</style>
</head>
<body class="bg-light">
<div class="container">
Expand All @@ -36,6 +41,7 @@ <h1>Call Fabric Demo</h1>
<hr />
<div class="row py-3">
<div class="col-12 col-md-4">
<!-- Connect -->
<div class="card">
<div class="card-body">
<h5>Connect</h5>
Expand Down Expand Up @@ -118,7 +124,9 @@ <h5>Connect</h5>
</div>
</div>
</div>
<!-- Connect end -->

<!-- Room controls -->
<div id="roomControls" class="card mt-4 d-none">
<div class="card-body">
<h5>Controls</h5>
Expand Down Expand Up @@ -248,15 +256,19 @@ <h5 class="mt-3">ScreenShare</h5>
<canvas id="mic-meter" width="40" height="100"></canvas>
</div>
</div>
<!-- Room controls end -->
</div>

<div class="col-12 col-md-8 mt-4 mt-md-1">
<!-- Root element -->
<div class="row py-3">
<div class="col-12">
<div id="rootElement"></div>
</div>
</div>
<!-- Root element end -->

<!-- Devices volume -->
<div id="controlSliders" class="row py-2 d-none">
<div class="col-4">
<label for="microphoneVolume" class="form-label">
Expand Down Expand Up @@ -301,7 +313,9 @@ <h5 class="mt-3">ScreenShare</h5>
/>
</div>
</div>
<!-- Devices volume end -->

<!-- Device change -->
<div id="controlLayout" class="row py-2 d-none">
<div class="col-4">
<label for="cameraSelect" class="form-label">Camera</label>
Expand Down Expand Up @@ -333,7 +347,9 @@ <h5 class="mt-3">ScreenShare</h5>
></select>
</div>
</div>
<!-- Device change end -->

<!-- Recording -->
<div id="controlRecording" class="row py-2 d-none">
<h6>Recording (<i id="recordingState">unknown</i>)</h6>
<div class="col-12">
Expand Down Expand Up @@ -373,7 +389,9 @@ <h6>Recording (<i id="recordingState">unknown</i>)</h6>
</div>
</div>
</div>
<!-- Recording end -->

<!-- Playback -->
<div id="controlPlayback" class="row py-2 d-none">
<h6>Playback URL</h6>
<div class="form-group">
Expand Down Expand Up @@ -466,6 +484,14 @@ <h6>Playback Seek</h6>
</div>
</div>
</div>
<!-- Playback end -->

<!-- Call Stack -->
<div id="controlCallStack" class="row py-2 d-none">
<h6>Call Stack</h6>
<ul></ul>
</div>
<!-- Call Stack -->
</div>
</div>
<hr />
Expand Down
43 changes: 43 additions & 0 deletions internal/playground-js/src/fabric/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ const inCallElements = [
pauseRecordingBtn,
resumeRecordingBtn,
controlPlayback,
controlCallStack,
]

const playbackElements = [
Expand Down Expand Up @@ -227,6 +228,38 @@ async function getClient() {
return client
}

function addToCallStack(event) {
const ul = controlCallStack.querySelector('ul')

const li = document.createElement('li')
li.className = 'list-group-item'
li.id = event.call_id

const callDiv = document.createElement('div')
callDiv.className = 'd-flex align-items-center justify-content-between'

const callText = document.createElement('p')
callText.className = 'fs-7 text-wrap p-0 m-0'
callText.textContent = `Call ID: ${event.call_id}`

const callJumpBtn = document.createElement('button')
callJumpBtn.className = 'fs-7 btn btn-dark p-0 px-1'
callJumpBtn.textContent = 'Leave'
callJumpBtn.onclick = () => roomObj.leaveCallById(event.call_id)

callDiv.appendChild(callText)
callDiv.appendChild(callJumpBtn)
li.appendChild(callDiv)
ul.appendChild(li)
}

function removeFromCallStack(event) {
const liToRemove = document.getElementById(event.call_id)
if (liToRemove) {
liToRemove.remove()
}
}

/**
* Connect with Relay creating a client and attaching all the event handler.
*/
Expand Down Expand Up @@ -333,6 +366,16 @@ window.connect = async () => {
restoreUI()
})

roomObj.on('call.joined', (call) => {
console.debug('>> call.joined')
addToCallStack(call)
})

roomObj.on('call.left', (call) => {
console.debug('>> call.left')
removeFromCallStack(call)
})

await call.start()
console.debug('Call Obj', call)

Expand Down
1 change: 1 addition & 0 deletions packages/core/src/utils/interfaces.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -350,6 +350,7 @@ export type RoomMethod =
* List of all Call Fabric methods
*/
export type CallFabricMethod =
| 'call.end'
| 'call.mute'
| 'call.unmute'
| 'call.deaf'
Expand Down
47 changes: 47 additions & 0 deletions packages/js/src/fabric/CallFabricRoomSession.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -456,4 +456,51 @@ describe('CallFabricRoomSession', () => {
)
})
})

describe('leaveCallById', () => {
it('should throw error if id does not exist in call stack', () => {
const invalidId = 'non-existent-id'
expect(async () => {
await room.leaveCallById(invalidId)
}).rejects.toThrow('The call segment ID invalid!')
})

it('should call the call.end method correctly', async () => {
expect(room.callSegments).toHaveLength(2)

const callId = 'call-id-3'

dispatchMockedCallJoined({
session: stack.session,
callId: callId,
roomId: 'room-id-3',
roomSessionId: 'room-session-id-3',
memberId: 'member-id-3',
nodeId: 'node-id-3',
})

expect(room.callSegments).toHaveLength(3)

await room.leaveCallById('call-id-2')

expect(room.execute).toHaveBeenCalledWith(
{
method: 'call.end',
params: {
self: {
call_id: 'call-id-1',
member_id: 'member-id-1',
node_id: 'node-id-1',
},
target: {
call_id: 'call-id-2',
member_id: 'member-id-2',
node_id: 'node-id-2',
},
},
},
{}
)
})
})
})
22 changes: 22 additions & 0 deletions packages/js/src/fabric/CallFabricRoomSession.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,6 +38,7 @@ export interface CallFabricRoomSession extends CallFabricBaseRoomSession {
start: CallFabricRoomSessionConnection['start']
answer: BaseConnection<CallFabricRoomSession>['answer']
hangup: RoomSessionConnection['hangup']
leaveCallById: CallFabricRoomSessionConnection['leaveCallById']
}

export class CallFabricRoomSessionConnection extends RoomSessionConnection {
Expand Down Expand Up @@ -290,6 +291,27 @@ export class CallFabricRoomSessionConnection extends RoomSessionConnection {
},
})
}

leaveCallById(id: string) {
let extraParams = {}

const segment = this.callSegments.find((seg) => seg.callId === id)
if (!segment) {
throw new Error('The call segment ID invalid!')
}
extraParams = {
target: {
member_id: segment.member.id,
call_id: segment.member.callId,
node_id: segment.member.nodeId,
},
}

return this.executeAction<void>({
method: 'call.end',
extraParams,
})
}
}

export const createCallFabricRoomSessionObject = (
Expand Down
Loading