From 477fa53cc9eceb43eda7f7a5e4a2ee62d32cfd69 Mon Sep 17 00:00:00 2001
From: Daniel Morse <daniel.morse@pega.com>
Date: Mon, 14 Oct 2019 22:04:56 -0400
Subject: [PATCH] feat: add 'update' method to video to refresh video when
 inside accordion or tabs

---
 .../40-accordion-content-variations.twig       | 14 ++++++++++++++
 .../02-components/tabs/30-tabs-content.twig    | 14 ++++++++++++++
 .../bolt-video/src/video.standalone.js         | 18 ++++++++++++++++++
 3 files changed, 46 insertions(+)

diff --git a/docs-site/src/pages/pattern-lab/_patterns/02-components/accordion/40-accordion-content-variations.twig b/docs-site/src/pages/pattern-lab/_patterns/02-components/accordion/40-accordion-content-variations.twig
index 2fe1d2368b..4f8ea63cdc 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/02-components/accordion/40-accordion-content-variations.twig
+++ b/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
diff --git a/docs-site/src/pages/pattern-lab/_patterns/02-components/tabs/30-tabs-content.twig b/docs-site/src/pages/pattern-lab/_patterns/02-components/tabs/30-tabs-content.twig
index 87a6f46ae0..f6bac41199 100644
--- a/docs-site/src/pages/pattern-lab/_patterns/02-components/tabs/30-tabs-content.twig
+++ b/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,
diff --git a/packages/components/bolt-video/src/video.standalone.js b/packages/components/bolt-video/src/video.standalone.js
index 0631fd23d7..bc8cd17151 100644
--- a/packages/components/bolt-video/src/video.standalone.js
+++ b/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();