New media playback UI.

Source/core/html/shadow/MediaControls.cpp

 /*
  * Copyright (C) 2011, 2012 Apple Inc. All rights reserved.
  * Copyright (C) 2011, 2012 Google Inc. All rights reserved.
  *
  * Redistribution and use in source and binary forms, with or without
  * modification, are permitted provided that the following conditions
  * are met:
  * 1. Redistributions of source code must retain the above copyright
  *    notice, this list of conditions and the following disclaimer.
  * 2. Redistributions in binary form must reproduce the above copyright
@@ skipping 71 matching lines @@
 // The media controls DOM structure looks like:
 //
 // MediaControls                                       (-webkit-media-controls)
 // +-MediaControlOverlayEnclosureElement               (-webkit-media-controls-overlay-enclosure)
 // | +-MediaControlOverlayPlayButtonElement            (-webkit-media-controls-overlay-play-button)
 // | | {if mediaControlsOverlayPlayButtonEnabled}
 // | \-MediaControlCastButtonElement                   (-internal-media-controls-overlay-cast-button)
 // \-MediaControlPanelEnclosureElement                 (-webkit-media-controls-enclosure)
 //   \-MediaControlPanelElement                        (-webkit-media-controls-panel)
 //     +-MediaControlPlayButtonElement                 (-webkit-media-controls-play-button)
-//     +-MediaControlTimelineElement                   (-webkit-media-controls-timeline)
 //     +-MediaControlCurrentTimeDisplayElement         (-webkit-media-controls-current-time-display)
 //     +-MediaControlTimeRemainingDisplayElement       (-webkit-media-controls-time-remaining-display)
+//     +-MediaControlTimelineElement                   (-webkit-media-controls-timeline)
 //     +-MediaControlMuteButtonElement                 (-webkit-media-controls-mute-button)
 //     +-MediaControlVolumeSliderElement               (-webkit-media-controls-volume-slider)
 //     +-MediaControlToggleClosedCaptionsButtonElement (-webkit-media-controls-toggle-closed-captions-button)
 //     +-MediaControlCastButtonElement                 (-internal-media-controls-cast-button)
 //     \-MediaControlFullscreenButtonElement           (-webkit-media-controls-fullscreen-button)
 void MediaControls::initializeControls()
 {
     RefPtrWillBeRawPtr<MediaControlOverlayEnclosureElement> overlayEnclosure = MediaControlOverlayEnclosureElement::create(*this);
 
     if (document().settings() && document().settings()->mediaControlsOverlayPlayButtonEnabled()) {
@@ skipping 13 matching lines @@
     RefPtrWillBeRawPtr<MediaControlPanelEnclosureElement> enclosure = MediaControlPanelEnclosureElement::create(*this);
 
     RefPtrWillBeRawPtr<MediaControlPanelElement> panel = MediaControlPanelElement::create(*this);
 
     RefPtrWillBeRawPtr<MediaControlPlayButtonElement> playButton = MediaControlPlayButtonElement::create(*this);
     m_playButton = playButton.get();
     panel->appendChild(playButton.release());
 
     RefPtrWillBeRawPtr<MediaControlTimelineElement> timeline = MediaControlTimelineElement::create(*this);
     m_timeline = timeline.get();
-    panel->appendChild(timeline.release());
+    // In old UX, timeline is before the time / duration text.
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        panel->appendChild(timeline.release());
+    // else we will attach it later.
 
     RefPtrWillBeRawPtr<MediaControlCurrentTimeDisplayElement> currentTimeDisplay = MediaControlCurrentTimeDisplayElement::create(*this);
     m_currentTimeDisplay = currentTimeDisplay.get();
-    m_currentTimeDisplay->hide();
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        m_currentTimeDisplay->hide();
+
     panel->appendChild(currentTimeDisplay.release());
 
     RefPtrWillBeRawPtr<MediaControlTimeRemainingDisplayElement> durationDisplay = MediaControlTimeRemainingDisplayElement::create(*this);
     m_durationDisplay = durationDisplay.get();
     panel->appendChild(durationDisplay.release());
 
+    // In new UX, timeline is after the time / duration text.
+    if (RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        panel->appendChild(timeline.release());
+
     RefPtrWillBeRawPtr<MediaControlMuteButtonElement> muteButton = MediaControlMuteButtonElement::create(*this);
     m_muteButton = muteButton.get();
     panel->appendChild(muteButton.release());
+#if OS(ANDROID)

[DaleCurtis, 2015/06/11 00:54:29]

Seems like this should be more a function of viewport size?

[liberato (no reviews please), 2015/06/11 01:06:52]

it's part of the spec -- hide this on android, since the volume buttons are
readily available.  now, maybe we want to keep the mute button -- that's a good
question.

+    if (RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        m_muteButton->hide();
+#endif
 
     RefPtrWillBeRawPtr<MediaControlVolumeSliderElement> slider = MediaControlVolumeSliderElement::create(*this);
     m_volumeSlider = slider.get();
     panel->appendChild(slider.release());
+#if OS(ANDROID)
+    if (RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        m_volumeSlider->hide();
+#endif
 
     RefPtrWillBeRawPtr<MediaControlToggleClosedCaptionsButtonElement> toggleClosedCaptionsButton = MediaControlToggleClosedCaptionsButtonElement::create(*this);
     m_toggleClosedCaptionsButton = toggleClosedCaptionsButton.get();
     panel->appendChild(toggleClosedCaptionsButton.release());
 
     RefPtrWillBeRawPtr<MediaControlCastButtonElement> castButton = MediaControlCastButtonElement::create(*this, false);
     m_castButton = castButton.get();
     panel->appendChild(castButton.release());
 
     RefPtrWillBeRawPtr<MediaControlFullscreenButtonElement> fullscreenButton = MediaControlFullscreenButtonElement::create(*this);
     m_fullScreenButton = fullscreenButton.get();
     panel->appendChild(fullscreenButton.release());
 
     m_panel = panel.get();
     enclosure->appendChild(panel.release());
 
     m_enclosure = enclosure.get();
     appendChild(enclosure.release());
 }
 
 void MediaControls::reset()
 {
     double duration = mediaElement().duration();
     m_durationDisplay->setInnerText(LayoutTheme::theme().formatMediaControlsTime(duration), ASSERT_NO_EXCEPTION);
     m_durationDisplay->setCurrentValue(duration);
 
+    if (RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+        // Show everything that we might hide.
+        // If we don't have a duration, then hide it.
+        if (std::isfinite(duration))
+            m_durationDisplay->show();
+        else
+            m_durationDisplay->hide();
+        m_currentTimeDisplay->show();
+        m_timeline->show();
+    }
+
     updatePlayState();
 
     updateCurrentTimeDisplay();
 
     m_timeline->setDuration(duration);
     m_timeline->setPosition(mediaElement().currentTime());
 
-    if (!mediaElement().hasAudio())
+    if (!mediaElement().hasAudio()) {
         m_volumeSlider->hide();
-    else
+    } else {
+#if OS(ANDROID)
+        // New UI always hides the volume slider on Android.
+        if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+            m_volumeSlider->show();
+        else
+            m_volumeSlider->hide();
+#else
         m_volumeSlider->show();
+#endif
+    }
     updateVolume();
 
     refreshClosedCaptionsButtonVisibility();
 
     if (mediaElement().hasVideo() && fullscreenIsSupported(document()))
         m_fullScreenButton->show();
     else
         m_fullScreenButton->hide();
 
     refreshCastButtonVisibility();
+    hideControlsForSpace();
     makeOpaque();
 }
 
 LayoutObject* MediaControls::layoutObjectForTextTrackLayout()
 {
     return m_panel->layoutObject();
 }
 
 void MediaControls::show()
 {
@@ skipping 47 matching lines @@
     // controls/shadow tree. (Perform the checks separately to avoid going
     // through all the potential ancestor hosts for the focused element.)
     const bool ignoreFocus = behaviorFlags & IgnoreFocus;
     if (!ignoreFocus && (mediaElement().focused() || contains(document().focusedElement())))
         return false;
     return true;
 }
 
 void MediaControls::playbackStarted()
 {
-    m_currentTimeDisplay->show();
-    m_durationDisplay->hide();
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled()) {
+        m_currentTimeDisplay->show();
+        m_durationDisplay->hide();
+    }
 
     updatePlayState();
     m_timeline->setPosition(mediaElement().currentTime());
     updateCurrentTimeDisplay();
 
     startHideMediaControlsTimer();
 }
 
 void MediaControls::playbackProgressed()
 {
@@ skipping 40 matching lines @@
             mediaElement().togglePlayState();
     }
 }
 
 void MediaControls::updateCurrentTimeDisplay()
 {
     double now = mediaElement().currentTime();
     double duration = mediaElement().duration();
 
     // After seek, hide duration display and show current time.
-    if (now > 0) {
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled() && now > 0) {
         m_currentTimeDisplay->show();
         m_durationDisplay->hide();
     }
 
     // Allow the theme to format the time.
     m_currentTimeDisplay->setInnerText(LayoutTheme::theme().formatMediaControlsCurrentTime(now, duration), IGNORE_EXCEPTION);
     m_currentTimeDisplay->setCurrentValue(now);
 }
 
 void MediaControls::updateVolume()
@@ skipping 59 matching lines @@
             // Check that the cast button actually fits on the bar.
             if (m_fullScreenButton->getBoundingClientRect()->right() > m_panel->getBoundingClientRect()->right()) {
                 m_castButton->hide();
                 tryShowOverlayCastButton();
             }
         }
     } else {
         m_castButton->hide();
         m_overlayCastButton->hide();
     }
+
+    hideControlsForSpace();
 }
 
 void MediaControls::showOverlayCastButton()
 {
     tryShowOverlayCastButton();
     resetHideMediaControlsTimer();
 }
 
 void MediaControls::enteredFullscreen()
 {
@@ skipping 100 matching lines @@
 bool MediaControls::containsRelatedTarget(Event* event)
 {
     if (!event->isMouseEvent())
         return false;
     EventTarget* relatedTarget = toMouseEvent(event)->relatedTarget();
     if (!relatedTarget)
         return false;
     return contains(relatedTarget->toNode());
 }
 
+void MediaControls::hideControlsForSpace()
+{
+    // Hide all controls that don't fit.
+    // The order, in order of decreasing droppiness:
+    // Volume, time, seek bar, cast.
+
+    // In the old UI, don't do this.
+    if (!RuntimeEnabledFeatures::newMediaPlaybackUiEnabled())
+        return;
+
+    int panelWidth = m_panel->clientWidth();
+    if (panelWidth == 0)
+        return;
+
+    // we should just memorize the requirements of each.
+    // cases: Vol Time Slider Cast
+    //            Time Slider Cast
+    //        Vol Time Slider
+    //            Time Slider
+
+    // The cast button is the only variable.  If it's shown, then subtract it
+    // from the available space.  Note that because we don't re-show the other
+    // controls, this is stable.
+    if (m_castButton->isShown())
+        panelWidth -= 48;
+
+    // TODO(liberato): get confirmation from spec on these values.
+    if (panelWidth < 350)
+        m_volumeSlider->hide();
+
+    if (panelWidth < 300) {
+        m_currentTimeDisplay->hide();
+        m_durationDisplay->hide();
+    }
+
+    if (panelWidth < 200)
+        m_timeline->hide();
+
+    if (panelWidth < 150)
+        m_castButton->hide();
+}
+
 DEFINE_TRACE(MediaControls)
 {
     visitor->trace(m_mediaElement);
     visitor->trace(m_panel);
     visitor->trace(m_overlayPlayButton);
     visitor->trace(m_overlayEnclosure);
     visitor->trace(m_playButton);
     visitor->trace(m_currentTimeDisplay);
     visitor->trace(m_timeline);
     visitor->trace(m_muteButton);
     visitor->trace(m_volumeSlider);
     visitor->trace(m_toggleClosedCaptionsButton);
     visitor->trace(m_fullScreenButton);
     visitor->trace(m_durationDisplay);
     visitor->trace(m_enclosure);
     visitor->trace(m_castButton);
     visitor->trace(m_overlayCastButton);
     HTMLDivElement::trace(visitor);
 }
 
 }