Changeset 184722 in webkit


Ignore:
Timestamp:
May 21, 2015 10:52:38 AM (9 years ago)
Author:
roger_fong@apple.com
Message:

Media Controls stop updating after hovering for a few seconds.
​https://bugs.webkit.org/show_bug.cgi?id=144770.
<rdar://problem/19823121>

Reviewed by Jer Noble.

  • Modules/mediacontrols/mediaControlsApple.js:

(Controller.prototype.createBase):
We should never hide controls immediately as a result of mousing out of the controls.
It should only happen when the mouse leaves the video entirely.
(Controller.prototype.updateTimelineMetricsIfNeeded):
Don’t update if controls are hidden, timeline dimensions will be 0.
(Controller.prototype.handlePanelTransitionEnd):
Instead of adjusting visibility via adding and removing classes,
remove controls entirely from the tree.
(Controller.prototype.showControls):
Add controls back into the tree when showing controls.
(Controller.prototype.updateForShowingControls):
Helper method for showControls.
(Controller.prototype.controlsAreHidden):
Controls also hidden if removed from tree.

Remove forceUpdate logic, no longer necessary.
(Controller.prototype.handleDurationChange):
(Controller.prototype.updateProgress):
(Controller.prototype.updateTime):

Override methods to use add and remove panelContainer for iOS.

  • Modules/mediacontrols/mediaControlsiOS.js:

