From 62f23e0b88482a37ba2db658f11a35e1b53d3c50 Mon Sep 17 00:00:00 2001 From: Brenden Tuck Date: Mon, 21 Sep 2020 11:12:13 -0400 Subject: [PATCH] update multimedia and supporting plugins to allow message routing --- .../webclient/js/plugins/goldenlayout.js | 47 +++++--- .../static/webclient/js/plugins/multimedia.js | 108 ++++++++++++++---- .../static/webclient/js/plugins/options2.js | 1 + 3 files changed, 118 insertions(+), 38 deletions(-) diff --git a/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js b/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js index ec94917a98..afc36c9aa0 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js +++ b/evennia/web/webclient/static/webclient/js/plugins/goldenlayout.js @@ -404,10 +404,12 @@ let goldenlayout = (function () { // + // returns an array of pane divs that the given message should be sent to // - var onText = function (args, kwargs) { + var routeMessage = function (args, kwargs) { // If the message is not itself tagged, we"ll assume it // should go into any panes with "all" and "untagged" set + var divArray = []; var msgtype = "untagged"; if ( kwargs && "type" in kwargs ) { @@ -419,37 +421,47 @@ let goldenlayout = (function () { } } - let messageDelivered = false; let components = myLayout.root.getItemsByType("component"); - components.forEach( function (component) { - if( component.hasId("inputComponent") ) { return; } // ignore the input component + if( component.hasId("inputComponent") ) { return; } // ignore input components - let textDiv = component.container.getElement().children(".content"); - let attrTypes = textDiv.attr("types"); + let destDiv = component.container.getElement().children(".content"); + let attrTypes = destDiv.attr("types"); let paneTypes = attrTypes ? attrTypes.split(" ") : []; - let updateMethod = textDiv.attr("updateMethod"); - let txt = args[0]; // is this message type listed in this pane"s types (or is this pane catching "all") if( paneTypes.includes(msgtype) || paneTypes.includes("all") ) { - routeMsg( textDiv, txt, updateMethod ); - messageDelivered = true; + divArray.push(destDiv); } // is this pane catching "upmapped" messages? // And is this message type listed in the untagged types array? if( paneTypes.includes("untagged") && untagged.includes(msgtype) ) { - routeMsg( textDiv, txt, updateMethod ); - messageDelivered = true; + divArray.push(destDiv); } }); - if ( messageDelivered ) { - return true; - } - // unhandled message - return false; + return divArray; + } + + + // + // + var onText = function (args, kwargs) { + // are any panes set to receive this text message? + var divs = routeMessage(args, kwargs); + + var msgHandled = false; + divs.forEach( function (div) { + let updateMethod = div.attr("updateMethod"); + let txt = args[0]; + + // yes, so add this text message to the target div + routeMsg( div, txt, updateMethod ); + msgHandled = true; + }); + + return msgHandled; } @@ -536,6 +548,7 @@ let goldenlayout = (function () { getGL: function () { return myLayout; }, addKnownType: addKnownType, onTabCreate: onTabCreate, + routeMessage: routeMessage, } }()); window.plugin_handler.add("goldenlayout", goldenlayout); diff --git a/evennia/web/webclient/static/webclient/js/plugins/multimedia.js b/evennia/web/webclient/static/webclient/js/plugins/multimedia.js index 59cdc3a4c8..f8f6ab10d3 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/multimedia.js +++ b/evennia/web/webclient/static/webclient/js/plugins/multimedia.js @@ -1,53 +1,119 @@ /* + * Evennia example Webclient multimedia outputs plugin * - * Evennia Webclient multimedia outputs plugin + * PLUGIN ORDER PREREQS: + * loaded after: + * webclient_gui.js + * option2.js + * loaded before: * - * in evennia python code: * + * 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) { - var mwin = $("#messagewindow"); - mwin.append(""); - mwin.scrollTop(mwin[0].scrollHeight); + 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(""); + 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 mwin = $("#messagewindow"); - mwin.append(""); - mwin.scrollTop(mwin[0].scrollHeight); + var mwins = window.plugins["goldenlayout"].routeMessage(args, kwargs); + mwins.forEach( function (mwin) { + mwin.append(""); + 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 mwin = $("#messagewindow"); - mwin.append(""); - mwin.scrollTop(mwin[0].scrollHeight); + var mwins = window.plugins["goldenlayout"].routeMessage(args, kwargs); + mwins.forEach( function (mwin) { + mwin.append(""); + mwin.scrollTop(mwin[0].scrollHeight); + }); + } + + // + var onOptionsUI = function (parentdiv) { + let options = window.options; + var checked; + + checked = options["mm_image"] ? "checked='checked'" : ""; + var mmImage = $( [ "" + ].join("") ); + + checked = options["mm_audio"] ? "checked='checked'" : ""; + var mmAudio = $( [ "" + ].join("") ); + + checked = options["mm_video"] ? "checked='checked'" : ""; + var mmVideo = $( [ "" + ].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 () { - 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 + 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); - +plugin_handler.add("multimedia_plugin", multimedia_plugin); diff --git a/evennia/web/webclient/static/webclient/js/plugins/options2.js b/evennia/web/webclient/static/webclient/js/plugins/options2.js index eb3bc31bc2..2e5ff4a410 100644 --- a/evennia/web/webclient/static/webclient/js/plugins/options2.js +++ b/evennia/web/webclient/static/webclient/js/plugins/options2.js @@ -179,6 +179,7 @@ let options2 = (function () { onLoggedIn: onLoggedIn, onOptionsUI: onOptionsUI, onPrompt: onPrompt, + onOptionCheckboxChanged: onOptionCheckboxChanged, } })(); window.plugin_handler.add("options2", options2);