Bug 146226 – [iOS] MediaControls: Start Play and Can't Play buttons need to be cutout and blurred

• Status: RESOLVED
• Resolution: FIXED
• Component: Media

[Said Abou-Hallawa]

The Start Play button needs to blur its background and blend the glyph with the correct color.
Same with the Can't Play button.

[Said Abou-Hallawa]

Created attachment 255390 [details]
Patch

[Said Abou-Hallawa]

Created attachment 255392 [details]
ios-simulator-screen-shot

[Jon Lee]

Comment on attachment 255390 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=255390&action=review

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:245
> +video::-webkit-media-controls-start-playback-button:active video::-webkit-media-controls-start-playback-glyph

missing comma

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:250
> +video::-webkit-media-controls-start-playback-button.failed video::-webkit-media-controls-start-playback-glyph

missing comma

[Said Abou-Hallawa]

Created attachment 255412 [details]
Patch

[Said Abou-Hallawa]

I think the size of the playback button on iOS (72x72) is really big (see the screenshot). Also the size of the button is fixed but I think its size should be scaled down if the video/audio element is small. This patch changes the style of the button and I am not sure if I should change the size as well or not.

[Darin Adler]

Comment on attachment 255412 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=255412&action=review

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:203
> +    left: -webkit-calc(50% - 36px);
> +    top: -webkit-calc(50% - 36px);

What’s the significance of moving from calc to webkit-calc?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:204
> +    -webkit-transform: translate3d(0, 0, 0);

Is this really needed?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:216
> +    -webkit-transform: translate3d(0, 0, 0);

Is this really needed?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:226
> +    -webkit-transform: translate3d(0, 0, 0);

Is this really needed?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:238
> +    background-image: url('data:image/svg+xml,<svg viewBox="0 0 144 144" xmlns="http://www.w3.org/2000/svg"><path d="M48,36v74L109,74z" fill="black"/></svg>');

This is 60x60; why is the SVG 144x144? Is there a way to avoid the xmlns here?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:242
> +    -webkit-transform: translate3d(0, 0, 0);

Is this really needed?

[Said Abou-Hallawa]

Created attachment 255429 [details]
iso-simulator-screen-shot-without-backdrop-filter

[David Kilzer (:ddkilzer)]

The content of attachment 255392 [details] has been deleted by
    David Kilzer (:ddkilzer) <[e-mail]>
without providing any reason.

The token used to delete this attachment was generated at 2015-06-23 17:05:53 PDT.

[David Kilzer (:ddkilzer)]

The content of attachment 255429 [details] has been deleted by
    David Kilzer (:ddkilzer) <[e-mail]>
without providing any reason.

The token used to delete this attachment was generated at 2015-06-23 17:06:07 PDT.

[Said Abou-Hallawa]

Comment on attachment 255412 [details]
Patch

Working on a work-around fix since the back-drop filter causes the image to be displayed blurred.

[Said Abou-Hallawa]

Created attachment 256037 [details]
Patch

[Said Abou-Hallawa]

This patch is the best I can do right now. The glyph of the can't play button is not draw correctly.

I am using the clip-path to draw the glyph of the button. The polygon() function does not allow three separate areas to be drawn without connecting them: https://bugs.webkit.org/show_bug.cgi?id=146539.

If I draw the glyph using css or an image, either a bitmap or an SVG, the backdrop-filter makes the edges of the image blurred.

The css selectors also do not work correctly for the failure case. Also I could not figure out how I get the video to fail loading such that the class ".failed" is added to the play button and the can't play picture is drawn.

<rdar://problem/21656127>
<rdar://problem/21655685>
<rdar://problem/21656923>

[Dean Jackson]

Created attachment 256339 [details]
Patch

[Said Abou-Hallawa]

