Merge branch 'develop' of https://code.gab.com/gab/social/gab-social into develop

README.md

@@ -19,10 +19,10 @@ We have diverged from Mastodon in several ways in pursuit of our own goals.
 1. Quote posting
 
 ## BTCPay
-In order to make BTC flow work, 3 enviornment variables need to be set:
+In order to make BTC flow work, 3 environment variables need to be set:
 
-- `BTCPAY_LEGACY_TOKEN`: So called Legacy Tokens can be found in https://btcpay.xxx.com/stores/yyy/Tokens
-- `BTCPAY_PUB_KEY`: Public key that is used when creating an access token or pairing https://btcpay.xxx.com/stores/yyy/Tokens/Create
+- `BTCPAY_LEGACY_TOKEN`: So called Legacy Tokens can be found in https://btcpay.[yourdomain].com/stores/[yourstore]/Tokens
+- `BTCPAY_PUB_KEY`: Public key that is used when creating an access token or pairing https://btcpay.[yourdomain].com/stores/[yourstore]/Tokens/Create
 - `BTCPAY_MERCHANT_TOKEN`: Token created for facade *merchant*
 
 ## Deployment

app/javascript/gabsocial/actions/compose.js

@@ -137,6 +137,32 @@ export function directCompose(account, routerHistory) {
  };
 };
 
