- Revision
- 257131
- Author
- [email protected]
- Date
- 2020-02-21 02:26:34 -0800 (Fri, 21 Feb 2020)
Log Message
[WPE] Use custom theme style for media controls
https://bugs.webkit.org/show_bug.cgi?id=208002
Reviewed by Adrian Perez de Castro.
Add mediaControlsAdwaita.css and mediaControlsAdwaita.js. The style is based on GTK port with a few differences:
- Adwaita icons are included in the css.
- All buttons have effects for hover, pressed and disabled states.
- Mute and fullscreen (only for videos) buttons are always visible, but disabled when not available to avoid
the dancing when they are shown.
- Media duration is always shown too (for non-live streams), being 00:00 and disabled when unknown, for the
same reason.
- Timeline and volume sliders are smaller and their thumbs are circled instead of rounded rectangles.
- Slider thumbs also have effects for hover, pressed and disabled states.
* Modules/mediacontrols/mediaControlsAdwaita.css: Added.
(audio::-webkit-media-controls-panel.hidden,):
(body:-webkit-full-page-media):
(audio):
(audio:-webkit-full-page-media,):
(audio:-webkit-full-page-media::-webkit-media-controls-panel,):
(::-webkit-media-controls):
(audio::-webkit-media-controls-enclosure,):
(video::-webkit-media-controls-enclosure):
(audio::-webkit-media-controls-panel,):
(video::-webkit-media-controls-panel):
(video::-webkit-media-controls-panel div.mute-box,):
(audio::-webkit-media-controls-panel div.mute-box.hidden,):
(audio::-webkit-media-controls-mute-button,):
(audio::-webkit-media-controls-mute-button.muted,):
(audio::-webkit-media-controls-play-button,):
(audio::-webkit-media-controls-play-button.paused,):
(audio::-webkit-media-controls-current-time-display,):
(audio::-webkit-media-controls-current-time-display.no-duration,):
(audio::-webkit-media-controls-current-time-display.hidden,):
(audio::-webkit-media-controls-timeline,):
(input[type="range"][disabled]::-webkit-media-slider-thumb,):
(audio::-webkit-media-controls-timeline.hidden,):
(audio::-webkit-media-controls-volume-slider-container,):
(audio::-webkit-media-controls-volume-slider-container.hiding,):
(audio::-webkit-media-controls-volume-slider-container.down,):
(audio::-webkit-media-controls-panel .hiding.down,):
(audio::-webkit-media-controls-volume-slider,):
(audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div,):
(input[type="range"]::-webkit-media-slider-container):
(input[type="range"]::-webkit-media-slider-container > div):
(input[type="range"]::-webkit-media-slider-thumb):
(audio::-webkit-media-controls-toggle-closed-captions-button,):
(audio::-webkit-media-controls-toggle-closed-captions-button.hidden,):
(video::-webkit-media-controls-closed-captions-container):
(video::-webkit-media-controls-closed-captions-container.out):
(video::-webkit-media-controls-closed-captions-container.hidden):
(video::-webkit-media-controls-closed-captions-container h3):
(video::-webkit-media-controls-closed-captions-container ul):
(video::-webkit-media-controls-closed-captions-container li):
(video::-webkit-media-controls-closed-captions-container li.selected):
(audio::-webkit-media-controls-fullscreen-button,):
(audio::-webkit-media-controls-fullscreen-button.hidden,):
(audio::-webkit-media-controls-panel button:hover,):
(audio::-webkit-media-controls-panel button:active,):
(audio::-webkit-media-controls-panel button[disabled],):
* Modules/mediacontrols/mediaControlsAdwaita.js: Added.
(createControls):
(ControllerAdwaita):
(contains):
(ControllerAdwaita.prototype.createControls):
(ControllerAdwaita.prototype.configureInlineControls):
(ControllerAdwaita.prototype.shouldHaveControls):
(ControllerAdwaita.prototype.reconnectControls):
(ControllerAdwaita.prototype.setStatusHidden):
(ControllerAdwaita.prototype.updateTime):
(ControllerAdwaita.prototype.handleTimeUpdate):
(ControllerAdwaita.prototype.updateHasAudio):
(ControllerAdwaita.prototype.handleMuteButtonMouseOver):
(ControllerAdwaita.prototype.handleVolumeBoxMouseOut):
(ControllerAdwaita.prototype.removeControls):
(ControllerAdwaita.prototype.addControls):
(ControllerAdwaita.prototype.updateFullscreenButton):
(ControllerAdwaita.prototype.updateReadyState):
(ControllerAdwaita.prototype.updateDuration):
(ControllerAdwaita.prototype.setIsLive):
(ControllerAdwaita.prototype.updatePlaying):
(ControllerAdwaita.prototype.updateProgress):
(ControllerAdwaita.prototype.handleCaptionButtonClicked):
(ControllerAdwaita.prototype.buildCaptionMenu):
(ControllerAdwaita.prototype.destroyCaptionMenu):
(ControllerAdwaita.prototype.showCaptionMenu):
(ControllerAdwaita.prototype.hideCaptionMenu):
(ControllerAdwaita.prototype.captionMenuTransitionEnd):
(ControllerAdwaita.prototype.handleCaptionButtonMouseOver):
(ControllerAdwaita.prototype.handleCaptionButtonShowMenu):
(ControllerAdwaita.prototype.handleCaptionButtonMouseOut):
(ControllerAdwaita.prototype.handleCaptionMouseOut):
* Modules/mediacontrols/mediaControlsBase.js:
* PlatformWPE.cmake:
* platform/wpe/RenderThemeWPE.cpp:
(WebCore::RenderThemeWPE::extraMediaControlsStyleSheet):
(WebCore::RenderThemeWPE::mediaControlsScript):
(WebCore::RenderThemeWPE::paintMediaSliderTrack):
(WebCore::RenderThemeWPE::paintMediaVolumeSliderTrack):
* platform/wpe/RenderThemeWPE.h:
Modified Paths
Added Paths
Diff
Modified: trunk/Source/WebCore/ChangeLog (257130 => 257131)
--- trunk/Source/WebCore/ChangeLog 2020-02-21 10:16:36 UTC (rev 257130)
+++ trunk/Source/WebCore/ChangeLog 2020-02-21 10:26:34 UTC (rev 257131)
@@ -1,3 +1,108 @@
+2020-02-21 Carlos Garcia Campos <[email protected]>
+
+ [WPE] Use custom theme style for media controls
+ https://bugs.webkit.org/show_bug.cgi?id=208002
+
+ Reviewed by Adrian Perez de Castro.
+
+ Add mediaControlsAdwaita.css and mediaControlsAdwaita.js. The style is based on GTK port with a few differences:
+
+ - Adwaita icons are included in the css.
+ - All buttons have effects for hover, pressed and disabled states.
+ - Mute and fullscreen (only for videos) buttons are always visible, but disabled when not available to avoid
+ the dancing when they are shown.
+ - Media duration is always shown too (for non-live streams), being 00:00 and disabled when unknown, for the
+ same reason.
+ - Timeline and volume sliders are smaller and their thumbs are circled instead of rounded rectangles.
+ - Slider thumbs also have effects for hover, pressed and disabled states.
+
+ * Modules/mediacontrols/mediaControlsAdwaita.css: Added.
+ (audio::-webkit-media-controls-panel.hidden,):
+ (body:-webkit-full-page-media):
+ (audio):
+ (audio:-webkit-full-page-media,):
+ (audio:-webkit-full-page-media::-webkit-media-controls-panel,):
+ (::-webkit-media-controls):
+ (audio::-webkit-media-controls-enclosure,):
+ (video::-webkit-media-controls-enclosure):
+ (audio::-webkit-media-controls-panel,):
+ (video::-webkit-media-controls-panel):
+ (video::-webkit-media-controls-panel div.mute-box,):
+ (audio::-webkit-media-controls-panel div.mute-box.hidden,):
+ (audio::-webkit-media-controls-mute-button,):
+ (audio::-webkit-media-controls-mute-button.muted,):
+ (audio::-webkit-media-controls-play-button,):
+ (audio::-webkit-media-controls-play-button.paused,):
+ (audio::-webkit-media-controls-current-time-display,):
+ (audio::-webkit-media-controls-current-time-display.no-duration,):
+ (audio::-webkit-media-controls-current-time-display.hidden,):
+ (audio::-webkit-media-controls-timeline,):
+ (input[type="range"][disabled]::-webkit-media-slider-thumb,):
+ (audio::-webkit-media-controls-timeline.hidden,):
+ (audio::-webkit-media-controls-volume-slider-container,):
+ (audio::-webkit-media-controls-volume-slider-container.hiding,):
+ (audio::-webkit-media-controls-volume-slider-container.down,):
+ (audio::-webkit-media-controls-panel .hiding.down,):
+ (audio::-webkit-media-controls-volume-slider,):
+ (audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div,):
+ (input[type="range"]::-webkit-media-slider-container):
+ (input[type="range"]::-webkit-media-slider-container > div):
+ (input[type="range"]::-webkit-media-slider-thumb):
+ (audio::-webkit-media-controls-toggle-closed-captions-button,):
+ (audio::-webkit-media-controls-toggle-closed-captions-button.hidden,):
+ (video::-webkit-media-controls-closed-captions-container):
+ (video::-webkit-media-controls-closed-captions-container.out):
+ (video::-webkit-media-controls-closed-captions-container.hidden):
+ (video::-webkit-media-controls-closed-captions-container h3):
+ (video::-webkit-media-controls-closed-captions-container ul):
+ (video::-webkit-media-controls-closed-captions-container li):
+ (video::-webkit-media-controls-closed-captions-container li.selected):
+ (audio::-webkit-media-controls-fullscreen-button,):
+ (audio::-webkit-media-controls-fullscreen-button.hidden,):
+ (audio::-webkit-media-controls-panel button:hover,):
+ (audio::-webkit-media-controls-panel button:active,):
+ (audio::-webkit-media-controls-panel button[disabled],):
+ * Modules/mediacontrols/mediaControlsAdwaita.js: Added.
+ (createControls):
+ (ControllerAdwaita):
+ (contains):
+ (ControllerAdwaita.prototype.createControls):
+ (ControllerAdwaita.prototype.configureInlineControls):
+ (ControllerAdwaita.prototype.shouldHaveControls):
+ (ControllerAdwaita.prototype.reconnectControls):
+ (ControllerAdwaita.prototype.setStatusHidden):
+ (ControllerAdwaita.prototype.updateTime):
+ (ControllerAdwaita.prototype.handleTimeUpdate):
+ (ControllerAdwaita.prototype.updateHasAudio):
+ (ControllerAdwaita.prototype.handleMuteButtonMouseOver):
+ (ControllerAdwaita.prototype.handleVolumeBoxMouseOut):
+ (ControllerAdwaita.prototype.removeControls):
+ (ControllerAdwaita.prototype.addControls):
+ (ControllerAdwaita.prototype.updateFullscreenButton):
+ (ControllerAdwaita.prototype.updateReadyState):
+ (ControllerAdwaita.prototype.updateDuration):
+ (ControllerAdwaita.prototype.setIsLive):
+ (ControllerAdwaita.prototype.updatePlaying):
+ (ControllerAdwaita.prototype.updateProgress):
+ (ControllerAdwaita.prototype.handleCaptionButtonClicked):
+ (ControllerAdwaita.prototype.buildCaptionMenu):
+ (ControllerAdwaita.prototype.destroyCaptionMenu):
+ (ControllerAdwaita.prototype.showCaptionMenu):
+ (ControllerAdwaita.prototype.hideCaptionMenu):
+ (ControllerAdwaita.prototype.captionMenuTransitionEnd):
+ (ControllerAdwaita.prototype.handleCaptionButtonMouseOver):
+ (ControllerAdwaita.prototype.handleCaptionButtonShowMenu):
+ (ControllerAdwaita.prototype.handleCaptionButtonMouseOut):
+ (ControllerAdwaita.prototype.handleCaptionMouseOut):
+ * Modules/mediacontrols/mediaControlsBase.js:
+ * PlatformWPE.cmake:
+ * platform/wpe/RenderThemeWPE.cpp:
+ (WebCore::RenderThemeWPE::extraMediaControlsStyleSheet):
+ (WebCore::RenderThemeWPE::mediaControlsScript):
+ (WebCore::RenderThemeWPE::paintMediaSliderTrack):
+ (WebCore::RenderThemeWPE::paintMediaVolumeSliderTrack):
+ * platform/wpe/RenderThemeWPE.h:
+
2020-02-21 Fujii Hironori <[email protected]>
Unreviewed build fix for Windows ports
Added: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.css (0 => 257131)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.css (rev 0)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.css 2020-02-21 10:26:34 UTC (rev 257131)
@@ -0,0 +1,461 @@
+/*
+ * Copyright (C) 2009 Apple Inc. All rights reserved.
+ * Copyright (C) 2009 Google Inc.
+ * Copyright (C) 2012 Zan Dobersek <[email protected]>
+ * Copyright (C) 2012, 2020 Igalia S.L.
+ *
+ * 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
+ * notice, this list of conditions and the following disclaimer in the
+ * documentation and/or other materials provided with the distribution.
+ *
+ * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
+ * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
+ * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
+ * PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL APPLE INC. OR
+ * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
+ * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
+ * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
+ * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
+ * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
+ * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
+ */
+
+/* These are based on the Chromium media controls and using the Adwaita icons */
+
+audio::-webkit-media-controls-panel.hidden,
+video::-webkit-media-controls-panel.hidden {
+ display: none !important;
+}
+
+body:-webkit-full-page-media {
+ background-color: rgb(0, 0, 0);
+}
+
+audio {
+ width: 300px;
+ height: 30px;
+}
+
+audio:-webkit-full-page-media,
+video:-webkit-full-page-media {
+ max-height: 100%;
+ max-width: 100%;
+}
+
+audio:-webkit-full-page-media::-webkit-media-controls-panel,
+video:-webkit-full-page-media::-webkit-media-controls-panel {
+ bottom: 0px;
+}
+
+::-webkit-media-controls {
+ display: flex;
+ flex-direction: column;
+ justify-content: flex-end;
+ align-items: center;
+}
+
+audio::-webkit-media-controls-enclosure,
+video::-webkit-media-controls-enclosure {
+ width: 100%;
+ max-width: 800px;
+ height: 30px;
+ bottom: 0;
+ text-indent: 0;
+ padding: 0;
+ box-sizing: border-box;
+ overflow: visible;
+}
+
+video::-webkit-media-controls-enclosure {
+ padding: 5px;
+ height: 40px;
+}
+
+audio::-webkit-media-controls-panel,
+video::-webkit-media-controls-panel {
+ display: flex;
+ flex-direction: row;
+ align-items: center;
+ justify-content: flex-start;
+ bottom: auto;
+ height: 30px;
+ background-color: rgba(20, 20, 20, 0.8);
+ border-radius: 5px;
+ overflow: visible;
+ transition: opacity 0.25s linear;
+}
+
+video::-webkit-media-controls-panel {
+ opacity: 0;
+}
+
+audio::-webkit-media-controls-panel,
+video:-webkit-full-page-media::-webkit-media-controls-panel.no-video,
+video::-webkit-media-controls-panel:hover,
+video::-webkit-media-controls-panel.show,
+video::-webkit-media-controls-panel.paused {
+ opacity: 1;
+}
+
+video::-webkit-media-controls-panel div.mute-box,
+audio::-webkit-media-controls-panel div.mute-box {
+ display: flex;
+ flex: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ margin: 0 9px 0 -7px;
+}
+
+audio::-webkit-media-controls-panel div.mute-box.hidden,
+video::-webkit-media-controls-panel div.mute-box.hidden {
+ display: none !important;
+}
+
+audio::-webkit-media-controls-mute-button,
+video::-webkit-media-controls-mute-button {
+ display: flex;
+ flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ outline: none;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-image: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <g fill='#FFFFFF'> \
+ <path d='M0 5h2.484l2.97-3H6v12h-.475l-3.04-3H0z' style='marker:none' color='#bebebe' overflow='visible'/> \
+ <path d='M15 8c0-2.814-1-5.172-2.586-7H11v1.48C12.265 4 13 5.7 13 8c0 2.3-.78 4-2 5.52V15h1.381C13.847 13.36 15 10.814 15 8z' style='marker:none' color='#000' overflow='visible'/> \
+ <path d='M12 8c0-2.166-.739-4.02-2-5H9v2c.607.789 1 1.76 1 3 0 1.241-.393 2.22-1 3v2h1c1.223-.995 2-2.873 2-5z' style='marker:none' color='#000' overflow='visible'/> \
+ <path d='M9 8c0-1.257-.312-2.216-1-3H7v6h1c.672-.837 1-1.742 1-3z' style='line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none' color='#000' font-weight='400' font-family='Sans' overflow='visible'/> \
+ </g> \
+ </svg>");
+}
+
+audio::-webkit-media-controls-mute-button.muted,
+video::-webkit-media-controls-mute-button.muted {
+ background-image: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <g fill='#FFFFFF'> \
+ <path d='M11 11h1.375l1.125 1.094L14.594 11H16v1.469l-1.094 1.062L16 14.594V16h-1.438L13.5 14.937 12.437 16H11v-1.406l1.062-1.063L11 12.47zM0 5h2.484l2.97-3H6v12h-.475l-3.04-3H0z' style='marker:none' color='#bebebe' overflow='visible'/> \
+ <path d='M11 1v1.48C12.265 4 13 5.7 13 8c0 .723-.085 1.382-.229 2h2.034c.124-.645.195-1.314.195-2 0-2.814-1-5.172-2.586-7z' style='marker:none' color='#000' overflow='visible' opacity='.35'/> \
+ <path d='M9 3v2c.607.789 1 1.759 1 3s-.393 2.22-1 3v2h1v-3h1.75c.158-.626.25-1.297.25-2 0-2.167-.739-4.02-2-5z' style='marker:none' color='#000' overflow='visible' opacity='.35'/> \
+ <path d='M9 8c0-1.257-.312-2.216-1-3H7v6h1c.672-.837 1-1.742 1-3z' style='line-height:normal;-inkscape-font-specification:Sans;text-indent:0;text-align:start;text-decoration-line:none;text-transform:none;marker:none' color='#000' font-weight='400' font-family='Sans' overflow='visible' opacity='.35'/> \
+ </g> \
+ </svg>");
+}
+
+audio::-webkit-media-controls-play-button,
+video::-webkit-media-controls-play-button {
+ display: flex;
+ flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ margin: 0 9px;
+ outline: none;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-image: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <g color='#000' fill='#FFFFFF'> \
+ <path d='M4.002 4h3v8h-3zM9.002 4h3v8h-3z' style='marker:none' overflow='visible'/> \
+ </g> \
+ </svg>");
+}
+
+/* Paused classes for audio/video controls should be defined to make a difference in style from not having this class. Otherwise a repaint would not happen. */
+audio::-webkit-media-controls-play-button.paused,
+video::-webkit-media-controls-play-button.paused {
+ position: relative;
+ background-image: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <g color='#000' fill='#FFFFFF'> \
+ <path d='M5.022 3a1 1 0 0 0-1.02 1v8a1 1 0 0 0 1.496.87l6.999-4a1 1 0 0 0 0-1.74l-6.999-4A1 1 0 0 0 5.022 3zm.98 2.725L9.982 8l-3.98 2.275z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
+ <path d='M5.002 12h-1v1h1zM5.002 3h-1v1h1zM5.002 4L12 8l-6.998 4z' style='marker:none' overflow='visible'/> \
+ </g> \
+ </svg>");
+}
+
+audio::-webkit-media-controls-current-time-display,
+video::-webkit-media-controls-current-time-display {
+ -webkit-user-select: none;
+ flex: none;
+ display: block;
+ border: none;
+ cursor: default;
+
+ height: 30px;
+ margin: 0 15px 0 0;
+
+ line-height: 30px;
+ font-family: -webkit-small-control;
+ font-size: 13px;
+ font-weight: normal;
+ font-style: normal;
+ color: white;
+
+ letter-spacing: normal;
+ word-spacing: normal;
+ text-transform: none;
+ text-indent: 0;
+ text-shadow: none;
+ text-decoration: none;
+}
+
+audio::-webkit-media-controls-current-time-display.no-duration,
+video::-webkit-media-controls-current-time-display.no-duration {
+ filter: brightness(50%);
+}
+
+audio::-webkit-media-controls-current-time-display.hidden,
+video::-webkit-media-controls-current-time-display.hidden,
+audio::-webkit-media-controls-time-remaining-display.hidden,
+video::-webkit-media-controls-time-remaining-display.hidden {
+ display: none !important;
+}
+
+audio::-webkit-media-controls-timeline,
+video::-webkit-media-controls-timeline {
+ -webkit-appearance: media-slider !important;
+ display: flex !important;
+ flex: 1 1 auto !important;
+ height: 4px !important;
+ margin: 0 15px 0 1px !important;
+ padding: 0 !important;
+ min-width: 25px !important;
+ outline: none !important;
+}
+
+input[type="range"][disabled]::-webkit-media-slider-thumb,
+input[type="range"][disabled]::-webkit-media-slider-thumb:hover,
+input[type="range"][disabled]::-webkit-media-slider-thumb:active {
+ filter: brightness(50%);
+}
+
+audio::-webkit-media-controls-timeline.hidden,
+video::-webkit-media-controls-timeline.hidden {
+ display: none !important;
+}
+
+audio::-webkit-media-controls-volume-slider-container,
+video::-webkit-media-controls-volume-slider-container {
+ -webkit-appearance: media-volume-slider-container;
+ display: flex;
+ overflow: hidden;
+ position: absolute;
+ padding: 0;
+ height: 100px;
+ width: 30px;
+ bottom: 30px;
+ z-index: 2;
+ background-color: rgba(20, 20, 20, 0.8);
+ border-radius: 5px 5px 0px 0px;
+ transition: height 0.10s linear;
+}
+
+audio::-webkit-media-controls-volume-slider-container.hiding,
+video::-webkit-media-controls-volume-slider-container.hiding {
+ height: 0;
+}
+
+audio::-webkit-media-controls-volume-slider-container.down,
+video::-webkit-media-controls-volume-slider-container.down {
+ bottom: -100px;
+ border-radius: 0px 0px 5px 5px;
+ transition: height 0.10s linear, bottom 0.10s linear;
+}
+
+audio::-webkit-media-controls-panel .hiding.down,
+video::-webkit-media-controls-panel .hiding.down {
+ bottom: 0;
+}
+
+audio::-webkit-media-controls-volume-slider,
+video::-webkit-media-controls-volume-slider {
+ -webkit-appearance: media-volume-slider !important;
+ display: flex !important;
+ align-items: center !important;
+ flex-direction: column !important;
+ box-sizing: border-box !important;
+ height: 80px !important;
+ width: 4px !important;
+ margin: 10px auto !important;
+ outline: none !important;
+}
+
+audio::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div,
+video::-webkit-media-controls-volume-slider-container input[type="range"]::-webkit-media-slider-container > div {
+ margin: -7px 0;
+}
+
+input[type="range"]::-webkit-media-slider-container {
+ display: flex;
+ align-items: center;
+ flex-direction: row; /* This property is updated by C++ code. */
+ box-sizing: border-box;
+ height: 100%;
+ width: 100%;
+}
+
+/* The negative right margin causes the track to overflow its container. */
+input[type="range"]::-webkit-media-slider-container > div {
+ margin-right: -14px;
+}
+
+input[type="range"]::-webkit-media-slider-thumb {
+ -webkit-appearance: none !important;
+ width: 14px;
+ height: 14px;
+ border-radius: 7px;
+ color: white;
+ margin-left: -7px;
+ margin-right: -7px;
+ background-color: white;
+}
+
+audio::-webkit-media-controls-toggle-closed-captions-button,
+video::-webkit-media-controls-toggle-closed-captions-button {
+ display: flex;
+ flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ margin: 0 9px 0 -7px;
+ outline: none;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-image: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <path d='M3.5 2A2.495 2.495 0 0 0 1 4.5v5c0 1.385 1.115 2.52 2.5 2.5h6.375L13 15v-3.063A2.486 2.486 0 0 0 15 9.5v-5C15 3.115 13.885 2 12.5 2zM3 7h4v1H3zm5 0h5v1H8zM3 9h2v1H3zm3 0h5v1H6zm6 0h1v1h-1z' fill='#FFFFFF'/> \
+ </svg>");
+}
+
+audio::-webkit-media-controls-toggle-closed-captions-button.hidden,
+video::-webkit-media-controls-toggle-closed-captions-button.hidden {
+ display: none !important;
+}
+
+video::-webkit-media-controls-closed-captions-container {
+ -webkit-appearance: media-closed-captions-container;
+ display: flex;
+ position: absolute;
+ bottom: 35px;
+ z-index: 2;
+ background-color: rgba(20, 20, 20, 0.8);
+ border-radius: 5px 5px 0px 0px;
+ overflow: hidden;
+ max-width: -webkit-calc(100% - 48px); /* right + 10px */
+ max-height: -webkit-calc(100% - 35px); /* bottom + 10px */
+ cursor: default;
+ font-family: -webkit-small-control;
+ font-size: 10pt;
+ font-weight: normal;
+ font-style: normal;
+ color: white;
+ -webkit-user-select: none;
+ transition: height 0.10s linear;
+}
+
+video::-webkit-media-controls-closed-captions-container.out {
+ border-radius: 5px;
+}
+
+video::-webkit-media-controls-closed-captions-container.hidden {
+ display: none !important;
+}
+
+video::-webkit-media-controls-closed-captions-container h3 {
+ padding-top: 8px;
+ margin: 0;
+ padding-left: 17px;
+ padding-right: 15px;
+ font-size: 10pt;
+ font-weight: bold;
+ font-style: normal;
+}
+
+video::-webkit-media-controls-closed-captions-container ul {
+ list-style-type: none;
+ margin: 0 0 4px 0;
+ padding: 4px 0 0 0;
+}
+
+video::-webkit-media-controls-closed-captions-container li {
+ position: relative;
+ color: white;
+ margin: 0;
+ padding-left: 17px;
+ padding-right: 15px;
+ padding-top: 0.15em;
+ padding-bottom: 0.2em;
+ box-sizing: border-box;
+ overflow: hidden;
+ white-space: nowrap;
+ text-overflow: ellipsis;
+ outline: none;
+}
+video::-webkit-media-controls-closed-captions-container li.selected {
+ background-color: rgba(230, 230, 230, 0.15);
+}
+
+audio::-webkit-media-controls-fullscreen-button,
+video::-webkit-media-controls-fullscreen-button {
+ display: flex;
+ flex: none;
+ border: none;
+ box-sizing: border-box;
+ width: 30px;
+ height: 30px;
+ line-height: 30px;
+ margin: 0 9px 0 -7px;
+ outline: none;
+ background-repeat: no-repeat;
+ background-position: center center;
+ background-image: url("data:image/svg+xml;utf-8, \
+ <svg xmlns='http://www.w3.org/2000/svg' width='16' height='16'> \
+ <g color='#000' fill='#FFFFFF'> \
+ <path d='M1.984 8.986A1 1 0 0 0 1 10v4a1 1 0 0 0 1 1h4a1 1 0 1 0 0-2H3v-3a1 1 0 0 0-1.016-1.014z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
+ <path d='M6.48 8.49a1 1 0 0 0-.687.303l-4.5 4.5a1 1 0 1 0 1.414 1.414l4.5-4.5A1 1 0 0 0 6.48 8.49z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
+ <path d='M1 14h1v1H1z' style='marker:none' overflow='visible'/> \
+ <path d='M10 1a1 1 0 1 0 0 2h3v3a1 1 0 1 0 2 0V2a1 1 0 0 0-1-1z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
+ <path d='M14 1h1v1h-1z' style='marker:none' overflow='visible'/> \
+ <path d='M13.984.99a1 1 0 0 0-.69.301l-4.5 4.469a1 1 0 1 0 1.411 1.418l4.5-4.469a1 1 0 0 0-.72-1.719z' style='line-height:normal;font-variant-ligatures:normal;font-variant-position:normal;font-variant-caps:normal;font-variant-numeric:normal;font-variant-alternates:normal;font-feature-settings:normal;text-indent:0;text-align:start;text-decoration-line:none;text-decoration-style:solid;text-decoration-color:#000;text-transform:none;text-orientation:mixed;shape-padding:0;isolation:auto;mix-blend-mode:normal;marker:none' font-weight='400' font-family='sans-serif' white-space='normal' overflow='visible'/> \
+ <path d='M1 9h1v1H1zM6 14h1v1H6zM14 6h1v1h-1zM9 1h1v1H9z' style='marker:none' overflow='visible'/> \
+ </g> \
+ </svg>");
+}
+
+audio::-webkit-media-controls-fullscreen-button.hidden,
+video::-webkit-media-controls-fullscreen-button.hidden {
+ display: none !important;
+}
+
+audio::-webkit-media-controls-panel button:hover,
+video::-webkit-media-controls-panel button:hover,
+input[type="range"]::-webkit-media-slider-thumb:hover {
+ filter: brightness(90%);
+}
+
+audio::-webkit-media-controls-panel button:active,
+video::-webkit-media-controls-panel button:active,
+input[type="range"]::-webkit-media-slider-thumb:active {
+ filter: brightness(80%);
+}
+
+audio::-webkit-media-controls-panel button[disabled],
+video::-webkit-media-controls-panel button[disabled] {
+ filter: brightness(50%);
+}
Added: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.js (0 => 257131)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.js (rev 0)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsAdwaita.js 2020-02-21 10:26:34 UTC (rev 257131)
@@ -0,0 +1,254 @@
+function createControls(root, video, host)
+{
+ return new ControllerAdwaita(root, video, host);
+};
+
+function ControllerAdwaita(root, video, host)
+{
+ Controller.call(this, root, video, host);
+};
+
+function contains(list, obj)
+{
+ var i = list.length;
+ while (i--)
+ if (list[i] === obj)
+ return true;
+ return false;
+};
+
+ControllerAdwaita.prototype = {
+
+ createControls: function()
+ {
+ Controller.prototype.createControls.apply(this);
+
+ this.controls.volumeBox.classList.add(this.ClassNames.hiding);
+ this.controls.fullscreenButton.disabled = true;
+
+ this.listenFor(this.controls.muteBox, 'mouseout', this.handleVolumeBoxMouseOut);
+ this.listenFor(this.controls.muteButton, 'mouseover', this.handleMuteButtonMouseOver);
+ this.listenFor(this.controls.volumeBox, 'mouseover', this.handleMuteButtonMouseOver);
+ this.listenFor(this.controls.volume, 'mouseover', this.handleMuteButtonMouseOver);
+ this.listenFor(this.controls.captionButton, 'mouseover', this.handleCaptionButtonMouseOver);
+ this.listenFor(this.controls.captionButton, 'mouseout', this.handleCaptionButtonMouseOut);
+
+ var enclosure = this.controls.enclosure = document.createElement('div');
+ enclosure.setAttribute('pseudo', '-webkit-media-controls-enclosure');
+ },
+
+ configureInlineControls: function()
+ {
+ this.controls.panel.appendChild(this.controls.playButton);
+ this.controls.panel.appendChild(this.controls.timeline);
+ this.controls.panel.appendChild(this.controls.currentTime);
+ this.controls.panel.appendChild(this.controls.muteBox);
+ this.controls.muteBox.appendChild(this.controls.muteButton);
+ this.controls.muteBox.appendChild(this.controls.volumeBox);
+ this.controls.volumeBox.appendChild(this.controls.volume);
+ this.controls.panel.appendChild(this.controls.captionButton);
+ if (!this.isAudio())
+ this.controls.panel.appendChild(this.controls.fullscreenButton);
+ this.controls.enclosure.appendChild(this.controls.panel);
+ },
+
+ shouldHaveControls: function()
+ {
+ if (!this.isAudio() && !this.host.allowsInlineMediaPlayback)
+ return true;
+
+ return this.video.controls || this.isFullScreen();
+ },
+
+ reconnectControls: function()
+ {
+ Controller.prototype.disconnectControls.apply(this, arguments);
+
+ this.configureInlineControls();
+
+ if (this.shouldHaveControls())
+ this.addControls();
+ },
+
+ setStatusHidden: function(hidden)
+ {
+ },
+
+ updateTime: function(forceUpdate)
+ {
+ if (!forceUpdate && this.controlsAreHidden())
+ return;
+
+ var currentTime = this.video.currentTime;
+ this.controls.timeline.value = currentTime;
+ this.controls.currentTime.innerText = this.formatTime(currentTime);
+ if (!this.isLive) {
+ var duration = this.video.duration;
+ this.controls.currentTime.innerText += " / " + this.formatTime(duration);
+ this.controls.currentTime.classList.toggle(this.ClassNames.noDuration, !duration);
+ this.controls.timeline.disabled = !duration;
+ }
+ },
+
+ handleTimeUpdate: function(event)
+ {
+ this.updateTime();
+ },
+
+ updateHasAudio: function()
+ {
+ this.controls.muteButton.disabled = this.video.audioTracks.length == 0;
+ },
+
+ handleMuteButtonMouseOver: function(event)
+ {
+ if (this.video.offsetTop + this.controls.enclosure.offsetTop < 105) {
+ this.controls.volumeBox.classList.add(this.ClassNames.down);
+ this.controls.panel.classList.add(this.ClassNames.down);
+ } else {
+ this.controls.volumeBox.classList.remove(this.ClassNames.down);
+ this.controls.panel.classList.remove(this.ClassNames.down);
+ }
+ this.controls.volumeBox.classList.remove(this.ClassNames.hiding);
+
+ return true;
+ },
+
+ handleVolumeBoxMouseOut: function(event)
+ {
+ this.controls.volumeBox.classList.add(this.ClassNames.hiding);
+ return true;
+ },
+
+ removeControls: function()
+ {
+ if (this.controls.enclosure.parentNode)
+ this.controls.enclosure.parentNode.removeChild(this.controls.enclosure);
+ this.destroyCaptionMenu();
+ },
+
+ addControls: function()
+ {
+ this.base.appendChild(this.controls.enclosure);
+ },
+
+ updateFullscreenButton: function()
+ {
+ if (this.video.readyState > HTMLMediaElement.HAVE_NOTHING && !this.hasVisualMedia) {
+ this.controls.fullscreenButton.classList.add(this.ClassNames.hidden);
+ return;
+ }
+
+ this.controls.fullscreenButton.disabled = !this.host.supportsFullscreen;
+ },
+
+ updateReadyState: function()
+ {
+ this.updateVolume();
+ },
+
+ updateDuration: function()
+ {
+ Controller.prototype.updateDuration.apply(this, arguments);
+ if (this.isLive)
+ this.controls.timeline.max = 0;
+ },
+
+ setIsLive: function(live)
+ {
+ Controller.prototype.setIsLive.apply(this, arguments);
+ this.controls.timeline.disabled = this.isLive;
+ },
+
+ updatePlaying: function()
+ {
+ Controller.prototype.updatePlaying.apply(this, arguments);
+ if (!this.canPlay())
+ this.showControls();
+ },
+
+ updateProgress: function(forceUpdate)
+ {
+ },
+
+ handleCaptionButtonClicked: function(event)
+ {
+ this.handleCaptionButtonShowMenu(event)
+ return true;
+ },
+
+ buildCaptionMenu: function()
+ {
+ Controller.prototype.buildCaptionMenu.apply(this, arguments);
+
+ this.listenFor(this.captionMenu, 'mouseout', this.handleCaptionMouseOut);
+ this.listenFor(this.captionMenu, 'transitionend', this.captionMenuTransitionEnd);
+
+ this.captionMenu.captionMenuTreeElements = this.captionMenu.getElementsByTagName("*");
+
+ // Caption menu has to be centered to the caption button.
+ var captionButtonCenter = this.controls.panel.offsetLeft + this.controls.captionButton.offsetLeft +
+ this.controls.captionButton.offsetWidth / 2;
+ var captionMenuLeft = (captionButtonCenter - this.captionMenu.offsetWidth / 2);
+ if (captionMenuLeft + this.captionMenu.offsetWidth > this.controls.panel.offsetLeft + this.controls.panel.offsetWidth)
+ this.captionMenu.classList.add(this.ClassNames.out);
+ this.captionMenu.style.left = captionMenuLeft + 'px';
+ // As height is not in the css, it needs to be specified to animate it.
+ this.captionMenu.height = this.captionMenu.offsetHeight;
+ this.captionMenu.style.height = 0;
+ },
+
+ destroyCaptionMenu: function()
+ {
+ this.hideCaptionMenu();
+ },
+
+ showCaptionMenu: function()
+ {
+ this.captionMenu.style.height = this.captionMenu.height + 'px';
+ },
+
+ hideCaptionMenu: function()
+ {
+ this.captionMenu.style.height = 0;
+ },
+
+ captionMenuTransitionEnd: function(event)
+ {
+ if (this.captionMenu.offsetHeight === 0)
+ Controller.prototype.destroyCaptionMenu.apply(this, arguments);
+ },
+
+ handleCaptionButtonMouseOver: function(event)
+ {
+ this.handleCaptionButtonShowMenu(event);
+ return true;
+ },
+
+ handleCaptionButtonShowMenu: function(event)
+ {
+ if (!this.captionMenu)
+ this.buildCaptionMenu();
+ if (!contains(this.captionMenu.captionMenuTreeElements, event.relatedTarget))
+ this.showCaptionMenu();
+ return true;
+ },
+
+ handleCaptionButtonMouseOut: function(event)
+ {
+ if (this.captionMenu && !contains(this.captionMenu.captionMenuTreeElements, event.relatedTarget))
+ this.hideCaptionMenu();
+ return true;
+ },
+
+ handleCaptionMouseOut: function(event)
+ {
+ if (event.relatedTarget != this.controls.captionButton &&
+ !contains(this.captionMenu.captionMenuTreeElements, event.relatedTarget))
+ this.hideCaptionMenu();
+ return true;
+ },
+};
+
+Object.create(Controller.prototype).extend(ControllerAdwaita.prototype);
+Object.defineProperty(ControllerAdwaita.prototype, 'constructor', { enumerable:false, value:ControllerAdwaita });
Modified: trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.js (257130 => 257131)
--- trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.js 2020-02-21 10:16:36 UTC (rev 257130)
+++ trunk/Source/WebCore/Modules/mediacontrols/mediaControlsBase.js 2020-02-21 10:26:34 UTC (rev 257131)
@@ -91,6 +91,7 @@
thumbnailTrack: 'thumbnail-track',
volumeBox: 'volume-box',
noVideo: 'no-video',
+ noDuration: 'no-duration',
down: 'down',
out: 'out',
},
Modified: trunk/Source/WebCore/PlatformWPE.cmake (257130 => 257131)
--- trunk/Source/WebCore/PlatformWPE.cmake 2020-02-21 10:16:36 UTC (rev 257130)
+++ trunk/Source/WebCore/PlatformWPE.cmake 2020-02-21 10:26:34 UTC (rev 257131)
@@ -40,12 +40,13 @@
list(APPEND WebCore_USER_AGENT_STYLE_SHEETS
${WEBCORE_DIR}/css/themeAdwaita.css
- ${WEBCORE_DIR}/Modules/mediacontrols/mediaControlsBase.css
+ ${WEBCORE_DIR}/Modules/mediacontrols/mediaControlsAdwaita.css
)
set(WebCore_USER_AGENT_SCRIPTS
${WEBCORE_DIR}/en.lproj/mediaControlsLocalizedStrings.js
${WEBCORE_DIR}/Modules/mediacontrols/mediaControlsBase.js
+ ${WEBCORE_DIR}/Modules/mediacontrols/mediaControlsAdwaita.js
)
set(WebCore_USER_AGENT_SCRIPTS_DEPENDENCIES ${WEBCORE_DIR}/platform/wpe/RenderThemeWPE.cpp)
Modified: trunk/Source/WebCore/platform/wpe/RenderThemeWPE.cpp (257130 => 257131)
--- trunk/Source/WebCore/platform/wpe/RenderThemeWPE.cpp 2020-02-21 10:16:36 UTC (rev 257130)
+++ trunk/Source/WebCore/platform/wpe/RenderThemeWPE.cpp 2020-02-21 10:26:34 UTC (rev 257131)
@@ -30,6 +30,8 @@
#include "FloatRoundedRect.h"
#include "GraphicsContext.h"
#include "HTMLInputElement.h"
+#include "HTMLMediaElement.h"
+#include "MediaControlElements.h"
#include "NotImplemented.h"
#include "PaintInfo.h"
#include "RenderBox.h"
@@ -37,6 +39,7 @@
#include "RenderProgress.h"
#include "RenderStyle.h"
#include "ThemeWPE.h"
+#include "TimeRanges.h"
#include "UserAgentScripts.h"
#include "UserAgentStyleSheets.h"
#include <wtf/text/StringBuilder.h>
@@ -69,6 +72,11 @@
static const Color sliderThumbBackgroundColor = makeRGB(244, 242, 241);
static const Color sliderThumbBackgroundHoveredColor = makeRGB(248, 248, 247);
static const Color sliderThumbBackgroundDisabledColor = makeRGB(244, 242, 241);
+#if ENABLE(VIDEO)
+static const Color mediaSliderTrackBackgroundcolor = makeRGB(77, 77, 77);
+static const Color mediaSliderTrackBufferedColor = makeRGB(173, 173, 173);
+static const Color mediaSliderTrackActiveColor = makeRGB(252, 252, 252);
+#endif
RenderTheme& RenderTheme::singleton()
{
@@ -153,9 +161,9 @@
}
#if ENABLE(VIDEO)
-String RenderThemeWPE::mediaControlsStyleSheet()
+String RenderThemeWPE::extraMediaControlsStyleSheet()
{
- return String(mediaControlsBaseUserAgentStyleSheet, sizeof(mediaControlsBaseUserAgentStyleSheet));
+ return String(mediaControlsAdwaitaUserAgentStyleSheet, sizeof(mediaControlsAdwaitaUserAgentStyleSheet));
}
String RenderThemeWPE::mediaControlsScript()
@@ -163,6 +171,7 @@
StringBuilder scriptBuilder;
scriptBuilder.appendCharacters(mediaControlsLocalizedStringsJavaScript, sizeof(mediaControlsLocalizedStringsJavaScript));
scriptBuilder.appendCharacters(mediaControlsBaseJavaScript, sizeof(mediaControlsBaseJavaScript));
+ scriptBuilder.appendCharacters(mediaControlsAdwaitaJavaScript, sizeof(mediaControlsAdwaitaJavaScript));
return scriptBuilder.toString();
}
#endif
@@ -449,4 +458,84 @@
return false;
}
+#if ENABLE(VIDEO)
+bool RenderThemeWPE::paintMediaSliderTrack(const RenderObject& renderObject, const PaintInfo& paintInfo, const IntRect& rect)
+{
+ auto mediaElement = parentMediaElement(renderObject);
+ if (!mediaElement)
+ return false;
+
+ auto& graphicsContext = paintInfo.context();
+ GraphicsContextStateSaver stateSaver(graphicsContext);
+
+ FloatRect trackRect = rect;
+ FloatSize corner(2, 2);
+ Path path;
+ path.addRoundedRect(trackRect, corner);
+ graphicsContext.setFillColor(mediaSliderTrackBackgroundcolor);
+ graphicsContext.fillPath(path);
+ path.clear();
+
+ graphicsContext.setFillColor(mediaSliderTrackBufferedColor);
+
+ float mediaDuration = mediaElement->duration();
+ RefPtr<TimeRanges> timeRanges = mediaElement->buffered();
+ for (unsigned index = 0; index < timeRanges->length(); ++index) {
+ float start = timeRanges->start(index).releaseReturnValue();
+ float end = timeRanges->end(index).releaseReturnValue();
+ float startRatio = start / mediaDuration;
+ float lengthRatio = (end - start) / mediaDuration;
+ if (!lengthRatio)
+ continue;
+
+ FloatRect rangeRect = rect;
+ rangeRect.setWidth(lengthRatio * rect.width());
+ if (index)
+ rangeRect.move(startRatio * rect.width(), 0);
+
+ path.addRoundedRect(rangeRect, corner);
+ graphicsContext.fillPath(path);
+ path.clear();
+ }
+
+ FloatRect playedRect = rect;
+ playedRect.setWidth((mediaElement->currentTime() / mediaDuration) * rect.width());
+ graphicsContext.setFillColor(mediaSliderTrackActiveColor);
+ path.addRoundedRect(playedRect, corner);
+ graphicsContext.fillPath(path);
+
+ return false;
+}
+
+bool RenderThemeWPE::paintMediaVolumeSliderTrack(const RenderObject& renderObject, const PaintInfo& paintInfo, const IntRect& rect)
+{
+ auto mediaElement = parentMediaElement(renderObject);
+ if (!mediaElement)
+ return false;
+
+ auto& graphicsContext = paintInfo.context();
+ GraphicsContextStateSaver stateSaver(graphicsContext);
+
+ FloatRect trackRect = rect;
+ FloatSize corner(2, 2);
+ Path path;
+ path.addRoundedRect(trackRect, corner);
+ graphicsContext.setFillColor(mediaSliderTrackBackgroundcolor);
+ graphicsContext.fillPath(path);
+ path.clear();
+
+ float volume = mediaElement->muted() ? 0.0f : mediaElement->volume();
+ if (volume) {
+ FloatRect volumeRect = rect;
+ volumeRect.setHeight(volumeRect.height() * volume);
+ volumeRect.move(0, rect.height() - volumeRect.height());
+ path.addRoundedRect(volumeRect, corner);
+ graphicsContext.setFillColor(mediaSliderTrackActiveColor);
+ graphicsContext.fillPath(path);
+ }
+
+ return false;
+}
+#endif // ENABLE(VIDEO)
+
} // namespace WebCore
Modified: trunk/Source/WebCore/platform/wpe/RenderThemeWPE.h (257130 => 257131)
--- trunk/Source/WebCore/platform/wpe/RenderThemeWPE.h 2020-02-21 10:16:36 UTC (rev 257130)
+++ trunk/Source/WebCore/platform/wpe/RenderThemeWPE.h 2020-02-21 10:26:34 UTC (rev 257131)
@@ -35,7 +35,7 @@
String extraDefaultStyleSheet() override;
#if ENABLE(VIDEO)
- String mediaControlsStyleSheet() override;
+ String extraMediaControlsStyleSheet() override;
String mediaControlsScript() override;
#endif
@@ -77,6 +77,12 @@
bool paintSliderTrack(const RenderObject&, const PaintInfo&, const IntRect&) override;
void adjustSliderThumbSize(RenderStyle&, const Element*) const override;
bool paintSliderThumb(const RenderObject&, const PaintInfo&, const IntRect&) override;
+
+#if ENABLE(VIDEO)
+ bool paintMediaSliderTrack(const RenderObject&, const PaintInfo&, const IntRect&) override;
+ bool paintMediaVolumeSliderTrack(const RenderObject&, const PaintInfo&, const IntRect&) override;
+#endif
+
};
} // namespace WebCore
