adding react-skype-status sample to demonstrate the usage of UCWA SDK (#380)
* adding react-skype-status sample to demonstrate the usage of UCWA SDK * react-skype-status adding missing tracking information * react-skype-status : updating readme to match standard
This commit is contained in:
Vincent Biret
Vesa Juvonen
parent
3283f093de
commit
e61e85ca0f
|
|
@ -0,0 +1,25 @@
|
|||
# EditorConfig helps developers define and maintain consistent
|
||||
# coding styles between different editors and IDEs
|
||||
# editorconfig.org
|
||||
|
||||
root = true
|
||||
|
||||
|
||||
[*]
|
||||
|
||||
# change these settings to your own preference
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
||||
# we recommend you to keep these unchanged
|
||||
end_of_line = lf
|
||||
charset = utf-8
|
||||
trim_trailing_whitespace = true
|
||||
insert_final_newline = true
|
||||
|
||||
[*.md]
|
||||
trim_trailing_whitespace = false
|
||||
|
||||
[{package,bower}.json]
|
||||
indent_style = space
|
||||
indent_size = 2
|
||||
|
|
@ -0,0 +1,32 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
npm-debug.log*
|
||||
|
||||
# Dependency directories
|
||||
node_modules
|
||||
|
||||
# Build generated files
|
||||
dist
|
||||
lib
|
||||
solution
|
||||
temp
|
||||
*.sppkg
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# OSX
|
||||
.DS_Store
|
||||
|
||||
# Visual Studio files
|
||||
.ntvs_analysis.dat
|
||||
.vs
|
||||
bin
|
||||
obj
|
||||
|
||||
# Resx Generated Code
|
||||
*.resx.ts
|
||||
|
||||
# Styles Generated Code
|
||||
*.scss.ts
|
||||
|
|
@ -0,0 +1,8 @@
|
|||
{
|
||||
"@microsoft/generator-sharepoint": {
|
||||
"version": "1.3.4",
|
||||
"libraryName": "skype-presence-spfx-react",
|
||||
"libraryId": "8508d562-b356-4ae0-80ed-7315b2d70b0b",
|
||||
"environment": "spo"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,68 @@
|
|||
# React Skype Status WebPart
|
||||
|
||||
## Summary
|
||||
This sample demonstrates how to use the *UCWA JS SDK* for skype with the SharePoint Framework. It shows how to subscribe to status change of the different people of the organization but you can get much more information, checkout the [documentation](https://msdn.microsoft.com/en-us/skype/websdk/docs/generalreference?f=255&MSPPError=-2147217396)
|
||||
It allows leverages the *Office UI Fabric* Persona card to display comprehensive information about the user.
|
||||
|
||||
Allows you to properly display and subscribe to change of users' availibility.
|
||||
See the demo:
|
||||
|
||||
|
||||
## Used SharePoint Framework Version
|
||||
|
||||
|
||||
## Applies to
|
||||
|
||||
* [SharePoint Framework Developer](http://dev.office.com/sharepoint/docs/spfx/sharepoint-framework-overview)
|
||||
* [Office 365 developer tenant](http://dev.office.com/sharepoint/docs/spfx/set-up-your-developer-tenant)
|
||||
|
||||
## Solution
|
||||
|
||||
Solution|Author(s)
|
||||
--------|---------
|
||||
react-skype-status|[Vincent Biret](https://github.com/baywet)
|
||||
|
||||
|
||||
## Version history
|
||||
|
||||
Version|Date|Comments
|
||||
-------|----|--------
|
||||
1.0|December 1, 2017|Initial release
|
||||
|
||||
## Disclaimer
|
||||
**THIS CODE IS PROVIDED *AS IS* WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.**
|
||||
|
||||
---
|
||||
|
||||
## Minimal Path to Awesome
|
||||
### Authentication
|
||||
Because the Skype API's are secured, you first need to register an Azure Active Directory application.
|
||||
To do that go to `portal.azure.com` and sign in as your tenant adminstrator.
|
||||
|
||||
Click on `Azure Active Directory`.
|
||||
|
||||
Click on on `App Registrations` and then `New Application Registration`
|
||||
|
||||
Enter any name, select `Web app / API` in `Application Type` and in `Sign-In URL` enter `https://*.sharepoint.com/*`, then click on `Create`
|
||||
|
||||
Take note of the `application ID`, we'll need it later. Click on `required permissions`.
|
||||
|
||||
Click on `add` then `select an API` and select `Skype for Business`.
|
||||
|
||||
Select under `delegated permissions` both `Read/Write Skype user contacts and groups` and `Read/Write Skype user information (preview)`, then click `select`. Finish by clicking `Done`.
|
||||
|
||||
Don't forget to click on `Grant permissions` and `yes`.
|
||||
|
||||
### Updating the app
|
||||
After copying that sample to your local machine and running `npm install` to install the depenencies, `/src/webparts/skypePresence/services/Constants.ts` open your favorite editor. Make sure you replace the value of `ApplicationIdKey` to the value application id we kept earlier.
|
||||
|
||||
### Deploying the application
|
||||
Start by running `gulp package-solution` and deploy the application to the app catalog. More information on how to do it [here](https://docs.microsoft.com/en-us/sharepoint/dev/spfx/web-parts/get-started/serve-your-web-part-in-a-sharepoint-page)
|
||||
**At the end select SkypePresence webpart instead**
|
||||
Don't forget to run `gulp serve --nobrowser` to start the debugging server.
|
||||
|
||||
### Addtional page required
|
||||
Because Skype needs to silently redirect the user to a page for the authentication flow, you need to create an additional page called `skypepresence` in your site.
|
||||
You don't need to add anything on that page.
|
||||
|
||||
|
||||
|
|
@ -0,0 +1,20 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/config.2.0.schema.json",
|
||||
"version": "2.0",
|
||||
"bundles": {
|
||||
"skype-presence-react-web-part": {
|
||||
"components": [
|
||||
{
|
||||
"entrypoint": "./lib/webparts/skypePresenceReact/SkypePresenceReactWebPart.js",
|
||||
"manifest": "./src/webparts/skypePresenceReact/SkypePresenceReactWebPart.manifest.json"
|
||||
}
|
||||
]
|
||||
}
|
||||
},
|
||||
"externals": {
|
||||
"jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"
|
||||
},
|
||||
"localizedResources": {
|
||||
"SkypePresenceReactWebPartStrings": "lib/webparts/skypePresenceReact/loc/{locale}.js"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/copy-assets.schema.json",
|
||||
"deployCdnPath": "temp/deploy"
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/deploy-azure-storage.schema.json",
|
||||
"workingDir": "./temp/deploy/",
|
||||
"account": "<!-- STORAGE ACCOUNT NAME -->",
|
||||
"container": "skype-presence-spfx-react",
|
||||
"accessKey": "<!-- ACCESS KEY -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/package-solution.schema.json",
|
||||
"solution": {
|
||||
"name": "skype-presence-spfx-react-client-side-solution",
|
||||
"id": "8508d562-b356-4ae0-80ed-7315b2d70b0b",
|
||||
"version": "2.0.0.0"
|
||||
},
|
||||
"paths": {
|
||||
"zippedPackage": "solution/skype-presence-spfx-react.sppkg"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/core-build/serve.schema.json",
|
||||
"port": 4321,
|
||||
"https": true,
|
||||
"initialPage": "https://localhost:5432/workbench",
|
||||
"api": {
|
||||
"port": 5432,
|
||||
"entryPath": "node_modules/@microsoft/sp-webpart-workbench/lib/api/"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,45 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/core-build/tslint.schema.json",
|
||||
// Display errors as warnings
|
||||
"displayAsWarning": true,
|
||||
// The TSLint task may have been configured with several custom lint rules
|
||||
// before this config file is read (for example lint rules from the tslint-microsoft-contrib
|
||||
// project). If true, this flag will deactivate any of these rules.
|
||||
"removeExistingRules": true,
|
||||
// When true, the TSLint task is configured with some default TSLint "rules.":
|
||||
"useDefaultConfigAsBase": false,
|
||||
// Since removeExistingRules=true and useDefaultConfigAsBase=false, there will be no lint rules
|
||||
// which are active, other than the list of rules below.
|
||||
"lintConfig": {
|
||||
// Opt-in to Lint rules which help to eliminate bugs in JavaScript
|
||||
"rules": {
|
||||
"class-name": false,
|
||||
"export-name": false,
|
||||
"forin": false,
|
||||
"label-position": false,
|
||||
"member-access": true,
|
||||
"no-arg": false,
|
||||
"no-console": false,
|
||||
"no-construct": false,
|
||||
"no-duplicate-case": true,
|
||||
"no-duplicate-variable": true,
|
||||
"no-eval": false,
|
||||
"no-function-expression": true,
|
||||
"no-internal-module": true,
|
||||
"no-shadowed-variable": true,
|
||||
"no-switch-case-fall-through": true,
|
||||
"no-unnecessary-semicolons": true,
|
||||
"no-unused-expression": true,
|
||||
"no-use-before-declare": true,
|
||||
"no-with-statement": true,
|
||||
"semicolon": true,
|
||||
"trailing-comma": false,
|
||||
"typedef": false,
|
||||
"typedef-whitespace": false,
|
||||
"use-named-parameter": true,
|
||||
"valid-typeof": true,
|
||||
"variable-name": false,
|
||||
"whitespace": false
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx-build/write-manifests.schema.json",
|
||||
"cdnBasePath": "<!-- PATH TO CDN -->"
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
'use strict';
|
||||
|
||||
const gulp = require('gulp');
|
||||
const build = require('@microsoft/sp-build-web');
|
||||
|
||||
build.initialize(gulp);
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 35 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 62 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 69 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 70 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 677 KiB |
|
|
@ -0,0 +1,39 @@
|
|||
{
|
||||
"name": "skype-presence-spfx-react",
|
||||
"version": "0.0.1",
|
||||
"private": true,
|
||||
"engines": {
|
||||
"node": ">=0.10.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "gulp bundle",
|
||||
"clean": "gulp clean",
|
||||
"test": "gulp test"
|
||||
},
|
||||
"dependencies": {
|
||||
"@microsoft/sp-core-library": "~1.3.4",
|
||||
"@microsoft/sp-lodash-subset": "~1.3.4",
|
||||
"@microsoft/sp-office-ui-fabric-core": "~1.3.4",
|
||||
"@microsoft/sp-webpart-base": "~1.3.4",
|
||||
"@types/react": "15.0.38",
|
||||
"@types/react-addons-shallow-compare": "0.14.17",
|
||||
"@types/react-addons-test-utils": "0.14.15",
|
||||
"@types/react-addons-update": "0.14.14",
|
||||
"@types/react-dom": "0.14.18",
|
||||
"@types/webpack-env": ">=1.12.1 <1.14.0",
|
||||
"jquery": "^2.2.4",
|
||||
"office-ui-fabric-react": "^5.29.0",
|
||||
"react": "15.4.2",
|
||||
"react-dom": "15.4.2"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@microsoft/sp-build-web": "~1.3.4",
|
||||
"@microsoft/sp-module-interfaces": "~1.3.4",
|
||||
"@microsoft/sp-webpart-workbench": "~1.3.4",
|
||||
"@types/chai": ">=3.4.34 <3.6.0",
|
||||
"@types/jquery": "^2.0.48",
|
||||
"@types/mocha": ">=2.2.33 <2.6.0",
|
||||
"ajv": "~5.2.2",
|
||||
"gulp": "~3.9.1"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,26 @@
|
|||
{
|
||||
"$schema": "https://dev.office.com/json-schemas/spfx/client-side-web-part-manifest.schema.json",
|
||||
"id": "cdfa9362-39ea-4137-94ff-5cd3c271f06d",
|
||||
"alias": "SkypePresenceReactWebPart",
|
||||
"componentType": "WebPart",
|
||||
|
||||
// The "*" signifies that the version should be taken from the package.json
|
||||
"version": "*",
|
||||
"manifestVersion": 2,
|
||||
|
||||
// If true, the component can only be installed on sites where Custom Script is allowed.
|
||||
// Components that allow authors to embed arbitrary script code should set this to true.
|
||||
// https://support.office.com/en-us/article/Turn-scripting-capabilities-on-or-off-1f2c515f-5d7e-448a-9fd7-835da935584f
|
||||
"requiresCustomScript": false,
|
||||
|
||||
"preconfiguredEntries": [{
|
||||
"groupId": "5c03119e-3074-46fd-976b-c60198311f70", // Other
|
||||
"group": { "default": "Other" },
|
||||
"title": { "default": "SkypePresenceReact" },
|
||||
"description": { "default": "Webpart that showcases the presence subscription to a user leveraging UCWA JS SDK" },
|
||||
"officeFabricIconFontName": "Page",
|
||||
"properties": {
|
||||
"description": "SkypePresenceReact"
|
||||
}
|
||||
}]
|
||||
}
|
||||
|
|
@ -0,0 +1,57 @@
|
|||
import * as React from "react";
|
||||
import * as ReactDom from "react-dom";
|
||||
import { Version } from "@microsoft/sp-core-library";
|
||||
import {
|
||||
BaseClientSideWebPart,
|
||||
IPropertyPaneConfiguration,
|
||||
PropertyPaneTextField
|
||||
} from "@microsoft/sp-webpart-base";
|
||||
|
||||
import * as strings from "SkypePresenceReactWebPartStrings";
|
||||
import SkypePresenceReact from "./components/SkypePresenceReact";
|
||||
import { ISkypePresenceReactProps } from "./components/ISkypePresenceReactProps";
|
||||
|
||||
export interface ISkypePresenceReactWebPartProps {
|
||||
description: string;
|
||||
}
|
||||
|
||||
export default class SkypePresenceReactWebPart extends BaseClientSideWebPart<ISkypePresenceReactWebPartProps> {
|
||||
|
||||
public render(): void {
|
||||
const element: React.ReactElement<ISkypePresenceReactProps > = React.createElement(
|
||||
SkypePresenceReact,
|
||||
{
|
||||
description: this.properties.description,
|
||||
webPartContext: () => this.context
|
||||
}
|
||||
);
|
||||
|
||||
ReactDom.render(element, this.domElement);
|
||||
}
|
||||
|
||||
protected get dataVersion(): Version {
|
||||
return Version.parse("1.0");
|
||||
}
|
||||
|
||||
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
|
||||
return {
|
||||
pages: [
|
||||
{
|
||||
header: {
|
||||
description: strings.PropertyPaneDescription
|
||||
},
|
||||
groups: [
|
||||
{
|
||||
groupName: strings.BasicGroupName,
|
||||
groupFields: [
|
||||
PropertyPaneTextField("description", {
|
||||
label: strings.DescriptionFieldLabel
|
||||
})
|
||||
]
|
||||
}
|
||||
]
|
||||
}
|
||||
]
|
||||
};
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
import { IWebPartContext } from "@microsoft/sp-webpart-base";
|
||||
|
||||
export interface ISkypePresenceReactProps {
|
||||
description: string;
|
||||
webPartContext: () => IWebPartContext;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export interface ISkypePresenceWebPartState {
|
||||
emailAddress:string;
|
||||
name: string;
|
||||
status: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,74 @@
|
|||
@import '~@microsoft/sp-office-ui-fabric-core/dist/sass/SPFabricCore.scss';
|
||||
|
||||
.skypePresenceReact {
|
||||
.container {
|
||||
max-width: 700px;
|
||||
margin: 0px auto;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2), 0 25px 50px 0 rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.row {
|
||||
@include ms-Grid-row;
|
||||
@include ms-fontColor-white;
|
||||
background-color: $ms-color-themeDark;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.column {
|
||||
@include ms-Grid-col;
|
||||
@include ms-lg10;
|
||||
@include ms-xl8;
|
||||
@include ms-xlPush2;
|
||||
@include ms-lgPush1;
|
||||
}
|
||||
|
||||
.title {
|
||||
@include ms-font-xl;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.subTitle {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.description {
|
||||
@include ms-font-l;
|
||||
@include ms-fontColor-white;
|
||||
}
|
||||
|
||||
.button {
|
||||
// Our button
|
||||
text-decoration: none;
|
||||
height: 32px;
|
||||
|
||||
// Primary Button
|
||||
min-width: 80px;
|
||||
background-color: $ms-color-themePrimary;
|
||||
border-color: $ms-color-themePrimary;
|
||||
color: $ms-color-white;
|
||||
|
||||
// Basic Button
|
||||
outline: transparent;
|
||||
position: relative;
|
||||
font-family: "Segoe UI WestEuropean","Segoe UI",-apple-system,BlinkMacSystemFont,Roboto,"Helvetica Neue",sans-serif;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
font-size: $ms-font-size-m;
|
||||
font-weight: $ms-font-weight-regular;
|
||||
border-width: 0;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
padding: 0 16px;
|
||||
|
||||
.label {
|
||||
font-weight: $ms-font-weight-semibold;
|
||||
font-size: $ms-font-size-m;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
margin: 0 4px;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,85 @@
|
|||
import * as React from "react";
|
||||
import styles from "./SkypePresenceReact.module.scss";
|
||||
import { ISkypePresenceReactProps } from "./ISkypePresenceReactProps";
|
||||
import { ISkypePresenceWebPartState } from "./ISkypePresenceWebPartState";
|
||||
import { SkypeForBusinessCommunicationService } from "../services";
|
||||
import { escape } from "@microsoft/sp-lodash-subset";
|
||||
import {
|
||||
Persona,
|
||||
PersonaSize,
|
||||
PersonaPresence
|
||||
} from "office-ui-fabric-react/lib/Persona";
|
||||
|
||||
|
||||
export default class SkypePresenceReact extends React.Component<ISkypePresenceReactProps, ISkypePresenceWebPartState> {
|
||||
private skypeService: SkypeForBusinessCommunicationService;
|
||||
constructor(props: ISkypePresenceReactProps) {
|
||||
super(props);
|
||||
this.state = {
|
||||
emailAddress: "",
|
||||
name: "",
|
||||
status: "Loading..."
|
||||
};
|
||||
}
|
||||
public render(): React.ReactElement<ISkypePresenceReactProps> {
|
||||
this.skypeService = new SkypeForBusinessCommunicationService(this.props.webPartContext);
|
||||
return (
|
||||
<div className={styles.skypePresenceReact}>
|
||||
<div className={styles.container}>
|
||||
<div className={styles.row}>
|
||||
<div className={styles.column}>
|
||||
<span className={styles.title}>Skype presence with UCWA JS SDK sample for SPFX</span>
|
||||
<p className={styles.subTitle}>Enter the email address of the user you want to see the status change</p>
|
||||
<input onChange={evt => this.onEmailChange(evt)} />
|
||||
<button className={styles.button} onClick={evt => this.subscribeStatus(evt)} >Subscribe</button><br />
|
||||
<Persona
|
||||
primaryText={this.state.name}
|
||||
size={ PersonaSize.size32 }
|
||||
presence={ this.mapSkypeStatusToPersonaStatus(this.state.status) }
|
||||
hidePersonaDetails={false}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
public onEmailChange(event: React.FormEvent<HTMLInputElement>): void {
|
||||
var state: ISkypePresenceWebPartState = {
|
||||
emailAddress: event.currentTarget.value,
|
||||
status: this.state.status,
|
||||
name: this.state.name
|
||||
};
|
||||
this.setState(state);
|
||||
}
|
||||
public mapSkypeStatusToPersonaStatus(skypeStatus: string): PersonaPresence {
|
||||
switch (skypeStatus) {
|
||||
case "Online":
|
||||
return PersonaPresence.online;
|
||||
case "Idle":
|
||||
case "BeRightBack":
|
||||
case "Away":
|
||||
return PersonaPresence.away;
|
||||
case "DoNotDisturb":
|
||||
return PersonaPresence.dnd;
|
||||
case "Busy":
|
||||
return PersonaPresence.busy;
|
||||
case "Offline":
|
||||
return PersonaPresence.offline;
|
||||
case "Hidden":
|
||||
case "Unknown":
|
||||
default:
|
||||
return PersonaPresence.none;
|
||||
}
|
||||
}
|
||||
public async subscribeStatus(event: React.FormEvent<HTMLButtonElement>): Promise<any> {
|
||||
await this.skypeService.SubscribeToStatusChangeForUser(this.state.emailAddress, "Name", (newStatus, oldStatus, displayName) => {
|
||||
var state: ISkypePresenceWebPartState = {
|
||||
emailAddress: this.state.emailAddress,
|
||||
status: newStatus,
|
||||
name: displayName
|
||||
};
|
||||
this.setState(state);
|
||||
});
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
define([], function() {
|
||||
return {
|
||||
"PropertyPaneDescription": "Description",
|
||||
"BasicGroupName": "Group Name",
|
||||
"DescriptionFieldLabel": "Description Field"
|
||||
}
|
||||
});
|
||||
10
samples/react-skype-status/src/webparts/skypePresenceReact/loc/mystrings.d.ts
vendored
Normal file
10
samples/react-skype-status/src/webparts/skypePresenceReact/loc/mystrings.d.ts
vendored
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
declare interface ISkypePresenceReactWebPartStrings {
|
||||
PropertyPaneDescription: string;
|
||||
BasicGroupName: string;
|
||||
DescriptionFieldLabel: string;
|
||||
}
|
||||
|
||||
declare module 'SkypePresenceReactWebPartStrings' {
|
||||
const strings: ISkypePresenceReactWebPartStrings;
|
||||
export = strings;
|
||||
}
|
||||
|
|
@ -0,0 +1,21 @@
|
|||
import { IWebPartContext} from "@microsoft/sp-webpart-base";
|
||||
import { CommunicationServiceConfiguration, Constants, ICommunicationConfigurationService } from "./";
|
||||
|
||||
export class CommunicationConfigurationService implements ICommunicationConfigurationService {
|
||||
private _currentConfiguration: CommunicationServiceConfiguration;
|
||||
private _webPartContext: IWebPartContext;
|
||||
public constructor(WebPartContext: IWebPartContext) {
|
||||
this._webPartContext = WebPartContext;
|
||||
}
|
||||
public async getCurrentConfiguration(): Promise<CommunicationServiceConfiguration> {
|
||||
if (!this._currentConfiguration) {
|
||||
this._currentConfiguration = new CommunicationServiceConfiguration();
|
||||
this._currentConfiguration.ClientId = Constants.ApplicationIdKey;
|
||||
this._currentConfiguration.RedirectUri =
|
||||
`${this._webPartContext.pageContext.web.absoluteUrl}${Constants.ApplicationRedirectUrl}`;
|
||||
return this._currentConfiguration;
|
||||
} else {
|
||||
return Promise.resolve(this._currentConfiguration);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export class CommunicationServiceConfiguration {
|
||||
public RedirectUri: string;
|
||||
public ClientId: string;
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
export class Constants {
|
||||
public static ApplicationIdKey = "application_id";
|
||||
public static ApplicationRedirectUrl = "/SitePages/skypepresence.aspx";
|
||||
public static ErrorCategory = "communication service";
|
||||
}
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
import {CommunicationServiceConfiguration } from "./";
|
||||
|
||||
export interface ICommunicationConfigurationService {
|
||||
getCurrentConfiguration(): Promise<CommunicationServiceConfiguration>;
|
||||
}
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
export interface ICommunicationService {
|
||||
SubscribeToStatusChangeForUser(userEmail: string, userDisplayName: string,
|
||||
handler: (newStatus: string, oldStatus: string, displayName: string) => void): Promise<boolean>;
|
||||
}
|
||||
|
|
@ -0,0 +1,84 @@
|
|||
import { Log } from "@microsoft/sp-core-library";
|
||||
import { IWebPartContext} from "@microsoft/sp-webpart-base";
|
||||
import { Constants, CommunicationConfigurationService, ICommunicationConfigurationService, ICommunicationService } from "./";
|
||||
import * as jQuery from "jquery";
|
||||
declare var Skype: any;
|
||||
|
||||
export class SkypeForBusinessCommunicationService implements ICommunicationService {
|
||||
private static initializePromise: any;
|
||||
private static configurationService: ICommunicationConfigurationService;
|
||||
private static webPartContext: () => IWebPartContext;
|
||||
public constructor(WebPartContext: () => IWebPartContext) {
|
||||
SkypeForBusinessCommunicationService.configurationService = new CommunicationConfigurationService(WebPartContext());
|
||||
SkypeForBusinessCommunicationService.webPartContext = WebPartContext;
|
||||
}
|
||||
public async SubscribeToStatusChangeForUser(userEmail: string, userDisplayName: string,
|
||||
handler: (newStatus: string, oldStatus: string, displayName: string) => void): Promise<boolean> {
|
||||
if (!userEmail || !handler) {
|
||||
return false;
|
||||
}
|
||||
userDisplayName = userDisplayName.replace("(...)", "");
|
||||
const skypeApp: any = await this.Initialize();
|
||||
const personsAndGroupsManager: any = skypeApp.personsAndGroupsManager;
|
||||
const mePerson: any = personsAndGroupsManager.mePerson;
|
||||
if (SkypeForBusinessCommunicationService.webPartContext().pageContext.user.email === userEmail) {
|
||||
Log.info(Constants.ErrorCategory, `Bypassed skype subscription for current user ${userEmail}`);
|
||||
handler("Online", undefined, mePerson.displayName());
|
||||
} else {
|
||||
const query: any = personsAndGroupsManager.createPersonSearchQuery();
|
||||
query.text(userEmail);
|
||||
query.limit(1);
|
||||
await query.getMore();
|
||||
query.results().forEach((result) => {
|
||||
const person: any = result.result;
|
||||
if (person.id().indexOf(userEmail) !== -1) {
|
||||
handler("Offline", undefined, userDisplayName);
|
||||
person.status.changed((newStatus, reason, oldStatus) => {
|
||||
Log.info(Constants.ErrorCategory,
|
||||
`${person.displayName()} status changed from ${oldStatus} to ${newStatus} because ${reason}`);
|
||||
handler(newStatus, oldStatus, person.displayName());
|
||||
});
|
||||
person.status.subscribe();
|
||||
}
|
||||
});
|
||||
}
|
||||
return true;
|
||||
}
|
||||
private Initialize(): Promise<any> {
|
||||
if (!SkypeForBusinessCommunicationService.initializePromise) {
|
||||
SkypeForBusinessCommunicationService.initializePromise = new Promise<any>((resolve, reject) => {
|
||||
return SkypeForBusinessCommunicationService.configurationService.getCurrentConfiguration().then((currentConfiguration) => {
|
||||
return jQuery.getScript("https://swx.cdn.skype.com/shared/v/1.2.36/SkypeBootstrap.min.js").then(() => {
|
||||
const config: {apiKey: string, apiKeyCC: string} = {
|
||||
apiKey: "a42fcebd-5b43-4b89-a065-74450fb91255", // sdk
|
||||
apiKeyCC: "9c967f6b-a846-4df2-b43d-5167e47d81e1", // sdk+ui
|
||||
};
|
||||
if (currentConfiguration && currentConfiguration.ClientId) {
|
||||
Skype.initialize({ apiKey: config.apiKey }, (api) => {
|
||||
const app: any = new api.application();
|
||||
app.signInManager.signIn ({
|
||||
client_id: currentConfiguration.ClientId,
|
||||
cors: true,
|
||||
origins: ["https://webdir.online.lync.com/autodiscover/autodiscoverservice.svc/root"],
|
||||
redirect_uri: currentConfiguration.RedirectUri,
|
||||
}).then(() => {
|
||||
resolve(app);
|
||||
}, (err: any) => {
|
||||
Log.error(Constants.ErrorCategory, new Error(`cannot sign in ${err}`));
|
||||
location.assign("https://login.microsoftonline.com/common/oauth2/authorize?response_type=token" +
|
||||
"&client_id=" + currentConfiguration.ClientId +
|
||||
"&redirect_uri=" + location.href +
|
||||
"&resource=https://webdir.online.lync.com");
|
||||
reject(err);
|
||||
});
|
||||
});
|
||||
} else {
|
||||
Log.error(Constants.ErrorCategory, new Error(`configuration missing for skype presence service`));
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
return SkypeForBusinessCommunicationService.initializePromise;
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,7 @@
|
|||
export * from "./ICommunicationService";
|
||||
export * from "./SkypeForBusinessCommunicationService";
|
||||
export * from "./PersonaCardHandler";
|
||||
export * from "./ICommunicationConfigurationService";
|
||||
export * from "./CommunicationConfigurationService";
|
||||
export * from "./Constants";
|
||||
export * from "./CommunicationServiceConfiguration";
|
||||
|
|
@ -0,0 +1,9 @@
|
|||
/// <reference types="mocha" />
|
||||
|
||||
import { assert } from 'chai';
|
||||
|
||||
describe('SkypePresenceReactWebPart', () => {
|
||||
it('should do something', () => {
|
||||
assert.ok(true);
|
||||
});
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
{
|
||||
"compilerOptions": {
|
||||
"target": "es5",
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"module": "commonjs",
|
||||
"jsx": "react",
|
||||
"declaration": true,
|
||||
"sourceMap": true,
|
||||
"experimentalDecorators": true,
|
||||
"types": [
|
||||
"es6-promise",
|
||||
"es6-collections",
|
||||
"webpack-env"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,11 @@
|
|||
// Type definitions for Microsoft ODSP projects
|
||||
// Project: ODSP
|
||||
|
||||
/* Global definition for UNIT_TEST builds
|
||||
Code that is wrapped inside an if(UNIT_TEST) {...}
|
||||
block will not be included in the final bundle when the
|
||||
--ship flag is specified */
|
||||
declare const UNIT_TEST: boolean;
|
||||
|
||||
/* Global defintion for SPO builds */
|
||||
declare const DATACENTER: boolean;
|
||||
|
|
@ -0,0 +1 @@
|
|||
/// <reference path="@ms/odsp.d.ts" />
|
||||
Loading…
Reference in New Issue