(ControllerIOS.prototype.handlePanelTransitionEnd):
(ControllerIOS.prototype.showControls):
(ControllerIOS.prototype.controlsAreHidden):

Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r184720 r184722  
     12015-05-21  Roger Fong  <roger_fong@apple.com>
     2
     3        Media Controls stop updating after hovering for a few seconds.
     4        https://bugs.webkit.org/show_bug.cgi?id=144770.
     5        <rdar://problem/19823121>
     6
     7        Reviewed by Jer Noble.
     8
     9        * Modules/mediacontrols/mediaControlsApple.js:
     10        (Controller.prototype.createBase):
     11        We should never hide controls immediately as a result of mousing out of the controls.
     12        It should only happen when the mouse leaves the video entirely.
     13        (Controller.prototype.updateTimelineMetricsIfNeeded):
     14        Don’t update if controls are hidden, timeline dimensions will be 0.
     15        (Controller.prototype.handlePanelTransitionEnd):
     16        Instead of adjusting visibility via adding and removing classes,
     17        remove controls entirely from the tree.
     18        (Controller.prototype.showControls):
     19        Add controls back into the tree when showing controls.
     20        (Controller.prototype.updateForShowingControls):
     21        Helper method for showControls.
     22        (Controller.prototype.controlsAreHidden):
     23        Controls also hidden if removed from tree.
     24
     25        Remove forceUpdate logic, no longer necessary.
     26        (Controller.prototype.handleDurationChange):
     27        (Controller.prototype.updateProgress):
     28        (Controller.prototype.updateTime):
     29
     30        Override methods to use add and remove panelContainer for iOS.
     31        * Modules/mediacontrols/mediaControlsiOS.js:
     32        (ControllerIOS.prototype.handlePanelTransitionEnd):
     33        (ControllerIOS.prototype.showControls):
     34        (ControllerIOS.prototype.controlsAreHidden):
     35
    1362015-05-21  Chris Dumez  <cdumez@apple.com>
    237

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsApple.js

    r184702 r184722  
    269269        base.setAttribute('pseudo', '-webkit-media-controls');
    270270        this.listenFor(base, 'mousemove', this.handleWrapperMouseMove);
    271         this.listenFor(base, 'mouseout', this.handleWrapperMouseOut);
     271        this.listenFor(this.video, 'mouseout', this.handleWrapperMouseOut);
    272272        if (this.host.textTrackContainer)
    273273            base.appendChild(this.host.textTrackContainer);
    … …  
    292292    },
    293293
     294    scheduleUpdateLayoutForDisplayedWidth: function()
     295    {
     296        setTimeout(this.updateLayoutForDisplayedWidth.bind(this), 0);
     297    },
     298
    294299    updateTimelineMetricsIfNeeded: function()
    295300    {
    296         if (this.timelineMetricsNeedsUpdate) {
     301        if (this.timelineMetricsNeedsUpdate && !this.controlsAreHidden()) {
    297302            this.timelineLeft = this.controls.timeline.offsetLeft;
    298303            this.timelineWidth = this.controls.timeline.offsetWidth;
    … …  
    685690    {
    686691        this.updateDuration();
    687         this.updateTime(true);
    688         this.updateProgress(true);
     692        this.updateTime();
     693        this.updateProgress();
    689694    },
    690695
    … …  
    819824    {
    820825        var opacity = window.getComputedStyle(this.controls.panel).opacity;
    821         if (parseInt(opacity) > 0) {
    822             this.controls.panel.classList.remove(this.ClassNames.hidden);
    823             if (this.controls.panelBackground)
    824                 this.controls.panelBackground.classList.remove(this.ClassNames.hidden);
    825         } else if (!this.controlsAlwaysVisible()) {
    826             this.controls.panel.classList.add(this.ClassNames.hidden);
    827             if (this.controls.panelBackground)
    828                 this.controls.panelBackground.classList.add(this.ClassNames.hidden);
     826        if (!parseInt(opacity) && !this.controlsAlwaysVisible()) {
     827            this.base.removeChild(this.controls.inlinePlaybackPlaceholder);
     828            this.base.removeChild(this.controls.panel);
    829829        }
    830830    },
    … …  
    11501150    },
    11511151
    1152     updateProgress: function(forceUpdate)
    1153     {
    1154         if (!forceUpdate && this.controlsAreHidden())
    1155             return;
    1156 
     1152    updateProgress: function()
     1153    {
    11571154        this.updateTimelineMetricsIfNeeded();
    11581155        this.drawTimelineBackground();
    … …  
    13611358    },
    13621359
    1363     showControls: function()
    1364     {
    1365         this.updateShouldListenForPlaybackTargetAvailabilityEvent();
    1366         if (this.showInlinePlaybackPlaceholderOnly())
    1367             return;
    1368 
     1360    updateForShowingControls: function()
     1361    {
    13691362        this.updateLayoutForDisplayedWidth();
    13701363        this.setNeedsTimelineMetricsUpdate();
    1371         this.updateTime(true);
    1372         this.updateProgress(true);
     1364        this.updateTime();
     1365        this.updateProgress();
    13731366        this.drawVolumeBackground();
    13741367        this.drawTimelineBackground();
    13751368        this.controls.panel.classList.add(this.ClassNames.show);
    13761369        this.controls.panel.classList.remove(this.ClassNames.hidden);
    1377 
    13781370        if (this.controls.panelBackground) {
    13791371            this.controls.panelBackground.classList.add(this.ClassNames.show);
    13801372            this.controls.panelBackground.classList.remove(this.ClassNames.hidden);
     1373        }
     1374    },
     1375
     1376    showControls: function()
     1377    {
     1378        this.updateShouldListenForPlaybackTargetAvailabilityEvent();
     1379        if (this.showInlinePlaybackPlaceholderOnly())
     1380            return;
     1381
     1382        this.updateForShowingControls();
     1383        if (this.shouldHaveControls() && !this.controls.panel.parentElement) {
     1384            this.base.appendChild(this.controls.inlinePlaybackPlaceholder);
     1385            this.base.appendChild(this.controls.panel);
    13811386        }
    13821387    },
    … …  
    14571462    controlsAreHidden: function()
    14581463    {
    1459         return !this.controlsAlwaysVisible() && !this.controls.panel.classList.contains(this.ClassNames.show);
     1464        return !this.controlsAlwaysVisible() && !this.controls.panel.classList.contains(this.ClassNames.show) && !this.controls.panel.parentElement;
    14601465    },
    14611466
    … …  
    14741479    },
    14751480
    1476     updateTime: function(forceUpdate)
    1477     {
    1478         if (!forceUpdate && this.controlsAreHidden())
    1479             return;
    1480 
     1481    updateTime: function()
     1482    {
    14811483        var currentTime = this.video.currentTime;
    14821484        var timeRemaining = currentTime - this.video.duration;

  • trunk/Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js

    r184702 r184722  
    191191    },
    192192
     193    controlsAreHidden: function()
     194    {
     195        // Controls are only ever actually hidden when they are removed from the tree
     196        return !this.controls.panelContainer.parentElement;
     197    },
     198
    193199    addControls: function() {
    194200        this.base.appendChild(this.controls.inlinePlaybackPlaceholder);
    … …  
    369375    },
    370376
     377    handlePanelTransitionEnd: function(event)
     378    {
     379        var opacity = window.getComputedStyle(this.controls.panel).opacity;
     380        if (!parseInt(opacity) && !this.controlsAlwaysVisible()) {
     381            this.base.removeChild(this.controls.inlinePlaybackPlaceholder);
     382            this.base.removeChild(this.controls.panelContainer);
     383        }
     384    },
     385
    371386    presentationMode: function() {
    372387        if ('webkitPresentationMode' in this.video)
    … …  
    522537        else
    523538            this.showControls();
     539    },
     540
     541    showControls: function()
     542    {
     543        this.updateShouldListenForPlaybackTargetAvailabilityEvent();
     544        if (this.showInlinePlaybackPlaceholderOnly())
     545            return;
     546       
     547        this.updateForShowingControls();
     548        if (this.shouldHaveControls() && !this.controls.panelContainer.parentElement) {
     549            this.base.appendChild(this.controls.inlinePlaybackPlaceholder);
     550            this.base.appendChild(this.controls.panelContainer);
     551        }
    524552    },
    525553
Note: See TracChangeset for help on using the changeset viewer.