Comment on attachment 256339 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=256339&action=review

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:-194
> -audio::-webkit-media-controls-start-playback-button {

why are we getting rid of the audio media control support?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:229
> +    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAMAAACZHrEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA/1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD64ociAAAAVHRSTlMAtCT5hQzkWQHAMPuVEetoAs46/qMZ83UG2Uiw94QL4Ve/LZMQZM04oPFz1keuIfaDCVS+KpDqYsmdGO9yBNVEHn9Ru4znj+ZdpstAIIjpagNDtxJhxoj+AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAdlJREFUeNrt2udSwkAYhWE09iCCsSv2rogdK2LvYjn3fy3mjwaUkqzZ3W+c817BM8yZDyYhkWCMMcYYY4wxxhhjjMVeS6ttQUVw2tptGwIM0NHZZVsRYIDuHtuMCgzcZK9tSIABUn1p25QAA2T6bVsqMPAGBuVggKHhETkYYHRMEAYYt3iSf2EwkZ2UgwGmpgVhgJlZQRi4c/NyMP5JXkjLwQCLS4Iw8JYNn2Q0bGXV6ElGk9bWBWGA3IYgDPKbW3Iw/kneFoQBdnYFYeDuGTjJYTHAfiEtBwMc6D7JUTDwDo/kYIDjk1M5GKB4Jgjjn+SSIAzy55pOsgrGP8kXgjDApY6TrIqBexX/SVbGANeFuB8y/QED3MjB3N6J+WTy2fgfTCpSvPtS7BRVzIOe72+lsej6ZSNjLIoYPWNRw2Qe9VEiYrSNJTpG41giY3JPminhMXrHEgmjeywRMM6zofdjYcZi7DG1jLGEw7yYGUsYjKPhd64qxtxYmmJMjqUJJlV+NW6pgzE9lkYY42Opjym+2aHUwKTKOh8HRcJYGktNjOU/sFSNxep75CqMzbH8wOh43KKKeTfybiAUxvpYAoyAsXxh3OSHbcN3MsbCGGOMMcYYY4wxxv57n0aw2iHhyI0VAAAAAElFTkSuQmCC');

Can't we use SVG instead?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:245
> +*/

Why are we leaving this?
Also having
...-button ...-background.active
is confusing to me since the state should be associated with the button; not the background nor the glyph. Or is this just a workaround till we get the right fix and have
...-button.active ...-background
...-button.active ...-glyph
...-button.failed ...-background
...-button.failed ...-glyph

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:254
> +    background-image: url('data:image/png;base64,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');

Can't we use SVG instead?

> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js:473
> +        this.controls.startPlaybackButton.querySelector('.webkit-media-controls-start-playback-background').classList.add('active');

Is this part of the workaround?

[Dean Jackson]

Comment on attachment 256339 [details]
Patch

View in context: https://bugs.webkit.org/attachment.cgi?id=256339&action=review

>> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:-194
>> -audio::-webkit-media-controls-start-playback-button {
> 
> why are we getting rid of the audio media control support?

Because audio elements don't have the start-play button. They are always inline.

(technically the developer could use an <audio> and point to a video stream, but that's their problem)

>> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:229
>> +    background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAIwAAACMCAMAAACZHrEMAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAA/1BMVEUAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAD64ociAAAAVHRSTlMAtCT5hQzkWQHAMPuVEetoAs46/qMZ83UG2Uiw94QL4Ve/LZMQZM04oPFz1keuIfaDCVS+KpDqYsmdGO9yBNVEHn9Ru4znj+ZdpstAIIjpagNDtxJhxoj+AAAAAWJLR0QAiAUdSAAAAAlwSFlzAAALEgAACxIB0t1+/AAAAdlJREFUeNrt2udSwkAYhWE09iCCsSv2rogdK2LvYjn3fy3mjwaUkqzZ3W+c817BM8yZDyYhkWCMMcYYY4wxxhhjjMVeS6ttQUVw2tptGwIM0NHZZVsRYIDuHtuMCgzcZK9tSIABUn1p25QAA2T6bVsqMPAGBuVggKHhETkYYHRMEAYYt3iSf2EwkZ2UgwGmpgVhgJlZQRi4c/NyMP5JXkjLwQCLS4Iw8JYNn2Q0bGXV6ElGk9bWBWGA3IYgDPKbW3Iw/kneFoQBdnYFYeDuGTjJYTHAfiEtBwMc6D7JUTDwDo/kYIDjk1M5GKB4Jgjjn+SSIAzy55pOsgrGP8kXgjDApY6TrIqBexX/SVbGANeFuB8y/QED3MjB3N6J+WTy2fgfTCpSvPtS7BRVzIOe72+lsej6ZSNjLIoYPWNRw2Qe9VEiYrSNJTpG41giY3JPminhMXrHEgmjeywRMM6zofdjYcZi7DG1jLGEw7yYGUsYjKPhd64qxtxYmmJMjqUJJlV+NW6pgzE9lkYY42Opjym+2aHUwKTKOh8HRcJYGktNjOU/sFSNxep75CqMzbH8wOh43KKKeTfybiAUxvpYAoyAsXxh3OSHbcN3MsbCGGOMMcYYY4wxxv57n0aw2iHhyI0VAAAAAElFTkSuQmCC');
> 
> Can't we use SVG instead?

I only have the source artwork in PNG. And we've decided for this cycle to just use the artwork we're given, even though they could all be SVG.

>> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.css:245
>> +*/
> 
> Why are we leaving this?
> Also having
> ...-button ...-background.active
> is confusing to me since the state should be associated with the button; not the background nor the glyph. Or is this just a workaround till we get the right fix and have
> ...-button.active ...-background
> ...-button.active ...-glyph
> ...-button.failed ...-background
> ...-button.failed ...-glyph

Yes, I'll remove that commented code.

And yes, the confusing .active thing is to work around the bugs you mentioned. I tried selectors that were more correct, but they didn't work :(

>> Source/WebCore/Modules/mediacontrols/mediaControlsiOS.js:473
>> +        this.controls.startPlaybackButton.querySelector('.webkit-media-controls-start-playback-background').classList.add('active');
> 
> Is this part of the workaround?

Yes.

[Dean Jackson]

Committed r186487: <http://trac.webkit.org/changeset/186487>