Changeset 228718 in webkit


Ignore:
Timestamp:
Feb 19, 2018 4:37:42 PM (6 years ago)
Author:
graouts@webkit.org
Message:

[Modern Media Controls] Implement a compact set of media controls
https://bugs.webkit.org/show_bug.cgi?id=182937
<rdar://problem/37682257>

Reviewed by Eric Carlson.

Source/WebCore:

We add a new type of media controls used when we need stripped down and compact controls. The new
CompactMediaControls only show a play/pause button and an invalid placard and disregard all media
events that are not relevant to the display of these controls.

To distinguish cases where we need to show compact media controls, we expose a new property on
MediaControlsHost called "compactMode".

Tests: media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html

media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html

  • Modules/mediacontrols/MediaControlsHost.cpp:

(WebCore::MediaControlsHost::base64StringForIconNameAndType const):
(WebCore::MediaControlsHost::compactMode const):

  • Modules/mediacontrols/MediaControlsHost.h:

(WebCore::MediaControlsHost::setSimulateCompactMode):

  • Modules/mediacontrols/MediaControlsHost.idl:
  • Modules/modern-media-controls/controls/compact-media-controls.js: Added.

(CompactMediaControls.prototype.get scaleFactor):
(CompactMediaControls.prototype.set scaleFactor):
(CompactMediaControls.prototype.get shouldCenterControlsVertically):
(CompactMediaControls.prototype.set shouldCenterControlsVertically):
(CompactMediaControls.prototype.get placard):
(CompactMediaControls.prototype.set placard):
(CompactMediaControls.prototype.layout):
(CompactMediaControls.prototype.commitProperty):

  • Modules/modern-media-controls/controls/icon-service.js:

(const.iconService.new.IconService.prototype._fileNameAndPlatformForIconAndLayoutTraits):
(const.iconService.new.IconService):

  • Modules/modern-media-controls/controls/inline-media-controls.js:
  • Modules/modern-media-controls/controls/layout-item.js:
  • Modules/modern-media-controls/js-files:
  • Modules/modern-media-controls/main.js:
  • Modules/modern-media-controls/media/media-controller.js:

(MediaController.prototype.get layoutTraits):
(MediaController.prototype._supportingObjectClasses): Compute the set of MediaControllerSupport classes based
on the layout traits such that in compact mode we only return PlacardSupport and PlaybackSupport.
(MediaController.prototype._updateControlsIfNeeded):
(MediaController.prototype._controlsClassForLayoutTraits):
(MediaController.prototype._shouldControlsBeAvailable):

  • Modules/modern-media-controls/media/placard-support.js:

(PlacardSupport.prototype.get mediaEvents): Only track the "error" event in compact mode since this is the only
relevant placard.

  • Modules/modern-media-controls/media/playback-support.js:

(PlaybackSupport.prototype.syncControl): Only show or hide the play/pause button based on the playback state
when in compact mode.
(PlaybackSupport):

  • WebCore.xcodeproj/project.pbxproj:

LayoutTests:

Add new tests that cover the basic properties and layout under different situations of the new CompactMediaControls.

  • media/modern-media-controls/compact-media-controls/compact-media-controls-constructor-expected.txt: Added.
  • media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html: Added.
  • media/modern-media-controls/compact-media-controls/compact-media-controls-layout-expected.txt: Added.
  • media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html: Added.
Location:
trunk
Files:
6 added
14 edited

Legend:

