Changeset 167828 in webkit


Ignore:
Timestamp:
Apr 25, 2014 3:18:23 PM (10 years ago)
Author:
jer.noble@apple.com
Message:

Support "Live" streams in media controls.
​https://bugs.webkit.org/show_bug.cgi?id=131390

Reviewed by Brent Fulgham.

Source/WebCore:
Test: http/tests/media/hls/video-controls-live-stream.html

Support "Live" streams by adding an isLive property to our media controls.

  • Modules/mediacontrols/mediaControlsApple.css:

(audio::-webkit-media-controls-status-display):
(video:-webkit-full-screen::-webkit-media-controls-status-display):

  • Modules/mediacontrols/mediaControlsApple.js:

(Controller): isLive defaults to false.
(Controller.prototype.setIsLive): Set the isLive property and conditionally reconfigure the controls.
(Controller.prototype.configureInlineControls): Don't add the timeline if we are live.
(Controller.prototype.configureFullScreenControls): Ditto.
(Controller.prototype.updateStatusDisplay): Added.
(Controller.prototype.handleLoadStart): Call updateStatusDisplay().
(Controller.prototype.handleError): Ditto.
(Controller.prototype.handleAbort): Ditto.
(Controller.prototype.handleSuspend): Ditto.
(Controller.prototype.handleStalled): Ditto.
(Controller.prototype.handleWaiting): Ditto.
(Controller.prototype.updateDuration): Ditto.
(Controller.prototype.updateReadyState): Ditto.

LayoutTests:

  • http/tests/media/hls/video-controls-live-stream-expected.txt: Added.
  • http/tests/media/hls/video-controls-live-stream.html: Added.
  • http/tests/media/resources/hls/test-live.php: Added.
  • http/tests/media/resources/hls/test-vod.m3u8: Added.
  • http/tests/media/resources/hls/test.ts: Added.
  • platform/efl/TestExpectations:
  • platform/gtk/TestExpectations:
  • platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt:
  • platform/mac/fast/layers/video-layer-expected.txt:
  • platform/mac/media/media-controls-clone-expected.txt:
  • platform/wincairo/TestExpectations:
Location:
trunk
Files:
6 added
10 edited

Legend:

