Skip to content
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鈥檒l occasionally send you account related emails.

Already on GitHub? Sign in to your account

馃悰amp-ima-video: Allowed Replaying / Looping video on amp-ima-video #18695

Merged
merged 9 commits into from Oct 18, 2018

Conversation

Projects
None yet
4 participants
@torch2424
Copy link
Member

torch2424 commented Oct 12, 2018

closes #18532

Following the design of , this now shows the "Big Play" button on end of video, with consideration of post-roll ads, and allows replaying / looping of a video.

Also, made some updates to the ima-video example 馃槃

Example

loopimavideo

@torch2424 torch2424 requested a review from zhouyx Oct 12, 2018

@googlebot googlebot added the cla: yes label Oct 12, 2018

torch2424 added some commits Oct 12, 2018

@aghassemi aghassemi requested a review from alanorozco Oct 13, 2018

@alanorozco
Copy link
Member

alanorozco left a comment

Ack.

This goes a little deep so it might take me a couple days to get to.

@torch2424

This comment has been minimized.

Copy link
Member Author

torch2424 commented Oct 17, 2018

@alanorozco No worries, whenever you get the time 馃槃

As long as you don't mind the occasional ping haha!

@@ -1244,10 +1282,11 @@ function postMessage(data) {
* @visibleForTesting
*/
export function getPropertiesForTesting() {
return {adContainerDiv, adRequestFailed, adsActive, adsManagerWidthOnLoad,
return {adContainerDiv, allAdsCompleted,

This comment has been minimized.

@alanorozco

alanorozco Oct 18, 2018

Member

Oof :)

Not your fault, but would you mind setting one item per line?

This comment has been minimized.

@torch2424

torch2424 Oct 18, 2018

Author Member

Definitely 馃槃

bigPlayDiv.addEventListener('tapwithoutdrag', onClick.bind(null, global));
bigPlayDiv.addEventListener(
'tapwithoutdrag',
onBigPlayClick.bind(null, global)

This comment has been minimized.

@alanorozco

alanorozco Oct 18, 2018

Member

Use arrow funcs here instead of bind.

Might wanna consider back-changing the other events but it's fine to leave as-is.

This comment has been minimized.

@torch2424

torch2424 Oct 18, 2018

Author Member

Personally, I think it'd be more beneficial to have it stay consistent. Helps maintainability in my opinion for someone jumping in, rather than trying to understand why this one is different. Especially since there are so many events already.

I definitely agree they should all be arrow functions, but I think that should be done in a larger refactor.

What do you think? 馃槃

This comment has been minimized.

@alanorozco
bigPlayDiv.addEventListener(
interactEvent,
onBigPlayClick.bind(null, global)
);

This comment has been minimized.

@alanorozco

alanorozco Oct 18, 2018

Member

Collapse closing paren into previous line.

// If all ads are not completed,
// onContentResume will show the bigPlayDiv
if (allAdsCompleted) {
setStyle(bigPlayDiv, 'display', 'table-cell');

This comment has been minimized.

@alanorozco

alanorozco Oct 18, 2018

Member

Why table-cell?

This comment has been minimized.

@torch2424

torch2424 Oct 18, 2018

Author Member

Trying to stay consistent with other control element styling, and don't want to cause any weird CSS bugs by changing the way the elements are being laid out.

Definitely agree the styling on the controls should be improved though. Hopefully in a later refactor if I get an "Okay" on that.

What do you think? 馃槃

This comment has been minimized.

@alanorozco

alanorozco Oct 18, 2018

Member

SGTM, but, if possible, try to keep this value in a single source. Either by reading the calculated style or by setting it some other way by default.

@torch2424

This comment has been minimized.

Copy link
Member Author

torch2424 commented Oct 18, 2018

@alanorozco This should be good for another review 馃槃 Please see my comments, one of them is hidden because of the outdated tag.

// If all ads are not completed,
// onContentResume will show the bigPlayDiv
if (allAdsCompleted) {
setStyle(bigPlayDiv, 'display', 'table-cell');

This comment has been minimized.

@alanorozco

alanorozco Oct 18, 2018

Member

SGTM, but, if possible, try to keep this value in a single source. Either by reading the calculated style or by setting it some other way by default.

playbackStarted,
playerState,
PlayerStates,
bigPlayDiv,

This comment has been minimized.

@alanorozco

alanorozco Oct 18, 2018

Member

I realized this is alphabetically sorted but bigPlayDiv is in the wrong order :)

playbackStarted = true;
uiTicker = setInterval(uiTickerClick, 500);
setInterval(playerDataTick, 1000);
bigPlayDiv.removeEventListener(interactEvent, onClick);

This comment has been minimized.

@zhouyx

zhouyx Oct 18, 2018

Collaborator

One question: do we need to removeEventListener to interactEvent, and add it back when allAdsCompleted or onContentResume? Personally I don't know how much resource can it save give we've already set display to none. Up to you.

This comment has been minimized.

@torch2424

torch2424 Oct 18, 2018

Author Member

Ahhh so we don't want to remove the event listener here, because we may need it in the future. Since the big play div is hidden, the event listener wont be fired, and unlike the controls, it doesn't conflict with another event listener on the video itself 馃槃

This comment has been minimized.

@torch2424

torch2424 Oct 18, 2018

Author Member

Discussed offline. Will remove/add as needed

This comment has been minimized.

@torch2424

torch2424 Oct 18, 2018

Author Member

Discussed more offline, this falls more under a seperate refactoring PR. Since previously there was no method of adding/removing dynamically and all that.

@torch2424 torch2424 merged commit ef86e63 into ampproject:master Oct 18, 2018

4 checks passed

LGTM analysis: JavaScript No alert changes
Details
cla/google All necessary CLAs are signed
continuous-integration/travis-ci/pr The Travis CI build passed
Details
percy/amphtml Visual review automatically approved, no visual changes found.
Details

@torch2424 torch2424 deleted the torch2424:amp-ima-video-loop-18532 branch Oct 19, 2018

Enriqe added a commit to Enriqe/amphtml that referenced this pull request Nov 28, 2018

馃悰amp-ima-video: Allowed Replaying / Looping video on amp-ima-video (a鈥
鈥pproject#18695)

* Added a replay icon from google material icons

* LEft a TODO

* Need to dtermine when post-roll to show big play again

* Finished tests for showing the big play div

* Fixed all commit checks

* Hopefully fixed flaky tests with single video mock

* Made PR comments

* Made remaining PR Changes
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can鈥檛 perform that action at this time.