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

chrome/browser/resources/media_router/elements/route_details/route_details.html

Index: chrome/browser/resources/media_router/elements/route_details/route_details.html
diff --git a/chrome/browser/resources/media_router/elements/route_details/route_details.html b/chrome/browser/resources/media_router/elements/route_details/route_details.html
index 61043b440754fe8722df8a78cdedfe05eae796e2..7795960ef89a586f357ca20ea593ea5d9ecd84fb 100644
--- a/chrome/browser/resources/media_router/elements/route_details/route_details.html
+++ b/chrome/browser/resources/media_router/elements/route_details/route_details.html
@@ -1,16 +1,59 @@
 <link rel="import" href="chrome://resources/html/polymer.html">
 <link rel="import" href="chrome://resources/html/i18n_behavior.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/iron-icons/av-icons.html">
 <link rel="import" href="chrome://resources/polymer/v1_0/paper-button/paper-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-icon-button/paper-icon-button.html">
+<link rel="import" href="chrome://resources/polymer/v1_0/paper-slider/paper-slider.html">
 <dom-module id="route-details">
   <link rel="import" type="css" href="../../media_router_common.css">
   <link rel="import" type="css" href="route_details.css">
   <template>
-    <div id="route-information" hidden$="[[!isCustomControllerHidden_]]">
-      <span>[[activityStatus_]]</span>
+    <div id="route-controls">

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

- Is this used for both mirroring and Cast routes? How much common logic is
shared by the two types, and would the code benefit from splitting this into a
distinct template for each one?
- For media routes for which controls / media status is not supported, how does
the route details look like?
- Would it make sense, from maintainability's POV, to split the controller into
its own set of resources?

[takumif, 2017/03/02 19:21:27]

Yes, I was thinking of using one template for all of Cast/mirroring/Hangouts,
and show/hide elements depending on can_seek/can_mute/etc attributes of the
media status. This means that the WebUI won't need to be aware of the route
type. Without Hangout's high bandwidth mode, mirroring and Hangouts templates
are just subsets of the Cast template, so I think having one template makes
sense.

Even when we're adding the high-bandwidth-mode checkbox, I think we can add it
to this template and hide it for Cast/mirroring. It might make sense to make
Cast have its own template once we're supporting customizations though.

I've added a table to the design doc showing the controls each route type
supports:
https://docs.google.com/document/d/1_8QxdFIiiJX39jR1Wi1Zn9FW-Y66EMvX1GmQZvjN4...
When would media status not be supported? I think we can cover those cases by
initializing this template with title/status taken from the Route object, and
all the controls hidden by setting can_* attributes false.
Yes, it might be better if we put them in their own js/css files. I'll do that.

[imcheng, 2017/03/06 23:36:35]

Ok, sounds good. Thanks for figuring this out and updating the doc!
DIAL MediaRoutes for example do not have any custom controls or status beyond
the route description. IIRC, there's no custom controller path for DIAL, so the
custom controller view just gets hidden.

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

I thought about splitting the controller into its own files, but all that the
controller would do is call browserApi methods, so the route_details would be
calling controller methods that call browserApi methods, and I feel that's just
another layer of indirection. So I'm thinking of not having a separate class for
the controller.

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

DIAL currently just shows just the title that says something like "Casting to
YouTube". We can replicate that by initializing the custom controls with an
empty media status with just the title set. 

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

If you interact with the controller element then why would it go through
route-details first?

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

Ok. Is the idea that the C++ code will try to create a MediaController for the
route, and fallback to some default setup if it fails?

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

Factored out the controls into their own Polymer module.

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

Yes. The Dial MRP can return false for the CreateMediaRouteController() call,
and the MRUI will be notified that a controller wasn't instantiated, and won't
be sending any MediaStatus updates to the WebUI.

The WebUI will initialize the route details view with the title from
Route.description like we do now, with all the controls hidden. This will be
overridden by status updates from the browser (except in the case of Dial).

+      <div class="display-name ellipsis">[[routeStatus.title]]</div>
+      <div class="description ellipsis">[[routeStatus.status]]</div>
+      <div>
+        <div>
+          <div class="time-controls"
+              hidden="[[!routeStatus.canSeek]]">
+            <paper-slider class="time-slider"
+                on-change="onTimeSliderChange_"
+                on-immediate-value-change="onImmediateTimeSliderChange_"
+                min="0" max="100"
+                title="[[i18n('seekTitle')]]"
+                value="[[timeSliderValue_]]"></paper-slider>
+            <div class="timeline">
+              <span class="current-time">
+                  [[getFormattedTime_(displayedCurrentTime_)]]</span>
+              <span class="duration">[[getDuration_(routeStatus)]]</span>
+            </div>
+          </div>
+          <div class="media-controls">
+            <span class="button-holder">
+              <paper-icon-button
+                  hidden="[[!routeStatus.canPlayPause]]"
+                  disabled="[[!routeStatus.canPlayPause]]"
+                  icon="[[getPlayPauseIcon_(routeStatus)]]"
+                  title="[[getPlayPauseTitle_(routeStatus.isPaused)]]"
+                  on-click="onPlayPause_"></paper-icon-button>
+              <paper-icon-button class="volume-button"
+                  hidden="[[!routeStatus.canMute]]"
+                  icon="[[getMuteUnmuteIcon_(routeStatus)]]"
+                  title="[[getMuteUnmuteTitle_(routeStatus.isMuted)]]"
+                  on-click="onMuteUnmute_"></paper-icon-button>
+            </span>
+            <span class="volume-holder">
+              <paper-slider class="volume-slider"
+                  hidden="[[!routeStatus.canSetVolume]]"
+                  on-change="onVolumeSliderChange_"
+                  on-immediate-value-change="onImmediateVolumeSliderChange_"
+                  title="[[i18n('volumeTitle')]]"
+                  value="[[volumeSliderValue_]]"
+                  min="0" max="1" step="0.01"></paper-slider>
+            </span>
+          </div>
+        </div>
+      </div>
     </div>
-    <extensionview id="custom-controller"
-        hidden$="[[isCustomControllerHidden_]]">
-    </extensionview>
     <div id="route-action-buttons" class="layout">
       <paper-button flat class="route-button button"
           id="start-casting-to-route-button"