Skip to content

Commit

Permalink
Modified demo page to also load URL fragments.
Browse files Browse the repository at this point in the history 
This modifies the demo app to load arguments (play, vv, etc) from
URL fragments. They can still be loaded as html parameters like before,
for backwards compatibility.
This also adds several new fields, for various configuration variables,
as well as a new selector for log level.

Issue #709

Change-Id: I096cc1e8a43218eff2c882929d23d090bc6e5f79
  • Loading branch information
@theodab
theodab committed Mar 20, 2017
1 parent 55b8ef4 commit 6ce4770
Show file tree
Hide file tree
Showing 3 changed files with 176 additions and 44 deletions.
29 changes: 29 additions & 0 deletions demo/configuration_section.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,35 @@ shakaDemo.setupConfiguration_ = function() {
'change', shakaDemo.onTrickPlayChange_);
document.getElementById('enableAdaptation').addEventListener(
'change', shakaDemo.onAdaptationChange_);
document.getElementById('logLevelList').addEventListener(
'change', shakaDemo.onLogLevelChange_);
};


/**
* @param {!Event} event
* @private
*/
shakaDemo.onLogLevelChange_ = function(event) {
// shaka.log is not set if logging isn't enabled.
// I.E. if using the compiled version of shaka.
if (shaka.log) {
var logLevel = event.target[event.target.selectedIndex];
switch (logLevel.value) {
case 'info':
shaka.log.setLevel(shaka.log.Level.INFO);
break;
case 'debug':
shaka.log.setLevel(shaka.log.Level.DEBUG);
break;
case 'vv':
shaka.log.setLevel(shaka.log.Level.V2);
break;
case 'v':
shaka.log.setLevel(shaka.log.Level.V1);
break;
}
}
};


Expand Down
9 changes: 9 additions & 0 deletions demo/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -147,6 +147,15 @@ <h1>Shaka Player <span id="version"></span></h1>
<label for="logToScreen">Log to the screen:</label>
<input id="logToScreen" type="checkbox">
</div>
<div id="logLevelListDiv" hidden>
<label for="logLevelList">Log Level:</label>
<select id="logLevelList" class="flex-grow">
<option value="info">Info</option>
<option value="debug">Debug</option>
<option value="v">Verbose</option>
<option value="vv">Very Verbose</option>
</select>
</div>
</details>

<details id="infoSection" class="input">
Expand Down
182 changes: 138 additions & 44 deletions demo/main.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -78,44 +78,12 @@ shakaDemo.init = function() {
document.getElementById('preferredAudioLanguage').value = language;
document.getElementById('preferredTextLanguage').value = language;

// Read URL parameters.
var fields = location.search.split('?').slice(1).join('?');
fields = fields ? fields.split(';') : [];
var params = {};
for (var i = 0; i < fields.length; ++i) {
var kv = fields[i].split('=');
params[kv[0]] = kv.slice(1).join('=');
}

if ('lang' in params) {
document.getElementById('preferredAudioLanguage').value = params['lang'];
document.getElementById('preferredTextLanguage').value = params['lang'];
}
if ('asset' in params) {
document.getElementById('manifestInput').value = params['asset'];
}
if ('license' in params) {
document.getElementById('licenseServerInput').value = params['license'];
}
if ('logtoscreen' in params) {
document.getElementById('logToScreen').checked = true;
}
if ('noinput' in params) {
// Both the content container and body need different styles in this mode.
document.getElementById('container').className = 'noinput';
document.body.className = 'noinput';
}

if ('vv' in params && shaka.log) {
shaka.log.setLevel(shaka.log.Level.V2);
} else if ('v' in params && shaka.log) {
shaka.log.setLevel(shaka.log.Level.V1);
} else if ('debug' in params && shaka.log) {
shaka.log.setLevel(shaka.log.Level.DEBUG);
}
var params = shakaDemo.getParams_();

shakaDemo.setupLogging_();

shakaDemo.preBrowserCheckParams_(params);

shaka.polyfill.installAll();

// Listen to events to automatically blur elements focused by mouse input.
Expand Down Expand Up @@ -185,18 +153,144 @@ shakaDemo.init = function() {
shakaDemo.controls_.init(shakaDemo.castProxy_, shakaDemo.onError_,
shakaDemo.onCastStatusChange_);

// If a custom asset was given in the URL, select it now.
if ('asset' in params) {
var assetList = document.getElementById('assetList');
var customAsset = document.getElementById('customAsset');
assetList.selectedIndex = assetList.options.length - 1;
customAsset.style.display = 'block';
shakaDemo.postBrowserCheckParams_(params);
});
}
};


