[Media Router] Custom Controls 4 - Implement details view WebUI

chrome/browser/resources/media_router/media_router_ui_interface.js

 // Copyright 2015 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 // API invoked by the browser MediaRouterWebUIMessageHandler to communicate
 // with this UI.
 cr.define('media_router.ui', function() {
   'use strict';
 
   // The media-router-container element.
   var container = null;
 
   // The media-router-header element.
   var header = null;
 
+  // The route-controls element. Is null if the route details view isn't open.
+  var routeControls = null;
+
   /**
    * Handles response of previous create route attempt.
    *
    * @param {string} sinkId The ID of the sink to which the Media Route was
    *     creating a route.
    * @param {?media_router.Route} route The newly created route that
    *     corresponds to the sink if route creation succeeded; null otherwise.
    * @param {boolean} isForDisplay Whether or not |route| is for display.
    */
   function onCreateRouteResponseReceived(sinkId, route, isForDisplay) {
     container.onCreateRouteResponseReceived(sinkId, route, isForDisplay);
   }
 
   /**
+   * Called when the route controller for the route that is currently selected
+   * is invalidated.
+   */
+  function onRouteControllerInvalidated() {
+    container.onRouteControllerInvalidated();
+  }
+
+  /**
    * Handles the search response by forwarding |sinkId| to the container.
    *
    * @param {string} sinkId The ID of the sink found by search.
    */
   function receiveSearchResult(sinkId) {
     container.onReceiveSearchResult(sinkId);
   }
 
   /**
    * Sets the cast mode list.
@@ skipping 55 matching lines @@
    *            showEmail: boolean,
    *            userEmail: string,
    *            showDomain: boolean
    *          },
    *          routes: !Array<!media_router.Route>,
    *          castModes: !Array<!media_router.CastMode>,
    *          useTabMirroring: boolean}} data
    * Parameters in data:
    *   deviceMissingUrl - url to be opened on "Device missing?" clicked.
    *   sinksAndIdentity - list of sinks to be displayed and user identity.
+   *   useNewRouteControls - whether the new WebUI route controls should be
+   *                         used.
    *   routes - list of routes that are associated with the sinks.
    *   castModes - list of available cast modes.
    *   useTabMirroring - whether the cast mode should be set to TAB_MIRROR.
    */
   function setInitialData(data) {
     container.deviceMissingUrl = data['deviceMissingUrl'];
     container.castModeList = data['castModes'];
     this.setSinkListAndIdentity(data['sinksAndIdentity']);
+    container.useWebUiRouteControls = !!data['useNewRouteControls'];
     container.routeList = data['routes'];
     container.maybeShowRouteDetailsOnOpen();
     if (data['useTabMirroring'])
       container.selectCastMode(media_router.CastModeType.TAB_MIRROR);
     media_router.browserApi.onInitialDataReceived();
   }
 
   /**
    * Sets current issue to |issue|, or clears the current issue if |issue| is
    * null.
    *
    * @param {?media_router.Issue} issue
    */
   function setIssue(issue) {
     container.issue = issue;
   }
 
   /**
+   * Sets |routeControls|. The argument may be null if the route details view is
+   * getting closed.

[apacible, 2017/05/17 21:52:17]

Does this refer to the process of getting closed (e.g. while on tear down, route
controls was set again), or when the route details view is already closed?

[takumif, 2017/05/18 18:01:56]

More like the latter. When we navigate away from route details view (e.g. back
to sink list) we call this function with null so that we don't update the route
controls while it's hidden.

+   *
+   * @param {?MediaRouterRouteControlsElement} mediaRouterRouteControls
+   */
+  function setRouteControls(mediaRouterRouteControls) {
+    routeControls = mediaRouterRouteControls;
+  }
+
+  /**
    * Sets the list of currently active routes.
    *
    * @param {!Array<!media_router.Route>} routeList
    */
   function setRouteList(routeList) {
     container.routeList = routeList;
   }
 
   /**
    * Sets the list of discovered sinks along with properties of whether to hide
@@ skipping 18 matching lines @@
 
   /**
    * Updates the max height of the dialog
    *
    * @param {number} height
    */
   function updateMaxHeight(height) {
     container.updateMaxDialogHeight(height);
   }
 
+  /**
+   * Updates the route status shown in the route controls.
+   *
+   * @param {!media_router.RouteStatus} status
+   */
+  function updateRouteStatus(status) {
+    if (routeControls)
+      routeControls.routeStatus = status;
+  }
+
   return {
     onCreateRouteResponseReceived: onCreateRouteResponseReceived,
+    onRouteControllerInvalidated: onRouteControllerInvalidated,
     receiveSearchResult: receiveSearchResult,
     setCastModeList: setCastModeList,
     setElements: setElements,
     setFirstRunFlowData: setFirstRunFlowData,
     setInitialData: setInitialData,
     setIssue: setIssue,
+    setRouteControls: setRouteControls,
     setRouteList: setRouteList,
     setSinkListAndIdentity: setSinkListAndIdentity,
     updateMaxHeight: updateMaxHeight,
+    updateRouteStatus: updateRouteStatus,
   };
 });
 
 // API invoked by this UI to communicate with the browser WebUI message handler.
 cr.define('media_router.browserApi', function() {
   'use strict';
 
   /**
    * Indicates that the user has acknowledged the first run flow.
    *
@@ skipping 58 matching lines @@
   }
 
   /**
    * Indicates that the initial data has been received.
    */
   function onInitialDataReceived() {
     chrome.send('onInitialDataReceived');
   }
 
   /**
+   * Reports that the route details view was closed.
+   */
+  function onMediaControllerClosed() {
+    chrome.send('onMediaControllerClosed');
+  }
+
+  /**
+   * Reports that the route details view was opened for |routeId|.
+   *
+   * @param {string} routeId
+   */
+  function onMediaControllerAvailable(routeId) {
+    chrome.send('onMediaControllerAvailable', [{routeId: routeId}]);
+  }
+
+  /**
+   * Sends a command to pause the route shown in the route details view.
+   */
+  function pauseCurrentMedia() {
+    chrome.send('pauseCurrentMedia');
+  }
+
+  /**
+   * Sends a command to play the route shown in the route details view.
+   */
+  function playCurrentMedia() {
+    chrome.send('playCurrentMedia');
+  }
+
+  /**
    * Reports when the user clicks outside the dialog.
    */
   function reportBlur() {
     chrome.send('reportBlur');
   }
 
   /**
    * Reports the index of the selected sink.
    *
    * @param {number} sinkIndex
@@ skipping 126 matching lines @@
    */
   function searchSinksAndCreateRoute(
       sinkId, searchCriteria, domain, selectedCastMode) {
     chrome.send('searchSinksAndCreateRoute',
                 [{sinkId: sinkId,
                   searchCriteria: searchCriteria,
                   domain: domain,
                   selectedCastMode: selectedCastMode}]);
   }
 
+  /**
+   * Sends a command to seek the route shown in the route details view.
+   *
+   * @param {number} time The new current time in seconds.
+   */
+  function seekCurrentMedia(time) {
+    chrome.send('seekCurrentMedia', [{time: time}]);
+  }
+
+  /**
+   * Sends a command to mute or unmute the route shown in the route details
+   * view.
+   *
+   * @param {boolean} mute Mute the route if true, unmute it if false.
+   */
+  function setCurrentMediaMute(mute) {
+    chrome.send('setCurrentMediaMute', [{mute: mute}]);
+  }
+
+  /**
+   * Sends a command to change the volume of the route shown in the route
+   * details view.
+   *
+   * @param {number} volume The volume between 0 and 1.

[apacible, 2017/05/17 21:52:17]

Are there minimal increments between volume values?

[apacible, 2017/05/17 21:52:17]

Does the volume persist across route instances?

[takumif, 2017/05/18 18:01:56]

Not that I'm aware of. The slider is set to use 0.01 increments.

[takumif, 2017/05/18 18:01:56]

Yes, volume/mute persists across routes on the same sink. That behavior hasn't
changed from extensionview.

+   */
+  function setCurrentMediaVolume(volume) {
+    chrome.send('setCurrentMediaVolume', [{volume: volume}]);
+  }
+
   return {
     acknowledgeFirstRunFlow: acknowledgeFirstRunFlow,
     actOnIssue: actOnIssue,
     changeRouteSource: changeRouteSource,
     closeDialog: closeDialog,
     closeRoute: closeRoute,
     joinRoute: joinRoute,
     onInitialDataReceived: onInitialDataReceived,
+    onMediaControllerClosed: onMediaControllerClosed,
+    onMediaControllerAvailable: onMediaControllerAvailable,
+    pauseCurrentMedia: pauseCurrentMedia,
+    playCurrentMedia: playCurrentMedia,
     reportBlur: reportBlur,
     reportClickedSinkIndex: reportClickedSinkIndex,
     reportFilter: reportFilter,
     reportInitialAction: reportInitialAction,
     reportInitialState: reportInitialState,
     reportNavigateToView: reportNavigateToView,
     reportRouteCreation: reportRouteCreation,
     reportRouteCreationOutcome: reportRouteCreationOutcome,
     reportSelectedCastMode: reportSelectedCastMode,
     reportSinkCount: reportSinkCount,
     reportTimeToClickSink: reportTimeToClickSink,
     reportTimeToInitialActionClose: reportTimeToInitialActionClose,
     requestInitialData: requestInitialData,
     requestRoute: requestRoute,
     searchSinksAndCreateRoute: searchSinksAndCreateRoute,
+    seekCurrentMedia: seekCurrentMedia,
+    setCurrentMediaMute: setCurrentMediaMute,
+    setCurrentMediaVolume: setCurrentMediaVolume,
   };
 });