Commit 8c9cac2b authored by mgabdev's avatar mgabdev

After merge resolutions

parent 0a3c6cea
......@@ -52,4 +52,4 @@ class ComposeModal extends ImmutablePureComponent {
</ModalLayout>
);
}
}
\ No newline at end of file
}
import React from 'react';
import { connect } from 'react-redux';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import StatusListContainer from '../../containers/status_list_container';
import PropTypes from 'prop-types';
import StatusListContainer from '../ui/containers/status_list_container';
import Column from '../../components/column';
import ColumnSettings from './components/column_settings';
import { HomeColumnHeader } from '../../components/column_header';
import ColumnSettingsContainer from './containers/column_settings_container';
import HomeColumnHeader from '../../components/home_column_header';
import {
expandCommunityTimeline,
expandPublicTimeline,
......@@ -32,17 +35,12 @@ const mapStateToProps = state => {
export default @connect(mapStateToProps)
@injectIntl
class CommunityTimeline extends PureComponent {
class CommunityTimeline extends React.PureComponent {
static contextTypes = {
router: PropTypes.object,
};
static defaultProps = {
onlyMedia: false,
allFediverse: false,
};
static propTypes = {
dispatch: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
......@@ -104,9 +102,9 @@ class CommunityTimeline extends PureComponent {
const { intl, hasUnread, onlyMedia, timelineId, allFediverse } = this.props;
return (
<Column heading={intl.formatMessage(messages.title)}>
<Column label={intl.formatMessage(messages.title)}>
<HomeColumnHeader activeItem='all' active={hasUnread} >
<ColumnSettings />
<ColumnSettingsContainer />
</HomeColumnHeader>
<StatusListContainer
scrollKey={`${timelineId}_timeline`}
......
This diff is collapsed.
import { defineMessages, injectIntl } from 'react-intl';
import React from 'react';
import PropTypes from 'prop-types';
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl';
import { fromJS, is } from 'immutable';
import { throttle } from 'lodash';
import classNames from 'classnames';
import { decode } from 'blurhash';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../../utils/fullscreen';
import { getPointerPosition } from '../../utils/element_position';
import { isFullscreen, requestFullscreen, exitFullscreen } from '../ui/util/fullscreen';
import { displayMedia } from '../../initial_state';
import Icon from '../../components/icon';
import './video.scss';
import Icon from 'gabsocial/components/icon';
import { decode } from 'blurhash';
import { isPanoramic, isPortrait, minimumAspectRatio, maximumAspectRatio } from '../../utils/media_aspect_ratio';
const messages = defineMessages({
play: { id: 'video.play', defaultMessage: 'Play' },
......@@ -20,8 +20,6 @@ const messages = defineMessages({
close: { id: 'video.close', defaultMessage: 'Close video' },
fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' },
exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' },
warning: { id: 'status.sensitive_warning', defaultMessage: 'Sensitive content' },
hidden: { id: 'status.media_hidden', defaultMessage: 'Media hidden' },
});
const formatTime = secondsNum => {
......@@ -36,8 +34,61 @@ const formatTime = secondsNum => {
return (hours === '00' ? '' : `${hours}:`) + `${minutes}:${seconds}`;
};
export const findElementPosition = el => {
let box;
if (el.getBoundingClientRect && el.parentNode) {
box = el.getBoundingClientRect();
}
if (!box) {
return {
left: 0,
top: 0,
};
}
const docEl = document.documentElement;
const body = document.body;
const clientLeft = docEl.clientLeft || body.clientLeft || 0;
const scrollLeft = window.pageXOffset || body.scrollLeft;
const left = (box.left + scrollLeft) - clientLeft;
const clientTop = docEl.clientTop || body.clientTop || 0;
const scrollTop = window.pageYOffset || body.scrollTop;
const top = (box.top + scrollTop) - clientTop;
return {
left: Math.round(left),
top: Math.round(top),
};
};
export const getPointerPosition = (el, event) => {
const position = {};
const box = findElementPosition(el);
const boxW = el.offsetWidth;
const boxH = el.offsetHeight;
const boxY = box.top;
const boxX = box.left;
let pageY = event.pageY;
let pageX = event.pageX;
if (event.changedTouches) {
pageX = event.changedTouches[0].pageX;
pageY = event.changedTouches[0].pageY;
}
position.y = Math.max(0, Math.min(1, (pageY - boxY) / boxH));
position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW));
return position;
};
export default @injectIntl
class Video extends PureComponent {
class Video extends React.PureComponent {
static propTypes = {
preview: PropTypes.string,
......@@ -57,6 +108,7 @@ class Video extends PureComponent {
intl: PropTypes.object.isRequired,
blurhash: PropTypes.string,
link: PropTypes.node,
aspectRatio: PropTypes.number,
};
state = {
......@@ -154,13 +206,11 @@ class Video extends PureComponent {
if (!isNaN(x)) {
var slideamt = x;
if (x > 1) {
slideamt = 1;
} else if (x < 0) {
slideamt = 0;
}
this.video.volume = slideamt;
this.setState({ volume: slideamt });
}
......@@ -294,6 +344,7 @@ class Video extends 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 });
}
......@@ -325,7 +376,7 @@ class Video extends PureComponent {
}
render() {
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link } = this.props;
const { preview, src, inline, startTime, onOpenVideo, onCloseVideo, intl, alt, detailed, sensitive, link, aspectRatio } = this.props;
const { containerWidth, currentTime, duration, volume, buffer, dragging, paused, fullscreen, hovered, muted, revealed } = this.state;
const progress = (currentTime / duration) * 100;
......@@ -337,7 +388,15 @@ class Video extends PureComponent {
if (inline && containerWidth) {
width = containerWidth;
height = containerWidth / (16 / 9);
const minSize = containerWidth / (16 / 9);
if (isPanoramic(aspectRatio)) {
height = Math.max(Math.floor(containerWidth / maximumAspectRatio), minSize);
} else if (isPortrait(aspectRatio)) {
height = Math.max(Math.floor(containerWidth / minimumAspectRatio), minSize);
} else {
height = Math.floor(containerWidth / aspectRatio);
}
playerStyle.height = height;
}
......@@ -352,6 +411,14 @@ class Video extends PureComponent {
preload = 'none';
}
let warning;
if (sensitive) {
warning = <FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' />;
} else {
warning = <FormattedMessage id='status.media_hidden' defaultMessage='Media hidden' />;
}
return (
<div
role='menuitem'
......@@ -366,6 +433,7 @@ class Video extends 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}
......@@ -389,7 +457,7 @@ class Video extends PureComponent {
<div className={classNames('spoiler-button', { 'spoiler-button--hidden': revealed })}>
<button type='button' className='spoiler-button__overlay' onClick={this.toggleReveal}>
<span className='spoiler-button__overlay__label'>{intl.formatMessage(sensitive ? messages.warning : messages.hidden)}</span>
<span className='spoiler-button__overlay__label'>{warning}</span>
</button>
</div>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment