From b2544734c79cbcdfc29f0b8802f4ccaefec04139 Mon Sep 17 00:00:00 2001
From: mgabdev <>
Date: Mon, 15 Jun 2020 11:06:53 -0400
Subject: [PATCH] Attempting to remove packs/public (check)
Attempting to remove packs/public but running into issues with webpacker when removing main() in public.js
Deleting this unused main() [the import of MediaContainer] or MediaContainer or the Poll import in MediaContainer causes this error.
Commenting out or putting return; works fine. but cannot delete that import or reactComponents variable for some reason.
---
app/helpers/application_helper.rb | 8 -
.../gabsocial/containers/media_container.js | 75 +-----
app/javascript/packs/public.js | 236 +-----------------
app/views/admin/reports/_status.html.haml | 7 -
.../stream_entries/_detailed_status.html.haml | 14 --
.../stream_entries/_simple_status.html.haml | 14 --
6 files changed, 16 insertions(+), 338 deletions(-)
diff --git a/app/helpers/application_helper.rb b/app/helpers/application_helper.rb
index e76df3e0..4c253aa7 100644
--- a/app/helpers/application_helper.rb
+++ b/app/helpers/application_helper.rb
@@ -85,14 +85,6 @@ module ApplicationHelper
tag(:meta, content: content, property: property)
end
- def react_component(name, props = {}, &block)
- if block.nil?
- content_tag(:div, nil, data: { component: name.to_s.camelcase, props: Oj.dump(props) })
- else
- content_tag(:div, data: { component: name.to_s.camelcase, props: Oj.dump(props) }, &block)
- end
- end
-
def body_classes
output = (@body_classes || '').split(' ')
output << "theme-#{current_theme.parameterize}"
diff --git a/app/javascript/gabsocial/containers/media_container.js b/app/javascript/gabsocial/containers/media_container.js
index b622f9b7..3fc9d2ca 100644
--- a/app/javascript/gabsocial/containers/media_container.js
+++ b/app/javascript/gabsocial/containers/media_container.js
@@ -1,80 +1,11 @@
-import React, { PureComponent, Fragment } from 'react';
-import ReactDOM from 'react-dom';
-import PropTypes from 'prop-types';
-import { IntlProvider, addLocaleData } from 'react-intl';
-import { getLocale } from '../locales';
-import MediaGallery from 'gabsocial/components/media_gallery';
-import Video from 'gabsocial/components/video';
-import Card from 'gabsocial/components/status_card';
-import Poll from 'gabsocial/components/poll';
-import { List as ImmutableList, fromJS } from 'immutable';
-
-const { localeData, messages } = getLocale();
-addLocaleData(localeData);
-
-const MEDIA_COMPONENTS = { MediaGallery, Video, Card, Poll };
+import Poll from 'gabsocial/components/poll'
export default class MediaContainer extends PureComponent {
- static propTypes = {
- locale: PropTypes.string.isRequired,
- components: PropTypes.object.isRequired,
- };
-
- state = {
- media: null,
- index: null,
- time: null,
- };
-
- handleOpenMedia = (media, index) => {
- document.body.classList.add('with-modals--active');
- this.setState({ media, index });
- }
-
- handleOpenVideo = (video, time) => {
- const media = ImmutableList([video]);
-
- document.body.classList.add('with-modals--active');
- this.setState({ media, time });
- }
-
- handleCloseMedia = () => {
- document.body.classList.remove('with-modals--active');
- this.setState({ media: null, index: null, time: null });
- }
-
render () {
- const { locale, components } = this.props;
-
return (
-
-
- {[].map.call(components, (component, i) => {
- const componentName = component.getAttribute('data-component');
- const Component = MEDIA_COMPONENTS[componentName];
- const { media, card, poll, ...props } = JSON.parse(component.getAttribute('data-props'));
-
- Object.assign(props, {
- ...(media ? { media: fromJS(media) } : {}),
- ...(card ? { card: fromJS(card) } : {}),
- ...(poll ? { poll: fromJS(poll) } : {}),
-
- ...(componentName === 'Video' ? {
- onOpenVideo: this.handleOpenVideo,
- } : {
- onOpenMedia: this.handleOpenMedia,
- }),
- });
-
- return ReactDOM.createPortal(
- ,
- component,
- );
- })}
-
-
- );
+
+ )
}
}
\ No newline at end of file
diff --git a/app/javascript/packs/public.js b/app/javascript/packs/public.js
index 0754cb06..e2acb321 100644
--- a/app/javascript/packs/public.js
+++ b/app/javascript/packs/public.js
@@ -1,239 +1,29 @@
-'use strict';
-
-import escapeTextContentForBrowser from 'escape-html';
import loadPolyfills from '../gabsocial/load_polyfills';
import ready from '../gabsocial/ready';
import { start } from '../gabsocial/common';
start();
-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,
- }, '*');
- });
-});
-
+/**
+ * : todo : deleting this unused main() [the import of MediaContainer] or MediaContainer or the Poll import in MediaContainer causes this error:
+ * commenting out or putting return; works fine. but cannot delete that import or reactComponents variable for some reason.
+ * Webpacker::Manifest::MissingEntryError at /settings/preferences
+ * Webpacker can't find common in gab-social/public/packs/manifest.json. Possible causes:
+ * 1. You want to set webpacker.yml value of compile to true for your environment
+ * unless you are using the `webpack -w` or the webpack-dev-server.
+ * 2. webpack has not yet re-run to reflect updates.
+ * 3. You have misconfigured Webpacker's config/webpacker.yml file.
+ * 4. Your webpack configuration is not creating a manifest.
+ */
function main ( ) {
- const IntlMessageFormat = require('intl-messageformat').default;
- const { timeAgoString } = require('../gabsocial/components/relative_timestamp');
- const { delegate } = require('rails-ujs');
- // const emojify = require('../gabsocial/components/emoji/emoji').default;
- const { getLocale } = require('../gabsocial/locales');
- const { messages } = getLocale();
- //(Rjc) 2019-05-24 defined but never used
- // const React = require('react');
- const ReactDOM = require('react-dom');
- const createHistory = require('history').createBrowserHistory;
-
- const scrollToDetailedStatus = () => {
- const history = createHistory();
- const detailedStatuses = document.querySelectorAll('.public-layout .detailed-status');
- const location = history.location;
-
- if (detailedStatuses.length === 1 && (!location.state || !location.state.scrolledToDetailedStatus)) {
- detailedStatuses[0].scrollIntoView();
- history.replace(location.pathname, { ...location.state, scrolledToDetailedStatus: true });
- }
- };
-
ready(() => {
- const locale = document.documentElement.lang;
-
- const dateTimeFormat = new Intl.DateTimeFormat(locale, {
- year: 'numeric',
- month: 'long',
- day: 'numeric',
- hour: 'numeric',
- minute: 'numeric',
- });
-
- // [].forEach.call(document.querySelectorAll('.emojify'), (content) => {
- // content.innerHTML = emojify(content.innerHTML);
- // });
-
- [].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'));
- const now = new Date();
-
- content.title = dateTimeFormat.format(datetime);
- content.textContent = timeAgoString({
- formatMessage: ({ id, defaultMessage }, values) => (new IntlMessageFormat(messages[id] || defaultMessage, locale)).format(values),
- formatDate: (date, options) => (new Intl.DateTimeFormat(locale, options)).format(date),
- }, datetime, now, now.getFullYear());
- });
-
const reactComponents = document.querySelectorAll('[data-component]');
-
if (reactComponents.length > 0) {
- import(/* webpackChunkName: "containers/media_container" */ '../gabsocial/containers/media_container')
- .then(({ default: MediaContainer }) => {
- [].forEach.call(reactComponents, (component) => {
- [].forEach.call(component.children, (child) => {
- component.removeChild(child);
- });
- });
- const content = document.createElement('div');
-
- ReactDOM.render(, content);
- document.body.appendChild(content);
- scrollToDetailedStatus();
- })
- .catch(error => {
- console.error(error);
- scrollToDetailedStatus();
- });
- } else {
- scrollToDetailedStatus();
+ import(/* webpackChunkName: "defunct/media_container" */ '../gabsocial/containers/media_container').then(() => {})
}
-
- if (document.body.classList.contains('with-modals')) {
- const scrollbarWidth = window.innerWidth - document.documentElement.clientWidth;
- const scrollbarWidthStyle = document.createElement('style');
- scrollbarWidthStyle.id = 'scrollbar-width';
- document.head.appendChild(scrollbarWidthStyle);
- scrollbarWidthStyle.sheet.insertRule(`body.with-modals--active { margin-right: ${scrollbarWidth}px; }`, 0);
- }
- });
-
- delegate(document, '.webapp-btn', 'click', ({ target, button }) => {
- if (button !== 0) {
- return true;
- }
- window.location.href = target.href;
- return false;
- });
-
- 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;
- } else {
- contentEl.style.display = 'block';
- target.parentNode.style.marginBottom = null;
- }
-
- return false;
- });
-
- delegate(document, '.modal-button', 'click', e => {
- e.preventDefault();
-
- let href;
-
- if (e.target.nodeName !== 'A') {
- href = e.target.parentNode.href;
- } else {
- href = e.target.href;
- }
-
- window.open(href, 'gabsocial-intent', 'width=445,height=600,resizable=no,menubar=no,status=no,scrollbars=yes');
- });
-
- delegate(document, '#account_display_name', 'input', ({ target }) => {
- const name = document.querySelector('.card .display-name strong');
- if (name) {
- if (target.value) {
- // name.innerHTML = emojify(escapeTextContentForBrowser(target.value));
- } else {
- name.textContent = document.querySelector('#default_account_display_name').textContent;
- }
- }
- });
-
- delegate(document, '#account_avatar', 'change', ({ target }) => {
- const avatar = document.querySelector('.card .avatar img');
- const [file] = target.files || [];
- const url = file ? URL.createObjectURL(file) : avatar.dataset.originalSrc;
-
- avatar.src = url;
- });
-
- const getProfileAvatarAnimationHandler = (swapTo) => {
- //animate avatar gifs on the profile page when moused over
- return ({ target }) => {
- const swapSrc = target.getAttribute(swapTo);
- //only change the img source if autoplay is off and the image src is actually different
- if(target.getAttribute('data-autoplay') === 'false' && target.src !== swapSrc) {
- target.src = swapSrc;
- }
- };
- };
-
- delegate(document, 'img#profile_page_avatar', 'mouseover', getProfileAvatarAnimationHandler('data-original'));
-
- delegate(document, 'img#profile_page_avatar', 'mouseout', getProfileAvatarAnimationHandler('data-static'));
-
- delegate(document, '#account_header', 'change', ({ target }) => {
- const header = document.querySelector('.card .card__img img');
- const [file] = target.files || [];
- const url = file ? URL.createObjectURL(file) : header.dataset.originalSrc;
-
- header.src = url;
- });
-
- delegate(document, '#account_locked', 'change', ({ target }) => {
- const lock = document.querySelector('.card .display-name i');
-
- if (target.checked) {
- lock.style.display = 'inline';
- } else {
- lock.style.display = 'none';
- }
- });
-
- delegate(document, '.input-copy input', 'click', ({ target }) => {
- target.focus();
- target.select();
- target.setSelectionRange(0, target.value.length);
- });
-
- delegate(document, '.input-copy button', 'click', ({ target }) => {
- const input = target.parentNode.querySelector('.input-copy__wrapper input');
-
- const oldReadOnly = input.readonly;
-
- input.readonly = false;
- input.focus();
- input.select();
- input.setSelectionRange(0, input.value.length);
-
- try {
- if (document.execCommand('copy')) {
- input.blur();
- target.parentNode.classList.add('copied');
-
- setTimeout(() => {
- target.parentNode.classList.remove('copied');
- }, 700);
- }
- } catch (err) {
- console.error(err);
- }
-
- input.readonly = oldReadOnly;
});
}
-loadPolyfills().then(main).catch(error => {
+loadPolyfills().catch((error) => {
console.error(error);
});
diff --git a/app/views/admin/reports/_status.html.haml b/app/views/admin/reports/_status.html.haml
index b3c14512..77408bcd 100644
--- a/app/views/admin/reports/_status.html.haml
+++ b/app/views/admin/reports/_status.html.haml
@@ -11,13 +11,6 @@
%strong> Content warning: #{Formatter.instance.format_spoiler(status.proper)}
= Formatter.instance.format(status.proper, custom_emojify: true)
- - unless status.proper.media_attachments.empty?
- - if status.proper.media_attachments.first.video?
- - video = status.proper.media_attachments.first
- = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), sensitive: !current_account&.user&.show_all_media? && status.proper.sensitive? || current_account&.user&.hide_all_media?, width: 610, height: 343, inline: true, alt: video.description
- - else
- = react_component :media_gallery, height: 343, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.proper.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }
-
.detailed-status__meta
= link_to TagManager.instance.url_for(status), class: 'detailed-status__datetime', target: stream_link_target, rel: 'noopener' do
%time.formatted{ datetime: status.created_at.iso8601, title: l(status.created_at) }= l(status.created_at)
diff --git a/app/views/stream_entries/_detailed_status.html.haml b/app/views/stream_entries/_detailed_status.html.haml
index 226ed5f8..39f28682 100644
--- a/app/views/stream_entries/_detailed_status.html.haml
+++ b/app/views/stream_entries/_detailed_status.html.haml
@@ -22,20 +22,6 @@
%a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more')
.e-content{ lang: status.language, style: "display: #{!current_account&.user&.setting_expand_spoilers && status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay)
- - if status.preloadable_poll
- = react_component :poll, disabled: true, poll: ActiveModelSerializers::SerializableResource.new(status.preloadable_poll, serializer: REST::PollSerializer, scope: current_user, scope_name: :current_user).as_json do
- = render partial: 'stream_entries/poll', locals: { status: status, poll: status.preloadable_poll, autoplay: autoplay }
- - elsif !status.media_attachments.empty?
- - if status.media_attachments.first.video?
- - video = status.media_attachments.first
- = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, width: 670, height: 380, detailed: true, inline: true, alt: video.description do
- = render partial: 'stream_entries/attachment_list', locals: { attachments: status.media_attachments }
- - else
- = react_component :media_gallery, height: 380, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, standalone: true, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, 'reduceMotion': current_account&.user&.setting_reduce_motion, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do
- = render partial: 'stream_entries/attachment_list', locals: { attachments: status.media_attachments }
- - elsif status.preview_card
- = react_component :card, 'maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json
-
.detailed-status__meta
%data.dt-published{ value: status.created_at.to_time.iso8601 }
diff --git a/app/views/stream_entries/_simple_status.html.haml b/app/views/stream_entries/_simple_status.html.haml
index 0df7497e..61d28c06 100644
--- a/app/views/stream_entries/_simple_status.html.haml
+++ b/app/views/stream_entries/_simple_status.html.haml
@@ -26,20 +26,6 @@
%a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more')
.e-content{ lang: status.language, style: "display: #{!current_account&.user&.setting_expand_spoilers && status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status, custom_emojify: true, autoplay: autoplay)
- - if status.preloadable_poll
- = react_component :poll, disabled: true, poll: ActiveModelSerializers::SerializableResource.new(status.preloadable_poll, serializer: REST::PollSerializer, scope: current_user, scope_name: :current_user).as_json do
- = render partial: 'stream_entries/poll', locals: { status: status, poll: status.preloadable_poll, autoplay: autoplay }
- - elsif !status.media_attachments.empty?
- - if status.media_attachments.first.video?
- - video = status.media_attachments.first
- = react_component :video, src: video.file.url(:original), preview: video.file.url(:small), blurhash: video.blurhash, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, width: 610, height: 343, inline: true, alt: video.description do
- = render partial: 'stream_entries/attachment_list', locals: { attachments: status.media_attachments }
- - else
- = react_component :media_gallery, height: 343, sensitive: !current_account&.user&.show_all_media? && status.sensitive? || current_account&.user&.hide_all_media?, 'autoPlayGif': current_account&.user&.setting_auto_play_gif || autoplay, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json } do
- = render partial: 'stream_entries/attachment_list', locals: { attachments: status.media_attachments }
- - elsif status.preview_card
- = react_component :card, 'maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_card, serializer: REST::PreviewCardSerializer).as_json
-
.status__action-bar
.status__action-bar__counter
= link_to remote_interaction_path(status, type: :reply), class: 'status__action-bar-button icon-button modal-button', style: 'font-size: 18px; width: 23.1429px; height: 23.1429px; line-height: 23.15px;' do