🐛 amp-ima-video: Show sound and fullscreen buttons during ads #18954

curseagain · 2018-10-25T01:06:58Z

Closes #18533

Changes

First Commit

Controls are always visible while ads are playing.
The only buttons displayed in ad control panel are #ima-mute-unmute and #ima-fullscreen.
Controls are restored after the ad finishes.

Second Commit

The ad countdown timer has been moved to the control panel, is displayed when the ad controls are displayed and hidden when the ad controls are hidden

Third Commit

The ad countdown timer text can be customized by setting data-ad-label attribute to a pattern (e.g. data-ad-label="Publicidad (%s de %s)", resulting in something like "Publicidad (1 de 2): 0:27")
Added additional amp-ima-video test for ad with skip button
Note: The height of the ad label is fixed and any overflow is hidden

Fourth Commit

Display smaller controls when an ad is skippable and has mobile classes, signifying that the "Skip" button will be displayed and we will have to squish our controls underneath.
Fix bug that caused ad to be videoWidth instead of fullscreenWidth when fullscreen is toggled

Screenshots

Desktop with Custom `data-ad-label`

Desktop with Skip Button

Mobile without Skip Button

Mobile with Skip Button

curseagain · 2018-10-25T01:54:28Z

@torch2424 this is ready for review! However, I am concerned that the .videoAdUiAttribution element within the ad iframe is not clearly visible underneath the controls. See the screenshot in this PR. What do you think? Is that an ad disclosure that we aren't allowed to cover?

torch2424 · 2018-10-25T20:01:05Z

Wow this was fast! Awesome, thank you very much for this! 😄 Will look over this, and reach out to some people on our end.

I'll also ask around the for the .videoAdUiAttribution element for you 👍

cc @jasti

torch2424

Code looks great! Great work! Very clean and concise 😄 And thank you for attaching a gif! It is super helpful!

Requesting changes, because I see in the Travis you are failing our lint:

https://travis-ci.org/ampproject/amphtml/jobs/445958589

If you can, run these commands to check all of the "pre-commit" things that may fail in Travis:

gulp lint --local-changes --fix

gulp check-types --local-changes

gulp presubmit --local-changes

gulp test --local-changes

Once those all pass, commit up your changes, and then I can approve once we get some more eyes on this from other teams

Thank you! 😄

torch2424 · 2018-10-25T20:16:44Z

Also, did some quick research, was suggested by @aghassemi that following the VideoJS IMA Plugin would be a great place to start.

Looking at their simple example It appears that their .videoAdUiAttribution is brought above the controls shade. So I think we should go ahead and do the same.

Tried looking around for more reference, but couldn't find much. Hopefully will know more later today 😄

curseagain · 2018-10-25T22:47:14Z

@torch2424, it looks like the videojs team has created their own countdown timer to replace the default one, as described here.

That works fine, but with one complication: internationalization! The videojs player accepts custom values for adLabel and adLabelNofN, which we could potentially do as well... However, maybe there are similar translations happening elsewhere that we could refer to?

curseagain · 2018-10-26T00:39:16Z

@torch2424 I've added a second commit in which I do some linting and attempt to add an ad countdown timer like they do in the videojs plugin. I've also attached a screenshot and updated the description in the PR to reflect the current problem: translation of the ad disclosure text.

torch2424 · 2018-10-26T20:03:18Z

@curseagain Thanks for all the videos! Really helpful!

Glanced over the code again, really like they way you implemented. Once we get finalized on an implementation I'll give a more thorough review (though I don't think I'll have too many comments). 😄

So, the Ads person we work with, is currently Out of Office until next week I think, so I sent them and email and then they can help advise us on this.

Thanks for making that countdown timer, and looking into that! Looks great!

i18n will definitely be a problem, and thank you very much for considering that. Once we hear back from our Ads contact, hopefully we can learn if there is something to do that for us. If not, we can discuss a strategy to move forward on i18n.

torch2424 · 2018-10-30T16:52:55Z

@curseagain

Just a quick update:

Got a response from the IMA team, but they sent me to ask someone else about the video controls and i18n haha! So now we will wait for that 😄

torch2424 · 2018-10-30T17:08:57Z

@curseagain

Got a super quick response from the IMA team 😄

"I would definitely hide when not hover. Other than that it looks fine for the most part. I would also try to minimize the shadow size of the controlbar so as to not interfere with the skip button and things like that".

So, once we get those implemented, I think we can pull that in 😄 We can either do the "show controls on hover" in another PR, merge to master, pull into this PR, and then go from there. Or I wouldn't mind just adding it to this PR.