Unmodified
Added
Removed
  • trunk/LayoutTests/ChangeLog

    r228717 r228718  
     12018-02-19  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Implement a compact set of media controls
     4        https://bugs.webkit.org/show_bug.cgi?id=182937
     5        <rdar://problem/37682257>
     6
     7        Reviewed by Eric Carlson.
     8
     9        Add new tests that cover the basic properties and layout under different situations of the new CompactMediaControls.
     10
     11        * media/modern-media-controls/compact-media-controls/compact-media-controls-constructor-expected.txt: Added.
     12        * media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html: Added.
     13        * media/modern-media-controls/compact-media-controls/compact-media-controls-layout-expected.txt: Added.
     14        * media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html: Added.
     15
    1162018-02-19  Antoine Quint  <graouts@apple.com>
    217
  • trunk/Source/WebCore/ChangeLog

    r228717 r228718  
     12018-02-19  Antoine Quint  <graouts@apple.com>
     2
     3        [Modern Media Controls] Implement a compact set of media controls
     4        https://bugs.webkit.org/show_bug.cgi?id=182937
     5        <rdar://problem/37682257>
     6
     7        Reviewed by Eric Carlson.
     8
     9        We add a new type of media controls used when we need stripped down and compact controls. The new
     10        CompactMediaControls only show a play/pause button and an invalid placard and disregard all media
     11        events that are not relevant to the display of these controls.
     12
     13        To distinguish cases where we need to show compact media controls, we expose a new property on
     14        MediaControlsHost called "compactMode".
     15
     16        Tests: media/modern-media-controls/compact-media-controls/compact-media-controls-constructor.html
     17               media/modern-media-controls/compact-media-controls/compact-media-controls-layout.html
     18
     19        * Modules/mediacontrols/MediaControlsHost.cpp:
     20        (WebCore::MediaControlsHost::base64StringForIconNameAndType const):
     21        (WebCore::MediaControlsHost::compactMode const):
     22        * Modules/mediacontrols/MediaControlsHost.h:
     23        (WebCore::MediaControlsHost::setSimulateCompactMode):
     24        * Modules/mediacontrols/MediaControlsHost.idl:
     25        * Modules/modern-media-controls/controls/compact-media-controls.js: Added.
     26        (CompactMediaControls.prototype.get scaleFactor):
     27        (CompactMediaControls.prototype.set scaleFactor):
     28        (CompactMediaControls.prototype.get shouldCenterControlsVertically):
     29        (CompactMediaControls.prototype.set shouldCenterControlsVertically):
     30        (CompactMediaControls.prototype.get placard):
     31        (CompactMediaControls.prototype.set placard):
     32        (CompactMediaControls.prototype.layout):
     33        (CompactMediaControls.prototype.commitProperty):
     34        * Modules/modern-media-controls/controls/icon-service.js:
     35        (const.iconService.new.IconService.prototype._fileNameAndPlatformForIconAndLayoutTraits):
     36        (const.iconService.new.IconService):
     37        * Modules/modern-media-controls/controls/inline-media-controls.js:
     38        * Modules/modern-media-controls/controls/layout-item.js:
     39        * Modules/modern-media-controls/js-files:
     40        * Modules/modern-media-controls/main.js:
     41        * Modules/modern-media-controls/media/media-controller.js:
     42        (MediaController.prototype.get layoutTraits):
     43        (MediaController.prototype._supportingObjectClasses): Compute the set of MediaControllerSupport classes based
     44        on the layout traits such that in compact mode we only return PlacardSupport and PlaybackSupport.
     45        (MediaController.prototype._updateControlsIfNeeded):
     46        (MediaController.prototype._controlsClassForLayoutTraits):
     47        (MediaController.prototype._shouldControlsBeAvailable):
     48        * Modules/modern-media-controls/media/placard-support.js:
     49        (PlacardSupport.prototype.get mediaEvents): Only track the "error" event in compact mode since this is the only
     50        relevant placard.
     51        * Modules/modern-media-controls/media/playback-support.js:
     52        (PlaybackSupport.prototype.syncControl): Only show or hide the play/pause button based on the playback state
     53        when in compact mode.
     54        (PlaybackSupport):
     55        * WebCore.xcodeproj/project.pbxproj:
     56
    1572018-02-19  Antoine Quint  <graouts@apple.com>
    258
  • trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.cpp

    r228218 r228718  
    284284String MediaControlsHost::base64StringForIconNameAndType(const String& iconName, const String& iconType) const
    285285{
    286 
    287286    return RenderTheme::singleton().mediaControlsBase64StringForIconNameAndType(iconName, iconType);
    288287}
     
    293292}
    294293
    295 }
    296 
     294bool MediaControlsHost::compactMode() const
     295{
     296    if (m_simulateCompactMode)
     297        return true;
     298
     299#if ENABLE(EXTRA_ZOOM_MODE)
     300    return true;
     301#else
     302    return false;
    297303#endif
     304}
     305
     306}
     307
     308#endif
  • trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.h

    r218881 r228718  
    8282    DeviceType externalDeviceType() const;
    8383
     84    bool compactMode() const;
     85    void setSimulateCompactMode(bool value) { m_simulateCompactMode = value; }
     86
    8487    bool controlsDependOnPageScaleFactor() const;
    8588    void setControlsDependOnPageScaleFactor(bool v);
     
    9699    HTMLMediaElement* m_mediaElement;
    97100    RefPtr<MediaControlTextTrackContainerElement> m_textTrackContainer;
     101    bool m_simulateCompactMode { false };
    98102};
    99103
  • trunk/Source/WebCore/Modules/mediacontrols/MediaControlsHost.idl

    r218853 r228718  
    5050    readonly attribute boolean isInMediaDocument;
    5151    readonly attribute boolean shouldForceControlsDisplay;
     52    readonly attribute boolean compactMode;
    5253
    5354    readonly attribute DOMString externalDeviceDisplayName;
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/icon-service.js

    r228471 r228718  
    8989        if (layoutTraits & LayoutTraits.macOS)
    9090            platform = "macOS";
    91         else if (layoutTraits & LayoutTraits.iOS)
     91        else if (layoutTraits & LayoutTraits.iOS || layoutTraits & LayoutTraits.Compact)
    9292            platform = "iOS";
    9393        else
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/inline-media-controls.js

    r228010 r228718  
    2626const InsideMargin = 6; // Minimum margin to guarantee around all controls, this constant needs to stay in sync with the --inline-controls-inside-margin CSS variable.
    2727const BottomControlsBarHeight = 31; // This constant needs to stay in sync with the --inline-controls-bar-height CSS variable.
    28 const MinimumSizeToShowAnyControl = 47;
    29 const MaximumSizeToShowSmallProminentControl = 88;
    3028
    3129class InlineMediaControls extends MediaControls
  • trunk/Source/WebCore/Modules/modern-media-controls/controls/layout-item.js

    r217823 r228718  
    2828    macOS          : 1 << 0,
    2929    iOS            : 1 << 1,
    30     Fullscreen     : 1 << 2
     30    Fullscreen     : 1 << 2,
     31    Compact        : 1 << 3
    3132};
    3233
  • trunk/Source/WebCore/Modules/modern-media-controls/js-files

    r217823 r228718  
    4040controls/invalid-placard.js
    4141controls/pip-placard.js
     42controls/compact-media-controls.js
    4243media/media-controller-support.js
    4344media/airplay-support.js
     
    6465media/media-document-controller.js
    6566media/media-controller.js
    66 
  • trunk/Source/WebCore/Modules/modern-media-controls/main.js

    r228471 r228718  
    2525
    2626const SkipSeconds = 15;
     27const MinimumSizeToShowAnyControl = 47;
     28const MaximumSizeToShowSmallProminentControl = 88;
    2729
    2830let mediaControlsHost;
  • trunk/Source/WebCore/Modules/modern-media-controls/media/media-controller.js

    r228519 r228718  
    9797    get layoutTraits()
    9898    {
     99        if (this.host && this.host.compactMode)
     100            return LayoutTraits.Compact;
     101
    99102        let traits = window.navigator.platform === "MacIntel" ? LayoutTraits.macOS : LayoutTraits.iOS;
    100103        if (this.isFullscreen)
     
    179182    // Private
    180183
     184    _supportingObjectClasses()
     185    {
     186        if (this.layoutTraits & LayoutTraits.Compact)
     187            return [PlacardSupport, PlaybackSupport];
     188
     189        return [AirplaySupport, AudioSupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, SkipForwardSupport, StartSupport, StatusSupport, TimeControlSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport];
     190    }
     191
    181192    _updateControlsIfNeeded()
    182193    {
     
    200211        this.controls.delegate = this;
    201212
    202         if (this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
     213        if (this.controls.autoHideController && this.shadowRoot.host && this.shadowRoot.host.dataset.autoHideDelay)
    203214            this.controls.autoHideController.autoHideDelay = this.shadowRoot.host.dataset.autoHideDelay;
    204215
     
    213224        this._updateControlsSize();
    214225
    215         this._supportingObjects = [AirplaySupport, AudioSupport, ControlsVisibilitySupport, FullscreenSupport, MuteSupport, PiPSupport, PlacardSupport, PlaybackSupport, ScrubbingSupport, SeekBackwardSupport, SeekForwardSupport, SkipBackSupport, SkipForwardSupport, StartSupport, StatusSupport, TimeControlSupport, TracksSupport, VolumeSupport, VolumeDownSupport, VolumeUpSupport].map(SupportClass => {
    216             return new SupportClass(this);
    217         }, this);
     226        this._supportingObjects = this._supportingObjectClasses().map(SupportClass => new SupportClass(this), this);
    218227
    219228        this.controls.shouldUseSingleBarLayout = this.controls instanceof InlineMediaControls && this.isYouTubeEmbedWithTitle;
     
    279288    _controlsClassForLayoutTraits(layoutTraits)
    280289    {
     290        if (layoutTraits & LayoutTraits.Compact)
     291            return CompactMediaControls;
    281292        if (layoutTraits & LayoutTraits.iOS)
    282293            return IOSInlineMediaControls;
     
    308319    _shouldControlsBeAvailable()
    309320    {
     321        // Controls are always available with compact layout.
     322        if (this.layoutTraits & LayoutTraits.Compact)
     323            return true;
     324
    310325        // Controls are always available while in fullscreen on macOS, and they are never available when in fullscreen on iOS.
    311326        if (this.isFullscreen)
  • trunk/Source/WebCore/Modules/modern-media-controls/media/placard-support.js

    r228445 r228718  
    3737    get mediaEvents()
    3838    {
     39        if (this.mediaController.layoutTraits & LayoutTraits.Compact)
     40            return ["error"];
     41
    3942        return ["loadstart", "error", "webkitpresentationmodechanged", "webkitcurrentplaybacktargetiswirelesschanged"];
    4043    }
  • trunk/Source/WebCore/Modules/modern-media-controls/media/playback-support.js

    r212573 r228718  
    4646    syncControl()
    4747    {
    48         this.control.playing = !this.mediaController.media.paused;
     48        const isPaused = this.mediaController.media.paused;
     49
     50        // We always show the play button when the media is paused with compact layout.
     51        if (this.mediaController.layoutTraits & LayoutTraits.Compact)
     52            this.control.visible = isPaused;
     53        else
     54            this.control.playing = !isPaused;
    4955    }
    5056
  • trunk/Source/WebCore/WebCore.xcodeproj/project.pbxproj

    r228662 r228718  
    89978997                71DCB6FF1568197600862271 /* JSSVGZoomAndPan.cpp */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.cpp.cpp; path = JSSVGZoomAndPan.cpp; sourceTree = "<group>"; };
    89988998                71DCB7001568197600862271 /* JSSVGZoomAndPan.h */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.c.h; path = JSSVGZoomAndPan.h; sourceTree = "<group>"; };
     8999                71DE2794203A9C1C0058CB51 /* compact-media-controls.js */ = {isa = PBXFileReference; fileEncoding = 4; lastKnownFileType = sourcecode.javascript; path = "compact-media-controls.js"; sourceTree = "<group>"; };
    89999000                71E2183817359FB8006E6E4D /* PlugInsResources.h */ = {isa = PBXFileReference; explicitFileType = sourcecode.c.h; fileEncoding = 4; path = PlugInsResources.h; sourceTree = "<group>"; };
    90009001                71E2183917359FB8006E6E4D /* PlugInsResourcesData.cpp */ = {isa = PBXFileReference; explicitFileType = sourcecode.cpp.cpp; fileEncoding = 4; path = PlugInsResourcesData.cpp; sourceTree = "<group>"; };
     
    1907019071                                716FA0DE1DB26591007323CC /* buttons-container.css */,
    1907119072                                716FA0DF1DB26591007323CC /* buttons-container.js */,
     19073                                71DE2794203A9C1C0058CB51 /* compact-media-controls.js */,
    1907219074                                717F618B1E43D61A00F37024 /* controls-bar.css */,
    1907319075                                710FA74B1DEE576D004C715E /* controls-bar.js */,
     
    3071130713                        runOnlyForDeploymentPostprocessing = 0;
    3071230714                        shellPath = /bin/sh;
    30713                         shellScript = "SRC_DIR=\"$SRCROOT/Modules/modern-media-controls\"\nDST_DIR=\"$BUILT_PRODUCTS_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/modern-media-controls\"\n\nmkdir -p \"$DST_DIR\"\n\nif [ \"${PLATFORM_NAME}\" == \"macosx\" ]; then\nIMG_OS_PREFIX=\"macOS\"\nfi\n\nif [ \"${PLATFORM_NAME}\" == \"iphoneos\" ] || [ \"${PLATFORM_NAME}\" == \"iphonesimulator\" ]; then\nIMG_OS_PREFIX=\"iOS\"\nfi\n\nif [ -n \"$IMG_OS_PREFIX\" ]; then\nrsync -aq --exclude \".svn\" --exclude \".DS_Store\" \"$SRC_DIR/images/$IMG_OS_PREFIX/\" \"$DST_DIR/images\"\nfi\n\ncd \"$SRC_DIR\"\ncat controls/*.css > \"$DST_DIR/modern-media-controls.css\"\n             cat `cat js-files` > \"$DST_DIR/modern-media-controls.js\"\n";
     30715                        shellScript = "SRC_DIR=\"$SRCROOT/Modules/modern-media-controls\"\nDST_DIR=\"$BUILT_PRODUCTS_DIR/$UNLOCALIZED_RESOURCES_FOLDER_PATH/modern-media-controls\"\n\nmkdir -p \"$DST_DIR\"\n\nif [ \"${PLATFORM_NAME}\" == \"macosx\" ]; then\n    IMG_OS_PREFIX=\"macOS\"\nelse\n    IMG_OS_PREFIX=\"iOS\"\nfi\n\nif [ -n \"$IMG_OS_PREFIX\" ]; then\nrsync -aq --exclude \".svn\" --exclude \".DS_Store\" \"$SRC_DIR/images/$IMG_OS_PREFIX/\" \"$DST_DIR/images\"\nfi\n\ncd \"$SRC_DIR\"\ncat controls/*.css > \"$DST_DIR/modern-media-controls.css\"\n             cat `cat js-files` > \"$DST_DIR/modern-media-controls.js\"\n";
    3071430716                };
    3071530717                A5E79CEC1E67F2CF00FB8153 /* Make Frameworks Symbolic Link */ = {
Note: See TracChangeset for help on using the changeset viewer.