[ads] Fixes sometimes Play and Pause button are not responsive on NTT fullscreen video ad

[aseren]

Resolves brave/brave-browser#37893
Resolves brave/brave-browser#37889

Submitter Checklist:

• I confirm that no security/privacy review is needed and no other type of reviews are needed, or that I have requested them
• There is a ticket for my issue
• Used Github auto-closing keywords in the PR description above
• Wrote a good PR/commit description
• Squashed any review feedback or "fixup" commits before merge, so that history is a record of what happened in the repo, not your PR
• Added appropriate labels (QA/Yes or QA/No; release-notes/include or release-notes/exclude; OS/...) to the associated issue
• Checked the PR locally:
  • npm run test -- brave_browser_tests, npm run test -- brave_unit_tests wiki
  • npm run presubmit wiki, npm run gn_check, npm run tslint
• Ran git rebase master (if needed)

Reviewer Checklist:

• A security review is not needed, or a link to one is included in the PR description
• New files have MPL-2.0 license header
• Adequate test coverage exists to prevent regressions
• Major classes, functions and non-trivial code blocks are well-commented
• Changes in component dependencies are properly reflected in gn
• Code follows the style guide
• Test plan is specified in PR before merging

After-merge Checklist:

• The associated issue milestone is set to the smallest version that the
  changes has landed on
• All relevant documentation has been updated, for instance:
  • https://github.com/brave/brave-browser/wiki/Deviations-from-Chromium-(features-we-disable-or-remove)
  • https://github.com/brave/brave-browser/wiki/Proxy-redirected-URLs
  • https://github.com/brave/brave-browser/wiki/Fingerprinting-Protections
  • https://github.com/brave/brave-browser/wiki/Brave%E2%80%99s-Use-of-Referral-Codes
  • https://github.com/brave/brave-browser/wiki/Web-Compatibility-Exceptions-in-Brave
  • https://github.com/brave/brave-browser/wiki/QA-Guide
  • https://github.com/brave/brave-browser/wiki/P3A

Test Plan:

Test case 1

• Check that the Issue from [ads] Sometimes Play and Pause button are not responsive on NTT fullscreen video ad brave-browser#37893 is no longer reproducible

Test case 2

• Check that the Issue from [ads] Sometimes wrong keyframe is shown for NTT video ad brave-browser#37889 is no longer reproducible

Test case 3

1. Fresh install
2. Turn off WiFi and mobile network
3. Launch browser
4. Toggle Use Staging CRX components in Settings -> BraveCore Switches
5. Set rewards to staging
6. Close the browser
7. Turn on WiFi or mobile network
8. Launch Brave browser
9. Launch browser in Portrait orientation
10. Open New Tab Pages until a tab with New Tab Takeover video ad is opened
11. Make sure that video autoplay is started
12. Wait until autoplay is finished

EXPECTATION: Designated stop keyframe is shown

Test case 4

1. Fresh install
2. Turn off WiFi and mobile network
3. Launch browser
4. Toggle Use Staging CRX components in Settings -> BraveCore Switches
5. Set rewards to staging
6. Close the browser
7. Turn on WiFi or mobile network
8. Launch Brave browser
9. Launch browser in Portrait orientation
10. Open New Tab Pages until a tab with New Tab Takeover video ad is opened
11. Make sure that video autoplay started
12. While video is autoplaying, rotate your iPhone to the landscape mode
13. Rotate your phone back to the portrait mode

EXPECTATION: Designated stop keyframe is shown

Test case 5

1. Fresh install
2. Turn off WiFi and mobile network
3. Launch browser
4. Toggle Use Staging CRX components in Settings -> BraveCore Switches
5. Set rewards to staging
6. Close the browser
7. Turn on WiFi or mobile network
8. Launch Brave browser
9. Launch browser in Portrait orientation
10. Open New Tab Pages until a tab with New Tab Takeover video ad is opened
11. Make sure that video autoplay started
12. While video is autoplaying, switch to another iOS application (make any other iOS application active)
13. While video is autoplaying, switch back to Brave Browser application

