1 files changed, 55 insertions, 17 deletions

diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index e9bb4a42e..8842d6dcb 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -1,5 +1,22 @@
 import loadPolyfills from '../mastodon/load_polyfills';
 import { processBio } from '../glitch/util/bio_metadata';
+import ready from '../mastodon/ready';
+
+window.addEventListener('message', e => {
+  const data = e.data || {};
+
+  if (!window.parent || data.type !== 'setHeight') {
+    return;
+  }
+
+  ready(() => {
+    window.parent.postMessage({
+      type: 'setHeight',
+      id: data.id,
+      height: document.getElementsByTagName('html')[0].scrollHeight,
+    }, '*');
+  });
+});
 
 function main() {
   const { length } = require('stringz');
@@ -7,13 +24,18 @@ function main() {
   const { delegate } = require('rails-ujs');
   const emojify = require('../mastodon/emoji').default;
   const { getLocale } = require('../mastodon/locales');
-  const ready = require('../mastodon/ready').default;
-
   const { localeData } = getLocale();
+  const VideoContainer = require('../mastodon/containers/video_container').default;
+  const MediaGalleryContainer = require('../mastodon/containers/media_gallery_container').default;
+  const CardContainer = require('../mastodon/containers/card_container').default;
+  const React = require('react');
+  const ReactDOM = require('react-dom');
+
   localeData.forEach(IntlRelativeFormat.__addLocaleData);
 
   ready(() => {
     const locale = document.documentElement.lang;
+
     const dateTimeFormat = new Intl.DateTimeFormat(locale, {
       year: 'numeric',
       month: 'long',
@@ -21,6 +43,7 @@ function main() {
       hour: 'numeric',
       minute: 'numeric',
     });
+
     const relativeFormat = new IntlRelativeFormat(locale);
 
     [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
@@ -30,30 +53,39 @@ function main() {
     [].forEach.call(document.querySelectorAll('time.formatted'), (content) => {
       const datetime = new Date(content.getAttribute('datetime'));
       const formattedDate = dateTimeFormat.format(datetime);
+
       content.title = formattedDate;
       content.textContent = formattedDate;
     });
 
     [].forEach.call(document.querySelectorAll('time.time-ago'), (content) => {
       const datetime = new Date(content.getAttribute('datetime'));
+
+      content.title = dateTimeFormat.format(datetime);
       content.textContent = relativeFormat.format(datetime);
     });
-  });
 
-  delegate(document, '.video-player video', 'click', ({ target }) => {
-    if (target.paused) {
-      target.play();
-    } else {
-      target.pause();
-    }
-  });
+    [].forEach.call(document.querySelectorAll('.logo-button'), (content) => {
+      content.addEventListener('click', (e) => {
+        e.preventDefault();
+        window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes');
+      });
+    });
 
-  delegate(document, '.activity-stream .media-spoiler-wrapper .media-spoiler', 'click', function() {
-    this.parentNode.classList.add('media-spoiler-wrapper__visible');
-  });
+    [].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => {
+      const props = JSON.parse(content.getAttribute('data-props'));
+      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);
+    });
 
-  delegate(document, '.activity-stream .media-spoiler-wrapper .spoiler-button', 'click', function() {
-    this.parentNode.classList.remove('media-spoiler-wrapper__visible');
+    [].forEach.call(document.querySelectorAll('[data-component="Card"]'), (content) => {
+      const props = JSON.parse(content.getAttribute('data-props'));
+      ReactDOM.render(<CardContainer locale={locale} {...props} />, content);
+    });
   });
 
   delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
@@ -66,6 +98,7 @@ function main() {
 
   delegate(document, '.status__content__spoiler-link', 'click', ({ target }) => {
     const contentEl = target.parentNode.parentNode.querySelector('.e-content');
+
     if (contentEl.style.display === 'block') {
       contentEl.style.display = 'none';
       target.parentNode.style.marginBottom = 0;
@@ -73,11 +106,13 @@ function main() {
       contentEl.style.display = 'block';
       target.parentNode.style.marginBottom = null;
     }
+
     return false;
   });
 
   delegate(document, '.account_display_name', 'input', ({ target }) => {
     const nameCounter = document.querySelector('.name-counter');
+
     if (nameCounter) {
       nameCounter.textContent = 30 - length(target.value);
     }
@@ -85,6 +120,7 @@ function main() {
 
   delegate(document, '.account_note', 'input', ({ target }) => {
     const noteCounter = document.querySelector('.note-counter');
+
     if (noteCounter) {
       const noteWithoutMetadata = processBio(target.value).text;
       noteCounter.textContent = 500 - length(noteWithoutMetadata);
@@ -94,14 +130,16 @@ function main() {
   delegate(document, '#account_avatar', 'change', ({ target }) => {
     const avatar = document.querySelector('.card.compact .avatar img');
     const [file] = target.files || [];
-    const url = URL.createObjectURL(file);
+    const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
+
     avatar.src = url;
   });
 
   delegate(document, '#account_header', 'change', ({ target }) => {
     const header = document.querySelector('.card.compact');
     const [file] = target.files || [];
-    const url = URL.createObjectURL(file);
+    const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
+
     header.style.backgroundImage = `url(${url})`;
   });
 }