/**
* @return {!Object.<string, string>} params
* @private
*/
shakaDemo.getParams_ = function() {
// Read URL parameters.
var fields = location.search.substr(1);
fields = fields ? fields.split(';') : [];
var fragments = location.hash.substr(1);
fragments = fragments ? fragments.split(';') : [];

// Because they are being concatenated in this order, if both an
// URL fragment and an URL parameter of the same type are present
// the URL fragment takes precendence.
var combined = fields.concat(fragments);
var params = {};
for (var i = 0; i < combined.length; ++i) {
var kv = combined[i].split('=');
params[kv[0]] = kv.slice(1).join('=');
}
return params;
};


/**
* @param {!Object.<string, string>} params
* @private
*/
shakaDemo.preBrowserCheckParams_ = function(params) {
if ('lang' in params) {
document.getElementById('preferredAudioLanguage').value = params['lang'];
document.getElementById('preferredTextLanguage').value = params['lang'];
}
if ('audiolang' in params) {
document.getElementById('preferredAudioLanguage').value =
params['audiolang'];
}
if ('textlang' in params) {
document.getElementById('preferredTextLanguage').value = params['textlang'];
}
if ('asset' in params) {
document.getElementById('manifestInput').value = params['asset'];
}
if ('license' in params) {
document.getElementById('licenseServerInput').value = params['license'];
}
if ('logtoscreen' in params) {
document.getElementById('logToScreen').checked = true;
// Call onLogChange_ manually, because setting checked
// programatically doesn't fire a 'change' event.
shakaDemo.onLogChange_();
}
if ('noinput' in params) {
// Both the content container and body need different styles in this mode.
document.getElementById('container').className = 'noinput';
document.body.className = 'noinput';
}
// shaka.log is not set if logging isn't enabled.
// I.E. if using the compiled version of shaka.
if (shaka.log) {
// The log level selector is only visible if logging is available.
document.getElementById('logLevelListDiv').hidden = false;

// Set log level.
var toSelectValue;
if ('vv' in params) {
toSelectValue = 'vv';
shaka.log.setLevel(shaka.log.Level.V2);
} else if ('v' in params) {
toSelectValue = 'v';
shaka.log.setLevel(shaka.log.Level.V1);
} else if ('debug' in params) {
toSelectValue = 'debug';
shaka.log.setLevel(shaka.log.Level.DEBUG);
}
if (toSelectValue) {
// Set the log level selector to the proper value.
var logLevelList = document.getElementById('logLevelList');
for (var index = 0; index < logLevelList.length; index++) {
if (logLevelList[index].value == toSelectValue) {
logLevelList.selectedIndex = index;
break;
}
}
}
}
};


if ('play' in params) {
shakaDemo.load();
/**
* @param {!Object.<string, string>} params
* @private
*/
shakaDemo.postBrowserCheckParams_ = function(params) {
// If a custom asset was given in the URL, select it now.
if ('asset' in params) {
var assetList = document.getElementById('assetList');
var customAsset = document.getElementById('customAsset');
assetList.selectedIndex = assetList.options.length - 1;
customAsset.style.display = 'block';
}
if ('defaultasset' in params) {
var assetList = document.getElementById('assetList');
var assetUri = params['defaultasset'];
for (var index = 0; index < assetList.length; index++) {
if (assetList[index].asset.manifestUri == assetUri) {
assetList.selectedIndex = index;
break;
}
});
}
}

if ('noadaptation' in params) {
var enableAdaptation = document.getElementById('enableAdaptation');
enableAdaptation.checked = false;
// Call onAdaptationChange_ manually, because setting checked
// programatically doesn't fire a 'change' event.
var fakeEvent = /** @type {!Event} */({target: enableAdaptation});
shakaDemo.onAdaptationChange_(fakeEvent);
}

if ('trickplay' in params) {
var showTrickPlay = document.getElementById('showTrickPlay');
showTrickPlay.checked = true;
// Call onTrickPlayChange_ manually, because setting checked
// programatically doesn't fire a 'change' event.
var fakeEvent = /** @type {!Event} */({target: showTrickPlay});
shakaDemo.onTrickPlayChange_(fakeEvent);
}

if ('play' in params) {
shakaDemo.load();
}
};

Expand Down

0 comments on commit 6ce4770

Please sign in to comment.