Redesign video player (#4911)

* Redesign video player

* Use new video player on static public pages too

* Use media gallery component on static public pages too

* Pause video when hiding it

* Full-screen sizing on WebKit

* Add aria labels to video player buttons

* Display link card on public status page

* Fix fullscreen from modal sizing issue

* Remove contain: strict property to fix fullscreen from columns
main
Eugen Rochko 7 years ago committed by GitHub
parent af00220d79
commit 2bbf987a0a

@ -9,7 +9,7 @@ import StatusContent from './status_content';
import StatusActionBar from './status_action_bar';
import { FormattedMessage } from 'react-intl';
import ImmutablePureComponent from 'react-immutable-pure-component';
import { MediaGallery, VideoPlayer } from '../features/ui/util/async-components';
import { MediaGallery, Video } from '../features/ui/util/async-components';
// We use the component (and not the container) since we do not want
// to use the progress bar to show download progress
@ -88,6 +88,10 @@ export default class Status extends ImmutablePureComponent {
return <div className='media-spoiler-video' style={{ height: '110px' }} />;
}
handleOpenVideo = startTime => {
this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), startTime);
}
render () {
let media = null;
let statusAvatar;
@ -127,9 +131,18 @@ export default class Status extends ImmutablePureComponent {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
const video = status.getIn(['media_attachments', 0]);
media = (
<Bundle fetchComponent={VideoPlayer} loading={this.renderLoadingVideoPlayer} >
{Component => <Component media={status.getIn(['media_attachments', 0])} sensitive={status.get('sensitive')} onOpenVideo={this.props.onOpenVideo} />}
<Bundle fetchComponent={Video} loading={this.renderLoadingVideoPlayer} >
{Component => <Component
preview={video.get('preview_url')}
src={video.get('url')}
width={239}
height={110}
sensitive={status.get('sensitive')}
onOpenVideo={this.handleOpenVideo}
/>}
</Bundle>
);
} else {

@ -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,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,4 +1,5 @@
import React from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import punycode from 'punycode';
import classnames from 'classnames';
@ -22,10 +23,15 @@ export default class Card extends React.PureComponent {
static propTypes = {
card: ImmutablePropTypes.map,
maxDescription: PropTypes.number,
};
static defaultProps = {
maxDescription: 50,
};
renderLink () {
const { card } = this.props;
const { card, maxDescription } = this.props;
let image = '';
let provider = card.get('provider_name');
@ -52,7 +58,7 @@ export default class Card extends React.PureComponent {
<div className='status-card__content'>
<strong className='status-card__title' title={card.get('title')}>{card.get('title')}</strong>
<p className='status-card__description'>{(card.get('description') || '').substring(0, 50)}</p>
<p className='status-card__description'>{(card.get('description') || '').substring(0, maxDescription)}</p>
<span className='status-card__host'>{provider}</span>
</div>
</a>

@ -5,12 +5,12 @@ import Avatar from '../../../components/avatar';
import DisplayName from '../../../components/display_name';
import StatusContent from '../../../components/status_content';
import MediaGallery from '../../../components/media_gallery';
import VideoPlayer from '../../../components/video_player';
import AttachmentList from '../../../components/attachment_list';
import Link from 'react-router-dom/Link';
import { FormattedDate, FormattedNumber } from 'react-intl';
import CardContainer from '../containers/card_container';
import ImmutablePureComponent from 'react-immutable-pure-component';
import Video from '../../video';
export default class DetailedStatus extends ImmutablePureComponent {
@ -34,6 +34,10 @@ export default class DetailedStatus extends ImmutablePureComponent {
e.stopPropagation();
}
handleOpenVideo = startTime => {
this.props.onOpenVideo(this.props.status.getIn(['media_attachments', 0]), startTime);
}
render () {
const status = this.props.status.get('reblog') ? this.props.status.get('reblog') : this.props.status;
@ -44,7 +48,18 @@ export default class DetailedStatus extends ImmutablePureComponent {
if (status.get('media_attachments').some(item => item.get('type') === 'unknown')) {
media = <AttachmentList media={status.get('media_attachments')} />;
} else if (status.getIn(['media_attachments', 0, 'type']) === 'video') {
media = <VideoPlayer sensitive={status.get('sensitive')} media={status.getIn(['media_attachments', 0])} width={300} height={150} onOpenVideo={this.props.onOpenVideo} autoplay />;
const video = status.getIn(['media_attachments', 0]);
media = (
<Video
preview={video.get('preview_url')}
src={video.get('url')}
width={300}
height={150}
onOpenVideo={this.handleOpenVideo}
sensitive={status.get('sensitive')}
/>
);
} else {
media = <MediaGallery sensitive={status.get('sensitive')} media={status.get('media_attachments')} height={300} onOpenMedia={this.props.onOpenMedia} autoPlayGif={this.props.autoPlayGif} />;
}

@ -1,35 +1,29 @@
import React from 'react';
import ImmutablePropTypes from 'react-immutable-proptypes';
import PropTypes from 'prop-types';
import ExtendedVideoPlayer from '../../../components/extended_video_player';
import { defineMessages, injectIntl } from 'react-intl';
import IconButton from '../../../components/icon_button';
import Video from '../../video';
import ImmutablePureComponent from 'react-immutable-pure-component';
const messages = defineMessages({
close: { id: 'lightbox.close', defaultMessage: 'Close' },
});
@injectIntl
export default class VideoModal extends ImmutablePureComponent {
static propTypes = {
media: ImmutablePropTypes.map.isRequired,
time: PropTypes.number,
onClose: PropTypes.func.isRequired,
intl: PropTypes.object.isRequired,
};
render () {
const { media, intl, time, onClose } = this.props;
const url = media.get('url');
const { media, time, onClose } = this.props;
return (
<div className='modal-root__modal media-modal'>
<div>
<div className='media-modal__close'><IconButton title={intl.formatMessage(messages.close)} icon='times' overlay onClick={onClose} /></div>
<ExtendedVideoPlayer src={url} muted={false} controls time={time} />
<Video
preview={media.get('preview_url')}
src={media.get('url')}
startTime={time}
onCloseVideo={onClose}
/>
</div>
</div>
);

@ -98,6 +98,10 @@ export function VideoPlayer () {
return import(/* webpackChunkName: "status/video_player" */'../../../components/video_player');
}
export function Video () {
return import(/* webpackChunkName: "features/video" */'../../video');
}
export function EmbedModal () {
return import(/* webpackChunkName: "modals/embed_modal" */'../components/embed_modal');
}

@ -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>
);
}
}

@ -33,6 +33,7 @@
"column.home": "الرئيسية",
"column.mutes": "الحسابات المكتومة",
"column.notifications": "الإشعارات",
"column.pins": "Pinned toot",
"column.public": "الخيط العام الموحد",
"column_back_button.label": "العودة",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "معلومات إضافية",
"navigation_bar.logout": "خروج",
"navigation_bar.mutes": "الحسابات المكتومة",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "التفضيلات",
"navigation_bar.public_timeline": "الخيط العام الموحد",
"notification.favourite": "{name} أعجب بمنشورك",
@ -193,6 +195,15 @@
"upload_button.label": "إضافة وسائط",
"upload_form.undo": "إلغاء",
"upload_progress.label": "يرفع...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "وسّع الفيديو",
"video_player.toggle_sound": "تبديل الصوت",
"video_player.toggle_visible": "إظهار / إخفاء الفيديو",

@ -33,6 +33,7 @@
"column.home": "Начало",
"column.mutes": "Muted users",
"column.notifications": "Известия",
"column.pins": "Pinned toot",
"column.public": "Публичен канал",
"column_back_button.label": "Назад",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Extended information",
"navigation_bar.logout": "Излизане",
"navigation_bar.mutes": "Muted users",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Предпочитания",
"navigation_bar.public_timeline": "Публичен канал",
"notification.favourite": "{name} хареса твоята публикация",
@ -193,6 +195,15 @@
"upload_button.label": "Добави медия",
"upload_form.undo": "Отмяна",
"upload_progress.label": "Uploading...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expand video",
"video_player.toggle_sound": "Звук",
"video_player.toggle_visible": "Toggle visibility",

@ -33,6 +33,7 @@
"column.home": "Inici",
"column.mutes": "Usuaris silenciats",
"column.notifications": "Notificacions",
"column.pins": "Pinned toot",
"column.public": "Línia de temps federada",
"column_back_button.label": "Enrere",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Informació addicional",
"navigation_bar.logout": "Tancar sessió",
"navigation_bar.mutes": "Usuaris silenciats",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferències",
"navigation_bar.public_timeline": "Línia de temps federada",
"notification.favourite": "{name} ha afavorit el teu estat",
@ -193,6 +195,15 @@
"upload_button.label": "Afegir multimèdia",
"upload_form.undo": "Desfer",
"upload_progress.label": "Pujant...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Ampliar el vídeo",
"video_player.toggle_sound": "Alternar so",
"video_player.toggle_visible": "Alternar visibilitat",

@ -33,6 +33,7 @@
"column.home": "Startseite",
"column.mutes": "Stummgeschaltete Profile",
"column.notifications": "Mitteilungen",
"column.pins": "Pinned toot",
"column.public": "Gesamtes bekanntes Netz",
"column_back_button.label": "Zurück",
"column_header.hide_settings": "Einstellungen verbergen",
@ -109,6 +110,7 @@
"navigation_bar.info": "Erweiterte Informationen",
"navigation_bar.logout": "Abmelden",
"navigation_bar.mutes": "Stummgeschaltete Profile",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Einstellungen",
"navigation_bar.public_timeline": "Föderierte Zeitleiste",
"notification.favourite": "{name} favorisierte deinen Status",
@ -193,6 +195,15 @@
"upload_button.label": "Mediendatei hinzufügen",
"upload_form.undo": "Entfernen",
"upload_progress.label": "Lade hoch…",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Videoanzeige vergrößern",
"video_player.toggle_sound": "Ton umschalten",
"video_player.toggle_visible": "Sichtbarkeit umschalten",

@ -812,6 +812,10 @@
"defaultMessage": "Extended information",
"id": "navigation_bar.info"
},
{
"defaultMessage": "Pinned toots",
"id": "navigation_bar.pins"
},
{
"defaultMessage": "FAQ",
"id": "getting_started.faq"
@ -992,6 +996,15 @@
],
"path": "app/javascript/mastodon/features/notifications/index.json"
},
{
"descriptors": [
{
"defaultMessage": "Pinned toot",
"id": "column.pins"
}
],
"path": "app/javascript/mastodon/features/pinned_statuses/index.json"
},
{
"descriptors": [
{
@ -1326,5 +1339,54 @@
}
],
"path": "app/javascript/mastodon/features/ui/components/video_modal.json"
},
{
"descriptors": [
{
"defaultMessage": "Play",
"id": "video.play"
},
{
"defaultMessage": "Pause",
"id": "video.pause"
},
{
"defaultMessage": "Mute sound",
"id": "video.mute"
},
{
"defaultMessage": "Unmute sound",
"id": "video.unmute"
},
{
"defaultMessage": "Hide video",
"id": "video.hide"
},
{
"defaultMessage": "Expand video",
"id": "video.expand"
},
{
"defaultMessage": "Close video",
"id": "video.close"
},
{
"defaultMessage": "Full screen",
"id": "video.fullscreen"
},
{
"defaultMessage": "Exit full screen",
"id": "video.exit_fullscreen"
},
{
"defaultMessage": "Sensitive content",
"id": "status.sensitive_warning"
},
{
"defaultMessage": "Click to view",
"id": "status.sensitive_toggle"
}
],
"path": "app/javascript/mastodon/features/video/index.json"
}
]

@ -33,8 +33,8 @@
"column.home": "Home",
"column.mutes": "Muted users",
"column.notifications": "Notifications",
"column.public": "Federated timeline",
"column.pins": "Pinned toots",
"column.public": "Federated timeline",
"column_back_button.label": "Back",
"column_header.hide_settings": "Hide settings",
"column_header.moveLeft_settings": "Move column to the left",
@ -110,9 +110,9 @@
"navigation_bar.info": "About this instance",
"navigation_bar.logout": "Logout",
"navigation_bar.mutes": "Muted users",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferences",
"navigation_bar.public_timeline": "Federated timeline",
"navigation_bar.pins": "Pinned toots",
"notification.favourite": "{name} favourited your status",
"notification.follow": "{name} followed you",
"notification.mention": "{name} mentioned you",
@ -195,6 +195,15 @@
"upload_button.label": "Add media",
"upload_form.undo": "Undo",
"upload_progress.label": "Uploading...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expand video",
"video_player.toggle_sound": "Toggle sound",
"video_player.toggle_visible": "Toggle visibility",

@ -33,6 +33,7 @@
"column.home": "Hejmo",
"column.mutes": "Muted users",
"column.notifications": "Sciigoj",
"column.pins": "Pinned toot",
"column.public": "Fratara tempolinio",
"column_back_button.label": "Reveni",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Extended information",
"navigation_bar.logout": "Elsaluti",
"navigation_bar.mutes": "Muted users",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferoj",
"navigation_bar.public_timeline": "Fratara tempolinio",
"notification.favourite": "{name} favoris vian mesaĝon",
@ -193,6 +195,15 @@
"upload_button.label": "Aldoni enhavaĵon",
"upload_form.undo": "Malfari",
"upload_progress.label": "Uploading...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expand video",
"video_player.toggle_sound": "Aktivigi sonojn",
"video_player.toggle_visible": "Toggle visibility",

@ -33,6 +33,7 @@
"column.home": "Inicio",
"column.mutes": "Usuarios silenciados",
"column.notifications": "Notificaciones",
"column.pins": "Pinned toot",
"column.public": "Historia federada",
"column_back_button.label": "Atrás",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Información adicional",
"navigation_bar.logout": "Cerrar sesión",
"navigation_bar.mutes": "Usuarios silenciados",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferencias",
"navigation_bar.public_timeline": "Historia federada",
"notification.favourite": "{name} marcó tu estado como favorito",
@ -193,6 +195,15 @@
"upload_button.label": "Subir multimedia",
"upload_form.undo": "Deshacer",
"upload_progress.label": "Uploading...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expand video",
"video_player.toggle_sound": "Act/Desac. sonido",
"video_player.toggle_visible": "Toggle visibility",

@ -33,8 +33,8 @@
"column.home": "خانه",
"column.mutes": "کاربران بی‌صداشده",
"column.notifications": "اعلان‌ها",
"column.public": "نوشته‌های همه‌جا",
"column.pins": "نوشته‌های ثابت",
"column.public": "نوشته‌های همه‌جا",
"column_back_button.label": "بازگشت",
"column_header.hide_settings": "نهفتن تنظیمات",
"column_header.moveLeft_settings": "انتقال ستون به چپ",
@ -110,9 +110,9 @@
"navigation_bar.info": "اطلاعات تکمیلی",
"navigation_bar.logout": "خروج",
"navigation_bar.mutes": "کاربران بی‌صداشده",
"navigation_bar.pins": "نوشته‌های ثابت",
"navigation_bar.preferences": "ترجیحات",
"navigation_bar.public_timeline": "نوشته‌های همه‌جا",
"navigation_bar.pins": "نوشته‌های ثابت",
"notification.favourite": "{name} نوشتهٔ شما را پسندید",
"notification.follow": "{name} پیگیر شما شد",
"notification.mention": "{name} از شما نام برد",
@ -195,6 +195,15 @@
"upload_button.label": "افزودن تصویر",
"upload_form.undo": "واگردانی",
"upload_progress.label": "بارگذاری...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "بازکردن ویدیو",
"video_player.toggle_sound": "تغییر صداداری",
"video_player.toggle_visible": "تغییر پیدایی",

@ -33,6 +33,7 @@
"column.home": "Koti",
"column.mutes": "Muted users",
"column.notifications": "Ilmoitukset",
"column.pins": "Pinned toot",
"column.public": "Yleinen aikajana",
"column_back_button.label": "Takaisin",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Extended information",
"navigation_bar.logout": "Kirjaudu ulos",
"navigation_bar.mutes": "Muted users",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Ominaisuudet",
"navigation_bar.public_timeline": "Yleinen aikajana",
"notification.favourite": "{name} tykkäsi statuksestasi",
@ -193,6 +195,15 @@
"upload_button.label": "Lisää mediaa",
"upload_form.undo": "Peru",
"upload_progress.label": "Uploading...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expand video",
"video_player.toggle_sound": "Äänet päälle/pois",
"video_player.toggle_visible": "Toggle visibility",

@ -33,8 +33,8 @@
"column.home": "Accueil",
"column.mutes": "Comptes masqués",
"column.notifications": "Notifications",
"column.public": "Fil public global",
"column.pins": "Pouets épinglés",
"column.public": "Fil public global",
"column_back_button.label": "Retour",
"column_header.hide_settings": "Masquer les paramètres",
"column_header.moveLeft_settings": "Déplacer la colonne vers la gauche",
@ -110,9 +110,9 @@
"navigation_bar.info": "Plus dinformations",
"navigation_bar.logout": "Déconnexion",
"navigation_bar.mutes": "Comptes masqués",
"navigation_bar.pins": "Pouets épinglés",
"navigation_bar.preferences": "Préférences",
"navigation_bar.public_timeline": "Fil public global",
"navigation_bar.pins": "Pouets épinglés",
"notification.favourite": "{name} a ajouté à ses favoris:",
"notification.follow": "{name} vous suit.",
"notification.mention": "{name} vous a mentionné⋅e:",
@ -195,6 +195,15 @@
"upload_button.label": "Joindre un média",
"upload_form.undo": "Annuler",
"upload_progress.label": "Envoi en cours…",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Agrandir la vidéo",
"video_player.toggle_sound": "Activer/Désactiver le son",
"video_player.toggle_visible": "Afficher/Cacher la vidéo",

@ -33,6 +33,7 @@
"column.home": "בבית",
"column.mutes": "השתקות",
"column.notifications": "התראות",
"column.pins": "Pinned toot",
"column.public": "בפרהסיה",
"column_back_button.label": "חזרה",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "מידע נוסף",
"navigation_bar.logout": "יציאה",
"navigation_bar.mutes": "השתקות",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "העדפות",
"navigation_bar.public_timeline": "ציר זמן בין-קהילתי",
"notification.favourite": "חצרוצך חובב על ידי {name}",
@ -193,6 +195,15 @@
"upload_button.label": "הוספת מדיה",
"upload_form.undo": "ביטול",
"upload_progress.label": "עולה...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "הרחבת וידאו",
"video_player.toggle_sound": "הפעלת\\ביטול שמע",
"video_player.toggle_visible": "הפעלת\\ביטול תצוגה",

@ -33,6 +33,7 @@
"column.home": "Dom",
"column.mutes": "Utišani korisnici",
"column.notifications": "Notifikacije",
"column.pins": "Pinned toot",
"column.public": "Federalni timeline",
"column_back_button.label": "Natrag",
"column_header.hide_settings": "Hide settings",
@ -61,7 +62,6 @@
"confirmations.domain_block.message": "Jesi li zaista, zaista siguran da želiš potpuno blokirati {domain}? In most cases a few targeted blocks or mutes are sufficient and preferable.",
"confirmations.mute.confirm": "Utišaj",
"confirmations.mute.message": "Jesi li siguran da želiš utišati {name}?",
"confirmations.mute.message": "Jesi li siguran da želiš utišati {name}?",
"confirmations.unfollow.confirm": "Unfollow",
"confirmations.unfollow.message": "Are you sure you want to unfollow {name}?",
"embed.instructions": "Embed this status on your website by copying the code below.",
@ -110,6 +110,7 @@
"navigation_bar.info": "Više informacija",
"navigation_bar.logout": "Odjavi se",
"navigation_bar.mutes": "Utišani korisnici",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Postavke",
"navigation_bar.public_timeline": "Federalni timeline",
"notification.favourite": "{name} je lajkao tvoj status",
@ -194,6 +195,15 @@
"upload_button.label": "Dodaj media",
"upload_form.undo": "Poništi",
"upload_progress.label": "Uploadam...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Proširi video",
"video_player.toggle_sound": "Toggle zvuk",
"video_player.toggle_visible": "Preklopi vidljivost",

@ -33,6 +33,7 @@
"column.home": "Kezdőlap",
"column.mutes": "Muted users",
"column.notifications": "Értesítések",
"column.pins": "Pinned toot",
"column.public": "Nyilvános",
"column_back_button.label": "Vissza",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Extended information",
"navigation_bar.logout": "Kijelentkezés",
"navigation_bar.mutes": "Muted users",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Beállítások",
"navigation_bar.public_timeline": "Nyilvános időfolyam",
"notification.favourite": "{name} kedvencnek jelölte az állapotod",
@ -193,6 +195,15 @@
"upload_button.label": "Média hozzáadása",
"upload_form.undo": "Mégsem",
"upload_progress.label": "Uploading...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expand video",
"video_player.toggle_sound": "Hang kapcsolása",
"video_player.toggle_visible": "Toggle visibility",

@ -33,6 +33,7 @@
"column.home": "Beranda",
"column.mutes": "Pengguna dibisukan",
"column.notifications": "Notifikasi",
"column.pins": "Pinned toot",
"column.public": "Linimasa gabunggan",
"column_back_button.label": "Kembali",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Informasi selengkapnya",
"navigation_bar.logout": "Keluar",
"navigation_bar.mutes": "Pengguna dibisukan",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Pengaturan",
"navigation_bar.public_timeline": "Linimasa gabungan",
"notification.favourite": "{name} menyukai status anda",
@ -193,6 +195,15 @@
"upload_button.label": "Tambahkan media",
"upload_form.undo": "Undo",
"upload_progress.label": "Mengunggah...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Tampilkan video",
"video_player.toggle_sound": "Suara",
"video_player.toggle_visible": "Tampilan",

@ -33,6 +33,7 @@
"column.home": "Hemo",
"column.mutes": "Celita uzeri",
"column.notifications": "Savigi",
"column.pins": "Pinned toot",
"column.public": "Federata tempolineo",
"column_back_button.label": "Retro",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Detaloza informi",
"navigation_bar.logout": "Ekirar",
"navigation_bar.mutes": "Celita uzeri",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferi",
"navigation_bar.public_timeline": "Federata tempolineo",
"notification.favourite": "{name} favorizis tua mesajo",
@ -193,6 +195,15 @@
"upload_button.label": "Adjuntar kontenajo",
"upload_form.undo": "Desfacar",
"upload_progress.label": "Kargante...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Extensar video",
"video_player.toggle_sound": "Acendar sono",
"video_player.toggle_visible": "Chanjar videbleso",

@ -33,6 +33,7 @@
"column.home": "Home",
"column.mutes": "Utenti silenziati",
"column.notifications": "Notifiche",
"column.pins": "Pinned toot",
"column.public": "Timeline federata",
"column_back_button.label": "Indietro",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Informazioni estese",
"navigation_bar.logout": "Logout",
"navigation_bar.mutes": "Utenti silenziati",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Impostazioni",
"navigation_bar.public_timeline": "Timeline federata",
"notification.favourite": "{name} ha apprezzato il tuo post",
@ -193,6 +195,15 @@
"upload_button.label": "Aggiungi file multimediale",
"upload_form.undo": "Annulla",
"upload_progress.label": "Sto caricando...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Espandi video",
"video_player.toggle_sound": "Attiva suono",
"video_player.toggle_visible": "Attiva visibilità",

@ -33,8 +33,8 @@
"column.home": "ホーム",
"column.mutes": "ミュートしたユーザー",
"column.notifications": "通知",
"column.public": "連合タイムライン",
"column.pins": "固定されたトゥート",
"column.public": "連合タイムライン",
"column_back_button.label": "戻る",
"column_header.hide_settings": "設定を隠す",
"column_header.moveLeft_settings": "カラムを左に移動する",
@ -110,9 +110,9 @@
"navigation_bar.info": "このインスタンスについて",
"navigation_bar.logout": "ログアウト",
"navigation_bar.mutes": "ミュートしたユーザー",
"navigation_bar.pins": "固定されたトゥート",
"navigation_bar.preferences": "ユーザー設定",
"navigation_bar.public_timeline": "連合タイムライン",
"navigation_bar.pins": "固定されたトゥート",
"notification.favourite": "{name}さんがあなたのトゥートをお気に入りに登録しました",
"notification.follow": "{name}さんにフォローされました",
"notification.mention": "{name}さんがあなたに返信しました",
@ -195,6 +195,15 @@
"upload_button.label": "メディアを追加",
"upload_form.undo": "やり直す",
"upload_progress.label": "アップロード中...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "動画の詳細",
"video_player.toggle_sound": "音の切り替え",
"video_player.toggle_visible": "表示切り替え",

@ -33,8 +33,8 @@
"column.home": "홈",
"column.mutes": "뮤트 중인 사용자",
"column.notifications": "알림",
"column.public": "연합 타임라인",
"column.pins": "고정된 Toot",
"column.public": "연합 타임라인",
"column_back_button.label": "돌아가기",
"column_header.hide_settings": "Hide settings",
"column_header.moveLeft_settings": "Move column to the left",
@ -110,9 +110,9 @@
"navigation_bar.info": "이 인스턴스에 대해서",
"navigation_bar.logout": "로그아웃",
"navigation_bar.mutes": "뮤트 중인 사용자",
"navigation_bar.pins": "고정된 Toot",
"navigation_bar.preferences": "사용자 설정",
"navigation_bar.public_timeline": "연합 타임라인",
"navigation_bar.pins": "고정된 Toot",
"notification.favourite": "{name}님이 즐겨찾기 했습니다",
"notification.follow": "{name}님이 나를 팔로우 했습니다",
"notification.mention": "{name}님이 답글을 보냈습니다",
@ -195,6 +195,15 @@
"upload_button.label": "미디어 추가",
"upload_form.undo": "재시도",
"upload_progress.label": "업로드 중...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "동영상 자세히 보기",
"video_player.toggle_sound": "소리 토글하기",
"video_player.toggle_visible": "표시 전환",

@ -33,6 +33,7 @@
"column.home": "Start",
"column.mutes": "Genegeerde gebruikers",
"column.notifications": "Meldingen",
"column.pins": "Pinned toot",
"column.public": "Globale tijdlijn",
"column.pins": "Vastgezette toots",
"column_back_button.label": "terug",
@ -111,6 +112,7 @@
"navigation_bar.info": "Uitgebreide informatie",
"navigation_bar.logout": "Afmelden",
"navigation_bar.mutes": "Genegeerde gebruikers",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Instellingen",
"navigation_bar.public_timeline": "Globale tijdlijn",
"navigation_bar.pins": "Vastgezette toots",
@ -196,6 +198,15 @@
"upload_button.label": "Media toevoegen",
"upload_form.undo": "Ongedaan maken",
"upload_progress.label": "Uploaden...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Video groter maken",
"video_player.toggle_sound": "Geluid in-/uitschakelen",
"video_player.toggle_visible": "Video wel/niet tonen",

@ -33,6 +33,7 @@
"column.home": "Hjem",
"column.mutes": "Dempede brukere",
"column.notifications": "Varsler",
"column.pins": "Pinned toot",
"column.public": "Felles tidslinje",
"column_back_button.label": "Tilbake",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Utvidet informasjon",
"navigation_bar.logout": "Logg ut",
"navigation_bar.mutes": "Dempede brukere",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferanser",
"navigation_bar.public_timeline": "Felles tidslinje",
"notification.favourite": "{name} likte din status",
@ -193,6 +195,15 @@
"upload_button.label": "Legg til media",
"upload_form.undo": "Angre",
"upload_progress.label": "Laster opp...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Utvid video",
"video_player.toggle_sound": "Veksle lyd",
"video_player.toggle_visible": "Veksle synlighet",

@ -33,8 +33,8 @@
"column.home": "Acuèlh",
"column.mutes": "Personas en silenci",
"column.notifications": "Notificacions",
"column.public": "Flux public global",
"column.pins": "Tuts penjats",
"column.public": "Flux public global",
"column_back_button.label": "Tornar",
"column_header.hide_settings": "Amagar los paramètres",
"column_header.moveLeft_settings": "Desplaçar la colomna a man drecha",
@ -110,9 +110,9 @@
"navigation_bar.info": "Mai informacions",
"navigation_bar.logout": "Desconnexion",
"navigation_bar.mutes": "Personas rescondudas",
"navigation_bar.pins": "Tuts penjats",
"navigation_bar.preferences": "Preferéncias",
"navigation_bar.public_timeline": "Flux public global",
"navigation_bar.pins": "Tuts penjats",
"notification.favourite": "{name} a ajustat a sos favorits:",
"notification.follow": "{name} vos sèc",
"notification.mention": "{name} vos a mencionat:",
@ -195,6 +195,15 @@
"upload_button.label": "Ajustar un mèdia",
"upload_form.undo": "Anullar",
"upload_progress.label": "Mandadís…",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Mostrar la vidèo",
"video_player.toggle_sound": "Activar/Desactivar lo son",
"video_player.toggle_visible": "Mostrar/Rescondre la vidèo",

@ -195,6 +195,15 @@
"upload_button.label": "Dodaj zawartość multimedialną",
"upload_form.undo": "Cofnij",
"upload_progress.label": "Wysyłanie",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Przełącz wideo",
"video_player.toggle_sound": "Przełącz dźwięk",
"video_player.toggle_visible": "Przełącz widoczność",

@ -33,8 +33,8 @@
"column.home": "Página inicial",
"column.mutes": "Usuários silenciados",
"column.notifications": "Notificações",
"column.public": "Global",
"column.pins": "Postagens fixadas",
"column.public": "Global",
"column_back_button.label": "Voltar",
"column_header.hide_settings": "Esconder configurações",
"column_header.moveLeft_settings": "Mover coluna para a esquerda",
@ -110,9 +110,9 @@
"navigation_bar.info": "Mais informações",
"navigation_bar.logout": "Sair",
"navigation_bar.mutes": "Usuários silenciados",
"navigation_bar.pins": "Postagens fixadas",
"navigation_bar.preferences": "Preferências",
"navigation_bar.public_timeline": "Global",
"navigation_bar.pins": "Postagens fixadas",
"notification.favourite": "{name} adicionou a sua postagem aos favoritos",
"notification.follow": "{name} te seguiu",
"notification.mention": "{name} te mencionou",
@ -195,6 +195,15 @@
"upload_button.label": "Adicionar mídia",
"upload_form.undo": "Anular",
"upload_progress.label": "Salvando...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expandir vídeo",
"video_player.toggle_sound": "Ligar/Desligar som",
"video_player.toggle_visible": "Ligar/Desligar vídeo",

@ -33,6 +33,7 @@
"column.home": "Home",
"column.mutes": "Utilizadores silenciados",
"column.notifications": "Notificações",
"column.pins": "Pinned toot",
"column.public": "Global",
"column_back_button.label": "Voltar",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Mais informações",
"navigation_bar.logout": "Sair",
"navigation_bar.mutes": "Utilizadores silenciados",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferências",
"navigation_bar.public_timeline": "Global",
"notification.favourite": "{name} adicionou o teu post aos favoritos",
@ -193,6 +195,15 @@
"upload_button.label": "Adicionar media",
"upload_form.undo": "Anular",
"upload_progress.label": "A gravar...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expandir vídeo",
"video_player.toggle_sound": "Ligar/Desligar som",
"video_player.toggle_visible": "Ligar/Desligar vídeo",

@ -33,6 +33,7 @@
"column.home": "Главная",
"column.mutes": "Список глушения",
"column.notifications": "Уведомления",
"column.pins": "Pinned toot",
"column.public": "Глобальная лента",
"column_back_button.label": "Назад",
"column_header.hide_settings": "Скрыть настройки",
@ -109,6 +110,7 @@
"navigation_bar.info": "Об узле",
"navigation_bar.logout": "Выйти",
"navigation_bar.mutes": "Список глушения",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Опции",
"navigation_bar.public_timeline": "Глобальная лента",
"notification.favourite": "{name} понравился Ваш статус",
@ -193,6 +195,15 @@
"upload_button.label": "Добавить медиаконтент",
"upload_form.undo": "Отменить",
"upload_progress.label": "Загрузка...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Развернуть видео",
"video_player.toggle_sound": "Вкл./выкл. звук",
"video_player.toggle_visible": "Показать/скрыть",

@ -33,6 +33,7 @@
"column.home": "Home",
"column.mutes": "Muted users",
"column.notifications": "Notifications",
"column.pins": "Pinned toot",
"column.public": "Federated timeline",
"column_back_button.label": "Back",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "About this instance",
"navigation_bar.logout": "Logout",
"navigation_bar.mutes": "Muted users",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Preferences",
"navigation_bar.public_timeline": "Federated timeline",
"notification.favourite": "{name} favourited your status",
@ -193,6 +195,15 @@
"upload_button.label": "Add media",
"upload_form.undo": "Undo",
"upload_progress.label": "Uploading...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Expand video",
"video_player.toggle_sound": "Toggle sound",
"video_player.toggle_visible": "Toggle visibility",

@ -33,6 +33,7 @@
"column.home": "Anasayfa",
"column.mutes": "Susturulmuş kullanıcılar",
"column.notifications": "Bildirimler",
"column.pins": "Pinned toot",
"column.public": "Federe zaman tüneli",
"column_back_button.label": "Geri",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Genişletilmiş bilgi",
"navigation_bar.logout": ıkış",
"navigation_bar.mutes": "Sessize alınmış kullanıcılar",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Tercihler",
"navigation_bar.public_timeline": "Federe zaman tüneli",
"notification.favourite": "{name} senin durumunu favorilere ekledi",
@ -193,6 +195,15 @@
"upload_button.label": "Görsel ekle",
"upload_form.undo": "Geri al",
"upload_progress.label": "Yükleniyor...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Videoyu genişlet",
"video_player.toggle_sound": "Sesi aç/kapa",
"video_player.toggle_visible": "Göster/gizle",

@ -33,6 +33,7 @@
"column.home": "Головна",
"column.mutes": "Заглушені користувачі",
"column.notifications": "Сповіщення",
"column.pins": "Pinned toot",
"column.public": "Глобальна стрічка",
"column_back_button.label": "Назад",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "Про інстанцію",
"navigation_bar.logout": "Вийти",
"navigation_bar.mutes": "Заглушені користувачі",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "Налаштування",
"navigation_bar.public_timeline": "Глобальна стрічка",
"notification.favourite": "{name} сподобався ваш допис",
@ -193,6 +195,15 @@
"upload_button.label": "Додати медіаконтент",
"upload_form.undo": "Відмінити",
"upload_progress.label": "Завантаження...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "Розгорнути ",
"video_player.toggle_sound": "Увімкнути/вимкнути звук",
"video_player.toggle_visible": "Показати/приховати",

@ -33,6 +33,7 @@
"column.home": "主页",
"column.mutes": "被静音的用户",
"column.notifications": "通知",
"column.pins": "Pinned toot",
"column.public": "跨站公共时间轴",
"column_back_button.label": "返回",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "关于本站",
"navigation_bar.logout": "注销",
"navigation_bar.mutes": "被静音的用户",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "首选项",
"navigation_bar.public_timeline": "跨站公共时间轴",
"notification.favourite": "{name} 赞了你的嘟文",
@ -193,6 +195,15 @@
"upload_button.label": "上传媒体文件",
"upload_form.undo": "还原",
"upload_progress.label": "上传中……",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "展开影片",
"video_player.toggle_sound": "开关音效",
"video_player.toggle_visible": "打开或关上",

@ -33,6 +33,7 @@
"column.home": "主頁",
"column.mutes": "靜音名單",
"column.notifications": "通知",
"column.pins": "Pinned toot",
"column.public": "跨站時間軸",
"column_back_button.label": "返回",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "關於本服務站",
"navigation_bar.logout": "登出",
"navigation_bar.mutes": "被你靜音的用戶",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "偏好設定",
"navigation_bar.public_timeline": "跨站時間軸",
"notification.favourite": "{name} 喜歡你的文章",
@ -193,6 +195,15 @@
"upload_button.label": "上載媒體檔案",
"upload_form.undo": "還原",
"upload_progress.label": "上載中……",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "展開影片",
"video_player.toggle_sound": "開關音效",
"video_player.toggle_visible": "打開或關上",

@ -33,6 +33,7 @@
"column.home": "家",
"column.mutes": "消音的使用者",
"column.notifications": "通知",
"column.pins": "Pinned toot",
"column.public": "聯盟時間軸",
"column_back_button.label": "上一頁",
"column_header.hide_settings": "Hide settings",
@ -109,6 +110,7 @@
"navigation_bar.info": "關於本站",
"navigation_bar.logout": "登出",
"navigation_bar.mutes": "消音的使用者",
"navigation_bar.pins": "Pinned toots",
"navigation_bar.preferences": "偏好設定",
"navigation_bar.public_timeline": "聯盟時間軸",
"notification.favourite": "{name}喜歡你的狀態",
@ -193,6 +195,15 @@
"upload_button.label": "增加媒體",
"upload_form.undo": "復原",
"upload_progress.label": "上傳中...",
"video.close": "Close video",
"video.exit_fullscreen": "Exit full screen",
"video.expand": "Expand video",
"video.fullscreen": "Full screen",
"video.hide": "Hide video",
"video.mute": "Mute sound",
"video.pause": "Pause",
"video.play": "Play",
"video.unmute": "Unmute sound",
"video_player.expand": "展開影片",
"video_player.toggle_sound": "切換音效",
"video_player.toggle_visible": "切換可見性",

@ -24,6 +24,11 @@ function main() {
const emojify = require('../mastodon/emoji').default;
const { getLocale } = require('../mastodon/locales');
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);
@ -65,22 +70,21 @@ function main() {
window.open(e.target.href, 'mastodon-intent', 'width=400,height=400,resizable=no,menubar=no,status=no,scrollbars=yes');
});
});
});
delegate(document, '.video-player video', 'click', ({ target }) => {
if (target.paused) {
target.play();
} else {
target.pause();
}
});
[].forEach.call(document.querySelectorAll('[data-component="Video"]'), (content) => {
const props = JSON.parse(content.getAttribute('data-props'));
ReactDOM.render(<VideoContainer locale={locale} {...props} />, content);
});
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="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 }) => {