EXPECTATION: Designated stop keyframe is shown

Test case 6

1. Fresh install
2. Turn off WiFi and mobile network
3. Launch browser
4. Toggle Use Staging CRX components in Settings -> BraveCore Switches
5. Set rewards to staging
6. Close the browser
7. Turn on WiFi or mobile network
8. Launch Brave browser
9. Launch browser in Portrait orientation
10. Open New Tab Pages until a tab with New Tab Takeover video ad is opened
11. Make sure that video autoplay started
12. While video is autoplaying, switch to another Tab
13. Switch back to Tab with NTT video ad

EXPECTATION: Designated stop keyframe is shown

Test case 7

1. Fresh install
2. Turn off WiFi and mobile network
3. Launch browser
4. Toggle Use Staging CRX components in Settings -> BraveCore Switches
5. Set rewards to staging
6. Close the browser
7. Turn on WiFi or mobile network
8. Launch Brave browser
9. Launch browser in Portrait orientation
10. Open New Tab Pages until a tab with New Tab Takeover video ad is opened
11. Wait until video autoplay is finished
12. Tap Play button
13. While fullscreen video is playing, tap the Cancel button

EXPECTATION: Designated stop keyframe is shown

Test case 8

1. Fresh install
2. Turn off WiFi and mobile network
3. Launch browser
4. Toggle Use Staging CRX components in Settings -> BraveCore Switches
5. Set rewards to staging
6. Close the browser
7. Turn on WiFi or mobile network
8. Launch Brave browser
9. Launch browser in Portrait orientation
10. Open New Tab Pages until a tab with New Tab Takeover video ad is opened
11. Wait until video autoplay is finished
12. Tap Play button
13. While fullscreen video is playing, rotate your iPhone to the landscape mode
14. Rotate your iPhone back to the Portrait mode

EXPECTATION: Designated stop keyframe is shown

[tmancey]

LGTM (but please sanity test and add test cases for QA for all code paths that touch maybeCancelPlay and startAutoplay)

[Uni-verse]

Verification PASSED on iPhone 12 running iOS 17.3.1 using Nightly version 1.67.73

Test Case 1

• Ensured that rapidly tapping on Play and Pause buttons does not cause issues following STR in [ads] Sometimes Play and Pause button are not responsive on NTT fullscreen video ad brave-browser#37893 (comment)
• Ensured that also pausing the video by tapping outside of the buttons does not cause issues.
• Ensured there are no issues loading video ads on multiple tabs.
• Ensured that closing the video while in playing in full screen or while its paused will not cause issues.

RPReplay_Final1715117027.MP4

Test Case 2

• Ensured correct keyframe is shown when locking/unlocking device while video ad is playing following STR in [ads] Sometimes wrong keyframe is shown for NTT video ad brave-browser#37889 (comment)

Test Case 3

• Ensured that video ad autoplays on new tab and stops at designated keyframe.

RPReplay_Final1715117964.mov

Test Case 4

• Ensured that video ad stops at designated keyframe when changing orientation and then returning to portrait mode.

RPReplay_Final1715118327.mov

Test Case 5

• Ensured that video ad stops at designated keyframe when switching apps during video autoplay

RPReplay_Final1715118608.MP4

Test Case 6

• Ensured video ad stops at designated keyframe when switching to another tab and returning.

RPReplay_Final1715118706.MP4

Test Case 7

• Ensured that video ad stops at designated keyframe when following STR in Test Case 7 in [ads] Fixes sometimes Play and Pause button are not responsive on NTT fullscreen video ad #23372 (comment)

RPReplay_Final1715119153.mov

Test Case 8

• Ensured video ad stops at designated keyframe when following STR in Test Case 8 in [ads] Fixes sometimes Play and Pause button are not responsive on NTT fullscreen video ad #23372 (comment)

RPReplay_Final1715119323.mov