Implement SSR for amp-audio extension (#1324)

* Implement SSR for amp-audio extension * Make test input valid AMP * Update expected_output.html Co-authored-by: Sebastian Benz <sebastian.benz@gmail.com>
ampproject · Jun 20, 2022 · 678c0e2 · 678c0e2
1 parent 4afdd75
commit 678c0e2
Show file tree

Hide file tree

Showing 5 changed files with 41 additions and 18 deletions.
diff --git a/packages/optimizer/lib/transformers/ServerSideRendering.js b/packages/optimizer/lib/transformers/ServerSideRendering.js
@@ -20,6 +20,7 @@ const {
   remove,
   createElement,
   insertBefore,
+  insertAfter,
   nextNode,
   firstChildByTag,
 } = require('../NodeUtils');
@@ -81,12 +82,9 @@ class ServerSideRendering {
         this.log_.debug('cannot remove boilerplate: amp-experiment');
       }
 
-      // amp-audio requires knowing the dimensions of the browser. Do not
-      // remove the boilerplate or apply layout if amp-audio is present in the
-      // document.
+      // Server-side rendering of an amp-audio element.
       if (node.tagName === 'amp-audio') {
-        canRemoveBoilerplate = false;
-        this.log_.debug('cannot remove boilerplate: amp-audio');
+        this.ssrAmpAudio(node);
         continue;
       }
 
@@ -211,6 +209,21 @@ class ServerSideRendering {
       return nextNode(node);
     }
   }
+
+  ssrAmpAudio(node) {
+    // Check if we already have a SSR-ed audio element.
+    for (const child of node.children || []) {
+      if (child.tagName === 'audio') {
+        return;
+      }
+    }
+
+    const audio = createElement('audio', {
+      controls: '',
+    });
+
+    insertAfter(node, audio);
+  }
 }
 
 module.exports = ServerSideRendering;
diff --git a/.../transformers/valid/ServerSideRendering/does_not_transform_amp_audio/expected_output.html b/.../transformers/valid/ServerSideRendering/does_not_transform_amp_audio/expected_output.html
diff --git a/...mizer/spec/transformers/valid/ServerSideRendering/does_not_transform_amp_audio/input.html b/...mizer/spec/transformers/valid/ServerSideRendering/does_not_transform_amp_audio/input.html
diff --git a/...zer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/expected_output.html b/...zer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/expected_output.html
@@ -0,0 +1,12 @@
+<html ⚡ i-amphtml-layout i-amphtml-no-boilerplate>
+<head><style amp-runtime></style>
+</head>
+<body>
+  <amp-audio><audio controls></audio></amp-audio>
+  <amp-audio src="https://example.com/audio.mp3" width="300"><audio controls></audio></amp-audio>
+  <amp-audio src="https://example.com/audio.mp3" width="300">
+    <div fallback>Your browser doesn’t support HTML5 audio</div>
+    <audio controls></audio>
+  </amp-audio>
+</body>
+</html>
diff --git a/...ges/optimizer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/input.html b/...ges/optimizer/spec/transformers/valid/ServerSideRendering/transforms_amp_audio/input.html
@@ -0,0 +1,11 @@
+<html ⚡>
+  <head></head>
+  <body>
+    <amp-audio></amp-audio>
+    <amp-audio src="https://example.com/audio.mp3" width="300"></amp-audio>
+    <amp-audio src="https://example.com/audio.mp3" width="300">
+      <div fallback>Your browser doesn’t support HTML5 audio</div>
+      <audio controls></audio>
+    </amp-audio>
+  </body>
+</html>