SymphonyElectron/demo/index.html
Kiran Niranjan 191ca0c05e Electron-318 (Included build number in the client version info) (#314)
1. Included build number in getVersionInfo method
2. Update the demo page version info to table view
3. Changed let to var to make it consistent across the file
4. Add Spectron test cases for getVersionInfo
2018-03-12 17:05:25 +05:30

263 lines
8.5 KiB
HTML

<html>
<head>
<style>
table {
border-collapse: collapse;
border-spacing: 0;
}
table, th, td {
padding: 5px;
border: 1px solid black;
}
</style>
</head>
<body>
<h1>Symphony Electron API Demo</h1>
<hr>
<p>Notifications:<p>
<button id='notf'>show notification</button>
<p>
<label for='title'>title:</label>
<input type='text' id='title' value='Notification Demo'/>
</p>
<p>
<label for='body'>body:</label>
<input type='text' id='body' value='Some message'/>
</p>
<p>
<label for='image'>image url:</label>
<input type='text' id='image' value='https://avatars0.githubusercontent.com/u/13243259?v=4&s=460'/>
</p>
<p>
<label for='company'>company:</label>
<input type='text' id='company' value='Symphony'/>
</p>
<p>
<label for='flash'>flash:</label>
<input type='checkbox' id='flash'/>
</p>
<p>
<label for='sticky'>sticky:</label>
<input type='checkbox' id='sticky'/>
</p>
<p>
<label for='color'>color:</label>
<input type='text' id='color' value='white'/>
</p>
<p>
<label for='tag'>tag:</label>
<input type='text' id='tag' value=''/>
</p>
<button id='open-config-win'>Open configure window</button>
<br>
<hr>
<p>
Crash Process:
<p>
<button id='crash'>Crash Renderer</button>
</p>
<br>
<hr>
<p>Badge Count:<p>
<button id='inc-badge'>increment badge count</button>
<br>
<button id='clear-badge'>clear badge count</button>
<br>
<hr>
<p>Screen Snippet:</p>
<button id='snippet'>get snippet</button>
<p>snippet output:</p>
<image id='snippet-img'/>
<hr>
<p>Window activate:</p>
<button id='open-win'>open window</button>
<button id='bring-to-front'>bring open window to front</button>
<hr>
<p>Get Media Sources:</p>
<button id='get-sources'>Open screen picker</button>
<br>
<video id='video'></video>
<hr>
<p>Get Version Info:</p>
<button id='get-version'>get version info</button>
<br>
Version Info:
<table >
<tr>
<th>API Version</th>
<th>Container Identifier</th>
<th>Container Version</th>
<th>Build Number</th>
</tr>
<tr>
<td id="api-version"></td>
<td id="container-identifier"></td>
<td id="container-ver"></td>
<td id="build-number"></td>
</tr>
</table>
</body>
<script>
var openConfigWin = document.getElementById('open-config-win');
openConfigWin.addEventListener('click', function() {
ssf.showNotificationSettings();
});
var notfEl = document.getElementById('notf');
var num = 0;
// note: notification will close when clicked
notfEl.addEventListener('click', function() {
var title = document.getElementById('title').value;
var body = document.getElementById('body').value;
var imageUrl = document.getElementById('image').value;
var shouldFlash = document.getElementById('flash').checked;
var shouldStick = document.getElementById('sticky').checked;
var color = document.getElementById('color').value;
var tag = document.getElementById('tag').value;
var company = document.getElementById('company').value;
num++;
var notf = new ssf.Notification(title, {
body: (body + ' num=' + num + ' tag=' + tag),
image: imageUrl,
flash: shouldFlash,
color: color || 'white',
sticky: shouldStick,
data: {
hello: 'hello word'
},
tag: tag,
company: company
});
notf.addEventListener('click', onclick);
function onclick(event) {
event.target.close();
alert('notification clicked: ' + event.target.data.hello);
}
notf.addEventListener('close', onclose);
function onclose() {
alert('notification closed');
};
notf.addEventListener('error', onerror);
function onerror(event) {
alert('error=' + event.result);
};
});
var badgeCount = 0;
var incBadgeEl = document.getElementById('inc-badge');
incBadgeEl.addEventListener('click', function() {
badgeCount++;
ssf.setBadgeCount(badgeCount);
});
var incBadgeEl = document.getElementById('clear-badge');
incBadgeEl.addEventListener('click', function() {
badgeCount = 0;
ssf.setBadgeCount(0);
});
var snippetButton = document.getElementById('snippet');
snippetButton.addEventListener('click', function() {
let snippet = new ssf.ScreenSnippet();
snippet
.capture()
.then(gotSnippet)
.catch(snippetError);
function gotSnippet(rsp) {
if (rsp && rsp.data && rsp.type) {
var dataUrl = 'data:' + rsp.type + ',' + rsp.data;
var img = document.getElementById('snippet-img');
img.src = dataUrl;
}
}
function snippetError(err) {
alert('error getting snippet' + err);
}
});
var win;
var openWinButton = document.getElementById('open-win');
openWinButton.addEventListener('click', function() {
win = window.open('win.html?x=100&y=100', 'test-window', 'height=800,width=400');
});
var front = document.getElementById('bring-to-front');
front.addEventListener('click', function() {
window.ssf.activate(win.name);
});
// register callback to be notified when size/position changes for win.
ssf.registerBoundsChange(onBoundsChange);
function onBoundsChange(arg) {
console.log('bounds changed for=', arg)
}
// crash the renderer process
const crash = document.getElementById('crash');
crash.addEventListener('click', function () {
ssf.crashRendererProcess();
});
var getSources = document.getElementById('get-sources');
getSources.addEventListener('click', function() {
ssf.getMediaSource({types: ['window', 'screen']}, function(error, source) {
if (error) throw error
navigator.webkitGetUserMedia({
audio: false,
video: {
mandatory: {
chromeMediaSource: 'desktop',
chromeMediaSourceId: source.id,
minWidth: 1280,
maxWidth: 1280,
minHeight: 720,
maxHeight: 720
}
}
}, handleStream, handleError)
});
});
function handleStream (stream) {
document.querySelector('video').src = URL.createObjectURL(stream)
}
function handleError (e) {
console.log(e)
}
var getVersionInfo = document.getElementById('get-version');
getVersionInfo.addEventListener('click', function() {
ssf.getVersionInfo().then(function(verInfo) {
let apiVersionInfo = document.getElementById('api-version');
let containerIdentifier = document.getElementById('container-identifier');
let version = document.getElementById('container-ver');
let buildNumber = document.getElementById('build-number');
apiVersionInfo.innerText = verInfo.apiVer;
containerIdentifier.innerText = verInfo.containerIdentifier;
version.innerText = verInfo.containerVer;
buildNumber.innerText = verInfo.buildNumber;
});
});
</script>
</html>