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

chrome/browser/resources/media_router/media_router_ui_interface.js

Index: chrome/browser/resources/media_router/media_router_ui_interface.js
diff --git a/chrome/browser/resources/media_router/media_router_ui_interface.js b/chrome/browser/resources/media_router/media_router_ui_interface.js
index a8ec54461a248a242f5475c160923d50dc85ccfd..bbf70dbaf11ea1d3fd450b4124e9d1818a17eafa 100644
--- a/chrome/browser/resources/media_router/media_router_ui_interface.js
+++ b/chrome/browser/resources/media_router/media_router_ui_interface.js
@@ -13,6 +13,9 @@ cr.define('media_router.ui', function() {
   // 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.
    *
@@ -26,6 +29,14 @@ cr.define('media_router.ui', function() {
     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.
    *
@@ -102,6 +113,8 @@ cr.define('media_router.ui', function() {
    * 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.
@@ -110,6 +123,7 @@ cr.define('media_router.ui', function() {
     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'])
@@ -127,6 +141,16 @@ cr.define('media_router.ui', function() {
     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.
    *
@@ -166,17 +190,30 @@ cr.define('media_router.ui', function() {
     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,
   };
 });
 
@@ -254,6 +291,36 @@ cr.define('media_router.browserApi', function() {
     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.
    */
@@ -401,6 +468,35 @@ cr.define('media_router.browserApi', function() {
                   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,
@@ -409,6 +505,10 @@ cr.define('media_router.browserApi', function() {
     closeRoute: closeRoute,
     joinRoute: joinRoute,
     onInitialDataReceived: onInitialDataReceived,
+    onMediaControllerClosed: onMediaControllerClosed,
+    onMediaControllerAvailable: onMediaControllerAvailable,
+    pauseCurrentMedia: pauseCurrentMedia,
+    playCurrentMedia: playCurrentMedia,
     reportBlur: reportBlur,
     reportClickedSinkIndex: reportClickedSinkIndex,
     reportFilter: reportFilter,
@@ -424,5 +524,8 @@ cr.define('media_router.browserApi', function() {
     requestInitialData: requestInitialData,
     requestRoute: requestRoute,
     searchSinksAndCreateRoute: searchSinksAndCreateRoute,
+    seekCurrentMedia: seekCurrentMedia,
+    setCurrentMediaMute: setCurrentMediaMute,
+    setCurrentMediaVolume: setCurrentMediaVolume,
   };
 });