I'm kind of low on bandwidth this sprint, so if you have time definitely feel free to get started on this. If you cannot, perhaps sometime next week, I can open a PR for the controls hover 😄

~~Also, just asked about i18n as well.~~

i18n is handled by the SDK, but does not expose any text for us. Therefore, we need to roll our own solution for this. I'll ask around on my team to see if anyone has a good idea 😄

Thanks!

curseagain · 2018-10-30T19:30:30Z

Thanks @torch2424! I can begin on some of the other tweaks while we wait to know more about i18n.

torch2424 · 2018-10-31T21:35:09Z

@curseagain

So I brought up i18n at Today's design review #18658 (Thank you so much for bringing it up in the issue though, totally forgot that it was a good place to discuss there 🙃)

They said we could make i18n an attribute on the component itself! They said for consistency's sake, we could/should follow what amp-carousel is doing with their data-button-count-format.

We can simply pass in that attribute value into the ima video player like we are the other data- attributes, and provide a fallback if they don't provide a label. See the amp-carousel code to see what their fallback is, and we should just follow that pattern.

I suggest we name this label: data-ad-label, or whatever would be most consistent with IMA Sdk. Whenever we implement the i18n in this PR, or another, just provide a short paragraph with some links on the naming decision and we can change it if needed.

Thanks! 😄

curseagain · 2018-11-15T17:34:38Z

@torch2424, I've committed the change to accept data-ad-label attribute as a pattern, similar to the way it's done in amp-carousel. I've also updated the description in the PR so you can see the ad controls in different contexts.

Potential problem at mobile sizes where ad controls and the skip button are very close to each other? Is it fine as-is? Or do we need to reduce the height and font size of the controls a bit more?

Thanks for your review and feedback!!

curseagain · 2018-11-15T17:37:23Z

I will update documentation as well after our changes are approved.

Also, let's do "show controls on hover" in a follow-up that you can assign to me, if that's okay?

torch2424 · 2018-11-15T21:00:16Z

@curseagain Thank you very much for making that change it is very much appreciated! 😄

Thanks for adding Gifs, the previews definitely help understand what's going on 😄

On mobile that does look a bit odd, if possible, could we reduce the size of the height of the controls a little bit more?

And updating docs and "show controls on hover" sounds good to be in a follow up PR to me. Is it alright to finish up this feature in another PR @aghassemi ?

Doing a review now, thanks again for your work! 😄

torch2424

Great work!

Just a few small questions, and asked for some help from @zhouyx for if we can use the innerHTML, other than that, mostly compliments haha!

Thank you!

torch2424 · 2018-11-15T21:22:16Z

ads/google/imaVideo.js

