Fix Uncaught TypeError: Cannot read property 'type' of undefined at mtc.js:60 at mtc.js:3 at Object.MauticJS.processGatedVideos (mtc.js:60) at MauticJS.initGatedVideo (mtc.js:59)

[leo108]

closes #7032

Q	A
Bug fix?	Yes
New feature?	No
Automated tests included?	No
Related user documentation PR URL
Related developer documentation PR URL
Issues addressed (#s or URLs)	#7032
BC breaks?	No
Deprecations?	No

Steps to reproduce

Easier steps to reproduce mentioned in #7365 (comment)

1. Add mautic js script tag to website
2. Create a campaign that triggers a Focus Item that shows a popup
3. Load/Refresh the page

Log errors

In Console I see the following error:

Uncaught TypeError: Cannot read property 'type' of undefined
at mtc.js:60
at mtc.js:3
at Object.MauticJS.processGatedVideos (mtc.js:60)
at MauticJS.initGatedVideo (mtc.js:59)

Test PR

Re-do it

[npracht]

@Enc3phale you having skills in js, can you have a look at the code ?

[quintmouthaan]

Please look at my comments and make changes if you agree.

[quintmouthaan]

by returning here if there is no source node the functionality will still not work, even if the source is specified in the src attribute. I suggest to execute the following couple of lines only if sourceNodes.length > 0 and execute the rest of the function even if sourceNodes.length === 0. That way the functionality will also work for video tags with the src attribute

[kuzmany]

Wasn't double tested before the 2.15.2 PR merge deadline so pushing to the next release.

[tenil]

I was able to reproduce the error.
This fix did not work for me.

[RCheesley]

If this issue persists could you update the PR @leo108 or if they aren't able to do so, maybe @quintmouthaan could pick it up taking into account the recommendations?

[npracht]

Hi there!
It has been decided to not create any extra Mautic 2 versions (except for major security purpose) knowing that Mautic 3 is coming very soon.

We now want to integrate your contribution in the Mautic 3 roadmap as 3.0.1 candidate.

How to do?

1. Check if the bug still present in Mautic 3
2. If Yes: rebase your PR against the 3.x branch
3. If No: please comment on your PR: “This PR only applies to Mautic 2.x”

Please report results by commenting on your PR to make us administration easier.

In case your bugfix only apply to Mautic 2, we'll consider adding it in an extra Mautic 2 version.

---

You can more information on how to do all of that on this blog post "Getting you PR ready for Mautic 3".

[mautibot]

This pull request has been mentioned on Mautic Community Forums. There might be relevant details there:

https://forum.mautic.org/t/cors-policy-problem/14291/4

[npracht]

Hello @leo108 could you please test mautic 3.0.0-beta2 and tell me if the issue is still existing?

• If no, i'll tag this issue at M2 only relevant
• If yes, could you please rebase your branch against 3.x branch ?

Waiting for your feedback, i would very love to merge it in 3.0.1 if still relevant. Thanks !

[RCheesley]

@leo108 or @quintmouthaan if this is still an issue could you pick this up

[codecov]

Codecov Report

Merging #7365 into staging will increase coverage by 0.01%.
The diff coverage is n/a.

@@              Coverage Diff              @@
##             staging    #7365      +/-   ##
=============================================
+ Coverage      35.24%   35.25%   +0.01%     
- Complexity     27884    27889       +5     
=============================================
  Files           1731     1731              
  Lines          96712    96409     -303     
=============================================
- Hits           34088    33991      -97     
+ Misses         62624    62418     -206     

Impacted Files	Coverage Δ	Complexity Δ
...les/PageBundle/EventListener/BuildJsSubscriber.php	2.94% <ø> (-1.41%)	14.00 <0.00> (ø)
...dles/PageBundle/EventListener/ConfigSubscriber.php	15.38% <0.00%> (-6.05%)	5.00% <0.00%> (ø%)
...pp/bundles/CampaignBundle/Event/ScheduledEvent.php	60.00% <0.00%> (-2.50%)	4.00% <0.00%> (ø%)
...Exchange/Internal/Executioner/OrderExecutioner.php	78.26% <0.00%> (-1.74%)	10.00% <0.00%> (ø%)
...pp/bundles/CampaignBundle/Event/ConditionEvent.php	51.85% <0.00%> (-1.72%)	9.00% <0.00%> (ø%)
...ationsBundle/Sync/DAO/Mapping/ObjectMappingDAO.php	63.63% <0.00%> (-1.59%)	10.00% <0.00%> (ø%)
app/bundles/CampaignBundle/Event/DecisionEvent.php	56.66% <0.00%> (-1.40%)	9.00% <0.00%> (ø%)
app/bundles/PageBundle/Model/RedirectModel.php	23.33% <0.00%> (-1.26%)	19.00% <0.00%> (ø%)
...s/IntegrationsBundle/Sync/Helper/MappingHelper.php	60.86% <0.00%> (-1.24%)	27.00% <0.00%> (ø%)
... and 169 more

[dennisameling]

Easier steps to reproduce:

• Create a landing page in Mautic
• Add a "Code Mode" block and add the following video block to it:

<video autoplay src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video>

• Open the Landing Page in your browser
• See the error show up:

After applying this PR, the error shouldn't show up anymore.

[dennisameling]

Note: this functionality (Gated Video) is designed to only work if the data-form-id and data-gate-time attributes are set on the video element. All other <video> elements should be left intact by Mautic.

Currently, the logic that checks if a data-form-id attribute is set comes too late and should be on top of the function. That is what's causing the issue that's been reported: a video that was embedded on a page that happened to have the Mautic tracking JS on it as well was triggering the reported TypeError. This PR should move up that logic so that the error isn't thrown incorrectly.

Note on @quintmouthaan's comment above:

That way the functionality will also work for video tags with the src attribute

Problem with this is that even though this might work, the developer would need to set a data-form-id on the <video> element to trigger this functionality, as described in the docs. However, when a developer does that, the following logic isn't triggered so the player won't work properly:

node.dataset.mp4 = true;
playerFeatures = ['playpause','progress','current','duration','volume','fullscreen'];

Example:

• If a dev would add the following video tag to a page: <video controls="" data-form-id="1" data-gate-time="5" src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"></video> the player doesn't work, as this isn't a supported scenario:

TL;DR: Mautic should ignore all video tags that don't have the data-form-id and data-gate-time attributes as described in the docs. The logic that checks this in the code currently comes a bit too late which results in a TypeError, which this PR should fix. Please note that Mautic only supports <video> elements with proper <source> elements in it for the Gated Video functionality.

@RCheesley should we mention the TL;DR in the docs as well?

[RCheesley]

Tested before with the error and after with no error:

Before:

After:

@dennisameling indeed I feel we should ensure that this is documented!

[RCheesley]

P.S. Awesome video!