feat: add 'update' method to video to refresh video when inside accor…

…dion or tabs

docs-site/src/pages/pattern-lab/_patterns/02-components/accordion/40-accordion-content-variations.twig

@@ -255,6 +255,16 @@
   } only %}
 {% endset %}
 
+{% set video_content %}
+  {% include "@bolt/video.twig" with {
+    "videoId": "3861325118001",
+    "accountId": "1900410236",
+    "playerId": "r1CAdLzTW",
+    "showMeta": true,
+    "showMetaTitle": true
+  } only %}
+{% endset %}
+
 <h3>Pass various components into the content</h3>
 {% include "@bolt-components-accordion/accordion.twig" with {
   box_shadow: true,
@@ -271,6 +281,10 @@
       trigger: "Expand this to see a share tool and a paragraph of text",
       content: share_content
     },
+    {
+      trigger: "Expand this to see a video",
+      content: video_content
+    },
     {
       trigger: "Expand this to see tabs",
       content: tabs_content

docs-site/src/pages/pattern-lab/_patterns/02-components/tabs/30-tabs-content.twig

@@ -153,6 +153,16 @@
   } only %}
 {% endset %}
 
+{% set video_content %}
+  {% include "@bolt/video.twig" with {
+    "videoId": "3861325118001",
+    "accountId": "1900410236",
+    "playerId": "r1CAdLzTW",
+    "showMeta": true,
+    "showMetaTitle": true
+  } only %}
+{% endset %}
+
 <div class="u-bolt-margin-bottom-small">
   {% grid "o-bolt-grid--flex o-bolt-grid--middle o-bolt-grid--center" %}
     {% cell "u-bolt-width-12/12 u-bolt-width-9/12@small" %}
@@ -170,6 +180,10 @@
             label: "A teaser",
             content: teaser_content
           },
+          {
+            label: "A video",
+            content: video_content,
+          },
           {
             label: "An accordion",
             content: accordion_content,

packages/components/bolt-video/src/video.standalone.js

@@ -359,6 +359,7 @@ class BoltVideo extends withPreact() {
 
     if (this.player) {
       this.player.dispose();
+      this.hasInitialized = false;
     }
   }
 
@@ -600,11 +601,28 @@ class BoltVideo extends withPreact() {
       }
 
       this.hasInitialized = true;
+
+      if (this.offsetHeight) {
+        // Set flag so that video will not be re-initialized unnecessarily on update()
+        this.removeAttribute('will-update', '');
+      } else {
+        // If not visible, add attribute so that it can be found by other components and updated manually.
+        this.setAttribute('will-update', '');
+      }
     } catch (error) {
       console.log(error);
     }
   }
 
+  update() {
+    // Brightcove doesn't have a simple "reset/update" method that I could find, so we must dispose and reinit
+    if (this.player) {
+      this.player.dispose();
+      this.hasInitialized = false;
+      this.triggerUpdate();
+    }
+  }
+
   rendered() {
     super.rendered && super.rendered();