⚠ Archived content — this site is no longer maintained.   Current WebKit documentation is at docs.webkit.org.

Changeset 179808 in webkit


Ignore:
Timestamp:
Feb 8, 2015, 3:40:01 PM (12 years ago)
Author:
dino@apple.com
Message:

Tweak inline playback controls to match system spec
​https://bugs.webkit.org/show_bug.cgi?id=141375
<rdar://problem/19760754>

Reviewed by Sam Weinig.

Rework the UI of the inline media controls on iOS, to
better match the system specification. I've batched a
few changes into one patch because many of them are
inter-dependent, and not very aggressive. Changes are:

  • updated artwork for the buttons.
  • separate artwork for normal and active states.
  • background images are now explicitly sized and positioned in the middle of the element, allowing audio and video to use the same glyphs even though the elements are different sizes.
  • use plus-darker blend mode on the button glyphs.
  • rearranged some of the rules to group things in a logical order.
  • time should front-pad a "0" character, if less than 10.
  • no need for an "active" class on the Airplay button (although I won't be surprised if this changes back).
  • Modules/mediacontrols/mediaControlsiOS.css:

(::-webkit-media-controls):
(video::-webkit-media-controls-wireless-playback-picker-button.active): Deleted.
(audio::-webkit-media-controls-wireless-playback-picker-button.active): Deleted.
(audio::-webkit-media-controls-play-button:active): Deleted.
(audio::-webkit-media-controls-play-button.paused): Deleted.
(video::-webkit-media-controls-timeline): Deleted.

  • Modules/mediacontrols/mediaControlsiOS.js:

(ControllerIOS.prototype.updateWirelessPlaybackStatus): No need
for the "active" class.
(ControllerIOS.prototype.formatTime): Pad with a leading zero.

Location:
trunk/Source/WebCore
Files:
3 edited

Legend:

Unmodified
Added
Removed

  • trunk/Source/WebCore/ChangeLog

    r179807 r179808  
     12015-02-07  Dean Jackson  <dino@apple.com>
     2
     3        Tweak inline playback controls to match system spec
     4        https://bugs.webkit.org/show_bug.cgi?id=141375
     5        <rdar://problem/19760754>
     6
     7        Reviewed by Sam Weinig.
     8
     9        Rework the UI of the inline media controls on iOS, to
     10        better match the system specification. I've batched a
     11        few changes into one patch because many of them are
     12        inter-dependent, and not very aggressive. Changes are:
     13
     14        - updated artwork for the buttons.
     15        - separate artwork for normal and active states.
     16        - background images are now explicitly sized and positioned
     17          in the middle of the element, allowing audio and video
     18          to use the same glyphs even though the elements are
     19          different sizes.
     20        - use plus-darker blend mode on the button glyphs.
     21        - rearranged some of the rules to group things in a
     22          logical order.
     23        - time should front-pad a "0" character, if less than 10.
     24        - no need for an "active" class on the Airplay button (although
     25          I won't be surprised if this changes back).
     26
     27        * Modules/mediacontrols/mediaControlsiOS.css:
     28        (::-webkit-media-controls):
     29        (video::-webkit-media-controls-wireless-playback-picker-button.active): Deleted.
     30        (audio::-webkit-media-controls-wireless-playback-picker-button.active): Deleted.
     31        (audio::-webkit-media-controls-play-button:active): Deleted.
     32        (audio::-webkit-media-controls-play-button.paused): Deleted.
     33        (video::-webkit-media-controls-timeline): Deleted.
     34        * Modules/mediacontrols/mediaControlsiOS.js:
     35        (ControllerIOS.prototype.updateWirelessPlaybackStatus): No need
     36        for the "active" class.
     37        (ControllerIOS.prototype.formatTime): Pad with a leading zero.
     38
    1392015-02-08  Darin Adler  <darin@apple.com>
    240

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

    r179601 r179808  
    11/*
    2  * Copyright (C) 2012, 2013, 2014 Apple Inc.  All rights reserved.
     2 * Copyright (C) 2012, 2013, 2014, 2015 Apple Inc.  All rights reserved.
    33 *
    44 * Redistribution and use in source and binary forms, with or without
    … …  
    8484}
    8585
    86 audio::-webkit-media-controls-wireless-playback-picker-button,
    87 video::-webkit-media-controls-wireless-playback-picker-button {
    88     display: block;
    89     opacity: 0.9;
    90 }
    91 
    92 audio::-webkit-media-controls-wireless-playback-picker-button {
    93     width: 44px;
    94     height: 39px;
    95     background-size: 44px 39px;
    96     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 39"><g fill="none"><path stroke="black" stroke-width="1" d="M15.5,24.5  10.5,24.5  10.5,11.5  31.5,11.5  31.5,24.5  26.5,24.5  31.5,24.5  31.5,11.5  10.5,11.5  10.5,24.5  15.5,24.5 Z" /><path fill="black" d="M21,21  13.5,29  28.5,29" /></g></svg>');
    97 }
    98 
    99 video::-webkit-media-controls-wireless-playback-picker-button {
    100     width: 42px;
    101     height: 44px;
    102     background-size: 42px 44px;
    103     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 44"><g fill="none"><path stroke="black" stroke-width="1" d="M15,27.5  10.5,27.5  10.5,14.5  30.5,14.5  30.5,27.5  26,27.5  30.5,27.5  30.5,14.5  10.5,14.5  10.5,27.5  15,27.5 Z" /><path fill="black" d="M20.5,23.5  13,31.5  28,31.5" /></g></svg>');
    104 }
    105 
    106 video::-webkit-media-controls-wireless-playback-picker-button.active {
    107     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 44"><g fill="none"><path stroke="#1060FE" stroke-width="1" d="M15,27.5  10.5,27.5  10.5,14.5  30.5,14.5  30.5,27.5  26,27.5  30.5,27.5  30.5,14.5  10.5,14.5  10.5,27.5  15,27.5 Z" /><path fill="#1060FE" d="M20.5,23.5  13,31.5  28,31.5" /></g></svg>');
    108 }
    109 
    110 audio::-webkit-media-controls-wireless-playback-picker-button.active {
    111     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 44 39"><g fill="none"><path stroke="#1060FE" stroke-width="1" d="M15.5,24.5  10.5,24.5  10.5,11.5  31.5,11.5  31.5,24.5  26.5,24.5  31.5,24.5  31.5,11.5  10.5,11.5  10.5,24.5  15.5,24.5 Z" /><path fill="#1060FE" d="M21,21  13.5,29  28.5,29" /></g></svg>');
    112 }
    113 
    11486video::-webkit-media-text-track-container,
    11587audio::-webkit-media-text-track-container {
    … …  
    134106    display: -webkit-flex;
    135107    -webkit-flex-direction: row;
     108    -webkit-flex-wrap: nowrap;
     109    -webkit-justify-content: space-between;
    136110    -webkit-align-items: center;
    137     -webkit-user-select: none;
    138111
    139112    transition: opacity 0.25s linear;
    … …  
    141114}
    142115
     116video::-webkit-media-controls-panel .hidden,
     117audio::-webkit-media-controls-panel .hidden {
     118    display: none;
     119}
     120
    143121video::-webkit-media-controls-panel {
     122    height: 50px;
     123    width: 100%;
     124    opacity: 0;
     125    padding: 0;
    144126    background-color: rgba(255, 255, 255, 0.6);
    145 }
    146 
    147 audio::-webkit-media-controls-panel {
    148     background-color: rgba(228, 228, 228, 1);
    149127}
    150128
    151129audio::-webkit-media-controls-panel {
    152130    height: 39px;
    153     padding-right: 8px;
    154     padding-left: 7px;
    155 }
    156 
    157 video::-webkit-media-controls-panel {
    158     height: 44px;
    159131    width: 100%;
    160     opacity: 0;
    161     padding-right: 24px;
    162     padding-left: 24px;
     132    padding: 0;
     133    background-color: rgba(228, 228, 228, 1);
    163134}
    164135
    … …  
    210181}
    211182
     183/* ================== ALL INLINE BUTTONS ====================== */
     184
    212185video::-webkit-media-controls-play-button,
    213186audio::-webkit-media-controls-play-button,
    214187video::-webkit-media-controls-fullscreen-button,
    215188audio::-webkit-media-controls-fullscreen-button,
     189audio::-webkit-media-controls-wireless-playback-picker-button,
     190video::-webkit-media-controls-wireless-playback-picker-button,
    216191video::-webkit-media-controls-optimized-fullscreen-button,
    217192audio::-webkit-media-controls-optimized-fullscreen-button {
    … …  
    222197    -webkit-user-select: none;
    223198    background-repeat: no-repeat;
     199    background-position: 50% 50%;
     200    mix-blend-mode: plus-darker;
     201    opacity: 0.55;
     202}
     203
     204video::-webkit-media-controls-play-button:active,
     205audio::-webkit-media-controls-play-button:active,
     206video::-webkit-media-controls-fullscreen-button:active,
     207audio::-webkit-media-controls-fullscreen-button:active,
     208audio::-webkit-media-controls-wireless-playback-picker-button:active,
     209video::-webkit-media-controls-wireless-playback-picker-button:active,
     210video::-webkit-media-controls-optimized-fullscreen-button:active,
     211audio::-webkit-media-controls-optimized-fullscreen-button:active {
     212    mix-blend-mode: normal;
     213    opacity: 1;
     214}
     215
     216/* ================== PLAY BUTTON ====================== */
     217
     218audio::-webkit-media-controls-play-button,
     219video::-webkit-media-controls-play-button {
     220    margin-left: 4px;
     221    background-size: 18px 22px;
     222    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsCAYAAAANUxr1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0E5REFDQ0JBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0E5REFDQ0FBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDc4RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhBRjdGMDc5RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+D59QlAAAAFVJREFUeNrs2bENgEAMA0AHsf/EIB5GcIGgOEvpIuf6TJIjXfZyv+qfe67ywJT7Vf+WnwUICAgICAgICAgICAgICAgICAgICAjoyzxvgvPlG1X/EmAASwgGTpkrSW0AAAAASUVORK5CYII=');
     223    -webkit-order: 1;
    224224}
    225225
    … …  
    227227    width: 42px;
    228228    height: 39px;
    229     background-size: 42px 39px;
    230     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="rgba(2, 2, 2, 1)"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></g></svg>');
    231 }
    232 
    233 audio::-webkit-media-controls-play-button:active {
    234     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><g fill="white"><rect x="13" y="9.5" width="6" height="20.5"/><rect x="24" y="9.5" width="6" height="20.5"/></g></svg>');
    235 }
    236 
    237 audio::-webkit-media-controls-play-button.paused {
    238     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 42 39"><path fill="rgba(2, 2, 2, 1)" d="M11,9.5 32,20.5 11,31.5z"/></svg>');
    239 }
     229}
     230
     231video::-webkit-media-controls-play-button {
     232    width: 44px;
     233    height: 50px;
     234}
     235
     236audio::-webkit-media-controls-play-button:active,
     237video::-webkit-media-controls-play-button:active {
     238    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACQAAAAsCAYAAAANUxr1AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0E5REFDQ0ZBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0E5REFDQ0VBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDc4RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjhBRjdGMDc5RTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+5aIXPQAAAFJJREFUeNrs2LENwCAQBMHHpv+KsR65hAuQHczG6H5iRnevyprh+5WO33W2aP+qnwUEBAQEBAQEBAQEBAQEBAQEBAQEBAT0Ze9P/nP4RrS/BRgAZAEHVf7/o+YAAAAASUVORK5CYII=');
     239}
     240
     241audio::-webkit-media-controls-play-button.paused,
     242video::-webkit-media-controls-play-button.paused {
     243    background-size: 21px 22px;
     244    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6ODIyMTJEMTRBNUFCMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6ODIyMTJEMTNBNUFCMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDdDRTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCQzEzNEY0RTNBMzExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+JBpORQAAAcRJREFUeNrU2T8ohHEcx/HH05NSShkMBoZb3OAmFhYyyCKTzWa7zWTyZ/CvKwxKMYhBKSWFW2RxCyklg4FicIWIXC5/z+dX3289dM6/5+75PL96lXSnt+s5vt/nbMuyOqDIIj82rMAutLHHZlwS0BKEULUFjUEIVXGoD0Ko8QarEGEPVa+wBGH2UHfwAoTYQ9UzzEI1e6h6hCmoZA9VDzAOFeyh6h5GoJw9VN3CAJSxh6pr6IVS9lB1AT1Qwh6qziEKxeyh6hS6wWEPVcfQJbNxzsHZ7xOSf8mH0PlVE0OonrAMPfvQ/nk9YgrVE5Gxcse9HjGG6jED+4asR83MoXrMJWA7xIF70CfrkMUYegD9cp1m9JtMoUcSuCx72ofDEHoCg7Aoa07W42foGQzBHLx892A/QpMwLPvW00+fVMjQSxiDaUj/9smFCL2BmCyAqb/+kHyG3sEETMrX/zr5CE3JqxeTV9OT42VoWq6/Ubjy+rf3ItS8c2dkRU6y3tIxgVWst3TMH+d55ptketuxhvW2oxkQzAcStX4PBbki16GOZbzKFrgJDWyDqjtwG5pYR34TaD4Qa2VenBzZodfcYz/jeRdgAMHrnv9Jf7YjAAAAAElFTkSuQmCC');
     245}
     246
     247audio::-webkit-media-controls-play-button.paused:active,
     248video::-webkit-media-controls-play-button.paused:active {
     249    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACoAAAAsCAYAAAATmipGAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6N0E5REFDQzdBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6N0E5REFDQzZBNUFDMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjhBRjdGMDdDRTNBMjExRTI5MzQ4QzU0RDI5RUIzNDk5IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjNCQzEzNEY0RTNBMzExRTI5MzQ4QzU0RDI5RUIzNDk5Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+Pkw0sAAAAglJREFUeNrMl0tERGEYhs8cR0TELFrMpkWrNq1q1Wq0qU1atWvXrlWt2nTVVbosImoRUUQkUqLSIjE1DDWLkYpatCgiYsg0p/fn/TjSfc7le3nMWZzhOb///7/vs13XbQMxYGnGtixrE5yCFktxbP7Wgx1wDJo0i0oawT445LNaUUmSq7sLGjSLSppBCmyBOs2iJjHQCjJgHdRqFfW+2w6yYAXUaBX1/qcD5MASqNYqKnFAJ7gE8yChVVRSBrrAFZgBVVpFJeWgG1yDcRDXKiqpAL3gBgyCSq2iEiM4QOFefoBKUUmcW8FsiR5uEZWiEnPIpnnoungIVYpKErzOLnm9OVpFJdUsGDkWEFurqKSGJTnLEm1rFZXUsunJsAmKaRWV1LGtTHnHI42ikgbPeJTULOrth21HsWAa9HMcsjSKnrP0mn3qentKLclRcAMUP2t+o47pAYbAGnj7rkuPKrdgFCyDwm/GibBzD8ZYPl//MveElQcwCRZA/j8DWtB5AlPsmF5KmSSDyjOYBXN8LilBiL5w9aa4mr7ET9E8998EePT76/0QNSd3kXPRfVD7qBTRAu/AEXAX9In8j6ipHqtgmFUllPxFtMg6PMC6HGp+I+qykzEt10VU9fYn0R2uYDrqzuUr0QOu4ImWHvCjqJlP+sCRtm5aRM8ouKd1LnE4Q297236NeRdgAAP83/qfKob+AAAAAElFTkSuQmCC');
     250}
     251
     252/* ================== FULLSCREEN BUTTON ====================== */
    240253
    241254video::-webkit-media-controls-fullscreen-button {
    242     width: 35px;
    243     height: 44px;
    244     background-size: 35px 44px;
    245     opacity: 0.9;
    246     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="rgba(0, 0, 0, 0.4)" fill="none"><path d="M 10.5,20.5 v -5 h 5 M 10.5,15.5 l 5,5"/><path d="M 24.5,24.5 v 5 h -5 M 24.5,29.5 l -5,-5"/></g></svg>');
    247 }
     255    width: 44px;
     256    height: 50px;
     257    background-size: 15px 15px;
     258    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo0MDY1NjBEMUE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo0MDY1NjBEMkE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjQwNjU2MENGQTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjQwNjU2MEQwQTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+OuvolQAAAMpJREFUeNrs1UEOgkAMBdDWcAQXeARXXMq4cuEBjWfQjR6nFjMQREY6SX9hYZOfAJtHh9AyEQkZSkSYHGtDC9UYfmp2bXfjIOG7Zq+5MnMd0bWkbDW3dP3Q1NopodLD6SYM/4Aj8S84Cp+EI/AsjMYtbwbBrccyxI9h8AA/eB01dx966Vn9h9cP60Y7F201pyl0Kv3PveDiIeM5e014v/+dB/8sDoEtOAyew6HwLxwO5/AQOIO/4ZDtpBOtxS+apntWARBZ9ZJ4CTAAmUZswlMSWgoAAAAASUVORK5CYII=');
     259    -webkit-order: 5;
     260}
     261
     262video::-webkit-media-controls-fullscreen-button:active {
     263    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAB4AAAAeCAYAAAA7MK6iAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDo3NEE1MUQxNkE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDo3NEE1MUQxN0E1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOjc0QTUxRDE0QTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOjc0QTUxRDE1QTVBRjExRTQ4QjQ2RENDM0VDQUZBM0U3Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hm7UbgAAAMxJREFUeNrs1sEJwkAQBdBZsYQcYgmebMJzsBAPFmQpwRr0ok2kh/gjEcOSjbMwf5SQDx9CCDxC2JmEFhFdghhmJT9KDD/QTf92cWnwDd2iF7Skv3L7SYFe++s7Wnafn9UhLJ54DLvhY7ALnoLp+BRMxTUPUXDN5GrQ/eCcVxbHOOhHtRToAT17wzLLJbHAOTllbTWjgXDMPedWcPaQsRz8Wjw5n9k4BdbgNPgbToWncDqcwl3gMfwVr+3UrdQa3b1vrBm/6n+9JJ4CDAB4KPbj9o9c0wAAAABJRU5ErkJggg==');
     264}
     265
     266/* ================== AIRPLAY BUTTON ====================== */
     267
     268audio::-webkit-media-controls-wireless-playback-picker-button,
     269video::-webkit-media-controls-wireless-playback-picker-button {
     270    margin-left: 4px;
     271    background-size: 21px 18px;
     272    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NDA2NTYwQzlBNUFGMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NDA2NTYwQ0FBNUFGMTFFNDhCNDZEQ0MzRUNBRkEzRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo3QTlEQUNEMEE1QUMxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo0MDY1NjBDOEE1QUYxMUU0OEI0NkRDQzNFQ0FGQTNFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PsGo4wwAAAE9SURBVHja7JYxbsIwFIZtIjFkyYTEwMhUiZmdA/QCOQE3YGPkBh2ZOiNxAAY2ZlaGDt06McCAhHj8T7WrCKXIcewoSO9J35DIfv5kJ7+slVKkXqT0S8oSkW6tpNYksiIrsiIrsiIrsiIrsiJbItuJ0DgDK9CLIU6/G0uqLqgu2JieO5AG6kt/X0AIWfNJfRYak3nWbZSdP4haFq2SReXg9o8sM22FLGoCLk9EmSt4DybryB5khSYjcHSce+Lxhbmp+QmrrO888BsMCov1zTuq0YPj7ct5vuex+OxK6elUWtdDNAFrT1ELZ3G3CdmPmqKWZVRZ1CyQqGUWRZajx0RQSFnO5jyoLGoMzoFFLZzRkyCyqCH4iSRq4ax+qyVrcvAQWdTC6/S8ZM11b9uQKLlcK6tc95qCMzwp87oLMABmUMEzVAChcAAAAABJRU5ErkJggg==');
     273    -webkit-order: 3;
     274}
     275
     276audio::-webkit-media-controls-wireless-playback-picker-button {
     277    width: 44px;
     278    height: 39px;
     279}
     280
     281video::-webkit-media-controls-wireless-playback-picker-button {
     282    width: 44px;
     283    height: 50px;
     284}
     285
     286audio::-webkit-media-controls-wireless-playback-picker-button:active,
     287video::-webkit-media-controls-wireless-playback-picker-button:active {
     288    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACsAAAAkCAYAAAAQC8MVAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMDE0IDc5LjE1Njc5NywgMjAxNC8wOC8yMC0wOTo1MzowMiAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6NTlDMDY1NzlBNUJFMTFFNDhCNDZEQ0MzRUNBRkEzRTciIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6NTlDMDY1N0FBNUJFMTFFNDhCNDZEQ0MzRUNBRkEzRTciPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDo1OUMwNjU3N0E1QkUxMUU0OEI0NkRDQzNFQ0FGQTNFNyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDo1OUMwNjU3OEE1QkUxMUU0OEI0NkRDQzNFQ0FGQTNFNyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PtpJfI0AAAFESURBVHjaYvwPBAxDBDAxDCHAgsRmHMTu/D/kQnbUsaOOHXXsqGNHHTvq2FHHjjp21LFD1bH8QLwOiEUHu2PZoA4NBOLNQMw1WB0L6mnMA2InKN8ciGdRswdCTcfWAXE0mhiI30a9zg0CMFCAo4H433/cIJNC88GAGiHrBI1+fNE9GYj9qJkM/hOBL0FzOwzoQjMUGwF7mIF4GVQ9DIAy3wki7cVIBoTAYyCWQYoaCajYfwrMEAXi+8RqZiRzQAYUKvugOZ5UcBmIbYH4Iz1KA1CULifToaQkHao4lhqZBZQpZ9DasRVAnEmlUjMRah5J5Syx2A+I//ynLvgHLaOJcgOxIWsOTafMVG5LoFfRFCcDFVo0SrA0frQodSyombedFs09LM3KjYTsYSLg4zXQkKUHIBiDTATSkh2dOwN48wZAgAEAbPX73MzEV24AAAAASUVORK5CYII=');
     289}
     290
     291/* ================== OPTIMIZED FULLSCREEN BUTTON ====================== */
    248292
    249293video::-webkit-media-controls-optimized-fullscreen-button {
    250294    width: 35px;
    251295    height: 44px;
    252     opacity: 0.4;
    253 }
    254 
    255 video::-webkit-media-controls-play-button {
    256     width: 41px;
    257     height: 44px;
    258     background-size: 41px 44px;
    259     opacity: 0.9;
    260     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="rgba(0, 0, 0, 0.4)"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></g></svg>');
    261 }
    262 
    263 video::-webkit-media-controls-play-button:active {
    264     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><g fill="white"><rect x="11" y="11" width="6" height="22"/><rect x="23" y="11" width="6" height="22"/></g></svg>');
    265 }
    266 
    267 video::-webkit-media-controls-play-button.paused {
    268     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 41 44"><path fill="rgba(0, 0, 0, 0.4)" d="M10,11  31,22  10,33 Z"/></svg>');
    269 }
    270 
    271 video::-webkit-media-controls-fullscreen-button:active {
    272     background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35 44"><g stroke="white" fill="none"><path d="M 10,20 v -5 h 5 M 10,15 l 5,5"/><path d="M 24,24 v 5 h -5 M 24,29 l -5,-5"/></g></svg>');
    273 }
     296    background-size: 23px 18px;
     297    -webkit-order: 5;
     298}
     299
     300/* ================== TIMELINE ====================== */
    274301
    275302video::-webkit-media-controls-timeline,
    … …  
    279306    height: 3px;
    280307    margin: 0;
    281 }
    282 
    283 video::-webkit-media-controls-timeline {
    284     opacity: 0.75;
    285308}
    286309
    … …  
    310333}
    311334
     335audio::-webkit-media-controls-timeline::-webkit-slider-thumb {
     336    top: -1px;
     337}
     338
    312339video::-webkit-media-controls-current-time-display,
    313340video::-webkit-media-controls-time-remaining-display,
    … …  
    317344    -webkit-flex: 0 0 0;
    318345    display: -webkit-flex;
    319     -webkit-justify-content: center;
    320346    -webkit-align-items: center;
    321     cursor: default;
    322347    overflow-y: hidden;
    323348    overflow-x: hidden;
    324     min-width: 44px;
    325349    letter-spacing: normal;
    326350    word-spacing: normal;
    … …  
    329353    text-indent: 0px;
    330354    text-decoration: none;
    331 }
    332 
    333 video::-webkit-media-controls-current-time-display,
     355    color: black;
     356    mix-blend-mode: plus-darker;
     357    opacity: 0.55;
     358    height: 50px;
     359    font-size: 13px;
     360}
     361
     362audio::-webkit-media-controls-current-time-display,
     363video::-webkit-media-controls-current-time-display {
     364    min-width: 32px;
     365    -webkit-justify-content: left;
     366    padding-right: 6px;
     367}
     368
     369audio::-webkit-media-controls-time-remaining-display,
    334370video::-webkit-media-controls-time-remaining-display {
    335     font-size: 13px;
    336     color: rgba(0, 0, 0, .5);
    337 }
    338 
    339 video::-webkit-media-controls-current-time-display {
     371    min-width: 38px;
     372    -webkit-justify-content: right;
    340373    padding-left: 6px;
    341 }
    342 
    343 video::-webkit-media-controls-time-remaining-display {
    344     padding-right: 13px;
    345 }
    346 
    347 audio::-webkit-media-controls-current-time-display,
    348 audio::-webkit-media-controls-time-remaining-display {
    349     font-size: 12px;
    350     color: rgba(5, 5, 5, 1);
    351 }
    352 
    353 video::-webkit-media-controls-timeline-container .hour-long-time,
    354 audio::-webkit-media-controls-timeline-container .hour-long-time {
    355     min-width: 67px;
    356374}
    357375
    … …  
    365383    position: relative;
    366384    padding: 0;
    367 }
    368 
    369 video::-webkit-media-controls-panel .hidden,
    370 audio::-webkit-media-controls-panel .hidden {
    371     display: none;
     385    -webkit-order: 2;
     386}
     387
     388audio::-webkit-media-controls-timeline-container {
     389    padding-right: 10px;
     390}
     391
     392video::-webkit-media-controls-timeline-container .hour-long-time,
     393audio::-webkit-media-controls-timeline-container .hour-long-time {
     394    min-width: 67px;
    372395}
    373396

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

    r179689 r179808  
    130130
    131131            this.controls.inlinePlaybackPlaceholder.classList.remove(this.ClassNames.hidden);
    132             this.controls.wirelessTargetPicker.classList.add(this.ClassNames.active);
    133132        } else {
    134133            this.controls.inlinePlaybackPlaceholder.classList.add(this.ClassNames.hidden);
    135             this.controls.wirelessTargetPicker.classList.remove(this.ClassNames.active);
    136134        }
    137135    },
    … …  
    305303            return sign + intHours + ':' + String('00' + intMinutes).slice(-2) + ":" + String('00' + intSeconds).slice(-2);
    306304
    307         return sign + String('00' + intMinutes).slice(intMinutes >= 10 ? -2 : -1) + ":" + String('00' + intSeconds).slice(-2);
     305        return sign + String('00' + intMinutes).slice(-2) + ":" + String('00' + intSeconds).slice(-2);
    308306    },
    309307
Note: See TracChangeset for help on using the changeset viewer.