@ -566,6 +566,10 @@
opacity: 1;
animation: fade 150ms linear;
.video-player {
margin-top: 8px;
}
&.status-direct {
background: lighten($ui-base-color, 8%);
@ -734,6 +738,10 @@
height: 22px;
}
}
.video-player {
margin-top: 8px;
}
}
.detailed-status__meta {
@ -1404,9 +1412,6 @@
.drawer {
flex: 1 1 100%;
overflow: hidden;
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
}
@media screen and (min-width: 360px) {
@ -1582,9 +1587,6 @@
overflow-x: hidden;
flex: 1 1 auto;
-webkit-overflow-scrolling: touch;
@supports(display: grid) { // hack to fix Chrome <57
contain: strict;
}
&.optionally-scrollable {
overflow-y: auto;
@ -2341,10 +2343,16 @@ button.icon-button.active i.fa-retweet {
.media-spoiler {
background: $base-overlay-background;
color: $primary-text-color;
color: $ui-primary-color;
border: 0;
width: 100%;
height: 100%;
&:hover,
&:active,
&:focus {
color: lighten($ui-primary-color, 8%);
}
}
.media-spoiler__warning {
@ -3798,6 +3806,181 @@ button.icon-button.active i.fa-retweet {
z-index: 5;
}
.video-player {
overflow: hidden;
position: relative;
background: $base-shadow-color;
video {
height: 100%;
width: 100%;
z-index: 1;
}
&.fullscreen {
width: 100% !important;
height: 100% !important;
margin: 0;
video {
max-width: 100% !important;
max-height: 100% !important;
}
}
&.inline {
video {
object-fit: cover;
position: relative;
top: 50%;
transform: translateY(-50%);
}
}
&__controls {
position: absolute;
z-index: 2;
bottom: 0;
left: 0;
right: 0;
box-sizing: border-box;
background: linear-gradient(0deg, rgba($base-shadow-color, 0.8) 0, rgba($base-shadow-color, 0.35) 60%, transparent);
padding: 0 10px;
opacity: 0;
transition: opacity .1s ease;
&.active {
opacity: 1;
}
}
&.inactive {
video,
.video-player__controls {
visibility: hidden;
}
}
&__spoiler {
display: none;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 4;
border: 0;
background: $base-shadow-color;
color: $ui-primary-color;
transition: none;
pointer-events: none;
&.active {
display: block;
pointer-events: auto;
&:hover,
&:active,
&:focus {
color: lighten($ui-primary-color, 8%);
}
}
&__title {
display: block;
font-size: 14px;
}
&__subtitle {
display: block;
font-size: 11px;
font-weight: 500;
}
}
&__buttons {
padding-bottom: 10px;
font-size: 16px;
&.left {
float: left;
button {
padding-right: 10px;
}
}
&.right {
float: right;
button {
padding-left: 10px;
}
}
button {
background: transparent;
padding: 0;
border: 0;
color: $white;
&:active,
&:hover,
&:focus {
color: $ui-highlight-color;
}
}
}
&__seek {
cursor: pointer;
height: 24px;
position: relative;
&::before {
content: "";
width: 100%;
background: rgba($white, 0.35);
display: block;
position: absolute;
height: 4px;
top: 10px;
}
&__progress {
display: block;
position: absolute;
height: 4px;
top: 10px;
background: $ui-highlight-color;
}
&__handle {
position: absolute;
z-index: 3;
opacity: 0;
border-radius: 50%;
width: 12px;
height: 12px;
top: 6px;
margin-left: -6px;
transition: opacity .1s ease;
background: $ui-highlight-color;
pointer-events: none;
&.active {
opacity: 1;
}
}
&:hover {
.video-player__seek__handle {
opacity: 1;
}
}
}
}
.media-spoiler-video {
background-size: cover;
background-repeat: no-repeat;

@ -143,19 +143,6 @@
}
}
}
.status__attachments {
margin-top: 8px;
overflow: hidden;
width: 100%;
box-sizing: border-box;
position: relative;
.status__attachments__inner {
display: flex;
height: 214px;
}
}
}
.detailed-status.light {
@ -237,139 +224,22 @@
}
}
.detailed-status__attachments {
margin-top: 8px;
overflow: hidden;
width: 100%;
box-sizing: border-box;
position: relative;
.status-card {
border-color: lighten($ui-secondary-color, 4%);
color: darken($ui-primary-color, 4%);
.status__attachments__inner {
display: flex;
height: 360px;
}
}
.video-player {
margin-top: 8px;
height: 300px;
overflow: hidden;
position: relative;
video {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
top: 50%;
transform: translateY(-50%);
&:hover {
background: lighten($ui-secondary-color, 4%);
}
}
}
.media-item,
.video-item {
box-sizing: border-box;
position: relative;
left: auto;
top: auto;
right: auto;
bottom: auto;
float: left;
border: medium none;
display: block;
flex: 1 1 auto;
width: 100%;
height: 100%;
overflow: hidden;
margin-right: 2px;
&:last-child {
margin-right: 0;
}
a {
display: block;
width: 100%;
height: 100%;
background: no-repeat scroll center center / cover;
text-decoration: none;
cursor: zoom-in;
}
video {
position: relative;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
top: 50%;
transform: translateY(-50%);
}
}
.video-item {
a {
cursor: pointer;
}
.video-item__play {
position: absolute;
top: 50%;
left: 50%;
font-size: 36px;
transform: translate(-50%, -50%);
padding: 5px;
border-radius: 100px;
color: rgba($primary-text-color, 0.8);
z-index: 1;
}
}
.media-spoiler {
background: $ui-primary-color;
width: 100%;
height: 100%;
cursor: pointer;
position: absolute;
top: 0;
left: 0;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
transition: all 100ms linear;
z-index: 2;
&:hover {
background: darken($ui-primary-color, 5%);
}
span {
display: block;
&:first-child {
font-size: 14px;
}
&:last-child {
font-size: 11px;
font-weight: 500;
}
.status-card__title,
.status-card__description {
color: $ui-base-color;
}
}
.media-spoiler-wrapper {
&.media-spoiler-wrapper__visible {
.media-spoiler {
display: none;
}
.spoiler-button {
display: block;
}
.status-card__image {
background: $ui-secondary-color;
}
}

@ -19,17 +19,14 @@
%a.status__content__spoiler-link{ href: '#' }= t('statuses.show_more')
.e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status)
- unless status.media_attachments.empty?
- if !status.media_attachments.empty?
- if status.media_attachments.first.video?
.video-player
= render partial: 'stream_entries/content_spoiler', locals: { sensitive: status.sensitive? }
%video.u-video{ src: status.media_attachments.first.file.url(:original), loop: true }
- video = status.media_attachments.first
%div{ data: { component: 'Video', props: Oj.dump(src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive?, width: 670, height: 380) }}
- else
.detailed-status__attachments
= render partial: 'stream_entries/content_spoiler', locals: { sensitive: status.sensitive? }
.status__attachments__inner
- status.media_attachments.each do |media|
= render partial: 'stream_entries/media', locals: { media: media }
%div{ data: { component: 'MediaGallery', props: Oj.dump(height: 380, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }}
- elsif status.preview_cards.first
%div{ data: { component: 'Card', props: Oj.dump('maxDescription': 160, card: ActiveModelSerializers::SerializableResource.new(status.preview_cards.first, serializer: REST::PreviewCardSerializer).as_json) }}
.detailed-status__meta
%data.dt-published{ value: status.created_at.to_time.iso8601 }

@ -21,15 +21,8 @@
.e-content{ lang: status.language, style: "display: #{status.spoiler_text? ? 'none' : 'block'}; direction: #{rtl_status?(status) ? 'rtl' : 'ltr'}" }= Formatter.instance.format(status)
- unless status.media_attachments.empty?
.status__attachments
= render partial: 'stream_entries/content_spoiler', locals: { sensitive: status.sensitive? }
- if status.media_attachments.first.video?
.status__attachments__inner
.video-item
= link_to (status.media_attachments.first.remote_url.blank? ? status.media_attachments.first.file.url(:original) : status.media_attachments.first.remote_url), style: "background-image: url(#{status.media_attachments.first.file.url(:small)})", target: '_blank', rel: 'noopener', class: 'u-video' do
.video-item__play
= fa_icon('play')
- else
.status__attachments__inner
- status.media_attachments.each do |media|
= render partial: 'stream_entries/media', locals: { media: media }
- if status.media_attachments.first.video?
- video = status.media_attachments.first
%div{ data: { component: 'Video', props: Oj.dump(src: video.file.url(:original), preview: video.file.url(:small), sensitive: status.sensitive?, width: 610, height: 343) }}
- else
%div{ data: { component: 'MediaGallery', props: Oj.dump(height: 343, 'autoPlayGif': current_account&.user&.setting_auto_play_gif, media: status.media_attachments.map { |a| ActiveModelSerializers::SerializableResource.new(a, serializer: REST::MediaAttachmentSerializer).as_json }) }}

Loading…
Cancel
Save