Merge pull request #709 from vimeo/destroy-wrapper-div

Remove wrapper div when destroying player
vimeo · Apr 15, 2021 · 78e344c · 78e344c
2 parents 3e240bb + b1f64ed
commit 78e344c
Show file tree

Hide file tree

Showing 7 changed files with 47 additions and 11 deletions.
diff --git a/dist/player.es.js b/dist/player.es.js
@@ -1726,7 +1726,13 @@ var Player = /*#__PURE__*/function () {
         }
 
         if (_this5.element && _this5.element.nodeName === 'IFRAME' && _this5.element.parentNode) {
-          _this5.element.parentNode.removeChild(_this5.element);
+          // If we've added an additional wrapper div, remove that from the DOM.
+          // If not, just remove the iframe element.
+          if (_this5._originalElement !== _this5.element.parentNode && _this5.element.parentNode.parentNode) {
+            _this5.element.parentNode.parentNode.removeChild(_this5.element.parentNode);
+          } else {
+            _this5.element.parentNode.removeChild(_this5.element);
+          }
         } // If the clip is private there is a case where the element stays the
         // div element. Destroy should reset the div and remove the iframe child.
 
@@ -1737,7 +1743,13 @@ var Player = /*#__PURE__*/function () {
           var iframe = _this5.element.querySelector('iframe');
 
           if (iframe && iframe.parentNode) {
-            iframe.parentNode.removeChild(iframe);
+            // If we've added an additional wrapper div, remove that from the DOM.
+            // If not, just remove the iframe element.
+            if (_this5._originalElement !== iframe.parentNode && iframe.parentNode.parentNode) {
+              iframe.parentNode.parentNode.removeChild(iframe.parentNode);
+            } else {
+              iframe.parentNode.removeChild(iframe);
+            }
           }
         }
 

diff --git a/dist/player.js b/dist/player.js
diff --git a/dist/player.js.map b/dist/player.js.map
diff --git a/dist/player.min.js b/dist/player.min.js
diff --git a/dist/player.min.js.map b/dist/player.min.js.map
diff --git a/src/player.js b/src/player.js
@@ -547,7 +547,13 @@ class Player {
             }
 
             if (this.element && this.element.nodeName === 'IFRAME' && this.element.parentNode) {
-                this.element.parentNode.removeChild(this.element);
+                // If we've added an additional wrapper div, remove that from the DOM.
+                // If not, just remove the iframe element.
+                if (this._originalElement !== this.element.parentNode && this.element.parentNode.parentNode) {
+                    this.element.parentNode.parentNode.removeChild(this.element.parentNode);
+                } else {
+                    this.element.parentNode.removeChild(this.element);
+                }
             }
 
             // If the clip is private there is a case where the element stays the
@@ -556,7 +562,13 @@ class Player {
                 this.element.removeAttribute('data-vimeo-initialized');
                 const iframe = this.element.querySelector('iframe');
                 if (iframe && iframe.parentNode) {
-                    iframe.parentNode.removeChild(iframe);
+                    // If we've added an additional wrapper div, remove that from the DOM.
+                    // If not, just remove the iframe element.
+                    if (this._originalElement !== iframe.parentNode && iframe.parentNode.parentNode) {
+                        iframe.parentNode.parentNode.removeChild(iframe.parentNode);
+                    } else {
+                        iframe.parentNode.removeChild(iframe);
+                    }
                 }
             }
 

diff --git a/test/embed-test.js b/test/embed-test.js
@@ -28,7 +28,7 @@ test('getOEmbedData doesn’t operate on non-Vimeo urls', async (t) => {
 
 test('getOEmbedData returns a json oembed response', async (t) => {
     t.plan(2);
-    const result = await getOEmbedData('https://player.vimeo.com/video/18');
+    const result = await getOEmbedData('https://player.vimeo.com/video/336812660');
     t.is(typeof result, 'object');
     t.is(result.type, 'video');
 });
@@ -65,7 +65,7 @@ test('createEmbed returns the iframe from a responsive embed', (t) => {
 });
 
 test('initializeEmbeds should create embeds', async (t) => {
-    const div = html`<div data-vimeo-id="18" data-vimeo-width="640" id="handstick"></div>`;
+    const div = html`<div data-vimeo-id="336812660" data-vimeo-width="640" id="handstick"></div>`;
     document.body.appendChild(div);
 
     await new Promise((resolve, reject) => {