Changeset 181091 in webkit


Ignore:
Timestamp:
Mar 5, 2015 11:52:10 AM (9 years ago)
Author:
dino@apple.com
Message:

[iOS Media] Use a blurry background for media controls
https://bugs.webkit.org/show_bug.cgi?id=142316
<rdar://problem/14911098>

Reviewed by Eric Carlson.

Start using the -webkit-appearance media-controls-light-bar-background
in order to get the blurry background of media controls.

  • Modules/mediacontrols/mediaControlsApple.js: Keep the panel and the

panel background in sync when it comes to hiding and showing. It would
be better if this could be done on a container element in the future.
(Controller.prototype.handlePanelTransitionEnd):
(Controller.prototype.setPlaying):
(Controller.prototype.showControls):
(Controller.prototype.hideControls):

  • Modules/mediacontrols/mediaControlsiOS.css: New background container

with the special appearance. I also renamed "composited-parent" to
"container", which makes more sense.
(video::-webkit-media-controls-panel-container):
(audio::-webkit-media-controls-panel-container):
(video::-webkit-media-controls-panel-background):
(audio::-webkit-media-controls-panel-background):
(video::-webkit-media-controls-panel-background.paused):
(video::-webkit-media-controls-panel):
(audio::-webkit-media-controls-panel):
(video::-webkit-media-controls-panel.paused):
(audio::-webkit-media-controls-optimized-fullscreen-button):
(audio::-webkit-media-controls-timeline):
(audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
(video::-webkit-media-controls-panel-composited-parent): Deleted.
(video::-webkit-media-controls-panel:hover): Deleted.

  • Modules/mediacontrols/mediaControlsiOS.js:

(ControllerIOS.prototype.createControls): Create the new background element.
(ControllerIOS.prototype.addControls):
(ControllerIOS.prototype.set pageScaleFactor): Temporarily disable
this because the background disappears when the zoom factor
is too high - we start tiling the background. This will be addressed
by https://bugs.webkit.org/show_bug.cgi?id=142317.

Location:
trunk/Source/WebCore
Files:
4 edited

Legend:

Unmodified
Added
Removed
  • trunk/Source/WebCore/ChangeLog

    r181090 r181091  
     12015-03-04  Dean Jackson  <dino@apple.com>
     2
     3        [iOS Media] Use a blurry background for media controls
     4        https://bugs.webkit.org/show_bug.cgi?id=142316
     5        <rdar://problem/14911098>
     6
     7        Reviewed by Eric Carlson.
     8
     9        Start using the -webkit-appearance media-controls-light-bar-background
     10        in order to get the blurry background of media controls.
     11
     12        * Modules/mediacontrols/mediaControlsApple.js: Keep the panel and the
     13        panel background in sync when it comes to hiding and showing. It would
     14        be better if this could be done on a container element in the future.
     15        (Controller.prototype.handlePanelTransitionEnd):
     16        (Controller.prototype.setPlaying):
     17        (Controller.prototype.showControls):
     18        (Controller.prototype.hideControls):
     19
     20        * Modules/mediacontrols/mediaControlsiOS.css: New background container
     21        with the special appearance. I also renamed "composited-parent" to
     22        "container", which makes more sense.
     23        (video::-webkit-media-controls-panel-container):
     24        (audio::-webkit-media-controls-panel-container):
     25        (video::-webkit-media-controls-panel-background):
     26        (audio::-webkit-media-controls-panel-background):
     27        (video::-webkit-media-controls-panel-background.paused):
     28        (video::-webkit-media-controls-panel):
     29        (audio::-webkit-media-controls-panel):
     30        (video::-webkit-media-controls-panel.paused):
     31        (audio::-webkit-media-controls-optimized-fullscreen-button):
     32        (audio::-webkit-media-controls-timeline):
     33        (audio::-webkit-media-controls-timeline::-webkit-slider-thumb):
     34        (video::-webkit-media-controls-panel-composited-parent): Deleted.
     35        (video::-webkit-media-controls-panel:hover): Deleted.
     36
     37        * Modules/mediacontrols/mediaControlsiOS.js:
     38        (ControllerIOS.prototype.createControls): Create the new background element.
     39        (ControllerIOS.prototype.addControls):
     40        (ControllerIOS.prototype.set pageScaleFactor): Temporarily disable
     41        this because the background disappears when the zoom factor
     42        is too high - we start tiling the background. This will be addressed
     43        by https://bugs.webkit.org/show_bug.cgi?id=142317.
     44
    1452015-03-05  Myles C. Maxfield  <mmaxfield@apple.com>
    246
  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

    r181085 r181091  
    719719    {
    720720        var opacity = window.getComputedStyle(this.controls.panel).opacity;
    721         if (parseInt(opacity) > 0)
     721        if (parseInt(opacity) > 0) {
    722722            this.controls.panel.classList.remove(this.ClassNames.hidden);
    723         else
     723            if (this.controls.panelBackground)
     724                this.controls.panelBackground.classList.remove(this.ClassNames.hidden);
     725        } else {
    724726            this.controls.panel.classList.add(this.ClassNames.hidden);
     727            if (this.controls.panelBackground)
     728                this.controls.panelBackground.classList.add(this.ClassNames.hidden);
     729        }
    725730    },
    726731
     
    11841189        if (!isPlaying) {
    11851190            this.controls.panel.classList.add(this.ClassNames.paused);
     1191            if (this.controls.panelBackground)
     1192                this.controls.panelBackground.classList.add(this.ClassNames.paused);
    11861193            this.controls.playButton.classList.add(this.ClassNames.paused);
    11871194            this.controls.playButton.setAttribute('aria-label', this.UIString('Play'));
    11881195        } else {
    11891196            this.controls.panel.classList.remove(this.ClassNames.paused);
     1197            if (this.controls.panelBackground)
     1198                this.controls.panelBackground.classList.remove(this.ClassNames.paused);
    11901199            this.controls.playButton.classList.remove(this.ClassNames.paused);
    11911200            this.controls.playButton.setAttribute('aria-label', this.UIString('Pause'));
     
    12041213        this.controls.panel.classList.add(this.ClassNames.show);
    12051214        this.controls.panel.classList.remove(this.ClassNames.hidden);
     1215
     1216        if (this.controls.panelBackground) {
     1217            this.controls.panelBackground.classList.add(this.ClassNames.show);
     1218            this.controls.panelBackground.classList.remove(this.ClassNames.hidden);
     1219        }
    12061220    },
    12071221
     
    12091223    {
    12101224        this.controls.panel.classList.remove(this.ClassNames.show);
     1225        if (this.controls.panelBackground)
     1226            this.controls.panelBackground.classList.remove(this.ClassNames.show);
    12111227    },
    12121228
  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css

    r181085 r181091  
    9494}
    9595
    96 video::-webkit-media-controls-panel-composited-parent {
     96video::-webkit-media-controls-panel-container {
    9797    -webkit-transform: translateZ(0);
    9898    width: 100%;
    9999    direction: ltr;
     100    height: 50px;
     101    position: absolute;
     102    bottom: 0;
     103}
     104
     105audio::-webkit-media-controls-panel-container {
     106    -webkit-transform: translateZ(0);
     107    width: 100%;
     108    direction: ltr;
     109    height: 39px;
     110    position: absolute;
     111    bottom: 0;
     112}
     113
     114video::-webkit-media-controls-panel-background {
     115    -webkit-transform: translateZ(0);
     116    width: 101%; /* Due to some rounding issues we make this a little bit wider than should be necessary. */
     117    height: 51px; /* And taller. */
     118    -webkit-appearance: media-controls-light-bar-background;
     119    transition: opacity 0.25s linear;
     120    opacity: 0;
     121}
     122
     123audio::-webkit-media-controls-panel-background {
     124    display: none;
     125}
     126
     127video::-webkit-media-controls-panel-background.show,
     128video::-webkit-media-controls-panel-background.paused {
     129    opacity: 1;
    100130}
    101131
     
    105135    position: absolute;
    106136    bottom: 0;
     137    width: 100%;
     138    padding: 0;
    107139
    108140    -webkit-user-select: none;
     
    125157video::-webkit-media-controls-panel {
    126158    height: 50px;
    127     width: 100%;
    128159    opacity: 0;
    129     padding: 0;
    130     background-color: rgba(255, 255, 255, 0.6);
     160    -webkit-transform: translate3d(0, 0, 0);
    131161}
    132162
    133163audio::-webkit-media-controls-panel {
    134164    height: 39px;
    135     width: 100%;
    136     padding: 0;
    137165    background-color: rgba(228, 228, 228, 1);
    138166}
    139167
    140168video::-webkit-media-controls-panel.show,
    141 video::-webkit-media-controls-panel.paused,
    142 video::-webkit-media-controls-panel:hover {
     169video::-webkit-media-controls-panel.paused {
    143170    opacity: 1;
    144171}
     
    204231    mix-blend-mode: plus-darker;
    205232    opacity: 0.55;
     233    -webkit-transform: translate3d(0, 0, 0);
    206234}
    207235
     
    333361    border-radius: 0 !important;
    334362    box-sizing: content-box !important;
     363    -webkit-transform: translate3d(0, 0, 0);
    335364}
    336365
     
    353382    background-color: transparent !important;
    354383    border: none !important;
    355 
    356     /* rotateZ() forces the layer into compositing mode. Slider
    357        thumbs are small, so forcing a compositing layer is inexpensive,
    358        and it keeps the slider from having to repaint while sliding. */
    359384    -webkit-transform: rotateZ(0deg);
    360385}
  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

    r180906 r181091  
    159159        Controller.prototype.createControls.call(this);
    160160
    161         var panelCompositedParent = this.controls.panelCompositedParent = document.createElement('div');
    162         panelCompositedParent.setAttribute('pseudo', '-webkit-media-controls-panel-composited-parent');
     161        var panelContainer = this.controls.panelContainer = document.createElement('div');
     162        panelContainer.setAttribute('pseudo', '-webkit-media-controls-panel-container');
     163
     164        var panelBackground = this.controls.panelBackground = document.createElement('div');
     165        panelBackground.setAttribute('pseudo', '-webkit-media-controls-panel-background');
    163166
    164167        var spacer = this.controls.spacer = document.createElement('div');
     
    273276    addControls: function() {
    274277        this.base.appendChild(this.controls.inlinePlaybackPlaceholder);
    275         this.base.appendChild(this.controls.panelCompositedParent);
    276         this.controls.panelCompositedParent.appendChild(this.controls.panel);
     278        this.base.appendChild(this.controls.panelContainer);
     279        this.controls.panelContainer.appendChild(this.controls.panelBackground);
     280        this.controls.panelContainer.appendChild(this.controls.panel);
    277281        this.setNeedsTimelineMetricsUpdate();
    278282    },
     
    650654        this._pageScaleFactor = newScaleFactor;
    651655
    652         if (newScaleFactor) {
    653             var scaleValue = 1 / newScaleFactor;
    654             var scaleTransform = "scale(" + scaleValue + ")";
    655             if (this.controls.startPlaybackButton)
    656                 this.controls.startPlaybackButton.style.webkitTransform = scaleTransform;
    657             if (this.controls.panel) {
    658                 var bottomAligment = -2 * scaleValue;
    659                 this.controls.panel.style.bottom = bottomAligment + "px";
    660                 this.controls.panel.style.paddingBottom = -(newScaleFactor * bottomAligment) + "px";
    661                 this.controls.panel.style.width = Math.ceil(newScaleFactor * 100) + "%";
    662                 this.controls.panel.style.webkitTransform = scaleTransform;
    663                 this.setNeedsTimelineMetricsUpdate();
    664                 this.updateProgress();
    665                 this.scheduleUpdateLayoutForDisplayedWidth();
    666             }
    667         }
     656        // FIXME: this should react to the scale change by
     657        // unscaling the controls panel. However, this
     658        // hits a bug with the backdrop blur layer getting
     659        // too big and moving to a tiled layer.
     660        // https://bugs.webkit.org/show_bug.cgi?id=142317
    668661    },
    669662
Note: See TracChangeset for help on using the changeset viewer.