Skip to content

Commit

Permalink
docs(plugin-presence): incorporate comments
Browse files Browse the repository at this point in the history
  • Loading branch information
@sreenara
sreenara committed Apr 23, 2024
1 parent 08b5b9f commit a20752c
Show file tree
Hide file tree
Showing 6 changed files with 424 additions and 66 deletions.
55 changes: 49 additions & 6 deletions docs/samples/browser-plugin-presence/app.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,24 @@
// Declare some globals that we'll need throughout.
let webex;
let enableProd = true;
let subscribedUserIds = [];

const credentialsFormElm = document.querySelector('#credentials');
const tokenElm = document.querySelector('#access-token');
const saveElm = document.querySelector('#access-token-save');
const authStatusElm = document.querySelector('#access-token-status');
const selfPresenceElm = document.querySelector('#self-presence-status');
const selfPresenceBtn = document.querySelector('#sd-get-self-presence');
const setPresenceStatusElm = document.querySelector('#set-presence');
const setPresenceTtl = document.querySelector('#presence-ttl');
const setPresenceBtn = document.querySelector('#sd-set-self-presence');
const getPresenceBtn = document.querySelector('#sd-get-user-presence');
const getUserPresenceElm = document.querySelector('#get-user-presence');
const userPresenceStatusElm = document.querySelector('#user-presence-status');
const presenceNotifications = document.querySelector('#subscribe-presence-notifications');
const subscribeUserIds = document.querySelector('#subscribe-id');
const usersToSubOrUnsub = document.querySelector('#subscribe-id');
const subscribePresenceBtn = document.querySelector('#subscribe-presence');
const unsubscribePresenceBtn = document.querySelector('#unsubscribe-presence');
const subscribeNotificationBox = document.querySelector('#subscribe-presence-notifications');

// Store and Grab `access-token` from localstorage
Expand All @@ -39,13 +45,27 @@ function changeEnv() {
enableProduction.innerHTML = enableProd ? 'In Production' : 'In Integration';
}

function updateStatus(enabled) {
selfPresenceBtn.disabled = !enabled;
setPresenceBtn.disabled = !enabled;
getPresenceBtn.disabled = !enabled;
subscribePresenceBtn.disabled = !enabled;
unsubscribePresenceBtn.disabled = !enabled;
}


async function initWebex(e) {
e.preventDefault();
console.log('Authentication#initWebex()');

tokenElm.disabled = true;
saveElm.disabled = true;
selfPresenceBtn.disabled = true;
setPresenceBtn.disabled = true;
getPresenceBtn.disabled = true;
subscribePresenceBtn.disabled = true;
unsubscribePresenceBtn.disabled = true;

authStatusElm.innerText = 'initializing...';

const webexConfig = {
Expand Down Expand Up @@ -87,6 +107,14 @@ async function initWebex(e) {
console.log('Authentication#initWebex() :: Webex Ready');
authStatusElm.innerText = 'Webex is ready. Saved access token!';
});

webex.messages.listen()
.then(() => {
updateStatus(true);
})
.catch((err) => {
console.error(`error listening to messages: ${err}`);
});
}

credentialsFormElm.addEventListener('submit', initWebex);
Expand Down Expand Up @@ -123,7 +151,7 @@ function getUserPresence() {
userPresenceStatusElm.innerText = JSON.stringify(response, null, 2);
})
.catch((error) => {
console.log('Error occurrec while trying to get user\'s presence', error);
console.log('Error occurred while trying to get user\'s presence', error);
})
}

Expand All @@ -134,27 +162,42 @@ function handlePresenceUpdate(payload) {
subscribeNotificationBox.innerText = value;
}

