Merge remote-tracking branch 'upstream/update2017'

support/client/lib/vwf/model/aframe.js

@@ -892,8 +892,6 @@ define(["module", "vwf/model", "vwf/utility"], function (module, model, utility)
                         case "itemSrc":
                             value = aframeObject.getAttribute('src');
                         break;
-
-                      
                     }
                 }
 

support/client/lib/vwf/view/aframeComponent.js

@@ -83,6 +83,12 @@ define(["module", "vwf/view"], function (module, view) {
                         if (!node) {
                             return;
                         }
+
+                        if (this.nodes[childID].extends == "http://vwf.example.com/aframe/a-sound-component.vwf"){
+                            console.log(vwf.getProperty(childID, 'isPlaying'));
+                            self.kernel.callMethod(childID, "playSound");
+                    }
+
                     },
 
         createdProperty: function (nodeId, propertyName, propertyValue) {
@@ -138,8 +144,65 @@ define(["module", "vwf/view"], function (module, view) {
 
             lerpTick ();
 
+        },
+
+
+        gotProperty: function (nodeId, propertyName, propertyValue) {
+            var selfs = this;
+
+            var node = this.state.nodes[nodeId];
+
+            if (!(node && node.aframeObj)) {
+                return;
+            }
+
+
+            // if (this.nodes[nodeId].extends == "http://vwf.example.com/aframe/a-sound-component.vwf"){
+            //     if (propertyName == "currentTime"){
+            //         console.log(node.aframeObj.el.components.sound.listener.context.currentTime);
+            //     }
+            // }
+
+        },
+
+        calledMethod: function( nodeID, methodName, methodParameters, methodValue ) {
+
+            var node = this.state.nodes[nodeID];
+
+            if (!(node && node.aframeObj)) {
+                return;
+            }
+
+       
+            if (this.nodes[nodeID].extends == "http://vwf.example.com/aframe/a-sound-component.vwf"){
+                if (methodName == "stopSound"){
+
+                    console.log("stop sound");
+                    node.aframeObj.el.components.sound.stopSound();
+                    self.kernel.setProperty(nodeID, "isPlaying", false);
+                    //node.aframeObj.stopSound();
+                }
+
+                if (methodName == "playSound"){
+
+                    console.log("play sound");
+                    node.aframeObj.el.components.sound.playSound();
+                    self.kernel.setProperty(nodeID, "isPlaying", true);
+                    //node.aframeObj.stopSound();
+                }
+
+                if (methodName == "pauseSound"){
+
+                    console.log("pause sound");
+                    node.aframeObj.el.components.sound.pauseSound();
+                    self.kernel.setProperty(nodeID, "isPlaying", false);
+                    //node.aframeObj.stopSound();
+                }
+            }
+
         }
 
+
     });
 
     function lerpTick () {

support/client/lib/vwf/view/editor-new.js

@@ -1691,6 +1691,127 @@ define([
                 ]
             }
 
+            let audioGUI = {
+                $type: "div",
+                class: "propGrid mdc-layout-grid max-width mdc-layout-grid--align-left",
+                $components: [
+                    {
+
+                        $type: "div",
+                        class: "mdc-layout-grid__inner",
+                        $components: [
+                            {
+                                $type: "div",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                $components: [
+                                    {
+
+                                        $cell: true,
+                                        $type: "span",
+                                        $text: "Sound: "
+
+                                    }
+                                ]
+                            },
+                            {
+                                    $type: "div",
+                                    class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                    $components: [
+                                        widgets.icontoggle({
+                                            'id': "soundStopStartSwitch",
+                                            'label': 'play',
+                                            'on': JSON.stringify({"content": "pause", "label": "stop"}),
+                                            'off': JSON.stringify({"content": "play_arrow", "label": "play"}),
+                                            'state': false,
+                                            'init': function(){
+                                                var nodeID = this._currentNode;
+
+                                                this._comp = new mdc.iconToggle.MDCIconToggle(this); 
+
+                                                this.setAttribute('id', "soundStopStartSwitch-" + nodeID );
+                                                let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
+                                                mdc.iconToggle.MDCIconToggle.attachTo(this);
+                                                this._comp.on = isPlaying;
+
+
+                                                this.addEventListener('MDCIconToggle:change', (e) => {
+                                                    
+                                                    // let avatarID = 'avatar-'+ vwf.moniker_;
+                                                    // let avatarNode = self.nodes['avatar-'+ vwf.moniker_];
+                                                    // let mode = JSON.parse(avatarNode.properties.selectMode.getValue());
+            
+                                                    var nodeID = document.querySelector('#currentNode')._currentNode;
+                                                    let isPlaying = vwf.getProperty(nodeID, 'isPlaying');
+                
+                                                    if (isPlaying) {
+                
+                                                        console.log("stop");
+                                                        vwf_view.kernel.callMethod(nodeID, "pauseSound");
+                
+                                                    } else {
+                
+                                                        console.log("play")
+                                                        vwf_view.kernel.callMethod(nodeID, "playSound");
+                                                    }
+                
+                                                  });
+                                                
+                                            }
+                                        })
+                                    ]
+                                },
+                            {
+                                $type: "div",
+                                class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-2",
+                                $components: [
+                                    {
+                                        $type: "div",
+                                        style: "padding: 12px",
+                                        $components: [
+                                            widgets.iconButton({
+                                                'label': 'stop',
+                                                onclickfunc: function () {
+                                                    var nodeID = this._currentNode;
+                                                    vwf_view.kernel.callMethod(nodeID, "stopSound");
+                                                }
+
+                                            })
+                                        ]
+                                    }
+                                ]
+                            }
+
+                            
+                            // {
+                            //     $type: "div",
+                            //     class: "mdc-layout-grid__cell mdc-layout-grid__cell--span-3",
+                            //     $components: [
+                            //         widgets.switch({
+                            //         'id': 'editnode', 
+                            //         'init': function(){
+                            //             vwf_view.kernel.getProperty(this._currentNode, 'edit');
+                            //         },
+                            //         'onchange': function(e){
+
+                            //             var nodeID = document.querySelector('#currentNode')._currentNode;
+                            //             let chkAttr = this.getAttribute('checked');
+                            //             if (chkAttr == "") {
+                            //                 self.kernel.setProperty(this._currentNode, 'edit', false);
+    
+                            //             } else {
+                            //                 self.kernel.setProperty(this._currentNode, 'edit', true);
+                            //             }
+    
+                            //             vwf_view.kernel.callMethod(nodeID, "showCloseGizmo");
+                            //         }
+                            //     }
+                            //     )
+                            //     ]
+                            // }
+                        ]
+                    }
+                ]
+            }
 
             let gizmoEdit = {
 
@@ -1886,6 +2007,12 @@ define([
                     if (this._currentNode !== self.kernel.application()) {
                         if (nodeProtos.includes('http://vwf.example.com/aframe/componentNode.vwf')) {
                             //gizmoCell = {};
+                                if (nodeProtos.includes('http://vwf.example.com/aframe/a-sound-component.vwf'))
+                                {
+                                    //console.log("sound gui")
+                                    gizmoCell = audioGUI
+                                }
+
                         } else {
                             gizmoCell = gizmoEdit
                         }
@@ -3544,6 +3671,21 @@ define([
 
             let nodeCell = document.querySelector('#currentNode');
 
+            if (nodeCell !== null) {
+                if (nodeCell._currentNode == nodeID && propertyName == 'isPlaying') {
+                    console.log('SET PLAY !!!');
+                    let compID = 'soundStopStartSwitch-' + nodeID;
+                    let playSwitch = document.querySelector("[id='" + compID + "']");
+
+                    if (playSwitch){
+                       // const mycomp = new mdc.iconToggle.MDCIconToggle(playSwitch); //new mdc.select.MDCIconToggle
+                       playSwitch._comp.on = propertyValue;
+                    }
+                }
+
+            }
+
+
             if (nodeCell !== null) {
                 if (nodeCell._currentNode == nodeID && propertyName == 'edit') {
                     console.log('EDIT !!!')

support/client/lib/vwf/view/widgets.js

@@ -347,10 +347,16 @@ define(function () {
         }
 
         icontoggle(obj) {
+
+            var addClass = "";
+            if (obj.styleClass){
+                addClass = obj.styleClass;
+            }
+
             return {
                 $cell: true,
                 $type: "i",
-                class: "mdc-icon-toggle material-icons "+ obj.styleClass,
+                class: "mdc-icon-toggle material-icons "+ addClass,
                 role: "button",
                 $text: obj.label,
                 id: obj.id,
@@ -363,10 +369,15 @@ define(function () {
         }
 
         floatActionButton(obj) {
+            var addClass = "";
+            if (obj.styleClass){
+                addClass = obj.styleClass;
+            }
+
             return {
                     $cell: true,
                     $type: "button",
-                    class: "mdc-fab material-icons " + obj.styleClass,
+                    class: "mdc-fab material-icons " + addClass,
                     onclick: obj.onclickfunc,
                     $components:[
                         {
@@ -380,16 +391,22 @@ define(function () {
         }
 
         iconButton(obj) {
+
+            var addClass = "";
+            if (obj.styleClass){
+                addClass = obj.styleClass;
+            }
+
             return {
                     $cell: true,
                     $type: "button",
-                    class: "mdc-button",
+                    class: "mdc-button" + addClass,
                     onclick: obj.onclickfunc,
                     $components:[
                         {
                             $cell: true,
                             $type: "i",
-                            class: "material-icons mdc-button__icon"+ obj.styleClass,
+                            class: "material-icons mdc-button__icon",
                             $text: obj.label
                         }
                     ]

support/proxy/vwf.example.com/aframe/a-sound-component.vwf.yaml

@@ -13,7 +13,11 @@ properties:
   rolloffFactor:
   src:
   volume:
+  isPlaying:
 methods:
+  stopSound:
+  playSound:
+  pauseSound:
   refreshSrc:
     parameters:
       - srcID

support/proxy/vwf.example.com/aframe/ascene.js

@@ -916,8 +916,9 @@ this.createAudio = function (itemSrc, name, node, avatar) {
                 "extends": "http://vwf.example.com/aframe/a-sound-component.vwf",
                 "type": "component",
                 "properties": {
-                    "autoplay": true,
+                    "autoplay": false,
                     "loop": true,
+                    "isPlaying": false,
                     "src": '#' + child.itemID
                 }