@@ -248,17 +257,38 @@ export function imaVideo(global, data) {
    'bottom': '0px',
    'width': '100%',
    'height': '100px',
+    'background-color': 'rgba(7, 20, 30, .7)',
+    'background':
+      'linear-gradient(0, rgba(7, 20, 30, .7) 0%, rgba(7, 20, 30, 0) 100%)',


Ahhh I like this approach, thank you! 😄

torch2424 · 2018-11-15T21:22:16Z

examples/ima-video.amp.html

+
+    <h2>Video4</h2>
+    <div class="description">
+      Uses the Single Skippable Inline IMA Sample Tag. Also, this video with autoplay


Great Example, thank you!

torch2424 · 2018-11-15T21:22:16Z

ads/google/imaVideo.js

@@ -210,6 +218,7 @@ export function imaVideo(global, data) {

  videoWidth = global./*OK*/innerWidth;
  videoHeight = global./*OK*/innerHeight;
+  adLabel = data.adLabel || 'Ad (%s of %s)';


Let's make sure to document later on that this will be the default 👍

ads/google/imaVideo.js

aghassemi · 2018-11-19T17:54:42Z

Sorry for late reply: "show controls on hover" as a feature in a later PR would be great.

curseagain · 2018-11-19T19:35:19Z

@torch2424 I've made the changes that were requested, described them in the Pull Request Description, and added some gifs. Thanks!

torch2424

Code Looks good, all requested changes have been made 😄

Thank you so much @curseagain for your contribution! We really appreciate it! I'll set up a tracking issue for the remaining work, and assign to both of us. Feel free to open up a PR for that as well, and I'll be glad to review it and get it pulled in. Thank you!

Also, did some manual testing in all major browsers and everything looks great! Here's a huge screenshot dump.

torch2424 · 2018-11-20T00:09:44Z

Opened up a tracking issue for the remaining work for the newly introduced features: #19393

cc @curseagain

…ject#18954) * amp-ima-video: Show sound and fullscreen buttons during ads * add #ima-countdown to replace ad counter * use data-ad-label to support custom ad countdown label for i18n * smaller controls for ads that are mobile&skippable, fix fullscreen bug * Set font-family in controlsDiv

googlebot added the cla: yes label Oct 25, 2018

torch2424 self-requested a review October 25, 2018 19:59

torch2424 self-assigned this Oct 25, 2018

torch2424 suggested changes Oct 25, 2018

View changes

curseagain added 2 commits October 25, 2018 17:14

amp-ima-video: Show sound and fullscreen buttons during ads

d9cbfd8

add #ima-countdown to replace ad counter

8145b40

curseagain force-pushed the amp-ima-video-ad-controls-18533 branch from 471f888 to 8145b40 Compare October 26, 2018 00:19

use data-ad-label to support custom ad countdown label for i18n

440ac8f

torch2424 suggested changes Nov 15, 2018

View changes

curseagain added 2 commits November 19, 2018 13:17

smaller controls for ads that are mobile&skippable, fix fullscreen bug

c8c3adb

Set font-family in controlsDiv

b0c7966

torch2424 approved these changes Nov 20, 2018

View changes

torch2424 merged commit 6b09d02 into ampproject:master Nov 20, 2018

torch2424 mentioned this pull request Nov 20, 2018

amp-ima-video: Follow up Tracking Issue for New Features #19393

Closed

3 tasks

ampprojectbot added the PR use: In Beta / Experimental label Nov 21, 2018

ampprojectbot added the PR use: In Stable label Nov 28, 2018

🐛 amp-ima-video: Show sound and fullscreen buttons during ads #18954

🐛 amp-ima-video: Show sound and fullscreen buttons during ads #18954

curseagain commented Oct 25, 2018 •

edited

curseagain commented Oct 25, 2018

torch2424 commented Oct 25, 2018

torch2424 left a comment •

edited

torch2424 commented Oct 25, 2018

curseagain commented Oct 25, 2018

curseagain commented Oct 26, 2018

torch2424 commented Oct 26, 2018

torch2424 commented Oct 30, 2018

torch2424 commented Oct 30, 2018 •

edited

curseagain commented Oct 30, 2018

torch2424 commented Oct 31, 2018

curseagain commented Nov 15, 2018

curseagain commented Nov 15, 2018 •

edited

torch2424 commented Nov 15, 2018

torch2424 left a comment

torch2424 Nov 15, 2018

torch2424 Nov 15, 2018

torch2424 Nov 15, 2018

aghassemi commented Nov 19, 2018

curseagain commented Nov 19, 2018

torch2424 left a comment •

edited

torch2424 commented Nov 20, 2018

🐛 amp-ima-video: Show sound and fullscreen buttons during ads #18954

🐛 amp-ima-video: Show sound and fullscreen buttons during ads #18954

Conversation

curseagain commented Oct 25, 2018 • edited

Changes

First Commit

Second Commit

Third Commit

Fourth Commit

Screenshots

Desktop with Custom data-ad-label

Desktop with Skip Button

Mobile without Skip Button

Mobile with Skip Button

curseagain commented Oct 25, 2018

torch2424 commented Oct 25, 2018

torch2424 left a comment • edited

Choose a reason for hiding this comment

torch2424 commented Oct 25, 2018

curseagain commented Oct 25, 2018

curseagain commented Oct 26, 2018

torch2424 commented Oct 26, 2018

torch2424 commented Oct 30, 2018

torch2424 commented Oct 30, 2018 • edited

curseagain commented Oct 30, 2018

torch2424 commented Oct 31, 2018

curseagain commented Nov 15, 2018

curseagain commented Nov 15, 2018 • edited

torch2424 commented Nov 15, 2018

torch2424 left a comment

Choose a reason for hiding this comment

torch2424 Nov 15, 2018

Choose a reason for hiding this comment

torch2424 Nov 15, 2018

Choose a reason for hiding this comment

torch2424 Nov 15, 2018

Choose a reason for hiding this comment

aghassemi commented Nov 19, 2018

curseagain commented Nov 19, 2018

torch2424 left a comment • edited

Choose a reason for hiding this comment

torch2424 commented Nov 20, 2018

curseagain commented Oct 25, 2018 •

edited

Desktop with Custom `data-ad-label`

torch2424 left a comment •

edited

torch2424 commented Oct 30, 2018 •

edited

curseagain commented Nov 15, 2018 •

edited

torch2424 left a comment •

edited