From b75a0e6ba1d82c53b6c0df054acb52e19324bd46 Mon Sep 17 00:00:00 2001
From: slorber <lorber.sebastien@gmail.com>
Date: Tue, 6 Oct 2020 20:02:33 +0200
Subject: [PATCH] Add ability to initialize snackplayer after navigation and
 tab changes

---
 website/docusaurus.config.js      |  2 +-
 website/sitePlugin.js             | 19 +++++++++++
 website/snackPlayerInitializer.js | 53 +++++++++++++++++++++++++++++++
 3 files changed, 73 insertions(+), 1 deletion(-)
 create mode 100644 website/sitePlugin.js
 create mode 100644 website/snackPlayerInitializer.js

diff --git a/website/docusaurus.config.js b/website/docusaurus.config.js
index ee660862b95..6f6ec4ccae4 100644
--- a/website/docusaurus.config.js
+++ b/website/docusaurus.config.js
@@ -353,7 +353,7 @@ module.exports = {
       },
     ],
   ],
-  plugins: ['docusaurus-plugin-sass'],
+  plugins: ['docusaurus-plugin-sass', './sitePlugin'],
   themeConfig: {
     prism: {
       defaultLanguage: 'jsx',
diff --git a/website/sitePlugin.js b/website/sitePlugin.js
new file mode 100644
index 00000000000..28739420f51
--- /dev/null
+++ b/website/sitePlugin.js
@@ -0,0 +1,19 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+const path = require('path');
+
+// TODO this plugin could be removed after PR merged:
+// https://github.com/facebook/docusaurus/pull/3545
+module.exports = function() {
+  return {
+    plugin: 'site-plugin',
+    getClientModules() {
+      return [path.resolve(__dirname, './snackPlayerInitializer')];
+    },
+  };
+};
diff --git a/website/snackPlayerInitializer.js b/website/snackPlayerInitializer.js
new file mode 100644
index 00000000000..9b83dbd7505
--- /dev/null
+++ b/website/snackPlayerInitializer.js
@@ -0,0 +1,53 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import ExecutionEnvironment from '@docusaurus/ExecutionEnvironment';
+
+export default (function() {
+  if (!ExecutionEnvironment.canUseDOM) {
+    return null;
+  }
+
+  function initSnackPlayers() {
+    console.log('initSnackPlayers');
+    window.ExpoSnack.initialize();
+  }
+
+  function setupTabPanelsMutationObservers() {
+    const tabPanels = document.querySelectorAll('[role=tabpanel]');
+    console.log('setupTabPanelsMutationObservers', {tabPanels});
+    tabPanels.forEach(tabPanel => {
+      new MutationObserver(function(mutations, observer) {
+        initSnackPlayers();
+        console.log('tabPanel MutationObserver triggered', {tabPanels});
+      }).observe(tabPanel, {childList: true});
+    });
+  }
+
+  if (document.readyState === 'complete') {
+    setupTabPanelsMutationObservers();
+  } else {
+    document.addEventListener('readystatechange', function() {
+      if (document.readyState === 'complete') {
+        setupTabPanelsMutationObservers();
+      }
+    });
+  }
+
+  return {
+    onRouteUpdate({location}) {
+      console.log('onRouteUpdate', {location});
+
+      // TODO temporary, because onRouteUpdate fires before the new route renders...
+      // see https://github.com/facebook/docusaurus/issues/3399#issuecomment-704401189
+      setTimeout(() => {
+        initSnackPlayers();
+        setupTabPanelsMutationObservers();
+      }, 0);
+    },
+  };
+})();