Merge pull request #20 from iMattPro/iframe-updates

Display iframe original url/link when deferred

Author: iMattPro

DOCUMENTATION.md

@@ -576,7 +576,7 @@ Twig example:
 ```twig
 {% if S_CONSENTMANAGER_MEDIA_ENABLED %}
 	<span data-consent-media-container="1" data-consent-category="media">
-		<span data-consent-media-placeholder="1"></span>
+		<span data-consent-media-placeholder="1" data-consent-link="https://media.example.com/watch/123"></span>
 		<span data-consent-media-content="1" hidden="hidden">
 			<iframe
 				data-consent-media-frame="1"
@@ -602,6 +602,7 @@ How it works:
 - `data-consent-media-container="1"` marks the deferred embed block
 - `data-consent-category="media"` ties the block to the embedded media consent category
 - `data-consent-media-placeholder="1"` marks the blocked placeholder content
+- `data-consent-link` optionally stores the original user-facing URL for the placeholder link
 - `data-consent-media-content="1"` wraps the real media markup
 - `data-consent-media-frame="1"` marks iframe nodes that should be activated after consent
 - `data-consent-src` stores the real iframe URL until Consent Manager moves it back to `src`

service/media_manager.php

@@ -245,6 +245,12 @@ protected function wrap_media_root(\DOMDocument $dom, \DOMElement $media_root)
 
 		$placeholder = $dom->createElement('span');
 		$placeholder->setAttribute('data-consent-media-placeholder', '1');
+		$link_attribute = $dom->createElementNS(self::XSL_NAMESPACE, 'xsl:attribute');
+		$link_attribute->setAttribute('name', 'data-consent-link');
+		$link_value = $dom->createElementNS(self::XSL_NAMESPACE, 'xsl:value-of');
+		$link_value->setAttribute('select', '.');
+		$link_attribute->appendChild($link_value);
+		$placeholder->appendChild($link_attribute);
 
 		$media_root->setAttribute('data-consent-media-content', '1');
 		$media_root->setAttribute('hidden', 'hidden');

styles/all/template/js/consentmanager.js

@@ -703,6 +703,34 @@
 		}
 	}
 
+	function renderMediaPlaceholder(placeholder)
+	{
+		if (!placeholder)
+		{
+			return;
+		}
+
+		const source = placeholder.getAttribute('data-consent-link');
+		placeholder.textContent = mediaPlaceholderLabel || '';
+
+		if (!source || !isSafeEmbedSource(source))
+		{
+			return;
+		}
+
+		if (mediaPlaceholderLabel)
+		{
+			placeholder.appendChild(document.createTextNode(' '));
+		}
+
+		const link = document.createElement('a');
+		link.href = source;
+		link.target = '_blank';
+		link.rel = 'noopener noreferrer';
+		link.textContent = source;
+		placeholder.appendChild(link);
+	}
+
 	function processDeferredEmbeds(scope)
 	{
 		const nodes = collectMatchingNodes(scope, deferredEmbedSelector);
@@ -715,10 +743,7 @@
 			const placeholder = container.querySelector('[data-consent-media-placeholder]');
 			const frames = container.querySelectorAll('[data-consent-media-frame]');
 
-			if (mediaPlaceholderLabel && placeholder)
-			{
-				placeholder.textContent = mediaPlaceholderLabel;
-			}
+			renderMediaPlaceholder(placeholder);
 
 			if (!content || !frames.length)
 			{
@@ -1152,7 +1177,6 @@
 	{
 		document.addEventListener('DOMContentLoaded', function() {
 			processRegisteredScripts();
-			processDeferredEmbeds(document);
 			initUi();
 		});
 	}

styles/all/theme/consentmanager.css

@@ -228,6 +228,13 @@
 	align-items: flex-start;
 	padding: 1rem;
 	gap: 0.75rem;
+	overflow-wrap: anywhere;
+}
+
+[data-consent-media-placeholder] a {
+	word-break: break-word;
+	max-width: 100%;
+	overflow-wrap: anywhere;
 }
 
 [data-consent-media-placeholder][hidden],

tests/functional/iframe_embed_test.php

@@ -32,7 +32,9 @@ public function test_custom_iframe_bbcodes_are_deferred_until_media_consent_is_g
 		$post_selector = '#post_content' . $post['topic_id'];
 
 		self::assertCount(1, $crawler->filter($post_selector . ' [data-consent-media-container="1"]'));
-		self::assertCount(1, $crawler->filter($post_selector . ' [data-consent-media-placeholder="1"]'));
+		$placeholder = $crawler->filter($post_selector . ' [data-consent-media-placeholder="1"]');
+		self::assertCount(1, $placeholder);
+		self::assertSame('https://video.example.com/embed/123', $placeholder->attr('data-consent-link'));
 		self::assertCount(1, $crawler->filter($post_selector . ' [data-consent-media-content="1"][hidden="hidden"]'));
 
 		$iframe = $crawler->filter($post_selector . ' iframe[data-consent-media-frame="1"]');

tests/javascript/consentmanager.test.js

@@ -373,6 +373,31 @@ test('saving newly granted media consent activates blocked embeds immediately',
 	expect(frame.hasAttribute('data-consent-src')).toBe(false);
 });
 
+test('renders deferred media placeholder link from original posted URL once before DOMContentLoaded', () => {
+	const { document } = setupConsentManager({
+		readyState: 'loading',
+		extraMarkup: `
+			<span data-consent-media-container="1" data-consent-category="media">
+				<span data-consent-media-placeholder="1" data-consent-link="https://video.example.com/watch?v=123"></span>
+				<span data-consent-media-content="1" hidden="hidden">
+					<iframe
+						data-consent-media-frame="1"
+						data-consent-src="https://media.example.com/embed/123"
+					></iframe>
+				</span>
+			</span>
+		`
+	});
+
+	const placeholder = document.querySelector('[data-consent-media-placeholder="1"]');
+
+	expect(placeholder.textContent).toBe('This content is blocked until you allow embedded media in the Privacy Settings. https://video.example.com/watch?v=123');
+	expect(placeholder.querySelectorAll('a')).toHaveLength(1);
+	expect(placeholder.querySelector('a').getAttribute('href')).toBe('https://video.example.com/watch?v=123');
+	expect(placeholder.querySelector('a').getAttribute('target')).toBe('_blank');
+	expect(placeholder.querySelector('a').getAttribute('rel')).toBe('noopener noreferrer');
+});
+
 test('activates deferred embeds when the media content element is the iframe itself', () => {
 	const { document } = setupConsentManager({
 		localState: createState([ 'necessary', 'media' ], '2026-04-28T00:00:00.000Z'),

tests/service/media_manager_test.php

@@ -93,6 +93,7 @@ public function test_configure_iframe_embeds_rewrites_xsl_generated_iframe_attri
 		self::assertStringContainsString('data-consent-src="https://video.example.com/embed/123"', $template);
 		self::assertStringContainsString('data-consent-onload="boot()"', $template);
 		self::assertStringContainsString('data-consent-media-placeholder="1"', $template);
+		self::assertStringContainsString('data-consent-link="{.}"', $template);
 		self::assertStringContainsString('data-consent-media-frame="1"', $template);
 		self::assertStringNotContainsString('$L_CONSENTMANAGER_MEDIA_PLACEHOLDER', $template);
 		self::assertStringNotContainsString('data-consent-open-settings="1"', $template);
@@ -116,6 +117,7 @@ public function test_configure_iframe_embeds_rewrites_mediaembed_iframes()
 		self::assertStringContainsString('name="data-consent-media-container"', $template);
 		self::assertStringContainsString('name="data-consent-src"', $template);
 		self::assertStringContainsString('data-consent-media-placeholder="1"', $template);
+		self::assertStringContainsString('data-consent-link="{.}"', $template);
 		self::assertStringContainsString('data-consent-media-frame="1"', $template);
 		self::assertStringNotContainsString('$L_CONSENTMANAGER_MEDIA_PLACEHOLDER', $template);
 		self::assertStringNotContainsString('data-consent-open-settings="1"', $template);
@@ -139,6 +141,7 @@ public function test_configure_iframe_embeds_rewrites_custom_s9e_iframes()
 		self::assertStringContainsString('data-consent-media-container="1"', $template);
 		self::assertStringContainsString('data-consent-src="https://video.example.com/embed/123"', $template);
 		self::assertStringContainsString('data-consent-media-placeholder="1"', $template);
+		self::assertStringContainsString('data-consent-link="{.}"', $template);
 		self::assertStringContainsString('data-consent-media-frame="1"', $template);
 		self::assertStringContainsString('class="custom-embed"', $template);
 		self::assertStringContainsString('data-consent-media-content="1"', $template);