New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
🐛 amp-ima-video: Show sound and fullscreen buttons during ads
#18954
🐛 amp-ima-video: Show sound and fullscreen buttons during ads
#18954
Conversation
@torch2424 this is ready for review! However, I am concerned that the |
Wow this was fast! Awesome, thank you very much for this! I'll also ask around the for the cc @jasti |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Code looks great! Great work! Very clean and concise
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!
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 Tried looking around for more reference, but couldn't find much. Hopefully will know more later today |
@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 |
471f888
to
8145b40
Compare
@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. |
@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. |
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 |
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 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
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! |
Thanks @torch2424! I can begin on some of the other tweaks while we wait to know more about i18n. |
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 We can simply pass in that attribute value into the ima video player like we are the other I suggest we name this label: Thanks! |
@torch2424, I've committed the change to accept 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!! |
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? |
@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! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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!
@@ -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%)', |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Ahhh I like this approach, thank you!
|
||
<h2>Video4</h2> | ||
<div class="description"> | ||
Uses the Single Skippable Inline IMA Sample Tag. Also, this video with autoplay |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Great Example, thank you!
@@ -210,6 +218,7 @@ export function imaVideo(global, data) { | |||
|
|||
videoWidth = global./*OK*/innerWidth; | |||
videoHeight = global./*OK*/innerHeight; | |||
adLabel = data.adLabel || 'Ad (%s of %s)'; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Let's make sure to document later on that this will be the default
Sorry for late reply: "show controls on hover" as a feature in a later PR would be great. |
@torch2424 I've made the changes that were requested, described them in the Pull Request Description, and added some gifs. Thanks! |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
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
Closes #18533
Changes
First Commit
#ima-mute-unmute
and#ima-fullscreen
.Second Commit
Third Commit
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
")Fourth Commit
videoWidth
instead offullscreenWidth
when fullscreen is toggledScreenshots
Desktop with Custom
data-ad-label
Desktop with Skip Button
Mobile without Skip Button
Mobile with Skip Button