Merge pull request #157 from glitch-soc/merging-upstream
ABRACA-HRRRRRRRRRRRNGGGGGGGHHH!!!!!!!!!!!!!!!!!!!master
@ -1 +1 @@ |
||||
2.4.1 |
||||
2.4.2 |
||||
|
@ -1,4 +1,4 @@ |
||||
web: PORT=3000 bundle exec puma -C config/puma.rb |
||||
sidekiq: PORT=3000 bundle exec sidekiq |
||||
stream: PORT=4000 yarn run start |
||||
webpack: ./bin/webpack-dev-server --host 0.0.0.0 |
||||
webpack: ./bin/webpack-dev-server --listen-host 0.0.0.0 |
||||
|
@ -0,0 +1,34 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
module Admin |
||||
class CustomEmojisController < BaseController |
||||
def index |
||||
@custom_emojis = CustomEmoji.local |
||||
end |
||||
|
||||
def new |
||||
@custom_emoji = CustomEmoji.new |
||||
end |
||||
|
||||
def create |
||||
@custom_emoji = CustomEmoji.new(resource_params) |
||||
|
||||
if @custom_emoji.save |
||||
redirect_to admin_custom_emojis_path, notice: I18n.t('admin.custom_emojis.created_msg') |
||||
else |
||||
render :new |
||||
end |
||||
end |
||||
|
||||
def destroy |
||||
CustomEmoji.find(params[:id]).destroy |
||||
redirect_to admin_custom_emojis_path, notice: I18n.t('admin.custom_emojis.destroyed_msg') |
||||
end |
||||
|
||||
private |
||||
|
||||
def resource_params |
||||
params.require(:custom_emoji).permit(:shortcode, :image) |
||||
end |
||||
end |
||||
end |
@ -0,0 +1,9 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class Api::V1::CustomEmojisController < Api::BaseController |
||||
respond_to :json |
||||
|
||||
def index |
||||
render json: CustomEmoji.local, each_serializer: REST::CustomEmojiSerializer |
||||
end |
||||
end |
@ -0,0 +1,40 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
class MediaProxyController < ApplicationController |
||||
include RoutingHelper |
||||
|
||||
def show |
||||
RedisLock.acquire(lock_options) do |lock| |
||||
if lock.acquired? |
||||
@media_attachment = MediaAttachment.remote.find(params[:id]) |
||||
redownload! if @media_attachment.needs_redownload? && !reject_media? |
||||
end |
||||
end |
||||
|
||||
redirect_to full_asset_url(@media_attachment.file.url(version)) |
||||
end |
||||
|
||||
private |
||||
|
||||
def redownload! |
||||
@media_attachment.file_remote_url = @media_attachment.remote_url |
||||
@media_attachment.created_at = Time.now.utc |
||||
@media_attachment.save! |
||||
end |
||||
|
||||
def version |
||||
if request.path.ends_with?('/small') |
||||
:small |
||||
else |
||||
:original |
||||
end |
||||
end |
||||
|
||||
def lock_options |
||||
{ redis: Redis.current, key: "media_download:#{params[:id]}" } |
||||
end |
||||
|
||||
def reject_media? |
||||
DomainBlock.find_by(domain: @media_attachment.account.domain)&.reject_media? |
||||
end |
||||
end |
@ -1,24 +0,0 @@ |
||||
# frozen_string_literal: true |
||||
|
||||
module EmojiHelper |
||||
def emojify(text) |
||||
return text if text.blank? |
||||
|
||||
text.gsub(emoji_pattern) do |match| |
||||
emoji = Emoji.instance.unicode($1) # rubocop:disable Style/PerlBackrefs |
||||
|
||||
if emoji |
||||
emoji |
||||
else |
||||
match |
||||
end |
||||
end |
||||
end |
||||
|
||||
def emoji_pattern |
||||
@emoji_pattern ||= |
||||
/(?<=[^[:alnum:]:]|\n|^) |
||||
(#{Emoji.instance.names.map { |name| Regexp.escape(name) }.join('|')}) |
||||
(?=[^[:alnum:]:]|$)/x |
||||
end |
||||
end |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 1.4 KiB After Width: | Height: | Size: 1.3 KiB |
Before Width: | Height: | Size: 5.6 KiB After Width: | Height: | Size: 5.5 KiB |
Before Width: | Height: | Size: 25 KiB |
After Width: | Height: | Size: 285 KiB |
@ -0,0 +1,17 @@ |
||||
export const HEIGHT_CACHE_SET = 'HEIGHT_CACHE_SET'; |
||||
export const HEIGHT_CACHE_CLEAR = 'HEIGHT_CACHE_CLEAR'; |
||||
|
||||
export function setHeight (key, id, height) { |
||||
return { |
||||
type: HEIGHT_CACHE_SET, |
||||
key, |
||||
id, |
||||
height, |
||||
}; |
||||
}; |
||||
|
||||
export function clearHeight () { |
||||
return { |
||||
type: HEIGHT_CACHE_CLEAR, |
||||
}; |
||||
}; |
@ -0,0 +1,37 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { unicodeMapping } from '../emojione_light'; |
||||
|
||||
const assetHost = process.env.CDN_HOST || ''; |
||||
|
||||
export default class AutosuggestEmoji extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
emoji: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { emoji } = this.props; |
||||
let url; |
||||
|
||||
if (emoji.custom) { |
||||
url = emoji.imageUrl; |
||||
} else { |
||||
const [ filename ] = unicodeMapping[emoji.native]; |
||||
url = `${assetHost}/emoji/${filename}.svg`; |
||||
} |
||||
|
||||
return ( |
||||
<div className='autosuggest-emoji'> |
||||
<img |
||||
className='emojione' |
||||
src={url} |
||||
alt={emoji.native || emoji.colons} |
||||
/> |
||||
|
||||
{emoji.colons} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,18 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import Card from '../features/status/components/card'; |
||||
import { fromJS } from 'immutable'; |
||||
|
||||
export default class CardContainer extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
locale: PropTypes.string, |
||||
card: PropTypes.array.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { card, ...props } = this.props; |
||||
return <Card card={fromJS(card)} {...props} />; |
||||
} |
||||
|
||||
} |
@ -0,0 +1,17 @@ |
||||
import { connect } from 'react-redux'; |
||||
import IntersectionObserverArticle from '../components/intersection_observer_article'; |
||||
import { setHeight } from '../actions/height_cache'; |
||||
|
||||
const makeMapStateToProps = (state, props) => ({ |
||||
cachedHeight: state.getIn(['height_cache', props.saveHeightKey, props.id]), |
||||
}); |
||||
|
||||
const mapDispatchToProps = (dispatch) => ({ |
||||
|
||||
onHeightChange (key, id, height) { |
||||
dispatch(setHeight(key, id, height)); |
||||
}, |
||||
|
||||
}); |
||||
|
||||
export default connect(makeMapStateToProps, mapDispatchToProps)(IntersectionObserverArticle); |
@ -0,0 +1,34 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { IntlProvider, addLocaleData } from 'react-intl'; |
||||
import { getLocale } from '../locales'; |
||||
import MediaGallery from '../components/media_gallery'; |
||||
import { fromJS } from 'immutable'; |
||||
|
||||
const { localeData, messages } = getLocale(); |
||||
addLocaleData(localeData); |
||||
|
||||
export default class MediaGalleryContainer extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
locale: PropTypes.string.isRequired, |
||||
media: PropTypes.array.isRequired, |
||||
}; |
||||
|
||||
handleOpenMedia = () => {} |
||||
|
||||
render () { |
||||
const { locale, media, ...props } = this.props; |
||||
|
||||
return ( |
||||
<IntlProvider locale={locale} messages={messages}> |
||||
<MediaGallery |
||||
{...props} |
||||
media={fromJS(media)} |
||||
onOpenMedia={this.handleOpenMedia} |
||||
/> |
||||
</IntlProvider> |
||||
); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,26 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { IntlProvider, addLocaleData } from 'react-intl'; |
||||
import { getLocale } from '../locales'; |
||||
import Video from '../features/video'; |
||||
|
||||
const { localeData, messages } = getLocale(); |
||||
addLocaleData(localeData); |
||||
|
||||
export default class VideoContainer extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
locale: PropTypes.string.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { locale, ...props } = this.props; |
||||
|
||||
return ( |
||||
<IntlProvider locale={locale} messages={messages}> |
||||
<Video {...props} /> |
||||
</IntlProvider> |
||||
); |
||||
} |
||||
|
||||
} |
@ -1,13 +1,38 @@ |
||||
// @preval
|
||||
// Force tree shaking on emojione by exposing just a subset of its functionality
|
||||
// http://www.unicode.org/Public/emoji/5.0/emoji-test.txt
|
||||
|
||||
const emojione = require('emojione'); |
||||
const emojis = require('./emoji_map.json'); |
||||
const { emojiIndex } = require('emoji-mart'); |
||||
const excluded = ['®', '©', '™']; |
||||
const skins = ['🏻', '🏼', '🏽', '🏾', '🏿']; |
||||
const shortcodeMap = {}; |
||||
|
||||
const mappedUnicode = emojione.mapUnicodeToShort(); |
||||
const excluded = ['®', '©', '™']; |
||||
Object.keys(emojiIndex.emojis).forEach(key => { |
||||
shortcodeMap[emojiIndex.emojis[key].native] = emojiIndex.emojis[key].id; |
||||
}); |
||||
|
||||
module.exports.unicodeMapping = Object.keys(emojione.jsEscapeMap) |
||||
.filter(c => !excluded.includes(c)) |
||||
.map(unicodeStr => [unicodeStr, mappedUnicode[emojione.jsEscapeMap[unicodeStr]]]) |
||||
.map(([unicodeStr, shortCode]) => ({ [unicodeStr]: [emojione.emojioneList[shortCode].fname, shortCode.slice(1, shortCode.length - 1)] })) |
||||
.reduce((x, y) => Object.assign(x, y), { }); |
||||
const stripModifiers = unicode => { |
||||
skins.forEach(tone => { |
||||
unicode = unicode.replace(tone, ''); |
||||
}); |
||||
|
||||
return unicode; |
||||
}; |
||||
|
||||
Object.keys(emojis).forEach(key => { |
||||
if (excluded.includes(key)) { |
||||
delete emojis[key]; |
||||
return; |
||||
} |
||||
|
||||
const normalizedKey = stripModifiers(key); |
||||
let shortcode = shortcodeMap[normalizedKey]; |
||||
|
||||
if (!shortcode) { |
||||
shortcode = shortcodeMap[normalizedKey + '\uFE0F']; |
||||
} |
||||
|
||||
emojis[key] = [emojis[key], shortcode]; |
||||
}); |
||||
|
||||
module.exports.unicodeMapping = emojis; |
||||
|
@ -1,38 +0,0 @@ |
||||
import React from 'react'; |
||||
import ImmutablePureComponent from 'react-immutable-pure-component'; |
||||
import PropTypes from 'prop-types'; |
||||
import emojione from 'emojione'; |
||||
|
||||
// This is bad, but I don't know how to make it work without importing the entirety of emojione.
|
||||
// taken from some old version of mastodon before they gutted emojione to "emojione_light"
|
||||
const shortnameToImage = str => str.replace(emojione.regShortNames, shortname => { |
||||
if (typeof shortname === 'undefined' || shortname === '' || !(shortname in emojione.emojioneList)) { |
||||
return shortname; |
||||
} |
||||
|
||||
const unicode = emojione.emojioneList[shortname].unicode[emojione.emojioneList[shortname].unicode.length - 1]; |
||||
const alt = emojione.convert(unicode.toUpperCase()); |
||||
|
||||
return `<img draggable="false" class="emojione" alt="${alt}" src="/emoji/${unicode}.svg" />`; |
||||
}); |
||||
|
||||
export default class AutosuggestShortcode extends ImmutablePureComponent { |
||||
|
||||
static propTypes = { |
||||
shortcode: PropTypes.string.isRequired, |
||||
}; |
||||
|
||||
render () { |
||||
const { shortcode } = this.props; |
||||
|
||||
let emoji = shortnameToImage(shortcode); |
||||
|
||||
return ( |
||||
<div className='autosuggest-account'> |
||||
<div className='autosuggest-account-icon' dangerouslySetInnerHTML={{ __html: emoji }} /> |
||||
{shortcode} |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |
@ -0,0 +1,8 @@ |
||||
import { connect } from 'react-redux'; |
||||
import EmojiPickerDropdown from '../components/emoji_picker_dropdown'; |
||||
|
||||
const mapStateToProps = state => ({ |
||||
custom_emojis: state.get('custom_emojis'), |
||||
}); |
||||
|
||||
export default connect(mapStateToProps)(EmojiPickerDropdown); |
@ -1,51 +1,23 @@ |
||||
import React from 'react'; |
||||
import ImmutablePropTypes from 'react-immutable-proptypes'; |
||||
import { connect } from 'react-redux'; |
||||
import Warning from '../components/warning'; |
||||
import { createSelector } from 'reselect'; |
||||
import PropTypes from 'prop-types'; |
||||
import { FormattedMessage } from 'react-intl'; |
||||
import { OrderedSet } from 'immutable'; |
||||
|
||||
const getMentionedUsernames = createSelector(state => state.getIn(['compose', 'text']), text => text.match(/(?:^|[^\/\w])@([a-z0-9_]+@[a-z0-9\.\-]+)/ig)); |
||||
|
||||
const getMentionedDomains = createSelector(getMentionedUsernames, mentionedUsernamesWithDomains => { |
||||
return OrderedSet(mentionedUsernamesWithDomains !== null ? mentionedUsernamesWithDomains.map(item => item.split('@')[2]) : []); |
||||
const mapStateToProps = state => ({ |
||||
needsLockWarning: state.getIn(['compose', 'privacy']) === 'private' && !state.getIn(['accounts', state.getIn(['meta', 'me']), 'locked']), |
||||
}); |
||||
|
||||
const mapStateToProps = state => { |
||||
const mentionedUsernames = getMentionedUsernames(state); |
||||
const mentionedUsernamesWithDomains = getMentionedDomains(state); |
||||
|
||||
return { |
||||
needsLeakWarning: (state.getIn(['compose', 'privacy']) === 'private' || state.getIn(['compose', 'privacy']) === 'direct') && mentionedUsernames !== null, |
||||
mentionedDomains: mentionedUsernamesWithDomains, |
||||
needsLockWarning: state.getIn(['compose', 'privacy']) === 'private' && !state.getIn(['accounts', state.getIn(['meta', 'me']), 'locked']), |
||||
}; |
||||
}; |
||||
|
||||
const WarningWrapper = ({ needsLeakWarning, needsLockWarning, mentionedDomains }) => { |
||||
const WarningWrapper = ({ needsLockWarning }) => { |
||||
if (needsLockWarning) { |
||||
return <Warning message={<FormattedMessage id='compose_form.lock_disclaimer' defaultMessage='Your account is not {locked}. Anyone can follow you to view your follower-only posts.' values={{ locked: <a href='/settings/profile'><FormattedMessage id='compose_form.lock_disclaimer.lock' defaultMessage='locked' /></a> }} />} />; |
||||
} else if (needsLeakWarning) { |
||||
return ( |
||||
<Warning |
||||
message={<FormattedMessage |
||||
id='compose_form.privacy_disclaimer' |
||||
defaultMessage='Your private status will be delivered to mentioned users on {domains}. Do you trust {domainsCount, plural, one {that server} other {those servers}}? Post privacy only works on Mastodon instances. If {domains} {domainsCount, plural, one {is not a Mastodon instance} other {are not Mastodon instances}}, there will be no indication that your post is private, and it may be boosted or otherwise made visible to unintended recipients.' |
||||
values={{ domains: <strong>{mentionedDomains.join(', ')}</strong>, domainsCount: mentionedDomains.size }} |
||||
/>} |
||||
/> |
||||
); |
||||
} |
||||
|
||||
return null; |
||||
}; |
||||
|
||||
WarningWrapper.propTypes = { |
||||
needsLeakWarning: PropTypes.bool, |
||||
needsLockWarning: PropTypes.bool, |
||||
mentionedDomains: ImmutablePropTypes.orderedSet.isRequired, |
||||
}; |
||||
|
||||
export default connect(mapStateToProps)(WarningWrapper); |
||||
|
@ -1,7 +1,9 @@ |
||||
import { urlRegex } from './url_regex'; |
||||
|
||||
const urlPlaceholder = 'xxxxxxxxxxxxxxxxxxxxxxx'; |
||||
|
||||
export function countableText(inputText) { |
||||
return inputText |
||||
.replace(/https?:\/\/\S+/g, urlPlaceholder) |
||||
.replace(urlRegex, urlPlaceholder) |
||||
.replace(/(?:^|[^\/\w])@(([a-z0-9_]+)@[a-z0-9\.\-]+)/ig, '@$2'); |
||||
}; |
||||
|
@ -0,0 +1,304 @@ |
||||
import React from 'react'; |
||||
import PropTypes from 'prop-types'; |
||||
import { defineMessages, injectIntl, FormattedMessage } from 'react-intl'; |
||||
import { throttle } from 'lodash'; |
||||
import classNames from 'classnames'; |
||||
|
||||
const messages = defineMessages({ |
||||
play: { id: 'video.play', defaultMessage: 'Play' }, |
||||
pause: { id: 'video.pause', defaultMessage: 'Pause' }, |
||||
mute: { id: 'video.mute', defaultMessage: 'Mute sound' }, |
||||
unmute: { id: 'video.unmute', defaultMessage: 'Unmute sound' }, |
||||
hide: { id: 'video.hide', defaultMessage: 'Hide video' }, |
||||
expand: { id: 'video.expand', defaultMessage: 'Expand video' }, |
||||
close: { id: 'video.close', defaultMessage: 'Close video' }, |
||||
fullscreen: { id: 'video.fullscreen', defaultMessage: 'Full screen' }, |
||||
exit_fullscreen: { id: 'video.exit_fullscreen', defaultMessage: 'Exit full screen' }, |
||||
}); |
||||
|
||||
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), |
||||
}; |
||||
}; |
||||
|
||||
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, ((boxY - pageY) + boxH) / boxH)); |
||||
position.x = Math.max(0, Math.min(1, (pageX - boxX) / boxW)); |
||||
|
||||
return position; |
||||
}; |
||||
|
||||
const isFullscreen = () => document.fullscreenElement || |
||||
document.webkitFullscreenElement || |
||||
document.mozFullScreenElement || |
||||
document.msFullscreenElement; |
||||
|
||||
const exitFullscreen = () => { |
||||
if (document.exitFullscreen) { |
||||
document.exitFullscreen(); |
||||
} else if (document.webkitExitFullscreen) { |
||||
document.webkitExitFullscreen(); |
||||
} else if (document.mozCancelFullScreen) { |
||||
document.mozCancelFullScreen(); |
||||
} else if (document.msExitFullscreen) { |
||||
document.msExitFullscreen(); |
||||
} |
||||
}; |
||||
|
||||
const requestFullscreen = el => { |
||||
if (el.requestFullscreen) { |
||||
el.requestFullscreen(); |
||||
} else if (el.webkitRequestFullscreen) { |
||||
el.webkitRequestFullscreen(); |
||||
} else if (el.mozRequestFullScreen) { |
||||
el.mozRequestFullScreen(); |
||||
} else if (el.msRequestFullscreen) { |
||||
el.msRequestFullscreen(); |
||||
} |
||||
}; |
||||
|
||||
@injectIntl |
||||
export default class Video extends React.PureComponent { |
||||
|
||||
static propTypes = { |
||||
preview: PropTypes.string, |
||||
src: PropTypes.string.isRequired, |
||||
width: PropTypes.number, |
||||
height: PropTypes.number, |
||||
sensitive: PropTypes.bool, |
||||
startTime: PropTypes.number, |
||||
onOpenVideo: PropTypes.func, |
||||
onCloseVideo: PropTypes.func, |
||||
intl: PropTypes.object.isRequired, |
||||
}; |
||||
|
||||
state = { |
||||
progress: 0, |
||||
paused: true, |
||||
dragging: false, |
||||
fullscreen: false, |
||||
hovered: false, |
||||
muted: false, |
||||
revealed: !this.props.sensitive, |
||||
}; |
||||
|
||||
setPlayerRef = c => { |
||||
this.player = c; |
||||
} |
||||
|
||||
setVideoRef = c => { |
||||
this.video = c; |
||||
} |
||||
|
||||
setSeekRef = c => { |
||||
this.seek = c; |
||||
} |
||||
|
||||
handlePlay = () => { |
||||
this.setState({ paused: false }); |
||||
} |
||||
|
||||
handlePause = () => { |
||||
this.setState({ paused: true }); |
||||
} |
||||
|
||||
handleTimeUpdate = () => { |
||||
this.setState({ progress: 100 * (this.video.currentTime / this.video.duration) }); |
||||
} |
||||
|
||||
handleMouseDown = e => { |
||||
document.addEventListener('mousemove', this.handleMouseMove, true); |
||||
document.addEventListener('mouseup', this.handleMouseUp, true); |
||||
document.addEventListener('touchmove', this.handleMouseMove, true); |
||||
document.addEventListener('touchend', this.handleMouseUp, true); |
||||
|
||||
this.setState({ dragging: true }); |
||||
this.video.pause(); |
||||
this.handleMouseMove(e); |
||||
} |
||||
|
||||
handleMouseUp = () => { |
||||
document.removeEventListener('mousemove', this.handleMouseMove, true); |
||||
document.removeEventListener('mouseup', this.handleMouseUp, true); |
||||
document.removeEventListener('touchmove', this.handleMouseMove, true); |
||||
document.removeEventListener('touchend', this.handleMouseUp, true); |
||||
|
||||
this.setState({ dragging: false }); |
||||
this.video.play(); |
||||
} |
||||
|
||||
handleMouseMove = throttle(e => { |
||||
const { x } = getPointerPosition(this.seek, e); |
||||
this.video.currentTime = this.video.duration * x; |
||||
this.setState({ progress: x * 100 }); |
||||
}, 60); |
||||
|
||||
togglePlay = () => { |
||||
if (this.state.paused) { |
||||
this.video.play(); |
||||
} else { |
||||
this.video.pause(); |
||||
} |
||||
} |
||||
|
||||
toggleFullscreen = () => { |
||||
if (isFullscreen()) { |
||||
exitFullscreen(); |
||||
} else { |
||||
requestFullscreen(this.player); |
||||
} |
||||
} |
||||
|
||||
componentDidMount () { |
||||
document.addEventListener('fullscreenchange', this.handleFullscreenChange, true); |
||||
document.addEventListener('webkitfullscreenchange', this.handleFullscreenChange, true); |
||||
document.addEventListener('mozfullscreenchange', this.handleFullscreenChange, true); |
||||
document.addEventListener('MSFullscreenChange', this.handleFullscreenChange, true); |
||||
} |
||||
|
||||
componentWillUnmount () { |
||||
document.removeEventListener('fullscreenchange', this.handleFullscreenChange, true); |
||||
document.removeEventListener('webkitfullscreenchange', this.handleFullscreenChange, true); |
||||
document.removeEventListener('mozfullscreenchange', this.handleFullscreenChange, true); |
||||
document.removeEventListener('MSFullscreenChange', this.handleFullscreenChange, true); |
||||
} |
||||
|
||||
handleFullscreenChange = () => { |
||||
this.setState({ fullscreen: isFullscreen() }); |
||||
} |
||||
|
||||
handleMouseEnter = () => { |
||||
this.setState({ hovered: true }); |
||||
} |
||||
|
||||
handleMouseLeave = () => { |
||||
this.setState({ hovered: false }); |
||||
} |
||||
|
||||
toggleMute = () => { |
||||
this.video.muted = !this.video.muted; |
||||
this.setState({ muted: this.video.muted }); |
||||
} |
||||
|
||||
toggleReveal = () => { |
||||
if (this.state.revealed) { |
||||
this.video.pause(); |
||||
} |
||||
|
||||
this.setState({ revealed: !this.state.revealed }); |
||||
} |
||||
|
||||
handleLoadedData = () => { |
||||
if (this.props.startTime) { |
||||
this.video.currentTime = this.props.startTime; |
||||
this.video.play(); |
||||
} |
||||
} |
||||
|
||||
handleOpenVideo = () => { |
||||
this.video.pause(); |
||||
this.props.onOpenVideo(this.video.currentTime); |
||||
} |
||||
|
||||
handleCloseVideo = () => { |
||||
this.video.pause(); |
||||
this.props.onCloseVideo(); |
||||
} |
||||
|
||||
render () { |
||||
const { preview, src, width, height, startTime, onOpenVideo, onCloseVideo, intl } = this.props; |
||||
const { progress, dragging, paused, fullscreen, hovered, muted, revealed } = this.state; |
||||
|
||||
return ( |
||||
<div className={classNames('video-player', { inactive: !revealed, inline: width && height && !fullscreen, fullscreen })} style={{ width, height }} ref={this.setPlayerRef} onMouseEnter={this.handleMouseEnter} onMouseLeave={this.handleMouseLeave}> |
||||
<video |
||||
ref={this.setVideoRef} |
||||
src={src} |
||||
poster={preview} |
||||
preload={!!startTime} |
||||
loop |
||||
role='button' |
||||
tabIndex='0' |
||||
width={width} |
||||
height={height} |
||||
onClick={this.togglePlay} |
||||
onPlay={this.handlePlay} |
||||
onPause={this.handlePause} |
||||
onTimeUpdate={this.handleTimeUpdate} |
||||
onLoadedData={this.handleLoadedData} |
||||
/> |
||||
|
||||
<button className={classNames('video-player__spoiler', { active: !revealed })} onClick={this.toggleReveal}> |
||||
<span className='video-player__spoiler__title'><FormattedMessage id='status.sensitive_warning' defaultMessage='Sensitive content' /></span> |
||||
<span className='video-player__spoiler__subtitle'><FormattedMessage id='status.sensitive_toggle' defaultMessage='Click to view' /></span> |
||||
</button> |
||||
|
||||
<div className={classNames('video-player__controls', { active: paused || hovered })}> |
||||
<div className='video-player__seek' onMouseDown={this.handleMouseDown} ref={this.setSeekRef}> |
||||
<div className='video-player__seek__progress' style={{ width: `${progress}%` }} /> |
||||
|
||||
<span |
||||
className={classNames('video-player__seek__handle', { active: dragging })} |
||||
tabIndex='0' |
||||
style={{ left: `${progress}%` }} |
||||
/> |
||||
</div> |
||||
|
||||
<div className='video-player__buttons left'> |
||||
<button aria-label={intl.formatMessage(paused ? messages.play : messages.pause)} onClick={this.togglePlay}><i className={classNames('fa fa-fw', { 'fa-play': paused, 'fa-pause': !paused })} /></button> |
||||
<button aria-label={intl.formatMessage(muted ? messages.unmute : messages.mute)} onClick={this.toggleMute}><i className={classNames('fa fa-fw', { 'fa-volume-off': muted, 'fa-volume-up': !muted })} /></button> |
||||
{!onCloseVideo && <button aria-label={intl.formatMessage(messages.hide)} onClick={this.toggleReveal}><i className='fa fa-fw fa-eye' /></button>} |
||||
</div> |
||||
|
||||
<div className='video-player__buttons right'> |
||||
{(!fullscreen && onOpenVideo) && <button aria-label={intl.formatMessage(messages.expand)} onClick={this.handleOpenVideo}><i className='fa fa-fw fa-expand' /></button>} |
||||
{onCloseVideo && <button aria-label={intl.formatMessage(messages.close)} onClick={this.handleCloseVideo}><i className='fa fa-fw fa-times' /></button>} |
||||
<button aria-label={intl.formatMessage(fullscreen ? messages.exit_fullscreen : messages.fullscreen)} onClick={this.toggleFullscreen}><i className={classNames('fa fa-fw', { 'fa-arrows-alt': !fullscreen, 'fa-compress': fullscreen })} /></button> |
||||
</div> |
||||
</div> |
||||
</div> |
||||
); |
||||
} |
||||
|
||||
} |