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

chrome/browser/resources/media_router/media_router.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.
 
 // <include src="media_router_data.js">
 // <include src="media_router_ui_interface.js">
 
 // Handles user events for the Media Router UI.
 cr.define('media_router', function() {
   'use strict';
@@ skipping 20 matching lines @@
         /** @type {!MediaRouterHeaderElement} */(container.header));
 
     container.addEventListener('acknowledge-first-run-flow',
                                onAcknowledgeFirstRunFlow);
     container.addEventListener('back-click', onNavigateToSinkList);
     container.addEventListener('cast-mode-selected', onCastModeSelected);
     container.addEventListener('change-route-source-click',
                                onChangeRouteSourceClick);
     container.addEventListener('close-dialog', onCloseDialog);
     container.addEventListener('close-route', onCloseRoute);
+    container.addEventListener('close-route-details', onRouteDetailsClosed);
     container.addEventListener('create-route', onCreateRoute);
     container.addEventListener('issue-action-click', onIssueActionClick);
     container.addEventListener('join-route-click', onJoinRouteClick);
     container.addEventListener('navigate-sink-list-to-details',
                                onNavigateToDetails);
     container.addEventListener('navigate-to-cast-mode-list',
                                onNavigateToCastMode);
+    container.addEventListener('open-route-details', onRouteDetailsOpened);
+    container.addEventListener('pause-route', onPauseRoute);

[imcheng, 2017/03/02 02:25:47]

While I appreciate the isolation of browser API from the Polymer elements, I am
bit concerned about the amount boilerplate code being introduced, and the
indirection makes it a bit difficult to trace the calls. I wonder if we can
invoke chrome.send directly. Barring that, can we have the controller invoke
media_router.browserApi directly instead of firing event?

[takumif, 2017/03/08 23:34:58]

It looks like the layer of event firing is there for testing purposes, to
observe the calls happening. I think we should keep it unless we can mock the
browserApi.

[imcheng, 2017/03/11 21:57:39]

It looks like we should be able to define chrome.browserApi to point to
mock/test versions during testing. 

[takumif, 2017/03/16 20:16:02]

Done.

+    container.addEventListener('play-route', onPlayRoute);
     container.addEventListener('report-filter', onFilter);
     container.addEventListener('report-initial-action', onInitialAction);
     container.addEventListener('report-initial-action-close',
                                onInitialActionClose);
     container.addEventListener('report-route-creation', onReportRouteCreation);
     container.addEventListener('report-sink-click-time',
                                onSinkClickTimeReported);
     container.addEventListener('report-sink-count', onSinkCountReported);
     container.addEventListener('report-resolved-route',
                                onReportRouteCreationOutcome);
     container.addEventListener('request-initial-data',
                                onRequestInitialData);
     container.addEventListener('search-sinks-and-create-route',
                                onSearchSinksAndCreateRoute);
+    container.addEventListener('seek-route', onSeekRoute);
+    container.addEventListener('set-route-volume', onSetRouteVolume);
     container.addEventListener('show-initial-state', onShowInitialState);
     container.addEventListener('sink-click', onSinkClick);
+    container.addEventListener('set-route-mute', onSetRouteMute);
 
     window.addEventListener('blur', onWindowBlur);
   }
 
   /**
    * Requests that the Media Router searches for a sink with criteria
    * |event.detail.name|.
    * @param {!Event} event
    * Parameters in |event|.detail:
    *   id - id of the pseudo sink generating the request.
@@ skipping 50 matching lines @@
    *                            services.
    */
   function onAcknowledgeFirstRunFlow(event) {
     /** @type {{optedIntoCloudServices: boolean}} */
     var detail = event.detail;
     media_router.browserApi.acknowledgeFirstRunFlow(
         detail.optedIntoCloudServices);
   }
 
   /**
+   * Sends a command to set the volume of the route shown in the route details
+   * view. Called when the user manipulates the volume slider.
+   *
+   * @param {!Event} event
+   * Parameters in |event|.detail:
+   *   volume - The volume between 0 and 1.
+   */
+  function onSetRouteVolume(event) {
+    /** @type {{volume: number}} */
+    var detail = event.detail;
+    media_router.browserApi.setRouteVolume(detail.volume);
+  }
+
+  /**
    * Closes the dialog.
    * Called when the user clicks the close button on the dialog. Reports
    * whether the user closed the dialog via the ESC key.
    *
    * @param {!Event} event
    * Parameters in |event|.detail:
    *   pressEscToClose - whether or not the user pressed ESC to close the
    *                     dialog.
    */
   function onCloseDialog(event) {
@@ skipping 65 matching lines @@
   /**
    * Creates a media route.
    * Called when the user requests to create a media route.
    *
    * @param {!Event} event
    * Parameters in |event|.detail:
    *   sinkId - sink ID selected by the user.
    *   selectedCastModeValue - cast mode selected by the user.
    */
   function onCreateRoute(event) {
-    /** @type {{sinkId: string, selectedCastModeValue, number}} */
+    /** @type {{sinkId: string, selectedCastModeValue: number}} */
     var detail = event.detail;
     media_router.browserApi.requestRoute(detail.sinkId,
                                          detail.selectedCastModeValue);
   }
 
   /**
    * Stops a route.
    * Called when the user requests to stop a media route.
    *
    * @param {!Event} event
@@ skipping 45 matching lines @@
    * Reports the user navigation the sink list view.
    * Called when the user clicks on the back button from the route details view
    * to the sink list view.
    */
   function onNavigateToSinkList() {
     media_router.browserApi.reportNavigateToView(
         media_router.MediaRouterView.SINK_LIST);
   }
 
   /**
+   * Sends a command to pause the route shown in the route details view.
+   * Called when the user clicks on the pause button.
+   */
+  function onPauseRoute() {
+    media_router.browserApi.pauseRoute();
+  }
+
+  /**
+   * Sends a command to play the route shown in the route details view.
+   * Called when the user clicks on the play button.
+   */
+  function onPlayRoute() {
+    media_router.browserApi.playRoute();
+  }
+
+  /**
    * Reports whether or not the route creation was successful.
    *
    * @param {!Event} event
    * Parameters in |event|.detail:
    *   success - whether or not the route creation was successful.
    */
   function onReportRouteCreation(event) {
     var detail = event.detail;
     media_router.browserApi.reportRouteCreation(detail.success);
   }
@@ skipping 16 matching lines @@
   }
 
   /**
    * Requests for initial data to load into the dialog.
    */
   function onRequestInitialData() {
     media_router.browserApi.requestInitialData();
   }
 
   /**
+   * Reports that the route details view has been closed.
+   */
+  function onRouteDetailsClosed() {
+    media_router.browserApi.onRouteDetailsClosed();
+  }
+
+  /**
+   * Reports that the route details view has been opened.
+   *
+   * @param {!Event} event
+   * Parameters in |event|.detail:
+   *   routeId - The ID of the media route shown in the details view.
+   */
+  function onRouteDetailsOpened(event) {
+    /** @type {{routeId: string}} */
+    var detail = event.detail;
+    media_router.browserApi.onRouteDetailsOpened(detail.routeId);
+  }
+
+  /**
+   * Sends a command to seek the route shown in the route details view. Called
+   * when the user manipulates the seek slider.
+   *
+   * @param {!Event} event
+   * Parameters in |event|.detail:
+   *   mute - whether to mute the route.
+   */
+  function onSeekRoute(event) {
+    /** @type {{time: number}} */
+    var detail = event.detail;
+    media_router.browserApi.seekRoute(detail.time);
+  }
+
+  /**
+   * Sends a command to mute or unmute the route shown in the route details
+   * view. Called when the user clicks on the mute/unmute button.
+   *
+   * @param {!Event} event
+   * Parameters in |event|.detail:
+   *   mute - whether to mute the route.
+   */
+  function onSetRouteMute(event) {
+    /** @type {{mute: boolean}} */
+    var detail = event.detail;
+    media_router.browserApi.setRouteMute(detail.mute);
+  }
+
+  /**
    * Reports the initial state of the dialog after it is opened.
    * Called after initial data is populated.
    *
    * @param {!Event} event
    * Parameters in |event|.detail:
    *   currentView - the current dialog's current view.
    */
   function onShowInitialState(event) {
     /** @type {{currentView: string}} */
     var detail = event.detail;
@@ skipping 48 matching lines @@
   function onWindowBlur() {
     media_router.browserApi.reportBlur();
   }
 
   return {
     initialize: initialize,
   };
 });
 
 window.addEventListener('load', media_router.initialize);