Merge pull request #2201 from friarzen/multimedia_updates

update multimedia and supporting plugins to allow message routing

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 destDiv = component.container.getElement().children(".content");
-            let attrTypes = textDiv.attr("types");
+            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 );
+                divArray.push(destDiv);
-                messageDelivered = true;
             }
 
             // 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 );
+                divArray.push(destDiv);
-                messageDelivered = true;
             }
         });
 
-        if ( messageDelivered ) {
+        return divArray;
-            return true;
+    }
-        }
+
-        // unhandled message
+
-        return false;
+    //
+    //
+    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);

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");
+        let options = window.options;
-        mwin.append("<img src='"+ args[0] +"'/>");
+        if( !("mm_image" in options) || options["mm_image"] === false ) { return; }
-        mwin.scrollTop(mwin[0].scrollHeight);
+
+        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 mwin = $("#messagewindow");
+        var mwins = window.plugins["goldenlayout"].routeMessage(args, kwargs);
-        mwin.append("<audio controls='' autoplay='' style='height:17px;width:175px'>" +
+        mwins.forEach( function (mwin) {
-                    "<source src='"+ args[0] +"'/>" +
+            mwin.append("<audio controls='' autoplay='' style='height:17px;width:175px'>" +
-                    "</audio>");
+                        "<source src='"+ args[0] +"'/>" +
-        mwin.scrollTop(mwin[0].scrollHeight);
+                        "</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 mwin = $("#messagewindow");
+        var mwins = window.plugins["goldenlayout"].routeMessage(args, kwargs);
-        mwin.append("<video controls='' autoplay=''>" +
+        mwins.forEach( function (mwin) {
-                    "<source src='"+ args[0] +"'/>" +
+            mwin.append("<video controls='' autoplay=''>" +
-                    "</video>");
+                        "<source src='"+ args[0] +"'/>" +
-        mwin.scrollTop(mwin[0].scrollHeight);
+                        "</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 () {
-        Evennia = window.Evennia;
+        let options = window.options;
-        Evennia.emitter.on('image', image); // capture "image" commands
+        options["mm_image"] = true;
-        Evennia.emitter.on('audio', audio); // capture "audio" commands
+        options["mm_audio"] = true;
-        Evennia.emitter.on('video', video); // capture "video" commands
+        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);
-

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);