[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();

[imcheng, 2017/05/05 21:36:41]

Do you need to set routeControls to null here?

[takumif, 2017/05/09 00:14:57]

We already do that in RouteControls.reset(), although we could do it here
instead.

+  }
+
+  /**
    * 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 58 matching lines @@
    *          },
    *          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.
    *   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.
+   *   useNewRouteControls - whether the new WebUI route controls should be
+   *                         used.
    */
   function setInitialData(data) {
     container.deviceMissingUrl = data['deviceMissingUrl'];
     container.castModeList = data['castModes'];
     this.setSinkListAndIdentity(data['sinksAndIdentity']);
     container.routeList = data['routes'];
     container.maybeShowRouteDetailsOnOpen();
     if (data['useTabMirroring'])
       container.selectCastMode(media_router.CastModeType.TAB_MIRROR);
+    container.useWebUiRouteControls = data['useNewRouteControls'];
     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.
+   *
+   * @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.
+   */
+  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,
   };
 });