castv2-sender.html

<script type="text/javascript">
    RED.nodes.registerType('castv2-connection', {
        category: 'config',
        defaults: {
            name: { value: "" },
            target: { value: "" },
            host: { value: "" },
            port: { value: 8009 }
        },
        label: function() {
            if (this.name) {
                return this.name;
            }

            if (this.target) {
                return this.target;
            }

            let lab = this.host;
            if (this.port) {
                lab = lab + ":" + this.port;
            }

            return lab;
        },
        oneditprepare: function () {
            $('#node-config-lookup-ipaddress').click(() => {
                $('#node-config-lookup-ipaddress-icon').removeClass('fa-search');
                $('#node-config-lookup-ipaddress-icon').addClass('spinner');
                $('#node-config-lookup-ipaddress').addClass('disabled');
                $.getJSON('googleCastDevices', data => {
                    $('#node-config-lookup-ipaddress-icon').addClass('fa-search');
                    $('#node-config-lookup-ipaddress-icon').removeClass('spinner');
                    $('#node-config-lookup-ipaddress').removeClass('disabled');
                    let items = data || [];
                    items = items.map(x => x.name);
                    $('#node-config-input-target')
                        .autocomplete({
                            source: items,
                            minLength: 0,
                            close: function(_event, _ui) {
                                $('#node-config-input-target').autocomplete('destroy');
                            }
                        }).autocomplete('search','');
                });
            });
        }
    });
</script>

<script type="text/x-red" data-template-name="castv2-connection">
    <div class="form-row">
        <label for="node-config-input-target">Target</label>
        <input type="text" id="node-config-input-target" style="width:61%;" placeholder="Target name">
        <a id="node-config-lookup-ipaddress" class="red-ui-button"><i id="node-config-lookup-ipaddress-icon" class="fa fa-search"></i></a>
    </div>

    <div class="form-row">
        <label for="node-config-input-host">Host</label>
        <input type="text" id="node-config-input-host" placeholder="0.0.0.0">
    </div>

    <div class="form-row">
        <label for="node-config-input-port">Port</label>
        <input type="text" id="node-config-input-port" placeholder="8009">
    </div>

    <div class="form-row">
        <label for="node-config-input-name"><i class="icon-tag"></i> Name</label>
        <input type="text" id="node-config-input-name" placeholder="Name">
    </div>
</script>

<script type="text/x-red" data-help-name="castv2-connection">
    <p>Sets up a Google Cast target connection</p>

    <h3>Target</h3>
    <p>Named target mode. Requires node-red instance to be on the same network as the cast target for mDNS traversal. Search button will doa one time scan to find available targets. Speaker groups will track announced mDNS address changes.</p>

    <h3>Host / Port</h3>
    <p>Static host and port mode. Defaults to port 8009 for primary cast target. Can specify other ports for things like speaker groups, though targets in a group will randomly change ports and "master" IP on occasion.</p>
    <p>Can be used in cases where mDNS traversal is not possible, e.g. VLAN segregations / Docker instances not using host network.</p>
</script>

<script type="text/javascript">
    RED.nodes.registerType('castv2-sender', {
        category: 'castv2',
        color: '#4285F4',
        defaults: {
            name: { value: "" },
            connection: { type: "castv2-connection", required: true }
        },
        inputs: 1,
        outputs: 1,
        icon: "castv2-cast.svg",
        label: function() {
            return this.name || "castv2-sender";
        }
    });
</script>

<script type="text/x-red" data-template-name="castv2-sender">
    <div class="form-row">
        <label for="node-input-connection"><i class="fa fa-globe"></i> </label>
        <input type="text" id="node-input-connection">
    </div>

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

<script type="text/x-red" data-help-name="castv2-sender">
    <p>Connects to a Google Cast target to send commands</p>

    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>payload <span class="property-type">object</span></dt>
        <dd> the command object to send.</dd>
    </dl>

    <h3>Outputs</h3>
    <ol class="node-ports">
        <li>Standard output
            <dl class="message-properties">
                <dt>payload <span class="property-type">object</span></dt>
                <dd>the current cast target status.</dd>
            </dl>
        </li>
        <li>Standard error
            <dl class="message-properties">
                <dt>payload <span class="property-type">string</span></dt>
                <dd>the standard error of the command.</dd>
            </dl>
        </li>
    </ol>

    <h3>Details</h3>
    <p>Specify a valid cast target configuration in settings. Output will always be current status object from the cast device, or active cast session.<p>
    <p>A <code>msg.payload</code> object can be passed to specify several different commands. The type of command can be specified by setting <code>msg.payload.type</code> to one of the supported command types.</p>

    <h3>Application Choice</h3>
    <p>This node supports multiple applications (DefaultMediaReceiver, DashCast, YouTube), as well as media control on any application that exposes that functionality. The application can be specified on the incoming command as below to trigger launch / control of that app.</p>
    <pre>
        {
            payload: {
                app: "YouTube"
                type: "MEDIA",
                videoId: "1234"
            }
        }
    </pre>
    <p>Not including the app will always default to the DefaultMediaReceiver. The case of media / platform commands (PLAY, PAUSE, VOLUME, etc.) the "app" can be left out, and it will attempt to join the currently running session of any supported app types.
    This allows for sending these commands without having to launch a specific app first, as long as the already active application is one of the supported types.</p>

    <h3>Platform commands</h3>
    <p>Certain global commands for the platform are also supported without having to relaunch the application first.</p>

    <ul>
        <li>CLOSE</li>
        <li>MUTE</li>
        <li>VOLUME</li>
        <li>UNMUTE</li>
    </ul>

    <h4>VOLUME command</h4>
    <p>The VOLUME command requires a <code>volume</code> property to be set between 0 to 100.</p>

    <h3>Media commands</h3>
    <p>These are the media commands that should be fairly universal across supported applications. They can be run without a specified application to control supported running applications.

    <ul>
        <li>PAUSE</li>
        <li>PLAY</li>
        <li>SEEK</li>
        <li>STOP</li>
        <li>QUEUE_NEXT</li>
        <li>QUEUE_PREV</li>
    </ul>

    <h4>SEEK command</h4>
    <p>The SEEK command requires a <code>time</code> property to be set in seconds.</p>

    <h3>DefaultMediaReceiver supporting commands</h3>
    <p>These are the commands exposed by the DefaultMediaReceiver.</p>

    <ul>
        <li>MEDIA</li>
        <li>TTS</li>
    </ul>

    <h4>TTS command</h4>
    <p>The TTS command requires a <code>text</code> property to be set. Optional parameters can be set for <code>title</code>, <code>language</code>, and <code>speed</code>.</p>

    <h4>MEDIA command</h4>
    <p>The MEDIA command requires a properly formatted <code>media</code> property. It can either be a single media object, or an array of media objects which will send a queue playlist to the cast target.</p>
    <p>A "media" object requires a <code>url</code> property, but supports additional properties if needed.</p>

    <pre>
        {
            payload: {
                type: "MEDIA",
                media: {
                    url: "urlOfMedia.mp3",
                    contentType: "audio/mp3",
                    streamType: "BUFFERED or LIVE",
                    title: "optional title",
                    image: "imageUrl"
                }
            }
        }
    </pre>

    <h3>References</h3>
    <ul>
        <li><a href="https://github.com/i8beef/node-red-contrib-castv2">GitHub</a> - the nodes github repository</li>
    </ul>
</script>