function startPresenceListener() {
function setupPresenceListener() {
webex.internal.mercury.on('event:apheleia.subscription_update', handlePresenceUpdate);
}

function removePresenceListener() {
webex.internal.mercury.off('event:apheleia.subscription_update', handlePresenceUpdate);
}

function subscribePresence() {
const ids = subscribeUserIds.value.trim().split(',');
startPresenceListener();
const ids = usersToSubOrUnsub.value.trim().split(',');
if (subscribedUserIds.length == 0) {
setupPresenceListener();
}
webex.presence.subscribe(ids)
.then(() => {
console.log('successfully subscribed');
ids.map((id) => subscribedUserIds.push(id));
})
.catch((error) => {
console.log('encountered error while subscribing', error);
})
}

function removeFromArray(A, B) {
return A.filter(element => !B.includes(element));
}

function unsubscribePresence() {
const ids = subscribeUserIds.value.split(',');
const ids = usersToSubOrUnsub.value.trim().split(',');
if (subscribedUserIds.length == 0) {
removePresenceListener();
}
webex.presence.unsubscribe(ids)
.then(() => {
console.log('successfully unsubscribed');
subscribedUserIds = removeFromArray(subscribedUserIds, ids);
})
.catch((error) => {
console.log('encountered error while unsubscribing', error);
Expand Down
12 changes: 6 additions & 6 deletions docs/samples/browser-plugin-presence/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@

<!-- ############################## ############################## ############################## -->
<section>
<h2>Kitchen sink - Presence</h2>
<h2>Webex - Presence</h2>
<p>Use this kitchen sink to interact with the Webex Presence service</p>
</section>

Expand All @@ -23,10 +23,10 @@ <h2>Kitchen sink - Presence</h2>
<section id="authentication">
<h2 class="collapsible">Authentication</h2>
<div class="section-content">
<p class="note">TIP: Get access token from our developer portal: <a
<p class="note"><strong>Note:</strong> Get an access token from our developer portal: <a
href="https://developer.webex.com/docs/api/getting-started"
target="_blank">https://developer.webex.com/docs/api/getting-started</a>.</p>
<p class="note">NOTE: Webex JS SDK must be initialized using a valid token.</p>
<p class="note"><strong>Note:</strong> Webex JS SDK must be initialized using a valid token.</p>

<!-- meeting / authentication-credentials -->
<form id="credentials">
Expand Down Expand Up @@ -56,7 +56,7 @@ <h2 class="collapsible">Presence Actions</h2>
<button id="sd-get-self-presence" type="button" onclick="getSelfPresence()"
class="btn-code">Get Status</button>
</div>
<pre id="self-presence-status">NA</pre>
<pre id="self-presence-status"></pre>

<legend>Set Presence Status</legend>
<div class="u-mv">
Expand All @@ -68,9 +68,9 @@ <h2 class="collapsible">Presence Actions</h2>
<legend>Get a different user's presence status</legend>
<div class="u-mv">
<input id="get-user-presence" name="getPresence" placeholder="User ID" type="string" style="display: block; margin-bottom: 0.5rem;">
<button id="sd-set-self-presence" type="button" onclick="getUserPresence()" class="btn-code">Get Status</button>
<button id="sd-get-user-presence" type="button" onclick="getUserPresence()" class="btn-code">Get Status</button>
</div>
<pre id="user-presence-status">NA</pre>
<pre id="user-presence-status"></pre>
</fieldset>

<fieldset>
Expand Down
44 changes: 14 additions & 30 deletions docs/samples/browser-plugin-presence/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,7 @@ body {
padding: 0;
background-color: #eee;
font-family: sans-serif;
font-size: 15px;
}

video {
min-height: 15vh;
width: 100%;
font-size: 16px;
}

/* Nice defaults */
Expand Down Expand Up @@ -92,41 +87,48 @@ button, input[type="button"] {
border-color: transparent;
transition: background-color 0.15s ease;
}

button:hover, input[type="button"]:hover {
color: var(--md-button-secondary-text-color, #000);
background-color: var(--md-button-secondary-hover-bg-color, #ccc);
}

button:active, input[type="button"]:active {
background-color: var(--md-button-bg-color, rgba(0, 0, 0, 0.3));
}

button:disabled, input[type="button"]:disabled {
color: var(--md-button-disabled-text-color, rgba(0, 0, 0, 0.2));
fill: var(--md-button-disabled-text-color, rgba(0, 0, 0, 0.2));
background-color: var(--md-button-disabled-bg-color, rgba(0, 0, 0, 0.04));
pointer-events: none;
cursor: default;
}

button.btn--green, input[type="button"].btn--green {
color: #fff;
color: var(--md-button-join-text-color, #fff);
background-color: #00ab50;
background-color: var(--md-button-join-bg-color, #00ab50);
border-color: transparent;
}

button.btn--green:disabled, input[type="button"].btn--green:disabled{
opacity: .5;
}

button.btn--red, input[type="button"].btn--red {
color: #fff;
color: var(--md-button-cancel-text-color, #fff);
background-color: #f7644a;
background-color: var(--md-button-cancel-bg-color, #f7644a);
border-color: transparent;
}

.btn--red:disabled,
.btn--green:disabled {
opacity: .5;
}

button.btn-code, input[type="button"].btn-code {
font-family: Consolas, Liberation Mono, Courier, monospace;
margin: 0.2rem 0;
Expand All @@ -137,7 +139,6 @@ input[type=password],
input[type=email] {
width: 100%;
margin-bottom: 1rem;
padding: 0.5rem;
box-sizing: border-box;
border: 0.0625rem solid;
border-color: var(--md-input-outline-color, #ccc);
Expand All @@ -150,6 +151,7 @@ input[type=email] {
padding: 0 1rem;
transition: box-shadow 0.15s ease-out;
}

input[type=text]:focus,
input[type=password]:focus,
input[type=email]:focus {
Expand All @@ -176,9 +178,11 @@ input[type=email]:focus {
.flex {
display: flex;
}

.flex--wrap {
flex-wrap: wrap;
}

.flex--center {
justify-content: center;
}
Expand Down Expand Up @@ -221,7 +225,6 @@ input[type=email]:focus {

/* Misc Styles */
.note {
padding: 1rem 0;
margin: 0.8rem 0;
background: rgba(232, 232, 232, 0.4);
padding: 1rem;
Expand All @@ -233,6 +236,7 @@ input[type=email]:focus {
display: flex;
flex-direction: column;
}

.transcription textarea {
width: 100%;
min-height: 10rem;
Expand Down Expand Up @@ -266,6 +270,7 @@ input[type=email]:focus {
.hidden {
display: none;
}

th , td {
border:1px solid black;
padding: 5px;
Expand Down Expand Up @@ -308,27 +313,6 @@ table {
border-bottom: 0.125rem solid #009879;
}

#transfer-options {
min-width: 150px;
min-height: 22px;
margin-left: 1rem;
}

.ServiceData{
min-width: 0;
min-height: 0;
margin-right: 0;
padding: 1px 2px;
}

select.ServiceData {
color: black;
}

select.ServiceData:invalid {
color: #555555d4;
}

h2 {
color: #0052bf;
font-size: 1.5rem;
Expand Down
10 changes: 5 additions & 5 deletions packages/@webex/plugin-presence/package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,7 @@
]
},
"devDependencies": {
"@babel/core": "^7.17.10",
"@babel/core": "7.17.10",
"@webex/babel-config-legacy": "workspace:*",
"@webex/eslint-config-legacy": "workspace:*",
"@webex/jest-config-legacy": "workspace:*",
Expand All @@ -29,9 +29,9 @@
"@webex/test-helper-mocha": "workspace:*",
"@webex/test-helper-mock-webex": "workspace:*",
"@webex/test-helper-test-users": "workspace:*",
"eslint": "^8.24.0",
"prettier": "^2.7.1",
"sinon": "^9.2.4",
"eslint": "8.24.0",
"prettier": "2.7.1",
"sinon": "9.2.4",
"typedoc": "0.23.26"
},
"dependencies": {
Expand All @@ -42,7 +42,7 @@
"@webex/test-helper-mock-webex": "workspace:*",
"@webex/test-helper-test-users": "workspace:*",
"@webex/webex-core": "workspace:*",
"lodash": "^4.17.21"
"lodash": "4.17.21"
},
"scripts": {
"build": "yarn run -T tsc --declaration true --declarationDir ./dist/types && yarn run build:src",
Expand Down
2 changes: 0 additions & 2 deletions packages/@webex/plugin-presence/src/interface.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,10 +17,8 @@ export interface IPresenceStatusObject {
statusTime: string;
lastActive: string;
expiresTTL: number;
expiresTime: string;
vectorCounters: object;
suppressNotifications: boolean;
lastseenDeviceUrl: string;
}

export interface IEventPayload {
Expand Down
Loading

0 comments on commit a20752c

Please sign in to comment.