+export function handleComposeSubmit(dispatch, getState, response, status) {
+ if (!dispatch || !getState) return;
+
+ dispatch(insertIntoTagHistory(response.data.tags, status));
+ dispatch(submitComposeSuccess({ ...response.data }));
+
+ // To make the app more responsive, immediately push the status into the columns
+ const insertIfOnline = timelineId => {
+ const timeline = getState().getIn(['timelines', timelineId]);
+
+ if (timeline && timeline.get('items').size > 0 && timeline.getIn(['items', 0]) !== null && timeline.get('online')) {
+ let dequeueArgs = {};
+ if (timelineId === 'community') dequeueArgs.onlyMedia = getState().getIn(['settings', 'community', 'other', 'onlyMedia']);
+ dispatch(dequeueTimeline(timelineId, null, dequeueArgs));
+ dispatch(updateTimeline(timelineId, { ...response.data }));
+ }
+ };
+
+ if (response.data.visibility !== 'direct') {
+ insertIfOnline('home');
+ } else if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
+ insertIfOnline('community');
+ insertIfOnline('public');
+ }
+}
+
 export function submitCompose(routerHistory, group) {
  return function (dispatch, getState) {
  if (!me) return;
@@ -175,33 +201,7 @@ export function submitCompose(routerHistory, group) {
  if (response.data.visibility === 'direct' && getState().getIn(['conversations', 'mounted']) <= 0 && routerHistory) {
  routerHistory.push('/messages');
  }
-
- dispatch(insertIntoTagHistory(response.data.tags, status));
- dispatch(submitComposeSuccess({ ...response.data }));
-
- // To make the app more responsive, immediately push the status
- // into the columns
-
- const insertIfOnline = timelineId => {
- const timeline = getState().getIn(['timelines', timelineId]);
-
- if (timeline && timeline.get('items').size > 0 && timeline.getIn(['items', 0]) !== null && timeline.get('online')) {
- let dequeueArgs = {};
- if (timelineId === 'community') dequeueArgs.onlyMedia = getState().getIn(['settings', 'community', 'other', 'onlyMedia']),
-
- dispatch(dequeueTimeline(timelineId, null, dequeueArgs));
- dispatch(updateTimeline(timelineId, { ...response.data }));
- }
- };
-
- if (response.data.visibility !== 'direct') {
- insertIfOnline('home');
- }
-
- if (response.data.in_reply_to_id === null && response.data.visibility === 'public') {
- insertIfOnline('community');
- insertIfOnline('public');
- }
+ handleComposeSubmit(dispatch, getState, response, status);
  }).catch(function (error) {
  dispatch(submitComposeFail(error));
  });

app/javascript/gabsocial/actions/streaming.js

@@ -10,6 +10,7 @@ import { updateNotificationsQueue, expandNotifications } from './notifications';
 import { updateConversations } from './conversations';
 import { fetchFilters } from './filters';
 import { getLocale } from '../locales';
+import { handleComposeSubmit } from './compose';
 
 const { messages } = getLocale();
 
@@ -61,3 +62,18 @@ export const connectHashtagStream = (id, tag, accept) => connectTimelineStream
 export const connectDirectStream = () => connectTimelineStream('direct', 'direct');
 export const connectListStream = id => connectTimelineStream(`list:${id}`, `list&list=${id}`);
 export const connectGroupStream = id => connectTimelineStream(`group:${id}`, `group&group=${id}`);
+
+export const connectStatusUpdateStream = () => {
+ return connectStream('statuscard', null, (dispatch, getState) => {
+ return {
+ onConnect() {},
+ onDisconnect() {},
+ onReceive (data) {
+ if (!data['event'] || !data['payload']) return;
+ if (data.event === 'update') {
+ handleComposeSubmit(dispatch, getState, {data: JSON.parse(data.payload)}, null)
+ }
+ },
+ };
+ });
+}
\ No newline at end of file

app/javascript/gabsocial/components/extended_video_player.js

@@ -44,9 +44,9 @@ export default class ExtendedVideoPlayer extends React.PureComponent {
  return (
  <div className='extended-video-player'>
  <video
+ playsInline
  ref={this.setRef}
  src={src}
- autoPlay
  role='button'
  tabIndex='0'
  aria-label={alt}

app/javascript/gabsocial/components/media_gallery.js

@@ -189,6 +189,7 @@ class Item extends React.PureComponent {
  autoPlay={autoPlay}
  loop
  muted
+ playsInline
  />
 
  <span className='media-gallery__gifv__label'>GIF</span>

app/javascript/gabsocial/components/status.js

@@ -380,7 +380,6 @@ class Status extends ImmutablePureComponent {
  <Card
  onOpenMedia={this.props.onOpenMedia}
  card={status.get('card')}
- compact
  cacheWidth={this.props.cacheMediaWidth}
  defaultWidth={this.props.cachedMediaWidth}
  />

app/javascript/gabsocial/containers/gabsocial.js

@@ -11,7 +11,10 @@ import UI from '../features/ui';
 import Introduction from '../features/introduction';
 import { fetchCustomEmojis } from '../actions/custom_emojis';
 import { hydrateStore } from '../actions/store';
-import { connectUserStream } from '../actions/streaming';
+import {
+ connectUserStream,
+ connectStatusUpdateStream,
+} from '../actions/streaming';
 import { IntlProvider, addLocaleData } from 'react-intl';
 import { getLocale } from '../locales';
 import initialState from '../initial_state';
@@ -70,6 +73,7 @@ export default class GabSocial extends React.PureComponent {
 
  componentDidMount() {
  this.disconnect = store.dispatch(connectUserStream());
+ store.dispatch(connectStatusUpdateStream());
  }
 
  componentWillUnmount () {

app/javascript/gabsocial/features/account_gallery/components/media_item.js

@@ -127,6 +127,7 @@ export default class MediaItem extends ImmutablePureComponent {
  autoPlay={autoPlay}
  loop
  muted
+ playsInline
  />
 
  <span className='media-gallery__gifv__label'>GIF</span>

app/javascript/gabsocial/features/status/components/card.js

@@ -58,16 +58,12 @@ export default class Card extends React.PureComponent {
 
  static propTypes = {
  card: ImmutablePropTypes.map,
- maxDescription: PropTypes.number,
  onOpenMedia: PropTypes.func.isRequired,
- compact: PropTypes.bool,
  defaultWidth: PropTypes.number,
  cacheWidth: PropTypes.func,
  };
 
  static defaultProps = {
- maxDescription: 50,
- compact: false,
  };
 
  state = {
@@ -131,37 +127,52 @@ export default class Card extends React.PureComponent {
  ref={this.setRef}
  className='status-card__image status-card-video'
  dangerouslySetInnerHTML={content}
- style={{ height }}
+ style={{
+ height,
+ paddingBottom: 0,
+ }}
  />
  );
  }
 
  render () {
- const { card, maxDescription, compact } = this.props;
+ const { card } = this.props;
  const { width, embedded } = this.state;
 
  if (card === null) {
  return null;
  }
 
- const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
- const horizontal = (!compact && card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
+ const maxDescription = 150;
+ const cardImg = card.get('image');
+ const provider = card.get('provider_name').length === 0 ? decodeIDNA(getHostname(card.get('url'))) : card.get('provider_name');
+ const horizontal = (card.get('width') > card.get('height') && (card.get('width') + 100 >= width)) || card.get('type') !== 'link' || embedded;
  const interactive = card.get('type') !== 'link';
- const className = classnames('status-card', { horizontal, compact, interactive });
- const title = interactive ? <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'><strong>{card.get('title')}</strong></a> : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
- const ratio = card.get('width') / card.get('height');
- const height = (compact && !embedded) ? (width / (16 / 9)) : (width / ratio);
+ const className = classnames('status-card', {
+ horizontal,
+ interactive,
+ compact: !cardImg,
+ });
+ const title = interactive ?
+ <a className='status-card__title' href={card.get('url')} title={card.get('title')} rel='noopener' target='_blank'>
+ <strong>{card.get('title')}</strong>
+ </a>
+ : <strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>;
 
  const description = (
  <div className='status-card__content'>
  {title}
- {!(horizontal || compact) && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
- <span className='status-card__host'>{provider}</span>
+ {!horizontal && <p className='status-card__description'>{trim(card.get('description') || '', maxDescription)}</p>}
+ <span className='status-card__host'>
+ <Icon id='link' fixedWidth />
+ {' '}
+ {provider}
+ </span>
  </div>
  );
 
- let embed  = '';
- let thumbnail = <div style={{ backgroundImage: `url(${card.get('image')})`, width: horizontal ? width : null, height: horizontal ? height : null }} className='status-card__image-image' />;
+ let embed = '';
+ let thumbnail = <div style={{ backgroundImage: `url(${cardImg})` }} className='status-card__image-image' />;
 
  if (interactive) {
  if (embedded) {
@@ -176,7 +187,6 @@ export default class Card extends React.PureComponent {
  embed = (
  <div className='status-card__image'>
  {thumbnail}
-
  <div className='status-card__actions'>
  <div>
  <button onClick={this.handleEmbedClick}><Icon id={iconVariant} /></button>
@@ -190,10 +200,10 @@ export default class Card extends React.PureComponent {
  return (
  <div className={className} ref={this.setRef}>
  {embed}
- {!compact && description}
+ {description}
  </div>
  );
- } else if (card.get('image')) {
+ } else if (cardImg) {
  embed = (
  <div className='status-card__image'>
  {thumbnail}

app/javascript/gabsocial/features/video/index.js

@@ -344,6 +344,7 @@ class Video extends React.PureComponent {
  }
 
  handleProgress = () => {
+ if (!this.video.buffered) return;
  if (this.video.buffered.length > 0) {
  this.setState({ buffer: this.video.buffered.end(0) / this.video.duration * 100 });
  }
@@ -432,6 +433,7 @@ class Video extends React.PureComponent {
  <canvas width={32} height={32} ref={this.setCanvasRef} className={classNames('media-gallery__preview', { 'media-gallery__preview--hidden': revealed })} />
 
  {revealed && <video
+ playsInline
  ref={this.setVideoRef}
  src={src}
  poster={preview}

app/javascript/styles/gabsocial/components.scss

@@ -2192,13 +2192,14 @@ a.account__display-name {
 
 .status-card {
  display: flex;
- font-size: 14px;
- border: 1px solid lighten($ui-base-color, 8%);
+ font-size: 15px;
+ border: 1px solid lighten($ui-base-color, 12%);
  border-radius: 4px;
  color: $dark-text-color;
  margin-top: 14px;
  text-decoration: none;
  overflow: hidden;
+ flex-direction: column;
 
  &__actions {
  bottom: 0;
@@ -2274,7 +2275,7 @@ a.status-card {
  display: block;
  font-weight: 500;
  margin-bottom: 5px;
- color: $darker-text-color;
+ color: $primary-text-color;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
@@ -2284,26 +2285,33 @@ a.status-card {
 .status-card__content {
  flex: 1 1 auto;
  overflow: hidden;
- padding: 14px 14px 14px 8px;
+ padding: 12px 10px;
+ border-top: 1px solid lighten($ui-base-color, 12%);
 }
 
 .status-card__description {
+ display: -webkit-box;
+ -webkit-line-clamp: 2;
+ -webkit-box-orient: vertical;
+ max-height: 40px;
+ overflow: hidden;
  color: $darker-text-color;
 }
 
 .status-card__host {
  display: block;
  margin-top: 5px;
- font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
+ color: $darker-text-color;
 }
 
 .status-card__image {
- flex: 0 0 100px;
- background: lighten($ui-base-color, 8%);
+ display: block;
+ padding-bottom: 52.25%;
  position: relative;
+ background: lighten($ui-base-color, 8%);
 
  & > .fa {
  font-size: 21px;
@@ -2332,7 +2340,7 @@ a.status-card {
 }
 
 .status-card.compact {
- border-color: lighten($ui-base-color, 4%);
+ flex-direction: row;
 
  &.interactive {
  border: 0;
@@ -2348,7 +2356,8 @@ a.status-card {
  }
 
  .status-card__image {
- flex: 0 0 60px;
+ flex: 0 0 94px;
+ padding-bottom: 0;
  }
 }
 
@@ -2357,11 +2366,13 @@ a.status-card.compact:hover {
 }
 
 .status-card__image-image {
- border-radius: 4px 0 0 4px;
  display: block;
+ position: absolute;
+ right: 0;
+ left: 0;
+ top: 0;
+ bottom: 0;
  margin: 0;
- width: 100%;
- height: 100%;
  object-fit: cover;
  background-size: cover;
  background-position: center center;

app/services/fetch_link_card_service.rb

@@ -15,7 +15,15 @@ class FetchLinkCardService < BaseService
  @status = status
  @url = parse_urls
 
- return if @url.nil? || @status.preview_cards.any?
+ if @status.preview_cards.any?
+ if @url.nil?
+ detach_card
+ return
+ end
+ return if @status.preview_cards.first.url == @url
+ end
+
+ return if @url.nil?
 
  @url = @url.to_s
 
@@ -39,12 +47,6 @@ class FetchLinkCardService < BaseService
  def process_url
  @card ||= PreviewCard.new(url: @url)
 
- failed = Request.new(:head, @url).perform do |res|
- res.code != 405 && res.code != 501 && (res.code != 200 || res.mime_type != 'text/html')
- end
-
- return if failed
-
  Request.new(:get, @url).perform do |res|
  if res.code == 200 && res.mime_type == 'text/html'
  @html = res.body_with_limit
@@ -55,13 +57,23 @@ class FetchLinkCardService < BaseService
  end
  end
 
- return if @html.nil?
+ if @html.nil?
+ detach_card
+ return
+ end
 
  attempt_oembed || attempt_opengraph
  end
 
  def attach_card
- @status.preview_cards << @card
+ @status.preview_cards = [@card]
+ send_status_update_payload(@status)
+ Rails.cache.delete(@status)
+ end
+
+ def detach_card
+ @status.preview_cards = []
+ send_status_update_payload(@status)
  Rails.cache.delete(@status)
  end
 
@@ -171,4 +183,10 @@ class FetchLinkCardService < BaseService
  def lock_options
  { redis: Redis.current, key: "fetch:#{@url}" }
  end
+
+ def send_status_update_payload(status)
+ @payload = InlineRenderer.render(status, nil, :status)
+ @payload = Oj.dump(event: :update, payload: @payload)
+ Redis.current.publish('statuscard', @payload)
+ end
 end

streaming/index.js

@@ -534,6 +534,11 @@ const startWorker = (workerId) => {
  app.use(authenticationMiddleware);
  app.use(errorMiddleware);
 
+ app.get('/api/v1/streaming/statuscard', (req, res) => {
+ const channel = `statuscard`;
+ streamFrom(channel, req, streamToHttp(req, res), streamHttpEnd(req, subscriptionHeartbeat(channel)));
+ });
+
  app.get('/api/v1/streaming/user', (req, res) => {
  const channel = `timeline:${req.accountId}`;
  streamFrom(channel, req, streamToHttp(req, res), streamHttpEnd(req, subscriptionHeartbeat(channel)));
@@ -608,6 +613,10 @@ const startWorker = (workerId) => {
  let channel;
 
  switch(location.query.stream) {
+ case 'statuscard':
+ channel = `statuscard`;
+ streamFrom(channel, req, streamToWs(req, ws), streamWsEnd(req, ws, subscriptionHeartbeat(channel)));
+ break;
  case 'user':
  channel = `timeline:${req.accountId}`;
  streamFrom(channel, req, streamToWs(req, ws), streamWsEnd(req, ws, subscriptionHeartbeat(channel)));