120 lines
4.5 KiB
JavaScript
120 lines
4.5 KiB
JavaScript
/*
|
|
* Evennia example Webclient multimedia outputs plugin
|
|
*
|
|
* PLUGIN ORDER PREREQS:
|
|
* loaded after:
|
|
* webclient_gui.js
|
|
* option2.js
|
|
* loaded before:
|
|
*
|
|
*
|
|
* To use, in evennia python code:
|
|
* target.msg( image="URL" )
|
|
* target.msg( audio="URL" )
|
|
* target.msg( video="URL" )
|
|
* or, if you prefer tagged routing:
|
|
* target.msg( image=("URL",{'type':'tag'}) )
|
|
*
|
|
*
|
|
* Note: users probably don't _want_ more than one pane to end up with multimedia tags...
|
|
* But to allow proper tagged message routing, this plugin doesn't explicitly deny it.
|
|
*/
|
|
let multimedia_plugin = (function () {
|
|
//
|
|
var image = function (args, kwargs) {
|
|
let options = window.options;
|
|
if( !("mm_image" in options) || options["mm_image"] === false ) { return; }
|
|
|
|
var mwins = window.plugins["goldenlayout"].routeMessage(args, kwargs);
|
|
mwins.forEach( function (mwin) {
|
|
mwin.append("<img src='"+ args[0] +"'/>");
|
|
mwin.scrollTop(mwin[0].scrollHeight);
|
|
});
|
|
}
|
|
|
|
//
|
|
var audio = function (args, kwargs) {
|
|
let options = window.options;
|
|
if( !("mm_audio" in options) || options["mm_audio"] === false ) { return; }
|
|
|
|
// create an HTML5 audio control (only .mp3 is fully compatible with all major browsers)
|
|
var mwins = window.plugins["goldenlayout"].routeMessage(args, kwargs);
|
|
mwins.forEach( function (mwin) {
|
|
mwin.append("<audio controls='' autoplay='' style='height:17px;width:175px'>" +
|
|
"<source src='"+ args[0] +"'/>" +
|
|
"</audio>");
|
|
mwin.scrollTop(mwin[0].scrollHeight);
|
|
});
|
|
}
|
|
|
|
//
|
|
var video = function (args, kwargs) {
|
|
let options = window.options;
|
|
if( !("mm_video" in options) || options["mm_video"] === false ) { return; }
|
|
|
|
// create an HTML5 video element (only h264 .mp4 is compatible with all major browsers)
|
|
var mwins = window.plugins["goldenlayout"].routeMessage(args, kwargs);
|
|
mwins.forEach( function (mwin) {
|
|
mwin.append("<video controls='' autoplay=''>" +
|
|
"<source src='"+ args[0] +"'/>" +
|
|
"</video>");
|
|
mwin.scrollTop(mwin[0].scrollHeight);
|
|
});
|
|
}
|
|
|
|
//
|
|
var onOptionsUI = function (parentdiv) {
|
|
let options = window.options;
|
|
var checked;
|
|
|
|
checked = options["mm_image"] ? "checked='checked'" : "";
|
|
var mmImage = $( [ "<label>",
|
|
"<input type='checkbox' data-setting='mm_image' " + checked + "'>",
|
|
" Enable multimedia image (png/gif/etc) messages",
|
|
"</label>"
|
|
].join("") );
|
|
|
|
checked = options["mm_audio"] ? "checked='checked'" : "";
|
|
var mmAudio = $( [ "<label>",
|
|
"<input type='checkbox' data-setting='mm_audio' " + checked + "'>",
|
|
" Enable multimedia audio (mp3) messages",
|
|
"</label>"
|
|
].join("") );
|
|
|
|
checked = options["mm_video"] ? "checked='checked'" : "";
|
|
var mmVideo = $( [ "<label>",
|
|
"<input type='checkbox' data-setting='mm_video' " + checked + "'>",
|
|
" Enable multimedia video (h264 .mp4) messages",
|
|
"</label>"
|
|
].join("") );
|
|
mmImage.on("change", window.plugins["options2"].onOptionCheckboxChanged);
|
|
mmAudio.on("change", window.plugins["options2"].onOptionCheckboxChanged);
|
|
mmVideo.on("change", window.plugins["options2"].onOptionCheckboxChanged);
|
|
|
|
parentdiv.append(mmImage);
|
|
parentdiv.append(mmAudio);
|
|
parentdiv.append(mmVideo);
|
|
}
|
|
|
|
//
|
|
// Mandatory plugin init function
|
|
var init = function () {
|
|
let options = window.options;
|
|
options["mm_image"] = true;
|
|
options["mm_audio"] = true;
|
|
options["mm_video"] = true;
|
|
|
|
let Evennia = window.Evennia;
|
|
Evennia.emitter.on("image", image); // capture "image" commands
|
|
Evennia.emitter.on("audio", audio); // capture "audio" commands
|
|
Evennia.emitter.on("video", video); // capture "video" commands
|
|
console.log('Multimedia plugin initialized');
|
|
}
|
|
|
|
return {
|
|
init: init,
|
|
onOptionsUI: onOptionsUI,
|
|
}
|
|
})();
|
|
plugin_handler.add("multimedia_plugin", multimedia_plugin);
|