node-red-contrib-sonos-plus/src/sonos-manage-mysonos.html

A set of Node-RED nodes to control SONOS player in your local network.

<!-- Sonos My Sonos Node -->
<!-- Registering Node (JavaScript) -->
<script type="text/javascript">
  /* global RED */
  /* eslint no-undef: "error" */
  RED.nodes.registerType('sonos-manage-mysonos', {
    category: 'sonosplus',
    defaults: { // the editable properties of this node
      confignode: {
        value: '',
        type: 'sonos-config'
      },
      command: {
        value: 'message',
        required: true
      },
      state: {
        value: '',
        validate: RED.validators.typedInput('stateType')
      },
      stateType: { value: 'str' },
      avoidCheckPlayerAvailability: { value: false },
      name: { value: '' }
    },
    inputs: 1, // set the number of inputs - only 0 or 1
    outputs: 1, // set the number of outputs - 0 to n
    icon: 'sonos.png', // saved in icons/myicon.png
    color: '#95c292',
    label: function () {
      let found = mySonosCmdList.find(item => item.cmd === this.command);
      let nodeLabel = this.name || found.cmd || 'My Sonos'
      return nodeLabel;
    },
    oneditprepare: function () {
      // set up list for command 
      for (var i = 0; i < mySonosCmdList.length; i++) {
        $('#node-input-command').append($('<option></option>').attr('value', mySonosCmdList[i].cmd).text(mySonosCmdList[i].cmd));
      }
      // select command
      $('#node-input-command').val(this.command);

      // set up typed input for state
      $('#node-input-state').typedInput({
        default: 'str',
        typeField: $('#node-input-stateType'),
        types: ['str']
      });
    },
    paletteLabel: 'My Sonos'
  });
</script>

<!-- Setting design and inputs for node panel / dialog (HTML)-->
<script type="text/html" data-template-name="sonos-manage-mysonos">
  <div id="main-props">
    <!-- Config node -->
    <div class="form-row">
      <label for="node-input-confignode"> Config Node</label>
      <input type="text" id="node-input-confignode"/>
    </div>

    <div class="form-tips">
      <b>Config node</b>:  Please select a config node. Config node stores the DNS name or ipv4 address or the serial number
      of a SONOS-Player. The Commands (Topic) is send to this SONOS-Player.
    </div><br>

    <!-- Topic (Command selection) -->
    <div class="form-row">
      <label for="node-input-command"><i class="fa fa-tasks"></i> Topic</label>
      <select id="node-input-command" style="width:70%"></select>
    </div>

    <div class="form-tips">
      <b>Topic</b>: Please select a command or leave "message" to provide the command in msg.topic. A selected command overrules any 
      command given in msg.topic.
    </div><br>

    <!-- payload (state) -->
    <div class="form-row">
      <label for="node-input-state"><i class="fa fa-envelope"></i> Payload</label>
      <input type="text" id="node-input-state" style="width:70%" placeholder="Leave blank (type string) or use msg.payload"/>
      <input type="hidden" id="node-input-stateType"/>
    </div>

    <div class="form-tips">
      <b>Payload</b>: Some commands needs additional data such as search string - 
      <a href=https://github.com/hklages/node-red-contrib-sonos-plus/wiki/A.2-My-Sonos-Node>see documentation.</a>
      You can enter this data either here or provide it in msg.payload.<br>
      Entered data overrules data given in msg.payload.
    </div><br>

    <!-- SONOS player Availability Check -->
    <div class="form-row">
      <label for="node-input-avoidCheckPlayerAvailability"> Reachability</label>
      <input type="checkbox" id="node-input-avoidCheckPlayerAvailability" style="display: inline-block; vertical-align: top; width:auto;"/> Do NOT check the availability of Sonos-Player.
    </div>

    <div class="form-tips">
      <b>Reachability</b>:  By default the reachability of the SONOS player is checked at deployment time. Tik the box to avoid this check. That makes sense for SONOS-player being not always "On". <br><br>
      This option does NOT work for config nodes, where the IP address is missing.
    </div><br>

    <!-- Node name -->
    <div class="form-row">
      <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
      <input type="text" id="node-input-name" placeholder="This node name"/>
    </div>
  
  </div>
</script>

<script type="text/javascript">
  // mySonosCmdList has to be kept in sync with the table in .js file! First item is message! 
  // Message first, all others in lexical order, ascending
  const mySonosCmdList = [
    { cmd: "message" },
    { cmd: "library.export.album" },
    { cmd: "library.export.artist" },
    { cmd: "library.export.playlist" },
    { cmd: "library.export.track" },
    { cmd: "library.get.albums" },
    { cmd: "library.get.artists" },
    { cmd: "library.get.playlists" },
    { cmd: "library.get.tracks" },
    { cmd: "mysonos.export.item" },
    { cmd: "mysonos.get.items" },
    { cmd: "mysonos.queue.item" },
    { cmd: "mysonos.stream.item" }
  ];
</script>

<!-- Help text (HTML) -->
<script type="text/html" data-help-name="sonos-manage-mysonos">
<p>This node provides all commands related to My Sonos and the Music Library.<p>

Command and state can be provided in the dialog or with incoming message - see dialog.<br><br>

<a href="https://github.com/hklages/node-red-contrib-sonos-plus/wiki">Introduction</a><br>
<a href="https://github.com/hklages/node-red-contrib-sonos-plus/wiki/A.2-My-Sonos-Node">Details My Sonos node</a>

<h1>Input</h1>

Each command has specific input and output properties.<br><br>

The most important properties are: 

<dl class="message-properties">

  <dt>payload <span class="property-type">depend on command</span></dt>
  <dd>The case sensitive new state/message like on/off, uri, .... </dd>

  <dt class="required">topic <span class="property-type">string</span></dt>
  <dd>The command like mysonos.queue.item, ...</dd>

</dl>
<br>

<h1>Output</h1>

All "get/export" commands outputs to msg.payload. 

<dl class="message-properties">
  <dt>payload <span class="property-type">depend on command</span> </dt>
  <dd>In case of <b>get/export</b> the requested data is being provided. </dd>
</dl>

</script>