Unmodified
Added
Removed

  • trunk/LayoutTests/ChangeLog

    r167827 r167828  
     12014-04-11  Jer Noble  <jer.noble@apple.com>
     2
     3        Support "Live" streams in media controls.
     4        https://bugs.webkit.org/show_bug.cgi?id=131390
     5
     6        Reviewed by Brent Fulgham.
     7
     8        * http/tests/media/hls/video-controls-live-stream-expected.txt: Added.
     9        * http/tests/media/hls/video-controls-live-stream.html: Added.
     10        * http/tests/media/resources/hls/test-live.php: Added.
     11        * http/tests/media/resources/hls/test-vod.m3u8: Added.
     12        * http/tests/media/resources/hls/test.ts: Added.
     13        * platform/efl/TestExpectations:
     14        * platform/gtk/TestExpectations:
     15        * platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt:
     16        * platform/mac/fast/layers/video-layer-expected.txt:
     17        * platform/mac/media/media-controls-clone-expected.txt:
     18        * platform/wincairo/TestExpectations:
     19
    1202014-04-25  Tim Horton  <timothy_horton@apple.com>
    221

  • trunk/LayoutTests/platform/efl/TestExpectations

    r167704 r167828  
    18441844webkit.org/b/109570 media/track/regions-webvtt [ Skip ]
    18451845webkit.org/b/109570 media/track/w3c [ Skip ]
     1846
     1847# No HLS support
     1848http/tests/media/hls [ Skip ]

  • trunk/LayoutTests/platform/gtk/TestExpectations

    r167800 r167828  
    409409webkit.org/b/131347 fast/borders/hidpi-border-image-gradient-on-subpixels.html [ ImageOnlyFailure ]
    410410webkit.org/b/131347 fast/borders/hidpi-rounded-border-on-subpixel-position.html [ ImageOnlyFailure ]
     411
     412# No HLS support
     413http/tests/media/hls [ Skip ]
    411414
    412415#////////////////////////////////////////////////////////////////////////////////////////

  • trunk/LayoutTests/platform/mac/fast/hidpi/video-controls-in-hidpi-expected.txt

    r161884 r167828  
    1919layer at (40,156) size 16x16
    2020  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
    21 layer at (57,160) size 221x9
    22   RenderFlexibleBox {DIV} at (49,8) size 221x10
    23 layer at (59,160) size 217x9
    24   RenderFlexibleBox {DIV} at (2,0) size 217x9
     21layer at (180,160) size 98x9
     22  RenderFlexibleBox {DIV} at (171,8) size 99x10
     23layer at (182,160) size 95x9
     24  RenderFlexibleBox {DIV} at (2,0) size 95x9
    2525layer at (285,156) size 16x16
    2626  RenderButton {BUTTON} at (277,5) size 16x16 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/fast/layers/video-layer-expected.txt

    r161884 r167828  
    2424layer at (91,241) size 16x16
    2525  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
    26 layer at (108,245) size 221x9
    27   RenderFlexibleBox {DIV} at (49,8) size 221x10
    28 layer at (110,245) size 217x9
    29   RenderFlexibleBox {DIV} at (2,0) size 217x9
     26layer at (231,245) size 98x9
     27  RenderFlexibleBox {DIV} at (171,8) size 99x10
     28layer at (233,245) size 95x9
     29  RenderFlexibleBox {DIV} at (2,0) size 95x9
    3030layer at (336,241) size 16x16
    3131  RenderButton {BUTTON} at (277,5) size 16x16 [color=#FFFFFF]

  • trunk/LayoutTests/platform/mac/media/media-controls-clone-expected.txt

    r161884 r167828  
    2020layer at (40,138) size 16x16
    2121  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
    22 layer at (57,142) size 221x9
    23   RenderFlexibleBox {DIV} at (49,8) size 221x10
    24 layer at (59,142) size 217x9
    25   RenderFlexibleBox {DIV} at (2,0) size 217x9
     22layer at (180,142) size 98x9
     23  RenderFlexibleBox {DIV} at (171,8) size 99x10
     24layer at (182,142) size 95x9
     25  RenderFlexibleBox {DIV} at (2,0) size 95x9
    2626layer at (285,138) size 16x16
    2727  RenderButton {BUTTON} at (277,5) size 16x16 [color=#FFFFFF]
    … …  
    3434layer at (340,138) size 16x16
    3535  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
    36 layer at (357,142) size 151x9
    37   RenderFlexibleBox {DIV} at (49,8) size 151x10
    38 layer at (359,142) size 147x9
    39   RenderFlexibleBox {DIV} at (2,0) size 147x9
     36layer at (445,142) size 63x9
     37  RenderFlexibleBox {DIV} at (136,8) size 64x10
     38layer at (447,142) size 60x9
     39  RenderFlexibleBox {DIV} at (2,0) size 60x9
    4040layer at (8,162) size 300x150
    4141  RenderFlexibleBox {DIV} at (0,0) size 300x150
    … …  
    4646layer at (40,292) size 16x16
    4747  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
    48 layer at (57,296) size 221x9
    49   RenderFlexibleBox {DIV} at (49,8) size 221x10
    50 layer at (59,296) size 217x9
    51   RenderFlexibleBox {DIV} at (2,0) size 217x9
     48layer at (180,296) size 98x9
     49  RenderFlexibleBox {DIV} at (171,8) size 99x10
     50layer at (182,296) size 95x9
     51  RenderFlexibleBox {DIV} at (2,0) size 95x9
    5252layer at (285,292) size 16x16
    5353  RenderButton {BUTTON} at (277,5) size 16x16 [color=#FFFFFF]
    … …  
    6060layer at (340,292) size 16x16
    6161  RenderButton {BUTTON} at (32,5) size 16x16 [color=#FFFFFF]
    62 layer at (357,296) size 151x9
    63   RenderFlexibleBox {DIV} at (49,8) size 151x10
    64 layer at (359,296) size 147x9
    65   RenderFlexibleBox {DIV} at (2,0) size 147x9
     62layer at (445,296) size 63x9
     63  RenderFlexibleBox {DIV} at (136,8) size 64x10
     64layer at (447,296) size 60x9
     65  RenderFlexibleBox {DIV} at (2,0) size 60x9

  • trunk/LayoutTests/platform/wincairo/TestExpectations

    r167488 r167828  
    28302830# QuickTime plug-in not relevant to this port
    28312831plugins/quicktime-plugin-replacement.html [ Skip ]
     2832
     2833# No HLS support
     2834http/tests/media/hls [ Skip ]

  • trunk/Source/WebCore/ChangeLog

    r167825 r167828  
     12014-04-08  Jer Noble  <jer.noble@apple.com>
     2
     3        Support "Live" streams in media controls.
     4        https://bugs.webkit.org/show_bug.cgi?id=131390
     5
     6        Reviewed by Brent Fulgham.
     7
     8        Test: http/tests/media/hls/video-controls-live-stream.html
     9
     10        Support "Live" streams by adding an isLive property to our media controls.
     11
     12        * Modules/mediacontrols/mediaControlsApple.css:
     13        (audio::-webkit-media-controls-status-display):
     14        (video:-webkit-full-screen::-webkit-media-controls-status-display):
     15        * Modules/mediacontrols/mediaControlsApple.js:
     16        (Controller): isLive defaults to false.
     17        (Controller.prototype.setIsLive): Set the isLive property and conditionally reconfigure the controls.
     18        (Controller.prototype.configureInlineControls): Don't add the timeline if we are live.
     19        (Controller.prototype.configureFullScreenControls): Ditto.
     20        (Controller.prototype.updateStatusDisplay): Added.
     21        (Controller.prototype.handleLoadStart): Call updateStatusDisplay().
     22        (Controller.prototype.handleError): Ditto.
     23        (Controller.prototype.handleAbort): Ditto.
     24        (Controller.prototype.handleSuspend): Ditto.
     25        (Controller.prototype.handleStalled): Ditto.
     26        (Controller.prototype.handleWaiting): Ditto.
     27        (Controller.prototype.updateDuration): Ditto.
     28        (Controller.prototype.updateReadyState): Ditto.
     29
    1302014-04-25  Dean Jackson  <dino@apple.com>
    231

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

    r165676 r167828  
    401401    text-indent: 0;
    402402    text-decoration: none;
    403     text-align: center;
    404 
    405     -webkit-box-flex: 1;
     403    text-align: left;
     404
     405    padding: 0 12px;
     406
     407    -webkit-flex: 1 1 0;
    406408}
    407409video::-webkit-media-controls-timeline,
    … …  
    673675    width: 420px;
    674676    position: absolute;
    675     bottom: 9px;
     677    bottom: 7px;
    676678    left: 8px;
    677679    right: 8px;

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

    r167596 r167828  
    1111    this.controls = {};
    1212    this.listeners = {};
     13    this.isLive = false;
    1314
    1415    this.addVideoListeners();
    … …  
    376377        this.controlsType = type;
    377378
     379        this.reconnectControls();
     380    },
     381
     382    setIsLive: function(live)
     383    {
     384        if (live === this.isLive)
     385            return;
     386        this.isLive = live;
     387
     388        this.updateStatusDisplay();
     389
     390        this.reconnectControls();
     391    },
     392
     393    reconnectControls: function()
     394    {
    378395        this.disconnectControls();
    379396
    380         if (type === Controller.InlineControls)
     397        if (this.controlsType === Controller.InlineControls)
    381398            this.configureInlineControls();
    382         else if (type == Controller.FullScreenControls)
     399        else if (this.controlsType == Controller.FullScreenControls)
    383400            this.configureFullScreenControls();
    384401
    … …  
    398415    configureInlineControls: function()
    399416    {
    400         this.controls.panel.appendChild(this.controls.rewindButton);
     417        if (!this.isLive)
     418            this.controls.panel.appendChild(this.controls.rewindButton);
    401419        this.controls.panel.appendChild(this.controls.playButton);
    402420        this.controls.panel.appendChild(this.controls.statusDisplay);
    403         this.controls.panel.appendChild(this.controls.timelineBox);
    404         this.controls.timelineBox.appendChild(this.controls.currentTime);
    405         this.controls.timelineBox.appendChild(this.controls.thumbnailTrack);
    406         this.controls.thumbnailTrack.appendChild(this.controls.timeline);
    407         this.controls.thumbnailTrack.appendChild(this.controls.thumbnail);
    408         this.controls.thumbnail.appendChild(this.controls.thumbnailImage);
    409         this.controls.timelineBox.appendChild(this.controls.remainingTime);
     421        if (!this.isLive) {
     422            this.controls.panel.appendChild(this.controls.timelineBox);
     423            this.controls.timelineBox.appendChild(this.controls.currentTime);
     424            this.controls.timelineBox.appendChild(this.controls.thumbnailTrack);
     425            this.controls.thumbnailTrack.appendChild(this.controls.timeline);
     426            this.controls.thumbnailTrack.appendChild(this.controls.thumbnail);
     427            this.controls.thumbnail.appendChild(this.controls.thumbnailImage);
     428            this.controls.timelineBox.appendChild(this.controls.remainingTime);
     429        }
    410430        this.controls.panel.appendChild(this.controls.muteBox);
    411431        this.controls.muteBox.appendChild(this.controls.volumeBox);
    … …  
    433453        if (!this.isAudio())
    434454            this.controls.panel.appendChild(this.controls.fullscreenButton);
    435         this.controls.panel.appendChild(this.controls.timelineBox);
    436         this.controls.timelineBox.appendChild(this.controls.currentTime);
    437         this.controls.timelineBox.appendChild(this.controls.thumbnailTrack);
    438         this.controls.thumbnailTrack.appendChild(this.controls.timeline);
    439         this.controls.thumbnailTrack.appendChild(this.controls.thumbnail);
    440         this.controls.thumbnail.appendChild(this.controls.thumbnailImage);
    441         this.controls.timelineBox.appendChild(this.controls.remainingTime);
     455        if (!this.isLive) {
     456            this.controls.panel.appendChild(this.controls.timelineBox);
     457            this.controls.timelineBox.appendChild(this.controls.currentTime);
     458            this.controls.timelineBox.appendChild(this.controls.thumbnailTrack);
     459            this.controls.thumbnailTrack.appendChild(this.controls.timeline);
     460            this.controls.thumbnailTrack.appendChild(this.controls.thumbnail);
     461            this.controls.thumbnail.appendChild(this.controls.thumbnailImage);
     462            this.controls.timelineBox.appendChild(this.controls.remainingTime);
     463        } else
     464            this.controls.panel.appendChild(this.controls.statusDisplay);
    442465    },
    443466
    … …  
    451474    },
    452475
     476    updateStatusDisplay: function(event)
     477    {
     478        if (this.video.error !== null)
     479            this.controls.statusDisplay.innerText = this.UIString('Error');
     480        else if (this.isLive && this.video.readyState >= HTMLMediaElement.HAVE_CURRENT_DATA)
     481            this.controls.statusDisplay.innerText = this.UIString('Live Broadcast');
     482        else if (this.video.networkState === HTMLMediaElement.NETWORK_LOADING)
     483            this.controls.statusDisplay.innerText = this.UIString('Loading');
     484        else
     485            this.controls.statusDisplay.innerText = '';
     486
     487        this.setStatusHidden(!this.isLive && this.video.readyState > HTMLMediaElement.HAVE_NOTHING && !this.video.error);
     488    },
     489
    453490    handleLoadStart: function(event)
    454491    {
    455         this.controls.statusDisplay.innerText = this.UIString('Loading');
     492        this.updateStatusDisplay();
    456493        this.updateProgress();
    457494    },
    … …  
    459496    handleError: function(event)
    460497    {
    461         this.controls.statusDisplay.innerText = this.UIString('Error');
     498        this.updateStatusDisplay();
    462499    },
    463500
    464501    handleAbort: function(event)
    465502    {
    466         this.controls.statusDisplay.innerText = this.UIString('Aborted');
     503        this.updateStatusDisplay();
    467504    },
    468505
    469506    handleSuspend: function(event)
    470507    {
    471         this.controls.statusDisplay.innerText = this.UIString('Suspended');
     508        this.updateStatusDisplay();
    472509    },
    473510
    474511    handleStalled: function(event)
    475512    {
    476         this.controls.statusDisplay.innerText = this.UIString('Stalled');
     513        this.updateStatusDisplay();
    477514        this.updateProgress();
    478515    },
    … …  
    480517    handleWaiting: function(event)
    481518    {
    482         this.controls.statusDisplay.innerText = this.UIString('Waiting');
     519        this.updateStatusDisplay();
    483520    },
    484521
    … …  
    486523    {
    487524        this.updateReadyState();
     525        this.updateDuration();
    488526        this.updateCaptionButton();
    489527        this.updateCaptionContainer();
    … …  
    843881        this.controls.timeline.min = 0;
    844882        this.controls.timeline.max = this.video.duration;
     883
     884        this.setIsLive(this.video.duration === Number.POSITIVE_INFINITY);
    845885    },
    846886
    … …  
    949989    updateReadyState: function()
    950990    {
    951         this.setStatusHidden(this.video.readyState > HTMLMediaElement.HAVE_NOTHING);
     991        this.updateStatusDisplay();
    952992    },
    953993
Note: See TracChangeset for help on using the changeset viewer.