[Glitch] Show media modal on public pages

Port ff7941e652af1d54d9c991254556e7932a8b183c to glitch-soc

1 files changed, 10 insertions, 6 deletions

diff --git a/app/javascript/flavours/glitch/packs/public.js b/app/javascript/flavours/glitch/packs/public.js
index 9ea82b53a..ed685b6b7 100644
--- a/app/javascript/flavours/glitch/packs/public.js
+++ b/app/javascript/flavours/glitch/packs/public.js
@@ -7,7 +7,6 @@ function main() {
   const { getLocale } = require('locales');
   const { localeData } = getLocale();
   const VideoContainer = require('flavours/glitch/containers/video_container').default;
-  const MediaGalleryContainer = require('flavours/glitch/containers/media_gallery_container').default;
   const CardContainer = require('flavours/glitch/containers/card_container').default;
   const React = require('react');
   const ReactDOM = require('react-dom');
@@ -58,15 +57,20 @@ function main() {
       ReactDOM.render(<VideoContainer locale={locale} {...props} />, content);
     });
 
-    [].forEach.call(document.querySelectorAll('[data-component="MediaGallery"]'), (content) => {
-      const props = JSON.parse(content.getAttribute('data-props'));
-      ReactDOM.render(<MediaGalleryContainer locale={locale} {...props} />, content);
-    });
-
     [].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => {
       const props = JSON.parse(content.getAttribute('data-props'));
       ReactDOM.render(<CardContainer locale={locale} {...props} />, content);
     });
+
+    const mediaGalleries = document.querySelectorAll('[data-component="MediaGallery"]');
+
+    if (mediaGalleries.length > 0) {
+      const MediaGalleriesContainer = require('flavours/glitch/containers/media_galleries_container').default;
+      const content = document.createElement('div');
+
+      ReactDOM.render(<MediaGalleriesContainer locale={locale} galleries={mediaGalleries} />, content);
+      document.body.appendChild(content);
+    }
   });
 }